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頁面。