HTML5+和MUI頁面操做

最近老是碰到針對頁面的一些操做，如下是針對webview的一些簡單方法以及我的理解。
更多詳盡的內容請參考標準文檔：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.getLaunchWebview
Webview模塊管理應用窗口界面，實現多窗口的邏輯控制管理操做。經過plus.webview可獲取應用界面管理對象。
方法
all:獲取全部webview頁面
close:關閉Webview窗口
creat:建立新的Webview窗口
currentWebview: 獲取當前窗口的WebviewObject對象
getWebviewById: 查找指定標識的WebviewObject窗口
getLaunchWebview: 獲取應用首頁WebviewObject窗口對象
getTopWebview: 獲取應用顯示棧頂的WebviewObject窗口對象
hide: 隱藏Webview窗口
open: 建立並打開Webview窗口
show: 顯示Webview窗口
defaultHardwareAccelerated: 獲取Webview默認是否開啓硬件加速
用法
plus.webview.all()
獲取全部webview頁面並放到一個數組裏面，且數組的第一個元素就是加載應用的入口頁。
plus.webview.close(id_wvobj, aniClose, duration, extras)
plus.webview.hide(id_wvobj, aniHide, duration, extras)

    id_wvobj: ( String | WebviewObject) 必選 要關閉Webview窗口id或窗口對象

若操做窗口對象已經關閉，則無任何效果。 使用窗口id時，則查找對應id的窗口，若是有多個相同id的窗口則操做最早打開的窗口，若沒有查找到對應id的WebviewObject對象，則無任何效果。

    aniClose/aniHide: ( AnimationTypeClose ) 可選 關閉/隱藏Webview窗口的動畫效果

若是沒有指定關閉/隱藏窗口動畫，則使用默認值「auto」，即便用顯示時設置的窗口動畫相對應的關閉/隱藏動畫。

    duration: ( Number ) 可選 關閉Webview窗口動畫的持續時間

單位爲ms，若是沒有設置則使用顯示窗口動畫時間。

    extras: ( WebviewExtraOptions) 可選 關閉Webview窗口擴展參數 可用於指定Webview窗口動畫是否使用圖片加速。

plus.webview.create( url, id, styles, extras )

    url: ( String ) 可選 新窗口加載的HTML頁面地址，可支持本地地址和網絡地址。
    id: ( String ) 可選 新窗口的標識

窗口標識可用於在其它頁面中經過getWebviewById來查找指定的窗口，爲了保持窗口標識的惟一性，應該避免使用相同的標識來建立多個Webview窗口。 若是傳入無效的字符串則使用url參數做爲WebviewObject窗口的id值。

    styles: ( WebviewStyles) 可選 建立Webview窗口的樣式（如窗口寬、高、位置等信息）
    extras: ( JSON ) 可選 建立Webview窗口的額外擴展參數

值爲JSON類型，設置擴展參數後能夠直接經過Webview的點（「.」）操做符獲取擴展參數屬性值，如：
var w=plus.webview.create('url.html','id',{},{preload:"preload webview"});
// 可直接經過如下方法獲取preload值
console.log(w.preload); // 輸出值爲「preload webview」
plus.webview.currentWebview(); --常常用到，很重要！！！
plus.webview.getWebviewById(string); --常常用到，很重要！！！
若是id爲空，則返回值爲空
plus.webview.getLaunchWebview();
應用首頁WebviewObject窗口對象
plus.webview.getTopWebview();
獲取應用顯示棧頂的WebviewObject窗口對象
plus.webview.open(url, id, styles, aniShow, duration, showedCB )

    url: ( String ) 可選 打開窗口加載的HTML頁面地址，可支持本地地址和網絡地址。
    id: ( String ) 可選 打開窗口的標識

窗口標識可用於在其它頁面中經過getWebviewById來查找指定的窗口，爲了保持窗口標識的惟一性，應該避免使用相同的標識來建立多個Webview窗口。 若是傳入無效的字符串則使用url參數做爲WebviewObject窗口的id值。

    styles: ( WebviewStyles) 可選 建立Webview窗口的樣式（如窗口寬、高、位置等信息）
    aniShow: ( AnimationTypeShow ) 可選 顯示Webview窗口的動畫效果

