微信內置瀏覽器私有接口WinXinJsBridge介紹

　　關於微信內置瀏覽器私有接口WeiXinJsBridge，只是以前接觸過的一個微信公衆號項目中遇到過，不過並無深刻研究過，能夠說並無瞭解過。。。

　　恰好今天無心中看到了這方面的知識，就補習一下，彌補一下本身短缺的js知識，雖然只是瞭解了一點，可是仍是先記錄下來，一方面加強本身的記憶，另外一方面，順便練練手，不至於未來使用的時候，找到了地方。下面進入正題。

　　看了這個微信瀏覽器私有接口WeiXinJsBridge，大體總結了一下幾個小的有用的知識點：

　　一、分享給好友。

　　二、分享到朋友圈。

　　三、分享到微博。

　　四、隱藏下方工具欄。

　　五、隱藏微信右上角分享按鈕（三個小圓點）。

　　要在微信頁面中調用這個接口，就要熟悉WeiXinJsBridge的標準吧。

　　1、首先介紹一下三個分享功能的分享函數吧。

　　

1 function sendMessage(){
2     WeixinJSBridge.on('menu:share:appmessage', function(argv){
3         alert("發送給好友");
4     });
5 }

 

　　只要在須要進行分享的位置處，調用此函數，就能夠完成分享功能。

　　2、分享函數介紹完了，那麼分享給好友，朋友圈，微博有什麼區別呢？天然是有區別的，不過這三種分享功能的代碼都是在分享函數內部實現的。

　　　　一、分享給好友。

 1 function sendMessage(){
 2     WeixinJSBridge.on('menu:share:appmessage', function(argv){
 3 
 4         WeixinJSBridge.invoke('sendAppMessage',{
 5 
 6             "appid":"", //appid 設置空就行了。
 7             "img_url": imgUrl, //分享時所帶的圖片路徑
 8             "img_width": "120", //圖片寬度
 9             "img_height": "120", //圖片高度
10             "link":url, //分享附帶連接地址
11             "desc":"我是一個介紹", //分享內容介紹
12             "title":"標題，再簡單不過了。"
13         }, function(res){
14             /*** 回調函數，最好設置爲空 ***/
15 
16         }); 
17     });
18 }          

 　　　　二、分享到朋友圈。

　　

 1 function sendMessage(){
 2 
 3     WeixinJSBridge.on('menu:share:timeline', function(argv){
 4 
 5         WeixinJSBridge.invoke('shareTimeline',{
 6 
 7             "appid":"", //appid 設置空就行了。
 8             "img_url": imgUrl, //分享時所帶的圖片路徑
 9             "img_width": "120", //圖片寬度
10             "img_height": "120", //圖片高度
11             "link":url, //分享附帶連接地址
12             "desc":"我是一個介紹", //分享內容介紹
13             "title":"標題，再簡單不過了。"
14         }, function(res){
15             /*** 回調函數，最好設置爲空 ***/});
16 
17         }); 
18     });
19 }    

　　　　三、分享到微博。

　　

 1 function sendMessage(){
 2 
 3     WeixinJSBridge.on('menu:share:weibo', function(argv){
 4 
 5         WeixinJSBridge.invoke('shareWeibo',{
 6             "content":dataForWeixin.title+' '+dataForWeixin.url,
 7             "url":dataForWeixin.url
 8         }, function(res){
 9             /*** 回調函數，最好設置爲空 ***/
10 
11         });
12     });
13 }            

　　觀察以上三個分享功能的代碼，能夠看出三個功能代碼的不一樣之處在於，1（'menu:share:weibo'）2（WeixinJSBridge.invoke('shareWeibo',{}）這兩個標紅位置的不一樣。使用的時候請注意。

　　注意：若是微信瀏覽器內部還沒有初始化，全部的接口都會是undefined。爲了不進去立刻就調用出錯，獲取微信初始化完成響應事件，初始化完成調用sendMessage進行綁定。

　　

if(document.addEventListener){
    document.addEventListener('WeixinJSBridgeReady',sendMessage,false); 
}else if(document.attachEvent){
    document.attachEvent('WeixinJSBridgeReady' , sendMessage);
    document.attachEvent('onWeixinJSBridgeReady' , sendMessage); 
}

　　上邊的代碼必不可少。

　　剩下的兩個功能代碼以下：

　　function hideMenu(){
　　　　WeixinJSBridge.call('hideOptionMenu'); //隱藏右下面工具欄
　　}

　　function showMenu(){
　　　　WeixinJSBridge.call('showOptionMenu'); //顯示右下面工具欄
　　}

　　function hideTool(){
　　　　WeixinJSBridge.call('hideToolbar');//隱藏右上角三個點按鈕。
　　}

　　function showTool(){
　　　　WeixinJSBridge.call('showToolbar');//顯示右上角三個點按鈕。
　　}

 

 

 

　　特別提醒：目前使用這個js代碼應該不行了吧，須要使用官方的js-sdk來實現分享功能了（使用官方的jssdk，須要微信公衆號）