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

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

hello mui里就有.
使用mui是现成的.
不使用mui就自己注册plus.key事件,http://www.html5plus.org/#specification#/specification/Key.html

Danny - QQ125904483

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

stock2 (作者)

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

邹胜林

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

2016-05-06 21:47

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 (作者)

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

小闹

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

stock2 (作者)

谢谢小闹

小闹

不客气，大家交流

2015-04-07 14:25

stock2 (作者)

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

小闹

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

stock2 (作者)

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

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

小闹

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

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>

</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);}

}
</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 (作者)

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

小闹

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

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

这部分处理放到

mui.plusReady(function(){}

中

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('再按一次退出应用');........

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