webapp开发点击返回键一次退出问题

最新推荐文章于 2021-11-03 00:19:36 发布

小麻薯闯天涯

最新推荐文章于 2021-11-03 00:19:36 发布

阅读量2.5k

点赞数

分类专栏： webapp mui 文章标签： webapp 返回键退出问题

webapp 同时被 2 个专栏收录

1 篇文章

订阅专栏

mui

1 篇文章

订阅专栏

本文介绍如何利用vue-awesome-mui插件在移动端应用中监听手机物理返回键。通过安装并配置MUI，实现对返回键的监听，并提供了一个处理逻辑：在1秒内连续两次按下返回键则退出应用，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mui进行手机物理键的监听

首先安装 vue-awesome-mui

npm i vue-awesome-mui

在main.js注册

import Mui from ‘vue-awesome-mui’;

Vue.use(Mui);

mui.init({
	keyEventBind: {
		backbutton: true //关闭back按键监听
	}
});
// //首页返回键处理
// //处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
mui.back = function() {
	//首次按键，提示  再按一次退出应用
	var href = window.location.href;
	var arrUrl = href.split("#");
	var prams = '' ;
	if(arrUrl[1].indexOf('?')>0){
		var page = arrUrl[1].split("?");
		prams = page[0];
	}else{
		prams = arrUrl[1];
	}
	var endparms = new Array();
	endparms= prams.split("/");
	if(!first && (endparms[1] == 'home' || endparms[1]=='')) {
		first = new Date().getTime(); //记录第一次按下回退键的时间
		mui.toast('再按一次退出应用'); //给出提示
		setTimeout(function() { //1s中后清除
			first = null;
		}, 1000);
	} else if(!first && endparms[1] != 'home') {
		history.go(-1) //回退到上一页面
	} else {
		if(new Date().getTime() - first < 1000) { //如果两次按下的时间小于1s，
			plus.runtime.quit(); //那么就退出app

		}
	}
};