假如你是一位小程序開發者,當你點開1個顏值高的小程序時,是否很想知道「這用的是哪一整套 UI 零部件庫」呢?
現階段,網站現有許多開源的小程序部件庫,但挑選過多往往令人挑花了眼,反倒不曉哪一款才合適自身。
今日,小編跟大家共享 7 款較為好使的部件庫,假如你要開發,或者正在開發小程序,不妨認識一下,比照他們之間的長短與不同點。
WeUI
WeUI 是微信官方出品的組件庫,它采用了微信的視覺設計與交互設計,提供了各種原生部件的基本款式,風格簡潔大方。
采用這一整套組件庫,能夠給你的小程序與微信本身保持一致的用戶界面。

官方組件庫能夠滿足基本的頁面需求,可是,如果你想要更為飽滿的視覺,更為歡快的動畫特效,恐怕 WeUI 就滿足不上你的需要了。
GitHub 地址:https://github.com/Tencent/weui
ColorUI 組件庫
ColorUI 是由文曉港公布的顏值爆表部件庫,偏重于視覺交互。
相比 WeUI 的不張揚抑制,ColorUI 顏色鮮艷,款式多種多樣。
除了有著比較豐富的原生組件的自定義款式,它還提供一些普遍的界面元素,例如時間軸、步驟條、聊天頁、模態對話框等等。

這些網頁元素一般應用在什么情景下呢?
如果你想干一款諸如日記類、做賬類、blog類、Vlog 類的小程序,此時就必須使用「時間軸」。
如果你想要一款牽涉步驟的小程序,例如物流追蹤,工作審核等,「流程條」就能夠派上用場了。
如果你想要一款人際交往類小程序,那樣,當然少不得要使用「聊天」的頁面。
而「模態窗口」則能夠應用于各種小程序中跳出彈框、側邊欄的地點。

除此之外,ColorUI 還加入了插件拓展,也就是更加繁雜的組件。
現階段已經的擴充包含索引列表、微動畫、全屏抽屜以及垂直導航。
插入這幾類擴充,只需編輯少許代碼,就能實現較炫的視覺互動,更加簡單化了設計規劃工作。

前邊我們早已提及,ColorUI 是偏重于視覺交互的部件庫,這方面的表現,還取決于它為客戶提供了色調搭配方案。
開啟「背景」,可以看到深色、淺色、漸變等多種顏色搭配。

ColorUI 也有很多值得推薦的地方。
多元化的實例也是其中之一,它詳細地向客戶展現了各類狀況下,開發人員可能必須編輯的款式。
例如,點開「頭像」,就會見到被一一列舉的圓形頭像、圓角矩形頭像、各類大小頭像、默認頭像、文字頭像、彩色頭像、頭像組、貼上標簽頭像這些。
1個這么簡單的組件,還可以有許許多多不一樣的展現形式。
又例如,點開「列表」,不但可以看到宮格列表、菜單目錄、信息列表、左滑列表等基本的式樣,還可以設定一些勾選框,像邊框、箭頭等,在細節處也有各種供選擇式樣。
 
ColorUI 給大伙兒提供了高度自定義的部件,許多較為繁瑣的款式,開發人員只需調用其組件就能從而構建。
不過,ColorUI 也不是全能的,例如,它并未牽涉購物類小程序需要的部件。
GitHub 地址:https://github.com/weilanwl/ColorUI

Vant 部件庫演示
Vant 是由有贊公布的,輕量的小程序 UI 組件庫。
假如你要自制一款電子商務、飲食業、外賣app、訂票網訂購等購物類小程序,采用 Vant 是比較適合的。
為何那么說呢?


最先,我們來看「業務組件」這一塊。
可以看到,「商品卡片」與「提交訂單欄」2個組件能夠組成1個基本的「購物車」網頁;而「商品卡片」與「商品導航」兩者又能夠構成1個簡易的商城界面。

我們再看一下別的零碎的部件,例如「表單組件」中的「評分」、「搜索」、「步進器」,都是指購物類小程序必須采用的組件。

「導航組件」中的「徽章」與「展示組件」中的「分類選擇」,能夠用作貨品類目的挑選轉換。

「展示組件」中的「折疊面板」與「面板」能夠作為詳解產品的組件,「步驟條」則能夠用以顯示物流追蹤消息。

采用 Vant 組件庫,除了能夠用常見的 Toast 辦法,向客戶跳出提示信息,還可以引證「反饋組件」中的「消息通知」及其「展示組件」中的「通告欄」,向客戶輸出通知消息。

除了以上可用作購物類小程序的部件,Vant 組件庫當然還有那些較為常用基礎元素、彈出層、Transition 卡通片等。
值得一提的是,Vant 還支持自定義 Actionsheet,在「反饋組件」的「上拉菜單」中,有三種不一樣的自定義 Actionsheet。

Vant 對開發人員十分友善,文檔能夠說成事無巨細了,并且在word表格右邊,還可以預覽式樣哦。
開發文檔: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 當然更合適小區類的了。
假如你還了解更強用的組件庫,可以在留言板中跟大伙兒共享哦。
 
通比牛牛手机版