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

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。