如何高效开发小程序？来看看推荐使用的十大UI组件

一、组件库

1.什么是组件库？

组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，將这些组件整理在一起，便形成组件库。

2. 小程序发展背景

自Dcloud于2012年提出开发应用小程序，具有快捷轻便的特点，受到广大公司的青睐。接下来，于2013年微信小程序诞生。后面大家都知道，支付宝、百度、头条、360等各大公司都看上了这一大块蛋糕，相继开发出各自平台的小程序。虽然发展了很多年，行业标准和技术也在一定程度上有所提高。但值得一提的是Dcloud公司旗下产品uni-app，它的特点就在于开发一次，多端使用，为广大开发者提供了极大的便利！
自2012年开始小程序诞生，可经历了这么多年，小程序的开发和应用依旧非常火爆。于是，优秀的组件库便应运而生。
好了，废话不多说，接下来讲讲十大优秀的组件库

二、优秀的组件库

2.1 ColorUI

官网地址：https://www.color-ui.com/
Github地址：https://github.com/weilanwl/ColorUI/

ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！

2.2 Thor UI

官网地址：http://www.donarui.com/
Github地址：https://github.com/dingyong0214/ThorUI

Thor UI秉承简洁至上原则进行开发，提供了高质量高颜值的组件库和模板库。

2.3 Vant

官网地址：https://youzan.github.io/vant/#/zh-CN/
Github地址：https://github.com/youzan/vant

vant是一款轻量、可靠的移动端 Vue 组件库。
特性：

• 组件都是来源于有赞的微商城业务，并且经过有赞业务的检验，更靠谱
• 完善详实的 中文文档
• 专门的设计师团队维护视觉规范，统一而优雅
• 支持 babel-plugin-import
• 单测覆盖率超过90%

2.4 Taro UI

官网地址：http://taro-ui.jd.com/#/
Github地址：https://github.com/NervJS/taro-ui

一套基于 Taro 框架开发的多端 UI 组件库。
特性：

• 多端适配、组件丰富、按需引用、多套主题。

2.5 iview UI

官网地址：https://www.iviewui.com/
Github地址：https://github.com/view-design/ViewUI

一套基于 Vue.js 的高质量UI 组件库。
特性：

• 丰富的组件和功能，满足绝大部分网站场景
• 提供开箱即用的 Admin 系统 和 高阶组件库，极大程度节省开发成本
• 提供专业、优质的一对一技术支持
• 友好的 API ，自由灵活地使用空间
• 细致、漂亮的 UI
• 事无巨细的文档
• 可自定义主

2.6 Lin UI

官网地址：http://doc.mini.7yue.pro/
Github地址：https://github.com/TaleLin/lin-ui

特性：

• 简单易用
• 规范统一
• 文档丰富
• 扩展性强
• 支持第三方库框架

2.7 uview UI

官网地址：http://uviewui.com/

多平台快速开发的UI框架
uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。

2.8 Wux Weapp

官网地址：https://wux-weapp.github.io/wux-weapp-docs/#/
Github地址：https://github.com/wux-weapp/wux-weapp/

特性：

• 组件化
• 可复用
• 易扩展

2.9 MinUI

官网地址：https://meili.github.io/min/docs/minui/
Github地址：https://github.com/meili/minui

2.10 TouchUI

Github地址：https://github.com/uileader/touchwx

三、最后

在疫情期间，基于学习以上的开源组件，我也开发了一款配合校心理活动的小程序，主要是针对学生情绪和心理的调查。
目前有很多功能未完善，后续会继续更新！！！