vue2.0 history模式下的微信分享和分享後擷取微信使用者資訊

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

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

首次進入的URL	需要分享的位址	android複制的URL	iOS複制的URL
http://www.abc.com	http://www.abc.com/list	http://www.abc.com/list	http://www.abc.com

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

分享的URL	分享後打開的URL-android	分享後打開的URL-iOS
http://www.abc.com/list	http://www.abc.com/list?from=singlemessage	http://www.abc.com/list?isappinstalled=0

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()

}

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