混合开发监听安卓手机物理返回键

混合开发监听安卓手机物理返回键

在用h5做混合开发过程中由于有个考试考试页面,中途不能退出,退出要添加确认操作,所以需要监听手机的返回操作,不让用户直接通过返回键返回
目前了解到混合开发中有两种方式监听。

方式一,监听popstate,用到的属性window.history

mounted () {
  // 挂载完成后,判断是否支持popstate,监听手机返回键
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
},
destroyed () {
    // 页面销毁时,取消监听,否则其他vue路由页面也会被监听
    window.removeEventListener('popstate', this.goBack, false)
},
methods: {
	//处理业务逻辑
    goBack () {
      this.rrxShow = !this.rrxShow
    },
}

问题

popstate只是能监听到手机返回操作,但是不会拦截后续操作,比如反复触发返回,控制确认框显隐,需要自己去写业务逻辑处理,并且需要移除监听再添加监听,不然影响其他页面的返回操作,有可能其他页面返回几次都无法返回。
好处是不用引用其他插件,只要做好逻辑控,还是挺好用的。

方式二,监听backbutton,cordova+vue,需要依赖cordova

不需要担心监听失效,直接在回调函数写相应方法即可,记得在页面销毁和取消操作后移除监听即可

 mounted () {
    document.addEventListener('backbutton', this.goBack,false)
  },
  destroyed () {
    // 页面销毁时,取消监听
    document.removeEventListener('backbutton', this.goBack,false)
  },
  methods:{
    goBack () {
      this.show = !this.show
    },
  }

版权声明:本文为xiaowochaochao原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。