vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)及遇到的坑

更新時(shí)間：2018年10月23日 11:51:42 作者：立立青青

這篇文章主要介紹了vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)，非常不錯(cuò)，具有一定的參考借鑒價(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. 下單賬戶與支付賬戶不一致

需要后臺(tái)看一下openId配置

總結(jié)

以上所述是小編給大家介紹的vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue 表單驗(yàn)證按鈕事件交由父組件觸發(fā)的方法
這篇文章主要介紹了vue 表單驗(yàn)證按鈕事件交由父組件觸發(fā)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
vue 公共列表選擇組件,引用Vant-UI的樣式方式
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
使用vue實(shí)現(xiàn)通過(guò)變量動(dòng)態(tài)拼接url
這篇文章主要介紹了使用vue實(shí)現(xiàn)通過(guò)變量動(dòng)態(tài)拼接url，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue3+ts+EsLint+Prettier規(guī)范代碼的方法實(shí)現(xiàn)
本文主要介紹在Vue3中使用TypeScript做開(kāi)發(fā)時(shí)，如何安裝與配置EsLint和Prettier，以提高編碼規(guī)范。感興趣的可以了解一下
2021-10-10
vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的簡(jiǎn)單示例
在vue項(xiàng)目中難免遇到有要生成條形碼或者二維碼的功能需求,下面這篇文章主要給大家介紹了關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
vue的toast彈窗組件實(shí)例詳解
本文通過(guò)實(shí)例給大家講解了vue的toast彈窗組件功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
解決Vue響應(yīng)式數(shù)據(jù)已獲取而視圖不更新的問(wèn)題
這篇文章主要介紹了解決Vue響應(yīng)式數(shù)據(jù)已獲取而視圖不更新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
詳解vue.js全局組件和局部組件
這篇文章主要介紹了詳解vue.js全局組件和局部組件，實(shí)例分析了全局組件和局部的技巧，有興趣的可以了解一下。
2017-04-04
Vue項(xiàng)目中安裝依賴npm?install一直報(bào)錯(cuò)的解決過(guò)程
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中安裝依賴npm?install一直報(bào)錯(cuò)的解決過(guò)程,要解決NPM安裝依賴報(bào)錯(cuò),首先要分析出錯(cuò)誤的原因,文中將解決的過(guò)程介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
深入淺析Vue不同場(chǎng)景下組件間的數(shù)據(jù)交流
探通過(guò)本篇文章給大家探討不同場(chǎng)景下組件間的數(shù)據(jù)“交流”的Vue實(shí)現(xiàn)方法，感興趣的朋友一起看看吧
2017-08-08