1. 程式人生 > >呼叫微信支付wx.chooseWXPay 詳細流程

呼叫微信支付wx.chooseWXPay 詳細流程

 第一步:配置微信基本配置

  /*
    * 獲取微信配置
    以下的引數後臺提供
    這裡切記,經常會報錯,
    因為頁面的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('支付失敗~')
          }
        })
      })

第三步:到這裡基本都可以調通了,至於怎麼處理成功回撥和錯誤回撥需根據原型,哈哈
謝謝大家