導讀：
首先，單從小程序UI的方面來講，能與ColorUI比肩的框架着實是沒幾個了，它好在哪？
其一：組件精美，可以說每一個都制作精良，作者很用心，UI功底很扎實。
其二：封裝性特別特別的好，每一個單獨的class選擇器，都是一個封裝極好的css小組件，我們可以靈活的組裝與變幻，下邊我會詳細講一下它的css封裝。
其三：感受到了作者的過人之處，迄今為止用過了好多UI框架。webUI框架，webAppUI框架以及小程序UI框架都有所嘗試，這些框架所提供的組件的代碼，相對而言都不是那么稱心如意，因為有時候想在它們提供的組件上做一些微調，樣式經常會被我搞得亂七八糟，但是colorUI就不一樣，它的組件代碼具有良好的兼容性，擴展性，我們可以在它的基礎上進行靈活的修改，而不至於使其gg。
使用：
那么我們要如何去使用這個框架呢？尤其是在作者的文檔還沒出來之前？
下邊開始介紹它的使用方法，我們從先從github上下載的它的文件：GitHub地址：https://github.com/weilanwl/ColorUI/
壓縮有發現有三個文件夾：
Colorui-UniApp
demo template（這兩個文件夾是可以直接部署在小程序上的，
第一個就是ColorUI的作者制作的ColorUI小程序的項目源碼，我們可以將其導入到小程序開發工具中，查看每個組建的源碼並且使用，第二個template是一個空白的小程序模板，作者已經將ColorUI的使用環境搭建好了，我們可以直接在上邊開始我們自己的項目。）
下邊就是這個demo，把它按照平常的步驟導入開發者工具：
說明：
這個小程序的功能不做太多講解，看代碼：
右側有四個大文件夾，分別是custom-tab-bar、images、pages、和utils以及幾個文件，custom-tab-bar就是小程序自己定義的導航欄，對自定義導航欄不理解的可以參考下：自定義tabBar。
簡而言之：自定義樣式就是、那么就必須在custom-tab-bar里邊配置自己想要的window和tabBar樣式，方法就是“windows”的“navigationStyle”屬性改為“custom”，tabBar中的“custom”屬性改為true，demo小程序的windows和tabBar都是使用的是自定義樣式。
images和pages就不說了。
utils文件夾沒用，.gitattributes也沒用。
app.js 中主要寫了作者為了自定義導航欄和tabBar所需要的全局變量，app.wxss中是對導航欄的css裝飾。
colorui.wxss就是colorUI的css源碼庫，所有組件的css樣式都是通過幾個css的class selector組合而成的。
icon.wxss是colorUI所提供的icon庫，就是所有的小圖標，注意icon都不是圖片的形式，而是文本的形式。
使用：
我們如果想要引入不同的icon，直接憑借下邊這行代碼就可以：
<text class='icon-{{icon-name}} lg text-{{color}}'></text>
這里解釋一下ColorUI樣式的靈活封裝：
注意到class是由三個小selector組成：icon-iconName 、 lg、 text-color，第一個屬性是“icon-”后邊加上我們想要的icon名稱，可以在小程序的圖標界面查看所有icon及其名稱，第二個屬性加上之后，icon會變大，第三個是“icon-”后邊加上我們想要的顏色，可以寫red、yellow、orange、green等來單獨確定icon的顏色（參數不能傳入十六進制和rgb），當然，我們也可以給這個text標簽加上一個id選擇器，在css文件中覆蓋它的大小和顏色。
Pages文件夾：index（小程序整體框架）about（對應關於選項卡）basics（對應元素選擇卡）component（對於組件選擇卡）plugin（對應擴展選擇卡）。
這里邊的文件夾也是和界面里的選項卡一一對應的。
圖標選項卡：
點擊圖標選項卡，打開basics文件夾下icon文件夾的wxxml代碼：
這段代碼是循環顯示所有icon，如果想顯示一種，要在if語句里加一個！item.isShow。
意思就是icon.js里isShow為false的icon顯示。（只提供演示作用）
如果要想在一個小程序項目中使用ColorUI也非常的簡單，把colorui.wxss和icon.wxss粘貼到項目根路徑下，然后在項目的app.wxss中加入兩行代碼即可：
@import "icon.wxss";
@import "colorui.wxss";
之后我們就能引用ColorUI提供給我們的CSS修飾了，只不過目前來說還有些小麻煩
想使用哪個組件，就把哪個組件的代碼copy下來再稍加修飾