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

Nuxt微信支付调试背景

背景：Nuxt采用默认的history路由模式，在此模式下使用npm包weixin-js-sdk进行支付开发。建议开启debug模式，并尽量在iOS设备上进行调试，因为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和Android系统下存在差异。对于单页应用（SPA），我们将用户从微信其他入口点击链接进入浏览器时的页面，或点击浏览器刷新按钮后的页面，定义为“落地页”。问题在于，iOS和Android在唤起微信支付时，对当前路径的判断标准不同：iOS将落地页视为当前路径，而Android则将正常的当前页面路径作为判断依据。

解决支付路径在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。

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