mui開發app之webview

若將app理解爲瀏覽器，那麼webview至關於tab標籤，app頁面間的切換，也就是webview的切換。

在Html5plus的官方文檔中關於webview的方法並很少，共有以下幾個

　　all　　　　獲取全部webview窗口

　　close　　  關閉webview窗口

　　create　　建立新的webview窗口

　　currentWebview　　獲取當前窗口的webviewObject對象（這個對象很重要！！）

　　getWebviewById　　查找指定表示的webviewObject窗口

　　hide　　　　隱藏webview窗口

　　open　　　  建立並打開webview窗口

　　show　　    顯示webview窗口

1.獲取當前窗口id

//WebviewObject plus.webview.currentWebview();
   var ws=plus.webview.currentWebview();//獲取當前頁面所屬的Webview窗口對象
   console.log( "窗口標識: "+ws.id );
   console.log( "當前Webview窗口："+ws.getURL() );

2.經過id獲取對象關閉窗口（查找指定標識的WebviewObject窗口）

   var ws = plus.webview.getWebviewById(id);
   plus.webview.close(ws);
   等效於：plus.webview.getWebviewById(id).close();
   var h=plus.webview.getWebviewById( plus.runtime.appid );
   console.log( "應用首頁Webview窗口："+h.getURL() );

3.獲取全部Webview窗口

  // Array[WebviewObject]   plus.webview.all();

    // 獲取全部Webview窗口
    var wvs=plus.webview.all();
    for(var i=0;i<wvs.length;i++){
        console.log('webview'+i+': '+wvs[i].getURL());
    }

4.關閉Webview窗口

   //void  plus.webview.close( id_wvobj, aniClose, duration, extras );
    var ws=plus.webview.currentWebview();
    plus.webview.close(ws);

5.建立新的Webview窗口

   //WebviewObject   plus.webview.create( url, id, styles, extras );
     var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
     w.show(); // 顯示窗口
　 //參數extras: ( JSON ) 可選 建立Webview窗口的額外擴展參數值爲JSON類型，設置擴展參數後能夠直接經過Webview的點（「.」）操做符獲取擴展參數屬性值，
   //如： var w=plus.webview.create(‘url.html’,’id’,{},{preload:’preload webview’});
   // 可直接經過如下方法獲取preload值 console.log(w.preload);
   // 輸出值爲「preload webview」

6.獲取屏幕全部可視的Webview窗口

  說明：僅在屏幕區域顯示的Webview窗口，若是Webview窗口顯示了但被其它Webview窗口蓋住則認爲不可視。
  // Array[WebviewObject] plus.webview.getDisplayWebview();
    // 獲取全部可視的Webview窗口
    var wvs=plus.webview.getDisplayWebview();
    for(var i=0;i<wvs.length;i++){
        console.log('Display webview '+i+': '+wvs[i].getURL());
    }

7.獲取應用首頁WebviewObject窗口對象

  //WebviewObject  plus.webview.getLaunchWebview();
    // 獲取應用首頁窗口對象
    var h=plus.webview.getLaunchWebview();
    console.log('應用首頁Webview窗口：'+h.getURL());

8.獲取應用第二個首頁WebviewObject窗口對象

  //WebviewObject plus.webview.getSecondWebview();
      var h=plus.webview.getSecondWebview();
    if(h){
        console.log('應用第二個首頁Webview窗口：'+h.getURL());
    }else{
        console.log('應用不存在第二個首頁Webview窗口');
    }

9.mui 雙首頁secondwebview配置的使用

依照更新說明，在manifest.json文件的plus節點下，新增secondwebview節點配置。

"plus": {
    "secondwebview": {
        "launch_path": "_www/home.html",
        "id": "home"
    }
}
這裏一樣支持secondWebview的styles等屬性。

"plus": {
    "secondwebview": {
        "launch_path": "_www/home.html",
        "id": "home",
        "top": "50px",
        "bottom": "0px"
    }
}
而後，在launchWebview中創建父子關係便可。固然，若是非必要狀況下，是不用創建父子關係的。

var _self = plus.webview.getLaunchWebview();
var _second = plus.webview.getSecondWebview();
_self.append(_second);
在雙首頁模式下，父頁面和子頁面的內容是同時顯示的，不會給用戶形成加載延遲的感受，大大加強了流應用及5+App的體驗。

10.獲取應用顯示棧頂的WebviewObject窗口對象

  //WebviewObject plus.webview.getTopWebview();
    // 獲取應用首頁窗口對象
    var h=plus.webview.getTopWebview();
    console.log('應用顯示棧頂的Webview窗口：'+h.getURL());

11.隱藏Webview窗口

//void plus.webview.hide( id_wvobj, aniHide, duration, extras );
     plus.webview.hide(plus.webview.currentWebview());

12.建立並打開Webview窗口

    //WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
     var w = plus.webview.open('http://m.weibo.cn/u/3196963860');

13.顯示Webview窗口

    //void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
      var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
    plus.webview.show(w); // 顯示窗口

14.create頁面，顯示不存在父子窗口 ，父子窗口append 

Webview窗口做爲子窗口添加（Webview.append）到其它Webview窗口中時有效，這時其它Webview窗口爲父窗口。 
將另外一個Webview窗口做爲子窗口添加到當前Webview窗口中，添加後其全部權歸父Webview窗口，父窗口顯示時子窗口會自動顯示，父窗口隱藏時子窗口自動隱藏，當父窗口關閉時子窗口也自動關閉。 
咱們不妨在子webview關閉父webview試試，結果發現子webview也被關閉了，若是不對子webview進行close()方法操做，可知子webview的生命週期是由父webview決定的。
咱們能夠經過對子webview進行show()、hide()操做，甚至可使用remove移除子Webview窗口，從而實現動態子webview。這種場景最經常使用的是webview選項卡。

15.mui.fire()觸發自定義事件

mui.fire( target , event , data )

16. 界面從新加載

  location.reload();

17.窗口層級關係

  append   父子關係
  subpages 父子關係
  openwindow 平行關係
  preloadpages 平行關係
  create  平行關係