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,文件内容如下:


因为只作为跳转使用,所以不需要其他的东西,只需要写 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

你可能感兴趣的:(vue hash模式下微信分享后打开首页,三种完美解决方案)