关于“从网页分享到微信”的实现 #7

Open
cssmagic opened this Issue Jun 19, 2013 · 15 comments

Comments

Projects
None yet
8 participants
Owner

cssmagic commented Jun 19, 2013 edited

关于“从网页分享到微信”的实现

公司的手机版网站是与微信公众账号配合运营的,有相当大的一部分流量来自微信用户。手机版的商品详情页提供了“分享到微博”功能,那么很自然地,老板希望也可以分享到微信。

在接到这个需求之后,我搜了一下相关资料,针对这个问题做了一些研究,简单小结如下。

官方文档

微信开放平台的介绍: http://open.weixin.qq.com/intro/

可以看出微信提供了“分享给好友”和“分享到朋友圈”官方接口,效果看起来也很不错。但是,这个接口只适用于 iOS/Android App,并不适用于网页。

除此以外,微信没有公开任何相关资料,也就是说,微信官方没有提供任何从网页分享到微信的解决方案。当然这也可以理解,毕竟微信的整个生态都是建立在手机客户端之上的,目前对网页端缺乏支持也是情理之中。

民间传说

官方不给力,还是求助于民间高人吧。很快,找到了这篇文章:《36氪:如何在网页中添加“分享到朋友圈”按钮》

(下图摘自该文章)

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   |   我要订阅   |   我要打赏

edokeh commented Jun 19, 2013

哈哈哈,你这个解决方案很妙
另外你有没有发现,微信内嵌的浏览器里面居然内置了 Zepto ,会导致一些问题

Owner

cssmagic commented Jun 19, 2013

@edokeh 你微博提到过 tap 事件会触发两次,你博客里也有。你指的是这个吧,哈哈。

Owner

cssmagic commented Jun 19, 2013

@edokeh 有没有想过把自己的 Zepto 包装一下,发现已经加载就不再运行?不过一旦微信碎片化之后,会带来 Zepto 版本问题。要么只对事件模块做包装……

edokeh commented Jun 19, 2013

太强了。。。你真是数据挖掘高手
正如你说的,我现在确实是针对事件模块进行了修改
http://m.xyz.cn/assets/js/sea-modules/gallery/zepto/1.0.1/zepto-debug.js 搜索 weixin 就能看到了
唉,实在是太丑陋了,但是这种修改又不适合提交给 zepto,只能期望腾讯大发慈悲,发我等码农一条生路

qdsang commented Nov 29, 2013

其实可以直接将android的apk解压assets/jsapi/wxjs.js 看到全部js代码

Owner

cssmagic commented Nov 29, 2013

@qdsang 对对,这倒真是一个不错的思路。谢谢提示!

Owner

cssmagic commented Apr 10, 2014

最新消息,@zxlie 大神对 WeixinJSBridge 做了深入研究,并封装了一套很好用的 API。

原文在这里: http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html

相信所有做微信相关的前端开发的同学都会从中受益的。

你这必须要在微信浏览器中打开才行,万一在safri中打开怎么办?

Owner

cssmagic commented Nov 3, 2015

@lovekankan
在 Mobile Safari 中打开网页,本身就是无法分享到微信的。

@cssmagic
可以通过跳转网页来实现分享。毕竟在iphone上运行h5游戏微信浏览器的性能跟safri差距还是很大的

Owner

cssmagic commented Nov 3, 2015

@lovekankan
可以通过跳转网页来实现分享。……

抱歉,没有听懂。能详细说说如何 “通过跳转网页来实现分享” 到微信吗?

好坎坷啊

csrutil commented Sep 13, 2016

看来只能用这个方法了,谢谢。

alanhg commented Jun 7, 2017 edited

看来只能跳转到微信浏览器了,但是需要把这个链接带过去

hkongm commented Jun 15, 2017

楼上的挖坟

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment