关于“从网页分享到微信”的实现 #7
Comments
|
哈哈哈，你这个解决方案很妙 |
|
@edokeh 你微博提到过 tap 事件会触发两次，你博客里也有。你指的是这个吧，哈哈。 |
|
@edokeh 有没有想过把自己的 Zepto 包装一下，发现已经加载就不再运行？不过一旦微信碎片化之后，会带来 Zepto 版本问题。要么只对事件模块做包装…… |
|
太强了。。。你真是数据挖掘高手 |
|
其实可以直接将android的apk解压assets/jsapi/wxjs.js 看到全部js代码 |
|
@qdsang 对对，这倒真是一个不错的思路。谢谢提示！ |
|
最新消息，@zxlie 大神对 WeixinJSBridge 做了深入研究，并封装了一套很好用的 API。 原文在这里： http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 相信所有做微信相关的前端开发的同学都会从中受益的。 |
|
你这必须要在微信浏览器中打开才行，万一在safri中打开怎么办？ |
|
@lovekankan |
|
@cssmagic |
抱歉，没有听懂。能详细说说如何 “通过跳转网页来实现分享” 到微信吗？ |
|
好坎坷啊 |
|
看来只能用这个方法了，谢谢。 |
|
看来只能跳转到微信浏览器了，但是需要把这个链接带过去 |
|
楼上的挖坟 |
关于“从网页分享到微信”的实现
公司的手机版网站是与微信公众账号配合运营的，有相当大的一部分流量来自微信用户。手机版的商品详情页提供了“分享到微博”功能，那么很自然地，老板希望也可以分享到微信。
在接到这个需求之后，我搜了一下相关资料，针对这个问题做了一些研究，简单小结如下。
官方文档
微信开放平台的介绍： http://open.weixin.qq.com/intro/
可以看出微信提供了“分享给好友”和“分享到朋友圈”官方接口，效果看起来也很不错。但是，这个接口只适用于 iOS/Android App，并不适用于网页。
除此以外，微信没有公开任何相关资料，也就是说，微信官方没有提供任何从网页分享到微信的解决方案。当然这也可以理解，毕竟微信的整个生态都是建立在手机客户端之上的，目前对网页端缺乏支持也是情理之中。
民间传说
官方不给力，还是求助于民间高人吧。很快，找到了这篇文章：《36氪：如何在网页中添加“分享到朋友圈”按钮》
（下图摘自该文章）
有图有真相，36氪自己的网站就是这么做的。当用户使用微信浏览网站时，可以将当前页面分享至朋友圈。
其中的技术原理可以参考“我爱水煮鱼”的一篇教程。简单来说，微信在自己的浏览器（WebView）中埋了一个桥变量
WeixinJSBridge，可以实现 WebView 中的 JavaScript 对外层原生应用的功能调用。显然这是一个私有接口，而很多网站利用了这个未公开的桥变量实现了“分享给好友”、“分享到朋友圈”甚至是“关注微信”这样的功能。既然如此，开工！
残酷真相
很快在详情页部署了相关脚本，并且确实可以获取到这个桥变量及其
.invoke()方法，心中不禁一阵窃喜！上面这张图就是
alert()出来的WeixinJSBridge.invoke()方法的源码。虽然是混淆过的，但基本上也可以看得出来它是干什么的。这里遇到一个小坑，WeixinJSBridge对象会在页面加载一段时间之后才会埋入页面，并且其.invoke()方法也要再等一会儿才会生成。当然这都不算什么，因为更大的坑还在后面。参照民间高人的示例，试着写了个分享到朋友圈的方法，放到微信里测试，怎么都出不来。
“程序写错了？” “不支持开发环境的假域名？” “人品问题？”
在经历了反复的自我否定和反复的否定自我否定之后，我只好继续搜索答案。果然，有网友反映说，从微信 4.2 版开始，这个
WeixinJSBridge桥变量就不好用了。我一看自己手机上的微信，妈呀，都 4.5 了。这么说，是微信把原先的“漏洞”给堵上了。好日子到头了，查了一下，果然连 36氪 自己的新版网站也已经找不到这功能了。
退求其次
既然如此，我也就不作梦了，从网页直接分享至微信的功能基本上是不可能实现了。
不过，这并不代表我们不能再做些努力。我发现，微信的浏览器已经整合了分享功能。点击微信浏览器右上角的动作按钮，可以选择各种分享方式和其它操作。既然如此，我们至少还可以提醒用户——“微信也能分享哦”！
至此，这个需求算是告一段落，老板在了解到我的坎坷经历后，对这个结果还是比较满意的。
© Creative Commons BY-NC-ND 4.0 | 我要订阅 | 我要打赏
The text was updated successfully, but these errors were encountered: