vue打包成app后,点击手机上的物理返回按钮后直接退出app

时间:2024-03-12 18:22:08

在浏览器上浏览vue项目时,后退按钮是可以正常返回上一页的,但是打包成app后,点击手机上的屋里返回按钮,就直接退出app回到桌面了, 以下是解决办法:

使用mui进行手机的物理键的监听

1、首先安装 vue-awesome-mui

cnpm install vue-awesome-mui

2、在main.js中注册并使用

import Mui from \'vue-awesome-mui\';
Vue.use(Mui);

3、在index.html中写如下的js代码

<script type="text/javascript">
  mui.init({
    keyEventBind: {
      backbutton: true, //关闭back按键监听
    }
  })
  //首页返回键处理
  // 处理逻辑: 1s内,连续两次按返回键,则退出应用;
  var first = null;
  mui.back = function(){
    // 首次按键, 提示 再按一次退出应用
    if(!first){
      first = new Date().getTime();//记录第一次按下回退键的时间
      mui.toast("再按一次退出应用");
      history.go(-1); // 回退到上一页
      setTimeout(function(){
        //1s 后清除
        first = null;
      }, 1000);

    }else{
      if(new Date().getTime() - first < 1000){
        //如果两次按下的时间小于1s
        plus.runtime.quit(); //那么就退出app
      }
    }
  }
</script>