单页(SPA)项目中微信支付在IOS和Android不同表现

1.使用SPA做微信公众号开发，在做微信支付功能的时候， 前端技术选型用的vuejs+vue-router，vue-router使用hash模式 ，调起支付时 安卓手机支付正常，IOS手机提示当前url未注册。（此处安卓支付正常，排除了授权目录及各种微信公众号后台配置错误的问题）

2.经过各种调试，最终发现了ios和安卓手机在支付页的打印url是有差异的，查阅资料发现在ios和安卓下呼出微信支付的时候，微信支付判断当前路径的规则分别是：

IOS：Landing Page

安卓：Current Page

基本定义：

当前页面叫做“Current Page”；

当我们从微信别的地方点击链接打开微信浏览器时所在的页面、或者点击微信浏览器的刷新按钮时所刷新的页面，我们叫做“Landing Page”。

例如：我们点击链接进入页面A，然后依次浏览到B、C、D，那么Current Page就是D，而Landing Page是A，如果此时我们在D页面点击一下浏览器的刷新按钮，那么Landing Page就变成了D（以上均是在SPA应用的环境下，即以hash模式通过js更改浏览器路径，location.href跳转的不算）

这就意味着，在ios环境下，任何一个页面都有可能成为支付页面（因为我无法预知和控制用户在哪个页面点微信浏览器的刷新按钮，或是用户通过哪个连接从外部进入到系统）。

由此想到一个解决方案，就是进入到支付页面的时候使用href跳转的方式（或者在当前页reload一下），但会造成页面刷新，很影响用户体验

既然hash路由模式会有这么多不可控因素，是否可以考虑另一种路由方式呢？于是将项目的路由配置改成了history模式

试了一下，安卓和ios都成功调起了微信支付。大功告成....

突然想到，前面hash中，用户刷新会影响支付的调起，于是忐忑的点了一下页面的刷新。。。。

                                                        404

查阅vue官方发现，当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404.也就是history模式下，当前路径并不真实存在，这个问题还是比较好解决的。

用nginx配置一下。

在nginx的配置文件中修改

方法一：

server {

listen      9010;

server_name  localhost;  

location /{

root  F:/mxr/WebApp/mxr/unpackage/dist/build/h5/;

index  index.html index.htm;

if(!-e$request_filename) {

rewrite ^/(.*) /index.html last;

break;

}

}

}

方法二：

vue.js官方教程里提到的https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

至此  history路由模式+后端nginx完美解决SPA微信支付问题