前言

編程開發(fā)中我發(fā)現(xiàn)了一個(gè)顏值超級好看的UI庫，那就是ColorUI組件庫。

摘要：隨著移動互聯(lián)網(wǎng)的快速發(fā)展，跨平臺應(yīng)用開發(fā)已成為行業(yè)的重要趨勢。ColorUI-UniApp作為一款高顏值、高度自定義的CSS組件庫，為開發(fā)者提供了在H5、微信小程序、安卓、iOS以及支付寶等多個(gè)平臺上實(shí)現(xiàn)一致用戶體驗(yàn)的解決方案。本文將深入探討ColorUI的特點(diǎn)、使用方法以及它在前端開發(fā)中的優(yōu)勢。

ColorUI GA 簡介

ColorUI是一個(gè)專為UniApp設(shè)計(jì)的CSS庫，它不僅提供了豐富的樣式和組件，還注重用戶體驗(yàn)和界面美觀。通過引入ColorUI，開發(fā)者可以輕松地創(chuàng)建出高顏值的界面，并且這些界面能夠在多個(gè)平臺上保持一致。ColorUI的設(shè)計(jì)理念是讓開發(fā)者能夠快速地搭建出既美觀又實(shí)用的應(yīng)用。

ColorUI 特點(diǎn)

1. 高顏值設(shè)計(jì)：ColorUI提供了一系列精美且現(xiàn)代化的UI組件，這些組件不僅視覺上吸引人，而且在用戶體驗(yàn)上也經(jīng)過了精心打磨，確保了美觀與實(shí)用性的完美結(jié)合。

2. 高度自定義：ColorUI賦予開發(fā)者極大的自由度，允許他們根據(jù)項(xiàng)目需求靈活調(diào)整組件的樣式和布局，從而實(shí)現(xiàn)界面的個(gè)性化定制，滿足不同場景下的設(shè)計(jì)要求。

3. 跨平臺兼容性：ColorUI的跨平臺特性是其一大亮點(diǎn)，它不僅適用于H5網(wǎng)頁，還能在微信小程序、安卓、iOS以及支付寶小程序等多種平臺上穩(wěn)定運(yùn)行，極大地簡化了多平臺應(yīng)用的開發(fā)和維護(hù)工作。

4. 易于集成：ColorUI的集成過程十分簡便，開發(fā)者只需引入相應(yīng)的樣式文件，便能通過class屬性輕松調(diào)用各種組件，迅速搭建起具有專業(yè)水準(zhǔn)的用戶界面。

5. 交互示例豐富：ColorUI還提供了一系列交互示例，涵蓋了常見和復(fù)雜的用戶界面操作，這些示例不僅能夠激發(fā)開發(fā)者的創(chuàng)意，還能作為實(shí)際開發(fā)中的參考案例，加快開發(fā)進(jìn)度。

開始

一、項(xiàng)目搭建

1. 填寫項(xiàng)目名稱、空目錄路徑、APPID，開發(fā)模式選擇小程序
   

2. 根據(jù)項(xiàng)目需要，選擇【微信云開發(fā)】或者【不使用云服務(wù)】，示例不使用云開發(fā)，選擇【不使用云服務(wù)】

3. 模板選擇，選擇【JavaScript-基礎(chǔ)模板】，點(diǎn)擊確定

進(jìn)入小程序，創(chuàng)建的基礎(chǔ)小程序如下圖所示

• 若出現(xiàn).js無法被其他模塊引入等錯(cuò)誤

• 修改project.config.json中的setting屬性增加"ignoreDevUnusedFiles": false和"ignoreUploadUnusedFiles": false，這是由于部分組件未使用導(dǎo)致，后期可直接移除相關(guān)代碼

二、引入組件庫

• 在全局樣式文件app.wxss中引入關(guān)鍵css：main.wxss,icon.wxss

/* 根目錄 app.wxss 文件 */
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
/* 若需要使用微動畫，請引入 animation.wxss */
@import "colorui/animation.wxss";
/* 若使用暗色模式，請引入 dark.wxss，注意，當(dāng)前版本暗色模式隨系統(tǒng)切換，目前不支持手動切換 */
@import "colorui/dark.wxss";

• 默認(rèn)的新版基礎(chǔ)組件"style": "v2"會導(dǎo)致部分樣式將失效，刪除全局app.json里面的"style": "v2"。如確實(shí)需要使用新版樣式，可在局部page中的.json文件中添加"style": "v2"。

• 在page中的.wxml文件中即可使用樣式

三、自定義頂部導(dǎo)航欄（可選）

根據(jù)項(xiàng)目需要，決定是否自定義導(dǎo)航欄，示例導(dǎo)航欄代碼在/colorui/components/cu-custom中，可自行修改相關(guān)參數(shù)進(jìn)行配置。

• 1、app.js獲得系統(tǒng)信息

onLaunch: function() {
  wx.getSystemInfo({
    success: e => {
      this.globalData.StatusBar = e.statusBarHeight;
      let custom = wx.getMenuButtonBoundingClientRect();
      this.globalData.Custom = custom;
      this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    }
  })
},

• 2、app.json配置取消系統(tǒng)默認(rèn)導(dǎo)航欄,并全局引入組件

"window": {
  "navigationStyle": "custom"
},
"usingComponents": {
  "cu-custom":"/colorui/components/cu-custom/cu-custom"
}

• 3、xxx.wxml頁面調(diào)用

<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
  <view slot="backText">返回</view>
  <view slot="content">導(dǎo)航欄</view>
</cu-custom>

• 4、參數(shù)

V3 測試版：https://github.com/weilanwl/coloruiBeta