天津二手房:vue hash模式下微信分享后「打开」首页,‘三种完美解’决方案

admin 1个月前 (02-23) 科技 5 0
JAVa:“枚举类也就这么回事”

微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 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 《全局路由里完》成,操作如下:

MySQL8.0 InnoDB并行执行

// 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

,

suNBet

Sunbet www.Lfstncnynmzyhzs.com信誉来源于每一位客户的口碑,Sunbet的服务在sunbet行业是出名的顶尖,广西禄福生态农业开发有限责任公司欢迎新老会员、代理的加入。

申博声明:该文看法仅代表作者自己,与本平台无关。转载请注明:天津二手房:vue hash模式下微信分享后「打开」首页,‘三种完美解’决方案

网友评论

  • (*)

最新评论

站点信息

  • 文章总数:831
  • 页面总数:0
  • 分类总数:8
  • 标签总数:1931
  • 评论总数:22
  • 浏览总数:4480