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
vue hash模式下微信分享后打开首页,三种完美解决方案的更多相关文章
- vue history模式 ios微信分享坑
vue history模式 ios微信分享坑 问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享 ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- vue项目history模式下微信分享相关问题
import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() ...
- vue history模式 ios微信分享 踩过的坑
背景:教育项目,整体依赖于微信环境,涉及到微信分享.微信二次分享 问题:vue使用history模式在iso微信下分享设置出错(签名认证错误.分享设置失败) 问题发现路径 1.按照微信公众号官方文档设 ...
- 痞子衡嵌入式:串行NOR Flash的Continuous read模式下软复位后i.MXRT无法启动问题解决方案之RESET#
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT上使能NOR Flash的Continuous read模式在软复位后无法正常启动问题的解决经验. 前一篇文章 <在i ...
- vue2.0 如何在hash模式下实现微信分享
最近又把vue的demo拿出来整理下,正好要做"微信分享"功能,于是遇到新的问题: 由于hash模式下,带有"#",导致微信分享的签证无效:当改成history ...
- vue2.0 Hash模式下实现微信分享
1,通过后台,获取accessToken 和 签名jsApiTicket,并写入浏览器缓存(可以写在app.vue中) <script type="text/ecmascript-6& ...
- VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示
VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示: “事件”引起变量值的变化,系统引擎自动根据变量值的变化刷新页面 在VUE Nod ...
- 关于Vue单页面实现微信分享的Bug
// 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?from= & Timeline= 之类的后缀参数,这就造成了分享出去的链接只能 ...
随机推荐
- 三、Spring Cloud之软负载均衡 Ribbon
前言 上一节我们已经学习了Eureka 注册中心,其实我们也使用到了Ribbon ,只是当时我们没有细讲,所以我们现在一起来学习一下Ribbon. 什么是Ribbon 之前接触到的负载均衡都是硬负载均 ...
- Java ArrayList类的简单介绍
ArrayList类的说明: ArrayList类是List接口的实现类,java.util.ArrayList集合数据存储的结构是数组结构. 特点: 元素增删慢,查找快.(由于日常开发中使用最多的功 ...
- 集合下篇—Map和Set 源码分析
Map Map不同于Collection集合,Map存放的是键值对,且键不能重复 1 .HashMap (底层是哈希表,Java中用链表的数组实现,存取顺序不一致) 这篇博客主要讲集合的,哈希表这样的 ...
- 一步一步教你PowerBI利用爬虫获取天气数据分析
对于爬虫大家应该不会陌生,我们首先来看一下爬虫的定义:网络爬虫是一种自动获取网页内容的程序,是搜索引擎的重要组成部分.网络爬虫为搜索引擎从万维网下载网页,自动获取网页内容的应用程序.看到定义我们应该已 ...
- 《Java核心技术》 JVM指令集
https://www.jianshu.com/p/bc91c6b46d7b
- 使用zipwithindex 算子给dataframe增加自增列 row_number函数实现自增,udf函数实现自增
DataFrame df = ...StructType schema = df.schema().add(DataTypes.createStructField("id", Da ...
- 【转】KAFKA分布式消息系统
Kafka[1]是linkedin用于日志处理的分布式消息队列,linkedin的日志数据容量大,但对可靠性要求不高,其日志数据主要包括用户行为(登录.浏览.点击.分享.喜欢)以及系统运行日志(CPU ...
- 图解kubernetes调度器抢占流程与算法设计
抢占调度是分布式调度中一种常见的设计,其核心目标是当不能为高优先级的任务分配资源的时候,会通过抢占低优先级的任务来进行高优先级的调度,本文主要学习k8s的抢占调度以及里面的一些有趣的算法 1. 抢占调 ...
- IDEA新建maven项目没有webapp目录解决方法
转载地址:https://www.cnblogs.com/oldzhang1222/p/10429827.html 先创建的页面修改路径 修改路径如下 添加并完善路径\src\main\webapp ...
- 龙芯2f 8089D 笔记本 Debian 系统安装配置
版权声明:原创文章,未经博主允许不得转载 正文主要讲述安装社区版Debian6镜像(也有7和8,方法大同小异) 最后简单介绍了网络安装原版Debian 小记 非网络安装,没网也没事,再也不用担心网速度 ...