微信瀏覽器內置WeixinJSBridge API
微信瀏覽器是個特殊的環境,它內置了一些jsAPI卻沒公佈出來,同時技術仍不成熟,部分接口在不同的環境下可能出現不能使用。
//加載完後執行,只在微信瀏覽內執行 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 分享給微信好友 (點擊右上角發送給朋友時執行) var wxData = { "appId": "wx69d816f8fbc1066c", // 服務號可以填寫appId "imgUrl" : 'http://www.scscms.com/weixin/images/1.jpg', "link" : 'http://www.scscms.com', "desc" : '分享內容描述', "title" : "分享標題" }; WeixinJSBridge.on('menu:share:appmessage', function (argv) { WeixinJSBridge.invoke('sendAppMessage', { "appid":wxData.appId, "img_url":wxData.imgUrl, "link":wxData.link, "desc":wxData.desc, "title":wxData.title, "img_width":"120", "img_height":"120" }, function (resp) { alert(resp.err_msg); // send_app_msg:cancel 用戶取消 // send_app_msg:fail 發送失敗 // send_app_msg:confirm 發送成功 }); }); });
點擊後彈出分享界面,同時可輸入評論。接收到分別是兩條信息,評論先顯示,然後顯示分享的組合。如果你的域名在白名單中還可以直接執行sendAppMessage分享,否則提示access_denied錯誤。如下:
//分享給朋友 function sendAppMessage(title,desc,link,imgUrl){ WeixinJSBridge.invoke('sendAppMessage',{ "appid":'',//必須是正常的appid或者留空 "img_url":imgUrl, "link":link, "desc": desc, "title":title }); }
以下是分享到朋友圈代碼:
//分享到朋友圈 function weixinShareTimeline(title,desc,link,imgUrl){ WeixinJSBridge.invoke('shareTimeline',{ "img_url":imgUrl, "link":link, "desc": desc, "title":title }); } //點右上角菜單分享時 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.on('menu:share:timeline', function (argv) { weixinShareTimeline(title,desc,link,imgUrl); }); });
分享到騰訊微博代碼:
function shareWeibo(content, url) { WeixinJSBridge.invoke('shareWeibo', { "content":content, //評論 "url":url //標題與概要圖片在此自動獲取 }, function (res) { alert(res.err_msg); //share_weibo:ok 分享成功 //share_weibo:cancel 用戶取消 //share_weibo:fail 分享失敗 }); } //點擊右上角菜單分享時共用數據 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.on('menu:share:weibo', function (argv) { shareWeibo(content, url); }) });
而針對微信瀏覽器右上角按鈕及底部工具欄是可以隱藏或者顯示的。
WeixinJSBridge.call('showOptionMenu');//顯示網頁右上角的按鈕 WeixinJSBridge.call('hideOptionMenu');//隱藏網頁右上角的按鈕 WeixinJSBridge.call('showToolbar');//顯示底部工具欄 WeixinJSBridge.call('hideToolbar');//隱藏底部工具欄
還有在鏈接URL後面配置上 #wechat_webview_type=1 用微信打開就會自動隱藏底部工具欄。解決部分人希望進去就沒有底部工具欄要求。
同時透露一個沒公開的API,關閉微信瀏覽器返回微信聊天界面:
WeixinJSBridge.call('closeWindow');
獲取用戶的網絡連接類型:
WeixinJSBridge.invoke('getNetworkType', {}, function (e) { alert(e.err_msg); /*network_type:wifi wifi網絡 * network_type:edge 非wifi,包含3G/2G * network_type:fail 網絡斷開連接 * network_type:wwan 2g或者3g */ });
獲取不同的鏈接傳不同的數據是非常有利的。比如在edge鏈接下就別給我整大圖片出來。如果是wifi模式下你纔可整個大大的漂亮的圖片出來,還可以調用微信的看圖片API哦:
//微信原生看圖 var pic_list=['http://www.scscms.com/weixin/images/1.jpg','http://www.scscms.com/weixin/images/2.jpg'];//圖片列表 WeixinJSBridge.invoke('imagePreview', { 'current' : pic_list[0], 'urls' : pic_list });
微信中回覆文本鏈接地址會自動識別爲鏈接地址而形成可點擊的鏈接,在開發模式下或網頁快速回復發送<a href="url">文本</a>或者<a href='url'>文本</a>可正常顯示鏈接,但如果沒加引號將不正常顯示,還有在web微信裏都不能正常顯示html。
Android平臺下則可以通過<a href="weixin://contacts/profile/微信ID或微信號">的方式打開資料頁,以便快速關注;WinPhone下,則是通過<a href="weixin://profile/微信ID">的方式打開。或者用下面代碼來關注指定帳號:
//關注指定的微信號 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 添加成功 //e.err_msg:system:access_denied 拒絕訪問 if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){ //關注成功,或者已經關注過 } }) }
問題是這些接口可不平民隨便可以調用的,反正我常常得到的結果就是system:access_denied