下載

GIthub地址：https://blog.csdn.net/IT_TIfarmer/article/details/88380308，下載后得到一個壓縮包，解壓后得到：

這兩個文件夾都是可以直接部署在小程序開發工具上的項目，第一個就是ColorUI的作者制作的ColorUI小程序的項目源碼；第二個template是一個空白的小程序模板，作者已經將ColorUI的使用環境搭建好了，我們可以直接在上邊開始我們自己的項目。

使用

由于目前開發指南還沒有完善，此處僅介紹我的使用方法。

使用前預準備：

把colorui.wxss和icon.wxss粘貼到項目根路徑下，然后在項目的app.wxss中加入兩行代碼即可：

第一步：使用微信掃描下面的二維碼，打開小程序

打開后如下：

第二步：打開下載壓縮包的demo文件夾，此處使用的是vscode。

文件解釋：

colorui文件夾：colorui.wxss就是colorUI的css源碼庫，在使用前需要導入到自己的微信小程序中。

所有組件的css樣式都是通過幾個css的class selector組合而成的。

icon.wxss是colorUI所提供的icon庫，就是所有的小圖標，注意icon都不是圖片的形式，而是文本的形式，我們如果想要引入不同的icon，直接憑借下邊這行代碼就可以：

之后我們就能引用ColorUI提供給我們的CSS修飾了

這里引用請保持優秀對于ColorUI樣式的靈活封裝的解釋：

注意到class是由三個小selector組成：icon-iconName 、 lg、 text-color，

第一個屬性是“icon-”后邊加上我們想要的icon名稱，可以在小程序的圖標界面查看所有icon及其名稱

第二個屬性加上之后，icon會變大

第三個是“icon-”后邊加上我們想要的顏色，可以寫red、yellow、orange、green等來單獨確定icon的顏色（參數不能傳入十六進制和rgb

當然，我們也可以給這個text標簽加上一個id選擇器，在css文件中覆蓋它的大小和顏色。

ps：該組件中的所有的顏色代碼可以在main.wxss和app.js中找到。

page文件夾：包含所有的頁面，其下級文件夾中除了

utils文件夾沒用，.gitattributes也沒用

app.js 中主要寫了作者為了自定義導航欄和tabBar所需要的全局變量

app.wxss中是對導航欄的css裝飾

第三步：可以注意到，page文件夾下處了auth是小程序的微信授權界，剩下四個文件夾與微信的四個頁面一一對應。

點開第一個basics頁面文件夾

與basics頁面對應

打開每一個組件的頁面，尋找到自己想要的格式及組件，讓后在vscode中找到對應代碼的class選擇器，加入自己的代碼中。

目前來說還有些小麻煩，在正式文檔出來之前，我們只能去參照作者給的demo演示小程序中的源碼，想使用哪個組件，就把哪個組件的代碼copy下來再稍加修飾。當然，這也是一種笨且有效的方法。