MUI簡介-最接近原生App體驗的前端框架

一、總結

一句話總結：最接近原生App體驗的前端框架

 

 

 

二、多端發布 – 開發一套代碼，發布六個平台

 

• 真正徹底的跨平台開發，不是簡單的跨iOS和Android。
• 基於mui，一套HTML5工程，通過前端構建工具（如grunt）條件編譯，可同時發行到iOS Appstore、安卓各大應用商店、普通手機瀏覽器、微信App和流應用。
• 並且在每個平台上，都能調用該平台的專有API達到原生體驗。

 

 

三、MUI介紹

1.1 MUI是什么，解決了什么問題。

（1）性能和體驗的差距，一直是mobile app開發者放棄HTML5的首要原因。 瀏覽器天生的切頁白屏、不忍直視的轉頁動畫、浮動元素的抖動、無法流暢下拉刷新等問題，這些都讓HTML5開發者倍感挫敗，尤其拿到Android低端機運行，摔手機的心都有（如果開發者需要解決這些問題，需要處理很多兼容性問題，需要花費大把的時間和精力）；

（2）瀏覽器默認控件樣式（prompt、alert）又少又丑，制作一個漂亮的控件非常麻煩，也有一些制作簡單的ui框架但性能低下。

（3）mui框架解決的問題：一個可以方便開發出高性能App的框架，也是目前最接近原生App效果的框架。有些控件就是原生態的效果，mui起到了橋梁的作用。

了解：

MUI是國產的，北京數字天堂。。。和它配套的有開發工具HBuilder，5+runtime
5+runtime：可以將H5打包成native app，原理：利用原生態的webview去承載HTML5。

 

1.2 MUI的特點

（1）輕量
追求性能體驗，是我們開始啟動MUI項目的首要目標，輕量必然是重要特征；
MUI不依賴任何第三方JS庫，壓縮后的JS和CSS文件僅有100+K和60+K
可以根據自個的需要，自定義去下載對應的模塊。和我們接觸的zepto.js類似。

（2）原聲UI
鑒於之前的很多前端框架（特別是響應式布局的框架），UI控件看起來太像網頁，沒有原生感覺，因此追求原生UI感覺也是我們的重要目標
MUI以iOS平台UI為基礎，補充部分Android平台特有的UI控件;
容易上手 ;
不需要其他框架基礎：語法上和我們之前 學到用到 的寫法是一樣的。

