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延迟执行实现方法(setTimeout)
Dec 30 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
Python yield 小结和实例
2014/04/25 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Django forms组件的使用教程
2018/10/08 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python 中xpath爬虫实例详解
2019/08/26 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
委托证明的格式
2014/01/10 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
顶碗少年教学反思
2014/02/21 职场文书
法制宣传月活动总结
2014/04/29 职场文书
贷款承诺书
2015/01/20 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android