HBuilder的webview操做

時間 2019-11-18

標籤 hbuilder webview 简体版

原文原文鏈接

HBuilder的webview操做

webviewAPI文檔：http://www.html5plus.org/doc/zh_cn/webview.htmljavascript

建立新的webview窗口：

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

說明：建立Webview窗口，用於加載新的HTML頁面，可經過styles設置Webview窗口的樣式，建立完成後須要調用show方法才能將Webview窗口顯示出來。css

顯示Webview窗口

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

說明：顯示已建立或隱藏的Webview窗口，需先獲取窗口對象或窗口id，並可指定顯示窗口的動畫及動畫持續時間。html

隱藏Webview窗口

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

說明：根據指定的WebviewObject對象或id隱藏Webview窗口，使得窗口不可見。html5

獲取當前窗口的WebviewObject對象

WebviewObject plus.webview.currentWebview();

說明：獲取當前頁面所屬的Webview窗口對象。java

查找指定標識的WebviewObject窗口

WebviewObject plus.webview.getWebviewById( id );

說明：在已建立的窗口列表中查找指定標識的Webview窗口並返回。若沒有查找到指定標識的窗口則返回null，若存在多個相同標識的Webview窗口，則返回第一個建立的Webview窗口。若是要獲取應用入口頁面所屬的Webview窗口，其標識爲應用的%APPID%，可經過plus.runtime.appid獲取。ios

建立並打開Webview窗口

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

說明：建立並顯示Webview窗口，用於加載新的HTML頁面，可經過styles設置Webview窗口的樣式，建立完成後自動將Webview窗口顯示出來。web

以上內容來自文檔，詳細可閱讀官方文檔。ajax

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。