HBuilder mui 打開頁面和頁面刷新

一 mui打開新界面的幾種方式和區別

1.初始化時創建子頁面
2.直接打開新頁面
3.預加載頁面

【示例】
1.初始化時創建子頁面

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: {} //額外擴展參數
    }]
});

2.直接打開新頁面

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: {
        ..... //自定義擴展參數，可以用來處理頁面間傳值
    }
    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, //等待框背景區域高度，默認根據內容自動計算合適高度
            ......
        }
    }
})

3.預加載頁面
方式1

mui.init({
    preloadPages: [{
        url: prelaod - page - url,
        id: preload - page - id,
        styles: {}, //窗口參數
        extras: {}, //自定義擴展參數
        subpages: [{}, {}] //預加載頁面的子頁面
    }]
});

方式2

var page = mui.preload({
    url: new - page - url,
    id: new - page - id, //默認使用當前頁面的url作爲id
    styles: {}, //窗口參數
    extras: {} //自定義擴展參數
});

區別：
1.子頁面和非子頁面
以上三種方式中，2，3打開的頁面非子頁面，
區別是子頁面相當於html中的iframe，而非子頁面相當於新開了一個瀏覽器窗口加載了一個html

2.子頁面適用於側滑菜單
子頁面有其有點，特別適用與index.html+list.html這種情況，
如果用index.html(主頁面)+list.html(子頁面)實現的話，當主頁面右滑時子頁面會自動跟隨，
而用index.html(主頁面)+list.html(新頁面)實現的話，主頁面右滑，新頁面不右滑，還得單獨處理新頁面。

3.子頁面實用頻繁切換的情況
如果頻繁左滑右滑，在配置較低的手機上會出現list.html遮住index.html的情況，
採用子頁面模式就不會，採用新頁面模式機率很大。

4.子頁面適用與下拉刷新和上拉加載
之前做大下拉刷新的時候，採用的是新頁面的形式，
按照官網教程，怎麼搞都不成功，
後來看了下源碼，發現下拉刷新必須採用子頁面的形式，
也就是你的list.html必須是index.html的子頁面，纔可以下拉刷新。

5.新頁面適用於新頁面
open一個新頁面，適用於查看詳情之類的，需要打開一個新頁面的情況，
並且mui自己封裝了新頁面的back方法，你就不需要去操心了。

6.預加載頁面的兩種方式
第一種是在初始化的時候預加載，
這種情況適合在你這個頁面在很久之後纔會用，
如果你要立即到的頁面並使用，那麼你會得到null。
第二種方式類似與open，
個人感覺沒有什麼太大的區別，
唯一的區別是open就直接打開了，
preload只是加載，你可以之後選擇打開的時機。

7.總結
需要下拉刷新上拉加載請使用子頁面，
需要打開一個新頁面請使用新頁面方式，
需要加載一個頁面但是暫時不使用請使用預加載方式。

二 如何刷新父界面
就是你從A跳到B,在B進行了操作，然後回到A，A的數據發生改變。
先在子頁面初始化時，註冊beforeback方法；

     mui.init({  
      beforeback: function() {   
     //獲得列表界面的webview  var list = plus.webview.currentWebview().opener();
      //觸發列表界面的自定義事件（refresh）,從而進行數據刷新   
      mui.fire(list, 'refresh');  
     //返回true，繼續頁面關閉邏輯     return true;  
     }  

     });  

在父頁面中添加事件監聽

 window.addEventListener('refresh', function(e) {  
        location.reload();   
        //邏輯處理
    })     

三 父界面調用子頁面方法
父界面代碼：

var subWebview = plus.webview.getWebviewById('tab_workbench');
                //fire自定義事件
                mui.fire(subWebview, 'tab_one', {});

子頁面代碼：

window.addEventListener('tab_one', function(event) {
                //處理一些邏輯
            });

四 子界面調用父界面的函數
1.在父界面寫一個接收子界面傳遞值的函數

   //在父界面接收子界面的傳遞過來的值
            function showaddress(address) {
                document.getElementById('cityaddress').innerHTML = address;
            }

2.在子界面調用父界面的函數

function rtnAg(){   
         var wvB = plus.webview.currentWebview(); //獲取當前窗口的WebviewObject對象，即B
                    var wvA = wvB.opener(); //獲取當前窗口的創建者，即A  
                    wvA.evalJS("showaddress('" +address+ "')"); //執行父窗口中的方法  A中的showAG方法  
            wvB.close();                        //關閉B也可以不關閉  
        }