MUI框架（一）：窗口管理、事件管理和utils

MUI做爲移動端的老牌的前端框架，自定義爲：「最接近原生APP體驗的高性能前端框架」，天然有過人之處。

---

下面是簡單總結了MUI中的窗口管理、事件管理、utils，都是基礎。
show time

1、窗口管理

1.1 頁面初始化

mui.plusReady()爲頁面初始化，例如：

mui.plusReady(function(){
    console.log(111);
});
複製代碼

mui.init()是mui插件初始化，具體詳情和案例見到3.1節
mui.ready()是當DOM準備就緒時，指定一個函數來執行。寫法與mui.plusReady()相似

---

官方文檔：dev.dcloud.net.cn/mui/window/…

1.2 建立子頁面

tab選項卡和底部tabbar就是典型的建立子頁面的例子，如圖

list.html就是 index.html的子頁面，建立代碼比較簡單，以下：

mui.init({
    subpages:[{
          url:'list.html',//子頁面HTML地址，支持本地地址和網絡地址
          id:'list.html',//子頁面標誌
          styles:{
            top:'45px',//mui標題欄默認高度爲45px；
            bottom:'0px'//默認爲0px，可不定義；
          }
    }]
});
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/window/#pageinit

1.3 打開新頁面

總會有點擊一個頁面跳轉到另外一個頁面的狀況。使用mui.openWindow()

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:"50px",//新頁面頂部位置
      bottom:'0px',//新頁面底部位置
      width:"100%",//新頁面寬度，默認爲100%
      height:"100%",//新頁面高度，默認爲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,//等待框背景區域高度，默認根據內容自動計算合適高度
        ......
      }
    }
})
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/window/#openwindow

1.4 打開帶原生導航欄的新頁面

經過在 mui.openWindow() 的 styles 節點中設置 titleNView 節點的相關參數，可實現繪製原生導航欄控件

mui.openWindow({
  url: webviewUrl,
  id: webviewId,
  styles: {                             // 窗口參數 參考5+規範中的WebviewStyle,也就是說WebviewStyle下的參數均可以在此設置
    titleNView: {                       // 窗口的標題欄控件
      titleText:"標題欄",                // 標題欄文字,當不設置此屬性時，默認加載當前頁面的標題，並自動更新頁面的標題
      titleColor:"#000000",             // 字體顏色,顏色值格式爲"#RRGGBB",默認值爲"#000000"
      titleSize:"17px",                 // 字體大小,默認17px
      backgroundColor:"#F7F7F7",        // 控件背景顏色,顏色值格式爲"#RRGGBB",默認值爲"#F7F7F7"
      progress:{                        // 標題欄控件的進度條樣式
        color:"#00FF00",                // 進度條顏色,默認值爲"#00FF00" 
        height:"2px"                    // 進度條高度,默認值爲"2px" 
      },
      splitLine:{                       // 標題欄控件的底部分割線，相似borderBottom
        color:"#CCCCCC",                // 分割線顏色,默認值爲"#CCCCCC" 
        height:"1px"                    // 分割線高度,默認值爲"2px"
      }
    }
  }
});
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/window/#openWindowWithTitle

1.5 關閉頁面

mui框架將窗口關閉功能封裝在mui.back方法中，具體執行邏輯是：
(1)若當前webview爲預加載頁面，則hide當前webview；
(2)不然，close當前webview；
在mui框架中，有三種操做會觸發頁面關閉（執行mui.back方法）：

(1)點擊包含.mui-action-back類的控件

<button type="button" class='mui-btn mui-btn-danger mui-action-back'>關閉</button>
複製代碼

(2)在屏幕內，向右快速滑動

mui.init({
	swipeBack:true //啓用右滑關閉功能
});
複製代碼

(3)Android手機按下back按鍵

mui.init({
	keyEventBind: {
		backbutton: false  //關閉back按鍵監聽
	}
});
複製代碼

除了以上的方法，還能夠直接調用mui.back()方法

