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