如(ru)果(guo)你也(ye)是(shi)(shi)一(yi)名小程(cheng)序開發者，當(dang)你打(da)開一(yi)個高顏值的(de)(de)小程(cheng)序時，是(shi)(shi)不是(shi)(shi)很想知道「這用的(de)(de)是(shi)(shi)哪一(yi)套 UI 組件庫」呢？

目前，網(wang)上已有不少(shao)開(kai)(kai)源的小程序組(zu)件庫(ku)，但選擇(ze)太(tai)多往(wang)往(wang)讓(rang)人挑花了(le)眼(yan)，反而不知哪一(yi)款才適合自己。今天(tian)，知曉君跟大家(jia)分享 7 款比較好用的組(zu)件庫(ku)，如果你想(xiang)開(kai)(kai)發，或是正在(zai)開(kai)(kai)發小程序，不妨了(le)解(jie)一(yi)下，對比它(ta)們之間的長(chang)短與(yu)異同(tong)。

WeUI

WeUI 是微(wei)信官方出品的(de)組(zu)件(jian)庫，它沿用了微(wei)信的(de)視覺設計與(yu)(yu)交互(hu)設計，提(ti)供了各類原生組(zu)件(jian)的(de)基礎樣式，風格簡約(yue)大方。選用這一套(tao)組(zu)件(jian)庫，可以讓你的(de)小程序與(yu)(yu)微(wei)信本(ben)身保持一致的(de)界面風格。

官方組件庫能夠滿足(zu)基(ji)礎的界面需(xu)求(qiu)，但是，如果你(ni)想要(yao)更(geng)加飽滿的視覺，更(geng)加活潑的動效(xiao)，恐怕 WeUI 就滿足(zu)不(bu)了(le)你(ni)的需(xu)要(yao)了(le)。

GitHub 地址：

ColorUI 組件庫

ColorUI 是(shi)由(you)文曉港發布的(de)(de)高顏值(zhi)組件(jian)庫，側重于視(shi)覺交互(hu)。比起(qi) WeUI 的(de)(de)低調克(ke)制，ColorUI 色(se)彩鮮亮，樣(yang)式繁多。除了擁(yong)有非常豐富(fu)的(de)(de)原生組件(jian)的(de)(de)自定義(yi)樣(yang)式，它還提供一些(xie)常見的(de)(de)頁(ye)面元素(su)，比如(ru)時(shi)間軸、步驟條、聊天頁(ye)、模態窗(chuang)口(kou)等等。

這些頁面元素通常應用在哪些場景下呢？

如果你想做(zuo)一款(kuan)諸如日記(ji)類(lei)(lei)、記(ji)賬類(lei)(lei)、博客類(lei)(lei)、Vlog 類(lei)(lei)的小(xiao)程序，這時就(jiu)需要用到(dao)「時間軸(zhou)」。

如果你(ni)想(xiang)做一款涉及流(liu)程的小程序，比如物流(liu)跟蹤，工作審批等，「步驟條」就可以派上用場了。

如果(guo)你想(xiang)做一款(kuan)社(she)交類小程序，那(nei)么，當然少不得要用到「聊天」的界面。

而「模態窗(chuang)口」則可以應(ying)用于各類小(xiao)程序中出(chu)現(xian)彈框(kuang)、側(ce)邊欄的(de)地方。

此外，ColorUI 還(huan)引(yin)入(ru)了插件擴(kuo)展，也就(jiu)是更為復雜的(de)組件。目(mu)前已有的(de)擴(kuo)展包括索引(yin)列(lie)表、微動(dong)畫、全屏抽屜以及垂直導航。引(yin)用這幾項擴(kuo)展，只(zhi)需編寫少(shao)量代碼，就(jiu)能實現(xian)較(jiao)炫的(de)視覺(jue)交互，進一步簡化(hua)了開發工作。

