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

}

以上就是大概的问题处理，如果有问题可以私信