详解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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
这篇文章主要为大家详细介绍了Bootstrap 最常用的JS插件，包括图片轮播carousel.js、标签切换tab.js、滚动监听scrollspy.js等，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了微信小程序wx.request实现后台数据交互功能,分析微信小程序wx.request在后台数据交互过程中遇到的问题与相关的解决方法,需要的朋友可以参考下2017-11-11
javascript css在IE和Firefox中区别分析
我们讨论的主题CSS网页布局，最令大家头疼的问题就是浏览器兼容性，虽然52CSS.com介绍过很多这方向的知识，但依然让很多开发人员晕头转向，今天的这篇文章，将列出css和javascript在IE和Firefox中二十三个不同点，希望对大家的学习有所帮助。2009-02-02
这篇文章主要为大家详细介绍了前端如何通过html2canvas和jsPDF实现HTML网页转PDF并导出,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2025-01-01
这篇文章主要介绍了JavaScript 继承 封装 多态实现及原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
JavaScript中substring()函数方法是返回位于String对象中指定位置的子字符串2013-04-04
这篇文章主要介绍了JS自动生成动态HTML验证码页面，输入错误自动清空输入框的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家介绍了使用tree shaking 移除无用代码示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家详细介绍了微信小程序canvas2d生成图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
我们在做小程序支付相关的开发时,总会遇到这些难题,下面这篇文章主要给大家介绍了关于微信小程序调用支付接口的完整流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
最新评论