vue history模式 ios微信分享 踩过的坑
背景:教育项目,整体依赖于微信环境,涉及到微信分享、微信二次分享
问题: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
最新文章
- nginx访问量统计
- C++模板实例化
- HTML5-链接
- JavaScript函数的调用模式
- 一.JSP开发的工具下载与环境搭建
- 关于tuple的只读特性
- Html 小插件10 即时新闻
- 用 Python 测试框架简化测试
- 谈谈android反编译和防止反编译的方法(转)
- bootstrap3-datepicker and jquery.form.js
- Fizzler
- 自己开发轻量级ORM(一)
- python字符串,列表,字符串,元组,集合的一些方法
- .NET Core工程编译事件$(TargetDir)变量为空引发的思考
- 【转】十分有用的linux shell学习总结
- WPF自学入门(一)WPF-XAML基本知识
- Monkey 生成报告方法
- 使用Visual Studio Team Services敏捷规划和项目组合管理(四)——冲刺计划和任务板
- html冲刺
- [剑指Offer]5-替换空格