ColorUI 的集成与定制

ColorUI 简介

ColorUI 是一套基于 CSS3 的 UI 组件库，专为微信小程序设计，但同样适用于 uni-app 等跨平台框架。它提供了丰富的预设样式和组件，包括按钮、卡片、导航栏、表单元素等，具有高度可定制性。ColorUI 的设计风格偏向现代化，色彩鲜明，动画效果流畅，能够快速构建出视觉效果出众的移动端应用。

在 uni-app 中集成 ColorUI

下载与引入

首先需要从 ColorUI 的官方 GitHub 仓库下载最新版本的样式文件。通常包括 colorui.css 和 icon.css 两个核心文件。将这些文件放置在 uni-app 项目的 static 目录下，例如 static/colorui/。

在 App.vue 的 <style> 标签中全局引入 ColorUI 的样式：

@import "/static/colorui/colorui.css";
@import "/static/colorui/icon.css";

配置基础路径

由于 ColorUI 的部分样式使用了相对路径引用字体和图片资源，需要在 vue.config.js 中配置 publicPath：

module.exports = {
  publicPath: './'
}

使用基础组件

ColorUI 的大部分组件都是通过 CSS 类实现的，例如创建一个按钮：

<button class="cu-btn bg-blue round">蓝色圆角按钮</button>

定制 ColorUI 样式

修改主题色

ColorUI 的主题色是通过 CSS 变量定义的，可以在 App.vue 中覆盖这些变量：

:root {
  --blue: #0081ff;
  --red: #f54d4f;
  /* 其他颜色变量... */
}

扩展自定义样式

可以创建额外的样式文件来扩展 ColorUI。例如，添加一个新的按钮样式：

.cu-btn.custom-btn {
  background-image: linear-gradient(45deg, #ff0080, #ff8a00);
  box-shadow: 0 4px 15px rgba(255, 0, 128, 0.3);
}

然后在组件中使用：

<button class="cu-btn custom-btn">渐变按钮</button>

与 uni-app 组件结合使用

封装 ColorUI 组件

为了更好地在 uni-app 中使用，可以封装一些常用组件。例如封装一个对话框组件：

<template>
  <view class="cu-modal" :class="{'show': visible}">
    <view class="cu-dialog">
      <view class="cu-bar bg-white justify-end">
        <view class="content">{{ title }}</view>
        <view class="action" @tap="close">
          <text class="cuIcon-close text-red"></text>
        </view>
      </view>
      <view class="padding-xl">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String,
    visible: Boolean
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

与 uni-ui 结合

ColorUI 可以与 uni-ui 一起使用，例如结合 uni-list 使用 ColorUI 的样式：

<uni-list>
  <uni-list-item class="cu-item arrow" title="列表项1" />
  <uni-list-item class="cu-item arrow" title="列表项2" />
</uni-list>

高级定制技巧

动态主题切换

通过 JavaScript 实现动态主题切换功能：

function changeTheme(theme) {
  const root = document.documentElement
  if (theme === 'dark') {
    root.style.setProperty('--main-bg-color', '#1a1a1a')
    root.style.setProperty('--text-color', '#ffffff')
  } else {
    root.style.setProperty('--main-bg-color', '#ffffff')
    root.style.setProperty('--text-color', '#333333')
  }
}

自定义动画效果

利用 ColorUI 的动画类创建自定义动画：

@keyframes custom-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.custom-animate {
  animation: custom-bounce 1s infinite;
}

性能优化建议

按需引入样式

如果项目体积敏感，可以只引入需要的样式部分。编辑 colorui.css 文件，删除不使用的组件样式。

精简图标库

icon.css 包含了大量图标，可以只保留项目需要的图标类，减少文件大小。

使用 CSS 压缩工具

通过 PostCSS 等工具压缩最终的 CSS 文件：

// postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default',
    }),
  ],
}

常见问题解决

图标不显示问题

确保字体文件路径正确，检查 icon.css 中 @font-face 的路径：

@font-face {
  font-family: 'cuIcon';
  src: url('/static/colorui/fonts/cuIcon.ttf') format('truetype');
}

样式冲突处理

当 ColorUI 与其他 UI 库冲突时，可以通过提高选择器优先级解决：

/* 提高优先级 */
body .cu-btn {
  /* 自定义样式 */
}

小程序平台差异

在小程序平台可能需要特殊处理，例如使用 rpx 替代 px：

.cu-card {
  margin: 20rpx;
  padding: 30rpx;
}

实际应用案例

电商应用首页

使用 ColorUI 构建电商首页的示例代码：

<template>
  <view class="page">
    <!-- 搜索栏 -->
    <view class="cu-bar search bg-white">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input type="text" placeholder="搜索商品" confirm-type="search"/>
      </view>
    </view>
    
    <!-- 轮播图 -->
    <swiper class="screen-swiper" autoplay interval="3000" duration="500">
      <swiper-item v-for="(item,index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    
    <!-- 分类图标 -->
    <view class="cu-list grid col-4 no-border">
      <view class="cu-item" v-for="(item,index) in categories" :key="index">
        <view :class="['cuIcon-' + item.icon, 'text-' + item.color]"></view>
        <text>{{item.name}}</text>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view class="cu-card dynamic">
      <view class="cu-item shadow" v-for="(item,index) in products" :key="index">
        <view class="cu-list menu-avatar">
          <view class="cu-item">
            <view class="cu-avatar round lg" :style="'background-image:url('+item.avatar+');'"></view>
            <view class="content">
              <view class="text-grey">{{item.shop}}</view>
              <view class="text-gray text-sm">{{item.time}}</view>
            </view>
          </view>
        </view>
        <view class="text-content">
          {{item.description}}
        </view>
        <view class="grid flex-sub col-3 grid-square">
          <view class="bg-img" v-for="(img,i) in item.images" :key="i" 
                :style="'background-image:url('+img+');'">
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

表单验证样式

结合 ColorUI 的表单验证示例：

<template>
  <view class="padding">
    <form @submit="submitForm">
      <view class="cu-form-group" :class="{'error': errors.username}">
        <view class="title">用户名</view>
        <input placeholder="请输入用户名" name="username" v-model="form.username" />
        <text class="cuIcon-roundclosefill text-red" v-if="errors.username"></text>
      </view>
      <view class="cu-form-group" :class="{'error': errors.password}">
        <view class="title">密码</view>
        <input password placeholder="请输入密码" name="password" v-model="form.password" />
        <text class="cuIcon-roundclosefill text-red" v-if="errors.password"></text>
      </view>
      <button class="cu-btn block bg-blue margin-tb-sm lg" form-type="submit">登录</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {
        username: false,
        password: false
      }
    }
  },
  methods: {
    submitForm() {
      this.errors = {
        username: !this.form.username,
        password: !this.form.password
      }
      
      if (!this.errors.username && !this.errors.password) {
        // 提交表单逻辑
      }
    }
  }
}
</script>

<style>
.cu-form-group.error {
  border-left: 4rpx solid var(--red);
  padding-left: 20rpx;
}
</style>