stock2
stock2
  • 发布:2015-03-26 17:14
  • 更新:2018-05-17 14:50
  • 阅读:12134

安卓手机(物理键)返回按钮

分类:MUI

安卓手机(物理键)返回按钮
想实现 按了就等同于菜单里的返回.
最后无返回了,或在主界面 .按了,提示再按一次就退出.
再按了 ,就退出.

如何实现啊. 谢谢
项目到最后了. 开始优化了.

2015-03-26 17:14 负责人:无 分享
已邀请:
小闹

小闹

MUI自己会监测安卓手机的返回键,你只需要在想退出的地方加入如下代码:

if ('Android' == plus.os.name) {  
	var first = null;  
	mui.back = function() {  
		if (!first) {  
			first = new Date().getTime();  
			mui.toast('再按一次退出应用');  
			setTimeout(function() {  
				first = null;  
			}, 1000);  
		} else {  
			if (new Date().getTime() - first < 1000) {  
				plus.runtime.quit();  
			}  
		}  
	}  
}
DCloud_heavensoft

DCloud_heavensoft

Danny

Danny - QQ125904483

“项目到最后了...”,但是这么基础的功能....这不科学啊

stock2

stock2 (作者)

呵呵,项目里主要功能基本都实现了,开始对细节考虑了,谢谢你们回复

  • 邹胜林

    请问大神,用了百度或者高德地图定位城市之后,安卓手机按一次返回键主页白屏,按两次退出应用,这是怎么回事啊,求解决思路


    2016-05-06 21:47

stock2

stock2 (作者)

谢谢 小闹. 再问下.
示例的文档有app.js
(function($) {
//全局配置(通常所有页面引用该配置,特殊页面使用mui.init({})来覆盖全局配置)
$.initGlobal({
swipeBack: true
});
var back = $.back;
$.back = function() {
var current = plus.webview.currentWebview();
if (current.mType === 'main') { //模板主页面
current.hide('auto');
setTimeout(function() {
document.getElementById("title").className = 'mui-title mui-fadeout';
current.children()[0].hide("none");
}, 200);
} else if (current.mType === 'sub') {
if ($.targets._popover) {
$($.targets._popover).popover('hide');
} else {
current.parent().evalJS('mui&&mui.back();');
}
} else {
back();
}
}
})(mui);

这个app.js需不需要?
我去除 物理键返回就失效. 增加了,没有再按一次退出的.
我的程序,有个main.html 下面有4个菜单,到达这里,如果退出,就提示了. 小闹你给的代码放在这个main.html里,还是对应的4个菜单的链接都放代码?

stock2

stock2 (作者)

是不是,mui.back 理论上,不需要定义.默认 物理返回就触发了mui.back
在最后需要退出程序的页面定义下,重写back ,让它退出程序?

小闹

小闹

嗯,mui.back自身会监听Android手机的物理返回键,每次都是退回上次加载页面,你只需要在最终需要退出程序的地方添加自己的判断就OK了。那个app.js和返回没有关系,可以不需要,h5+最主要的就是mui.js,一般只需要加载这个就可以了。

stock2

stock2 (作者)

谢谢小闹

  • 小闹

    不客气,大家交流


    2015-04-07 14:25

stock2

stock2 (作者)

小闹好,我在main里加入了你给的代码 ,按项目里 左上角的 < 返回,出来提示了.
但按物理返回键 .直接就退出了.(没有打包),系统手机联电脑边看变改模式 哪里没有设置好? 谢谢

小闹

小闹

很奇怪啊,把这页的代码贴出来看看吧

stock2

stock2 (作者)

就是说 我去除了app.js后,物理键返回就变成直接退出 .没人任何提示

而系统里 返回可以的,一层层 返回. 到main.html 你给的代码也起作用了.

小闹

小闹

你说的意思我明白了,但是我不清楚具体main这个页面里面是否还有其它坑存在,所以具体原因还无法定位

stock2

stock2 (作者)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>首页</title>
<link rel="stylesheet" href="css/mui.css">
</head>
<body>

<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="person.html">
<span class="mui-icon mui-icon-home " style="font-size: 1.2em;float:left;">首页</span>

