无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

(weixinjsbridge) 微信内置浏览器WeixinJSBridge的使用技巧(隐藏右上角按钮,获取用户网络状态,支付等) 微信内置浏览器WeixinJSBridge使用技巧 全网首发(图文详解1)

前沿技术 Micheal 4个月前 (06-08) 69次浏览 已收录 扫描二维码

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

WeixinJSBridge是微信内置浏览器的一个JavaScript对象,它使得网页能与微信的原生功能进行交互,如支付、分享等。以下是一些常用的WeixinJSBridge的使用技巧和开发流程示例:

1. 隐藏右上角的分享按钮

要隐藏微信内置浏览器右上角的分享按钮,可以通过监听WeixinJSBridgeReady事件,在事件触发后,调用hideOptionMenu函数来隐藏。

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    WeixinJSBridge.call('hideOptionMenu');
});

2. 获取用户网络状态

可以使用WeixinJSBridge的getNetworkType方法来获取用户的网络状态。

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    WeixinJSBridge.invoke('getNetworkType', {}, function(res) {
        // 返回网络状态,res.err_msg在以下几种情况下取值:
        // network_type:wifi wifi网络 
        // network_type:edge 非wifi,包含3G/2G 
        // network_type:fail 网络断开连接 
        // network_type:wwan 2g或者3g 
        alert('当前网络状态:' + res.err_msg);
    });
});

3. 微信支付

微信网页支付需要后台配合生成支付参数,前端调用WeixinJSBridge的invoke方法进行支付。以下是前端调用的示例:

首先确保你的页面注册了相关的微信支付权限,然后在后端服务器生成支付参数(prepay_id等)。

function onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId" : "wx2421b1c4370ec43b",     //公众号名称,由商户传入     
           "timeStamp" : "1395712654",         //时间戳,自1970年以来的秒数     
           "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串     
           "package" : "prepay_id=u802345jgfjsdfgsdg888",     
           "signType" : "MD5",         //微信签名方式:     
           "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
       },
       function(res){
           if(res.err_msg == "get_brand_wcpay_request:ok" ) {
               // 使用以上方式判断前端返回,微信团队郑重提示:
               // res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。
           }     
       }
   ); 
}
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();
}

请注意,在使用这些API时,你需要在微信公众号后台进行相应的配置,并且确保用户打开的网页是安全域名下的页面。支付功能通常需要服务器端的支持来生成必要的支付参数和签名。

对于其他更复杂的使用场景(如分享到朋友圈等),也建议参照官方微信JS-SDK的文档进行开发,微信会不断更新其SDK和API,因此开发时应确保使用最新版本。
(0x80070570) win10错误代码0×80070570怎么解决? 错误代码0x80070570:Windows 10文件或硬盘操作问题解决方案 全网首发(图文详解1)
(idm绿色版) Internet Download Manager(IDM下载) v6.42.8 绿色版(支持百度网盘) Internet Download Manager简介 全网首发(图文详解1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