如何從Vant Weapp臼朗、MinUI蝎土、iView Weapp、Wux Weapp挡毅、ColorUI共5個小程序組件庫選型

前言

發(fā)展到今天醋拧,手機端組件庫其實已經大同小異淀弹,熟練的程序員甚至都能背過80%的組件名稱庆械,比如toast、cell沐序、checkbox……堕绩,來來回回就是這么些,那么特姐,面對市面上最火的5個小程序組件庫黍氮,我們該如何選擇?

其實捷枯,并沒有最好的那一個組件庫专执,只是看你的需求。

以下數(shù)據(jù)統(tǒng)計于2019.3.20本股。

Vant Weapp

star:8578
github:https://github.com/youzan/vant-weapp
官網:https://youzan.github.io/vant-weapp
開發(fā)者:有贊
目前最后更新時間:2天前

印象:

組件數(shù)量很“中庸”痊末,不多也不少哩掺,常見的組件類型一個不少,但是“有點獨特想法”的組件幾乎沒有盒件。

視覺上說比較無特色舱禽,畫面比較粗糙,比如開關單元格翔始,按鈕上不能自定義文字(比如 開啟/關閉,開/關 這種文字)城瞎,而其他幾個組件都可以顯示文字脖镀。

iView Weapp

star:3931
github:https://github.com/TalkingData/iview-weapp
官網:https://weapp.iviewui.com/
開發(fā)者:移動互聯(lián)網大數(shù)據(jù)平臺(TalkingData)
目前最后更新時間:2個月前

印象:

組件數(shù)量跟Vant相當,但是沒有任何選擇器弦蹂,比如沒有時間選擇器强窖,也沒有樹形選擇器等等。

比較特色的是“抽屜”削饵,也就是從屏幕某側伸出來一個浮層未巫,可以作為菜單使用。

MinUI

star:3053
github:https://github.com/meili/minui
官網:https://meili.github.io/min/docs/minui/
開發(fā)者:美麗說
目前最后更新時間:4個月前

印象:

組件數(shù)量是最少的劈伴,連ActionSheet都沒有你敢信握爷?反而是有一些純js組件,比如倒計時等追城,還有純css聲明燥撞,比如文本截斷,還有一些組件色洞,比如購物車為空的一張圖冠胯,比如一張遮罩就成了一個組件,比如頁底的“到頁底啦”提示置蜀,等等,這些完全沒有必要做成組件盯荤。

Wux Weapp

star:3011
github:https://github.com/wux-weapp/wux-weapp/
官網:https://wux-weapp.github.io/wux-weapp-docs
開發(fā)者:個人(skyvow)
目前最后更新時間:2個月前

印象:

雖然是個人作品廷雅,但是組件卻是最多的,而且基本上沒有什么“廢物”組件商架,新穎的組件不少芥玉,比如“骨架屏”,而且自帶日歷等灿巧。

ColorUI

star:2071
github:https://github.com/weilanwl/ColorUI/
官網:https://www.color-ui.com/
開發(fā)者:個人(weilanwl)
目前最后更新時間:21天前

印象:

這個UI就有意思了抠藕,它跟其他組件走的路線不一樣:

就跟它的名稱一樣,它更強調色彩敬辣,包括背景色零院、文本色、邊框陰影撰茎,都能給你做出來一系列推薦方案打洼。

它的組件的分類法是“操作條”、“導航欄”“表單”“輪播”這樣的分類绎签,不要以為里面的內容很少酝锅,比如“操作條”奢方,凡是條形的UI在這里幾乎全能找到爸舒,而且配色都比較漂亮扭勉,尤其是底部導航條的中央大“發(fā)布”按鈕苛聘,也特意給你做了出來。導航欄里面唱捣,navbar网梢、tabbar都可以找到。

優(yōu)勢&劣勢

說到最后,到底我們怎么選型呢烦感?一句話評價一下這5個組件吧:

Vant Weapp:

  • 優(yōu)勢:版本升級最勤快手趣,開發(fā)團隊實力最強,組件數(shù)量足以應對交互不多的APP气笙。

  • 劣勢:組件數(shù)量不是最多的隧出,畫面比較糙阀捅。

iView Weapp

  • 優(yōu)勢:跟Vant Weapp有個哥哥叫Vant一樣,iView Weapp也有一個哥哥叫iVew凄诞,說明開發(fā)者實力也是不用擔心。美觀度大于Vant Weapp伪朽。

  • 劣勢:缺少選擇器組件汛蝙,如果你很需要這個組件,那么你可能要放棄iView跃脊。

MinUI

  • 優(yōu)勢:優(yōu)勢是……簡單苛吱?果然跟項目名稱一樣翠储,Min,最小援所。

  • 劣勢:美麗說的這個項目,應該是公司的程序員業(yè)余用來練手的一個項目挪略,至今也有4個月沒見動靜了滔岳,是幾個項目中最慘的谱煤。我認為應該將這個組件庫作為末選,實在沒辦法才去考慮刘离。

