MUI 关闭页面的几种方法

MUI 关闭页面的方法

运用 MUI 开发 APP 时，要记住该 APP 是基于一系列的页面来构成的。在实际应用中，总会在一些场景下需要关闭页面。例如注销，需要打开登录页，关闭除登录页外的其他所有页面。

所以在此介绍有关 MUI 关闭页面的方法，以及一些注意事项。另外，页面是 Android 里一个叫 WebView 的组件，不过 Android 相关的知识在这里就不展开了。

关闭当前页

mui 框架将窗口关闭功能封装在 mui.back 方法中，具体执行逻辑是：

1. 若当前 webview 为预加载页面，则 hide 当前 webview；
2. 否则，close 当前 webview ；

在 mui 框架中，有三种操作会触发页面关闭（执行 mui.back 方法）：

1. 点击包含 .mui-action-back 类的控件
2. 在屏幕内，向右快速滑动
3. 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 是异步的，所以如果不小心就会造成一个后果：新页面在打开中，但是所有的页面都关闭完成了。这个时候整个应用会关闭。建议通过回调，在打开新页面后在进行关闭动作。