本文详细解析在Nuxt History模式下调用微信JS-SDK进行支付时遇到的常见问题。重点解决iOS端因落地页机制导致的“当前页面URL未注册”错误，通过统一使用window.location.href获取支付路径来修复；分析“订单已过期”通常由后端固定订单时间设置引起；并说明支付接口返回的参数可直接用于wx.config，无需额外请求分享参数。
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。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。