//備份mui.back，mui.back已將窗口關閉邏輯封裝的比較完善（預加載及父子窗口），所以最好複用mui.back
var old_back = mui.back;
mui.back = function(){
  var btn = ["肯定","取消"];
  mui.confirm('確認關閉當前窗口？','Hello MUI',btn,function(e){
    if(e.index==0){
    	//執行mui封裝好的窗口關閉邏輯；
    	old_back();
    }
  });
}
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/window/#closewindow

1.6 預加載

預加載就是在用戶還沒有觸發頁面跳轉時，提早建立目標頁面，這樣當用戶跳轉時，就能夠當即進行頁面切換，節省建立新頁面的時間，提高app使用體驗。mui提供兩種方式實現頁面預加載。
方式一：經過mui.init方法中的preloadPages參數進行配置.

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口參數
      extras:{},//自定義擴展參數
      subpages:[{},{}]//預加載頁面的子頁面
    }
  ],
  preloadLimit:5//預加載窗口數量限制(一旦超出,先進先出)默認不限制
});
複製代碼

特色：該種方案使用簡單、可預加載多個頁面，但不會返回預加載每一個頁面的引用，若要得到對應webview引用，還須要經過plus.webview.getWebviewById方式得到；另外，由於mui.init是異步執行，執行完mui.init方法後當即得到對應webview引用，可能會失敗，例如以下代碼：

mui.init({
  preloadPages:[
    {
      url:'list.html',
      id:'list'
    }
  ]
});
var list = plus.webview.getWebviewByid('list');//這裏可能返回空；
複製代碼

方式二：經過mui.preload方法預加載.

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

特色：經過mui.preload()方法預加載，可當即返回對應webview的引用，但一次僅能預加載一個頁面；若需加載多個webview，則需屢次調用mui.preload()方法

---

官方文檔：https://dev.dcloud.net.cn/mui/window/#preload

2、事件管理

2.1 事件綁定

除了可使用addEventListener()方法監聽某個特定元素上的事件外， 也可使用.on()方法實現批量元素的事件綁定。

示例：點擊新聞列表，獲取當前列表項的id，並將該id傳給新聞詳情頁面，而後打開新聞詳情頁面

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
  //獲取id
  var id = this.getAttribute("id");
  //傳值給詳情頁面，通知加載新數據
  mui.fire(detail,'getDetail',{id:id});
  //打開新聞詳情
  mui.openWindow({
    id:'detail',
    url:'detail.html'
  });
}) 
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/event/#on

2.2 事件取消

使用on()方法綁定事件後，若但願取消綁定，則可使用off()方法。 off()方法根據傳入參數的不一樣，有不一樣的實現邏輯。

示例見官網： dev.dcloud.net.cn/mui/event/#…

2.3 事件觸發

使用mui.trigger()方法能夠動態觸發特定DOM元素上的事件。

示例:自動觸發按鈕的點擊事件

var btn = document.getElementById("submit");
//監聽點擊事件
btn.addEventListener("tap",function () {
  console.log("tap event trigger");
});
//觸發submit按鈕的點擊事件
mui.trigger(btn,'tap');
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/event/#trigger

2.4 手勢事件

在開發移動端的應用時，會用到不少的手勢操做，好比滑動、長按等

手勢事件的配置

經過`mui.init`方法中的`gestureConfig`參數

mui.init({
  gestureConfig:{
   tap: true, //默認爲true
   doubletap: true, //默認爲false
   longtap: true, //默認爲false
   swipe: true, //默認爲true
   drag: true, //默認爲true
   hold:false,//默認爲false，不監聽
   release:false//默認爲false，不監聽
  }
});
複製代碼

事件監聽

var elem = docment.getElementById("dome");
elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑動");
});
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/event/#gesture

2.5 自定義事件

由於是多webview之間傳值，故沒法在手機瀏覽器、微信中使用；

監聽自定義事件

//經過window添加
window.addEventListener('customEvent',function(event){
  //經過event.detail可得到傳遞過來的參數內容
  ....
});
複製代碼

