一、打開子頁面
mui.init({ subpages:[{ url:your-subpage-url,//子頁面HTML地址，支持本地地址和網絡地址 id:your-subpage-id,//子頁面標志 styles:{ top:subpage-top-position,//子頁面頂部位置 bottom:subpage-bottom-position,//子頁面底部位置 width:subpage-width,//子頁面寬度，默認為100% height:subpage-height,//子頁面高度，默認為100% ...... }, extras:{}//額外擴展參數 }] });
子頁面相當於在html中使用iframe，所有的瀏覽器都支持，不依賴h5+api，但是沒辦法控制創建時隱藏頁面，而且顯示動畫效果只能是"fade-in"；
另外，如果子頁面已經顯示，但是被其它子頁面遮蓋時，再次顯示時，不會有動畫效果，解決辦法是，先隱藏，然后再顯示。
二、打開新頁面（非子頁面）
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框架在打開新頁面時等待框的處理邏輯為：
顯示等待框-->創建目標頁面webview-->目標頁面loaded事件發生-->關閉等待框；
因此，只有當新頁面為新創建頁面（webview）時，會顯示等待框，否則若為預加載好的頁面，則直接顯示目標頁面，不會顯示等待框。
三、預加載頁面
方式1：
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引用，可能會失敗。
方式2：
var page = mui.preload({ url:new-page-url, id:new-page-id,//默認使用當前頁面的url作為id styles:{},//窗口參數 extras:{}//自定義擴展參數 });
可立即返回對應webview的引用，但一次僅能預加載一個頁面；若需加載多個webview，則需多次調用。
最后顯示頁面：
方式1：plus.webview.show("xx");
方式2：mui.openWindow({id: "xxx"});
使用預加載，在需要顯示時立即進行顯示，可以節省新頁面的創建時間。這兩種預加載的方式都依賴h5+api，直接打開瀏覽器看不到效果，必須在模擬器或真機上調試。
四、使用div的方式模擬頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/mui.min.css"> <script src="../js/mui.min.js "></script> <script src="../js/mui.view.js "></script> <style> .mui-views, .mui-view, .mui-pages, .mui-page, .mui-page-content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; } /* 所有頁面默認隱藏 */ .mui-page { display: none; } /* 標題欄高46px，所以主頁面頂部向下偏移46px */ .mui-pages { top: 46px; height: auto; } /* 只顯示主頁面 */ .mui-pages .mui-page { display: block; } /* 頁面切換動畫（顯示和隱藏時都需要） */ .mui-transitioning { -webkit-transition: -webkit-transform 200ms linear; transition: transform 200ms linear; } .mui-page-left { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } </style> </head> <body> <!--頁面主結構開始--> <div id="app" class="mui-views"> <div class="mui-view"> <div class="mui-navbar"> </div> <div class="mui-pages"> </div> </div> </div> <!--默認顯示的主頁面--> <div id="main_page" class="mui-page"> <!--頁面標題欄--> <div class="mui-navbar-inner mui-bar mui-bar-nav"> <button type="button" class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span> </button> <h1 class="mui-center mui-title">主頁面</h1> </div> <!--頁面主內容區--> <div class="mui-page-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a href="#page1" class="mui-navigate-right">打開頁面1</a> </li> <li class="mui-table-view-cell"> <a href="#page2" class="mui-navigate-right">打開頁面2</a> </li> <li class="mui-table-view-cell"> <a href="#page3" class="mui-navigate-right">打開頁面3</a> </li> </ul> <ul class="mui-table-view"> <li class="mui-table-view-cell" style="text-align: center;"> <a id='exit'>退出</a> </li> </ul> </div> </div> </div> </div> <!--頁面1--> <div id="page1" class="mui-page"> <!--頁面標題欄--> <div class="mui-navbar-inner mui-bar mui-bar-nav"> <button type="button" class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span> </button> <h1 class="mui-center mui-title">頁面1</h1> </div> <!--頁面主內容區--> <div class="mui-page-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按鈕1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按鈕2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按鈕3</a> </li> </ul> </div> </div> </div> </div> <!--頁面2--> <div id="page2" class="mui-page"> <!--頁面標題欄--> <div class="mui-navbar-inner mui-bar mui-bar-nav"> <button type="button" class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span> </button> <h1 class="mui-center mui-title">頁面2</h1> </div> <!--頁面主內容區--> <div class="mui-page-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按鈕1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按鈕2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按鈕3</a> </li> </ul> </div> </div> </div> </div> <!--頁面3--> <div id="page3" class="mui-page"> <!--頁面標題欄--> <div class="mui-navbar-inner mui-bar mui-bar-nav"> <button type="button" class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span> </button> <h1 class="mui-center mui-title">頁面3</h1> </div> <!--頁面主內容區--> <div class="mui-page-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按鈕1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按鈕2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按鈕3</a> </li> </ul> </div> </div> </div> </div> <script> mui.init(); //初始化單頁view var viewApi = mui('#app').view({ defaultPage: '#main_page' }); var oldBack = mui.back; mui.back = function() { if (viewApi.canBack()) { //如果view可以后退，則執行view的后退 viewApi.back(); } else { //執行webview后退 oldBack(); } }; </script> </body> </html>
注意這里面的css樣式必須要寫，否則切換頁面會不正常。
五、關閉頁面
mui框架將窗口關閉功能封裝在mui.back方法中，具體執行邏輯是：
1）若當前webview為預加載頁面，則hide當前webview；
2）否則，close當前webview；
如果我們使用div模擬頁面，需要自己響應back方法，處理div顯示隱藏：
var viewApi = mui('#app').view({
defaultPage: '#main_page'
});
var oldBack = mui.back;
mui.back = function() {
if (viewApi.canBack()) { //如果view可以后退，則執行view的后退
viewApi.back();
} else { //執行webview后退
oldBack();
}
};