这两天用HBuilder编辑器和mui框架编写H5移动端app的时候,遇到了一个监听手机返回按键(物理按键)并且重写后无效的问题,想和大家分享一下。
先看一下我的文件目录
文件夹myjs(存放个人js文件)
文件 1、 login.js
2、 index.js
文件夹myhtml( 存放个人html文件)
文件 1、login.html
2、index.html
好了接下来让我们进入正题
出现的问题:app打开的时候先先进入login页面,然后由login跳转到index页面,在login页面没跳转到index页面之前,如果我们点击手机物理返回按键,我们需要先提示一下用户,再点击一次退出应用,在login.js页面使用mui.back=function(){'修改逻辑'},编码大概是这样的:
mui.back=function(){ login.js
console.log("监听到物理返回按键了login");
if(tapnum==1){
tapnum=0;
plus.runtime.quit();
}else{
tapnum++;
mui.toast('再点一次退出应用',{ duration:1000, type:'div' });
setTimeout(function() {
tapnum = 0;
}, 2000);
}
}
这样是可以正常执行的,但是当我们从login跳转到index页面后,在按物理返回按键会直接退出应用程序,但是我需要在这个页面也和login页面一样,有个提示功能,于是我在index.js文件中有把mui.back从写了一下,和上面的一样,但是当我测试的时候,在index.js文件中却怎么也调用不了重写后的mui.back函数功能,实在感到奇怪,(HBuilder经常更新版本,每次更新后,从新打包以前编写的代码,在运行的时候经常会出现新的bug,我在没跟新之前,上面的问题是不存在的,两个页面都能监听到各自的返回事件,更新后就出先这个问题了),经过多次测试得到了如下解决方法:
mui.plusReady(function(){ index.js
console.log('index关闭login');
plus.webview.close('login');
plus.key.addEventListener('backbutton', function() {
console.log("监听到物理返回按键了plusResdy");
if(tapnum==1){
tapnum=0;
plus.runtime.quit();
}else{
tapnum++;
mui.toast('再点一次退出应用',{ duration:1000, type:'div' });
setTimeout(function() {
tapnum = 0;
}, 2000);
}
}, false);
console.log('关闭');
});
这样监听就能按照需求运行了