vue项目商城兼容h5的项目 如何在微信内置浏览器直接调起微信支付

如果想要在微信内置浏览器中直接调起微信支付的话,需要如下步骤:

1. 在index.html文件中引入微信js-JDK文件

        <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

      2.判断是否在微信内置浏览器(如果this.isNowx()==true则是在微信内置浏览器)

        

isNoWX () {
      var wx = window.navigator.userAgent.toLowerCase();
      console.log(wx);
      if (wx.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
      } else {
        return false;
      }
    },

        接下来 在需要支付的地方初始化config，如下:

        

  window.wx.config({
            appId: res.data.appId,
            timestamp: res.data.timeStamp,
            paySign: res.data.paySign,
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
          })

        下一步就是调起微信支付的方法:

        

window.wx.chooseWXPay({
            appId: res.data.appId,
            timestamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            package: res.data.package,
            signType: res.data.signType,
            paySign: res.data.paySign,
            success: (res)=> {
              // 支付成功后的处理
              console.log('支付成功', res)
               
            },
            fail: (res)=> {
              // 支付失败后的处理
              console.error('支付失败', res)
            }
          })

其中appid,signType，paysign等值需要后端进行返回.

vue-device-detector 这个依赖可以检测第三方设备,可以判断是否是手机端.

到这里就结束啦，感谢观看！