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

34次阅读

共计 1538 个字符,预计需要花费 4 分钟才能阅读完成。

背景: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

以上。。。其他记不起来了

正文完
 0