开发单页应用(SPA)时候遇到的微信支付授权目录的坑

转载：http://www.tuicool.com/articles/mQ7RRfb

开发单页应用(SPA)时候遇到的微信支付授权目录的坑

好久没写blog了，今天微信终于让我忍不住上来写一篇。

项目中要在微信底下开发单页应用(SPA)，前端技术选型用的vuejs+vue-router，vue-router使用hashbang模式（使用hashbang也是为了避免微信jssdk的wx.config签名的坑）。在调用微信支付的时候遇到提示“URL未注册”，这通常是因为没有在微信支付后台正确配置授权目录的问题，但我所遇到的并非如此。

我们的应用中有3个页面用到微信支付：

http://example.com/#!/cart/index
http://example.com/#!/order/orderlist
http://example.com/#!/order/orderinfo

微信支付允许配置3个目录为授权目录，另外允许配置一个测试环境目录，授权目录必须配置到最后一级目录，配置在根目录不行。到这里其实还都不是问题，问题是微信判断当前路径的方式。

我们先定义两个名词：首先把当前页面叫做“Current Page”；当我们从微信别的地方点击链接呼出微信浏览器时所落在的页面、或者点击微信浏览器的刷新按钮时所刷新的页面，我们叫做“Landing Page”。举个例子，我们从任何地方点击链接进入页面A，然后依次浏览到B、C、D，那么Current Page就是D，而Landing Page是A，如果此时我们在D页面点击一下浏览器的刷新按钮，那么Landing Page就变成了D（以上均是在单页应用的环境下，即以hashbang模式通过js更改浏览器路径，直接href跳转的不算）。

问题来了，在ios和安卓下呼出微信支付的时候，微信支付判断当前路径的规则分别是：

• IOS：Landing Page
• 安卓：Current Page

这个规则是我试了N次试出来的，非常的坑，这就意味着，在ios环境下，任何一个页面都有可能成为支付页面（因为我无法预知和控制用户在哪个页面点微信浏览器的刷新按钮，或是用户通过哪个连接从外部进入到系统）。我在网上用了各种方式搜索这个问题的解决方案，都没找到好的，有关这个问题的帖子都少之又少，都只有吐槽它而没有解决了的。

我把这个问题放了好几天，虽然有一个解决方案，就是进入到支付页面的时候使用href跳转的方式，会造成页面刷新，影响一些用户体验。就是因为这个方案不完美，我就一直搁着，今天呢就又把这个问题拿出来鼓捣。

今天不知道怎么来了灵感，寻思我靠这个不对啊，

http://example.com/#!/cart/index

这个页面的目录应该是

http://example.com/

井号“#”后面应该都忽略才对。于是乎，我想了想，反正入口文件就是个静态html，服务器端也不直接接收query，于是就把链接改成了

http://example.com/?#!/cart/index

就加了一个问号，于是微信浏览器妥妥的把井号“#”后面的内容给去掉了，(╯‵□′)╯︵┻━┻

这个困扰了好几天的问题，最后用一个问号解决了，这不禁让我想起小时候老师讲的斯坦梅茨的故事：

20世纪初，美国福特公司正处于高速发展时期，一个个车间一片片厂房迅速建成并投入使用。客户的订单快把福特公司销售处的办公室塞满了。每一辆刚刚下线的福特汽车都有许多人等着购买。突然，福特公司一台电机出了毛病，几乎整个车间都不能运转了，相关的生产工作也被迫停了下来。公司调来大批检修工人反复检修，又请了许多专家来察看，可怎么也找不到问题出在哪儿，更谈不上维修了。福特公司的领导真是火冒三丈，别说停一天，就是停一分钟，对福特来讲也是巨大的经济损失。这时有人提议去请著名的物理学家、电机专家斯坦门茨帮助，大家一听有理，急忙派专人把斯坦门茨请来。

斯坦门茨仔细检查了电机，然后用粉笔在电机外壳画了一条线，对工作人员说：“打开电机，在记号处把里面的线圈减少16圈。”人们照办了，令人惊异的是，故障竟然排除了！生产立刻恢复了！

福特公司经理问斯坦门茨要多少酬金，斯坦门茨说：“不多，只需要1万美元。”1万美元？就只简简单单画了一条线！当时福特公司最著名的薪酬口号就是“月薪5美元”，这在当时是很高的工资待遇，以至于全美国许许多多经验丰富的技术工人和优秀的工程师为了这5美元月薪从各地纷纷涌来。1条线，1万美元，一个普通职员100多年的收入总和！斯坦门茨看大家迷惑不解，转身开了个清单：画一条线，1美元；知道在哪儿画线，9999美元。福特公司经理看了之后，不仅照价付酬，还重金聘用了斯坦门茨。