前面我們(men)已(yi)經(jing)提到，ColorUI 是(shi)側(ce)重于視覺交互的(de)組件庫，這方面的(de)表現，還在于它(ta)為用戶提供了色(se)(se)彩(cai)的(de)搭配方案。打開「背景」，可以看到深(shen)色(se)(se)、淡色(se)(se)、漸變(bian)等多種配色(se)(se)。

ColorUI 還有許多(duo)值得推薦的(de)地方。多(duo)樣化的(de)示例就是其中之一，它(ta)詳(xiang)盡地向(xiang)用戶展示了各種情況下，開發者可能需要編寫的(de)樣式。

比如，打開「頭(tou)(tou)(tou)(tou)(tou)像(xiang)」，就會看到被一一列舉的圓形頭(tou)(tou)(tou)(tou)(tou)像(xiang)、圓角矩(ju)形頭(tou)(tou)(tou)(tou)(tou)像(xiang)、各種尺寸(cun)頭(tou)(tou)(tou)(tou)(tou)像(xiang)、默認頭(tou)(tou)(tou)(tou)(tou)像(xiang)、文字頭(tou)(tou)(tou)(tou)(tou)像(xiang)、彩色頭(tou)(tou)(tou)(tou)(tou)像(xiang)、頭(tou)(tou)(tou)(tou)(tou)像(xiang)組(zu)、貼標簽(qian)頭(tou)(tou)(tou)(tou)(tou)像(xiang)等等。一個這么簡單的組(zu)件，也可以有許多種不同的呈(cheng)現方式。

又比如，打開「列(lie)表(biao)」，不僅可以(yi)(yi)看到(dao)宮格列(lie)表(biao)、菜單(dan)列(lie)表(biao)、消息列(lie)表(biao)、左滑列(lie)表(biao)等基本(ben)的(de)樣式(shi)，還可以(yi)(yi)設置一(yi)些可選項，像邊框、箭(jian)頭等，在(zai)細節(jie)處(chu)也有多種(zhong)可選樣式(shi)。

ColorUI 給大(da)家提供了高度自定(ding)義的(de)組件(jian)，一些(xie)比較麻煩的(de)樣式，開發者只需(xu)調用其組件(jian)就能得以實(shi)現(xian)。不過，ColorUI 也(ye)不是萬能的(de)，比如，它尚(shang)未涉及購(gou)物(wu)類(lei)小程序所需(xu)的(de)組件(jian)。

GitHub 地址：

Vant 組件庫(ku)演示

Vant 是由(you)有贊發布的，輕量的小程序 UI 組(zu)件庫(ku)。如果你(ni)想(xiang)制作一款電商、餐飲、外賣平臺、票務預訂等購物類小程序，選用 Vant 是較為(wei)合適的。為(wei)什么這么說呢？

首(shou)先，我們來(lai)看(kan)(kan)「業(ye)務(wu)組件」這一塊。可(ke)(ke)(ke)以(yi)(yi)看(kan)(kan)到，「商品(pin)卡(ka)片」與「提交訂單欄」兩個組件可(ke)(ke)(ke)以(yi)(yi)構成一個基(ji)本的「購物車」頁(ye)面；而(er)「商品(pin)卡(ka)片」與「商品(pin)導(dao)航」二者又可(ke)(ke)(ke)以(yi)(yi)組成一個簡單的商店頁(ye)面。

我們(men)再看(kan)(kan)看(kan)(kan)其他瑣(suo)碎的(de)組(zu)件，比如(ru)「表單組(zu)件」中的(de)「評分」、「搜索」、「步(bu)進(jin)器」，都屬于購物(wu)類小程(cheng)序需(xu)要用到的(de)組(zu)件。

「導航(hang)組件」中(zhong)的「徽(hui)章」與「展示(shi)組件」中(zhong)的「分(fen)類選擇」，都可(ke)以用于商品品類的選擇切換。

「展示組(zu)件」中的「折疊面板(ban)」與「面板(ban)」可以用作詳細(xi)介紹商品的組(zu)件，「步驟(zou)條」則可以用于顯示物流跟(gen)蹤(zong)信息。

