vue实现微信浏览器左上角返回按钮拦截功能


Posted in Javascript onJanuary 18, 2020

【需求】

在微信公众号开发中,有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑,而并不是让页面直接返回上一页,之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好,所以自己也开始了这方面的尝试。京东的效果如下图:

vue实现微信浏览器左上角返回按钮拦截功能

从上图京东购物效果上来看,在点击搜索拉起一个搜索界面,然后点击左上角反回,只是将搜索界面收起,而页面没有重新像读取进度条一样去返回,而我页面需要的正是这样的效果,下面就用vue来做一个这个过程的 demo 吧。

【前提】

微信左上角的返回按钮其实无法被拦截,但是可以监听到这个返回事件。

【思路】

要想真正拦截返回事件,可以当前页面先向 window.history 中添加一个记录(实际只是在历史记录堆栈中添加一条记录 pushState,浏览器并不会真正去加载这个路径),当点击返回时,监听到返回事件处理自己想处理的逻辑,反正微信它是一定要执行返回,刚添加的那条记录就会从 window.history 拿出并将此路径替换当前页面路径。注意:这里只是路径的替换,只是将路径换了个名字,并不是会真正去加载这个路径。

【实现】

demo 里建立了两个 vue 页面( first 和 two ),第一个页面跳转到到第二个页面。然后在第二个页面弹出一个蒙层,这时点击左上角返回时,并不是返回 first,而是先将蒙层消失,再次点击返回时才是返回上一页;实现效果如下:

vue实现微信浏览器左上角返回按钮拦截功能

【相关代码讲解】

1. 在第二个页面 mounted 方法中加入,添加监听返回事件方法。当返回按钮被点击时,这里让弹出的蒙层隐藏;

mounted() {
 let that = this;
 // 添加返回事件监听
 window.addEventListener("popstate", function(e) {
  that.isShowTestDiv = false;
 }, false);
 },

2. 监听蒙层,当它显示时,在window.history(历史堆栈)中添加一条记录;

watch: {
 isShowTestDiv: function(newVal, oldVal) {
  if (newVal === true) {
  this.pushHistory();
  }
 }
 }

 pushHistory() { // 修改history
  var state = {
  title: "",
  url: "/two" // 这个url可以随便填,只是为了不让浏览器显示的url地址发生变化,对页面其实无影响
  };
  window.history.pushState(state, state.title, state.url);
 },

3. 最后弹出的蒙层如果用户点蒙层上相关操作将蒙层关闭,那么要手动将自己添加的那条记录从 history 中移除,在 vue 中将路由 back 一下即可。

helloClick() { // 点击弹出来的hello蒙板
  this.isShowTestDiv = false;
  this.$router.back(); // 将添加记录从history中移除
 }

 【相关补充】

注意:window.addEventListener 添加的事件回调会一直存在,因为 Vue 实例销毁时,window 对象并不会销毁。可以在它的回调里打印,会发现在 two 之外的页面点返回也会进入它的方法。但因为 two 页面内对象数据都已销毁,所以进了此方法也无任何问题。如果不想让其进入,可以用存储一些全局变量加入 if 判断,在 two 页面 destroyed 等相关勾子函数将这个全局变量置成想要状态;或者在全局路由勾子方法中设置相关全局变量也可以。

之前有尝试在 two 的 destroyed 方法内,通过 window.removeEventListener 移除添加的方法,但发现无效果。可能 popstate 是微信内置方法,不能被移除。

【demo地址】

https://github.com/LiJinShi/wechat_back_vue

总结

以上所述是小编给大家介绍的vue实现微信浏览器左上角返回按钮拦截功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 #Javascript
JS数组方法slice()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(中级版)
Jan 18 #Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 #Javascript
JS数组方法concat()用法实例分析
Jan 18 #Javascript
JS实现纵向轮播图(初级版)
Jan 18 #Javascript
JS数组方法reverse()用法实例分析
Jan 18 #Javascript
You might like
js类的静态属性和实例属性的理解
2009/10/01 Javascript
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
2013/05/15 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
django session完成状态保持的方法
2018/11/27 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
使用python实现kNN分类算法
2019/10/16 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python对Excel的读取的示例代码
2020/02/14 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
文秘专业毕业生就业推荐信
2013/11/08 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
三万活动总结
2014/04/28 职场文书
小学社团活动总结
2014/06/27 职场文书
动物科学专业求职信
2014/07/27 职场文书
经济贸易系求职信
2014/08/04 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
工作自我评价范文
2019/03/21 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
Android Rxjava3 使用场景详解
2022/04/07 Java/Android