vue里监听安卓的物理返回键

Hybrid App中,原生内嵌H5单页,由于安卓是有物理返回键的,按安卓物理返回键的时候会返回到上一个路由。

实际中需求是:当有弹层的时候,按物理返回键是关闭弹层,是页面的时候才执行返回上一个路由,所以需要对安卓进行兼容

开始的方案是Android原生重写方法onKeyDown(),H5 JsBridge js去调用方法,当需要的时候屏蔽物理返回键,这种方法也能实现

由于H5单页用的是vue,vue中的路由方法也能实现,并且不需要和APP交互,更加便捷,所以最终决定采用这种方法

只需要写在路由页面中

复制代码
beforeRouteLeave (to, from , next) { // 离开当前路由进行的操作
 // 如果页面上没有展示弹层,弹层全部关闭的话,按回退按钮会执行返回,即到下一个路由
// this.$vux.confirm.isVisible()用来判断是否显示vux的confirm弹层
      if (!this.showPop&&!this.$vux.confirm.isVisible()) { // 所有弹层都是关闭状态才执行回退路由
        next()
      } else { 
          this.$vux.confirm.hide()  // 关闭confirm弹层
          this.showPop = false
        next(false) // 否则就不到下个路由,而是把各个弹层关闭掉
      }
},
复制代码

 

posted @   c-137Summer  阅读(2523)  评论(2编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
历史上的今天:
2017-11-09 不固定宽度的div居中显示
点击右上角即可分享
微信分享提示