vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)及遇到的坑
微信公眾號(hào)支付
1. 使用jssdk調(diào)用微信支付，具體查看開發(fā)文檔；
使用的vuex，在mutations中
wechatPay (state, data) {
state.payObject = data
console.log('微信支付開始請(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))
}
})
}
}
在支付頁面中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)收到來自微信開放平臺(tái)的支付成功回調(diào)通知
踩坑
1. chooseWXPay:fail, the permission value is offline verifying
這是因?yàn)椴荒茉谠谖⑿砰_發(fā)者工具上測(cè)試，需要真機(jī)測(cè)試
2. chooseWXPay:fail
需要配置正確的支付授權(quán)目錄，vue的單頁應(yīng)用直接配置為域名就行。
其他需要配置為調(diào)用支付的上一級(jí)目錄，以/結(jié)束
3. 下單賬戶與支付賬戶不一致
需要后臺(tái)看一下openId配置
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)詳解(select空白bug解決)
最近開始學(xué)習(xí)vue,在學(xué)習(xí)的過程中遇到的問題將記錄在這里,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)(select空白bug解決)的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定
本篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了vue全家桶-vuex深入講解，文章內(nèi)容詳細(xì)，簡(jiǎn)單易懂，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2023-01-01
再做前端頁面的時(shí)候,想獲取本地的ip地址,可能是為了和服務(wù)器通信,可能是為了展示,無論哪種,下面給大家總結(jié)下方法,這篇文章主要給大家介紹了關(guān)于vue前端獲取本地IP地址的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在本篇文章里小編給大家分享了關(guān)于vue配置接口域名方法和相關(guān)知識(shí)點(diǎn)總結(jié)，需要的朋友們跟著操作下。2019-05-05
vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子
今天小編就為大家分享一篇vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的相關(guān)資料,我們可以通過合并渲染、數(shù)據(jù)緩存或虛擬化等技術(shù)來減少重復(fù)渲染的次數(shù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個(gè)重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來展示文本數(shù)據(jù)中的主題和關(guān)鍵字，本文我們將介紹如何在Vue中使用詞云庫進(jìn)行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下2023-06-06
在vue中使用v-bind:class的選項(xiàng)卡方法
今天小編就為大家分享一篇在vue中使用v-bind:class的選項(xiàng)卡方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09