微信内置浏览器WeixinJSBridge的使用技巧(隐藏右上角按钮,获取用户网络状态,支付等)

参考：https://www.jb51.net/javascript/3156411pd.htm

微信浏览器私有接口WeiXinJsBridge，大致有以下几个有用的知识点：

• 分享给好友
• 分享到朋友圈
• 分享到微博
• 隐藏下方工具栏
• 隐藏微信右上角分享按钮（三个小圆点）
• 关闭浏览器回到公众号对话窗口
• 获取用户的网络状态
• 微信浏览器支付函数

WeiXinJsBridge的分享函数

WeiXinJsBridge的分享函数分为分享给好友，分享到朋友圈，分享到微博，但是这三种分享都是在下面在个函数内部实现的。

1 2 3 4 5

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

只要在需要进行分享的位置处，调用此函数，就可以完成分享功能。

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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）

1 2 3 4 5 6 7 8 9 10 11 12

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进行绑定。

1 2 3 4 5 6

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和手机号进行绑定和解绑定，在执行完解绑定后关闭当前微信浏览器回到公众号对话窗口。

完成页面操作后，在适当的时机调用微信提供的方法：

1	WeixinJSBridge.call('closeWindow');

即可关闭浏览器回到公众号会话窗口。

在微信网页中获取用户的网络状态

1 2 3 4 5 6 7 8 9 10 11

WeixinJSBridge.invoke('getNetworkType',{},function (e){     // 在这里拿到e.err_msg，这里面就包含了所有的网络类型     alert(e.err_msg); });   //e.err_msg的取值如下所示：   //network_type:wifi         wifi网络 //network_type:edge      非wifi,包含3G/2G //network_type:fail         网络断开连接 //network_type:wwan     2g或者3g

在微信网页中支付

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

function onBridgeReady(orderId, response) {       WeixinJSBridge.invoke(         "getBrandWCPayRequest",         {           appId: response.appId, //公众号ID，由商户传入           timeStamp: response.timeStamp, //时间戳，自1970年以来的秒数           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缺少参数：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的使用技巧(隐藏右上角按钮,获取用户网络状态,支付等)的详细内容，更多关于微信内置浏览器WeixinJSBridge的使用技巧的资料请关注脚本之家其它相关文章！