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。