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

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

1、總結

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

 

 

 

2、多端發佈 – 開發一套代碼，發佈六個平臺

 

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

 

 

3、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值須要重置