vue单页应用history模式下的微信分享（深坑）

之前的项目到我接手时微信分享这个问题已经被处理过了，所以也就偷懒没有研究了。目前公司项目用的是vue,然后在微信分享这块也是被坑的很惨了。主要问题在我自己，但我！甩锅超级厉害！！！技术认输，甩锅绝不认输（滑稽
今天我就要把整个问题的过程记录一哈，第一次写博客。紧张的有点手抖哈……
我遇到的问题主要是一直出现invalid url signature,所以这篇博客内容都是为了处理这个问题

==================================== 胡编乱造 正文 ====================================

首先，附上大家都会放的一段话，源自官方

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web
app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）

经测试，IOS出现了这个问题，安卓当时并没有测，但是据说安卓没问题（待查证）？？？。

个人理解的这段话大概就是history模式下视图是通过pushState来切换的，但在微信浏览器中记录的URL只会是第一次进入时的URL（在IOS下是这样的），所以在IOS中，无论你路由怎么切换。真实的URL都是第一次进入应用时的URL。

解决思路：记录第一次进入页面时的URL，IOS中在路由切换时都用这个URL去请求接口换取签名。
可以看一哈这条issue关于html5-History模式在微信浏览器内的问题

接下来就到放代码的时刻惹

main.js

// wx 用的是vux中的WechatPlugin
const jsApiList = ['onMenuShareTimeline', 'onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone','hideMenuItems'];
router.afterEach(function (to) {
  if (!sessionStorage.getItem('initLink')) {
    sessionStorage.setItem('initLink',document.URL)
  }
  let _url = window.location.origin + to.fullPath
  // 非ios设备，切换路由时候进行重新签名
  if (window.__wxjs_is_wkwebview !== true) {
    setTimeout(()=>{
      http.get('/api/wechat/getSign?url=' + encodeURIComponent(_url)).then(res => {
        let signInfo = res.data.sign;
        signInfo.jsApiList = jsApiList;
        wx.config(signInfo);
      });
    },400);
  }
  // ios 设备进入页面则进行js-sdk签名
  if (window.__wxjs_is_wkwebview === true) {
    let _url = window.location.href.split('#')[0];
    setTimeout(()=>{
      http.get('/api/wechat/getSign?url=' + encodeURIComponent(sessionStorage.getItem('initLink'))).then(function (res) {
        let signInfo = res.data.sign;
        signInfo.jsApiList = jsApiList;
        wx.config(signInfo);
      })
    },400)
  }
})

需要分享的页面

// $wechat 源于vux中wechatPlugin 
created:function(){
    this.$wechat.ready(() => {
      this.$wechat.onMenuShareAppMessage({
        title: 'share title', // 分享标题
        desc: 'share desc',
        link: 'link',
        imgUrl: 'image url',
      })
      this.$wechat.onMenuShareTimeline({
        title: 'share title', // 分享标题
        desc: 'share desc',
        link: 'link',
        imgUrl: 'image url',
      })
    })
},

以上，先编到这了~下次再继续编，告辞

！！！！！部署测试的时候千万千万千万千万千万千万千万千万千万千万千万不要传错目录