项目初始化请参照：使用ColorUI构建小程序项目_LookOutThe的博客-CSDN博客
目录
一、开发准备工作
1.在前端开发工具中打开下载好的demo目录
2.浏览器打开demo
3.微信开发工具打开上一篇构建好的项目
二、开始使用
1.找需要使用的组件
2.复制我们要使用的那段代码到我们小程序项目中。
三、总结
一、开发准备工作
1.在前端开发工具中打开下载好的demo目录
我使用的是HBuilderX，该步骤是为了复制我们需要的代码
2.浏览器打开demo
官方demo：（ColorUI组件库 ） 该步骤是为了找我们要用的组件
2.小程序打开demo
官方网页demo没了，用小程序看也可以：该步骤是为了找我们要用的组件
3.微信开发工具打开上一篇构建好的项目
我用的是自己的项目，也就是采用的是从现有项目开始。
二、开始使用
1.找需要使用的组件
1.1从浏览器打开的demo中查找需要使用的demo，比如我们需要使用一个进度条
1.2可以看到是在basics下的Process模块，点击去后如下图：
1.3 比如我们要使用第一个，那么在HBuilderX中打开的demo中查找：
所有组件都在pages下，浏览器找的是basics下的Process模块。
那么就在basic目录下的progress目录中打开.wxml文件。
2.复制我们要使用的那段代码到我们小程序项目中。
赋代码：
<view class="padding bg-white"><view class="cu-progress"><view class="bg-red" style="width:{{loading?'61.8%':''}};">61.8%</view></view><view class="cu-progress radius margin-top"><view class="bg-red" style="width:{{loading?'61.8%':''}};">61.8%</view></view><view class="cu-progress round margin-top"><view class="bg-red" style="width:{{loading?'61.8%':''}};">61.8%</view></view>
</view>这里面有一个loading变量，没有值的话，进度条是空，我们可以给这个变量赋值
在index.js中，设为true，然后点击保存，编译，效果如下。
这是在我现有项目中沾进去的，直接沾到了最后。不影响测试进度条。
三、总结
使用还是很简单的。我们首先构建项目，然后在浏览器demo中找我们需要的组件，然后在前端工具中打开的代码里面找到需要的代码，复制到小程序项目中。就可以使用了。
下载的官方代码，每个组件一个单独目录，目录中包含了该组件所有的代码，找起来很方便。比如.wxml中bindtap绑定了一些函数，直接去当前目录下的.js文件中就能找到，直接复制到小程序项目中就可以使用了。
附：抽空用colorui做的
