#下载应用#
ColorUI 地址
- 下载 解压后 一共三个文件夹
- 第一个 ColorUI 的项目源码
- 第二个/第三个 文件夹都 可以直接部署在小程序开发工具上的项目
我们可以将其导入到小程序开发工具中，查看每个组件的源码并且使用 - 第二个 demo 是一个空白的小程序模板，作者已经将ColorUI的使用环境搭建好了
我们可以直接在上边开始我们自己的项目。 - 第三个 形如下图
- 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文件中覆盖它的大小和颜色。
- 其中四个文件夹分别对应四个tabBar选项卡，剩下的一个auth是小程序的微信授权界面
￥ 自定义导航栏 ￥
- 方法就是“windows”的“navigationStyle”属性改为“custom”
- tabBar中的“custom”属性改为true，
- demo小程序的windows和tabBar都是使用的是自定义样式
- 引入 css库
- 自定义 首页
