MUI從入門到項目實戰（十三）（MUI窗口管理之打開新頁面、關閉頁面、預加載）

一、打開新頁面

做web app，一個無法避開的問題就是轉場動畫；web是基於鏈接構建的，從一個頁面點擊鏈接跳轉到另一個頁面，如果通過有刷新的打開方式，用戶要面對一個空白的頁面等待；如果通過無刷新的方式，用Javascript移入DOM節點（常見的SPA解決方案），會碰到很高的性能挑戰：DOM節點繁多，頁面太大，轉場動畫不流暢甚至導致瀏覽器崩潰； mui的解決思路是：單webview只承載單個頁面的dom，減少dom層級及頁面大小；頁面切換使用原生動畫，將最耗性能的部分交給原生實現.

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新頁面頂部位置
      bottom:newage-bottom-position,//新頁面底部位置
      width:newpage-width,//新頁面寬度，默認為100%
      height:newpage-height,//新頁面高度，默認為100%
      ......
    },
    extras:{
      .....//自定義擴展參數，可以用來處理頁面間傳值
    },
    createNew:false,//是否重復創建同樣id的webview，默認為false:不重復創建，直接顯示
    show:{
      autoShow:true,//頁面loaded事件發生后自動顯示，默認為true
      aniShow:animationType,//頁面顯示動畫，默認為”slide-in-right“；
      duration:animationTime//頁面動畫持續時間，Android平台默認100毫秒，iOS平台默認200毫秒；
    },
    waiting:{
      autoShow:true,//自動顯示等待框，默認為true
      title:'正在加載...',//等待對話框上顯示的提示內容
      options:{
        width:waiting-dialog-widht,//等待框背景區域寬度，默認根據內容自動計算合適寬度
        height:waiting-dialog-height,//等待框背景區域高度，默認根據內容自動計算合適高度
        ......
      }
    }
})

 二、關閉頁面

mui框架將窗口關閉功能封裝在mui.back方法中，具體執行邏輯是：

若當前webview為預加載頁面，則hide當前webview；
否則，close當前webview；
在mui框架中，有三種操作會觸發頁面關閉（執行mui.back方法）：

點擊包含.mui-action-back類的控件
在屏幕內，向右快速滑動
Android手機按下back按鍵

hbuilder中敲mheader生成的代碼塊，會自動生成帶有返回導航箭頭的標題欄，點擊返回箭頭可關閉當前頁面，原因就是因為該返回箭頭包含.mui-action-back類，代碼如下：

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">標題</h1>
</header>

若希望在頂部導航欄之外的其它區域添加關閉頁面的控件，只需要在對應控件上添加.mui-action-back類即可，如下為一個關閉按鈕示例：

<button type="button" class='mui-btn mui-btn-danger mui-action-back'>關閉</button>

mui框架封裝的頁面右滑關閉功能，默認未啟用，若要使用右滑關閉功能，需要在mui.init();方法中設置swipeBack參數，如下：

mui.init({
    swipeBack:true //啟用右滑關閉功能
});

mui框架默認會監聽Android手機的back按鍵，然后執行頁面關閉邏輯； 若不希望mui自動處理back按鍵，可通過如下方式關閉mui的back按鍵監聽；

mui.init({
    keyEventBind: {
        backbutton: false  //關閉back按鍵監聽
    }
});

除了如上三種操作外，也可以直接調用mui.back()方法，執行窗口關閉邏輯；

mui.back()僅處理窗口邏輯，若希望在窗口關閉之前再處理一些其它業務邏輯，則可將業務邏輯抽象成一個具體函數，然后注冊為mui.init方法的beforeback參數;beforeback的執行邏輯為：

• 執行beforeback參數對應的函數若返回false，則不再執行mui.back()方法；
• 否則（返回true或無返回值），繼續執行mui.back()方法；

示例：從列表打開詳情頁面，從詳情頁面再返回后希望刷新列表界面，此時可注冊beforeback參數，然后通過自定義事件通知列表頁面刷新數據，示例代碼如下：

mui.init({
    beforeback: function(){
        //獲得列表界面的webview
        var list = plus.webview.getWebviewById('list');
        //觸發列表界面的自定義事件（refresh）,從而進行數據刷新
        mui.fire(list,'refresh');
        //返回true，繼續頁面關閉邏輯
        return true;
    }
});

注意：beforeback的執行返回必須是同步的（阻塞模式），若使用nativeUI這種異步js（非阻塞模式），則可能會出現意想不到的結果；比如：通過plus.nativeUI.confirm()彈出確認框，可能用戶尚未選擇，頁面已經返回了（beforeback同步執行完畢，無返回值，繼續執行mui.back()方法，nativeUI不會阻塞js進程）：在這種情況下，若要自定義業務邏輯，就需要復寫mui.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();
    }
  });
}

三、預加載

所謂的預加載技術就是在用戶尚未觸發頁面跳轉時，提前創建目標頁面，這樣當用戶跳轉時，就可以立即進行頁面切換，節省創建新頁面的時間，提升app使用體驗。mui提供兩種方式實現頁面預加載。

方式一：通過mui.init方法中的preloadPages參數進行配置.

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口參數
      extras:{},//自定義擴展參數
      subpages:[{},{}]//預加載頁面的子頁面
    }
  ],
  preloadLimit:5//預加載窗口數量限制(一旦超出,先進先出)默認不限制
});

該種方案使用簡單、可預加載多個頁面，但不會返回預加載每個頁面的引用，若要獲得對應webview引用，還需要通過plus.webview.getWebviewById方式獲得；另外，因為mui.init是異步執行，執行完mui.init方法后立即獲得對應webview引用，可能會失敗，例如如下代碼：

mui.init({
  preloadPages:[
    {
      url:'list.html',
      id:'list'
    }
  ]
});
var list = plus.webview.getWebviewByid('list');//這里可能返回空；

方式二：通過mui.preload方法預加載.

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默認使用當前頁面的url作為id
    styles:{},//窗口參數
    extras:{}//自定義擴展參數
});