背景:教育项目,整体依赖于微信环境,涉及到微信分享、微信二次分享
问题:vue使用history模式在iso微信下分享设置出错(签名认证错误、分享设置失败)
问题发现路径
1、按照微信公众号官方文档设置微信分享,ios真机测试,第一个进入页面分享设置成功。
2、使用vue router跳转到第二个页面后在分享时,分享设置失败,刷新页面后分享正常。
3、打开微信jssdkdebug模式
4、发现在router跳转后的第二个页面,签名失败(invalid signature)
解决路径:
google后发现,是ios微信对history操作的问题。
在vue-router模式为history的情况下, 由于IOS微信浏览器在验证微信jssdk签名时,需要的URL是第一次进入该应用时的URL, 并不是当前页面的URL, 所以这里需要针对IOS微信浏览器作特殊处理.
修改代码,获取第一次进入页面的uil作为ios签名的url,具体参考(VUE解决微信签名,SPA微信invalid signature问题,完美处理)
通过设置后在本地测试正常(本地域名拦截,代理转发)。于是高高兴兴提测试环境。但是很快心情就不好了。测试环境测试不通过。
继续填坑。。。
有个好的现象(也许是不好的现象),第二个页面的签名通过了,但是分享出去的内容还是错误。分享的标题是公众号的标题,链接是首次进入页面的链接。
为此不停的google google google。但是没有结果。。。。
与同事讨论后,感觉可能是以公共组件的方式调起原因。于是有静下心来更换调用方式,替换成公共方法(为避免大量返工,选择两个页面进行实验)。
将公共组件改成公共js方法。在两个页面中调用方法设置微信分享。本地测试通过,但我已经不相信本地测试了,直接提交测试环境,使用5s测试通过。还是不放心,又使用6、6p、7、7p测试。过了、过了、真的过了~~~~
虽然不知道,这两种调用方式区别在哪里,但是爽啊。。。
参考链接: https://www.jianshu.com/p/a1a31f9da272
https://github.com/vuejs/vue-router/issues/481
https://zhuanlan.zhihu.com/p/31887792