若是沒有指定窗口動畫，則使用默認無動畫效果「none」。

    duration: ( Number ) 可選 顯示Webview窗口動畫的持續時間

單位爲ms，若是沒有設置則使用默認窗口動畫時間600ms。

    showedCB: ( SuccessCallback ) 可選 Webview窗口顯示完成的回調函數

當指定Webview窗口顯示動畫執行完畢時觸發回調函數，窗口無動畫效果（如"none"動畫效果）時也會觸發此回調。

plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

    id_wvobj: ( String | WebviewObject ) 必選 要顯示Webview窗口id或窗口對象

若操做Webview窗口對象顯示，則無任何效果。 使用窗口id時，則查找對應id的窗口，若是有多個相同id的窗口則操做最早建立的窗口，若沒有查找到對應id的WebviewObject對象，則無任何效果。

    aniShow: ( AnimationTypeShow ) 可選 顯示Webview窗口的動畫效果

若是沒有指定窗口動畫類型，則使用默認值「auto」，即自動選擇上一次顯示窗口的動畫效果，若是以前沒有顯示過，則使用「none」動畫效果。

    duration: ( Number ) 可選 顯示Webview窗口動畫的持續時間

單位爲ms，若是沒有設置則使用默認窗口動畫時間600ms。

    showedCB: ( SuccessCallback ) 可選 Webview窗口顯示完成的回調函數

當指定Webview窗口顯示動畫執行完畢時觸發回調函數，窗口無動畫效果（如"none"動畫效果）時也會觸發此回調。

    extras: ( WebviewExtraOptions ) 可選 顯示Webview窗口擴展參數

可用於指定Webview窗口動畫是否使用圖片加速。
Boolean plus.webview.defaultHardwareAccelerated();
Webview窗口默認開啓硬件加速則返回true，不然返回false。

1.利用create()方法建立須要用show()方法顯示出來。
2.open()方法相似於同時執行create()和show()。
3.close、hide、open、show
我每次使用這幾類方法是
先獲取頁面：var detailPage=plus.webview.getWebviewById('main');
而後對頁面進行操做：detailPage.close();
若是是隱藏當前頁面，直接plus.webview.currentWebview().hide();
4.由於用到了mui，因此結合mui頁面操做描述一下
mui裏與webview相關的部分，只是對plus.webview的經常使用操做作了一些封裝，讓經常使用的操做調用更簡單。更多更全面的api，都在plus.webview裏。
mui詳細頁面操做參考：http://dev.dcloud.net.cn/mui/window/#pageinit
mui.init(); // 頁面初始化
mui.init({
preloadPages:[ //在初始化中預加載頁面 { url:prelaod-page-url, id:preload-page-id, styles:{},//窗口參數 extras:{},//自定義擴展參數 subpages:[{},{}]//預加載頁面的子頁面 } ],
})
mui.preload(); //預加載頁面
mui.init({ subpages:[{//建立子頁面 url:'list.html', id:'list.html', styles:{ top:'45px',//mui標題欄默認高度爲45px； bottom:'0px'//默認爲0px，可不定義； } }] });
mui.openWindow();//打開新頁面
每次都用mui.openWindow而不close頁面會形成內存消耗過大。這是由於使用mui.openWindow跳轉頁面會用到plus.webview.show方法，若是不close頁面會新開不少重複的webview，這樣就形成多個頁面同時在消耗內存。
另外不close全部不用的webview，webview被close後還會露出其餘沒有被close的webview。
關閉頁面封裝到mui.back()方法中，若是須要關閉能夠參考close方法
---------------------
做者：育秦
來源：CSDN
原文：https://blog.csdn.net/xuepan1994/article/details/51891923
版權聲明：本文爲博主原創文章，轉載請附上博文連接！