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

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

1.2k 声望
28 粉丝
0 条评论
推荐阅读
小程序瀑布流的实践
补充说明的是,要做瀑布流,最好是可以知道图片的高度,由接口下发,来提前占位,否则,即使是原生app,也会因为图片的加载闪屏使得不好的用户体验。在小程序中,没有原生app的流式layout控件,所以不知道图片宽高...

VisionM1阅读 4.6k

简单实现微信小程序支付+php后端(回调、查询订单、订单信息入库)
微信小程序获取订单参数->向后端发起同意下单请求->获取订单参数->小程序调用Api进行发起支付->支付完成->发送回调->支付结果入库->查询订单支付状态。

TANKING1阅读 1.2k

年初五,迎财神 | 一张码如何实现多渠道(微信、支付宝、云闪付...)收款
大家好,我是小悟今天是正月初五,天气超级好,也是迎财神的日子,祝大家顺风顺水,财源滚滚,钱兔似锦。既然要发财,那自然少不了收款咯。如果你是一个商家,肯定是想收款的方式越方便越好,但支付渠道有那么多...

悟空码字阅读 589

封面图
Assertion failed: (thread_id_key != 0x7777)
使用npm run build时报了这个错误:Assertion failed: (thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134.error Command failed with signal "SIGABRT".

来了老弟阅读 490

Nuxt3 根据路由刷新接口数据
刚用nuxt3,踩坑有点多。获取路由: {代码...} 请求数据: {代码...} 监听数据变化: {代码...} 监听路由变化: {代码...} 设置页面seo信息: 标题,关键词,描述 {代码...}

jsoncode阅读 470

nuxt作为主应用接入qiankun的实践(附代码)
nuxtjs中的路由组件<nuxt/>是对vue-router中<router-view/>的封装:(最大的坑点) {代码...} 可以看到nuxt支持配置来给路由加载过渡效果,切默认mode为out-in,但是这个动画模式会导致子应用激活时无...

不死小强阅读 436

微信支付服务商,消费者投诉处理系统
为了让商户、服务商可以快速获取消费者投诉并进行处理,提高解决消费者投诉的处理能力及效率,为用户提供更优质的服务体验,微信特此提供该消费者投诉API产品。适用于微信支付所有商户、服务商、银行、从业机构对...

悟空码字阅读 216

封面图
1.2k 声望
28 粉丝
宣传栏