解决使用HbuilderX打包vue项目后，按物理返回键直接退出程序的问题

使用场景：老总让我一个前端开发搞 APP，不会原生啊，无奈使用 vue 项目，然后使用 HbuilderX 打包成 APP，完事之后测试，发现按返回直接退出程序了

使用vue-awesome-mui

使用以下命令进行安装

npm install vue-awesome-mui -save

如果安装过慢或卡住可以将安装方式切换为淘宝镜像

输入 npm config get registry 检测npm默认下载地址
默认应该是 https://registry.npmjs.org/
输入 npm config set registry https://registry.npm.taobao.org 将默认下载地址改成淘宝镜像下载
再使用 npm config get registry 检测
此时就是淘宝镜像下载了 https://registry.npm.taobao.org
就可以重新安装了

安装完成后在 main.js 里引入

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

网上流传方法：

使用时在项目根目录下的 public 目录下的 index.html 文件里加入 script（网上流传方法，有点小问题，在每个页面都会按一次提示，按两次退出，想要按一次返回上一页，返回到指定页时退出）

<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>

稍微修改一下

在 router 里面加导航守卫，随便缓存一个数，我这里是缓存了个“quit”为 0 或 1，当进入 home 页时缓存 quit 为 1，否则为 0

//全局前置守卫
router.beforeEach((to, from, next) => {
  // console.log("beforeEach to:", to);
  //console.log("beforeEach from", from);
  if (to.path == "/home") {
    sessionStorage["quit"] = 1;
  } else {
    sessionStorage["quit"] = 0;
  }
  next();
});

然后在 index.html 里面加 script，点击时判断缓存的 quit 是否为 1，如果为 1 则按两次退出，否则返回上一页

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

❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀

Written ❤️ sywdebug.