vue 单页应用中微信支付的坑 - 刘henry

博客园

标签(空格分隔): 微信 支付 坑 vue


场景

在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付。

基本知识

1.依据微信jssdk官方文档,使用微信功能的页面,必须进行微信 config,并在wx ready 之后再调用微信功能。
2.进行微信支付的话,需要在微信开放平台配置微信支付合法路径。该合法路径有层级限制,比如需要支付的页面的url为 https://example.com/redpacket/:problemid 的话,配置的合法路径需为 https://example.com/redpacket/。即允许最后一级是可变的参数。

状况

通过 https://example.com/lesson/:lessonid 进入的 vue 根页面,之后点击某个链接进入了需要进行微信支付的 vue 子页面 https://example.com/lesson/redpacket/:redpacketid

坑 支付路径不合法坑1 苹果 vs 安卓

{
  path: '/redpacket/:redpacketid',
  name: 'redpacket',
  component: Redpacket
},

微信确认支付合法路径的时候,ios 取 Landing Page, Android 取 Current Page。即 ios 认为合法路径的配置应该是 https://example.com/lesson/,而 Android 认为合法路径的配置应该是 https://example.com/lesson/redpacket/。 导致微信支付合法url认定不一致的问题。一种解决办法是就在微信开放平台设置两个合法路径,但是由于可配置合法路径只能最多5个,所以一个功能使用2个名额比较浪费。

参考上面链接中的介绍,微信会把 ? 后面的全给忽略掉,所以多长都不会占用路径层级了,所以尝试了把 path 改为

{
  path: '/redpacket?/:redpacketid',
  name: 'redpacket',
  component: Redpacket
},

的方式,苹果和大部分安卓手机都没有问题了,但是发现华为 p9 p10依然有80%的几率失败。

所以为了苹果,必须把支付功能页面和根页面改为是同一层url:

{
  path: '/redpacketqueryproblemid', 
  name: 'redpacket',
  component: Redpacket
},

这样,只用配置一个合法路径就可以了: https://example.com/lesson/

坑2

根据微信官方文档介绍

6.确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

我在根页面进行了 wx.config() 操作(因为需要调用jssdk禁用微信分享),在进入发红包页面的时候,又进行了 wx.config() 操作(因为需要调用jssdk微信支付)。但是在删掉在进入发红包页面的时候的 wx.config() 之后,发现 华为 p9 p10 不再发生支付失败,所有设备页都正常。所以不知道是官方文档写错了,还是我们又误解。总之,坑2 为 不能按照官方文档说的做,url变化了不要再次config。

本文由 黑白世界4648 第一时间收藏到GET,原文来自 → www.cnblogs.com

「GetParty」

关注微信号,推送好文章

微信中长按图片即可关注

更多精选文章

评论
微博一键登入