?項目初始化請參照：使用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做的

總結

以上是生活随笔為你收集整理的使用ColorUI组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。