H5及微信小程序实测可用——监听手机返回键操作_监听用户手势返回

作者：从前慢现在也慢 | 2024-03-16 05:40:24

踩

监听用户手势返回

1.自定义导航（只能拦截左上角返回）

当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏

  "navigationStyle": "custom",
1

如果想要全局替换可以直接在 app.js中配置，单页面使用可在对应的xxx.js中使用
使用自定义导航我们可以在点击左上角箭头返回的方法中实现各种需求
但是这种方法只能监听左上角的返回达不到我们想要的效果
附：https://github.com/lingxiaoyi/navigation-bar
上边是我项目中使用过的导航组件具体使用方法可以看该组件介绍

2.内嵌H5实现拦截物理键返回（均可监听）

这种方式可以监听三种返回操作需要使用内嵌H5来解决
微信小程序内嵌H5方法

<web-view src="{{url}}"></web-view>
1

注意：需要提前配置h5的域名到小程序后台的业务域名中

然后在H5中我们要使用pushState方法，通过window.history方法来对浏览器历史记录的读写
pushState是H5的API中新添加的，
在 HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。
pushState() 带有三个参数：状态对象，标题，以及自定义URL地址。
直接上代码

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript">
     window.history.pushState(null, null, "#");
     window.addEventListener("popstate", function(e) {
        window.history.pushState(null, null, "#");
		alert('我被拦截了')
     })
  </script>
<body>
  <p>测试物理键返回</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/247431

H5及微信小程序实测可用——监听手机返回键操作_监听用户手势返回

目录

1.自定义导航（只能拦截左上角返回）

2.内嵌H5实现拦截物理键返回（均可监听）