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 相关文章推荐
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
深入理解js数组的sort排序
May 28 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
计算机专业个人求职信范例
2013/09/23 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
创先争优一句话承诺
2014/05/29 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
开幕式邀请函
2015/01/31 职场文书
英语演讲开场白
2015/05/29 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Python实现生活常识解答机器人
2021/06/28 Python
手写实现JS中的new
2021/11/07 Javascript
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Windows server 2016服务器基本设置
2022/08/14 Servers