【微信技术-微信小程序】------ 使用ColorUI组件简单入门_微信小程序colorui

提示：使用colorui组件在微信小程序使用 必须先懂得微信开发工具的使用。

---

前言

如何通过微信开发工具使用ColorUI组件

---

一、ColorUI是什么？

ColorUI是一个Css类的UI组件库！在你引入样式后可以根据class来调用组件 ,不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互/

二、使用步骤

1.下载ColorUI组件文件

下载地址：
https://github.com/weilanwl/ColorUI

下载的Colorui组件文件如下：

1. 使用UniApp开发：
   对应上面图片中的文件名为：Colorui-UniApp;
   
2. 使用微信开发工具作为开发组件：
   对应上面图片的文件名为：template;
   
3. 使用微信开发工具打开Colorui组件示例：
   对应上面图片的文件名为：demo; 
   	
1
2
3
4
5
6
7
8
9

提示：如果在微信开发工具的项目已经存在了，想在引用Colorui组件只要引用： 上面图片的template文件下的：colorui文件即可。

2.微信开发工具项目引用colorui组件

**温馨提示：将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱**。

2.1 操作方式一 如下（示例）：前提是项目已经存在，想在引用colorui组件

1.打开微信开发工具的已经存在的项目：

2.引用colorui组件：把template文件下的colorui文件拷贝在项目的test下：


3.colorui配置：如下

1. app.wss文件中引用css：

/**app.wxss**/
@import "./colorui/main.wxss";/*引入colorui组件*/
@import "./colorui/icon.wxss";/*引入colorui组件*/
1
2
3

2. app.json文件中配置绑定组件：

 "usingComponents": {
    "cu-custom": "/colorui/components/cu-custom"
  }
1
2
3

3. 最后展展示效果：

2.2 操作二 方式如下（示例）：前提是项目还没开始，使用colorui组件

1. 把template文件拷贝至微信开发工具的项目文件目录下：如下图：然后可以起自己的项目名称即可：
   

2. 使用微信开发工具导入template文件：
   

3. 不要在配置其他就可以使用 最后效果如下：
   

---

总结

提示：如有不明白问我