目錄

使用方法

1.下載的colorUI源碼后，里面有這些文件夾

2.運(yùn)行demo文件夾，查看各組件效果

3.template文件夾（colorUI空項(xiàng)目文件介紹）

?注意：colorUI的app.json文件和原生的微信小程序的app.json有所不同了?

?自定義頂部導(dǎo)航欄

自定義tabBar

原生tabBar與自定義tabBar效果演示

---

之前記錄了weUI組件庫的基礎(chǔ)使用，現(xiàn)在用一下更加【漂釀】的colorUI，weUI組件庫的博客在這里：微信小程序-weUI組件庫_五速無頭怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120673884

相較于weUI和原生微信小程序?樣式的統(tǒng)一，colorUI更注重于【個(gè)性】，它的樣式很動(dòng)感，blingbling的，比較適合做一些活潑的活動(dòng)小程序.而且，colorUI能兼容uniapp、微信小程序，還能用uniapp發(fā)布h5版本，兼容效果非常好。

---

????????相較于weUI的使用上，colorUI會(huì)更復(fù)雜些，準(zhǔn)確的說，是更繁瑣一些，畢竟是大佬一個(gè)人肝出來的，而且對組件的樣式、封裝做了很強(qiáng)的兼容性處理，所以使用上沒有weUI那種有團(tuán)隊(duì)做的簡易，而且目前colorUI的文檔，沒有完成，只針對部分內(nèi)容做了介紹，所以需要大家下載源碼自行摸索（其實(shí)封裝的挺易懂的~）

? ? ? ? 就算你覺得麻煩不想用，也完全可以留下colorUI的wxss樣式文件，肯定在其他項(xiàng)目中能用到，cv大法好呀~

? ? ? ? 那么前言就介紹到這里，接下來會(huì)對colorUI的使用進(jìn)行介紹。

---

colorUI在線效果演示：（用uniapp發(fā)布的h5）

ColorUI組件庫 (color-ui.com)https://demo.color-ui.com/colorUI倉庫鏡像地址：

mirrors / weilanwl / colorui · CODE CHINA (csdn.net)https://codechina.csdn.net/mirrors/weilanwl/colorui?utm_source=csdn_github_acceleratorcolorUI資源網(wǎng)站：

ColorUI群資源 · 語雀 (yuque.com)https://www.yuque.com/colorui?一些針對colorUI組件介紹的博客：（比官方文檔詳細(xì)w(ﾟДﾟ)w）

小程序與colorUI實(shí)戰(zhàn)總結(jié)_steve1988717的博客-CSDN博客使用colorUI，首先在app.wxss引入這兩個(gè)文件@import "colorui/main.wxss";@import "colorui/icon.wxss";想實(shí)現(xiàn)下面的tabbar的效果，可以按著下面的步驟來寫<view class="cu-bar tabbar bg-white"> <view data-num="1" class="acti...https://blog.csdn.net/steve1988717/article/details/96099036小程序ColorUI使用簡易教程_仗劍東游的貓-CSDN博客_colorui本教程配合官方示例食用更佳！！！目錄前言快速上手使用UniApp開發(fā)開始使用自定義導(dǎo)航欄使用原生小程序開發(fā)從現(xiàn)有項(xiàng)目開始從新項(xiàng)目開始使用自定義導(dǎo)航欄組件基礎(chǔ)元素layout布局Background背景Text文字Icon圖標(biāo)Button按鈕Tag標(biāo)簽Avatar頭像Progress進(jìn)度條Border&S...https://blog.csdn.net/miao_yf/article/details/102971767

使用方法

1.下載的colorUI源碼后，里面有這些文件夾

2.運(yùn)行demo文件夾，查看各組件效果

你可以參考效果，找到對應(yīng)的代碼，復(fù)制到自己的項(xiàng)目里去使用

當(dāng)然，開著這個(gè)項(xiàng)目找不太方便，現(xiàn)在就要用到上面的地址鏈接了ColorUI組件庫效果演示H5，這樣方便開發(fā)。

3.template文件夾（colorUI空項(xiàng)目文件介紹）

template文件夾里就是最基礎(chǔ)的微信小程序內(nèi)容，只不過放好了colorUI組件庫的文件

【cu-custom】組件中，還有?colorUI的navigation（頂上的導(dǎo)航欄），詳細(xì)介紹看下方【自定義頂部導(dǎo)航欄】

