colorUI框架使用教程

最近在帮别人做一个小程序，问起熟悉小程序的同伴们用什么UI框架比较好，在网上也又搜了一遍，感觉这个突然出现的ColorUI很有意思，也很精美，于是乎就试了一下，这里说一下自己初次使用所遇到的坑与感想：

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

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

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

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

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

下边开始介绍它的使用方法，我们从先从github上下载的它的文件：

GitHub地址：https://github.com/weilanwl/ColorUI/

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

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

下边我们来看看这个demo，把它按照平常的步骤导入开发者工具：

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

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

简言之，如果想自定义app.json中的"window"和"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文件夹：

其中四个文件夹分别对应四个tabBar选项卡，剩下的一个auth是小程序的微信授权界面。点开基础组件：

这里边的文件夹也是和：

界面里的选项卡一一对应的，点击图标选项卡，打开basics文件夹下icon文件夹的wxxml代码：

注意到：

它是通过for循环来将所有图标展示的，展示图标的代码，就是红线所画的，因此当我们想引用图标的时候，直接粘代码、该参数即可！其他组件同理。

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

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

之后我们就能引用ColorUI提供给我们的CSS修饰了，只不过目前来说还有些小麻烦，在正式文档出来之前，我们只能去参照作者给的demo演示小程序中的源码，想使用哪个组件，就把哪个组件的代码copy下来再稍加修饰。当然，这也是一种笨且有效的方法。当我们熟练地掌握Colorui中每个标签的class的组成及其含义之后（如上述所分析的那个引用icon的例子），我们就可以灵活地去运用它了，这也会极大地方便我们的开发过程。

好啦，今天和大家分享的就是这些，ColorUI的精彩之处，还请慢慢体验吧！

GitHub代码：

微信小程序github代码

Java后台SSH代码