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

2024-07-16 18:59| 来源: 网络整理| 查看: 265

使用场景：老总让我一个前端开发搞 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（网上流传方法，有点小问题，在每个页面都会按一次提示，按两次退出，想要按一次返回上一页，返回到指定页时退出）

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 } } }; 稍微修改一下

在 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 则按两次退出，否则返回上一页

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); // 回退到上一页 } }; ❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀ Written ❤️ sywdebug.

【本文地址】

公司简介

联系我们