调用微信支付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('支付失败~')
          }
        })
      })

第三步：到这里基本都可以调通了，至于怎么处理成功回调和错误回调需根据原型，哈哈
谢谢大家

调用微信支付wx.chooseWXPay 详细流程

猜你喜欢