在微信公众平台前端网页上添加分享按钮

微信公众平台开始支持前端网页，大家可能看到很多网页上都有分享到朋友圈，关注微信等按钮，点击它们都会弹出一个窗口让你分享和关注，这个是怎么实现的呢？

今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈，关注微信号等按钮。

微信内嵌浏览器

通过 Mac 远程调试 iPhone 上微信自己的网页，我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象：WeixinJSBridge，通过操作这个对象的相关方法可以实现分享到微信朋友圈，和判断一个微信号的关注状态以及实现关注指定微信号等功能。

分享到朋友圈




发送给好友

分享到腾讯微博

关注指定的微信号

其他的代码

[javascript] view plaincopy

1. function WeiXinShareBtn() {  
2. if (typeof WeixinJSBridge == "undefined") {  
3. alert(" 请先通过微信搜索 wow36kr 添加36氪为好友，通过微信分享文章 :) ");  
4. } else {  
5. WeixinJSBridge.invoke(‘shareTimeline‘, {  
6. "title": "36氪",  
7. "link": "http://www.36kr.com",  
8. "desc": " 关注互联网创业 ",  
9. "img_url": "http://www.36kr.com/assets/images/apple-touch-icon.png"  
10. });  
11. }  
12. }  

这是第三种

[javascript] view plaincopy

1. <script>  
2.         var imgUrl = "图片地址";  
3.         var lineLink = "网址";  
4.         var descContent = '爱在五月，\n\n妈咪爱1+1亲子健康之旅开启全国行首站----重庆站妈咪爱活性益生菌';  
5.         var shareTitle = '标题';  
6.         var appid = '';  
7.            
8.         function shareFriend() {  
9.             WeixinJSBridge.invoke('sendAppMessage',{  
10.                 "appid": appid,  
11.                 "img_url": imgUrl,  
12.                 "img_width": "200",  
13.                 "img_height": "200",  
14.                 "link": lineLink,  
15.                 "desc": descContent,  
16.                 "title": shareTitle  
17.             }, function(res) {  
18.                 //_report('send_msg', res.err_msg);  
19.             })  
20.         }  
21.         function shareTimeline() {  
22.             WeixinJSBridge.invoke('shareTimeline',{  
23.                 "img_url": imgUrl,  
24.                 "img_width": "200",  
25.                 "img_height": "200",  
26.                 "link": lineLink,  
27.                 "desc": descContent,  
28.                 "title": shareTitle  
29.             }, function(res) {  
30.                    //_report('timeline', res.err_msg);  
31.             });  
32.         }  
33.         function shareWeibo() {  
34.             WeixinJSBridge.invoke('shareWeibo',{  
35.                 "content": descContent,  
36.                 "url": lineLink,  
37.             }, function(res) {  
38.                 //_report('weibo', res.err_msg);  
39.             });  
40.         }  
41.         // 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。  
42.         document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {  
43.             // 发送给好友  
44.             WeixinJSBridge.on('menu:share:appmessage', function(argv){  
45.                 shareFriend();  
46.             });  
47.             // 分享到朋友圈  
48.             WeixinJSBridge.on('menu:share:timeline', function(argv){  
49.                 shareTimeline();  
50.             });  
51.             // 分享到微博  
52.             WeixinJSBridge.on('menu:share:weibo', function(argv){  
53.                 shareWeibo();  
54.             });  
55.         }, false);  
56. </script>  

长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你了解最新的前端技术。