vue IOS 微信分享簽名失敗，二次刷新后就能成功的BUG

這個BUG  搞得頭大了兩天，心態搞TM要蹦了 

安卓正常操作使用window.location.href  作為簽名鏈接 一點毛病也沒有

然后我用IOS 分享的時候第一次簽名失敗 然后返回了上一頁再進入試着分享就能成功。這是個什么邏輯。。。自己搞懵逼了

然后我就試着把 簽名的URL alert出來看看。結果發現 TM一模一樣啊，為什么會config 報錯簽名失敗呢

下面是借鑒了一個網友的記錄（他寫得比較明白）

------------------------------------------------------------------------------

問題：
在IOS手機微信端，從A頁面(http://a.com/A) 跳轉到B頁面(http://a.com/B)后，B頁面進行分享時就會報簽名（invalid signature）錯誤。

分析：
從A頁面跳轉到B頁面時，由於是使用vue-router切換，都是操作瀏覽器歷史記錄，所以ios端微信瀏覽器鎖定的url的還是A頁面的url。

這個時候，是不是很多人都會認為，既然頁面路由變化了，那我重新請求下url簽名接口，不就可以了。呵呵呵，你會發現報錯：invalid signature。但是再刷新一下，又沒有簽名問題，尼瑪，這是什么原因呢？？？

那么你在請求url簽名接口的時候，傳遞的url參數又是什么呢？大概如下吧：
url1、直接是 location.href （history模式）
url2、自己拼裝的 location.origin + '/#' + this.$route.pullPath （hash模式）
這個時候，你請求的接口都沒問題，也能拿到簽名數據。但是

問題就出在：你所請求的url簽名地址和瀏覽器執行jweixin-1.x.x.js時鎖定的地址 不一致、不一致、不一致。你當前請求的可能是url1或url2，而此時微信鎖定的地址仍然是進入A頁面時的url（因為在進入A頁面是加載並執行了jweixin-1.x.x.js, 而路由變化A到B時，並沒有再次執行jxinwei-1.x.x.js）。所以問題就發生了，但是你再刷新一下，jweixin-1.x.x.js重新執行，此時微信瀏覽器鎖定的url就是你當前刷新的url地址了，所以簽名又成功了。
主要是因為：
【IOS】：ios微信端，路由變化時，微信認為SPA的url是不變的。 【Android】：android微信端，路由變化時，SPA的url是會變的（官方在安卓6.2版本，才對SPA變化作了支持）

所以，發起簽名的url必須是微信鎖定的url。

    解決方案：
    IOS端，把請求簽名的url，保存到全局變量中。路由切換后，在調用分享接口時，使用全局變量里保存的url來請求簽名

// 記錄進入app時的url
    if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
        window.entryUrl = location.href.split('#')[0]
    }
    // 進行簽名的時候  Android 不用使用之前的鏈接， ios 需要
    let signLink =  /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;

最后，每次驗簽名使用 signLink 獲取，就ok了。

版權聲明：本文為CSDN博主「hualvm」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/hualvm/article/details/85344076

------------------------------------------------------------------------------

附上我自己封裝調用的微信分享源碼

import { post } from "../api/http";//分享api
import wx from 'weixin-js-sdk'

// export const shareTitle = '測試';
// export const shareUrl = '測試連接';
// export const shareImg = '測試圖片';
// export const shareDesc = '測試詳情';
export const option = {};

/**
 *分享
 * @param _this
 * @param shareTitle 標題
 * @param shareUrl 鏈接
 * @param shareImg 圖片
 * @param shareDesc 描述
 */

export const commonShare = (_this, option) => {
  var url = ''
  var u = navigator.userAgent;
   var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
    if (isIOS) {
      url=window.entryUrl
    }else{
      url = window.location.href;
    }
  var data = {
    url: url
  };
  //console.log(data.url)
  post('main/getShareSign', data).then(res => {
    if (res.signature != '') {
      var data = res;
      wx.config({
        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
        appId: data.appId, // 必填，公眾號的唯一標識
        timestamp: data.timestamp, // 必填，生成簽名的時間戳
        nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
        signature: data.signature, // 必填，簽名，見附錄1
        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "showMenuItems", "onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
      });
      wx.ready(function () {
        wx.showMenuItems({
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:favorite"
          ] // 要顯示的菜單項，所有menu項見附錄3
        });
        wx.updateTimelineShareData({
          title: option.shareTitle, // 分享標題
          link: option.shareUrl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
          imgUrl: option.shareImg, // 分享圖標
          success: function () {
            // 用戶確認分享后執行的回調函數
            // _this.$vux.toast.text('分享成功！！！');
            option.success();
          },
          cancel: function () {
            // 用戶取消分享后執行的回調函數
            // _this.$vux.toast.text('取消分享！！！');
            option.error();
          }
        });
        wx.updateAppMessageShareData({
          title: option.shareTitle, // 分享標題
          desc: option.shareDesc, // 分享描述
          link: option.shareUrl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
          imgUrl: option.shareImg, // 分享圖標
          type: "", // 分享類型,music、video或link，不填默認為link
          dataUrl: "", // 如果type是music或video，則要提供數據鏈接，默認為空
          success: function () {//微信2018年5月16日就改了，分享不管是真的分享了還是取消了分享，返回來的都是success
            // 用戶確認分享后執行的回調函數
            //_this.$vux.toast.text('分享成功！！！');
            option.success();
          },
          cancel: function () {
            // 用戶取消分享后執行的回調函數
            //_this.$vux.toast.text('取消分享！！！');
            option.error();
          }
        });
        wx.error(function (res) {
          // config信息驗證失敗會執行error函數
          console.log('微信config失敗：', res)
        });
      });
    }
 
  }).catch(err => {
    alert(err)
    console.log(err)
  })
};