微信支付开发流程
记录下微信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)
}
})
},
详细参数可以查看下面微信支付官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6