使用场景：老总让我一个前端开发搞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) {//如果两次按下的时间小于1splus.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) {//如果两次按下的时间小于1splus.runtime.quit(); //那么就退出app}}} else {history.go(-1); // 回退到上一页}};</script>

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

Written ❤️ sywdebug.

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

【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口
记录在项目开发过程中遇到的小问题,积累开发经验,欢迎大家一起留言探讨问题我们在vue项目中打包的时候,webpack会将我们的组件,html,js,css,jpg等其他文件进行打包,其中请求的ip ...
vue开发app 手机物理返回键返回/退出
mui进行手机物理键的监听首先安装 vue-awesome-mui npm i vue-awesome-mui 在main.js注册 import Mui from 'vue-awesome-mui ...
解决webpack打包vue项目后，部署完成后，刷新页面页面404
1.url不动式 url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的 ...
16.如何做到webpack打包vue项目后，可以修改配置文件
问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...
用Cordova打包Vue项目为app
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
使用webpack打包vue项目
使用webpack打包vue项目安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: // ...
使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore
打包Vue项目 1.在Webstorm中打开Vue项目,在下面的Terminal中输入: npm run build 2.等待build完成,双击项目,进入菜单选择Reveal in Finder , ...
webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主亲测, ...
亲测用APICloud打包vue项目
准备工作: 1.去APICloud官网下载打包工具 https://www.apicloud.com/devtools 我使用的是第三款(Eclipse APICloud Plugins(Studio ...

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

使用vue-awesome-mui

网上流传方法：

稍微修改一下

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

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

最新文章

热门文章