项目初始化请参照：使用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做的