微信內置瀏覽器WeixinJSBridge的使用技巧(隱藏右上角按鈕,獲取用戶網(wǎng)絡狀態(tài),支付等)

更新時間：2024年02月15日 08:38:04 作者：ZHWenDong

這篇文章主要介紹了微信內置瀏覽器WeixinJSBridge的使用技巧,隱藏右上角按鈕,獲取用戶網(wǎng)絡狀態(tài),支付,隱藏下方工具欄等,需要的朋友可以參考下

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

分享給好友
分享到朋友圈
分享到微博
隱藏下方工具欄
隱藏微信右上角分享按鈕（三個小圓點）
關閉瀏覽器回到公眾號對話窗口
獲取用戶的網(wǎng)絡狀態(tài)
微信瀏覽器支付函數(shù)

WeiXinJsBridge的分享函數(shù)

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

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

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

分享給好友（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){
            /*** 回調函數(shù)，最好設置為空 ***/
        }); 
    });
}

分享到朋友圈（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){
            /*** 回調函數(shù)，最好設置為空 ***/});
        }); 
    });
}

分享到微博（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){
            /*** 回調函數(shù)，最好設置為空 ***/

        });
    });
}

三個分享功能主要是監(jiān)聽的接口不同，

分享給好友（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的隱藏函數(shù)

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

WeixinJSBridge的關閉函數(shù)使用場景：頁面操作結束，需要關閉當前瀏覽器，回到公眾號對話窗口。

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

完成頁面操作后，在適當?shù)臅r機調用微信提供的方法：

WeixinJSBridge.call('closeWindow');

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

在微信網(wǎng)頁中獲取用戶的網(wǎng)絡狀態(tài)

WeixinJSBridge.invoke('getNetworkType',{},function (e){
    // 在這里拿到e.err_msg，這里面就包含了所有的網(wǎng)絡類型
    alert(e.err_msg);
});

//e.err_msg的取值如下所示：

//network_type:wifi         wifi網(wǎng)絡
//network_type:edge      非wifi,包含3G/2G
//network_type:fail         網(wǎng)絡斷開連接
//network_type:wwan     2g或者3g

在微信網(wǎng)頁中支付

function onBridgeReady(orderId, response) {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: response.appId, //公眾號ID，由商戶傳入
          timeStamp: response.timeStamp, //時間戳，自1970年以來的秒數(shù)
          nonceStr: response.nonceStr, //隨機串
          package: response.packageVal,
          signType: response.signType, //微信簽名方式：
          paySign: response.paySign //微信簽名
        },
        function (res) {
          // 使用以上方式判斷前端返回,微信團隊鄭重提示：
          //res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對可靠。
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            $api.pay_order(orderId).then(res => {
              if (res.code == 1) {
                state.assistOne = false;
                state.assistTwo = false;
                $Toast({
                  duration: 3000,
                  message: "支付成功！"
                });
                emit("get_brand_wcpay");
              }
            });
          }
          // 支付過程中用戶取消
          if (res.err_msg == "get_brand_wcpay_request:cancel") {
          }
          // 支付失敗
          if (res.err_msg == "get_brand_wcpay_request:fail") {
          }
          /**
           * 其它
           * 1、請檢查預支付會話標識prepay_id是否已失效
           * 2、請求的appid與下單接口的appid是否一致
           * */
          if (res.err_msg == "調用支付JSAPI缺少參數(shù)：total_fee") {
          }
        }
      );
    }
    if (typeof WeixinJSBridge == "undefined") {
      if (document.addEventListener) {
        document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
      } else if (document.attachEvent) {
        document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
        document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
      }
    } else {
      onBridgeReady();
    }

以上就是微信內置瀏覽器WeixinJSBridge的使用技巧(隱藏右上角按鈕,獲取用戶網(wǎng)絡狀態(tài),支付等)的詳細內容，更多關于微信內置瀏覽器WeixinJSBridge的使用技巧的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

js遍歷對象數(shù)組并獲取對象相應的屬性值實例代碼
對于數(shù)組或者對象的遍歷,篩選,提取等操作是前端開發(fā)中經(jīng)常有的需求,下面這篇文章主要給大家介紹了關于js遍歷對象數(shù)組并獲取對象相應的屬性值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
JavaScript實現(xiàn)簡易輪播圖最全代碼解析(ES5)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易輪播圖最全代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
JS實現(xiàn)選項卡插件的兩種寫法（jQuery和class）
這篇文章主要為大家詳細介紹了JS實現(xiàn)選項卡插件的兩種寫法：jQuery和class，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
Javascript中設置默認參數(shù)值示例
這篇文章主要介紹了Javascript中默認參數(shù)值的設置，很簡單，但很實用，需要的朋友可以參考下
2014-09-09
Postman內建變量常用方法實例解析
這篇文章主要介紹了Postman內建變量常用方法實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-07-07
JS一維數(shù)組轉多維數(shù)組樹的方法
這篇文章主要介紹了JS一維數(shù)組轉多維數(shù)組樹的方法,文章通過代碼示例給大家講解的非常詳細,?對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-06-06
JavaScript異步編程之Promise的初步使用詳解
這篇文章主要介紹了JavaScript異步編程之Promise的初步使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-04
ajaxfileupload.js實現(xiàn)上傳文件功能
這篇文章主要為大家詳細介紹了ajaxfileupload.js實現(xiàn)上傳文件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-04-04
原生JS與JQ獲取元素的區(qū)別詳解
這篇文章主要介紹了原生JS與JQ獲取元素的區(qū)別詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-02-02
微信小程序如何調用新聞接口實現(xiàn)列表循環(huán)
這篇文章主要介紹了微信小程序如何調用新聞接口實現(xiàn)列表循環(huán),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07