mui框架學習

MUI背景介紹

MUI是一套前端框架，由DCLOUD公司研發而成，提供大量H5和js語言組成的組件，大大提升了開發效率，能夠用於開發web端應用、web app等應用。

MUI API簡介

官方文檔

窗口方面api

關閉頁面

• 點擊包含.mui-action-back類的控件
• 在屏幕內，向右快速滑動
• Android手機按下back按鍵

//第一種方式 <button type="button" class='mui-btn mui-btn-danger mui-action-back'>關閉</button> //第二種方式 默認沒有啓動，如需啓動以下 mui.init({ swipeBack:true //啓用右滑關閉功能 });

除了如上三種操做外，也能夠直接調用mui.back()方法，執行窗口關閉邏輯；
mui.back()僅處理窗口邏輯，若但願在窗口關閉以前再處理一些其它業務邏輯，則可將業務邏輯抽象成一個具體函數，而後註冊爲mui.init方法的beforeback參數;beforeback的執行邏輯爲：

• 執行beforeback參數對應的函數若返回false，則再也不執行mui.back()方法；
• 不然（返回true或無返回值），繼續執行mui.back()方法；

示例：

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

預加載

所謂的預加載技術就是在用戶還沒有觸發頁面跳轉時，提早建立目標頁面，這樣當用戶跳轉時，就能夠當即進行頁面切換，節省建立新頁面的時間，提高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.preload方法預加載

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

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

事件管理

事件綁定

• document找尋id方式綁定 --- document.getElementById("id").onclick(function());
• 添加事件回調 --- elementObject.addEventListener(eventName,handle,useCapture);
• 使用mui框架進行事件綁定

使用.on()方法實現批量元素的事件綁定，方法介紹：

mui_on.png

示例

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' }); })

事件取消

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

mui_off.png

事件觸發

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

mui_trigger.png

觸發自定義事件

能夠進行一些網頁的跳轉，mui.fire()

mui_fire.png

手勢事件

移動端開發時，會有一些手勢事件，點擊tap，雙擊doubletap等，爲了方便開放者快速集成這些手勢，mui內置了經常使用的手勢事件，目前支持的手勢事件見以下列表：

分類	參數	描述
點擊	tap	單機屏幕
點擊	doubletap	雙擊屏幕
長按	longtap	長按屏幕
長按	hold	按住屏幕
長按	release	離開屏幕
滑動	swipeleft	向左滑動
滑動	swiperight	向右滑動
滑動	swipeup	向上滑動
滑動	swipedown	向下滑動
拖動	dragstart	開始拖動
拖動	drag	拖動
拖動	dragend	結束拖動

監聽上述動做

mui框架默認會監聽部分手勢動做，若是須要監聽你想要的動做，須要在初始化配置動做，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，不監聽 } });

注意:dragstart、drag、dragend共用drag開關，swipeleft、swiperight、swipeup、swipedown共用swipe開關

事件管理總結

• 單個元素上的事件監聽，建議使用addEventListener()，如elem.addEventListener("swipeleft",function()}
• 多個元素上的事件監聽，建議使用mui.on事件進行綁定

從上面的api都會或多或少的瞭解部分mui提供的js函數，如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//預加載窗口數量限制(一旦超出,先進先出)默認不限制 })

mui()

mui使用css選擇器獲取HTML元素，返回mui對象數組。
mui("p")：選取全部

元素
mui("p.title")：選取全部包含.title類的

元素
若要將mui對象轉化成dom對象，可以使用以下方法（相似jquery對象轉成dom對象）：

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

each()

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

mui_each.png

 

each遍歷數組

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

each遍歷HTML輸入標籤

<div class="mui-input-group"> <div class="mui-input-row"> <label>字段1：</label> <input type="text" class="mui-input-clear" id="col1" placeholder="請輸入"> </div> <div class="mui-input-row"> <label>字段2：</label> <input type="text" class="mui-input-clear" id="col2" placeholder="請輸入"> </div> <div class="mui-input-row"> <label>字段3：</label> <input type="text" class="mui-input-clear" id="col3" placeholder="請輸入"> </div> </div>

提交時校驗三個字段均不能爲空，若爲空則提醒並終止業務邏輯運行，使用each()方法循環校驗，以下：

