小程序——colorUI库初识_前端


#下载应用#

ColorUI 地址
小程序——colorUI库初识_前端_02

  • 下载 解压后 一共三个文件夹
  1. 第一个 ColorUI 的项目源码小程序——colorUI库初识_前端_03
  2. 第二个/第三个 文件夹都 可以直接部署在小程序开发工具上的项目
    我们可以将其导入到小程序开发工具中,查看每个组件的源码并且使用
  3. 第二个 demo 是一个空白的小程序模板,作者已经将ColorUI的使用环境搭建好了
    我们可以直接在上边开始我们自己的项目。
  4. 第三个 形如下图

小程序——colorUI库初识_前端_04

  • app.js 中主要写了作者为了自定义导航栏和tabBar所需要的全局变量
  • app.wxss中是对导航栏的css装饰
  • colorui.wxss就是colorUI的css源码库
    所有组件的css样式都是通过几个css的class selector组合而成的
  • icon.wxss是colorUI所提供的icon库,就是所有的小图标
    注意icon都不是图片的形式,而是文本的形式
  1. 我们如果想要引入不同的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文件中覆盖它的大小和颜色。

小程序——colorUI库初识_前端_05小程序——colorUI库初识_前端_06

  • 其中四个文件夹分别对应四个tabBar选项卡,剩下的一个auth是小程序的微信授权界面

¥ 自定义导航栏 ¥
  • 方法就是“windows”的“navigationStyle”属性改为“custom”
  • tabBar中的“custom”属性改为true,
  • demo小程序的windows和tabBar都是使用的是自定义样式小程序——colorUI库初识_前端_07
  • 引入 css库
    小程序——colorUI库初识_前端_08

小程序——colorUI库初识_前端_09
小程序——colorUI库初识_前端_10
小程序——colorUI库初识_前端_11小程序——colorUI库初识_前端_12小程序——colorUI库初识_前端_13小程序——colorUI库初识_前端_14小程序——colorUI库初识_前端_15小程序——colorUI库初识_前端_16

  • 自定义 首页
    小程序——colorUI库初识_前端_17