</a>
<a class="mui-tab-item" href="repair.html">
<span class="mui-icon mui-icon-chat " style="font-size: 1.2em;float:left;">维修</span>

</a>  
<a class="mui-tab-item" href="search.html">  
	<span class="mui-icon mui-icon-search  " style="font-size: 1.2em;float:left;">查询</span>  
	  
</a>  
<a class="mui-tab-item" href="setting.html">  
	<span class="mui-icon mui-icon-gear" style="font-size: 1.2em;float:left;">设置</span>  
	  
</a>  

</nav>

</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
if(window.plus){plusReady();}else{document.addEventListener('plusready',plusReady,false);}

function plusReady(){
if ('Android' == plus.os.name) {
var first = null;
mui.back = function() {
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
}
}

}
</script>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title" class="mui-title">首页</h1>
</header>
<script type="text/javascript" charset="utf-8">
var subpages = ['person.html','repair.html','search.html','setting.html'];
var subpage_style = {
top: '45px',
bottom: '50px'
};
//创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function(){
var self = plus.webview.currentWebview();
for(var i=0;i<4;i++){
var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
if(i>0){
sub.hide();
}
self.append(sub);
}
});

		//当前激活选项  
		var activeTab = subpages[0];  
		//var title = document.getElementById("title");  
		//选项卡点击事件  
		mui('.mui-bar-tab').on('tap', 'a', function(e) {  
			var targetTab = this.getAttribute('href');  
			if (targetTab == activeTab) {  
				return;  
			}  
			//更换标题  
			//title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
			switch (targetTab.substr(0,3)){//person.html','repair.html','search.html','settin  
					case "per":  
						title.innerHTML ="个人信息";   
						break;  
					case "rep":  
						title.innerHTML ="维修模块";   
						break;  
					case "sea":  
						title.innerHTML ="搜索模块";   
						break;	  
					case "set":  
						title.innerHTML ="设置模块";   
						break;				  
					}				  
			//显示目标选项卡  
			//alert(targetTab);  
			plus.webview.show(targetTab);  
			//隐藏当前;  
			plus.webview.hide(activeTab);  
			//更改当前活跃的选项卡  
			activeTab = targetTab;  
		});  
		  
		//自定义事件,模拟点击“首页选项卡”  


	</script>  
</body>  

</html>

stock2

stock2 (作者)

默认,你们的物理键返回就是等同于 mui.back ?
打包的示例 html+和hellow 都ok的. 但我的项目就有问题.
你们的项目默认是好的?

小闹

小闹

我觉得是因为你引入了两个plusReady的原因,你尝试修改一下,将

function plusReady(){  
    if ('Android' == plus.os.name) {  
        ......  
    }  
}

这部分处理放到

mui.plusReady(function(){}

stock2

stock2 (作者)

谢谢小闹. 我查看了common.js 里有这个,我提取出来了,对应的是物理键的.

plus.key.addEventListener('backbutton',function(){back();},false);
测试时,看到日志提示 back未定义 更改下即可
plus.key.addEventListener('backbutton',function(){mui.back();},false);
小闹的代码很有用. 修改为物理键和系统都检查即可.
mui.back = function() {
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');........

这个结贴了.非常感谢小闹.

  • 小闹

    互相学习,共同进步^_^


    2015-04-07 21:17

dcl

dcl

为什么我的也要自己写监听plus.key.addEventListener('backbutton',function(){mui.back();},false);

我看demo是不用的啊

邹胜林

邹胜林

小闹,android手机在主页中点一次返回键主页变空白了,再点一次退出程序,应该怎么处理这个点一次主页空白bug呢,是不是在主页的时候要禁用android的返回功能?应该怎么禁用啊?

小闹

小闹

点击变白的情况我没有见过啊!!!不知道具体是什么情况?

禁用可以 plus.key注册它的事件,return false。查看官方说明

1***@qq.com

1***@qq.com - 最爱HBuilde

你可以来我做的这里看看啦
http://ask.dcloud.net.cn/article/13294?item_id=12414
不是只有 一小段代码。是源码。可以直接生成的那种。方便测试

该问题目前已经被锁定, 无法添加新回复