最近用vue框架做微信H5分享（以下是分享給好友），模式採用的history，遇到不少的坑，總結一下花費時間比較久的兩個。一個是android下分享正常但iOS下分享不正常，另一個是分享後再分享，兩種情況都碰到了簽名問題("invalid signature")。

產生問題的原因是android手機和iOS對vue SPA地址的處理不一樣。進入頁面後，android的URL會保持不變，iOS會對地址進行處理，可以用微信的複製連結看到區別，iOS當前的顯示地址為第一次進入時候的地址。

如果上面的地址分享後，微信會在分享地址後增加引數

iOS在進入頁面時，可以把進入時的URL記錄在App.Vue裡，我採用的是vuex，App.vue程式碼如下：

export default {
  name: 'app',
  data() {
    return {
      // app_data: ''
    }
  },
  mounted() {
    this.$store.store.commit('setIphoneShareUrl', encodeURIComponent(location.href.split('#')[0]))
  }
}

vuex的程式碼

const store = new Vuex.Store({
  state: {    
    iphoneShareUrl: ''
  },
  mutations:{
    setIphoneShareUrl: (state,value) => state.iphoneShareUrl = value
  }
})
export default {
  store
}

如果是點選分享頁進入的，vue會先載入list所在的vue，而不是App.vue，所以需要在list.vue裡面加入setIphoneShareUrl，在list.vue的程式碼如下：

initWx() {
  //用於分享
  let param = new URLSearchParams();
  let url = location.href.split('#')[0]
  if (window.__wxjs_is_wkwebview) {//判斷是否是iOS
    //如果有isappinstalled就是分享的，那就直接取當前的URL，如果不是分享的就用App.vue裡面記錄的
    if (typeof this.$route.query.isappinstalled== 'undefined') {
      url = this.$store.store.state.iphoneShareUrl
    }
  }
  param.append("shareUrl", encodeURIComponent(url))
  axios.post(this.PAY_URL + '/wxconfig', param).then((res) => {
    if (res.data.code == 0 && typeof  res.data.result != "undefined") {
      let dt = res.data.result;
      wx.config({
        debug: false, // 開啟除錯模式,
        appId: dt.appid, // 必填，企業號的唯一標識，此處填寫企業號corpid
        timestamp: dt.timestamp, // 必填，生成簽名的時間戳
        nonceStr: dt.nonceStr, // 必填，生成簽名的隨機串
        signature: dt.signature,// 必填，簽名，見附錄1
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] 
      });
    }
  })
},

。。。。。。。。。。。。。。。

另外如果要在分享後獲取當前使用者資訊，可以在進入介面的時候做一次window.location.href的跳轉，先訪問微信的authorize地址（如果有多個引數，需要先用encodeURIComponent轉碼），list.vue程式碼如下：

mounted() {
      if (typeof this.$route.query.from != 'undefined' || typeof this.$route.query.isappinstalled != 'undefined') {//為了獲取分享後用戶的個人資訊需要先跳轉到open.weixin.qq.com
        let param = ''
        let c = 0

        //迴圈獲取URL中的引數，並轉碼
        for (let k of Object.keys(this.$route.query)) {
          if (c != 0) {
            param += "&"
          }
          if (k == 'from' || k=='isappinstalled') {
            continue
          }
          param += (k + "=" + this.$route.query[k])
          c++
        }
        param = encodeURIComponent(param)
        let url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的appid&redirect_uri=https://www.abc.com/list?" + param + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
        window.location.href = url
      }

      //此處可以訪問獲取微信使用者資訊的方法

      。。。。。。
      this.initWx()

}

以上就是大概的問題處理，如果有問題可以私信