前言

編程開發中我發現了一個顏值超級好看的UI庫，那就是ColorUI組件庫。

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

ColorUI GA 簡介

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

ColorUI 特點

1. 高顏值設計：ColorUI提供了一系列精美且現代化的UI組件，這些組件不僅視覺上吸引人，而且在用戶體驗上也經過了精心打磨，確保了美觀與實用性的完美結合。

2. 高度自定義：ColorUI賦予開發者極大的自由度，允許他們根據項目需求靈活調整組件的樣式和布局，從而實現界面的個性化定制，滿足不同場景下的設計要求。

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

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

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

開始

一、項目搭建

1. 填寫項目名稱、空目錄路徑、APPID，開發模式選擇小程序
   

2. 根據項目需要，選擇【微信云開發】或者【不使用云服務】，示例不使用云開發，選擇【不使用云服務】

3. 模板選擇，選擇【JavaScript-基礎模板】，點擊確定

進入小程序，創建的基礎小程序如下圖所示

• 若出現.js無法被其他模塊引入等錯誤

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

二、引入組件庫

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

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

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

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

三、自定義頂部導航欄（可選）

根據項目需要，決定是否自定義導航欄，示例導航欄代碼在/colorui/components/cu-custom中，可自行修改相關參數進行配置。

• 1、app.js獲得系統信息

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配置取消系統默認導航欄,并全局引入組件

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

• 3、xxx.wxml頁面調用

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

• 4、參數

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