微信支付开发流程

　　记录下微信JSAPI支付的流程

1、判断是微信浏览器则直接请求微信授权的链接，需要传递给微信重定向回的页面，及订单id

// 微信浏览器直接调用
if (this.isWeixin) {
　　let redirectUri = 'http://192.168.1.6/weChat'
　　window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe0701b98700ac86e&redirect_uri=' 
　　　　+ encodeURI(redirectUri) + '&response_type=code&scope=snsapi_base&state=' + this.order.orderId + '#wechat_redirect'
}

2、上一步获取授权之后，就会拿到code，及传递的订单id，会以query的形式拼在重定向的路由上，然后通过拿到的code和订单id去请求后台获取该支付对应的需要的参数，后台返回。

created () {
  let _query = this.$route.query
  if (Object.keys(_query).length > 0 && _query.code) {
    wxChatPublicPayApi({
      code: _query.code,
      orderId: _query.state
    }).then(res => {
      this.params = res.data

      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
        }
      } else {
        this.onBridgeReady()
      }
    })
  }
}

3、拿到后台返回的参数之后，直接调用微信的api即可

onBridgeReady () {
  let _this = this
  WeixinJSBridge.invoke('getBrandWCPayRequest', _this.params, function (res) {
    if (res.err_msg === 'get_brand_wcpay_request:ok') {
      // 使用以上方式判断前端返回,微信团队郑重提示：
      // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      _this.checkPayStatus()
    } else {
      _this.$message({
        message: res.err_msg + '支付失败',
        type: 'error'
      })
      _this.$router.push('/orderDetail/' + _this.$route.query.state)
    }
  })
},