經過mui.fire()觸發目標窗口的自定義事件

---

官方文檔：https://dev.dcloud.net.cn/mui/event/#customevent

3、utils

3.1 init()

mui框架將不少功能配置都集中在mui.init方法中，要使用某項功能，只須要在mui.init方法中完成對應參數配置便可

mui.init({
//子頁面
	subpages: [{
		//...
	}],
//預加載
	 preloadPages:[
	    //...
 	 ],
//下拉刷新、上拉加載
 	pullRefresh : {
	   //...
     	},
//手勢配置
 	 gestureConfig:{
	   //...
	},
//側滑關閉
	swipeBack:true, //Boolean(默認false)啓用右滑關閉功能
	
//監聽Android手機的back、menu按鍵
	keyEventBind: {
		backbutton: false,  //Boolean(默認true)關閉back按鍵監聽
		menubutton: false   //Boolean(默認true)關閉menu按鍵監聽
	},
//處理窗口關閉前的業務
	beforeback: function() {
		//... //窗口關閉前處理其餘業務詳情點擊 ↑ "關閉頁面"連接查看
	},
//設置狀態欄顏色
	statusBarBackground: '#9defbcg', //設置狀態欄顏色,僅iOS可用
	preloadLimit:5//預加載窗口數量限制(一旦超出,先進先出)默認不限制
})
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/util/#init

3.2 mui()

mui使用css選擇器獲取HTML元素，返回mui對象數組。寫法mui("#app")相似於jQuery寫法$("#app")
若要將mui對象轉化成dom對象，可以使用以下方法（相似jquery對象轉成dom對象）：

//obj1是mui對象
var obj1 = mui("#title"); 
//obj2是dom對象
var obj2 = obj1[0];
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/util/#selector

3.3 each()

each既是一個類方法，同時也是一個對象方法，兩個方法適用場景不一樣；換言之，你可使用mui.each()去遍歷數組或json對象，也可使用mui(selector).each()去遍歷DOM結構。

示例：

var array = [1,2,3]
mui.each(array,function(index,item){
  console.log(item*item);
}) 
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/util/#each

3.4 extend()

將兩個對象和合併成一個對象

var target = {
  company:"dcloud",
  product:{
    mui:"小巧、高效"
  }
} 
var obj1 = {
  city:"beijing",
  product:{
    HBuilder:"飛同樣的編碼"
  }
}
mui.extend(target,obj1);
//輸出：{"company":"dcloud","product":{"HBuilder":"飛同樣的編碼"},"city":"beijing"}
console.log(JSON.stringify(target));
複製代碼

從如上輸出能夠看到，product節點下的mui被替換成了HBuilder，由於默認僅合併對象根節點下的key、value；若是想深度合併，則能夠傳入deep參數，以下：

var target = {
  company:"dcloud",
  product:{
    mui:"小巧、高效"
  }
} 
var obj1 = {
  city:"beijing",
  product:{
    HBuilder:"飛同樣的編碼"
  }
}
//支持深度合併
mui.extend(true,target,obj1);
//輸出：{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飛同樣的編碼"},"city":"beijing"}
console.log(JSON.stringify(target));
複製代碼

---

官方文檔：https://dev.dcloud.net.cn/mui/util/#extend

3.5 later()

setTimeOut封裝

3.6 scrollTo()

滾動窗口屏幕到指定位置，該方法是對window.scrollTo()方法在手機端的加強實現，可設定滾動動畫時間及滾動結束後的回調函數;鑑於手機屏幕大小，該方法僅可實現屏幕縱向滾動。

示例：1秒鐘以內滾動到頁面頂部

mui.scrollTo(0,1000);
複製代碼

3.7 os

經過navigator.userAgent判斷當前運行環境的需求,mui對此進行了封裝,經過調用mui.os.XXX便可

示例：檢測是否爲iOS或安卓系統版本是否小於4.4

if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){
   //...
 } 
複製代碼