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 相关文章推荐
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
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
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
django静态文件加载的方法
2018/05/20 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python sorted方法和列表使用解析
2019/11/18 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
python实现图片转字符画
2021/02/19 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
就业协议书的作用
2014/04/11 职场文书
暑假家长评语大全
2014/04/17 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android