{"action":"created","issue":{"url":"https://api.github.com/repos/cssmagic/blog/issues/7","repository_url":"https://api.github.com/repos/cssmagic/blog","labels_url":"https://api.github.com/repos/cssmagic/blog/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/cssmagic/blog/issues/7/comments","events_url":"https://api.github.com/repos/cssmagic/blog/issues/7/events","html_url":"https://github.com/cssmagic/blog/issues/7","id":15731250,"number":7,"title":"关于“从网页分享到微信”的实现","user":{"login":"cssmagic","id":1231359,"avatar_url":"https://avatars.githubusercontent.com/u/1231359?v=3","gravatar_id":"","url":"https://api.github.com/users/cssmagic","html_url":"https://github.com/cssmagic","followers_url":"https://api.github.com/users/cssmagic/followers","following_url":"https://api.github.com/users/cssmagic/following{/other_user}","gists_url":"https://api.github.com/users/cssmagic/gists{/gist_id}","starred_url":"https://api.github.com/users/cssmagic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cssmagic/subscriptions","organizations_url":"https://api.github.com/users/cssmagic/orgs","repos_url":"https://api.github.com/users/cssmagic/repos","events_url":"https://api.github.com/users/cssmagic/events{/privacy}","received_events_url":"https://api.github.com/users/cssmagic/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/cssmagic/blog/labels/mobile","name":"mobile","color":"eb6420"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":12,"created_at":"2013-06-19T07:47:18Z","updated_at":"2016-06-09T14:26:25Z","closed_at":null,"body":"# 关于“从网页分享到微信”的实现\r\n\r\n公司的手机版网站是与微信公众账号配合运营的，有相当大的一部分流量来自微信用户。手机版的商品详情页提供了“分享到微博”功能，那么很自然地，老板希望也可以分享到微信。\r\n\r\n在接到这个需求之后，我搜了一下相关资料，针对这个问题做了一些研究，简单小结如下。\r\n\r\n## 官方文档\r\n\r\n微信开放平台的介绍： <http://open.weixin.qq.com/intro/>\r\n\r\n可以看出微信提供了“分享给好友”和“分享到朋友圈”官方接口，效果看起来也很不错。但是，这个接口只适用于 iOS/Android App，并不适用于网页。\r\n\r\n除此以外，微信没有公开任何相关资料，也就是说，微信官方没有提供任何从**网页分享到微信**的解决方案。当然这也可以理解，毕竟微信的整个生态都是建立在手机客户端之上的，目前对网页端缺乏支持也是情理之中。\r\n\r\n## 民间传说\r\n\r\n官方不给力，还是求助于民间高人吧。很快，找到了这篇文章：[《36氪：如何在网页中添加“分享到朋友圈”按钮》](http://www.36kr.com/p/161946.html)\r\n\r\n（下图摘自该文章）\r\n\r\n![36氪的微信分享功能](https://f.cloud.github.com/assets/1231359/673300/e65cb894-d8b2-11e2-9086-cff425d37c83.png)\r\n\r\n有图有真相，36氪自己的网站就是这么做的。当用户使用微信浏览网站时，可以将当前页面分享至朋友圈。\r\n\r\n其中的技术原理可以参考[“我爱水煮鱼”的一篇教程](http://blog.wpjam.com/m/weixinjsbridge/)。简单来说，微信在自己的浏览器（WebView）中埋了一个桥变量 `WeixinJSBridge`，可以实现 WebView 中的 JavaScript 对外层原生应用的功能调用。显然这是一个私有接口，而很多网站利用了这个未公开的桥变量实现了“分享给好友”、“分享到朋友圈”甚至是“关注微信”这样的功能。\r\n\r\n既然如此，开工！\r\n\r\n## 残酷真相\r\n\r\n很快在详情页部署了相关脚本，并且确实可以获取到这个桥变量及其 `.invoke()` 方法，心中不禁一阵窃喜！\r\n\r\n![函数源码](https://f.cloud.github.com/assets/1231359/673301/eafc1908-d8b2-11e2-9df2-18a6f74ba821.png)\r\n\r\n上面这张图就是 `alert()` 出来的 `WeixinJSBridge.invoke()` 方法的源码。虽然是混淆过的，但基本上也可以看得出来它是干什么的。这里遇到一个小坑，`WeixinJSBridge` 对象会在页面加载一段时间之后才会埋入页面，并且其 `.invoke()` 方法也要再等一会儿才会生成。当然这都不算什么，因为更大的坑还在后面。\r\n\r\n参照民间高人的示例，试着写了个分享到朋友圈的方法，放到微信里测试，怎么都出不来。\r\n\r\n“程序写错了？” “不支持开发环境的假域名？” “人品问题？”\r\n\r\n在经历了反复的自我否定和反复的否定自我否定之后，我只好继续搜索答案。果然，有网友反映说，从微信 4.2 版开始，这个 `WeixinJSBridge` 桥变量就不好用了。我一看自己手机上的微信，妈呀，都 4.5 了。\r\n\r\n这么说，是微信把原先的“漏洞”给堵上了。好日子到头了，查了一下，果然连 [36氪](http://www.36kr.com/) 自己的新版网站也已经找不到这功能了。\r\n\r\n## 退求其次\r\n\r\n既然如此，我也就不作梦了，从网页直接分享至微信的功能基本上是不可能实现了。\r\n\r\n不过，这并不代表我们不能再做些努力。我发现，微信的浏览器已经整合了分享功能。点击微信浏览器右上角的动作按钮，可以选择各种分享方式和其它操作。既然如此，我们至少还可以提醒用户——“微信也能分享哦”！\r\n\r\n![微信分享提示](https://f.cloud.github.com/assets/1231359/673304/f730d948-d8b2-11e2-9242-aed8ad57e80c.png)\r\n\r\n至此，这个需求算是告一段落，老板在了解到我的坎坷经历后，对这个结果还是比较满意的。\r\n\r\n***\r\n\r\n&copy; Creative Commons BY-NC-ND 3.0 &nbsp; | &nbsp; [我要订阅](http://www.cssmagic.net/blog/subscribe) &nbsp; | &nbsp; [我要捐助](http://www.cssmagic.net/blog/donate)\r\n"},"comment":{"url":"https://api.github.com/repos/cssmagic/blog/issues/comments/224911206","html_url":"https://github.com/cssmagic/blog/issues/7#issuecomment-224911206","issue_url":"https://api.github.com/repos/cssmagic/blog/issues/7","id":224911206,"user":{"login":"awong1900","id":4022612,"avatar_url":"https://avatars.githubusercontent.com/u/4022612?v=3","gravatar_id":"","url":"https://api.github.com/users/awong1900","html_url":"https://github.com/awong1900","followers_url":"https://api.github.com/users/awong1900/followers","following_url":"https://api.github.com/users/awong1900/following{/other_user}","gists_url":"https://api.github.com/users/awong1900/gists{/gist_id}","starred_url":"https://api.github.com/users/awong1900/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/awong1900/subscriptions","organizations_url":"https://api.github.com/users/awong1900/orgs","repos_url":"https://api.github.com/users/awong1900/repos","events_url":"https://api.github.com/users/awong1900/events{/privacy}","received_events_url":"https://api.github.com/users/awong1900/received_events","type":"User","site_admin":false},"created_at":"2016-06-09T14:26:25Z","updated_at":"2016-06-09T14:26:25Z","body":"好坎坷啊"}}
{"actor":{"display_login":"awong1900"}}