HBuilder的webview操作

HBuilder的webview操作

webviewAPI文档：http://www.html5plus.org/doc/zh_cn/webview.html

创建新的webview窗口：

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

说明：创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。

显示Webview窗口

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

说明：显示已创建或隐藏的Webview窗口，需先获取窗口对象或窗口id，并可指定显示窗口的动画及动画持续时间。

隐藏Webview窗口

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

说明：根据指定的WebviewObject对象或id隐藏Webview窗口，使得窗口不可见。

获取当前窗口的WebviewObject对象

WebviewObject plus.webview.currentWebview();

说明：获取当前页面所属的Webview窗口对象。

查找指定标识的WebviewObject窗口

WebviewObject plus.webview.getWebviewById( id );

说明：在已创建的窗口列表中查找指定标识的Webview窗口并返回。 若没有查找到指定标识的窗口则返回null，若存在多个相同标识的Webview窗口，则返回第一个创建的Webview窗口。 如果要获取应用入口页面所属的Webview窗口，其标识为应用的%APPID%，可通过plus.runtime.appid获取。

创建并打开Webview窗口

WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );

说明：创建并显示Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后自动将Webview窗口显示出来。

以上内容来自文档，详细可阅读官方文档。

1.mui的双webview模式需要在页面初始化的时候配置器参数：

mui.init({
    //子页面
    subpages: [{
        //...
    }],
    //预加载
    preloadPages:[
        //...
     ],
    //下拉刷新、上拉加载
     pullRefresh : {
       //...
    },
    //手势配置
      gestureConfig:{
       //...
    },
    //侧滑关闭
    swipeBack:true, //Boolean(默认false)启用右滑关闭功能

    //监听Android手机的back、menu按键
    keyEventBind: {
        backbutton: false,  //Boolean(默认truee)关闭back按键监听
        menubutton: false   //Boolean(默认true)关闭menu按键监听
    },
    //处理窗口关闭前的业务
    beforeback: function() {
        //... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
    },
    //设置状态栏颜色
    statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
    preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})

在APP开发中，若调用API，必须等plusready事件发生后才能正常运行，mui将该事件封装成mui.plusReady()，所以建议API的操作都写在mui.plusReady方法中。

如打印当前页面的URL：

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

2.创建子页面

将固定的页面分离出来，然后在init方法中初始发子页面的内容，具体可参照mui的index页面和list页面。

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同理。

3.打开新页面

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,//等待框背景区域高度，默认根据内容自动计算合适高度
        ......
      }
    }
})

注意：扩展参数只在打开页面的时候有效，若目标窗口为预加载页面，则通过mui.openwindow方法打开时传递的extras参数无效。

1.示例1，打开新页面

//tap为mui封装的单击事件，可参考手势事件章节
document.getElementById('info').addEventListener('tap', function() {
  //打开关于页面
  mui.openWindow({
    url: 'examples/info.html',
    id:'info'
  });
});

2.打开需要从服务器端获取数据的页面

1.在跳转页面loaded事件发生后，不自动显示：

//A页面中打开B页面，设置show的autoShow为false，则B页面在其loaded事件发生后，不会自动显示；

mui.openWindow({

url: 'B.html',

show:{

autoShow:false

}

});

2.在调转页面获取数据之后再关闭等待框，显示调转页面：

//B页面onload从服务器获取列表数据；
window.onload = function(){
  //从服务器获取数据
  ....
  //业务数据获取完毕，并已插入当前页面DOM；
  //注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
  mui.plusReady(function(){
    //关闭等待框
    plus.nativeUI.closeWaiting();
    //显示当前页面
    mui.currentWebview.show();
  });
}

关闭页面

1.包含.mui-action-back类可以触发关闭，代码如下：

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">标题</h1>
</header>

2.如果需要在其他按钮上触发返回事件，只需要添加.mui-action-back类

3.屏幕右滑动关闭页面，需要在mui.init()方法中是设置：

mui.init({
    swipeBack:true //启用右滑关闭功能
});

实战：练习代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title" id="title">标题</h1>
	</header>
	<nav class="mui-bar mui-bar-tab" href="html/home.html">
	    <a class="mui-tab-item mui-active">
	        <span class="mui-icon mui-icon-home"></span>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a class="mui-tab-item" href="html/message.html">
	        <span class="mui-icon mui-icon-email"></span>
	        <span class="mui-tab-label">邮件</span>
	    </a>
	    <a class="mui-tab-item" href="html/setting.html">
	        <span class="mui-icon mui-icon-gear"></span>
	        <span class="mui-tab-label">设置</span>
	    </a>
	</nav>
</body>
</html>
<script type="text/javascript" charset="utf-8">
	// mui初始化
	mui.init();

	var subpages = ['html/home.html', 'html/message.html', 'html/setting.html'];
	var subpage_style = {
		top: '45px',
		bottom: '51px'
	};
	var aniShow = {};
	// 当前激活选项
	var activeTab = subpages[0];
	var title = document.getElementById("title");

	if(mui.os.plus){
		// 创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for (var i = 0; i < subpages.length; i++) {
				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				if (i > 0) {
					sub.hide();
				}else{
					temp[subpages[i]] = "true";
					mui.extend(aniShow,temp);
				}
				self.append(sub);
			}
		});
	}else{
		// 创建iframe代替子页面
        createIframe('.mui-content',{
            url: activeTab,
            style: subpage_style
        });
	}

	// 选项卡点击事件
	mui('.mui-bar-tab').on('tap', 'a', function(e) {
		var targetTab = this.getAttribute('href');

		if (targetTab == activeTab) {return;}
		//更换标题
		title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;

		//显示目标选项卡
		if(mui.os.plus){
			//若为iOS平台或非首次显示，则直接显示
			if(mui.os.ios||aniShow[targetTab]){
				plus.webview.show(targetTab);
			}else{
				//否则，使用fade-in动画，且保存变量
				var temp = {};
				temp[targetTab] = "true";
				mui.extend(aniShow,temp);
				plus.webview.show(targetTab,"fade-in",300);
			}
			//隐藏当前;
			plus.webview.hide(activeTab);
		}else{
			// 创建iframe代替子页面
	        createIframe('.mui-content',{
	            url: targetTab,
	            style: subpage_style
	        });
		}
		//更改当前活跃的选项卡
		activeTab = targetTab;
	});

	/*兼容处理方法*/
	var createIframe=function(el,opt){
		var elContainer=document.querySelector(el);
		var wrapper=document.querySelector('.mui-iframe-wrapper');
		if (!wrapper) {
			//创建wrapper和iframe
			wrapper = document.createElement('div');
	        wrapper.className = 'mui-iframe-wrapper';
	        for(var i in opt.style){
	            wrapper.style[i] = opt.style[i];
	        }
	        var iframe = document.createElement('iframe');
	        iframe.src = opt.url;
	        iframe.id = opt.id || opt.url;
	        iframe.name = opt.id;
	        wrapper.appendChild(iframe);
	        elContainer.appendChild(wrapper);
		} else{
			 var iframe = wrapper.querySelector('iframe');
	        iframe.src = opt.url;
	        iframe.id = opt.id || opt.url;
	        iframe.name = iframe.id;
		}
	}

</script>

//在根目录下，新建html文件，在文件夹中新建home，message，setting的mui页面。