IOS 配置 微信 JS SDK 报 invalid signature签名错误

问题场景: SPA单页面应用, vuejs router, 微信WebView网页下给 JS SDK API 做 签名,报错

1. 项目基于vue，在微信上的web应用
2. 要使用原生系统某些功能(不同系统的兼容真的很多BUG，最后只能使用微信方案)，支付功能，定位, 设置分享....
3. 签名一直存在bug和问题，那么后面的功能都会唤不起(偶尔也可以)

具体表现:

项目使用 vue 开发微信手机网页端，获取从后端传来的 微信配置信息， android 端 能够配置正确并能 正常调用 微信提供的js api。 但是 在 ios 上 报 签名错误，重新刷新页面又能正确配置 微信的 config, 再次刷新页面又报 签名错误，

直接上解决代码

if (window.__wxjs_is_wkwebview) { // IOS, 签名地址,固定是入口地址,不是路由跳转地址
  window.entryUrl = window.location.href
}
router.afterEach((to, from) => {
  // window.__wxjs_is_wkwebview
  // true 时 为 IOS 设备
  // false时 为 安卓 设备
  if (window.__wxjs_is_wkwebview) {  // IOS
    // 什么也不做
  }else {       // 安卓, 签名地址,每次都变动
    window.entryUrl = `${window.location.origin}${to.fullPath}`
  }
})

后端做签名的时候, url encode 一下, 使用 window.entryUrl 而不是 window.location.href

问题的原因:

苹果微信App, 签名失败是因为: 苹果在微信中浏览器机制和安卓不同,有 IOS缓存问题，和IOS对单页面的优化问题，

安卓进行页面跳转分享时会刷新当前的history url,而苹果不会;

如果苹果下的微信App是通过vue router即H5的historyState历史记录进来的，不会刷新url所以会导致签名失败

问题来了: vue的history在IOS的微信不会刷新，但是我们又要做js签名。

有很多做法, 比如 beforerouteEnter的路由判断，或者写在Vue.prototype.Wxshare()的原型链中

微信下能检测内核的判断：window.__wxjs_is_wkwebview(是否为webview内核)，如果是的情况下就变成true

因为SPA应用下，会有一定的问题，路由采用的是history模式(不带#号)。因为在页面每次进入到路由之后才去获取签名授权，所以将方法公用写在路由的模块下

window.entryUrl这个是什么鬼？这个是自己定义的全局属性，就是为了获取IOS第一次进入页面的时候存储起来的，如果IOS的签名的路径不是第一次进入的页面，那么就一定会失败，所以这个路由第一次进入就要储存起来

为什么要写在router.afterEach，因为页面进入了再去做申请和签名，如果在beforeEach，会导致页面申请签名的时候还是上一个页面，但是到了新页面却没有注册签名，或者因为签名的路径不同，导致invalid signature

安卓会存在一些情况，就是即便签名成功，但是还是会唤不起功能， 增加一个延时器或者页面mounted之后再签名一次比较稳妥

题外话

分享的跳转地址会携带一下参数

对于IOS系统会自动增加如下参数：
朋友圈 from=timeline&isappinstalled=0
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0

对于安卓系统会自动添加如下参数：
朋友圈 from=timeline
微信群 from=groupmessage
好友分享 from=singlemessage