點擊網頁分享按鈕，觸發微信分享功能

微信公眾平台開始支持前端網頁，大家可能看到很多網頁上都有分享到朋友圈，關注微信等按鈕，點擊它們都會彈出一個窗口讓你分享和關注，這個是怎么實現的呢？今天就給大家講解下如何在微信公眾平台前端網頁上添加分享到朋友圈，關注微信號等按鈕。

我們可以發現微信內嵌瀏覽器定義了一個私有 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 }); }

關注指定的微信號

function weixinAddContact(name){ WeixinJSBridge.invoke("addContact", {webtype: "1",username: name}, function(e) { WeixinJSBridge.log(e.err_msg); //e.err_msg:add_contact:added 已經添加 //e.err_msg:add_contact:cancel 取消添加 //e.err_msg:add_contact:ok 添加成功
　　　　　　　　//WeixinJSBridge.log(d.err_msg); if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){ //關注成功，或者已經關注過 }
 }) }

function WeiXinShareBtn() {
if (typeof WeixinJSBridge == "undefined") {
alert(" 請先通過微信搜索 wow36kr 添加36氪為好友，通過微信分享文章 :) ");
} else {
WeixinJSBridge.invoke(‘shareTimeline‘, {
"title": "36氪",
"link": "http://www.36kr.com",
"desc": " 關注互聯網創業 ",
"img_url": "http://www.36kr.com/assets/images/apple-touch-icon.png"
});
}
}

 

<script>
var imgUrl = "圖片地址";
var lineLink = "網址";
var descContent = '愛在五月，\n\n媽咪愛1+1親子健康之旅開啟全國行首站----重慶站媽咪愛活性益生菌';
var shareTitle = '標題';
var appid = '';

function shareFriend() {
WeixinJSBridge.invoke('sendAppMessage',{
"appid": appid,
"img_url": imgUrl,
"img_width": "200",
"img_height": "200",
"link": lineLink,
"desc": descContent,
"title": shareTitle
}, function(res) {
//_report('send_msg', res.err_msg);
})
}
function shareTimeline() {
WeixinJSBridge.invoke('shareTimeline',{
"img_url": imgUrl,
"img_width": "200",
"img_height": "200",
"link": lineLink,
"desc": descContent,
"title": shareTitle
}, function(res) {
//_report('timeline', res.err_msg);
});
}
function shareWeibo() {
WeixinJSBridge.invoke('shareWeibo',{
"content": descContent,
"url": lineLink,
}, function(res) {
//_report('weibo', res.err_msg);
});
}
// 當微信內置瀏覽器完成內部初始化后會觸發WeixinJSBridgeReady事件。
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 發送給好友
WeixinJSBridge.on('menu:share:appmessage', function(argv){
shareFriend();
});
// 分享到朋友圈
WeixinJSBridge.on('menu:share:timeline', function(argv){
shareTimeline();
});
// 分享到微博
WeixinJSBridge.on('menu:share:weibo', function(argv){
shareWeibo();
});
}, false);
</script>