关于使用vue开发微信单页面应用切换路由分享失效的问题（多情况汇总）

业务场景

公司要做一个在微信上使用的类电商的项目，有个通用的底bar，分为主页、XX、XX、个人中心这四个，主页可以跳商品详情页，个人主页可以跳邀请页。上面几个是需要分享的。
我们的业务不涉及二次分享，微信二次分享会在url后面拼上一段字符串，会导致签名获取失败
使用history路由
因此本文章主要讨论上述两种业务场景

一般实现

我们将设置微信分享的js作为一个公用方法放出去

@assets/js/wx_share.js
export function setShare(shareDate,cb) {
    //微信分享
    window.wx.config({
        ...    
    });
    window.wx.ready(function(){
        // 分享给微信好友
        window.wx.onMenuShareAppMessage({
            title: shareDate.shareTitle,  //分享标题
            desc: shareDate.shareContent,  //分享描述
            link: shareDate.shareUrl,  //分享链接
            imgUrl: shareDate.shareImgUrl,  //分享图标
            type: 'link',  //分享类型,music、video或link，不填默认为link
            success: function () {
                cb()
            },
            cancel: function () {
            }
        });
        ...
    });
};

然后点定义一个专门的微信分享模块，控制弹层的显示以及分享内容的变更

@components/public/wxmc/index.vue

然后在其他组件中引入这个组件，调用这个ref的goShare方法即可
当然，我们应在最初始的App.vue的created内首先执行一次（请求后），设置默认分享内容

出现问题

首先说明一点，在微信开发者工具里面，关于微信config的提醒是无效的，是无效的，是无效的。就算他告诉你config:ok，那也不是真OK（起码截止到2018.4.1的版本），具体体现之后说
关于分享失败（分享出去的是当前页面的title以及当前页面的host）有下列两种原因（除了自己写错代码）
1.签名问题
2.安全域名问题

1、签名问题

这个要区分IOS以及Android，查阅一些资料后，我感觉可信的原因是

vue-router切换的时候操作的都是浏览器的历史记录，iOS会把第一次刚进入时的URL作为真实URL。安卓会把当前URL作为真实URL。 知乎 SUGAR

需要在wxml组件内的setShare做如下判断：

if  (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  setShare(..., () => {...})
} else {
  this.getJsSignPackage({url: window.location.href.split('#')[0]}).then(res => {
    ...
      setShare(..., () => {...})
  })
}

如果是安卓，每次重新拉密钥，苹果只在最开始拉一次
在微信开发者工具里面，全部按照安卓来走，也就是说每次不获取就报错，但实际是成功的

2、域名问题

到此为止，前端能做的全都做了，剩下再出问题，只能是公众号设置的问题了，相信自己
ps：我特么查了两天，一直以为是自己写的问题。。。。
微信分享的域名必须和当前页面的域名是一样的，而恰巧，我们新捣鼓出一个，所以就必须要在公众号的安全域名里设置，测试号只能有一个安全域名，所以只能拿线上的来用，三个，一个月换一次，大家别手抖。。。
当然还有种情况，history路由需要后台做映射，具体就不展开了，如果不映射的话不仅单页面刷新会出问题，微信分享也会出问题

现在还存在的bug

这个bug就暂时不好解决了，不过影响也不大。如果用户清空微信缓存（IOS，安卓app内无此功能）并且退出账号重新登录，第一次进去，分享是失败的。退出页面再进去，一切OK。。。。鉴于时间紧任务重我选择忽略，嗯。。。

关于二次分享失败的问题

本质就是url后面拼了东西，当初实习的时候做了一个投票的活动也有这个问题，记得仅仅处理了window.location.href.split('#')[0]就完事了，和后台商量好就解决了

END

大家还有什么遇到的奇怪bug分享下~