1.使用vue-awesome-mui
npm install vue-awesome-mui -save
2.安装完成后在 main.js 里引入
import Mui from 'vue-awesome-mui';
Vue.use(Mui);
3.网上流传方法
<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>
使用时在VUE项目根目录下的 public 目录下的 index.html 文件里加入 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>
为防止原文丢失,特复制一份
原文地址: