這是一款高性能的最接近原生APP體驗的高性能前端框架。
性能和體驗的差距,一直是mobile app開發者放棄HTML5的首要原因。 瀏覽器天生的切頁白屏、不忍直視的轉頁動畫、浮動元素的抖動、無法流暢下拉刷新等問題,這些都讓HTML5開發者倍感挫敗,尤其拿到Android低端機運行,摔手機的心都有; 另一方面,瀏覽器默認控件樣式又少又丑,制作一個漂亮的控件非常麻煩,也有一些制作簡單的ui框架但性能低下。
mui框架有效的解決了這些問題,這是一個可以方便開發出高性能App的框架,也是目前最接近原生App效果的框架。
特色
輕量
追求性能體驗,是我們開始啟動MUI項目的首要目標,輕量必然是重要特征;
MUI不依賴任何第三方JS庫,壓縮后的JS和CSS文件僅有100+K和60+K
原生UI
鑒于之前的很多前端框架(特別是響應式布局的框架),UI控件看起來太像網頁,沒有原生感覺,因此追求原生UI感覺也是我們的重要目標
MUI以iOS平臺UI為基礎,補充部分Android平臺特有的UI控件
流暢體驗
下拉刷新
為實現下拉刷新功能,大多H5框架都是通過DIV模擬下拉回彈動畫,在低端android手機上,DIV動畫經常出現卡頓現象(特別是圖文列表的情況); mui通過雙webview解決這個DIV的拖動流暢度問題;拖動時,拖動的不是div,而是一個完整的webview(子webview),回彈動畫使用原生動畫。
側滑導航
mui提供了兩種側滑導航實現:webview模式和div模式,兩種模式各有優劣,適用于不同的場景。每種側滑實現模式,有不同的側滑動畫效果,主要分為四類:
- 動畫1:主界面移動、菜單不動
- 動畫2:主界面不動、菜單移動
- 動畫3:主界面和菜單同時移動
- 動畫4:縮放式側滑(類手機QQ)
滑動觸發操作菜單
在手機應用中(特別是iOS平臺),很多操作菜單都是滑動觸發的,比如短信界面,左滑顯示“刪除”按鈕,點擊可以刪除該短信對話;
郵件列表界面,左滑可以刪除,右滑可以標注為"已讀/未讀"狀態;
mui的列表控件也支持滑動觸發操作菜單功能,僅需按照特定格式拼裝DOM結構即可;
另外,滑動還支持事件觸發,開發者可以通過監聽滑動事件(slideleft/slideright),完成操作前的確認提醒工作。
License
mui遵循MIT License;