來源:涼官灰 發(fā)布時間:2020-05-25 10:06:51 閱讀量:1825
作為一個前端人員來說,總結(jié)幾款相對來說不錯的用于移動端開發(fā)的UI框架是非常必要的,以下幾種移動端UI框架就能基本滿足工作中開發(fā)需要,根據(jù)項目需求,選用合適的框架搭建項目,更能容易提高開發(fā)效率。
一、MUI
最接近原生APP體驗的高性能前端框架,追求性能體驗,是我們開始啟動MUI項目的首要目標(biāo),輕量必然是重要特征。
MUI不依賴任何第三方JS庫,壓縮后的JS和CSS文件僅有100+K和60+K,鑒于之前的很多前端框架(特別是響應(yīng)式布局的框架),UI控件看起來太像網(wǎng)頁,沒有原生感覺,因此追求原生UI感覺也是我們的重要目標(biāo),MUI以iOS平臺UI為基礎(chǔ),補充部分Android平臺特有的UI控件
官方鏈接:http://dev.dcloud.net.cn/mui/
二、Frozen UI
由騰訊團隊開發(fā),適用于使用手Q規(guī)范設(shè)計的Web頁面,而針對非手Q規(guī)范的頁面,可通過修改變量定制界面主題。可以按需選擇需要的組件,也可以采用cdn和combo的方式按需加載。使用iconfont展示圖標(biāo),包含了按鈕,列表,表單,提示,彈窗等常用組件,新增文本,布局,1px, rem,文字截斷,占位,兩端留白,兩端對齊等解決方案,同時解決了移動端屏幕適配問題。CSS使用模塊化的樣式命名和組織規(guī)范,使用sass編寫css代碼。
官方鏈接:http://frozenui.github.io/
三、Amaze UI
Amaze UI 以移動優(yōu)先(Mobile first)為理念,從小屏逐步擴展到大屏,最終實現(xiàn)所有屏幕適配,適應(yīng)移動互聯(lián)潮流。Amaze UI 含近 20 個 CSS 組件、20 余 JS 組件,更有多個包含不同主題的 Web 組件,可快速構(gòu)建界面出色、體驗優(yōu)秀的跨屏頁面,大幅提升開發(fā)效率。相比國外框架,Amaze UI 關(guān)注中文排版,根據(jù)用戶代理調(diào)整字體,實現(xiàn)更好的中文排版效果;兼顧國內(nèi)主流瀏覽器及 App 內(nèi)置瀏覽器兼容支持。Amaze UI 面向 HTML5 開發(fā),使用 CSS3 來做動畫交互,平滑、高效,更適合移動設(shè)備,讓 Web 應(yīng)用更快速載入。
官方鏈接:http://amazeui.org/
四、SUI Mobile
SUI Mobile 是一套基于 Framework7 開發(fā)的UI庫。它非常輕量、精美,只需要引入我們的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常適合開發(fā)跨平臺Web App。
官方鏈接:http://m.sui.taobao.org/
五、Muse-UI
基于 Vue 2.0 和 Material Desigin 的 UI 組件庫,Muse UI 擁有40多個UI 組件,用于適應(yīng)不同業(yè)務(wù)環(huán)境。Muse UI 自定義主題方式極為優(yōu)雅,僅需少量代碼即可完成主題樣式替換。Muse UI 基于 Vue2.0 開發(fā),Vue2.0是當(dāng)下最快的前端框架之一,小巧,api友好,可用于開發(fā)的復(fù)雜單頁應(yīng)用。
官方鏈接:https://muse-ui.org/#/zh-CN
六、AUI2.0
AUI 2.0是一套全新的AUI框架,在1.X基礎(chǔ)上進行了重新架構(gòu)。結(jié)合實際項目出發(fā),站在開發(fā)者和項目的角度,重新定義AUI框架。在2.0中使用了大量彈性響應(yīng)式布局,采用容器+布局結(jié)構(gòu)+控件的嵌套形式,方便開發(fā)者快速布局樣式。我們充分吸取了AUI使用者的反饋意見和借鑒了市場上其他優(yōu)秀UI框架,完成了2.0版本的開發(fā)。2.0遵循Google Material 設(shè)計規(guī)范,使用MIT開源協(xié)議。