colorUI使用

一、colorUI简介

官网地址—还在完善

colorUI特点：

1. 组件精美，色彩十分鲜艳
2. 封装特特特特别的好，每一个样式都是单独的class选择器，都是封装极好的css小组件
3. 兼容性，扩展性极好。亲测在vant weep组件上可以完美使用，并且对于微信原生组件的支持很好。

二、使用方法

1. 下载

   GIthub地址：https://blog.csdn.net/IT_TIfarmer/article/details/88380308，下载后得到一个压缩包，解压后得到：
   

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

2. 使用

   由于目前开发指南还没有完善，此处仅介绍我的使用方法。

   使用前预准备：

   把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下来再稍加修饰。当然，这也是一种笨且有效的方法。