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

标签（空格分隔）：微信支付坑 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', // 参数改为通过query的方式获取
  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。