ColorUI组件库快速入门

ColorUI组件库快速入门

什么是ColorUI组件库

image

ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！

UI效果视觉上看着在众多框架中脱颖而出

上手colorui

说明：我们下载的colorui文件就是一个微信小程序 没有官方文档，小程序demo就文档，要什么就去复制他的源码就可以了。

下载colorui “安装”colorui

1.下载colorui

GitHub地址：https://github.com/weilanwl/ColorUI/

在线文档(编写中)：https://www.color-ui.com/

2.文件结构分析

image

3.使用小程序打开demo

image

4.好了现在可肆无忌惮的摸索了

image

自己项目导入ColorUI

1.先去寻找之前demo文件中的colorui的文件

image

2.colorui的文件复制到自己的项目的更目录中

image

3.引入css文件

在app中引入colorUI的样式在app.wxss中加上就完成了它的样式引用。

@import "colorui/main.wxss";

@import "colorui/icon.wxss";

image

4.找到你想要的组件的代码直接复制进入自己的页面中去。

骚操作：

1.如何快速找到组件对应的文件？

打开自己需要的组件页面

点击下方页面路径

小程序会自动跳转到组件对应的js文件

image

问题

为什么已经把wxml对应的代码复制过来了，但组件不能正常操作？

因为有些组件不只 wxml 中的代码，还需要js文件的支持

例如下面的组价中含有大量的{{ }}

{{ }}中的变量需要从对应的js文件中引入

image

比如我们缺少swiperList我们就去js文件中吧swiperList复制到自己的js文件中去。

image