專案初始化請參照：使用ColorUI構建小程式專案_LookOutThe的博客-CSDN博客
目錄
一、開發準備作業
1.在前端開發工具中打開下載好的demo目錄
2.瀏覽器打開demo
3.微信開發工具打開上一篇構建好的專案
二、開始使用
1.找需要使用的組件
2.復制我們要使用的那段代碼到我們小程式專案中，
三、總結
一、開發準備作業
1.在前端開發工具中打開下載好的demo目錄
我使用的是HBuilderX，該步驟是為了復制我們需要的代碼
2.瀏覽器打開demo
官方demo：（ColorUI組件庫 ） 該步驟是為了找我們要用的組件
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檔案中就能找到，直接復制到小程式專案中就可以使用了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/310543.html
標籤：其他