公众号微信扫码支付前端处理流程

1.通过Code获取用户信息和opendId

async getWxCode () {
      let data = await http.getOpenId({code: window.location.href.split('?')[1].split('&')[0].split('=')[1]}))
      if (data.success) {
        cookie.setCookie('opendId', data.data.openId, 2)
      } else {
        alert('二维码已过期！请重新扫码！')
      }
  }

2.通过订单号获取微信支付数据

 // 获取微信支付数据
    async toWxPage (orderCode, money) {
      let data = await http.getWxPay({
        openId: this.$store.state.openId,
        orderCode: orderCode,
        money: money
      })
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data, orderCode), false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data, orderCode))
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data, orderCode))
        }
      } else {
        this.onBridgeReady(data, orderCode)
      }
    }

3.微信浏览器调用支付

// 跳转微信支付
    onBridgeReady (json, orderCode) {
      let jsonData = json.data.bwcr
      var obj = {
        'appId': jsonData.appId,
        'timeStamp': `${jsonData.timeStamp}`,
        'nonceStr': jsonData.nonceStr,
        'package': jsonData.packageStr,
        'signType': jsonData.signType,
        'paySign': jsonData.paySign
      }
  // eslint-disable-next-line no-undef
      WeixinJSBridge.invoke(
          'getBrandWCPayRequest', obj,
          (res) => {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              this.$router.push({path: `/orderDetail?id=${orderCode}`})
            } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
              this.errorMsg = '支付已取消！'
              this.showError = true
            } else {
              this.errorMsg = '支付失败！'
              this.showError = true
            }
          }
        )
    }