微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。
一、微信浏览器
通过在电脑上打开微信的网页,我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现分享到微信朋友圈,和判断一个微信号的关注状态以及实现关注指定微信号等功能。
二、分享到朋友圈
function weixinShareTimeline(title,desc,link,imgUrl){ WeixinJSBridge.invoke(‘shareTimeline’,{ “img_url”:imgUrl, //”img_width”:”640″, //”img_height”:”640″, “link”:link, “desc”: desc, “title”:title }); }
三、发送给好友
function weixinSendAppMessage(title,desc,link,imgUrl){ WeixinJSBridge.invoke(‘sendAppMessage’,{ //”appid”:appId, “img_url”:imgUrl, //”img_width”:”640″, //”img_height”:”640″, “link”:link, “desc”:desc, “title”:title }); }
四、分享到腾讯微博
function weixinShareWeibo(title,link){ WeixinJSBridge.invoke(‘shareWeibo’,{ “content”:title + link, “url”:link }); }
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>微信公众平台开发最佳实践</title> </head> <body style=""> <script type="text/javascript"> document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 发送给好友 WeixinJSBridge.on('menu:share:appmessage', function (argv) { WeixinJSBridge.invoke('sendAppMessage', { "appid": "123", "img_url": "http://bcs.duapp.com/api100/image/logo/lover.jpg", "img_width": "160", "img_height": "160", "link": "http://api100.duapp.com/card/", "desc": "山无陵,天地合,乃敢与君绝。", "title": "爱情贺卡" }, function (res) { _report('send_msg', res.err_msg); }) }); // 分享到朋友圈 WeixinJSBridge.on('menu:share:timeline', function (argv) { WeixinJSBridge.invoke('shareTimeline', { "img_url": "http://bcs.duapp.com/api100/image/logo/newyear.jpg", "img_width": "160", "img_height": "160", "link": "http://api100.duapp.com/card/", "desc": "Best wishes for a wonderful new year.", "title": "新年贺卡" }, function (res) { _report('timeline', res.err_msg); }); }); }, false) </script> </body</html>