一、开发准备工作

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做的

使用ColorUI组件相关推荐

微信小程序踩坑记——ColorUI组件的使用
微信小程序踩坑记--组件的使用组件类型 ColorUI Vant weapp ColorUI 首先贴上官网链接:官网链接,GitHub链接简介 ColorUI是一个css库!!!在你引入样式后可以 ...
ColorUI组件库简易教程之交互组件
官方示例在此!!!官方示例在此!!!官方示例在此!!! 这主要是基于uni-app开发的,所以,请多看uni-app文档,了解一些标签.属性,可以更好的使用该组件目录交互组件 Bar操作条 Nav ...
微信小程序入门ColorUI组件库使用方法
自学入门小程序不久,在对比现在主流的组件库后,笔者我选择了ColorUI,因为ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制. 下面是Col ...
ColorUI组件库简易教程之扩展插件
按照惯例,在此奉上官方示例!!! 目录扩展插件索引列表微动画全屏抽屉垂直导航扩展插件索引列表索引列表主要由scroll-view标签实现,类名为indexes,具体js逻辑请看源码,有 ...
小程序组件库ColorUI的使用，一键复制粘贴
在开发uniapp的时候,最佳的ui框架就是ColorUI,ColorUI是一个Css类的UI组件库!不是一个Js框架.相比于同类小程序组件库,ColorUI更注重于视觉交互! 颜值很高,注重颜值的程 ...
vue可视化拖拽生成工具_GitHub - 1260215278/dragUI: 基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件...
dragUI 用于UNI可拖拽可视化编程在线演示效果图基于快速开始参考uni官网安装普通uni项目(运行uni-app)运行到浏览器另需要手动下载包npm install 项目目录 col ...
7 个热门又优质的小程序 UI 组件库，社区、电商、工具各类都有！
如果你也是一名小程序开发者,当你打开一个高颜值的小程序时,是不是很想知道「这用的是哪一套 UI 组件库」呢? 目前,网上已有不少开源的小程序组件库,但选择太多往往让人挑花了眼,反而不知哪一款才适合自己 ...
01-小程序UI组件库
如果你也是一名小程序开发者,当你打开一个高颜值的小程序时,是不是很想知道「这用的是哪一套 UI 组件库」呢? 目前,网上已有不少开源的小程序组件库,但选择太多往往让人挑花了眼,反而不知哪一款才适合自己 ...
colorui 文档
colorui 文档文字 .text-xs {font-size: 20rpx;}.text-sm {font-size: 24rpx;}.text-df {font-size: 28rpx;}.t ...
推荐微信小程序常用的几个UI组件库
在微信小程序开发的过程中,自己不借助UI组件库开发出来的页面,不但要花费更多的时间,页面的美观度上也有一定差距. 所以在这里我给大家推荐几个好看,常用的几个UI组件库. WeUI WeUI 是微信官方 ...

使用ColorUI组件