colorUI使用
一、colorUI简介
官网地址—还在完善
colorUI特点：
- 组件精美，色彩十分鲜艳
- 封装特特特特别的好，每一个样式都是单独的class选择器，都是封装极好的css小组件
- 兼容性，扩展性极好。亲测在vant weep组件上可以完美使用，并且对于微信原生组件的支持很好。
二、使用方法
-
下载
GIthub地址：https://blog.csdn.net/IT_TIfarmer/article/details/88380308，下载后得到一个压缩包，解压后得到：
这两个文件夹都是可以直接部署在小程序开发工具上的项目，第一个就是ColorUI的作者制作的ColorUI小程序的项目源码；第二个template是一个空白的小程序模板，作者已经将ColorUI的使用环境搭建好了，我们可以直接在上边开始我们自己的项目。
-
使用
由于目前开发指南还没有完善，此处仅介绍我的使用方法。
使用前预准备：
把colorui.wxss和icon.wxss粘贴到项目根路径下，然后在项目的app.wxss中加入两行代码即可：
@import "icon.wxss"; @import "colorui.wxss";第一步：使用微信扫描下面的二维码，打开小程序
打开后如下：
第二步：打开下载压缩包的demo文件夹，此处使用的是vscode。
文件解释：
colorui文件夹：colorui.wxss就是colorUI的css源码库，在使用前需要导入到自己的微信小程序中。
所有组件的css样式都是通过几个css的class selector组合而成的。
icon.wxss是colorUI所提供的icon库，就是所有的小图标，注意icon都不是图片的形式，而是文本的形式，我们如果想要引入不同的icon，直接凭借下边这行代码就可以：
<text class='icon-{{icon-name}} lg text-{{color}}'></text>之后我们就能引用ColorUI提供给我们的CSS修饰了
这里引用请保持优秀对于ColorUI样式的灵活封装的解释：
注意到class是由三个小selector组成：icon-iconName 、 lg、 text-color，
第一个属性是“icon-”后边加上我们想要的icon名称，可以在小程序的图标界面查看所有icon及其名称
第二个属性加上之后，icon会变大
第三个是“icon-”后边加上我们想要的颜色，可以写red、yellow、orange、green等来单独确定icon的颜色（参数不能传入十六进制和rgb
当然，我们也可以给这个text标签加上一个id选择器，在css文件中覆盖它的大小和颜色。
ps：该组件中的所有的颜色代码可以在main.wxss和app.js中找到。
page文件夹：包含所有的页面，其下级文件夹中除了
utils文件夹没用，.gitattributes也没用
app.js 中主要写了作者为了自定义导航栏和tabBar所需要的全局变量
app.wxss中是对导航栏的css装饰
第三步：可以注意到，page文件夹下处了auth是小程序的微信授权界，剩下四个文件夹与微信的四个页面一一对应。
点开第一个basics页面文件夹
与basics页面对应
打开每一个组件的页面，寻找到自己想要的格式及组件，让后在vscode中找到对应代码的class选择器，加入自己的代码中。
目前来说还有些小麻烦，在正式文档出来之前，我们只能去参照作者给的demo演示小程序中的源码，想使用哪个组件，就把哪个组件的代码copy下来再稍加修饰。当然，这也是一种笨且有效的方法。
