跟大家分享 7 款比較好用的組件庫(kù)甩牺，如果你想開(kāi)發(fā)蘑志，或是正在開(kāi)發(fā)小程序，不妨了解一下贬派，對(duì)比它們之間的長(zhǎng)短與異同急但。
WeUI
WeUI 是微信官方出品的組件庫(kù)，它沿用了微信的視覺(jué)設(shè)計(jì)與交互設(shè)計(jì)赠群，提供了各類原生組件的基礎(chǔ)樣式羊始，風(fēng)格簡(jiǎn)約大方。選用這一套組件庫(kù)查描，可以讓你的小程序與微信本身保持一致的界面風(fēng)格突委。
官方組件庫(kù)能夠滿足基礎(chǔ)的界面需求，但是冬三，如果你想要更加飽滿的視覺(jué)匀油，更加活潑的動(dòng)效，恐怕 WeUI 就滿足不了你的需要了勾笆。
GitHub 地址：https://github.com/Tencent/weui
ColorUI 組件庫(kù)
ColorUI 是由文曉港發(fā)布的高顏值組件庫(kù)敌蚜，側(cè)重于視覺(jué)交互。比起 WeUI 的低調(diào)克制窝爪，ColorUI 色彩鮮亮弛车，樣式繁多齐媒。除了擁有非常豐富的原生組件的自定義樣式，它還提供一些常見(jiàn)的頁(yè)面元素纷跛，比如時(shí)間軸让腹、步驟條赦拘、聊天頁(yè)庶诡、模態(tài)窗口等等响逢。
這些頁(yè)面元素通常應(yīng)用在哪些場(chǎng)景下呢？
如果你想做一款諸如日記類唤崭、記賬類拷恨、博客類、Vlog 類的小程序谢肾，這時(shí)就需要用到「時(shí)間軸」腕侄。
如果你想做一款涉及流程的小程序，比如物流跟蹤勒叠，工作審批等兜挨，「步驟條」就可以派上用場(chǎng)了膏孟。
如果你想做一款社交類小程序眯分，那么，當(dāng)然少不得要用到「聊天」的界面柒桑。
而「模態(tài)窗口」則可以應(yīng)用于各類小程序中出現(xiàn)彈框弊决、側(cè)邊欄的地方。
此外魁淳，ColorUI 還引入了插件擴(kuò)展飘诗，也就是更為復(fù)雜的組件。目前已有的擴(kuò)展包括索引列表界逛、微動(dòng)畫(huà)昆稿、全屏抽屜以及垂直導(dǎo)航。引用這幾項(xiàng)擴(kuò)展息拜，只需編寫(xiě)少量代碼溉潭，就能實(shí)現(xiàn)較炫的視覺(jué)交互，進(jìn)一步簡(jiǎn)化了開(kāi)發(fā)工作少欺。
前面我們已經(jīng)提到喳瓣，ColorUI 是側(cè)重于視覺(jué)交互的組件庫(kù)，這方面的表現(xiàn)赞别，還在于它為用戶提供了色彩的搭配方案畏陕。打開(kāi)「背景」，可以看到深色仿滔、淡色惠毁、漸變等多種配色犹芹。
ColorUI 還有許多值得推薦的地方。多樣化的示例就是其中之一鞠绰，它詳盡地向用戶展示了各種情況下羽莺，開(kāi)發(fā)者可能需要編寫(xiě)的樣式。
比如洞豁，打開(kāi)「頭像」盐固，就會(huì)看到被一一列舉的圓形頭像、圓角矩形頭像丈挟、各種尺寸頭像刁卜、默認(rèn)頭像、文字頭像曙咽、彩色頭像蛔趴、頭像組、貼標(biāo)簽頭像等等例朱。一個(gè)這么簡(jiǎn)單的組件孝情，也可以有許多種不同的呈現(xiàn)方式。
又比如洒嗤，打開(kāi)「列表」箫荡，不僅可以看到宮格列表、菜單列表渔隶、消息列表羔挡、左滑列表等基本的樣式，還可以設(shè)置一些可選項(xiàng)间唉，像邊框绞灼、箭頭等，在細(xì)節(jié)處也有多種可選樣式呈野。
ColorUI 給大家提供了高度自定義的組件低矮，一些比較麻煩的樣式，開(kāi)發(fā)者只需調(diào)用其組件就能得以實(shí)現(xiàn)被冒。不過(guò)军掂，ColorUI 也不是萬(wàn)能的，比如姆打，它尚未涉及購(gòu)物類小程序所需的組件良姆。
GitHub 地址：https://github.com/weilanwl/ColorUI
Vant 組件庫(kù)演示
Vant 是由有贊發(fā)布的，輕量的小程序 UI 組件庫(kù)幔戏。如果你想制作一款電商玛追、餐飲、外賣平臺(tái)、票務(wù)預(yù)訂等購(gòu)物類小程序痊剖，選用 Vant 是較為合適的韩玩。為什么這么說(shuō)呢？
首先陆馁，我們來(lái)看「業(yè)務(wù)組件」這一塊找颓。可以看到叮贩，「商品卡片」與「提交訂單欄」兩個(gè)組件可以構(gòu)成一個(gè)基本的「購(gòu)物車」頁(yè)面击狮；而「商品卡片」與「商品導(dǎo)航」二者又可以組成一個(gè)簡(jiǎn)單的商店頁(yè)面。
我們?cè)倏纯雌渌嵥榈慕M件益老，比如「表單組件」中的「評(píng)分」彪蓬、「搜索」、「步進(jìn)器」捺萌，都屬于購(gòu)物類小程序需要用到的組件档冬。
「導(dǎo)航組件」中的「徽章」與「展示組件」中的「分類選擇」，都可以用于商品品類的選擇切換桃纯。
「展示組件」中的「折疊面板」與「面板」可以用作詳細(xì)介紹商品的組件酷誓，「步驟條」則可以用于顯示物流跟蹤信息。
使用 Vant 組件庫(kù)态坦，除了可以用常用的 Toast 方法盐数，向用戶彈出提醒消息，還可以引用「反饋組件」中的「消息通知」以及「展示組件」中的「通告欄」驮配，向用戶輸出通知信息娘扩。
除了以上可用于購(gòu)物類小程序的組件着茸，Vant 組件庫(kù)當(dāng)然還有那些比較通用基本元素壮锻、彈出層、Transition 動(dòng)畫(huà)等涮阔。值得一提的是猜绣，Vant 還支持自定義 Actionsheet，在「反饋組件」的「上拉菜單」中敬特，有三種不同的自定義 Actionsheet掰邢。
Vant 對(duì)開(kāi)發(fā)者非常友好，文檔可以說(shuō)是事無(wú)巨細(xì)了伟阔，而且在文檔右側(cè)辣之，還可以預(yù)覽樣式哦。
開(kāi)發(fā)文檔：https://youzan.github.io/vant-weapp/#/intro
GitHub 地址：https://github.com/youzan/vant-weapp
iViewUI
iViewUI 是由 TalkingData 發(fā)布的組件庫(kù)皱炉。作為一款好用的組件庫(kù)怀估，布局、面板、列表多搀、表單歧蕉、頂部導(dǎo)航欄、底部導(dǎo)航欄等組件當(dāng)然必不可少康铭，那么 iViewUI 除了具備這些標(biāo)配的組件惯退，還有哪些亮點(diǎn)呢？
在「導(dǎo)航」分類下从藤，「分頁(yè)」催跪、「索引選擇器」以及「吸頂容器」都是比較實(shí)用的組件。
其中夷野，「索引選擇器」與 ColorUI 中的「索引列表」是同類組件叠荠，不同的是，ColorUI 的「索引列表」中每一項(xiàng)可以包含圖片扫责、名字與描述榛鼎，且支持搜索，而 iViewUI 的「索引選擇器」中每一項(xiàng)只包含名字鳖孤，且不支持搜索者娱。
而「吸頂容器」在上文中尚未提及，這一組件適合用于分級(jí)長(zhǎng)列表的顯示苏揣。
在「視圖」分類下的「倒計(jì)時(shí)」一項(xiàng)中黄鳍，提供了多種倒計(jì)時(shí)的顯示格式。
iViewUI 同樣有詳細(xì)的文檔平匈，但是不支持網(wǎng)頁(yè)預(yù)覽框沟，只能打開(kāi)小程序預(yù)覽。
開(kāi)發(fā)文檔：https://weapp.iviewui.com/docs/guide/start
GitHub 地址：https://github.com/TalkingData/iview-weapp
MinUI 組件庫(kù)
MinUI 是由蘑菇街發(fā)布的組件庫(kù)增炭。與其他組件庫(kù)不同的是忍燥，MinUI 更注重一些細(xì)節(jié)的處理。
調(diào)用「基礎(chǔ)元件」中的「文本截?cái)唷瓜蹲耍梢钥刂崎L(zhǎng)文本的顯示行數(shù)梅垄，文本超長(zhǎng)的用省略號(hào)結(jié)尾∈溏瑁「頁(yè)底提示」可以用在上拉加載中的過(guò)程中队丝。而「價(jià)格」則提供了各種樣式的價(jià)格及貨幣符號(hào)。
「功能組件」的「異常流展示」為開(kāi)發(fā)者提供了各種異常狀態(tài)下欲鹏，向用戶展示的界面机久。「遮罩層」則提供了各種效果的遮罩層赔嚎，及其顯示膘盖、隱藏方式。
相比其他組件庫(kù)，MinUI 將各種組件拆分得更細(xì)衔憨，真正使用時(shí)叶圃，需要開(kāi)發(fā)者更多的對(duì)各個(gè)組件進(jìn)行再次結(jié)合，但也因此 MinUI 顯得更加通用践图。
開(kāi)發(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 組件庫(kù)掺冠。這套組件庫(kù)，可以在 H5码党、微信小程序德崭、支付寶小程序、百度小程序多端適配運(yùn)行揖盘。TaroUI 的整體風(fēng)格簡(jiǎn)約眉厨、清新、統(tǒng)一兽狭，適合工具憾股、讀書(shū)、資訊箕慧、教育服球、商務(wù)等類型的小程序。
除了擁有上文所提及的組件之外颠焦，TaroUI 還有幾個(gè)特別的組件斩熊。在「表單」中有一項(xiàng)「范圍選擇器」，可以通過(guò)滑動(dòng)條指定數(shù)值范圍伐庭。在「高階組件」中粉渠，可以顯示「日歷」，并且支持多種日期選擇樣式圾另。
TaroUI 同樣擁有健全的開(kāi)發(fā)文檔霸株，也支持在網(wǎng)頁(yè)中預(yù)覽手機(jī)效果。
開(kāi)發(fā)文檔：https://taro-ui.aotu.io/#/docs/introduction
GitHub 地址：https://github.com/NervJS/taro-ui
WuxUI
由 skyvow (GitHub 賬號(hào)名) 發(fā)布的 Wux Weapp盯捌。這套組件庫(kù)所包含的組件最為豐富淳衙。不僅我們前文提到的各類組件都可以在 Wux 中找到，而且還有進(jìn)度環(huán)饺著、骨架屏、篩選欄肠牲、數(shù)字鍵盤(pán)幼衰、結(jié)果頁(yè)等實(shí)用工具類組件。如果你想開(kāi)發(fā)一款工具類小程序缀雳，Wux 是個(gè)不錯(cuò)的選擇渡嚣。
開(kāi)發(fā)文檔：https://wux-weapp.github.io/wux-weapp-docs/#/introduce
GitHub 地址：https://github.com/wux-weapp/wux-weapp/
這 7 款 UI 組件庫(kù)各有所長(zhǎng)，適合不同的小程序類型，Vant 適合電商類的识椰，TaroUI 與 Wux 適合工具類的绝葡，而蘑菇街的 MinUI 當(dāng)然更適合社區(qū)類的了。
如果你還知道更好用的組件庫(kù)腹鹉，可以在留言板中跟大家分享哦藏畅。
