隐藏微信网页右上角的按钮、在微信网页中获取用户的网络状态，支付等

本文链接：https://blog.csdn.net/weixin_49295874/article/details/134012910

本文介绍了如何在微信网页中通过JavaScript隐藏右上角菜单，检测用户网络状态以及实现微信支付功能，包括使用WeixinJSBridge和WCPayJSAPI的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.隐藏微信网页右上角按钮

<script type="text/javascript">
	document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {
    	// 通过下面这个API隐藏右上角按钮
    	WeixinJSBridge.call('hideOptionMenu');
});
	document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {
   		 // 通过下面这个API显示右上角按钮`
    	WeixinJSBridge.call('showOptionMenu');
});
</script>

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

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

3.在微信网页中支付

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();
    }