zoukankan      html  css  js  c++  java
  • vue hash模式下微信分享后打开首页,三种完美解决方案

    微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播。所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能。但是,前几天在对接微信分享 API 的时候发现了一个大坑。使用 vue 框架开发的应用,分享出去的链接会被截断:

    正常链接:https://hxkj.vip/#/article?article_id=8
    分享出去的链接被打开之后变成了:https://hxkj.vip/?from=singlemessage&isappinstalled=0
    对,就是这么坑。不仅路由被切掉了,参数也没了。。。。。。

    针对以上问题,首先想到的就是网上找方法求救。其中找到一个方法:(本文待分享链接都使用 shareLink 作为变量名)

    let shareLink = window.location.href.split("#")[0]+"#"+window.location.href.split("#")[1]; // 使用这种方法重新拼接一下当前连接
    

    然而,并没有什么用,该被切还是被切。于是,就诞生了以下三种有效的方法。

    1、全局路由里拦截链接
    2、前端页面中转,重定向
    3、借助后端重定向

    一、全局路由里拦截链接

    1、在 # 号前面加上 ? 号

    经过试验发现,只要在路由的 # 号前面加上 ?号,微信分隔链接的时候只会在域名与参数之间加上 ?from=singlemessage&isappinstalled=0,后面还是会携带原本的参数的,不会被完全切掉。所以,加上之后:

    let shareLink = 'https://hxkj.vip/?#/article?article_id=8';
    shareLink = shareLink.replace('/#/', '/?#/');
    

    待分享的链接变成了:https://hxkj.vip/?#/article?article_id=8
    分享出去之后,链接变成了这个:https://hxkj.vip/?from=singlemessage&isappinstalled=0#/article?article_id=8

    发现区别了吧,这次虽然被插入了 ?from=singlemessage&isappinstalled=0 这一串东西,但是最起码路由和参数还保留着,接下来我们就要对这一段链接进行处理了。

    2、正则替换 ?from=singlemessage&isappinstalled=0

    这一步需要在 vue 全局路由里完成,操作如下:

    // router.js
    router.beforeEach((to, from, next) => {
        let url = window.location.href;
        if (url.includes('?from=')) { // 判断是否携带了 from 参数,这一步灵活变通,只要能判断出是从微信分享链接进来的就 OK
            url = url.replace(/vip.+.#/, 'vip/#'); // 利用正则表达式去掉微信携带的 ?from=singlemessage&isappinstalled=0 这串参数,如果这串参数对于你当前的页面有用处的话,可以重新拼接到你正常的链接后面去
            window.location.href = url; // 重定向到正常链接
        }
    })
    

    上面这段代码的核心在于正则替换 url = url.replace(/vip.+.#/, 'vip/#'),这并不是吃饱了没事干,非要写正则。而是微信分享到每个渠道(微信单人聊天、微信群聊、朋友圈、QQ...)所携带的 from 参数是不一样的,所以需要从域名后缀那里开始往后匹配,直到 # 号为止。替换之后,就相当于把微信添加上去的那一串参数给删除了!

    以上步骤操作正确的话:

    待分享的链接为:https://hxkj.vip/?#/article?article_id=8
    分享出去之后,再次打开分享链接。由于路由那里做了处理,链接变为为正常状态:https://hxkj.vip/#/article?article_id=8

    二、前端页面中转,重定向

    1、新建中转页

    public 文件夹里新建一个 html 页面(与项目中 index.html 同级),命名为 redirect.html,文件内容如下:

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

    因为只作为跳转使用,所以不需要其他的东西,只需要写 js 就可以了

    2、组装分享链接

    把要分享的链接,设置为中间页面的路径

    let shareLink = 'https://hxkj.vip/#/article?article_id=8';
    shareLink = window.location.href.split('#')[0] + 'redirect.html?shareRedirect=' + encodeURIComponent(shareLink);
    

    这个方法,比第一个方法多了个中间页,总体来说,还是比较方便的。

    以上步骤操作正确的话:

    待分享的链接为:https://hxkj.vip/redirect.html?shareRedirect=https%3A%2F%2Fhxkj.vip%2F%3F%23%2Farticle%3Farticle_id%3D8
    分享出去之后,再次打开分享链接。由于中间页面做了重定向处理,链接变为为正常状态:https://hxkj.vip/#/article?article_id=8

    三、借助后端重定向

    let shareLink = 后端地址;
    
    这种方法相对于第二种方法,没有本质的区别。只是相当于把重定向那一步放到后端去处理了。页面分享的链接为后端同事给出来的地址。

    四、总结

    At last,看完之后有什么不懂的,可以留言反馈。

    转载请注明出处:https://www.jianshu.com/p/97729dd2c94d
    作者:TSY
    个人空间:https://hxkj.vip

  • 相关阅读:
    CSS中position小解
    position
    mac默认安装postgresql, 如何让postgresql可以远程访问
    The data directory was initialized by PostgreSQL version 9.6, which is not compatible with this version 10.0.
    active admin gem error
    psql 无法添加超级用户
    ubuntu 15.04 安装Balsamiq Mockups 3
    Rails html 写public里图片的路径
    rails c 历史命令
    undefined local variable or method `per' for []:ActiveRecord::Relation
  • 原文地址:https://www.cnblogs.com/hashtang/p/12347071.html
Copyright © 2011-2022 走看看