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

微信瀏覽器私有接口WeiXinJsBridge，大致有以下幾個有用的知識點：

1. 分享給好友
2. 分享到朋友圈
3. 分享到微博
4. 隱藏下方工具欄
5. 隱藏微信右上角分享按鈕（三個小圓點）
6. 關閉瀏覽器回到公眾號對話窗口

WeiXinJsBridge的分享函數

WeiXinJsBridge的分享函數分為分享給好友，分享到朋友圈，分享到微博，但是這三種分享都是在下面在個函數內部實現的。

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

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

 

分享給好友 （menu:share:appmessage）

function sendMessage(){ WeixinJSBridge.on('menu:share:appmessage', function(argv){ WeixinJSBridge.invoke('sendAppMessage',{ "appid":"", //appid 設置空就好了。
            "img_url": imgUrl, //分享時所帶的圖片路徑
            "img_width": "120", //圖片寬度
            "img_height": "120", //圖片高度
            "link":url, //分享附帶鏈接地址
            "desc":"我是一個介紹", //分享內容介紹
            "title":"標題，再簡單不過了。" }, function(res){ /*** 回調函數，最好設置為空 ***/ }); }); }

 

分享到朋友圈（menu:share:timeline）

function sendMessage(){ WeixinJSBridge.on('menu:share:timeline', function(argv){ WeixinJSBridge.invoke('shareTimeline',{ "appid":"", //appid 設置空就好了。
            "img_url": imgUrl, //分享時所帶的圖片路徑
            "img_width": "120", //圖片寬度
            "img_height": "120", //圖片高度
            "link":url, //分享附帶鏈接地址
            "desc":"我是一個介紹", //分享內容介紹
            "title":"標題，再簡單不過了。" }, function(res){ /*** 回調函數，最好設置為空 ***/}); }); }); }

 

分享到微博（menu:share:weibo）

function sendMessage(){ WeixinJSBridge.on('menu:share:weibo', function(argv){ WeixinJSBridge.invoke('shareWeibo',{ "content":dataForWeixin.title+' '+dataForWeixin.url, "url":dataForWeixin.url }, function(res){ /*** 回調函數，最好設置為空 ***/ }); }); }

 

三個分享功能主要是監聽的接口不同，

分享給好友（menu:share:appmessage）;invoke(‘sendAppMessage’);
分享到朋友圈（menu:share:timeline）;invoke(‘shareTimeline’);
分享到微博（menu:share:weibo）;invoke(‘shareWeibo’);

 

注意：如果微信瀏覽器內部尚未初始化，所有的接口都會是undefined。為了避免進去馬上就調用出錯，獲取微信初始化完成響應事件，初始化完成調用sendMessage進行綁定。

 

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

 

WeixinJSBridge的隱藏函數

WeixinJSBridge.call(‘hideToolbar’); //隱藏右下面工具欄
WeixinJSBridge.call(‘showToolbar’); //顯示右下面工具欄
WeixinJSBridge.call(‘hideOptionMenu’); //隱藏右上角三個點按鈕。
WeixinJSBridge.call(‘showOptionMenu’); //顯示右上角三個點按鈕。

 

WeixinJSBridge的關閉函數

使用場景：頁面操作結束，需要關閉當前瀏覽器，回到公眾號對話窗口。

例如：某項目需求支持用戶將openId和手機號進行綁定和解綁定，在執行完解綁定后關閉當前微信瀏覽器回到公眾號對話窗口。

完成頁面操作后，在適當的時機調用微信提供的方法：

WeixinJSBridge.call('closeWindow');

即可關閉瀏覽器回到公眾號會話窗口。

 

參考鏈接：https://blog.csdn.net/weixin_44138611/article/details/89335931

嗯，就醬~~