記錄下微信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)}}) },

　　詳細參數可以查看下面微信支付官方文檔：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

轉載于:https://www.cnblogs.com/goloving/p/10632020.html

總結

以上是生活随笔為你收集整理的微信支付开发流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。