Vue 移动端微信内H5调起支付

一、业务流程

官方文档可进入查看

   // 提交订单
    submit () {
      const _this = this
      // eslint-disable-next-line eqeqeq
     
        const data = {
          type: JSON.parse(sessionStorage.getItem("type")),
          keys: JSON.parse(sessionStorage.getItem("keys")),
          num: _this.count,
          postscript: _this.notedata, // 备注
          pay_type: 1, // 支付方式
          user_name: _this.address.user_name, // 用户名
          user_mobile: _this.address.user_mobile, // 电话
          user_province: _this.address.user_province, // 省份
          user_city: _this.address.user_city, // 城市
          user_address: _this.address.user_address // 详细地址
        }
        _this.$api.submitindent(data).then(res => {//确认提交订单
          // alert(res.data.order_sn)
          // eslint-disable-next-line eqeqeq
          if (res.code == 1) {
            const data = {
              order_sn: res.data.order_sn
            }
            _this.$api.payorder(data).then(res => {//提交成功后获取参数，这些参数是调用微信支付需要传的参数，具体在本文下方标出
              if (res.code == 1) {
                _this.sdk = JSON.parse(res.data.jsApiParameters)//后端返回的参数
                // alert(_this.sdk,999)
                if (typeof WeixinJSBridge === 'undefined') {
                  // alert(111)
                  if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', _this.onBridgeReady(_this.sdk), false)
                  } else if (document.attachEvent) {
                    // alert(222)
                    document.attachEvent('WeixinJSBridgeReady', _this.onBridgeReady(_this.sdk))
                    document.attachEvent('onWeixinJSBridgeReady', _this.onBridgeReady(_this.sdk))
                  }
                } else {
                  // alert(333)
                  _this.onBridgeReady(_this.sdk)//调起微信支付
                }
              } else {
                _this.$toast({
                  message: res.msg,
                  position: 'middle',
                  duration: 3000
                })
              }
              // eslint-disable-next-line handle-callback-err
            }).catch(err => {
              alert('请求失败1')
            })
          } else {
            this.$toast({
              message: res.msg,
              position: 'middle',
              duration: 3000
            })
          }

          // eslint-disable-next-line handle-callback-err
        }).catch(err => {
          alert('请求失败2')
        })
    },
    // 将支付的认证和回调 封装成函数
    onBridgeReady (sdk) {
      const that = this
      // alert(sdk,888)
      window.WeixinJSBridge.invoke( 
        // 微信支付的一些认证  需要去网站设置好  然后在这调用
        'getBrandWCPayRequest', sdk,
        function (res) {
          // alert(123)
          // alert(res.err_msg)
          // 这个是支付成功的回调
          if (res.err_msg == 'get_brand_wcpay_request:ok') {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            // window.location.href='second/paySuccess'
            that.$router.push({
              name:'paySuccess',
              path: '/second/paySuccess',
              query: {
                ordersn: this.total_amount
              }
            })
          } else {
            // else 支付不成功的回调
            alert(2)
          }
        })
    }

• package：JSAPI下单接口返回的prepay_id参数值，提交格式如：prepay_id=***

• signType：该接口V3版本仅支持RSA

• paySign：签名