前言
發展到今天,手機端組件庫其實已經大同小異,熟練的程序員甚至都能背過80%的組件名稱,比如toast、cell、checkbox……,來來回回就是這么些,那么,面對市面上最火的5個小程序組件庫,我們該如何選擇?
其實,并沒有最好的那一個組件庫,只是看你的需求。
以下數據統計于2019.3.20。
Vant Weapp
star:8578
github:https://github.com/youzan/vant-weapp
官網:https://youzan.github.io/vant-weapp
開發者:有贊
目前最后更新時間:2天前
印象:
組件數量很“中庸”,不多也不少,常見的組件類型一個不少,但是“有點獨特想法”的組件幾乎沒有。
視覺上說比較無特色,畫面比較粗糙,比如開關單元格,按鈕上不能自定義文字(比如 開啟/關閉,開/關 這種文字),而其他幾個組件都可以顯示文字。
iView Weapp
star:3931
github:https://github.com/TalkingData/iview-weapp
官網:https://weapp.iviewui.com/
開發者:移動互聯網大數據平臺(TalkingData)
目前最后更新時間:2個月前
印象:
組件數量跟Vant相當,但是沒有任何選擇器,比如沒有時間選擇器,也沒有樹形選擇器等等。
比較特色的是“抽屜”,也就是從屏幕某側伸出來一個浮層,可以作為菜單使用。
MinUI
star:3053
github:https://github.com/meili/minui
官網:https://meili.github.io/min/docs/minui/
開發者:美麗說
目前最后更新時間:4個月前
印象:
組件數量是最少的,連ActionSheet都沒有你敢信?反而是有一些純js組件,比如倒計時等,還有純css聲明,比如文本截斷,還有一些組件,比如購物車為空的一張圖,比如一張遮罩就成了一個組件,比如頁底的“到頁底啦”提示,等等,這些完全沒有必要做成組件。
Wux Weapp
star:3011
github:https://github.com/wux-weapp/wux-weapp/
官網:https://wux-weapp.github.io/wux-weapp-docs
開發者:個人(skyvow)
目前最后更新時間:2個月前
印象:
雖然是個人作品,但是組件卻是最多的,而且基本上沒有什么“廢物”組件,新穎的組件不少,比如“骨架屏”,而且自帶日歷等。
ColorUI
star:2071
github:https://github.com/weilanwl/ColorUI/
官網:https://www.color-ui.com/
開發者:個人(weilanwl)
目前最后更新時間:21天前
印象:
這個UI就有意思了,它跟其他組件走的路線不一樣:
就跟它的名稱一樣,它更強調色彩,包括背景色、文本色、邊框陰影,都能給你做出來一系列推薦方案。
它的組件的分類法是“操作條”、“導航欄”“表單”“輪播”這樣的分類,不要以為里面的內容很少,比如“操作條”,凡是條形的UI在這里幾乎全能找到,而且配色都比較漂亮,尤其是底部導航條的中央大“發布”按鈕,也特意給你做了出來。導航欄里面,navbar、tabbar都可以找到。
優勢&劣勢
說到最后,到底我們怎么選型呢?一句話評價一下這5個組件吧:
Vant Weapp:
優勢:版本升級最勤快,開發團隊實力最強,組件數量足以應對交互不多的APP。
劣勢:組件數量不是最多的,畫面比較糙。
iView Weapp
優勢:跟Vant Weapp有個哥哥叫Vant一樣,iView Weapp也有一個哥哥叫iVew,說明開發者實力也是不用擔心。美觀度大于Vant Weapp。
劣勢:缺少選擇器組件,如果你很需要這個組件,那么你可能要放棄iView。
MinUI
優勢:優勢是……簡單?果然跟項目名稱一樣,Min,最小。
劣勢:美麗說的這個項目,應該是公司的程序員業余用來練手的一個項目,至今也有4個月沒見動靜了,是幾個項目中最慘的。我認為應該將這個組件庫作為末選,實在沒辦法才去考慮。
Wux Weapp
優勢:組件庫足夠多,沒有廢物組件,之前還在別處見到有人找小程序的“骨架屏”,Wux正好有。如果你的項目交互非常多,我們能想到的通用組件幾乎全能用得到,那么,選Wux Weapp會給你節省開發時間,也減少維護成本。
劣勢:籠統說,沒有缺點。如果細說,可以說,它的手冊的效果是用視頻演示的,不夠直觀。當然了,其他的那幾個組件庫的演示也不是說就是完美的,如果你覺得Wux好用,手冊的問題可以克服。
ColorUI
優勢:當然是色彩華麗,如果你對配色完全沒有概念,可以試試這款組件庫。它的組件大多是做了視覺優化的,你可以直接拿過來就用。
劣勢:交互性的組件不夠多。
個人推薦
其實上面也說的比較清楚了,相信各位有了一定的認識了。
我個人推薦的話,就是:
- 記住,小程序組件的優勢是“天生可拆分”,所以,沒必要太糾結選哪個,因為你完全可以從這5個組件庫都挑選一些組件,最后湊成一個項目!
- 如果你無理由鐘愛某款,那就選某款。
- 如果喜歡大廠,就從Vant和iView選一個,它倆之間,要畫面略好就iView,要選擇器就Vant。
- 如果無所謂大廠不大廠,就Wux,幾乎無缺點。
- ColorUI的組件大多是無交互的組件,所以可以和其他的組件搭配使用,就比如底部導航條,它的點擊事件和高亮,你用原生代碼可以輕松寫出來,這時候,組件的美觀度才是第一位的,所以優先選擇ColorUI的底部導航條當然OK!
所以我的操作建議是:
- 任何組件先去ColorUI里找,除非你明確知道ColorUI里肯定沒有。
- ColorUI里沒有的組件優先去Wux里找,如果感覺視覺不夠漂亮或者功能少那么一丟丟,比如你想用ActionSheet,而且希望彈出層帶標題,但是你找的這個組件庫的ActionSheet不帶標題,那么你大可以看看其他的組件庫。
- 同樣的組件不要混著用,比如ActionSheet不要同時用多個庫的組件,這樣不統一顯得很弱智。
謝謝,本文為簡書microkof個人原創。