mui窗口管理

頁面初始化

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

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

 

打開新頁面

作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,//等待框背景區域高度，默認根據內容自動計算合適高度
 ...... } } })

參數：

• styles

  窗口參數，參考5+規範中的WebviewStyle；特別注意，height和width兩個屬性,即便不設置，也默認按100%計算；所以若設置了top值爲非"0px"的狀況，建議同時設置bottom值，不然5+ runtime根據高度100%計算，可能會形成頁面真實底部位置超出屏幕範圍的狀況；left、right同理。

• extras

  新窗口的額外擴展參數，可用來處理頁面間傳值；例如：

var webview = mui.openWindow({ url:'info.html', extras:{ name:'mui'  //擴展參數
 } }); console.log(webview.name);//輸出mui字符串

• 注意：擴展參數僅在打開新窗口時有效，若目標窗口爲預加載頁面，則經過mui.openWindow方法打開時傳遞的extras參數無效。

• createNew

  是否重複建立相同id的webview；

  爲優化性能、避免app中重複建立webview，mui v1.7.0開始增長createNew參數，默認爲false；判斷邏輯以下：

  • createNew參數爲爲true，則不判斷重複，每次都新建webview；

  • createNew參數爲爲fasle，則先查找當前App中是否已存在一樣id的webview，若存在則直接顯示；不然新建立並根據show參數執行顯示邏輯；

  注意：plusReady事件僅在webview首次建立時觸發，使用mui.openWindow方法屢次打開已存在的一樣id的webview時，是不會重複觸發plusReady事件的； 所以若業務寫在plusReady事件中，可能會出現執行結果和預期不一致的狀況；此時可經過自定義事件觸發； 案例參考：mui.plusReady有時會失效;

• show

  窗口顯示控制參數，具體參數以下：

  • autoShow：目標窗口loaded事件發生後，是否自動顯示，默認爲true；若爲false，則僅建立但不顯示webview；若目標頁面爲預加載頁面，則該參數無效；

  • aniShow表示頁面顯示動畫，好比從右側劃入、從下側劃入等，具體可參考5+規範中的AnimationTypeShow

  • duration：顯示Webview窗口動畫的持續時間，單位爲ms

• waiting

  系統等待框參數

  mui框架在打開新頁面時等待框的處理邏輯爲：

  顯示等待框-->建立目標頁面webview-->目標頁面loaded事件發生-->關閉等待框；

  所以，只有當新頁面爲新建立頁面（webview）時，會顯示等待框，不然若爲預加載好的頁面，則直接顯示目標頁面，不會顯示等待框。waiting中的具體參數：

  • autoShow：是否自動顯示等待框，默認爲true；若爲false，則不顯示等待框；注意：若waiting框的autoShow爲true，但目標頁面不自動顯示，則需在目標頁面中經過以下代碼關閉等待框：plus.nativeUI.closeWaiting();

  • title：等待框上的提示文字

  • options表示等待框顯示參數，好比寬高、背景色、提示文字顏色等，具體可參考5+規範中的WaitingOption

 

跳轉到另外一個頁面時，獲取前一個頁面傳遞的參數

plus.webview.currentWebview().參數

 

 

菜鳥寫文章，不喜勿噴，若有錯誤，請指正。