背景:教育项目,整体依赖于微信环境,涉及到微信分享、微信二次分享

问题: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

https://www.jianshu.com/p/a1a31f9da272

https://segmentfault.com/a/1190000014455713

最新文章

  1. nginx访问量统计
  2. C++模板实例化
  3. HTML5-链接
  4. JavaScript函数的调用模式
  5. 一.JSP开发的工具下载与环境搭建
  6. 关于tuple的只读特性
  7. Html 小插件10 即时新闻
  8. 用 Python 测试框架简化测试
  9. 谈谈android反编译和防止反编译的方法(转)
  10. bootstrap3-datepicker and jquery.form.js
  11. Fizzler
  12. 自己开发轻量级ORM(一)
  13. python字符串,列表,字符串,元组,集合的一些方法
  14. .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  15. 【转】十分有用的linux shell学习总结
  16. WPF自学入门(一)WPF-XAML基本知识
  17. Monkey 生成报告方法
  18. 使用Visual Studio Team Services敏捷规划和项目组合管理(四)——冲刺计划和任务板
  19. html冲刺
  20. [剑指Offer]5-替换空格

热门文章

  1. 大数据面试题(一)----HADOOP 面试题
  2. java.net.UnknownHostException 异常处理(个人案例)
  3. CUDA学习(四)之使用全局内存进行归约求和(一个包含N个线程的线程块)
  4. I Love GPLT
  5. Spring IoC 容器和 bean 对象
  6. SSH(一)
  7. MFC对话框和控件
  8. 每日一练_PAT_B_真题
  9. Codeforces_714
  10. WampServer 更换 mysql