MUI 关闭页面的方法
运用 MUI 开发 APP 时,要记住该 APP 是基于一系列的页面来构成的。在实际应用中,总会在一些场景下需要关闭页面。例如注销,需要打开登录页,关闭除登录页外的其他所有页面。
所以在此介绍有关 MUI 关闭页面的方法,以及一些注意事项。另外,页面是 Android 里一个叫 WebView 的组件,不过 Android 相关的知识在这里就不展开了。
关闭当前页
mui 框架将窗口关闭功能封装在 mui.back 方法中,具体执行逻辑是:
- 若当前 webview 为预加载页面,则 hide 当前 webview;
- 否则,close 当前 webview ;
在 mui 框架中,有三种操作会触发页面关闭(执行 mui.back 方法):
- 点击包含 .mui-action-back 类的控件
- 在屏幕内,向右快速滑动
- Android 手机按下 back 按键
示例(每次都需要用户确认后,才会关闭当前页面):
//备份mui.back,mui.back已将窗口关闭逻辑封装的比较完善(预加载及父子窗口),因此最好复用mui.back
var old_back = mui.back;
mui.back = function(){
var btn = ["确定","取消"];
mui.confirm('确认关闭当前窗口?','Hello MUI',btn,function(e){
if(e.index==0){
//执行mui封装好的窗口关闭逻辑;
old_back();
}
});
}
关闭指定页之外的其他页面
要关闭当前页之外的其他页面,需要获取到当前打开的所有页面(webview),以及当前页面的相关信息。重点介绍其中两种。
URL 比较
根据 URL 来进行指定页面的保留
var curr = plus.webview.currentWebview();
var wvs = plus.webview.all();
for (var i = 0,
len = wvs.length; i < len; i++) {
//关闭除当前页面外的其他页面
if (wvs[i].getURL() != curr.getURL()){
plus.webview.close(wvs[i]);
}
//关闭除指定页面外的其他页面
//key 可以是指定页面名称或者其他关键字
if (wvs[i].getURL().indexOf("Key") == -1){
plus.webview.close(wvs[i]);
}
}
//打开login页面后再关闭setting页面
plus.webview.open('../login/login.html');
curr.close();
页面 id 比较
每个页面都有一个 id ,可以根据页面 id 来进行指定页面的保留
//所有窗口对象
var wvs = plus.webview.all();
//首页窗口对象
var launch = plus.webview.getLaunchWebview();
//当前窗口对象
var self = plus.webview.currentWebview();
// 首页以及当前窗口对象,不关闭;
for (var i = 0,len = wvs.length; i < len; i++) {
//选定某一页不关wvs[i].id === localStorage.homeWebId
if (wvs[i].id === launch.id
|| wvs[i].id === self.id
||wvs[i].id === localStorage.homeWebId) {
continue;
} else {
//关闭中间的窗口对象,为防止闪屏,不使用动画效果;
wvs[i].close('none');
}
}
注意
如果你想要的效果是打开某个新页面(即该页面无缓存),并关掉其余页面。需要注意的是,由于 JS 是异步的,所以如果不小心就会造成一个后果:新页面在打开中,但是所有的页面都关闭完成了。这个时候整个应用会关闭。建议通过回调,在打开新页面后在进行关闭动作。