使用(yong)(yong) Vant 組(zu)件庫，除了(le)可以用(yong)(yong)常(chang)用(yong)(yong)的(de) Toast 方法，向用(yong)(yong)戶彈出提(ti)醒消息，還可以引用(yong)(yong)「反(fan)饋組(zu)件」中的(de)「消息通知」以及「展示(shi)組(zu)件」中的(de)「通告欄」，向用(yong)(yong)戶輸出通知信息。

除了以(yi)上(shang)可用(yong)于購物類小(xiao)程序的組(zu)(zu)件，Vant 組(zu)(zu)件庫當然(ran)還有那些比較(jiao)通用(yong)基(ji)本(ben)元素、彈出層(ceng)、Transition 動畫等。值得(de)一提的是，Vant 還支持自(zi)定義 Actionsheet，在「反饋組(zu)(zu)件」的「上(shang)拉菜單(dan)」中(zhong)，有三種(zhong)不同(tong)的自(zi)定義 Actionsheet。

Vant 對開發者非常友好(hao)，文檔(dang)可以(yi)(yi)說是事無巨細了，而(er)且在文檔(dang)右側，還可以(yi)(yi)預(yu)覽(lan)樣(yang)式(shi)哦。

開發文檔：#/intro

GitHub 地址(zhi)：

iViewUI

iViewUI 是由(you) TalkingData 發布的組(zu)件(jian)(jian)(jian)庫。作為一款好用的組(zu)件(jian)(jian)(jian)庫，布局、面板、列表、表單(dan)、頂部導(dao)(dao)航欄、底部導(dao)(dao)航欄等組(zu)件(jian)(jian)(jian)當然必不(bu)可少，那么 iViewUI 除了具(ju)備這些標配的組(zu)件(jian)(jian)(jian)，還有(you)哪些亮點(dian)呢？

在「導(dao)航」分類下，「分頁」、「索引選擇器(qi)」以及「吸頂容器(qi)」都是比較實(shi)用的組(zu)件。

其中(zhong)(zhong)(zhong)，「索(suo)(suo)引(yin)選擇(ze)器」與(yu)(yu) ColorUI 中(zhong)(zhong)(zhong)的「索(suo)(suo)引(yin)列(lie)表(biao)」是(shi)同(tong)類組件，不同(tong)的是(shi)，ColorUI 的「索(suo)(suo)引(yin)列(lie)表(biao)」中(zhong)(zhong)(zhong)每一(yi)項可以包(bao)含(han)(han)圖片、名(ming)字與(yu)(yu)描述，且(qie)支(zhi)持搜索(suo)(suo)，而 iViewUI 的「索(suo)(suo)引(yin)選擇(ze)器」中(zhong)(zhong)(zhong)每一(yi)項只包(bao)含(han)(han)名(ming)字，且(qie)不支(zhi)持搜索(suo)(suo)。

而(er)「吸(xi)頂容器」在上文中尚未提及，這一組件適合用于(yu)分級長列(lie)表的顯示(shi)。

在(zai)「視圖(tu)」分類下(xia)的「倒計時(shi)(shi)」一(yi)項中，提供了多種倒計時(shi)(shi)的顯示(shi)格式。

iViewUI 同樣有(you)詳(xiang)細的文檔，但是不支持網頁預覽，只能(neng)打開小程序預覽。

開發文檔：

GitHub 地址：

MinUI 組件庫

MinUI 是(shi)由蘑(mo)菇街發布的組件(jian)庫。與其他(ta)組件(jian)庫不同的是(shi)，MinUI 更注(zhu)重一些(xie)細節的處理。

調用「基礎(chu)元(yuan)件」中的(de)(de)「文本(ben)截(jie)斷(duan)」，可(ke)以控(kong)制(zhi)長文本(ben)的(de)(de)顯(xian)示行數，文本(ben)超長的(de)(de)用省略號(hao)結尾(wei)。「頁底(di)提示」可(ke)以用在(zai)上拉加(jia)載中的(de)(de)過(guo)程中。而「價格(ge)」則提供(gong)了各種樣式的(de)(de)價格(ge)及貨幣符號(hao)。

