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

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

Comments

Projects
None yet
8 participants
@cssmagic
Owner

cssmagic commented Jun 19, 2013

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

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

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

官方文档

微信开放平台的介绍: 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

This comment has been minimized.

Show comment Hide comment
@edokeh

edokeh Jun 19, 2013

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

edokeh commented Jun 19, 2013

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

@cssmagic

This comment has been minimized.

Show comment Hide comment
@cssmagic

cssmagic Jun 19, 2013

Owner

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

Owner

cssmagic commented Jun 19, 2013

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

@cssmagic

This comment has been minimized.

Show comment Hide comment
@cssmagic

cssmagic Jun 19, 2013

Owner

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

Owner

cssmagic commented Jun 19, 2013

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

@edokeh

This comment has been minimized.

Show comment Hide comment
@edokeh

edokeh Jun 19, 2013

太强了。。。你真是数据挖掘高手
正如你说的,我现在确实是针对事件模块进行了修改
http://m.xyz.cn/assets/js/sea-modules/gallery/zepto/1.0.1/zepto-debug.js 搜索 weixin 就能看到了
唉,实在是太丑陋了,但是这种修改又不适合提交给 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

This comment has been minimized.

Show comment Hide comment
@qdsang

qdsang Nov 29, 2013

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

qdsang commented Nov 29, 2013

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

@cssmagic

This comment has been minimized.

Show comment Hide comment
@cssmagic

cssmagic Nov 29, 2013

Owner

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

Owner

cssmagic commented Nov 29, 2013

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

@cssmagic

This comment has been minimized.

Show comment Hide comment
@cssmagic

cssmagic Apr 10, 2014

Owner

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

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

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

Owner

cssmagic commented Apr 10, 2014

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

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

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

@lovekankan

This comment has been minimized.

Show comment Hide comment
@lovekankan

lovekankan Nov 3, 2015

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

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

@cssmagic

This comment has been minimized.

Show comment Hide comment
@cssmagic

cssmagic Nov 3, 2015

Owner

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

Owner

cssmagic commented Nov 3, 2015

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

@lovekankan

This comment has been minimized.

Show comment Hide comment
@lovekankan

lovekankan Nov 3, 2015

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

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

@cssmagic

This comment has been minimized.

Show comment Hide comment
@cssmagic

cssmagic Nov 3, 2015

Owner

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

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

Owner

cssmagic commented Nov 3, 2015

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

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

@awong1900

This comment has been minimized.

Show comment Hide comment
@awong1900

awong1900 Jun 9, 2016

好坎坷啊

好坎坷啊

@csrutil

This comment has been minimized.

Show comment Hide comment
@csrutil

csrutil Sep 13, 2016

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

csrutil commented Sep 13, 2016

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

@alanhg

This comment has been minimized.

Show comment Hide comment
@alanhg

alanhg Jun 7, 2017

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

alanhg commented Jun 7, 2017

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

@hkongm

This comment has been minimized.

Show comment Hide comment
@hkongm

hkongm Jun 15, 2017

楼上的挖坟

hkongm commented Jun 15, 2017

楼上的挖坟

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