呼叫微信支付wx.chooseWXPay 詳細流程
阿新 • • 發佈:2018-12-14
第一步:配置微信基本配置
/* * 獲取微信配置 以下的引數後臺提供 這裡切記,經常會報錯, 因為頁面的url的問題, 我這裡是後臺寫死的,根據不同的環境配置不同url * */ initWxConfig () { this.$fetch(url).then(res => { console.log(res) wx.config({ debug: false, appId: res.data.appId, timestamp: res.data.timestamp, nonceStr: res.data.noncestr, signature: res.data.signature, jsApiList: ['chooseWXPay'] }) wx.ready(res => { wx.checkJsApi({ jsApiList: ['chooseWXPay'], success: res => { console.log('checked api:', res) }, fail: err => { console.log('check api fail:', err) } }) }) }) }
當你看到這樣即獲取微信基本配置成功
第二步:呼叫微信支付
這裡需要的引數都是後臺自己調取微信之後提供給前端,
這裡重點說一下基本錯誤,
我這邊報錯是因為後臺沒有提供paySign支付簽名 所以報錯
這裡是需要在微信的商戶後臺配置支付頁面的url,切記是支付頁面的上一個頁面的路徑
/* * 先是使用者下單,下完單之後再調取微信支付 * */ this.$post(url).then(res => { let data = JSON.parse(res.data.paySign) wx.chooseWXPay({ // 支付簽名時間戳,注意微信jssdk中的所有使用timestamp欄位均為小寫。但最新版的支付後臺生成簽名使用的timeStamp欄位名需大寫其中的S字元 timestamp: data.timeStamp, // 支付簽名隨機串,不長於 32 位 nonceStr: data.nonceStr, // 統一支付介面返回的prepay_id引數值,提交格式如:prepay_id=\*\*\*) package: data.package, // 簽名方式,預設為'SHA1',使用新版支付需傳入'MD5' signType: data.signType, // 支付簽名 paySign: data.paySign, // 支付成功後的回撥函式 success: function (res) { // res.errMsg === 'chooseWXPay:ok'方式判斷前端返回,微信團隊鄭重提示: // res.errMsg將在使用者支付成功後返回ok,但並不保證它絕對可靠, 切記。 if (res.errMsg === 'chooseWXPay:ok') { that.$router.push({ name: 'ReturnPage', query: { orderNo: res.data.orderBaseinfo.orderNo } }) } }, // 支付取消回撥函式 cencel: function (res) { Toast('使用者取消支付~') }, // 支付失敗回撥函式 fail: function (res) { Toast('支付失敗~') } }) })
第三步:到這裡基本都可以調通了,至於怎麼處理成功回撥和錯誤回撥需根據原型,哈哈
謝謝大家