微信支付开发流程

　　记录下微信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.queryif (Object.keys(_query).length > 0 && _query.code) {wxChatPublicPayApi({code: _query.code,orderId: _query.state}).then(res => {this.params = res.dataif (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 = thisWeixinJSBridge.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)}})
},