微信公众号开发vue单页路由踩坑记 - 自定义分享

这次活动还需要加入自定义分享的功能，就像这种：

image.png

，很自然，我用了微信提供的接口，按照惯例添加对应的api：

data.jsApiList = [
    "onMenuShareTimeline",  //分享到朋友圈
    "onMenuShareAppMessage",  //发送给朋友
];
 wx.config(data);

然后初始化：

var param = {
      title: '邀好友住泊寓，送百元礼品卡，多推多得',
      desc: '深圳全城泊友推荐计划',
      link: window.location.href,
      imgUrl: 'https://vky-test-oss.inboyu.com/upload/39ed2261-8fe2-f282-d8c1-04aec27794cc.png'
};
wx.onMenuShareTimeline(param);
wx.onMenuShareAppMessage(param);

对，就是这么简单~
分享是分享出去啦，可没想到，再从这个分享访问页面却报错缺少参数！！！

然后第一时间想到的复制链接下来看，我的天，参数呢？莫名其妙不见啦！window.location.href可是连参数完完整整一个不落全配置上了呀，怎么打开就不见了呢？

再次打开就又可以了，再再次打开页可以了，有毒吗？（后来经测试小姐姐验证发现，第一次打开很大概率会出现参数丢失，或者放置一段时间大概一个小时之后再打开也很大概率出现参数丢失）。

然后我想了想是不是我的路由带了 #，然后微信访问的时候自动截取了呢？我选择百度，果不其然，很多小伙伴也遇到这个问题，单页路由带参数分享导致参数丢失。

这就好办了，已经有人遇到过了，那肯定就有解决办法。很快，我看见有人说是缓存的问题，分享链接加入随机数就OK了，怀着半信半疑的心态我默默地加上了一个time:

link: location.origin + `/old-introduce-new/index?time=${Math.random()}#/?act_id=${v.act_id}`

然后我发现并没有什么用[尴尬]...
后来，我找到了一个靠谱的方法，通过一个后端路由的中转页重定向，这个中转页明明为redirect.html。在这个页面做重定向，重定向到我的目标地址。比如我目标地址是如下这个链接：

http://weixin-test.inboyu.com/old-introduce-new/index#/?act_id=4&utm_term=%E6%B5%8B%E8%AF%95&utm_source=%E5%BE%AE%E4%BF%A1

所以我稍微改一下我的分享的link为如下：

link: location.origin + '/old-introduce-new/redirect?app3Redirect=' + encodeURIComponent(window.location.href)

把目标地址（window.location.href）编码后赋值给app3Redirect参数一起跳转到erdirect，然后在redirect再解码，然后做重定向。

接着，redirect.html页面代码如下：

<script>
    let url = location.href.split('?')
    let pars = url[1].split('&')
    let data = {}
    pars.forEach((n, i) => {
        let p = n.split('=')
        data[p[0]] = p[1]
    })
    if (!!data.app3Redirect) {
        self.location = decodeURIComponent(data.app3Redirect)
    }
</script>

至于我们生成了一个海报，海报上面的二维码，扫码识别跳转的也是目标地址，海报是后端生成的，所以我页让后端配的地址符合我的要求，带上目标地址作为参数先跳去redirect。

结果很完美地解决了这个#后被截取参数丢失的问题。。。。以为就这么愉快地结束踩坑了，可是没那么简单~

页面放置一段时间后，用户登录态会失效后，用户点击页面上的按钮什么的请求接口，后端识别到用户登陆太失效了，则会自动帮用户登录并获取用户的openid。这一步虽然看起来很简单，但是后端处理起来的步骤还是挺繁琐的，需要做两次重定向，获取openid的时候重定向到了微信的服务器，获取到了之后再重定向回我们的页面。

这时候后端（php）想重定向回来页面却无法直接获取#/后的参数了。这就难办了，想过前端存cookie，但是怕又造成别的意想不到的问题，所以放弃cookie。

后面和另一个前端讨论了一下，觉得利用中转页也不太好，干脆不做前端路由了，直接后端路由吧，这样url上就不会带 # 了，说干就干，每个页面都是后端来路由。
最后链接类似下面这样：

http://weixin-test.inboyu.com/old-introduce-new/index?act_id=4&utm_term=%E6%B5%8B%E8%AF%95&utm_source=%E5%BE%AE%E4%BF%A1

所以：
最后，我还是放弃了中转页这个方法，前端路由改回了后端路由，分享代码也改回来了。

var param = {
      title: '邀好友住泊寓，送百元礼品卡，多推多得',
      desc: '深圳全城泊友推荐计划',
      link: window.location.href,
      imgUrl: 'https://vky-test-oss.inboyu.com/upload/39ed2261-8fe2-f282-d8c1-04aec27794cc.png'
};
wx.onMenuShareTimeline(param);
wx.onMenuShareAppMessage(param);

完美解决，心情大好。
只不过我还是遗憾，单页路由没用成。。。