详解nuxt 微信公众号支付遇到的问题与解决

背景：nuxt为默认的history模式，用这个npm 支付weixin-js-sdk，开启debug模式，尽量在ios下调试，因为alert弹窗的信息会更多。

async onPay (config) {
 try {
 const wxUrl = window.location.href//分享的路径
 const res = await $axios.$get("")//获取配置sdk参数,包括微信分享的参数
 if (res.status === 0) {
  const {data} = res
  wx.config({
  debug: true,
  appId: data.appId,
  timestamp: data.timestamp,
  nonceStr: data.nonceStr,
  signature: data.signature,
  jsApiList: ['chooseWXPay']
  })

  wx.ready(function () {
  wx.checkJsApi({
   jsApiList: ['chooseWXPay'],
   success: (res) => {
   wx.chooseWXPay({
    timestamp: config.timestamp,
    nonceStr: config.nonceStr, 
    package: config.package, 
    signType: config.signType, 
    paySign: config.paySign, // 支付签名
    success: function (res) {
    },
    cancel: function (res) {
    // 支付取消的回调函数
    },
    error: function (res) {
    // 支付失败的回调函数
    }
   })
   }
  })

  })

 }
 } catch (e) {
 throw e
 }
}

1、微信调起支付loading又立刻关闭，并提示：当前页面的url未注册：https://xxx/xx/xx/

补充：由于支付路径太深，ios下，提示支付路径未注册出现了各种情况。甚至出现只有我一个人可以调起支付，其他人测试都不行的情况。

原因：这是因为微信获取支付路径的时候，在ios与安卓下是不同的，对于spa应用来说，首先我们把我们从微信别的地方点击链接呼出微信浏览器时所落在的页面、或者点击微信浏览器的刷新按钮时所刷新的页面，我们叫做落地页。问题来了，在ios和安卓下呼出微信支付的时候，微信支付判断当前路径ios为落地页，安卓则为正常的当前页面的路径。

解决支付路径app不统一：用window.location.href 的方式跳转至支付页

微信获取支付路径的方式：以url最后一个/为准，获取/之前的路径。

支付路径例子：例如我们后台配置的支付的路径为

https://域名/项目名/(可能有多级目录)/pay/

那么就会匹配

https://域名/项目名/(可能有多级目录)/pay/?xxxxxxxxxxxxxxxxxx

注意pay支付路径后的/一定要加。因为我们做路由跳转很可能是这种形式

https://域名/项目名/(可能有多级目录)/pay?xxxxxxxxxxxxxxxxxx //错误，'?'前没有'/'，会匹配不到正确的路径。

2、微信调起支付loading又直接关闭，提示，订单已过期。

解决：这个是服务器那边的问题，后端直接设置了固定的订单时间以跳过支付环节。

3、sdk中wx.config中的参数。

事实上，我们并不需要额外的请求wx.config的参数，因为支付接口返回的支付参数已经有了所有的config参数，除了signature这个加密签名字段，在支付参数中对应的加密签名是paysign这个字段，事实上直接用paysign作为signature的值也是没有问题的。wx.config的参数差别是分享的时候。需要额外的分享的路径url

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。