跟大家分享 7 款比較好用的組件庫，如果你想開發(fā)，或是正在開發(fā)小程序，不妨了解一下，對(duì)比它們之間的長短與異同。
WeUI
WeUI 是微信官方出品的組件庫，它沿用了微信的視覺設(shè)計(jì)與交互設(shè)計(jì)，提供了各類原生組件的基礎(chǔ)樣式，風(fēng)格簡(jiǎn)約大方。選用這一套組件庫，可以讓你的小程序與微信本身保持一致的界面風(fēng)格。
官方組件庫能夠滿足基礎(chǔ)的界面需求，但是，如果你想要更加飽滿的視覺，更加活潑的動(dòng)效，恐怕 WeUI 就滿足不了你的需要了。
GitHub 地址：https://github.com/Tencent/weui
ColorUI 組件庫
ColorUI 是由文曉港發(fā)布的高顏值組件庫，側(cè)重于視覺交互。比起 WeUI 的低調(diào)克制，ColorUI 色彩鮮亮，樣式繁多。除了擁有非常豐富的原生組件的自定義樣式，它還提供一些常見的頁面元素，比如時(shí)間軸、步驟條、聊天頁、模態(tài)窗口等等。
這些頁面元素通常應(yīng)用在哪些場(chǎng)景下呢？
如果你想做一款諸如日記類、記賬類、博客類、Vlog 類的小程序，這時(shí)就需要用到「時(shí)間軸」。
如果你想做一款涉及流程的小程序，比如物流跟蹤，工作審批等，「步驟條」就可以派上用場(chǎng)了。
如果你想做一款社交類小程序，那么，當(dāng)然少不得要用到「聊天」的界面。
而「模態(tài)窗口」則可以應(yīng)用于各類小程序中出現(xiàn)彈框、側(cè)邊欄的地方。
此外，ColorUI 還引入了插件擴(kuò)展，也就是更為復(fù)雜的組件。目前已有的擴(kuò)展包括索引列表、微動(dòng)畫、全屏抽屜以及垂直導(dǎo)航。引用這幾項(xiàng)擴(kuò)展，只需編寫少量代碼，就能實(shí)現(xiàn)較炫的視覺交互，進(jìn)一步簡(jiǎn)化了開發(fā)工作。
前面我們已經(jīng)提到，ColorUI 是側(cè)重于視覺交互的組件庫，這方面的表現(xiàn)，還在于它為用戶提供了色彩的搭配方案。打開「背景」，可以看到深色、淡色、漸變等多種配色。
ColorUI 還有許多值得推薦的地方。多樣化的示例就是其中之一，它詳盡地向用戶展示了各種情況下，開發(fā)者可能需要編寫的樣式。
比如，打開「頭像」，就會(huì)看到被一一列舉的圓形頭像、圓角矩形頭像、各種尺寸頭像、默認(rèn)頭像、文字頭像、彩色頭像、頭像組、貼標(biāo)簽頭像等等。一個(gè)這么簡(jiǎn)單的組件，也可以有許多種不同的呈現(xiàn)方式。
又比如，打開「列表」，不僅可以看到宮格列表、菜單列表、消息列表、左滑列表等基本的樣式，還可以設(shè)置一些可選項(xiàng)，像邊框、箭頭等，在細(xì)節(jié)處也有多種可選樣式。
ColorUI 給大家提供了高度自定義的組件，一些比較麻煩的樣式，開發(fā)者只需調(diào)用其組件就能得以實(shí)現(xiàn)。不過，ColorUI 也不是萬能的，比如，它尚未涉及購物類小程序所需的組件。
GitHub 地址：https://github.com/weilanwl/ColorUI
Vant 組件庫演示
Vant 是由有贊發(fā)布的，輕量的小程序 UI 組件庫。如果你想制作一款電商、餐飲、外賣平臺(tái)、票務(wù)預(yù)訂等購物類小程序，選用 Vant 是較為合適的。為什么這么說呢？
首先，我們來看「業(yè)務(wù)組件」這一塊。可以看到，「商品卡片」與「提交訂單欄」兩個(gè)組件可以構(gòu)成一個(gè)基本的「購物車」頁面；而「商品卡片」與「商品導(dǎo)航」二者又可以組成一個(gè)簡(jiǎn)單的商店頁面。
我們?cè)倏纯雌渌嵥榈慕M件，比如「表單組件」中的「評(píng)分」、「搜索」、「步進(jìn)器」，都屬于購物類小程序需要用到的組件。
「導(dǎo)航組件」中的「徽章」與「展示組件」中的「分類選擇」，都可以用于商品品類的選擇切換。
「展示組件」中的「折疊面板」與「面板」可以用作詳細(xì)介紹商品的組件，「步驟條」則可以用于顯示物流跟蹤信息。
使用 Vant 組件庫，除了可以用常用的 Toast 方法，向用戶彈出提醒消息，還可以引用「反饋組件」中的「消息通知」以及「展示組件」中的「通告欄」，向用戶輸出通知信息。
除了以上可用于購物類小程序的組件，Vant 組件庫當(dāng)然還有那些比較通用基本元素、彈出層、Transition 動(dòng)畫等。值得一提的是，Vant 還支持自定義 Actionsheet，在「反饋組件」的「上拉菜單」中，有三種不同的自定義 Actionsheet。
Vant 對(duì)開發(fā)者非常友好，文檔可以說是事無巨細(xì)了，而且在文檔右側(cè)，還可以預(yù)覽樣式哦。
開發(fā)文檔：https://youzan.github.io/vant-weapp/#/intro
GitHub 地址：https://github.com/youzan/vant-weapp
iViewUI
iViewUI 是由 TalkingData 發(fā)布的組件庫。作為一款好用的組件庫，布局、面板、列表、表單、頂部導(dǎo)航欄、底部導(dǎo)航欄等組件當(dāng)然必不可少，那么 iViewUI 除了具備這些標(biāo)配的組件，還有哪些亮點(diǎn)呢？
在「導(dǎo)航」分類下，「分頁」、「索引選擇器」以及「吸頂容器」都是比較實(shí)用的組件。
其中，「索引選擇器」與 ColorUI 中的「索引列表」是同類組件，不同的是，ColorUI 的「索引列表」中每一項(xiàng)可以包含圖片、名字與描述，且支持搜索，而 iViewUI 的「索引選擇器」中每一項(xiàng)只包含名字，且不支持搜索。
而「吸頂容器」在上文中尚未提及，這一組件適合用于分級(jí)長列表的顯示。
在「視圖」分類下的「倒計(jì)時(shí)」一項(xiàng)中，提供了多種倒計(jì)時(shí)的顯示格式。
iViewUI 同樣有詳細(xì)的文檔，但是不支持網(wǎng)頁預(yù)覽，只能打開小程序預(yù)覽。
開發(fā)文檔：https://weapp.iviewui.com/docs/guide/start
GitHub 地址：https://github.com/TalkingData/iview-weapp
MinUI 組件庫
MinUI 是由蘑菇街發(fā)布的組件庫。與其他組件庫不同的是，MinUI 更注重一些細(xì)節(jié)的處理。
調(diào)用「基礎(chǔ)元件」中的「文本截?cái)唷梗梢钥刂崎L文本的顯示行數(shù)，文本超長的用省略號(hào)結(jié)尾。「頁底提示」可以用在上拉加載中的過程中。而「價(jià)格」則提供了各種樣式的價(jià)格及貨幣符號(hào)。
「功能組件」的「異常流展示」為開發(fā)者提供了各種異常狀態(tài)下，向用戶展示的界面。「遮罩層」則提供了各種效果的遮罩層，及其顯示、隱藏方式。
相比其他組件庫，MinUI 將各種組件拆分得更細(xì)，真正使用時(shí)，需要開發(fā)者更多的對(duì)各個(gè)組件進(jìn)行再次結(jié)合，但也因此 MinUI 顯得更加通用。
開發(fā)文檔：https://meili.github.io/min/docs/minui/index.html#README
GitHub 地址：https://github.com/meili/min-cli
TaroUI
TaroUI 是由京東·凹凸實(shí)驗(yàn)室發(fā)布的多端 UI 組件庫。這套組件庫，可以在 H5、微信小程序、支付寶小程序、百度小程序多端適配運(yùn)行。TaroUI 的整體風(fēng)格簡(jiǎn)約、清新、統(tǒng)一，適合工具、讀書、資訊、教育、商務(wù)等類型的小程序。
除了擁有上文所提及的組件之外，TaroUI 還有幾個(gè)特別的組件。在「表單」中有一項(xiàng)「范圍選擇器」，可以通過滑動(dòng)條指定數(shù)值范圍。在「高階組件」中，可以顯示「日歷」，并且支持多種日期選擇樣式。
TaroUI 同樣擁有健全的開發(fā)文檔，也支持在網(wǎng)頁中預(yù)覽手機(jī)效果。
開發(fā)文檔：https://taro-ui.aotu.io/#/docs/introduction
GitHub 地址：https://github.com/NervJS/taro-ui
WuxUI
由 skyvow (GitHub 賬號(hào)名) 發(fā)布的 Wux Weapp。這套組件庫所包含的組件最為豐富。不僅我們前文提到的各類組件都可以在 Wux 中找到，而且還有進(jìn)度環(huán)、骨架屏、篩選欄、數(shù)字鍵盤、結(jié)果頁等實(shí)用工具類組件。如果你想開發(fā)一款工具類小程序，Wux 是個(gè)不錯(cuò)的選擇。
開發(fā)文檔：https://wux-weapp.github.io/wux-weapp-docs/#/introduce
GitHub 地址：https://github.com/wux-weapp/wux-weapp/
這 7 款 UI 組件庫各有所長，適合不同的小程序類型，Vant 適合電商類的，TaroUI 與 Wux 適合工具類的，而蘑菇街的 MinUI 當(dāng)然更適合社區(qū)類的了。
如果你還知道更好用的組件庫，可以在留言板中跟大家分享哦。
