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 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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 mysql数据库操作类
2008/06/04 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
简单谈谈favicon
2015/06/10 PHP
php实现数据库的增删改查
2017/02/26 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python操作Jira库常用方法解析
2020/04/10 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
超市业务员岗位职责
2013/12/05 职场文书
入党申请自荐书范文
2014/02/11 职场文书
优质服务活动实施方案
2014/05/02 职场文书
十佳青年事迹材料
2014/08/21 职场文书
《打电话》教学反思
2016/02/22 职场文书
Golang 遍历二叉树
2022/04/19 Golang