vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)及遇到的坑
微信公眾號(hào)支付
1. 使用jssdk調(diào)用微信支付,具體查看開(kāi)發(fā)文檔;
使用的vuex,在mutations中
wechatPay (state, data) { state.payObject = data console.log('微信支付開(kāi)始請(qǐng)求') if (wechat) { wx.chooseWXPay({ timestamp: state.payObject.timeStamp, // 支付簽名時(shí)間戳 nonceStr: state.payObject.nonceStr, // 支付簽名隨機(jī)串,不長(zhǎng)于 32 位 package: state.payObject.package, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值 signType: state.payObject.signType, // 簽名方式使用新版支付需傳入'MD5' paySign: state.payObject.paySign, // 支付簽名 success: function (res) { alert('成功') alert(JSON.stringify(res)) }, cancel: function (res) { alert('已取消支付') alert(JSON.stringify(res)) }, fail: function (res) { alert(JSON.stringify(res)) } }) } }
在支付頁(yè)面中commit
// 存儲(chǔ)微信支付數(shù)據(jù)data let data = res.body.data console.log('即將跳轉(zhuǎn)微信支付') this.$store.commit({ timeStamp: data.timeStamp, nonceStr: data.nonceStr, type: 'wechatPay', package: data.package, signType: data.signType, paySign: data.paySign })
2. 支付點(diǎn)擊完成按鈕后,前端會(huì)收到JavaScript的返回值;
3. 后臺(tái)收到來(lái)自微信開(kāi)放平臺(tái)的支付成功回調(diào)通知
踩坑
1. chooseWXPay:fail, the permission value is offline verifying
這是因?yàn)椴荒茉谠谖⑿砰_(kāi)發(fā)者工具上測(cè)試,需要真機(jī)測(cè)試
2. chooseWXPay:fail
需要配置正確的支付授權(quán)目錄,vue的單頁(yè)應(yīng)用直接配置為域名就行。
其他需要配置為調(diào)用支付的上一級(jí)目錄,以/結(jié)束
3. 下單賬戶(hù)與支付賬戶(hù)不一致
需要后臺(tái)看一下openId配置
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目使用微信公眾號(hào)支付總結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)詳解(select空白bug解決)
最近開(kāi)始學(xué)習(xí)vue,在學(xué)習(xí)的過(guò)程中遇到的問(wèn)題將記錄在這里,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)(select空白bug解決)的相關(guān)資料,需要的朋友可以參考下2022-12-12vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定
本篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子
今天小編就為大家分享一篇vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的相關(guān)資料,我們可以通過(guò)合并渲染、數(shù)據(jù)緩存或虛擬化等技術(shù)來(lái)減少重復(fù)渲染的次數(shù),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個(gè)重要組成部分,詞云是一種非常流行的數(shù)據(jù)可視化形式,可以用來(lái)展示文本數(shù)據(jù)中的主題和關(guān)鍵字,本文我們將介紹如何在Vue中使用詞云庫(kù)進(jìn)行數(shù)據(jù)可視化詞云展示和詞云生成,需要的可以參考一下2023-06-06在vue中使用v-bind:class的選項(xiàng)卡方法
今天小編就為大家分享一篇在vue中使用v-bind:class的選項(xiàng)卡方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09