之前的專案到我接手時微信分享這個問題已經被處理過了，所以也就偷懶沒有研究了。目前公司專案用的是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',
      })
    })
},

以上，先編到這了~下次再繼續編，告辭

！！！！！部署測試的時候千萬千萬千萬千萬千萬千萬千萬千萬千萬千萬千萬不要傳錯目錄