MUI從入門到項目實戰（十二）（MUI窗口管理之頁面初始化、創建子頁面）

頁面初始化

在app開發中，若要使用HTML5+擴展api，必須等plusready事件發生后才能正常使用，mui將該事件封裝成了mui.plusReady()方法，涉及到HTML5+的api，建議都寫在mui.plusReady方法中。如下為打印當前頁面URL的示例：

mui.plusReady(function(){
     console.log("當前頁面URL："+plus.webview.currentWebview().getURL());
});

 創建子頁面

在mobile app開發過程中，經常會出現共用的導航欄或者選項卡，每次打開頁面都需要重新渲染，而且容易出現卡頭卡尾的現象。並且此時若使用局部滾動，在android手機上會出現滾動不流暢的問題；

mui現在提供兩種解決方案:

第一種（官方推薦）：在plus環境下，使用原生titleNView以及原生tabbar來替換頁面的導航欄或者選項卡。在頁面打開時，渲染已經完成，讓你的應用更接近原生app。具體做法：原生titleNView參考mui.openWindow的示例3，原生tabbar示例參考ask教程示例

第二種：通過雙webview模式解決，此種情況適用於需要上下拉刷新的列表頁面。將需要滾動的區域通過單獨的webview實現，完全使用原生滾動。具體做法則是：將目標頁面分解為主頁面和內容頁面，主頁面顯示卡頭卡尾區域，比如頂部導航、底部選項卡等；內容頁面顯示具體需要滾動的內容，然后在主頁面中調用mui.init方法初始化內容頁面。

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:{}//額外擴展參數
}]
});

參數說明：styles表示窗口屬性，參考5+規范中的WebviewStyle；特別注意，height和width兩個屬性,即使不設置，也默認按100%計算；因此若設置了top值為非"0px"的情況，建議同時設置bottom值，否則5+ runtime根據高度100%計算，可能會造成頁面真實底部位置超出屏幕范圍的情況；left、right同理。