一介布衣

🧭 快速导航

ColorUI 风格化组件使用 ​

项目地址：https://github.com/weilanwl/ColorUI
文档/示例：仓库内 Demo 与说明
关联清单：https://github.com/justjavac/awesome-wechat-weapp

ColorUI 是一套以“样式类 + 组件示例”为核心的微信小程序风格库。与 Vant Weapp/WeUI 这种“自定义组件”型库不同，ColorUI 更偏向通过丰富的 CSS 工具类与样式集合来快速构建页面风格。

🎯 文章目标 ​

  • 了解 ColorUI 的适用场景与特点
  • 掌握接入方式与常用组件类名
  • 学会基础的主题定制与工程化实践

📦 引入方式 ​

常见做法是拷贝仓库中的 colorui 资源目录到项目根目录（或合适位置），然后在全局样式引入：

css
/* app.wxss */
@import "colorui/main.wxss";
@import "colorui/icon.wxss";

若使用分包，可按需在分包页面的 wxss 中局部引入，降低主包体积。

提示：ColorUI 以 wxss 为主，通常不需要在 usingComponents 中声明组件。

🧩 常用组件与类名速览 ​

  • 按钮：cu-btn、颜色类如 bg-blue、形态类如 round、shadow
xml
<button class="cu-btn bg-blue round">主要操作</button>
  • 图标：cuIcon-*（需引入 icon.wxss）
xml
<view class="cuIcon-homefill text-blue"></view>
  • 列表/卡片：cu-list、cu-item、cu-card 等
xml
<view class="cu-list menu">
  <view class="cu-item">
    <view class="content">菜单项</view>
  </view>
</view>
  • 颜色/文本工具类：text-xx、bg-xx、margin-xx、padding-xx、radius 等

更多类名与示例参见仓库 Demo。

🎨 主题与定制 ​

  • 全局色板：可在 main.wxss 中调整主色、渐变等（建议复制一份自定义文件，避免直接改动第三方库）
  • 局部覆盖：创建 theme.wxss，在 main.wxss 之后引入，使用更高优先级选择器或 !important 做覆盖
  • 命名规范：配合 BEM 或自定义命名，避免与 ColorUI 类名冲突

🏗️ 工程实践 ​

  • 分包策略：将大量仅在某些页面使用的样式放入分包，控制主包体积
  • 可维护性：对常用组合样式进行二次封装（如自定义 btn-primary），统一团队风格
  • 与组件库混用：和 Vant Weapp/WeUI 共存时，注意样式覆盖顺序与选择器权重

🧪 常见问题 ​

  • 包体积增加：未按需引入或全局引入过多样式。按页面/分包引入并剔除未用样式
  • 类名冲突：合理命名自定义样式，避免与 cu-*/cuIcon-* 冲突
  • 视觉一致性：与业务自定义样式叠加时，优先统一色板与间距系统

✅ 适用场景 ​

  • 需要快速起手的视觉风格构建
  • 以样式类拼装 UI、灵活性要求高的页面
  • 与现有自定义组件体系结合，做轻量增强

🔗 参考 ​

📊 总结 ​

ColorUI 借助“工具类 + 示例”帮助快速构建风格统一的页面。合理使用分包与按需引入，并建立自定义的主题层，即可在效率与包体之间取得平衡。