其他框架：ionic(Angular.js), react(native),vue(發音:view）
vue、react、Angular.js是並列關系。
前端是：vue和react的天下

1.3 MUI存在的問題

（1）名氣不是很大，國產，不像react、Angular.js那樣，世界范圍都在使用。目前國內MUI使用的公司還是很多的。
（2）框架本身存在一些bug還有一些待解決的問題。(tap == click)

1.4分析MUI結構

dist:distribution的縮寫，存放目標，發布的文件，對於一些框架來說，使用者將里面的文件copy出來直接用就OK

examples：存儲案例（demo）的文件

grunt：存儲js模塊化相關的文件，類似sass里面引用sass，這里是js里面引用js。和grunt類似的工具用gulp，webpack。

plugin：存儲該框架的插件（擴展）

 

2 UI組件

2.1 accordion（折疊面板）

<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-collapse類的li節點上，增加.mui-active類即可；mui官網中的方法說明，使用的就是折疊面板控件。

2.2 actionsheet（操作表）

2.3 dialog（對話框）

（1）警告框：

$.alert('警告的內容\n可以使用\n換行', '警告標題',"按鈕的文字" ,function() {
     //點擊確認的回調
});

注：.alert( message, title, btnValue, callback ) message必須是字符串

（2）確認框
var btnArray = [‘否’, ‘是’];

$.confirm('是否確認刪除', '確認的標題', btnArray, function(e) {
    //通過e.index可以知道用戶點擊了哪個按鈕
    if (e.index == 1) {
       $(this)[0].innerHTML = "ok";
    } else {
        $(this)[0].innerHTML = "no"
    }
})

注：顯示什么按鈕是一個數組，當這個數組只有一個元素的時候，類似於警告框

（3）輸入框
.prompt( message, placeholder, title, btnValue, callback )

var btnArray = ['取消', '確定'];
$.prompt('請輸入評語：', '性能好', 'Hello MUI', btnArray, function(e) {
    if (e.index == 1) {
        $(this)[0].innerHTML = '謝謝你的評語：' + e.value;
    } else {
        $(this)[0].innerHTML = '你點了取消按鈕';
    }
})

（4）toast提示框

$.toast('歡迎體驗Hello MUI');

2.4 list（列表）

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 1</a>
    </li>
    <li class="mui-table-view-cell"> Item 2
        <span class="mui-badge mui-badge-primary">11</span>
    </li>
    <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a></li>
</ul>

2.5 ipnut (表單)
（1）密碼輸入框，后面有一個小眼睛

（2）輸入框后面可以設置一個 清除的按鈕
2.6 number box(數字輸入框)

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
  <input class="mui-numbox-input" type="number" />
  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button></div>

注：
（1）我們可以設置輸入框的最大值、最小值、設置修改的步長
（2）可以獲取到輸入框的值。Mui有方法提供
（3）我們可以通過js設置輸入框的值。Mui有方法提供
（4）我們可以通過js設置輸入框修改的步長，Mui有方法提供

了解：組件化開發。在前端，還是后端（Java）都在提倡。
定義：在解耦復雜系統時，多個功能模塊進行拆解、重組的過程，有多種的屬
性、狀態反映其內部的特性
目的：對復雜系統拆分成多個組件，方便對其獨立升級和優化。

2.7 ipnut (表單)

2.8 picker（選擇器）

2.9 switch(開關)

<div class="mui-switch mui-active" id="mySwitch">
    <div class="mui-switch-handle"></div>
</div>

注：
（1）根據div中是否包含mui-active 來判斷當前開關的狀態。
（2）我們可以通過js去設置開關的狀態，mui提供方法
（3）我們可以監聽到開關改變的狀態，mui提供方法

2.10 slide（輪播組件）

2.11 圖片輪播

2.12遮罩蒙版

對框架進行原生態代碼的轉化

mui("#close")[0].style.display = "block";

在轉回框架

mui(mui("#close")[0]);

自學:
（1）側滑導航
（2）radio（單選框）
（3）badge（數字角標）
（4）checkbox（復選框）
（5）彈出菜單

案例：

3 Utils

3.1 init

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

3.2 mui()

這里mui和我們之前接觸的jQuery的是一樣的。可以將mui和 理解成一個函數。mui()、$()理解為函數調用。
mui(“#XX”),mui(“.XX”)

(function ($,document) { $('#sheet1').popover('toggle'); })(mui,document)

上面這種寫法的好處：
（1）執行速度更快
（2）更方便代碼壓縮

mui或者jQuery對象轉成dom元素

$(“sle”)[0]\mui(“sle”)[0]

原生態轉成mui或者jQuery對象

$(“sle”)、mui(“sle”)、$($(“sle”)[0])、mui(mui(“sle”)[0])

3.3 each()

3.4 extend()

3.5 scrollTo()

3.6 os

自個了解：navigator.userAgent
通過這個，你可以間接地獲取，當前設配信息
比如：手機類型（Andriod、iOS）、瀏覽器類型（WeChat瀏覽器、QQ瀏覽器、還是其他瀏覽器）

(function ($,document) { var isAndriod = $.os.android; if(isAndriod){ $.alert("您用的是安卓手機") }else { $.alert("您用的是街機") } var isWechat = mui.os.wechat; if(isWechat){ $.alert("微信瀏覽器"); }else{ $.alert("非微信瀏覽器"); } var isAndroid = $.os.android; var iOS = $.os.ios; if(!isAndroid && !iOS){ $.alert("winPhone"); } })(mui,document)

通過mui提供的方法，可以獲取到
（1）系統的版本（iOS、Andriod）
（2）系統的版本
（3）瀏覽器的類型（WeChat、QQ）

4窗口管理

4.1 頁面初始化

4.2 打開新頁面

4.3 關閉頁面

5事件

5.1 事件綁定

(function ($,document) { $("body").on("click","#btnClick",f1); function f1() { $.alert("點擊了！"); }; $("body").on("click","#cancel",function () { $("body").off(); }); })(mui,document)

注：寫取消事件時，將書寫 綁定事件的代碼復制過來，將on改成off即可。
當然，off()事件可以不帶參數。

了解：面向對象的3大特性：（封裝、繼承、多態）

5.2 事件取消

5.3 事件觸發

使用mui.trigger()方法可以動態觸發特定DOM元素上的事件。
注：第一個參數是DOM原生態元素。

4.4 手勢事件

 

6 Aajx

7下拉刷新

加載第一頁最新的數據，如果服務器數據沒有變更，那么和上次獲取的到的數據是一樣的。
將獲取到的第一頁數據放置到頁面之前，先清除原有的數據。

8上拉加載

加載下一頁數據，同時放到原有數據的最后端。
根據返回數據的條數 和pagesize進行判斷，確實是否還有下一頁。
將當前頁碼存為一個全局變量page。
當有下拉刷新的時候，page值需要重置