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  平行关系