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学习笔记4 Eval函数
Jan 11 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
详解用vue编写弹出框组件
Jul 04 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
JS array数组检测方式解析
May 19 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
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
phpwind放自动注册方法
2006/12/02 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
在小程序中使用canvas的方法示例
2018/09/17 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
秋天的图画教学反思
2014/05/01 职场文书
工厂搬迁方案
2014/05/11 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
JavaScript实现队列结构过程
2021/12/06 Javascript
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers