如果您也是小程序开发人员，那么当您打开漂亮的小程序时，您是否真的想知道“您使用的是哪个UI组件库？”

当前，Internet上有许多开源小程序组件库，但是选择太多了，这常常使人们感到困惑。相反，他们不知道哪一个适合他们。今天，Zhijun与您共享7个有用的组件库。如果您想开发小程序或正在开发小程序，则不妨看看并比较它们的长短和差异。

WeUI

WeUI是微信产生的官方组件库。它遵循微信的视觉设计和交互设计，并以简单大方的样式提供了各种本机组件的基本样式。选择这组组件库可以保持小程序和微信一致的界面样式。

官方组件库可以满足基本的界面要求，但是如果您想要更完整的视觉效果和更生动活泼的动态效果，恐怕WeUI将无法满足您的需求。

GitHub地址：

ColorUI组件库

ColorUI是由Wen Xiaogang发布的高价值组件库，致力于视觉交互。与WeUI的低调约束相比，ColorUI具有鲜艳的色彩和多种样式。除了具有非常丰富的本机组件自定义样式外，它还提供了一些常见的页面元素，例如时间轴，步骤栏，聊天页面，模式窗口等。

这些页面元素通常在什么情况下使用？

如果要制作小程序，例如日记，簿记，博客，Vlog，则需要使用“时间轴”。

如果您要进行与流程相关的小程序，例如物流跟踪，工作批准等，则“步骤栏”会派上用场。

如果您想参加社交课程小程序，那么您当然必须使用“聊天”界面。

“模式窗口”可以应用于弹出窗口和侧边栏出现的所有小程序。

此外，ColorUI还引入了插件扩展，它们是更复杂的组件。现有的扩展包括索引列表，微动画，全屏抽屉和垂直导航。通过引用这些扩展，您只需要编写少量代码即可实现令人眼花visual乱的视觉交互，从而进一步简化了开发工作。

我们之前已经提到ColorUI是一个专注于视觉交互的组件库。这方面的性能还在于它为用户提供了色彩匹配解决方案。打开“背景”，您可以看到各种颜色，例如深色，浅色和渐变色。

ColorUI也有很多建议。其中一个例子很多，它向用户详细显示了开发人员在各种情况下可能需要编写的样式。

例如，如果打开“肖像”，您将看到一个圆形化身，一个圆形的矩形化身，各种尺寸的化身，默认化身，文本化身，颜色化身，化身组，带标签的化身等。如此简单也可以用许多不同的方式呈现。

再举一个例子，当您打开“列表”时，不仅可以看到基本样式，例如网格列表，菜单列表，消息列表，左滑动列表等，还可以设置一些选项，例如边框，箭头等，并且细节中也有细节。多种可选样式。

ColorUI为您提供了高度可定制的组件，一些更麻烦的样式，开发人员只需要调用其组件即可实现。但是，ColorUI并不是万能药，例如，它还没有涉及购物类小程序所需的组件。

GitHub地址：

Vant组件库演示

Vant由轻量级小程序UI组件库Youzan发布。如果您想将购物类别设为电子商务，餐饮，外卖平台，机票预订等。小程序，Vant更适合。为什么这么说？

首先，让我们看一下“业务组件”。可以看出，“产品卡”和“提交订单栏”这两个组成部分可以构成一个基本的“购物车”页面；和“产品卡”和“产品导航”可以形成一个简单的商店页面。

让我们看一下其他琐碎的组件，例如“表单组件”中的“评分”，“搜索”和“步进”，它们全部属于购物类别小程序。

“导航组件”中的“徽章”和“显示组件”中的“类别选择”都可以用于选择和切换产品类别。

“显示组件”中的“折叠面板”和“面板”可用于详细介绍产品，“步骤栏”可用于显示物流跟踪信息。

使用Vant组件库，除了使用常用的Toast方法向用户弹出提醒消息外，还可以在“反馈组件”和“通知栏”中引用“消息通知” “显示组件”以向用户输出通知信息。

除了上述可用于购物的组件小程序外，Vant组件库当然还具有那些更常见的基本元素，弹出层，过渡动画等。值得一提的是，Vant也支持自定义操作表。在“反馈组件”的“上拉菜单”中，有三个不同的自定义操作表。

Vant对开发人员非常友好，可以说文档很好，并且在文档的右侧，您还可以预览样式。

开发文档：

GitHub地址：

iViewUI

iViewUI是TalkingData发布的组件库。作为易于使用的组件库，诸如布局，面板，列表，表单，顶部导航栏和底部导航栏之类的组件当然是必不可少的。那么，除了这些标准组件之外，iViewUI的重点是什么？

在“导航”类别下，“分页”，“索引选择器”和“天花板容器”都是有用的组件。

其中，ColorUI中的“索引选择器”和“索引列表”是相似的组件。区别在于ColorUI的“索引列表”中的每个项目都可以包含图片，名称和描述，并支持搜索，而iViewUI的“索引选择器”中的每个项目仅包含名称，不支持搜索。

上面没有提到“天花板容器”，该组件适用于显示分层的长列表。

在“查看”类别下的“倒数”项中，提供了多种倒数显示格式。

iViewUI也有详细的文档，但是它不支持网页预览，只能打开小程序预览。

开发文档：

GitHub地址：

MinUI组件库

MinUI是Mogujie发布的组件库。与其他组件库不同，MinUI更注重某些细节的处理。

在“基本组件”中调用“文本截断”以控制长文本的显示行数。如果文本太长，请以省略号结尾。 “底部提示”可用于上拉和加载过程。 “价格”提供了各种样式的价格和货币符号。

“功能组件”的“异常流程显示”为开发人员提供了一个界面，以在各种异常情况下向用户显示。 “遮罩层”提供了遮罩层的各种效果及其显示和隐藏方法。

与其他组件库相比，MinUI将各种组件拆分为更多细节。在实际使用时，开发人员需要重新组合每个组件，但是MinUI因此更具通用性。

开发文档：

GitHub地址：

TaroUI

TaroUI是JD·Bump Lab发布的多终端UI组件库。这组组件库可适合在H5、微信小程序，支付宝小程序和百度小程序上运行。 TaroUI的整体风格简单，新鲜且统一，适用于工具，阅读，信息，教育，商务和其他类型小程序。

除上述组件外，TaroUI还具有几个特殊组件。在“表单”中有一个“范围选择器”，它允许您通过滑块指定值的范围。在“高级组件”中，您可以显示“日历”，并支持各种日期选择样式。

TaroUI还具有完善的开发文档，还支持在网页上预览手机效果。

开发文档：

GitHub地址：

WuxUI

最近，我了解到Jun发现了一组组件库，由skyvow发布的Wux Weapp（GitHub帐户名）。这组组件库包含最丰富的组件。在Wux中不仅可以找到我们上面提到的各种组件，还可以找到实用程序组件，例如进度环，框架屏幕，过滤器栏，数字键盘和结果页。如果要开发工具类小程序，Wux是一个不错的选择。

开发文档：

GitHub地址：

这7个UI组件库具有各自的优势，适用于不同的小程序类型。 Vant适合电子商务，TaroUI和Wux适合工具，Mogujie的MinUI当然更适合社区。

如果您仍然知道更好的组件库，则可以在留言板上与您共享它。