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

 更新时间:2024年02月15日 08:38:04   作者:ZHWenDong  
这篇文章主要介绍了微信内置浏览器WeixinJSBridge的使用技巧,隐藏右上角按钮,获取用户网络状态,支付,隐藏下方工具栏等,需要的朋友可以参考下

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

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

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');

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

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

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

在微信网页中支付

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的使用技巧的资料请关注脚本之家其它相关文章!

相关文章

  • js遍历对象数组并获取对象相应的属性值实例代码

    js遍历对象数组并获取对象相应的属性值实例代码

    对于数组或者对象的遍历,筛选,提取等操作是前端开发中经常有的需求,下面这篇文章主要给大家介绍了关于js遍历对象数组并获取对象相应的属性值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • JavaScript实现简易轮播图最全代码解析(ES5)

    JavaScript实现简易轮播图最全代码解析(ES5)

    这篇文章主要为大家详细介绍了JavaScript实现简易轮播图最全代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JS实现选项卡插件的两种写法(jQuery和class)

    JS实现选项卡插件的两种写法(jQuery和class)

    这篇文章主要为大家详细介绍了JS实现选项卡插件的两种写法:jQuery和class,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Javascript中设置默认参数值示例

    Javascript中设置默认参数值示例

    这篇文章主要介绍了Javascript中默认参数值的设置,很简单,但很实用,需要的朋友可以参考下
    2014-09-09
  • Postman内建变量常用方法实例解析

    Postman内建变量常用方法实例解析

    这篇文章主要介绍了Postman内建变量常用方法实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS一维数组转多维数组树的方法

    JS一维数组转多维数组树的方法

    这篇文章主要介绍了JS一维数组转多维数组树的方法,文章通过代码示例给大家讲解的非常详细, 对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-06-06
  • JavaScript异步编程之Promise的初步使用详解

    JavaScript异步编程之Promise的初步使用详解

    这篇文章主要介绍了JavaScript异步编程之Promise的初步使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • ajaxfileupload.js实现上传文件功能

    ajaxfileupload.js实现上传文件功能

    这篇文章主要为大家详细介绍了ajaxfileupload.js实现上传文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • 原生JS与JQ获取元素的区别详解

    原生JS与JQ获取元素的区别详解

    这篇文章主要介绍了原生JS与JQ获取元素的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 微信小程序如何调用新闻接口实现列表循环

    微信小程序如何调用新闻接口实现列表循环

    这篇文章主要介绍了微信小程序如何调用新闻接口实现列表循环,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论