vue 前端微信开发，遇到不少坑，现在分享一下

　　　　由于之前的工作很多都是比较底层以及中间件的工作，对于前端开发这些是接触的很少，目前公司有个项目就是微信登录，以及微信的扫描获取地点等功能，遇到不少的坑现在记录一下。

微信登录这个是比较好做的，首先前端通过 url 以appid 跳转到相应的界面，到相应的界面获取微信带过来的code，然后code 提交到后端，去获取openid。openid 是由后端接口去获取处理。

 

 目前这些都没有什么问题，问题是关键，在于扫码，以及地点获取，ios和安卓 浏览器的内核是不一样的。

当我到达首页   

1.在页面初始化的时候要初始化微信的sdk，也是把数据丢给后端 后端去处理这个问题，注意 jsAPIlist  这是尼玛使用js接口的列表，如果没有的话 扫描会有问题

 

 2.有扫一扫按钮就调用 扫一扫的函数，函数如下。对于扫一扫的结果 用函数回调出来处理，按照道理来说  这样做是没有问题的，但是实际情况就是 安卓手机没有问题，但是ios 却有大大的问题，ios 不能正确的初始化。

 

 

3.为什么ios 不能正确的初始化呢  我找到这个文章才知道 https://www.zhangshengrong.com/p/Ap1ZpqA8N0/

原因如下：

在JSSDK文档页面有这么一句话:

同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复

这是因为在IOS上，无论路由切换到哪个页面，实际真正有效的的签名URL是【第一次进入应用时的URL】。

比如进入应用首页是: https://m.app.com，需要使用JSSDK的页面A是：https://m.app.com/product1/123，无论从首页进入到A页面之前，中间跳转过多少次路由，最终签名有效的URL还是首页URL。

就是在ios 无论访问什么页面，中间路由跳转 最终有效的还是首页的url。

这个问题怎么解决呢？

　　我是在路由守卫里面做了判断解决的。 在进入路由守卫之前判断是不是ios 的手机，如果是安卓手机 window.location.href。iso则跳转首页，然后把数据写入vuex 或者内存。

 

 

 

 这样本以为就不会出现问题了，但是很多时候还是报错了，以至于微信限制了api 接口使用。

所以我门在后端通过code 去获取openid 的时候，要把相应的数据做保存，再开启一个定时任务，去刷星微信的token。这样才不会过期。

 

 

 

 

由于时间关系，写得很乱，后期会整理一下