移動端框架如雨後春筍,你該如何選擇?

全棧弄潮兒發表於2018-08-20

react-native 66.5k

React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架,是Facebook早先開源的UI框架

React

在原生移動應用平臺的衍生產物,目前支援iOS和安卓兩大平臺。RN使用Javascript語言,類似於HTML的JSX,以及CSS來開發移動應用,因此熟悉Web前端開發的技術人員只需很少的學習就可以進入移動應用開發領域。

React Native使你能夠在Javascript和React的基礎上獲得完全一致的開發體驗,構建世界一流的原生APP。

React Native著力於提高多平臺開發的開發效率 —— 僅需學習一次,編寫任何平臺。(Learn once, write anywhere)

ionic 34.7k

Build amazing native and progressive web apps with open web technologies. One app running on everything

ionic由谷歌團隊開發維護。 ionic是一個強大的 HTML5 應用程式開發框架(HTML5 Hybrid Mobile App Framework )。

可以幫助您使用 Web 技術,比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程式。

ionic 主要關注外觀和體驗,以及和你的應用程式的 UI 互動,特別適合用於基於 Hybird 模式的 HTML5 移動應用程式開發。

ionic是一個輕量的手機UI庫,具有速度快,介面現代化、美觀等特點。為了解決其他一些UI庫在手機上執行緩慢的問題,它直接放棄了IOS6和Android4.1以下的版本支援,來獲取更好的使用體驗。 weui 19.4k

WeUI is an WeChat-like UI framework officially designed by the WeChat

Design Team, tailor-made for WeChat Web development, in order to improve

and standardize the experience for WeChat users. Including components

such as button、cell、dialog、 progress、 toast、article、actionsheet、icon. Weex 16.9k

2016年4月21日,在Qcon大會上宣佈跨平臺移動開發工具Weex開放內測邀請。

Weex

是一套簡單易用的跨平臺開發方案,能以 web 的開發體驗構建高效能、可擴充套件的 native 應用,為了做到這些,Weex 與 Vue

合作,使用 Vue 作為上層框架,並遵循 W3C 標準實現了統一的 JSEngine 和 DOM API,這樣一來,你甚至可以使用其他框架驅動

Weex,打造三端一致的 native 應用。

Weex能夠完美兼顧效能與動態性,支援iOS、安卓、YunOS及Web等多端部署。

wepy 12.6k

WePY 是一款讓小程式支援元件化開發的框架,通過預編譯的手段讓開發者可以選擇自己喜歡的開發風格去開發小程式。框架的細節優化,Promise,Async Functions的引入都是為了能讓開發小程式專案變得更加簡單,高效。

mpvue 11.8k

mpvue 是一個使用 Vue.js 開發小程式的前端框架。框架基於 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 實現,使其可以執行在小程式環境中,從而為小程式開發引入了整套 Vue.js 開發體驗。

amazeui 12k

中國首個開源 HTML5 跨屏前端框架。

Amaze UI 以移動優先(Mobile first)為理念,從小屏逐步擴充套件到大屏,最終實現所有螢幕適配,適應移動互聯潮流。

Vux 13.4k

Vux(讀音 [v'ju:z],同views)是基於WeUI和Vue(2.x)開發的移動端UI元件庫,主要服務於微信頁面。

基於webpack+vue-loader+vux可以快速開發移動端頁面,配合vux-loader方便你在WeUI的基礎上定製需要的樣式。

vux-loader保證了元件按需使用,因此不用擔心最終打包了整個vux的元件庫程式碼。

vux並不完全依賴於WeUI,但是儘量保持整體UI樣式接近WeUI的設計規範。最初目標是建立一個易用,實用,美觀的移動端UI元件庫,現在離理想狀態還有不少距離,因此需要大家及時反饋問題及貢獻程式碼。

即使你不使用vux的程式碼, 但能從原始碼得到一些參考那麼也是件讓人高興的事情。

Mint UI 9.8k

基於 Vue.js 的移動端元件庫

Mint UI 包含豐富的 CSS 和 JS 元件,能夠滿足日常的移動端開發需要。通過它,可以快速構建出風格統一的頁面,提升開發效率。

真正意義上的按需載入元件。可以只載入宣告過的元件及其樣式檔案,無需再糾結檔案體積過大。

考慮到移動端的效能門檻,Mint UI 採用 CSS3 處理各種動效,避免瀏覽器進行不必要的重繪和重排,從而使使用者獲得流暢順滑的體驗。

依託 Vue.js 高效的元件化方案,Mint UI 做到了輕量化。即使全部引入,壓縮後的檔案體積也僅有 ~30kb (JS + CSS) gzip。

mui 8.4k

效能和體驗的差距,一直是mobile app開發者放棄HTML5的首要原因。

瀏覽器天生的切頁白屏、不忍直視的轉頁動畫、浮動元素的抖動、無法流暢下拉重新整理等問題,這些都讓HTML5開發者倍感挫敗,尤其拿到Android低端機執行,摔手機的心都有;

另一方面,瀏覽器預設控制元件樣式又少又醜,製作一個漂亮的控制元件非常麻煩,也有一些製作簡單的ui框架但效能低下。

mui框架有效的解決了這些問題,這是一個可以方便開發出高效能App的框架,也是目前最接近原生App效果的框架。

Muse-UI 5.5k

基於 Vue 2.0 和 Material Desigin 的 UI 元件庫

特性

1.元件豐富

Muse UI 基本實現了 Material Design 設計規範類的所有元件,另外還開發許多的功能性的元件

2.可定製

Muse UI 使用less檔案,所有的顏色都有一個變數維護,通過編寫 less 檔案完成自定義主題,另外元件內部也提供一些修改效果的引數

3.基於 Vue 2.0

Muse UI 基於 Vue2.0 開發,Vue2.0是當下最快的前端框架之一,小巧,api友好,可用於開發的複雜單頁應用 vonic 2.5k

一個基於 vue.js 和 ionic 樣式的 UI 框架,用於快速構建移動端單頁應用。

和 ionic 的關係:沒有關係,只是在樣式方面以 ionic 的 css 檔案為基礎(做了一些調整)

vue-carbon 0.8k

基於 vuejs 1.0 開發 material design 風格的移動端 WEB UI 庫。

使用文件地址 myronliu347.github.io/vue-carbon/…

zanui-weapp 0.3k

高顏值、好用、易擴充套件的微信小程式 UI 庫,Powered by 有贊。

frozenui 0.2k

FrozenUI的CSS元件庫,基於騰訊手Q樣式規範,騰訊QXD出品。

VUWE 0.1k

vuwe是一款基於微信WeUI所開發的,專用於Vue2的元件庫。

它與WeUI完全解耦。使用者通過自定義WeUI的樣式檔案,可以方便地對VUWE實現定製化。

總結:

不要盲目為了框架而選框架,根據實際業務場景、專案大小、是否跨平臺、學習成本等,選擇適合自己的框架。


更多angular1/2/4/5、ionic1/2/3/4、react、vue、微信小程式、nodejs等技術文章、視訊教程和開源專案,請掃一掃下面的二維碼關注微信公眾號——全棧弄潮兒

微信公眾號.png


福利專區:掃碼關注,免費領取淘寶天貓內部優惠券

淘寶天貓內部優惠券.png

相關文章