簡單介紹
ColorUI是一個Css類的UI組件庫！不是一個Js框架璧疗。相比于同類小程序組件庫坯辩，ColorUI更注重于視覺交互！這個組件以高顏值而得到推廣崩侠，深受開發(fā)者的喜愛濒翻，由作者文曉港創(chuàng)作，目前僅更新到2.0版本啦膜。
GitHub資源地址：https://github.com/weilanwl/ColorUI
優(yōu)勢
一：組件精美有送，可以說每一個都制作精良，作者很用心僧家，UI功底很扎實(shí)雀摘。
二：封裝性特別特別的好，每一個單獨(dú)的class選擇器八拱，都是一個封裝極好的css小組件
三：感受到了作者的過人之處阵赠，組件代碼具有良好的兼容性，擴(kuò)展性肌稻，我們可以在它的基礎(chǔ)上進(jìn)行靈活的修改清蚀。
使用速成，快速脫坑
說起小程序爹谭，最頭疼的不過是小程序界面的設(shè)計枷邪，對于不了解、不精通Css技術(shù)的開發(fā)者來說簡直就是噩夢诺凡。因此小編就想著能不能有弄好的組件能直接套用呢东揣？践惑？在網(wǎng)上搜了一下，感覺這個新出現(xiàn)的ColorUI很有意思嘶卧，顏值也很高尔觉，就嘗試的用了一下，好用到我簡直我不禁膜拜文曉港大佬芥吟，造福蒼生啊~~Ｕ焱！钟鸵！下面說一下這個組件的用法钉稍，和一些簡單的小技巧幫助快速脫坑。
第一步下載源代碼
1.下載完后打開微信開發(fā)工具携添，點(diǎn)擊導(dǎo)入項(xiàng)目嫁盲，選擇文件demo導(dǎo)入，作為模板參考
2.再新建個項(xiàng)目--選擇文件--點(diǎn)擊右鍵--選擇硬盤資源打開--刪除所有的文件將下載資源的template更名為你的項(xiàng)目名
3.在app.wxss中添加@import “icon.wxss"; @import “colorui.wxss"; 就可以開始用了
使用的小技巧和組件使用的簡單介紹
完成項(xiàng)目創(chuàng)建之后烈掠，看著精美的模板羞秤，是不是感嘆它的神奇呢？別著急左敌，用了之后你會更加感嘆瘾蛋，超級好用！＝孟蕖哺哼！
我們簡單制作個小程序首頁為案例分析下如何操作既簡單又方便。
首先提出一些問題叼风，我們帶著問題跟著教程走取董，逐步解決問題，傳授技巧：
1.怎么快速的找到代碼在哪无宿？
2.底部導(dǎo)航欄茵汰，頂部標(biāo)題欄怎么保持它一直在底部、頂部孽鸡？
3.為什么我復(fù)制代碼后頁面顯示的效果和模板不一樣蹂午？
4.組件，底部的導(dǎo)航欄怎么點(diǎn)擊不出動態(tài)的效果呢彬碱？
5.我想更換組件的圖片或文字豆胸，要怎么操作呢？
6.我想弄出選項(xiàng)卡切換后下面內(nèi)容跟著切換怎么實(shí)現(xiàn)巷疼？
每個頁面最上面有個標(biāo)題欄晚胡，有時會帶有返回，關(guān)閉等這些按鈕，和頁面最底下的tabBar導(dǎo)航欄搬泥，我們先做這兩個桑寨。
脫坑第一招：善用后臺調(diào)試的小箭頭伏尼，查看wxml和css樣式代碼
看到圖片中的左上角的箭頭圖標(biāo)了嗎忿檩？這是我們開發(fā)者在瀏覽器中最常用的元素查看器，點(diǎn)擊后將箭頭指向頁面的某一部分爆阶，在后臺就能看到對應(yīng)這一部分的頁面代碼在哪了燥透，同時還有css樣式的代碼。
這里提醒一下辨图，注意要點(diǎn)擊才有班套，想查看其他文件的代碼，記得點(diǎn)擊后點(diǎn)擊console再選擇wxml更新代碼故河。代碼和樣式僅用來觀看吱韭，不要為了方便直接復(fù)制對應(yīng)的代碼和樣式。我們可以通過關(guān)鍵字來到對應(yīng)的文件查找代碼或樣式鱼的。
脫坑第二招：善用小程序快捷鍵理盆，加快效率
最好用的就是ctrl+F，可以在所在文件中輸入關(guān)鍵字搜索到具體位置凑阶，除此外還有其他常用快捷鍵猿规，同時還有代碼提示生成的一些插件，有興趣的可以上網(wǎng)查找宙橱，我是配置的Visual Studio Code的插件姨俩，微信開發(fā)工具自己就有了。
ctrl+F/鼠標(biāo)連點(diǎn)三下 選擇光標(biāo)所在的行
ctrl+S 保存并編譯代碼
Alt+ ↑ ↓ 移動光標(biāo)所在行的整行代碼
shift+鼠標(biāo) 按住shift 鼠標(biāo)前后點(diǎn)擊的范圍內(nèi)代碼被選中
shift+alt+F 格式化代碼师郑，代碼縮進(jìn)等
有了上面兩招环葵，就可以在模板文件里查找對應(yīng)想要的組件代碼啦~，這里注意：在摘取代碼時宝冕，習(xí)慣這些順序
1.搜索組件關(guān)鍵字
2.找到對應(yīng)的代碼张遭，注意看下你的代碼有沒有更外層的，記得別忘了復(fù)制猬仁，否則會和模板的效果不一樣帝璧。
3.復(fù)制所在的文件中wxss的額外css樣式。 最后看下js和json文件有沒有數(shù)據(jù)湿刽，有則一樣復(fù)制的烁。
怎么保持組件和TabBar一樣固定在底部呢？
看下效果诈闺，上面1渴庆、3問題都解決了，來看在2、5問題襟雷，怎么保持頂框和底框不動呢刃滓？？耸弄？我們知道小程序有個app.json里有tabBar底層導(dǎo)航欄設(shè)置咧虎，但細(xì)心的朋友能發(fā)現(xiàn)我們代碼里是沒有的，說明colorUI沒有使用這樣的方法计呈，只是單純固定了組件而已砰诵，而方法更是簡單的令人發(fā)指，就是在組件的最外層的style最后補(bǔ)上foot捌显，foot為置底茁彭。我們也可以通過第一招來查看模板代碼，也可以發(fā)現(xiàn)shdow foot的存在扶歪。
圖片中最左邊為我的效果圖理肺，選取了中間的紅色組件和右邊的黑色組件∩屏可以看到組件效果成功妹萨，并且顏色，文字有所改變媳禁，怎么做到的呢眠副？？
這里貼代碼哈竣稽，具體修改不在圖上標(biāo)識了囱怕。首先，我們能看到最外層class中有bg-white 和內(nèi)層里有 text-green text-gray毫别，知道了吧娃弓，這里我們可以到icon.wxss里搜一下關(guān)鍵詞，能看到也有其他的顏色的樣式岛宦，我這里就不貼圖了台丛，復(fù)制后能更改樣式顏色，文字也可以通過js進(jìn)行綁定動態(tài)修改或直接修改砾肺。
組件挽霉，底部的導(dǎo)航欄怎么點(diǎn)擊不出動態(tài)的效果呢？
你能發(fā)現(xiàn)點(diǎn)擊底部導(dǎo)航欄其他圖標(biāo)变汪，沒有變色或者頁面跳轉(zhuǎn)的效果侠坎。為什么呢？簡單來說裙盾，colorUI就只是個組件实胸，并沒有這些功能他嫡，需要你自己為圖標(biāo)標(biāo)簽或者按鈕標(biāo)簽添加事件，在js里編寫方法實(shí)現(xiàn)顏色的變化和頁面的跳轉(zhuǎn)等功能庐完，這才是我們開發(fā)小程序的核心代碼钢属。至于實(shí)現(xiàn)方法就當(dāng)做是作業(yè)留給各位的讀者啦~~
我想弄出選項(xiàng)卡切換后下面內(nèi)容跟著切換怎么實(shí)現(xiàn)？(補(bǔ)充)
其實(shí)思路很簡單门躯，首先實(shí)現(xiàn)一個能滑動的導(dǎo)航欄淆党，后接一個輪播欄，記錄點(diǎn)擊的導(dǎo)航欄id值生音，作為swiper的當(dāng)前值current宁否，就能實(shí)現(xiàn)上下動態(tài)綁定了窒升，這里有一些地方?jīng)]有完善缀遍，輪播欄高度應(yīng)該也是動態(tài)的，有興趣的朋友自己實(shí)現(xiàn)下吧~
這里wxss就你們自己復(fù)制了饱须，技巧交了域醇，總得會用吧
js
最后貼一下我制作的首頁頁面。
小編也是在學(xué)習(xí)小程序的初期蓉媳，頭一次在頭條發(fā)干貨譬挚，如果小編有什么錯誤或者你們有什么疑問也歡迎評論區(qū)留言。最后看在滿滿的干糧的份上酪呻，點(diǎn)個關(guān)注吧＜跣！玩荠！感謝Ｆ犭纭！阶冈！
小康說生活闷尿，滋味各不同。