「功能(neng)組件」的「異(yi)常流展示」為(wei)開發(fa)者提(ti)供了各(ge)種異(yi)常狀態下(xia)，向用戶展示的界面。「遮罩層」則(ze)提(ti)供了各(ge)種效(xiao)果(guo)的遮罩層，及其顯示、隱藏方式。

相(xiang)比其他組(zu)件(jian)庫(ku)，MinUI 將各種組(zu)件(jian)拆(chai)分得(de)更細，真正(zheng)使用(yong)時，需要開(kai)發者更多的對各個組(zu)件(jian)進(jin)行再次結合，但也因(yin)此 MinUI 顯得(de)更加通用(yong)。

開發文檔(dang)：#README

GitHub 地址：

TaroUI

TaroUI 是由京東·凹凸實驗(yan)室發布的多端 UI 組件庫。這套(tao)組件庫，可以在 H5、微信小(xiao)程序(xu)、支(zhi)付寶小(xiao)程序(xu)、百度小(xiao)程序(xu)多端適配運行。TaroUI 的整體(ti)風格簡約、清新(xin)、統一(yi)，適合工具、讀書、資(zi)訊(xun)、教育(yu)、商務等(deng)類型的小(xiao)程序(xu)。

除了(le)擁有(you)上文所(suo)提及的組件之(zhi)外，TaroUI 還(huan)有(you)幾(ji)個特別的組件。在「表(biao)單」中有(you)一項「范(fan)圍選擇器(qi)」，可(ke)以通過(guo)滑動(dong)條指定(ding)數(shu)值范(fan)圍。在「高(gao)階組件」中，可(ke)以顯(xian)示「日歷」，并(bing)且支持多種日期(qi)選擇樣式。

TaroUI 同(tong)樣擁有健(jian)全的開發(fa)文檔，也支持在網頁中預覽手機效(xiao)果。

開發文(wen)檔：#/docs/introduction

GitHub 地(di)址：

WuxUI

最(zui)近知(zhi)曉君又發(fa)現了一套組(zu)(zu)件(jian)(jian)(jian)庫(ku)，由(you) skyvow (GitHub 賬號名) 發(fa)布的 Wux Weapp。這套組(zu)(zu)件(jian)(jian)(jian)庫(ku)所包含的組(zu)(zu)件(jian)(jian)(jian)最(zui)為豐(feng)富。不(bu)僅我(wo)們(men)前文提到的各類組(zu)(zu)件(jian)(jian)(jian)都可以在 Wux 中找到，而且還有進度環、骨架屏、篩選(xuan)(xuan)欄(lan)、數字鍵盤、結果頁(ye)等實(shi)用工具類組(zu)(zu)件(jian)(jian)(jian)。如果你想開發(fa)一款工具類小(xiao)程(cheng)序，Wux 是個不(bu)錯的選(xuan)(xuan)擇。

開發文(wen)檔：#/introduce

GitHub 地址(zhi)：

Lin UI

Lin UI 是由(you)林間(jian)有風團隊精(jing)心打造的(de)一套(tao)微信小程(cheng)(cheng)序(xu)組件(jian)庫，組件(jian)豐富、設計優(you)美，并(bing)且擁有完整的(de)商業案例，是您開發(fa)微信小程(cheng)(cheng)序(xu)的(de)不二選擇。

開發文檔：

GitHub 地址：

碼(ma)云 Gitee 鏈接：

這(zhe) 8 款 UI 組(zu)件(jian)庫各有所長，適(shi)合(he)(he)不同(tong)的小(xiao)程序類型(xing)，Vant 適(shi)合(he)(he)電商類的，TaroUI 與 Wux 適(shi)合(he)(he)工具類的，而(er)蘑菇街的 MinUI 當然更適(shi)合(he)(he)社(she)區類的了。

如果你還知(zhi)道更好用(yong)的組件庫，可(ke)以在留言板中跟大(da)家分享哦。