#下载应用#
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库
- 自定义 首页