小程序——colorUI库初识

桃扇骨 2021-07-25 21:26 495阅读 0赞

## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70] ##

QQ 1285575001  
Wechat M010527  
技术交流 QQ群599020441  
纪年科技aming

--------------------

##### \#下载应用\# #####

[ColorUI 地址][ColorUI]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 1]

*  下载 解压后 一共三个文件夹

1.  第一个 ColorUI 的项目源码![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 2]
2.  第二个/第三个 文件夹都 可以直接部署在小程序开发工具上的项目  
    我们可以将其导入到小程序开发工具中，查看每个组件的源码并且使用
3.  第二个 demo 是一个空白的小程序模板，作者已经将ColorUI的使用环境搭建好了  
    我们可以直接在上边开始我们自己的项目。
4.  第三个 形如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 3]

*  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文件中覆盖它的大小和颜色。

![在这里插入图片描述][20191126192227202.png]![在这里插入图片描述][20191126192251797.png]

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

--------------------

##### ￥ 自定义导航栏 ￥ #####

*  方法就是“windows”的“navigationStyle”属性改为“custom”
 *  tabBar中的“custom”属性改为true，
 *  demo小程序的windows和tabBar都是使用的是自定义样式![在这里插入图片描述][20191126191510819.png]
 *  引入 css库  
    ![在这里插入图片描述][2019112619153126.png]

![在这里插入图片描述][20191126190745140.png]  
![在这里插入图片描述][20191126190751140.png]  
![在这里插入图片描述][20191126190707440.png]![在这里插入图片描述][20191126190728323.png]![在这里插入图片描述][20191126190822451.png]![在这里插入图片描述][20191126190849365.png]![在这里插入图片描述][20191126190906429.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 4]

*  自定义 首页  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]: /images/20210725/5a8496cf46424cce953b50bfff6b0566.png
[ColorUI]: https://www.color-ui.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 1]: /images/20210725/4a95c461ef7344089461ad3fa0620d99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 2]: /images/20210725/de06608d657e45888fef54b1b03ec464.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 3]: /images/20210725/dbb0eb2da0914f5d885f55048fb8a624.png
[20191126192227202.png]: https://img-blog.csdnimg.cn/20191126192227202.png
[20191126192251797.png]: /images/20210725/948b205f295f4a7facfb1d7db4566b1a.png
[20191126191510819.png]: /images/20210725/a90870c4b9b04a4b8c7588c20c2dbac8.png
[2019112619153126.png]: /images/20210725/0814198649ad4e9e96fd5b6de615563b.png
[20191126190745140.png]: /images/20210725/041e86afdde24e92bb0a0fb5d94c0ecb.png
[20191126190751140.png]: /images/20210725/03bdfef0fad34ca9b1fac9dd139e0b4d.png
[20191126190707440.png]: https://img-blog.csdnimg.cn/20191126190707440.png
[20191126190728323.png]: https://img-blog.csdnimg.cn/20191126190728323.png
[20191126190822451.png]: https://img-blog.csdnimg.cn/20191126190822451.png
[20191126190849365.png]: https://img-blog.csdnimg.cn/20191126190849365.png
[20191126190906429.png]: https://img-blog.csdnimg.cn/20191126190906429.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 4]: /images/20210725/95399a3c5cf147d08e0b37a684735cf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 5]: /images/20210725/5a4999d01e014c29909e270d7317ae5d.png