vue history路由模式下ios微信分享首次签名失败，二次刷新后成功

问题：

在使用vue history路由模式下开发H5自定义微信分享时，通过根目录（http://xxx.com）进入网站时，在ios端会报错invalid signature（无效的签名），安卓端正常

问题分析：

在网上度了很多，总结原因就是说ios在微信中浏览器机制和android不同，有IOS缓存问题，和IOS对单页面的优化问题，通俗点说android进行页面跳转时会刷新当前的url，而ios不会，ios是通过历史记录进来的，不会刷新url，所以会导致签名失败。例如从A页面(http://xxx.com/A) 跳转到B页面(http://xxx.com/B)后，由于ios都是操作的浏览器历史记录，所以ios端微信浏览器锁定的url的还是A页面的url

且根据官方文档所述

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

所有IOS微信浏览器在验证微信jssdk签名时,需要的URL还是第一次进入该应用时的URL, 并不是当前页面的URL

使用的版本：

1. vue @2.6.11
2. weixin-js-sdk @1.6.0

解决方法

router.beforeEach((to, from, next) => {
  var u = navigator.userAgent;
  var IOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  // 修复iOS版微信分享HTML5 History兼容性问题
  if (IOS && to.path !== location.pathname) {
    // 此处不能用location.replace
    location.assign(to.fullPath)
  } else {
    next()
  }
})

其他问题

微信通过外部链接访问页面后，分享出来的还是链接，不会出现自定义的卡片形式。可能和官方之前发布的关于《微信外部链接内容管理规范》的更新说明公告有关

解决方法：

1. 在公众号菜单中的链接打开，才能正常分享卡片；
2. 可以通过收藏链接，再打开分享也是卡片；
3. 把链接换成二维码，扫码后进入分享也是卡片。

如有问题，请联系作者，及时纠正