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团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
微信小程序实现电子签名并导出图片
May 27 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 self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
js获取单选按钮的数据
2006/11/27 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python机器学习之决策树分类详解
2017/12/20 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
把pandas转换int型为str型的方法
2019/01/29 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
django框架中间件原理与用法详解
2019/12/10 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
四种会话跟踪技术
2015/05/20 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
休学证明范本
2015/06/19 职场文书