---

而且，在app.wxss（全局樣式）文件中也引入好了colorUI的樣式文件

?注意：colorUI的app.json文件和原生的微信小程序的app.json有所不同了

?colorUI空文件中的app.json文件，【使用頂部導(dǎo)航欄cu-custom組件】,替換默認(rèn)的頂部導(dǎo)航欄效果，同時(shí)，里面舍棄了tabBar配置，博客后面會(huì)介紹tabBar在index文件中的配置，詳情請看【自定義tabBar】。

---

• ?自定義頂部導(dǎo)航欄

colorUI空文件中，app.json文件中，有一行"navigationStyle":?"custom" 是原生小程序沒有寫的

這段代碼是用來? ?關(guān)閉【默認(rèn)導(dǎo)航欄樣式】和 引入colorUI自定義頂部導(dǎo)航欄?

頁面中使用方法：?

<!-- 頂部導(dǎo)航欄 組件 --> <cu-custom bgColor="bg-gradual-blue"><view slot="content">ColorUI 空白模板</view> </cu-custom>

?效果如下：

你也可以做的更好看一些：

<!-- bgImage==> 頂部導(dǎo)航欄的背景圖片 isBack="{{true}} ==》 開啟返回箭頭 --> <cu-custom bgImage="../../../images/wave.gif" isBack="{{true}}"><!-- slot="backText" ==》 跟在返回箭頭之后 --><view slot="backText">返回</view><!-- slot="content"===》居中的標(biāo)題文字 --><view slot="content">微動(dòng)畫</view> </cu-custom>

這樣的?navigation（頂上的導(dǎo)航欄）更加美觀個(gè)性化：

而且：如果不在wxml中使用

• 自定義tabBar

使用自定義tabBar組件，需要對菜單頁面進(jìn)行一定的改造，接下來說明一下其和原生微信小程序在構(gòu)造上的區(qū)別與注意點(diǎn)

原生小程序項(xiàng)目標(biāo)準(zhǔn)格式：?

原生小程序的tabBar菜單對應(yīng)的頁面都在pages文件夾下，按照Page格式設(shè)置js內(nèi)容；使用的組件效果則是放在對應(yīng)的compoents文件夾下，每個(gè)tabBar菜單對應(yīng)是一個(gè)Page頁面

colorUI使用自定以tabBar的方法

在colorUI中，因?yàn)槭褂玫氖亲远x的tabBar，是通過組件的形式引入到頁面中，然后通過樣式將這個(gè)組件固定定位?position:?fixed到頁面的下放bottom位置。達(dá)到跟原生tabBar類似的效果。

這里就先說一下原理，詳細(xì)的代碼我后單獨(dú)弄一篇博客，不然這里太長了~

微信小程序-colorUI組件庫-自定義tabBar_五速無頭怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120740381

原生tabBar與自定義tabBar效果演示

• ?默認(rèn)的微信小程序tabbar效果：

• ?colorUI封裝的tabbar效果：

看上面截圖對照，你可能絕對好像自定義tabBar和原生的tabBar也沒啥太大區(qū)別，尤其是第一種自定義tabBar，跟原生的看起來不能說毫不相關(guān)，只能說是一模一樣。

?但是，原生的tabBar，限制死了就那幾樣配置參數(shù)

路徑pagePath、菜單名文字text、未選中圖標(biāo)、選中圖標(biāo)iconPath、selectedIconPath，還有一些操作欄顏色、定位的參數(shù)，沒有其他多余的配置項(xiàng)目了（不過也滿足基礎(chǔ)使用了）

但是如果想要實(shí)現(xiàn)在tabBar上的一些樣式、顯示效果的改動(dòng)，害得是自定義tabBar

像這個(gè)按鈕、紅色角標(biāo)都得靠封裝的自定義tabBar組件來實(shí)現(xiàn)，原生的tabBar沒法做到，各有所長吧。

?關(guān)于微信小程序自定義tabBar，可以在官方文檔了解一下大概內(nèi)容：

自定義 tabBar | 微信開放文檔 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

---

以上，就是colorUI組件庫的基礎(chǔ)介紹和如何使用的介紹，更加詳細(xì)的組件使用、屬性說明都在上方的鏈接中，有不少博客參考。

總結(jié)

以上是生活随笔為你收集整理的微信小程序-colorUI组件库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。