前言

發(fā)展到今天，手機端組件庫其實已經(jīng)大同小異，熟練的程序員甚至都能背過80%的組件名稱，比如toast、cell、checkbox……，來來回回就是這么些，那么，面對市面上最火的5個小程序組件庫，我們該如何選擇？

其實，并沒有最好的那一個組件庫，只是看你的需求。

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

Vant Weapp

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

印象：

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

視覺上說比較無特色，畫面比較粗糙，比如開關(guān)單元格，按鈕上不能自定義文字（比如 開啟/關(guān)閉，開/關(guān) 這種文字），而其他幾個組件都可以顯示文字。

iView Weapp

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

印象：

組件數(shù)量跟Vant相當(dāng)，但是沒有任何選擇器，比如沒有時間選擇器，也沒有樹形選擇器等等。

比較特色的是“抽屜”，也就是從屏幕某側(cè)伸出來一個浮層，可以作為菜單使用。

MinUI

star：3053
github：https://github.com/meili/minui
官網(wǎng)：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/
官網(wǎng)：https://wux-weapp.github.io/wux-weapp-docs
開發(fā)者：個人（skyvow）
目前最后更新時間：2個月前

印象：

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

ColorUI

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

印象：

這個UI就有意思了，它跟其他組件走的路線不一樣：

就跟它的名稱一樣，它更強調(diào)色彩，包括背景色、文本色、邊框陰影，都能給你做出來一系列推薦方案。

它的組件的分類法是“操作條”、“導(dǎo)航欄”“表單”“輪播”這樣的分類，不要以為里面的內(nèi)容很少，比如“操作條”，凡是條形的UI在這里幾乎全能找到，而且配色都比較漂亮，尤其是底部導(dǎo)航條的中央大“發(fā)布”按鈕，也特意給你做了出來。導(dǎo)航欄里面，navbar、tabbar都可以找到。

優(yōu)勢&劣勢

說到最后，到底我們怎么選型呢？一句話評價一下這5個組件吧：

Vant Weapp：

優(yōu)勢：版本升級最勤快，開發(fā)團(tuán)隊實力最強，組件數(shù)量足以應(yīng)對交互不多的APP。

劣勢：組件數(shù)量不是最多的，畫面比較糙。

iView Weapp

優(yōu)勢：跟Vant Weapp有個哥哥叫Vant一樣，iView Weapp也有一個哥哥叫iVew，說明開發(fā)者實力也是不用擔(dān)心。美觀度大于Vant Weapp。

劣勢：缺少選擇器組件，如果你很需要這個組件，那么你可能要放棄iView。

MinUI

優(yōu)勢：優(yōu)勢是……簡單？果然跟項目名稱一樣，Min，最小。

劣勢：美麗說的這個項目，應(yīng)該是公司的程序員業(yè)余用來練手的一個項目，至今也有4個月沒見動靜了，是幾個項目中最慘的。我認(rèn)為應(yīng)該將這個組件庫作為末選，實在沒辦法才去考慮。

Wux Weapp

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

劣勢：籠統(tǒng)說，沒有缺點。如果細(xì)說，可以說，它的手冊的效果是用視頻演示的，不夠直觀。當(dāng)然了，其他的那幾個組件庫的演示也不是說就是完美的，如果你覺得Wux好用，手冊的問題可以克服。

ColorUI

優(yōu)勢：當(dāng)然是色彩華麗，如果你對配色完全沒有概念，可以試試這款組件庫。它的組件大多是做了視覺優(yōu)化的，你可以直接拿過來就用。

劣勢：交互性的組件不夠多。

個人推薦

其實上面也說的比較清楚了，相信各位有了一定的認(rèn)識了。

我個人推薦的話，就是：

記住，小程序組件的優(yōu)勢是“天生可拆分”，所以，沒必要太糾結(jié)選哪個，因為你完全可以從這5個組件庫都挑選一些組件，最后湊成一個項目！
如果你無理由鐘愛某款，那就選某款。
如果喜歡大廠，就從Vant和iView選一個，它倆之間，要畫面略好就iView，要選擇器就Vant。
如果無所謂大廠不大廠，就Wux，幾乎無缺點。
ColorUI的組件大多是無交互的組件，所以可以和其他的組件搭配使用，就比如底部導(dǎo)航條，它的點擊事件和高亮，你用原生代碼可以輕松寫出來，這時候，組件的美觀度才是第一位的，所以優(yōu)先選擇ColorUI的底部導(dǎo)航條當(dāng)然OK！

所以我的操作建議是：

任何組件先去ColorUI里找，除非你明確知道ColorUI里肯定沒有。
ColorUI里沒有的組件優(yōu)先去Wux里找，如果感覺視覺不夠漂亮或者功能少那么一丟丟，比如你想用ActionSheet，而且希望彈出層帶標(biāo)題，但是你找的這個組件庫的ActionSheet不帶標(biāo)題，那么你大可以看看其他的組件庫。
同樣的組件不要混著用，比如ActionSheet不要同時用多個庫的組件，這樣不統(tǒng)一顯得很弱智。

作者：microkof
鏈接：https://www.jianshu.com/p/2e94c3b3f11c
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

總結(jié)

以上是生活随笔為你收集整理的如何从Vant Weapp、MinUI、iView Weapp、Wux Weapp、ColorUI共5个小程序组件库选型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。