vue微信分享出来的链接点开是首页问题的解决方法


Posted in Javascript onNovember 28, 2018

最近工作上遇到了这样一个Bug:“vue微信分享出来的链接点开是首页”

公司网站有PC端和移动端,两个版本。其中如果手机访问PC端,则自动跳转到移动端。(这是常规操作,没啥稀奇点。)

可神奇的问题来了。

在移动端中有微信分享功能,如果手机直接访问手机端的地址进入子页面分享,点开分享的链接进入的是子页面。但是如果是从PC端跳转进入手机端,分享子页面链接打开将会是主页。

这个问题我也百度了各种方法,折腾了一天,然而都没啥用。

最后自己想了一个替代方案:

static目录下新建一个名为html的文件夹,在html文件夹中再新建一个redirect.html(看到这个文件名是不是知道我要干啥了)

没错,我们做一个重定向。

html中写入以下内容

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

只需要script标签就可以了,反正只是做重定向。

接下来就简单了,原本设置给微信的分享链接是

shareWxLink = window.location.href

现在我们给他改成

shareWxLink = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(window.location.href)

这样,我们就把当前页的地址编码后放到参数app3Redirect里面,当访问redirect.html时将自动重定向到解码后的原地址。

到此,终于把这个坑爹的Bug给修复了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery登陆判断简单实现代码
Apr 21 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
vue实现微信分享功能
Nov 28 #Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 #Javascript
详解小程序rich-text对富文本支持方案
Nov 28 #Javascript
微信小程序实现简单评论功能
Nov 28 #Javascript
微信小程序实现省市区三级地址选择
Jun 21 #Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 #Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 #Javascript
You might like
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python递归函数定义与用法示例
2017/06/02 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python assert语句的简单使用示例
2019/07/28 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
python中的yield from语法快速学习
2020/11/06 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
历史系自荐信范文
2013/12/24 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
教师师德工作总结2015
2015/07/22 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers