關於MUI一個很實用的前端框架

今天也是我接觸mui的第一天。首先先上MUI的官網上面瞧一瞧。http://dev.dcloud.net.cn/mui/window/#closewindow我這裏上的不是官網，

我是先把他的基本能實現的功能先作了一個簡單的瞭解。下面你們跟着我看：

1、Mui的組件

mui的組件都很原生好比拓展閱讀，操做表，摺疊面板，你須要那個組件就把那個組件拷貝下來，例如你須要摺疊面板

還有單選框，輪播圖，數字角標，消息框，卡片視圖，透明狀態欄，右滑，左滑，等等組件，再將你想要使用的模板複製下來，粘貼到你想要想放進去的地方便可。
2、MUI的窗口
<ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <div class="mui-collapse-content"> <p>面板1子內容</p> </div> </li> </ul>

MUI的窗口包括頁面的初始化，建立子頁面，打開新頁面，打開帶原聲帶導航欄的新頁面，關閉頁面，預加載等。
無論你是打一個新頁面仍是建立一個新頁面它裏面都會夾雜着你想要的動畫效果，好比下拉刷新，下拉刷新打開一個新頁面。
下面拿着頁面初始化來舉一個例子：
在app開發中，若要使用HTML5+擴展api，必須等plusready事件發生後才能正常使用，mui將該事件封裝成了方法，涉及到HTML5+的api，建議都寫在mui.plusReady方法中。以下爲打印當前頁面URL的示例：

mui.plusReady()

mui.plusReady(function(){ console.log("當前頁面URL："+plus.webview.currentWebview().getURL()); });

擴展閱讀

mui.init()    mui插件初始化

mui.ready()    當DOM準備就緒時，指定一個函數來執行。

建立子頁面

在mobile app開發過程當中，常常會出現共用的導航欄或者選項卡，每次打開頁面都須要從新渲染，並且容易出現卡頭卡尾的現象。而且此時若使用局部滾動，在android手機上會出現滾動不流暢的問題；

mui如今提供兩種解決方案:

第一種（官方推薦）：在plus環境下，使用原生titleNView以及原生tabbar來替換頁面的導航欄或者選項卡。在頁面打開時，渲染已經完成，讓你的應用更接近原生app。具體作法：原生titleNView參考mui.openWindow的示例3，原生tabbar示例參考ask教程示例

第二種：經過雙webview模式解決，此種狀況適用於須要上下拉刷新的列表頁面。將須要滾動的區域經過單獨的webview實現，徹底使用原生滾動。

具體作法則是：將目標頁面分解爲主頁面和內容頁面，主頁面顯示卡頭卡尾區域，好比頂部導航、底部選項卡等；內容頁面顯示具體須要滾動的內容，而後在主頁面中調用mui.init方法初始化內容頁面。

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同理。

打開新頁面

作web app，一個沒法避開的問題就是轉場動畫；web是基於連接構建的，從一個頁面點擊連接跳轉到另外一個頁面，若是經過有刷新的打開方式，用戶要面對一個空白的頁面等待；若是經過無刷新的方式，用Javascript移入DOM節點（常見的SPA解決方案），會碰到很高的性能挑戰：DOM節點繁多，頁面太大，轉場動畫不流暢甚至致使瀏覽器崩潰； 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,//等待框背景區域高度，默認根據內容自動計算合適高度 ...... } 

參數：

• styles

  窗口參數，參考5+規範中的WebviewStyle；特別注意，height和width兩個屬性,即便不設置，也默認按100%計算；所以若設置了top值爲非"0px"的狀況，建議同時設置bottom值，不然5+ runtime根據高度100%計算，可能會形成頁面真實底部位置超出屏幕範圍的狀況；left、right同理。

• extras

  新窗口的額外擴展參數，可用來處理頁面間傳值；例如：

  var webview = mui.openWindow({ url:'info.html', extras:{ name:'mui' //擴展參數 } }); console.log(webview.name);//輸出mui字

  注意：擴展參數僅在打開新窗口時有效，若目標窗口爲預加載頁面，則經過mui.openWindow方法打開時傳遞的extras參數無效。

   

• createNew

  是否重複建立相同id的webview；

  爲優化性能、避免app中重複建立webview，mui v1.7.0開始增長createNew參數，默認爲false；判斷邏輯以下：

  • createNew參數爲爲true，則不判斷重複，每次都新建webview；

  • createNew參數爲爲fasle，則先查找當前App中是否已存在一樣id的webview，若存在則直接顯示；不然新建立並根據show參數執行顯示邏輯；

  注意：plusReady事件僅在webview首次建立時觸發，使用mui.openWindow方法屢次打開已存在的一樣id的webview時，是不會重複觸發plusReady事件的； 所以若業務寫在plusReady事件中，可能會出現執行結果和預期不一致的狀況；此時可經過自定義事件觸發； 案例參考：mui.plusReady有時會失效;

• show

  窗口顯示控制參數，具體參數以下：

  • autoShow：目標窗口loaded事件發生後，是否自動顯示，默認爲true；若爲false，則僅建立但不顯示webview；若目標頁面爲預加載頁面，則該參數無效；

  • aniShow表示頁面顯示動畫，好比從右側劃入、從下側劃入等，具體可參考5+規範中的AnimationTypeShow

  • duration：顯示Webview窗口動畫的持續時間，單位爲ms

• waiting

  系統等待框參數

  mui框架在打開新頁面時等待框的處理邏輯爲：

  顯示等待框-->建立目標頁面webview-->目標頁面loaded事件發生-->關閉等待框；

  所以，只有當新頁面爲新建立頁面（webview）時，會顯示等待框，不然若爲預加載好的頁面，則直接顯示目標頁面，不會顯示等待框。waiting中的具體參數：

  • autoShow：是否自動顯示等待框，默認爲true；若爲false，則不顯示等待框；注意：若waiting框的autoShow爲true，但目標頁面不自動顯示，則需在目標頁面中經過以下代碼關閉等待框：plus.nativeUI.closeWaiting();

  • title：等待框上的提示文字

  • options表示等待框顯示參數，好比寬高、背景色、提示文字顏色等，具體可參考5+規範中的WaitingOption

示例1：Hello mui中，點擊首頁右上角的圖標，會打開關於頁面，實現代碼以下：

//tap爲mui封裝的單擊事件，可參考手勢事件章節 document.getElementById('info').addEventListener('tap', function() { //打開關於頁面 mui.openWindow({ url: 'examples/info.html', id:'info' }); })

因沒有傳入styles參數，故默認全屏顯示；也沒有傳入show參數，故使用slide-in-right動畫，新頁面從右側滑入。

示例2：從A頁面打開B頁面，B頁面爲一個須要從服務端加載的列表頁面，若在B頁面loaded事件發生時就將其顯示出來，因服務器數據還沒有加載完畢，

列表頁面爲空，用戶體驗很差；可經過以下方式改善用戶體驗（最好的用戶體驗應該是經過預加載的方式）：第一步，B頁面loaded事件發生後，不自動顯示；

//A頁面中打開B頁面，設置show的autoShow爲false，則B頁面在其loaded事件發生後，不會自動顯示； mui.openWindow({ url: 'B.html', show:{ autoShow:false } });

第二步，在B頁面獲取列表數據後，再關閉等待框、顯示B頁面

//B頁面onload從服務器獲取列表數據； window.onload = function(){ //從服務器獲取數據 .... //業務數據獲取完畢，並已插入當前頁面DOM； //注意：若爲ajax請求，則需將以下代碼放在處理完ajax響應數據以後； mui.plusReady(function(){ //關閉等待框 plus.nativeUI.closeWaiting(); //顯示當前頁面 mui.currentWebview.show(); }); }

3、MUI的事件
mui的事件包括事件綁定，事件取消，事件觸發，手勢事件。自定義事件。

事件綁定

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

.on( event , selector , handler )

• event
  Type:  String
  需監聽的事件名稱，例如：'tap'
• selector
  Type:  String
  選擇器
• handler
  Type:  Function(  Event event )
  事件觸發時的回調函數，經過回調中的event參數能夠得到事件詳情

示例

點擊新聞列表，獲取當前列表項的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' }); }) 

事件取消

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

• version added: 2.0.0.off( event , selector , handler )

  • event
    Type:  String
    需取消綁定的事件名稱，例如：'tap'
  • selector
    Type:  String
    選擇器
  • handler
    Type:  Function
    以前綁定到該元素上的事件函數，不支持匿名函數

• version added: 2.0.0.off( event , selector)

  • event
    Type:  String
    需取消綁定的事件名稱，例如：'tap'
  • selector
    Type:  String
    選擇器

• version added: 2.2.0.off( event )

  • event
    Type:  String
    需取消綁定的事件名稱，例如：'tap'

• version added: 2.2.0.off( )

  • 空參數，刪除該元素上全部事件

示例

off(event,selector,handle)適用於取消對應選擇器上特定事件所執行的特定回調，例如：

//點擊li時，執行foo_1函數 mui("#list").on("tap","li",foo_1); //點擊li時，執行foo_2函數 mui("#list").on("tap","li",foo_2); function foo_1(){ console.log("foo_1 execute"); } function foo_2(){ console.log("foo_2 execute"); } //點擊li時，再也不執行foo_1函數，但會繼續執行foo_2函數 mui("#list").off("tap","li",foo_1);

off(event,selector)適用於取消對應選擇器上特定事件的全部回調，例如：

//點擊li時，執行foo_1函數 mui("#list").on("tap","li",foo_1); //點擊li時，執行foo_2函數 mui("#list").on("tap","li",foo_2); function foo_1(){ console.log("foo_1 execute"); } function foo_2(){ console.log("foo_2 execute"); } //點擊li時，foo_二、foo_2兩個函數均再也不執行 mui("#list").off("tap","li");

off(event)適用於取消當前元素上綁定的特定事件的全部回調，例如：

//點擊li時，執行foo_1函數 mui("#list").on("tap","li",foo_1); //點擊p時，執行foo_3函數 mui("#list").on("tap","p",foo_3); function foo_1(){ console.log("foo_1 execute"); } function foo_3(){ console.log("foo_3 execute"); } //點擊li時，再也不執行foo_1函數；點擊p時，也再也不執行foo_3函數 mui("#list"

off()適用於取消當前元素上綁定的全部事件回調，例如：

//點擊li時，執行foo_1函數 mui("#list").on("tap","li",foo_1); //雙擊li時，執行foo_4函數 mui("#list").on("doubletap","li",foo_4); //點擊p時，執行foo_3函數 mui("#list").on("tap","p",foo_3); function foo_1(){ console.log("foo_1 execute"); } function foo_3(){ console.log("foo_3 execute"); } function foo_4(){ console.log("foo_4 execute"); } //點擊li時，再也不執行foo_1函數；點擊p時，也再也不執行foo_3函數；雙擊li時，也再也不執行foo_4函數； mui("#list").off();

事件觸發

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

• .trigger( element , event , data )

  • element
    Type:  Element
    觸發事件的DOM元素
  • event
    Type:  String
    事件名字，例如：'tap'、'swipeleft'
  • data
    Type:  Object
    須要傳遞給事件的業務參數

示例

自動觸發按鈕的點擊事件：

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

部分mui控件監聽的事件沒法經過mui.trigger觸發

好比沒法實現自動觸發mui返回圖標，實現關閉當前頁面的功能，該部分邏輯正在優化中

手勢事件

在開發移動端的應用時，會用到不少的手勢操做，好比滑動、長按等，爲了方便開放者快速集成這些手勢，mui內置了經常使用的手勢事件，目前支持的手勢事件見以下列表：

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

手勢事件配置

根據使用頻率，mui默認會監聽部分手勢事件，如點擊、滑動事件；爲了開發出更高性能的moble App，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(){

 console.log("你正在向左滑動"); });

若多個元素執行相同邏輯，則建議使用事件綁定(on())。

自定義事件

在App開發中，常常會遇到頁面間傳值的需求，好比重新聞列表頁進入詳情頁，須要將新聞id傳遞過去； Html5Plus規範設計了evalJS方法來解決該問題； 但evalJS方法僅接收字符串參數，涉及多個參數時，須要開發人員手動拼字符串； 爲簡化開發，mui框架在evalJS方法的基礎上，封裝了自定義事件，經過自定義事件，用戶能夠輕鬆實現多webview間數據傳遞。

僅能在5+ App及流應用中使用

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

監聽自定義事件

添加自定義事件監聽操做和標準js事件監聽相似，可直接經過window對象添加，以下：

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

觸發自定義事件

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

• .fire( target , event , data )

  • target
    Type:  WebviewObject
    需傳值的目標webview
  • event
    Type:  String
    自定義事件名稱
  • data
    Type:  JSON
    json格式的數據

目標webview必須觸發loaded事件後才能使用自定義事件

若新建立一個webview，不等該webview的loaded事件發生，就當即使用webview.evalJS()或mui.fire(webview,'eventName',{})，則可能無效；案例參考：這裏

示例

假設以下場景：重新聞列表頁面進入新聞詳情頁面，新聞詳情頁面爲共用頁面，經過傳遞新聞ID通知詳情頁面須要顯示具體哪一個新聞，詳情頁面再動態向服務器請求數據，mui要實現相似需求可經過以下步驟實現：

• 在列表頁面中預加載詳情頁面（假設爲detail.html）
• 列表頁面在點擊新聞標題時，首先，得到該新聞id，觸發詳情頁面的newsId事件，並將新聞id做爲事件參數傳遞過去；而後再打開詳情頁面；
• 詳情頁面監聽newsId自定義事件

 

列表頁面代碼以下：

//初始化預加載詳情頁面 mui.init({ preloadPages:[{ id:'detail.html', url:'detail.html' } ] }); var detailPage = null; //添加列表項的點擊事件 mui('.mui-content').on('tap', 'a', function(e) { var id = this.getAttribute('id'); //得到詳情頁面 if(!detailPage){ detailPage = plus.webview.getWebviewById('detail.html'); } //觸發詳情頁面的newsId事件 mui.fire(detailPage,'newsId',{ id:id }); //打開詳情頁面 mui.openWindow({ id:'detail.html' }); }); 

詳情頁面代碼以下：

//添加newId自定義事件監聽 window.addEventListener('newsId',function(event){ //得到事件參數 var id = event.detail.id; //根據id向服務器請求新聞詳情 ..... });

4、MUI的utils（工具）
mui的工具和jq很像可是也是有區別的。

init

mui框架將不少功能配置都集中在mui.init方法中，要使用某項功能，只須要在mui.init方法中完成對應參數配置便可，目前支持在mui.init方法中配置的功能包括：建立子頁面、關閉頁面、手勢事件配置、預加載、下拉刷新、上拉加載、設置系統狀態欄背景顏色。

mui須要在頁面加載時初始化不少基礎控件,如監聽返回鍵,所以務必在每一個頁面中調用

如下各配置模塊在其對應文檔中有詳細闡述,請點擊連接查看,這裏只列出全部可配置項

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//預加載窗口數量限制(一旦超出,先進先出)默認不限制 }) 

以上各配置模塊在其對應文檔中有詳細闡述,請點擊連接查看,如下只補充單獨配置項

經過statusBarBackground:rgb 屬性設置狀態欄顏色（iOS7.0+、安卓不支持）格式爲#RRGGBB。

mui.init({ statusBarBackground: '#9defbcg', })

mui默認會監聽Android手機的物理按鍵(back&menu),若不但願自動處理按鍵可經過如下方式關閉

mui.init({ //監聽Android手機的back、menu按鍵 keyEventBind: { backbutton: true, //Boolean(默認true)關閉back按鍵監聽 menubutton: true //Boolean(默認true)關閉menu按鍵監聽 }, })

擴展閱讀

代碼塊激活字符:    

minit

mui()

mui使用css選擇器獲取HTML元素，返回mui對象數組。
mui("p")：選取全部<p>元素
mui("p.title")：選取全部包含.title類的<p>元素

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

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

MUI框架的定位是「最接近原生體驗的移動App的UI框架」， 所以和jQuery有所區別，不多爲簡化DOM操做而封裝API，具體可參考MUI產品概述； 該函數的設計目的，更可能是爲了配合MUI插件使用，好比圖片輪播、下拉刷新、區域滾動等，以下爲詳細示例：

示例1：跳轉到圖片輪播的第二張圖片

mui('.mui-slider').slider().gotoItem(1);

示例2：從新開啓上拉加載

mui('#pullup-container').pullRefresh().refresh(true);

擴展閱讀

代碼塊激活字符:    

mmui

each()

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

• mui.each( obj , handler )

  • obj
    Type:  Array|| JSONObj
    需遍歷的對象或數組；若爲對象，僅遍歷對象根節點下的key
  • handler
    Type:  Function(  Integer|| String index, Anything element)
    爲每一個元素執行的回調函數；其中，index表示當前元素的下標或key，element表示當前匹配元素

• mui(selector).each( handler )

  • handler
    Type:  Function(  Integer index, Element element)
    爲每一個匹配元素執行的回調函數；其中，index表示當前元素在匹配元素中的位置（下標，從0開始），element表示當前匹配元素，可用 this關鍵字代替

示例1

輸出當前數組中每一個元素的平方

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

示例2

當前頁面中有三個字段，以下：

<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){ //..... }

擴展閱讀

代碼塊激活字符:    

meach

mmeach(遍歷DOM)

extend()

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

• .extend( target , object1 [, objectN] )

  • target
    Type:  Object
    需合併的目標對象
  • object1
    Type:  Object
    需合併的對象
  • objectN
    Type:  Object
    需合併的對象

• .extend( deep , target , object1 [, objectN] )

  • deep
    Type:  Boolean
    若爲true，則遞歸合併
  • target
    Type:  Object
    需合併的目標對象
  • object1
    Type:  Object
    需合併的對象
  • objectN
    Type:  Object
    需合併的對象

示例

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

擴展閱讀

代碼塊激活字符:    

mextend

later()

setTimeOut封裝

• .later( func , delay [, context, data] )

  • func
    Type:  Function
    delay毫秒後要執行的函數
  • delay
    Type:  Int
    延遲的毫秒數
  • context
    Type:  Object
    上下文

擴展閱讀

代碼塊激活字符:    

mlater

scrollTo()

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

• .scrollTo( ypos [, duration] [, handler] )

  • ypos
    Type:  Integer
    要在窗口文檔顯示區左上角顯示的文檔的 y 座標
  • duration
    Type:  Integer
    滾動時間週期，單位是毫秒
  • handler
    Type:  Function
    滾動結束後執行的回調函數

示例

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

mui.scrollTo(0,1000);

擴展閱讀

代碼塊激活字符:    

mscrollto

os

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

• plus(能夠訪問的參數爲:)

  • .plus
    返回是否在 5+ App(包括流應用)運行
    .stream
    返回是否爲流應用

• Android(能夠訪問的參數爲:)

  • .android
    返回是否爲安卓手機
    .version
    安卓版本號
    .isBadAndroid
    android非Chrome環境

• iOS(能夠訪問的參數爲:)

  • .ios
    返回是否爲蘋果設備
    .version
    返回手機版本號
    .iphone
    返回是否爲蘋果手機
    .ipad
    返回是否爲ipad

• Wechat(能夠訪問的參數爲:)

  • .wechat
    返回是否在微信中運行

示例

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

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

工具的使用和通常的jq調用很相似也就是方法的區別，能夠也是能夠很容易就上手的。
5、MUI的AJAX

Ajax

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
    Type:  String
    請求發送的目標地址
  • settings
    Type:  PlainObject
    key/value格式的json對象，用來配置ajax請求參數，支持的完整參數參考以下 mui.ajax([settings])方法

• mui.ajax([settings])

  • settings
    Type:  PlainObject
    key/value格式的json對象，用來配置ajax請求參數，支持的詳細參數以下：
    • async
      Type:  Boolean
      發送同步請求
    • crossDomain     *5+ only
      Type:  Boolean
      強制使用5+跨域
    • data
      Type:  PlainObject|| String
      發送到服務器的業務數據
    • dataType
      Type:  String
      預期服務器返回的數據類型；若是不指定，mui將自動根據HTTP包的MIME頭信息自動判斷；支持設置的dataType可選值：
      • "xml": 返回XML文檔
      • "html": 返回純文本HTML信息；
      • "script": 返回純文本JavaScript代碼
      • "json": 返回JSON數據
      • "text": 返回純文本字符串
    • error
      Type:  Functon（XMLHttpRequest xhr,String type,String errorThrown）
      請求失敗時觸發的回調函數，該函數接收三個參數：
      • xhr：xhr實例對象
      • type：錯誤描述，可取值："timeout", "error", "abort", "parsererror"、"null"
      • errorThrown：可捕獲的異常對象
    • success
      Type:  Functon（Anything data,String textStatus,XMLHttpRequest xhr）
      請求成功時觸發的回調函數，該函數接收三個參數：
      • data：服務器返回的響應數據，類型能夠是json對象、xml對象、字符串等；
      • textStatus：狀態描述，默認值爲'success'
      • xhr：xhr實例對象
    • timeout
      Type:  Number
      請求超時時間（毫秒），默認值爲0，表示永不超時；若超過設置的超時時間(非0的狀況)，依然未收到服務器響應，則觸發error回調
    • type
      Type:  String
      請求方式，目前僅支持'GET'和'POST'，默認爲'GET'方式
    • headers
      Type:  Json
      指定HTTP請求的Header

      headers:{'Content-Type':'application/json'} 

    • processData
      Type:  Boolean
      爲了匹配默認的 content-type（"application/x-www-form-urlencoded"），
      mui默認會將 data參數中傳入的非字符串類型的數據轉變爲 key1=value&key2=value2格式的查詢串；
      若是業務須要，但願發送其它格式的數據（好比Document對象），能夠設置 processData爲 false

代碼示例：以下爲經過post方式向某服務器發送鑑權登陸的代碼片斷

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

mui.post()方法是對mui.ajax()的一個簡化方法，直接使用POST請求方式向服務器發送數據、且不處理timeout和異常（若需處理異常及超時，請使用mui.ajax()方法），使用方法： mui.post(url[,data][,success][,dataType])，如上登陸鑑權代碼換成mui.post()後，代碼更爲簡潔，以下：

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

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

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

如上mui.get()方法和以下mui.ajax()方法效果是一致的：

mui.ajax('http://server-name/list.php',{ data:{ category:'news' }, dataType:'json',//服務器返回json格式數據 type:'get',//HTTP請求類型 success:function(data){ //得到服務器響應 ... } });

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

mui.getJSON('http://server-name/list.php',{category:'news'},function(data){ //得到服務器響應 ... } );
6、MUI的下拉刷新

概述

爲實現下拉刷新功能，大多數 H5 框架都是經過 DIV 模擬下拉回彈動畫，在低端 android 手機上，DIV 動畫常常出現卡頓現象（特別是圖文列表的狀況); mui 經過使用原生 webview 下拉刷新解決這個 DIV 動畫的卡頓問題，而且拖動效果更加流暢；

這裏提供兩種模式的下拉刷新，以適用不一樣場景：

單 webview 模式

• 效果展現：

• 動畫原理：

  下拉刷新時，觸發的是原生下拉刷新控件，而整個webview位置不會發生變化，因此不會在拖動過程當中發生DOM重繪，當控件拖動到必定位置觸發動態加載數據以及刷新操做。此模式下拉刷新，相比雙webview 模式，不建立額外 webview，性能更優。

• 使用方法：

  mui 初始化時設置pullRefresh各項參數，與雙 webview 模式的子頁面設置是同樣的。

  說明：

  1. DOM結構無特殊要求，只須要指定一個下拉刷新容器標識便可

  mui.init({ pullRefresh : { container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器都可，好比：id、.class等 down : { style:'circle',//必選，下拉刷新樣式，目前支持原生5+ ‘circle’ 樣式 color:'#2BD009', //可選，默認「#2BD009」 下拉刷新控件顏色 height:'50px',//可選,默認50px.下拉刷新控件的高度, range:'100px', //可選 默認100px,控件可下拉拖拽的範圍 offset:'0px', //可選 默認0px,下拉刷新控件的起始位置 auto: true,//可選,默認false.首次加載自動上拉刷新一次 callback :pullfresh-function //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據； } } });

   

• 模式說明：

  • 優勢：
    
    • 性能更優，體如今兩點：
      1. 相比雙webview，不建立額外子 webview 性能消耗更少
      2. 下拉拖動過程當中不會發生重繪，也減小了性能消耗
  • 缺點：
    • 目前僅支持‘cricle’樣式以及該樣式的顏色自定義

雙 webview 模式

• 效果展現：

• 動畫原理：

  使用雙 webview 模式的下拉刷新，建立一個子 webview 添加列表；拖動時，拖動的是一個完整的 webview，避免了相似 DIV 拖動流暢度很差的問題，回彈動畫使用原生動畫；在 iOS 平臺，H5 的動畫已經比較流暢，故依然使用 H5 方案。兩個平臺實現雖有差別，但 mui 通過封裝，可以使用一套代碼實現下拉刷新。

• 使用方法：

  主頁面內容比較簡單，只須要建立子頁面便可：

  mui.init({ subpages:[{ url:pullrefresh-subpage-url,//下拉刷新內容頁面地址 id:pullrefresh-subpage-id,//內容頁面標誌 styles:{ top:subpage-top-position,//內容頁面頂部位置,需根據實際頁面佈局計算，若使用標準mui導航，頂部默認爲48px； .....//其它參數定義 } }] }); 

  iOS平臺的下拉刷新，使用的是 mui 封裝的區域滾動組件， 爲保證兩個平臺的 DOM 結構一致，內容頁面需統一按照以下 DOM 結構構建：

  <!--下拉刷新容器--> <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--數據列表--> <ul class="mui-table-view mui-table-view-chevron"> </ul> </div> </div>

  其次，經過 mui.init 方法中 pullRefresh 參數配置下拉刷新各項參數，以下：

  mui.init({ pullRefresh : { container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器都可，好比：id、.class等 down : { height:50,//可選,默認50.觸發下拉刷新拖動距離, auto: true,//可選,默認false.首次加載自動下拉刷新一次 contentdown : "下拉能夠刷新",//可選，在下拉可刷新狀態時，下拉刷新控件上顯示的標題內容 contentover : "釋放當即刷新",//可選，在釋放可刷新狀態時，下拉刷新控件上顯示的標題內容 contentrefresh : "正在刷新...",//可選，正在刷新狀態時，下拉刷新控件上顯示的標題內容 callback :pullfresh-function //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據； } } });

• 模式說明：

  • 優勢：
    
    • 可自定義下拉刷新樣式，更改文字等等.參考關於自定義下拉刷新樣式問答
  • 缺點：
    • 相比單 webview，性能消耗更大，不過都比 div 模式的要好用
    • DOM結構須要統一配置

• 滾動到特定位置

  下拉刷新組件滾動到特定位置的方法相似區域滾動組件

  目前僅支持 雙 webview 模式

  • scrollTo( xpos , ypos [, duration] )

    • xpos
      Type:  Integer
      要在窗口文檔顯示區左上角顯示的文檔的 x 座標
    • ypos
      Type:  Integer
      要在窗口文檔顯示區左上角顯示的文檔的 y 座標
    • duration
      Type:  Integer
      滾動時間週期，單位是毫秒

  示例：在 hello mui 下拉刷新示例中，實現了雙擊標題欄，讓列表快速回滾到頂部的功能；代碼以下：

  var contentWebview = null; //監聽標題欄的雙擊事件 document.querySelector('header').addEventListener('doubletap',function () { if(contentWebview==null){ contentWebview = plus.webview.currentWebview().children()[0]; } //內容區滾動到頂部 contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)"); });

• 更改下拉刷新文字位置

  *能夠解決修改下拉刷新子頁面默認top值後,下拉刷新提示框位置異常問題

  根據實際需求在父頁面給mui-content設置top屬性

  目前僅支持 雙 webview 模式

  .mui-bar-nav ~ .mui-content .mui-pull-top-pocket{ top: 180px !important; }

自動觸發下拉刷新

mui 支持設置首次加載時自動觸發一次下拉刷新，配置以下auto參數爲:true便可，上拉加載一樣支持此配置

mui.init({ pullRefresh : { container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器都可，好比：id、.class等 down : { auto: true,//可選,默認false.首次加載自動下拉刷新一次 }, up : { auto: true //可選,默認false.首次加載自動上拉加載一次 } } });

下拉刷新結束

兩種模式在下拉刷新過程當中，當獲取新數據後，都須要執行 endPulldown 方法， 該方法的做用是關閉「正在刷新」的樣式提示，內容區域回滾頂部位置，以下：

function pullfresh-function() { //業務邏輯代碼，好比經過ajax從服務器獲取新數據； ...... //注意，加載完新數據後，必須執行以下代碼，注意：若爲ajax請求，則需將以下代碼放置在處理完ajax響應數據以後 //沒有更多內容了，endPulldown 傳入true， 再也不執行下拉刷新 mui('#refreshContainer').pullRefresh().endPulldown(); }

7、MUI的上拉加載

概述

mui的上拉加載和下拉刷新相似，都屬於pullRefresh插件，使用過程以下：

• 一、頁面滾動到底，顯示「正在加載...」提示（mui框架提供）
• 二、執行加載業務數據邏輯（開發者提供）
• 三、加載完畢，隱藏"正在加載"提示（mui框架提供）

開發者只需關心業務邏輯，實現加載更多數據便可。

 

初始化

初始化方法相似下拉刷新，經過mui.init方法中pullRefresh參數配置上拉加載各項參數，以下：

mui.init({ pullRefresh : { container:refreshContainer,//待刷新區域標識，querySelector能定位的css選擇器都可，好比：id、.class等 up : { height:50,//可選.默認50.觸發上拉加載拖動距離 auto:true,//可選,默認false.自動上拉加載一次 contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容 contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容； callback :pullfresh-function //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據； } } });

結束上拉加載

加載完新數據後，須要執行endPullupToRefresh()方法，結束轉雪花進度條的「正在加載...」過程

• .endPullupToRefresh( nomore )

  • nomore
    Type:  Boolean
    是否還有更多數據；若還有更多數據，則傳入false; 不然傳入true，以後滾動條滾動到底時，將再也不顯示「上拉顯示更多」的提示語，而顯示「沒有更多數據了」的提示語；

示例：

function pullfresh-function() { //業務邏輯代碼，好比經過ajax從服務器獲取新數據； ...... //注意： //一、加載完新數據後，必須執行以下代碼，true表示沒有更多數據了： //二、若爲ajax請求，則需將以下代碼放置在處理完ajax響應數據以後 this.endPullupToRefresh(true|false); }

重置上拉加載

若部分業務中，有從新觸發上拉加載的需求（好比當前類別已無更多數據，但切換到另一個類別後，應支持繼續上拉加載），此時調用.refresh(true)方法，可重置上拉加載控件，以下代碼：

//pullup-container爲在mui.init方法中配置的pullRefresh節點中的container參數； //注意：refresh()中需傳入true mui('#pullup-container').pullRefresh().refresh(true);

禁用上拉刷新

在部分場景下但願禁用上拉加載，好比在列表數據過少時，不想顯示「上拉顯示更多」、「沒有更多數據」的提示語，開發者能夠經過調用disablePullupToRefresh()方法實現相似需求，代碼以下：

//pullup-container爲在mui.init方法中配置的pullRefresh節點中的container參數； mui('#pullup-container').pullRefresh().disablePullupToRefresh();

啓用上拉刷新

使用disablePullupToRefresh()方法禁用上拉加載後，可經過enablePullupToRefresh()方法再次啓用上拉加載，代碼以下：

//pullup-container爲在mui.init方法中配置的pullRefresh節點中的container參數； mui('#pullup-container').pullRefresh().enablePullupToRefresh();

8、MUI的代碼塊

MUI的代碼塊有js代碼塊，有html的代碼塊詳情看看我發給大家的連接。下面咱們進入開發階段，第一步能夠上官網拷貝下來一個demo，打開HBuilder新建一個移動APP項目，選擇MUI框架，粘貼你的代碼運行便可。