问题描述:
Vue-router用的是history模式,在某个页面要应用jssdk,应用其中的录音等方法。Android下无任何问题,但是再IOS下会提示签名错误(invalid signature)。
问题根源
Vue-router进行路由切换的时候,总会操作浏览器的历史记录,从而相应页面url变化
在JSSDK文档中有这么一段话
同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复
这是因为在IOS上,无论路由切换到哪个页面,实际真正有效的的签名URL是【第一次进入应用时的URL】
比如我进入应用的首页是:http://localhost:8081/patientIndex 要应用录音的页面在:http://localhost:8081/myVisitDetail 那么在IOS上,无论你跳到录音页面中间跳多少次,真正有效的URL仍然是首页的URL。
解决方案
既然需要的是首页的URL,那么我们就可以在路由跳转的时候保存一下进入首页的URL,然后在录音页面判断如果是IOS系统,那么就使用我们当时记录的URL,如果不是那么就正常获取当前页面的URL就可以了,下面上代码
结束语
根据上述方法,IOS下的JSSDK报错的问题就解决了,但是在实际项目中,因为公众号没办法直接跳到我的首页,只能跳转到http://localhost:8081/ 就导致在路由守卫中我获取的URL是http://localhost:8081/ ,签名仍然报错。所以我就只好将获取URL的方法写在我的首页面中,路由守卫中做了一下处理