var check = true; mui(".mui-input-group input").each(function () { //若當前input爲空，則alert提醒 if(!this.value||trim(this.value)==""){ var label = this.previousElementSibling; mui.alert(label.innerText+"不容許爲空"); check = false; return false; } }); //校驗經過，繼續執行業務邏輯 if(check){ //..... }

extend()

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

extend示例

mui_extend.png

 

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));

extend()深度合併

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));

OS

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

mui_os.png

 

plus

mui提供的plus能夠很方便的訪問系統的原聲東西，如手機devices,還有webview等

mui網絡訪問

mui框架基於htm5plus的XMLHttpRequest，封裝了經常使用的Ajax函數，支持GET、POST請求方式，支持返回json、xml、html、text、script數據類型； 本着極簡的設計原則，mui提供了mui.ajax方法，並在mui.ajax方法基礎上，進一步簡化出最經常使用的mui.get()、mui.getJSON()、mui.post()三個方法。

簡單用法

> mui.ajax( url [,settings] )

url：請求發送的目標地址

settings：key/value格式的json對象，用來配置ajax請求參數，支持的參數以下：

data：發送到服務器的業務數據；

type：請求方式，目前僅支持'GET'和'POST'，默認爲'GET'方式；

dataType：預期服務器返回的數據類型；若是不指定，mui將自動根據HTTP包的MIME頭信息自動判斷；
支持設置的dataType可選值：

"xml": 返回XML文檔

"html": 返回純文本HTML信息；

"script": 返回純文本JavaScript代碼

"json": 返回JSON數據

"text": 返回純文本字符串

success：Type: Functon（Anything data,String textStatus,XMLHttpRequest xhr）
請求成功時觸發的回調函數，該函數接收三個參數：

data：服務器返回的響應數據，類型能夠是json對象、xml對象、字符串等；

textStatus：狀態描述，默認值爲'success'

xhr：xhr實例對象

error：Type: Functon（XMLHttpRequest xhr,String type,String errorThrown）請求失敗時觸發的回調函數；
該函數接收三個參數：

xhr：xhr實例對象

type：錯誤描述，可取值："timeout", "error", "abort", "parsererror"、"null"

errorThrown：可捕獲的異常對象

timeout：Type: Number，請求超時時間（毫秒），默認值爲0，表示永不超時；若超過設置的超時時間(非0的狀況)，依然未收到服務器響應，則觸發error回調；

headers：Type: Object,格式爲：{'Content-Type'：'application/json'}，

mui.ajax(url,{
    data:{ username:'username', password:'password' }, dataType:'json',//服務器返回json格式數據 type:'post',//HTTP請求類型 timeout:10000,//超時時間設置爲10秒； success:function(data){ //服務器返回響應，根據響應結果，分析是否登陸成功； ... }, error:function(xhr,type,errorThrown){ //異常處理； console.log(type); } });

mui.post( url [,data] [,success] [,dataType] )
mui.post()方法是對mui.ajax()的一個簡化方法，直接使用POST請求方式向服務器發送數據、且不處理timeout和異常（若需處理異常及超時，請使用mui.ajax()方法）

mui.post('http://server-name/login.php',{ username:'username', password:'password' },function(data){ //服務器返回響應，根據響應結果，分析是否登陸成功； ... },'json' );

> mui.get( url [,data] [,success] [,dataType] )
mui.get()方法和mui.post()方法相似，只不過是直接使用GET請求方式向服務器發送數據、且不處理timeout和異常（若需處理異常及超時，請使用mui.ajax()方法）。以下爲得到某服務器新聞列表的代碼片斷，服務器以json格式返回數據列表：

mui.get('http://server-name/list.php', {category:'news'}, function(data){ //得到服務器響應 ... },'json' );

> mui.getJSON( url [,data] [,success] )
mui.getJSON()方法是在mui.get()方法基礎上的更進一步簡化，限定返回json格式的數據，其它參數和mui.get()方法一致，如上得到新聞列表的代碼換成mui.getJSON()方法後，更爲簡潔，以下：

mui.getJSON('http://server-name/list.php', {category:'news'}, function(data){ //得到服務器響應 ... } );

mui組件

除上面的api以外，mui還提供了不少封裝好的html組件，使用很是簡單，在Hbuilder ide裏面只須要敲m就會顯示出支持的組件，使用很是方便，這裏就不具體介紹使用方法了，如需瞭解詳情，請點擊一下連接訪問

mui組件連接

做者：jackzhouyu 連接：http://www.jianshu.com/p/90211087d875 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。