Wux Weapp

  • 優(yōu)勢:組件庫足夠多硫惕,沒有廢物組件,之前還在別處見到有人找小程序的“骨架屏”踪旷,Wux正好有。如果你的項目交互非常多搪锣,我們能想到的通用組件幾乎全能用得到彩掐,那么灰追,選Wux Weapp會給你節(jié)省開發(fā)時間堵幽,也減少維護成本。

  • 劣勢:籠統(tǒng)說弹澎,沒有缺點朴下。如果細說,可以說苦蒿,它的手冊的效果是用視頻演示的殴胧,不夠直觀。當然了佩迟,其他的那幾個組件庫的演示也不是說就是完美的团滥,如果你覺得Wux好用,手冊的問題可以克服报强。

ColorUI

  • 優(yōu)勢:當然是色彩華麗灸姊,如果你對配色完全沒有概念,可以試試這款組件庫秉溉。它的組件大多是做了視覺優(yōu)化的,你可以直接拿過來就用召嘶。

  • 劣勢:交互性的組件不夠多父晶。

個人推薦

其實上面也說的比較清楚了,相信各位有了一定的認識了弄跌。

我個人推薦的話诱建,就是:

  1. 記住,小程序組件的優(yōu)勢是“天生可拆分”碟绑,所以俺猿,沒必要太糾結選哪個,因為你完全可以從這5個組件庫都挑選一些組件格仲,最后湊成一個項目押袍!
  2. 如果你無理由鐘愛某款,那就選某款凯肋。
  3. 如果喜歡大廠谊惭,就從Vant和iView選一個,它倆之間,要畫面略好就iView圈盔,要選擇器就Vant豹芯。
  4. 如果無所謂大廠不大廠,就Wux驱敲,幾乎無缺點铁蹈。
  5. ColorUI的組件大多是無交互的組件,所以可以和其他的組件搭配使用众眨,就比如底部導航條握牧,它的點擊事件和高亮,你用原生代碼可以輕松寫出來娩梨,這時候沿腰,組件的美觀度才是第一位的,所以優(yōu)先選擇ColorUI的底部導航條當然OK狈定!

所以我的操作建議是:

  1. 任何組件先去ColorUI里找颂龙,除非你明確知道ColorUI里肯定沒有。
  2. ColorUI里沒有的組件優(yōu)先去Wux里找纽什,如果感覺視覺不夠漂亮或者功能少那么一丟丟措嵌,比如你想用ActionSheet,而且希望彈出層帶標題稿湿,但是你找的這個組件庫的ActionSheet不帶標題铅匹,那么你大可以看看其他的組件庫。
  3. 同樣的組件不要混著用饺藤,比如ActionSheet不要同時用多個庫的組件包斑,這樣不統(tǒng)一顯得很弱智。

謝謝涕俗,本文為簡書microkof個人原創(chuàng)罗丰。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市再姑,隨后出現(xiàn)的幾起案子萌抵,更是在濱河造成了極大的恐慌,老刑警劉巖元镀,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绍填,死亡現(xiàn)場離奇詭異,居然都是意外死亡栖疑,警方通過查閱死者的電腦和手機讨永,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來遇革,“玉大人卿闹,你說我怎么就攤上這事揭糕。” “怎么了锻霎?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵著角,是天一觀的道長。 經常有香客問我旋恼,道長吏口,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任蚌铜,我火速辦了婚禮锨侯,結果婚禮上嫩海,老公的妹妹穿的比我還像新娘冬殃。我一直安慰自己,他們只是感情好叁怪,可當我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布审葬。 她就那樣靜靜地躺著,像睡著了一般奕谭。 火紅的嫁衣襯著肌膚如雪涣觉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天血柳,我揣著相機與錄音官册,去河邊找鬼。 笑死难捌,一個胖子當著我的面吹牛膝宁,可吹牛的內容都是我干的。 我是一名探鬼主播根吁,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼员淫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了击敌?” 一聲冷哼從身側響起介返,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎沃斤,沒想到半個月后圣蝎,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡衡瓶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年徘公,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鞍陨。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡步淹,死狀恐怖从隆,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情缭裆,我是刑警寧澤键闺,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站澈驼,受9級特大地震影響辛燥,放射性物質發(fā)生泄漏。R本人自食惡果不足惜缝其,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一挎塌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧内边,春花似錦榴都、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至和屎,卻和暖如春拴驮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留英支,地道東北人。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓潜沦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親线罕。 傳聞我的和親對象是個殘疾皇子止潮,可洞房花燭夜當晚...
    茶點故事閱讀 45,066評論 2 355