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