导读：

首先，单从小程序UI的方面来讲，能与ColorUI比肩的框架着实是没几个了，它好在哪？

其一：组件精美，可以说每一个都制作精良，作者很用心，UI功底很扎实。

其二：封装性特别特别的好，每一个单独的class选择器，都是一个封装极好的css小组件，我们可以灵活的组装与变幻，下边我会详细讲一下它的css封装。

其三：感受到了作者的过人之处，迄今为止用过了好多UI框架。webUI框架，webAppUI框架以及小程序UI框架都有所尝试，这些框架所提供的组件的代码，相对而言都不是那么称心如意，因为有时候想在它们提供的组件上做一些微调，样式经常会被我搞得乱七八糟，但是colorUI就不一样，它的组件代码具有良好的兼容性，扩展性，我们可以在它的基础上进行灵活的修改，而不至于使其gg。

使用：

那么我们要如何去使用这个框架呢？尤其是在作者的文档还没出来之前？

下边开始介绍它的使用方法，我们从先从github上下载的它的文件：GitHub地址：https://github.com/weilanwl/ColorUI/

压缩有发现有三个文件夹：

Colorui-UniApp     

demo     template（这两个文件夹是可以直接部署在小程序上的，

第一个就是ColorUI的作者制作的ColorUI小程序的项目源码，我们可以将其导入到小程序开发工具中，查看每个组建的源码并且使用，第二个template是一个空白的小程序模板，作者已经将ColorUI的使用环境搭建好了，我们可以直接在上边开始我们自己的项目。）

下边就是这个demo，把它按照平常的步骤导入开发者工具：

说明：

这个小程序的功能不做太多讲解，看代码：

右侧有四个大文件夹，分别是custom-tab-bar、images、pages、和utils以及几个文件，custom-tab-bar就是小程序自己定义的导航栏，对自定义导航栏不理解的可以参考下：自定义tabBar。

简而言之：自定义样式就是、那么就必须在custom-tab-bar里边配置自己想要的window和tabBar样式，方法就是“windows”的“navigationStyle”属性改为“custom”，tabBar中的“custom”属性改为true，demo小程序的windows和tabBar都是使用的是自定义样式。

images和pages就不说了。

utils文件夹没用，.gitattributes也没用。

app.js 中主要写了作者为了自定义导航栏和tabBar所需要的全局变量，app.wxss中是对导航栏的css装饰。

colorui.wxss就是colorUI的css源码库，所有组件的css样式都是通过几个css的class  selector组合而成的。

icon.wxss是colorUI所提供的icon库，就是所有的小图标，注意icon都不是图片的形式，而是文本的形式。

使用：

我们如果想要引入不同的icon，直接凭借下边这行代码就可以：

<text class=\'icon-{{icon-name}} lg text-{{color}}\'></text>

这里解释一下ColorUI样式的灵活封装：

注意到class是由三个小selector组成：icon-iconName 、 lg、  text-color，第一个属性是“icon-”后边加上我们想要的icon名称，可以在小程序的图标界面查看所有icon及其名称，第二个属性加上之后，icon会变大，第三个是“icon-”后边加上我们想要的颜色，可以写red、yellow、orange、green等来单独确定icon的颜色（参数不能传入十六进制和rgb），当然，我们也可以给这个text标签加上一个id选择器，在css文件中覆盖它的大小和颜色。

Pages文件夹：index（小程序整体框架）about（对应关于选项卡）basics（对应元素选择卡）component（对于组件选择卡）plugin（对应扩展选择卡）。

这里边的文件夹也是和界面里的选项卡一一对应的。

图标选项卡：

点击图标选项卡，打开basics文件夹下icon文件夹的wxxml代码：

 这段代码是循环显示所有icon，如果想显示一种，要在if语句里加一个！item.isShow。

意思就是icon.js里isShow为false的icon显示。（只提供演示作用）

 如果要想在一个小程序项目中使用ColorUI也非常的简单，把colorui.wxss和icon.wxss粘贴到项目根路径下，然后在项目的app.wxss中加入两行代码即可：

@import "icon.wxss";
@import "colorui.wxss";

之后我们就能引用ColorUI提供给我们的CSS修饰了，只不过目前来说还有些小麻烦

 想使用哪个组件，就把哪个组件的代码copy下来再稍加修饰