ColorUI：高颜值小程序 CSS 样式库接入指南

ColorUI 是一个高颜值的 CSS 库，在引入样式后即可根据 class 调用组件，含一些简单交互示例，为小程序开发提供 UI 思路。支持 uni-app 与原生小程序两种用法。

一、项目官方信息

二、官方图片

ColorUI 简介：

三、环境要求

• 微信开发者工具（原生小程序）。
• 或 HBuilderX（uni-app）。
• 无 npm 依赖，纯 CSS 引入。

四、完整部署/接入步骤

方式一：uni-app 项目

1. 下载源码解压，获得 /Colorui-UniApp 文件夹；
2. 复制目录下的 /colorui 文件夹到项目根目录；
3. 在 App.vue 引入关键 CSS：

<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css";
</style>

方式二：原生小程序

1. 下载源码解压，复制 /demo 下的 /colorui 文件夹到项目根目录；
2. 在 App.wxss 引入：

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

方式三：从新项目开始

下载 /template，复制并重命名为你的项目，导入到微信开发者工具。

自定义导航栏

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;
    }
  })
}

App.json 取消系统导航栏并全局引入组件：

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

五、使用方法

页面调用导航栏

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

uni-app 版调用

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
  <block slot="backText">返回</block>
  <block slot="content">导航栏</block>
</cu-custom>

素材资源

ColorUI 在语雀有群友共同维护的知识库：https://www.yuque.com/colorui 。

六、常见问题 FAQ

1. 引入后样式不生效？ 检查 @import 路径是否正确；确认 App.wxss 或 App.vue 里的 CSS 引入顺序。

2. 自定义导航栏在 iOS/Android 显示不一致？ 通过 wx.getMenuButtonBoundingClientRect() 计算胶囊位置，已封装在 cu-custom 组件里。

3. 是 npm 包吗？ 不是，纯 CSS 库，直接复制 colorui 目录到项目。

4. 有 V3 吗？ 有测试版，见 https://github.com/weilanwl/coloruiBeta 。

5. 组件库包含什么？ 按钮、卡片、列表、表单、弹窗、导航等常见 UI 样式类，通过 class 调用。

6. 如何获取更多模板？ 语雀知识库：https://www.yuque.com/colorui 。

七、跳转链接

• GitHub 仓库：https://github.com/weilanwl/ColorUI
• V3 测试版：https://github.com/weilanwl/coloruiBeta
• 语雀素材：https://www.yuque.com/colorui