美文网首页程序员
解决vue hash模式下微信分享#号问题

解决vue hash模式下微信分享#号问题

作者: it之承影含光 | 来源:发表于2018-06-23 01:38 被阅读111次

    在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出去的链接只能进入首页,无法正常跳转到其他路由。

    例如

    这是正常跳转后的路径:http://web.ehoo100.com/static/matrix/#/teamwork?postId=4079
    这是从分享页跳转后的路径:http://web.ehoo100.com/static/matrix/?from=groupmessage#/teamwork?postId=4079
    非常明显,如果根据问号的索引去获取当前postId,获取不到。并且在分享时也会显示出文章的地址。

    具体解决代码如下:

    // 微信分享的数据  
    var shareData = {
        "title": "《酒暖回忆思念瘦》", // 分享标题
        "desc": "听梁静茹唱着,离开旧爱,像坐慢车,挥别错的才能和对的相拥。",
        "link": (window.location.href).replace(window.location.search,''),//`http://web.ehoo100.com/static/matrix/#/teamwork?postId=${this.postId}`, // 分享链接
        "imgUrl": "http://static.ehoo100.com/uftp/logo.png",// 分享图标
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
        }
    };
    wx.ready(function () {
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareQQ(shareData);
        wx.onMenuShareWeibo(shareData);
    });
    

    注意:

    由于微信会在hash #号前添加字段,就需要解决我们手动拼接这个分享链接。两种方式1.http://web.ehoo100.com/static/matrix/#/teamwork?postId=${this.postId}
    2.(window.location.href).replace(window.location.search,'')

    最佳实现方式:
    第二种,如:
    http://web.ehoo100.com/static/matrix/?name=123544&time=7456416516#/teamwork?postId=4079

    (window.location.href).replace(window.location.search,'') ==>http://web.ehoo100.com/static/matrix/#/teamwork?postId=4079

    http://web.ehoo100.com/static/matrix/#/teamwork?postId=4079

    (window.location.href).replace(window.location.search,'') ==>http://web.ehoo100.com/static/matrix/#/teamwork?postId=4079

    不管我们的hash #号前面被追加了什么字段,都不会影响,我们最终需要的链接

    image.png

    相关文章

      网友评论

        本文标题:解决vue hash模式下微信分享#号问题

        本文链接:https://www.haomeiwen.com/subject/tdtryftx.html