nuxt如何解决微信公众号支付遇到的问题

这篇文章将为大家详细讲解有关nuxt如何解决微信公众号支付遇到的问题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

十多年的文登网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整文登建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“文登网站设计”,“文登网站推广”以来，每个客户项目都认真落实执行。

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

关于“nuxt如何解决微信公众号支付遇到的问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。