IT教程 ·

vue hash模式下微信分享后打开首页,三种完善解决方案

Java:枚举类也就这么回事

微信分享功用给我们带来了很大的轻易,使得基于微信开发出来的 H5 页面能够很好的经由过程微信平台举行流传。所以呢,基本上每一个基于微信开发的 H5 都邑集成微信分享功用。然则,头几天在对接微信分享 API 的时刻发明了一个大坑。运用 vue 框架开发的运用,分享出去的链接会被截断:

一般链接:
分享出去的链接被翻开以后变成了:
对,就是这么坑。不仅路由被切掉了,参数也没了。。。。。。

针对以上问题,起首想到的就是网上找要领求救。个中找到一个要领:(本文待分享链接都运用 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('/#/', '/?#/');

待分享的链接变成了:
分享出去以后,链接变成了这个:

发明区分了吧,此次虽然被插入了 ?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 参数是不一样的,所以需要从域名后缀那边入手下手今后婚配,直到 # 号为止。替代以后,就相当于把微信增加上去的那一串参数给删除了!

以上步骤操纵准确的话:

待分享的链接为:
分享出去以后,再次翻开分享链接。由于路由那边做了处置惩罚,链接变成为一般状况:

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

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);

这个要领,比第一个要领多了个中心页,整体来讲,照样比较轻易的。

以上步骤操纵准确的话:

待分享的链接为:
分享出去以后,再次翻开分享链接。由于中心页面做了重定向处置惩罚,链接变成为一般状况:

三、借助后端重定向

let shareLink = 后端地点;
这类要领相关于第二种要领,没有实质的区分。只是相当于把重定向那一步放到后端行止置惩罚了。页面分享的链接为后端同事给出来的地点。

四、总结

At last,看完以后有什么不懂的,能够留言反应。

MySQL8.0 InnoDB并行执行

参与评论