MUI教程

一、頁面跳轉

初始化時建立子頁面

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: {} //額外擴充套件引數  
    }]  
}); 

直接開啟新頁面

MUI封裝了自己的頁面開啟的方法

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, //等待框背景區域高度，預設根據內容自動計算合適高度  
            ......  
        }  
    }  
})  

預載入頁面

// 方式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. 子頁面適用於下拉重新整理和上拉載入

二、頁面傳參

通過extras傳參

// 傳遞引數
mui.openWindow({url:'B.html',extras:{id:'100'}});

// 接收引數

var self=plus.webview.currentWebview();//獲取當前窗體物件
var receiveID=self.id;//接收A頁面傳入的id引數值

通過fire()傳參

// 傳遞引數 ( 要觸發其他頁面的自定義監聽事件必須要先進行頁面的預載入)
mui.init({
     preloadPages:[{
       id:'detail.html',
       url:'detail.html'
      }]
 });
mui.fire(plus.webview.getWebviewById('page-id'), "pageRefresh",{
    name: 'zhangsan'
  })

//  接收引數
window.addEventListener("pageRefresh", function (e) {
    //獲得事件引數
    var id = e.detail.id;
});

三、頁面重新整理

頁面切換時重新整理

webview有show事件及hide事件

先建立子頁面

            var subpages = ['./views/tab-webview-subpage-home.html', './views/tab-webview-subpage-list.html','./views/tab-webview-subpage-map.html', './views/tab-webview-subpage-setting.html'];
            var subpage_style = { // 子頁面位置調整
                top: '70px',
                bottom: '51px'
            };
            var aniShow = {};

             //建立子頁面，首個選項卡頁面顯示，其它均隱藏；
            mui.plusReady(function() {
                var self = plus.webview.currentWebview();
                for (var i = 0; i < 4; 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);
                }

                 plus.device.setWakelock(true);
            });

建立當前頁的 show 監聽事件。程式碼如下：

        mui.plusReady(function() {
            var self = plus.webview.currentWebview();
            self.addEventListener('show',function(){
                console.log('show');
                // ... 後續為渲染頁面程式碼
            });
        });

父頁面A跳轉到子頁面B，B頁面修改資料後再跳回A頁面，重新整理A頁面數

// 父頁面自定義頁面重新整理事件 
window.addEventListener("pageRefresh", function (e) {
    // 重新獲取資料或觸發重新整理
});

// 子頁面觸發父頁面的自定義頁面重新整理事件 
mui.fire(plus.webview.getWebviewById('page-id'), "pageRefresh" ); 

返回重新整理

           mui.plusReady(function() {
                var old_back = mui.back;
                mui.back = function() {
                    var wobj = plus.webview.getWebviewById("page-id"); 
                    wobj.reload(true);
                    old_back();
                }
            });

H5+的過載方法

在子頁面初始化時，註冊beforeback方法；

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

// 或者~
mui.init({
    beforeback: function(){
        //獲得列表介面的webview
        var i = plus.webview.getWebviewById("./views/lsit.html");
        if(i){
            //觸發列表介面的自定義事件（refresh）,從而進行資料重新整理
            i.evalJS("getUserInfo()");
        }
        return true;
    }
});

在父頁面中新增事件監聽

window.addEventListener('refresh', function(e) {  
        location.reload();  
})  

這樣，在子頁面執行返回操作mui.back()的時候，會執行父頁面中的refesh事件，即location.reload()，重新整理父頁面；
官方文件說明：http://dev.dcloud.net.cn/mui/event/#customevent