小程序ColorUI使用简易教程

最新推荐文章于 2025-04-01 21:35:35 发布
最新推荐文章于 2025-04-01 21:35:35 发布
阅读量6.2w 收藏 457
点赞数 85
分类专栏： ColorUI Uni-app 文章标签： 组件 文档 color UI 小程序 教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miao_yf/article/details/102971767
版权
本文是一篇关于ColorUI在小程序开发中使用的简易教程，详细介绍了如何在UniApp和原生小程序中快速上手，包括使用自定义导航栏的方法。同时，文章深入讲解了ColorUI的基础组件如布局、背景、文字、图标、按钮、标签、头像、进度条及其使用技巧，是开发者学习ColorUI的实用指南。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本教程配合官方示例食用更佳！！！

目录

前言

快速上手

使用UniApp开发

开始

使用自定义导航栏

使用原生小程序开发

从现有项目开始

从新项目开始

使用自定义导航栏

组件

基础元素

layout布局

Background背景 

Text文字

Icon图标

Button按钮

Tag标签

Avatar头像

Progress进度条 

Border&Shadow边框阴影 

Loading加载

交互组件

 

前言

 

colorUI组件

ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件 

快速上手

使用UniApp开发

开始

下载源码解压获得/Colorui-UniApp文件夹，复制目录下的 /colorui 文件夹到你的项目根目录

App.vue 引入关键Css main.css icon.css

<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项目css */
....
</style>

使用自定义导航栏

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

App.vue 获得系统信息

onLaunch: function() {
	uni.getSystemInfo({
		success: function(e) {
			// #ifndef MP
			Vue.prototype.StatusBar = e.statusBarHeight;
			if (e.platform == 'android') {
				Vue.prototype.CustomBar = e.statusBarHeight + 50;
			} else {
				Vue.prototype.CustomBar = e.statusBarHeight + 45;
			};
			// #endif
			// #ifdef MP-WEIXIN
			Vue.prototype.StatusBar = e.statusBarHeight;
			let custom = wx.getMenuButtonBoundingClientRect();
			Vue.prototype.Custom = custom;
			Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
			// #endif		
			// #ifdef MP-ALIPAY
			Vue.prototype.StatusBar = e.statusBarHeight;
			Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
			// #endif
		}
	})
},

pages.json 配置取消系统导航栏

"globalStyle": {
	"navigationStyle": "custom"
},

复制代码结构可以直接使用，注意全局变量的获取。

使用封装,在main.js 引入 cu-custom 组件。

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

page.vue 页面可以直接调用了

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
	<block slot="backText">返回</block>
	<block slot="content">导航栏</block>
</cu-custom>
参数 作用 类型 默认值
bgColor 背景颜色类名 String ''
isBack 是否开启返回 Boolean false
bgImage 背景图片路径 String ''
slot块 作用
backText 返回时的文字
content 中间区域
right 右侧区域(小程序端可使用范围很窄！)

使用原生小程序开发

从现有项目开始

下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录

App.wxss 引入关键Css main.wxss icon.wxss

@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* 你的项目css */
....

从新项目开始

下载源码解压获得/template，复制/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"
}

page.wxml 页面可以直接调用了

<cu-custom bgColor="bg-gradual-pink" isBack="{
  {true}}">
	<view slot="backText">返回</view>
	<view slot="content">导航栏</view>
</cu-custom>
参数 作用 类型 默认值
bgColor 背景颜色类名 String ''
isBack 是否开启返回 Boolean false
isCustom 是否开启左侧胶囊 Boolean false
bgImage 背景图片路径 String ''
slot块 作用
backText 返回时的文字
content 中间区域
right 右侧区域(小程序端可使用范围很窄！)

组件

基础元素

layout布局

Flex布局

父级添加class名flex

  • 固定尺寸

通过添加class名basic-{ {options}}来设置分栏大小，options可以取五个值，分别为xs、sm、df、lg、xl

 

固定尺寸

<view class="padding bg-white">
	<view class="flex flex-wrap">
		<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
		<view class="basis-df"></view>
		<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
		<view class="basis-df"></view>
		<view class="basis-df bg-grey margin-xs padding-sm radius">df(50%)</view>
		<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
		<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
	</view>
</view>
  • 比例布局

通过添加class名flex-{ {options}}来设置分栏大小，options可以取值sub、twice、treble，分别代表占比1，2，3

比例布局

<view class="padding bg-white">
	<view class="flex">
		<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
		<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
	</view>
	<view class="flex">
		<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
		<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
	</view>
	<view class="flex">
		<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
		<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
		<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
	</view>
</view>
  • 水平对齐（justify）

通过添加class名justify-{ {options}}来设置盒子水平对齐方式，options可以取值start、end、center、between、around，效果可以参考flex布局布局中的容器属性justify-content（Flex布局教程）

水平对齐

<view class="bg-white">
	<view class="flex solid-bottom padding justify-start">
		<view class="bg-grey padding-sm margin-xs radius">start</view>
		<view class="bg-grey padding-sm margin-xs radius">start</view>
	</view>
	<view class="flex solid-bottom padding justify-end">
		<view class="bg-grey padding-sm margin-xs radius">end</view>
		<view class="bg-grey padding-sm margin-xs radius">end</view>
	</view>
	<view class="flex solid-bottom padding justify-center">
		<view class="bg-grey padding-sm margin-xs radius">center</view>
		<view class="bg-grey padding-sm margin-xs radius">center</view>
	</view>
	<view class="flex solid-bottom padding justify-between">
		<view class="bg-grey padding-sm margin-xs radius">between</view>
		<view class="bg-grey padding-sm margin-xs radius">between</view>
	</view>
	<view class="flex solid-bottom padding justify-around">
		<view class="bg-grey padding-sm margin-xs radius">around</view>
		<view class="bg-grey padding-sm margin-xs radius">around</view>
	</view>
</view>
  • 垂直对齐（align）

通过添加class名align-{ {options}}来设置盒子垂直对齐方式，options可以取值start、end、center，效果可以参考flex布局布局中的容器属性align-item（Flex布局教程）

垂直对齐

<view class="bg-white">
	<view class="flex solid-bottom padding align-start">
		<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
		<view class="bg-grey padding-sm margin-xs radius">start</view>
	</view>
	<view class="flex solid-bottom padding align-end">
		<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
		<view class="bg-grey padding-sm margin-xs radius">end</view>
	</view>
	<view class="flex solid-bottom padding align-center">
		<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
		<view class="bg-grey padding-sm margin-xs radius">center</view>
	</view>
</view>

Grid布局

父级添加class名grid

  • 等分列

通过添加class名col-{ {options}}来实现栅格布局，options可以取值1、2、3、4、5

等分列

<view class="bg-white padding">
	<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
		<view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)" :key="indexs">{
  {index+1}}</view>
	</view>
</view>
  • 等高
最低0.47元/天 解锁文章
使用微信小程序开发制作一个简易的闹钟提醒应用
m0_75244442的博客
07-21 304
总结一下，使用微信小程序开发制作一个简易的闹钟提醒应用的步骤包括创建微信小程序项目、设计应用界面、编写界面逻辑代码、配置小程序的路由和页面。微信小程序是一种开发在微信平台上的应用程序，它可以在用户的微信中直接运行，而不需要像其他应用程序那样下载和安装。考虑到微信小程序的限制，我们将使用小程序的基本框架和功能，以及一些常用的组件和API来实现这个应用。首先，我们需要在应用启动时获取已设置的闹钟列表，并将其存储在页面的data中。在该页面的WXSS文件中，我们可以使用CSS样式来美化界面，并使用。
微信小程序-colorUI组件库
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-12 1万+
之前记录了weUI组件库的基础使用，现在用一下更加【漂酿】的colorUI，weUI组件库的博客在这里：微信小程序-weUI组件库_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120673884 相较于weUI和原生微信小程序样式的统一，colorUI更注重于【个性】，它的样式很动感，blingbling的，比较适合做一些活泼的活动小程序 ...
colorui 文档
qq_41416296的博客
08-08 1361
color ui 文档
小程序组件库ColorUI教程
前端视听
08-18 2391
在开发uniapp的时候，最佳的ui框架就是ColorUI，ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！ 颜值很高，注重颜值的程序员，可以选择考虑一下哦。 github地址： https://github.com/weilanwl/ColorUI 在色彩设计上，都是非常的好看，非常的丰富的。 今天在做小程序 的时候，由于自己的页面需求的卡片，列表，以及ui色彩搭配都和这个框架里面所提供的组件都高度契合，之前做app开发的时候也一直在用
小程序：主流UI框架
最新发布
snow的博客
04-01 440
特点：集成了丰富的UI组件，UI设计风格简洁现代，非常适合开发现代化应用。特点：轻量、可靠，提供了全面的组件，涵盖了大量的UI组件，满足各种开发需求。特点：与微信原生视觉体验保持一致，提供丰富的组件，如按钮、提示框、列表等，方便开发者快速构建界面。特点：遵循Ant Design的设计规范，提供了一整套高质量的组件，适合构建企业级的应用程序。适用场景：适用于使用uni-app开发的小程序项目，能够快速构建高质量的界面。特点：遵循简洁、易用的设计规范，提供了一些常用的组件，如按钮、导航栏等。
ColorUI使用与技巧
Linlietao0587的博客
12-23 1万+
1 ColorUI学习 1.1 准备 引入资源 demo中的colorui – app.wxss @import '/colorui/icon.wxss'; @import '/colorui/main.wxss'; 1.2 自定义导航栏 app.json 配置取消系统导航栏，并全局引入组件 "window": { "navigationBarBackgroundColor": "#39b54a", "navigationBarTitleText": "Color UI", "naviga
color ui的使用
wuzheng8023的博客
08-08 7591
目录一、什么是ColorUI二、如何使用:第一步 下载代码包，获取素材第二步 使用demo文件，正式使用第三步 正式使用（再次强调，我是基于上面提到的第二种方式引入colorui组件的） 官网网站：https://github.com/weilanwl/ColorUI 一、什么是ColorUI ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。 二、如何使用: 第一步 下载代码包，获取素材 如何下载呢？直接在GitHu
colorUI框架使用教程
热门推荐
待到春花烂漫时
03-10 10万+
最近在帮别人做一个小程序，问起熟悉小程序的同伴们用什么UI框架比较好，在网上也又搜了一遍，感觉这个突然出现的ColorUI很有意思，也很精美，于是乎就试了一下，这里说一下自己初次使用所遇到的坑与感想： 首先，单从小程序UI的方面来讲，能与ColorUI比肩的框架着实是没几个了，它好在哪？ 其一：组件精美，可以说每一个都制作精良，作者很用心，UI功底很扎实。 其二：封装性特别特别的好，每一个单...
Color-UI 简介及使用教程
interest_ing_的博客
07-11 7524
小程序开发最好用的组件库——ColorUI；用过就离不开了！这是一个鲜亮的高饱和色彩，专注视觉的小程序组件库 。ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。需要你引入样式后可以根据class来调用使用。只需要在HTML或wxml标签中加入想要样式的class类名，就可以调用组件库中提前编辑好的样式，大大提高了开发效率。
ColorUI组件库简易教程之扩展插件
仗剑东游的猫
11-22 9722
按照惯例，在此奉上官方示例！！！ 目录 扩展插件 索引列表 微动画 全屏抽屉 垂直导航 扩展插件 索引列表 索引列表主要由scroll-view标签实现，类名为indexes，具体js逻辑请看源码，有些我没看懂，希望看懂的大佬教教我 <template> <view> <view class="cu-bar bg-white...
微信小程序 简易计算器实现代码实例
10-16
微信小程序简易计算器的实现涉及到UI设计、事件监听、数据管理以及计算逻辑。通过`wxml`构建界面，`wxss`设置样式，`js`处理交互，我们可以创建一个功能完整的计算器。在实际开发过程中，可能还需要处理更复杂的边界...
ColorUI-小程序原生高颜值组件库--ColorUI组件库.zip
09-23
简介hi!开发者！ColorUI迎来了2.0的升级，相比之前的版本，2.0版本重构了基础代码，增加了更多的配色，这是一个全新的小程序UI解决方案。ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！项目为个人开源项目，如果项目有帮到你，希望能支持下开发者。使用下载源码包可得到 Demo 和 Template 两个项目， Demo 包含所有组件源码。 Template 是一个已经引用了ColorUI的空白模板。Demo 即文档。在线文档 编写中...交流微信群：加入微信群请先添加开发者微信，备注GitHub。QQ群：240787041 或扫描二维码。
【微信技术-微信小程序】------ 使用ColorUI组件简单入门
皮皮冰要做大神
03-11 1万+
提示：使用colorui组件在微信小程序使用 必须先懂得微信开发工具的使用。 文章目录前言一、ColorUI是什么？二、使用步骤1.下载ColorUI组件文件2.微信开发工具项目引用colorui组件2.1 操作方式一 如下（示例）：`前提是项目已经存在，想在引用colorui组件`2.2 操作二 方式如下（示例）：`前提是项目还没开始，想在引用colorui组件`总结 前言 如何通过微信开发工具使用ColorUI组件 一、ColorUI是什么？ ColorUI是一个Css类的UI组件库！在你引入样.
UIColor
我是小黑，我要发发。
06-19 789
UIColor管理颜色   使用三原色生成颜色: UIColor *color = [UIColor colorWithRed:0.0 green:0.5 blue:1.0 alpha:1.0]; l  色0.0~1.0 l  透明度0.0~1.0 使用已有颜色生成颜色: UIColor *color = [UIColor whiteColor]; color =
color ui
qinjinhua_的博客
07-20 1万+
ColorUI是一个css库！！！
微信小程序colorUI的使用
weixin_46972614的博客
08-13 2167
微信小程序colorUI的使用 第一步： GitHub下载地址：https://github.com/weilanwl/ColorUI 第二步： 下载完成解压后得到该文件 文件结构如下： 需要查看效果： 直接使用小程序打开该文件 会得到如下效果： 需要在自己的项目中使用某个功能时，将这两个文件拷贝至你的项目目录中 我是放在component文件夹中，如 反正重点就是需要这两个文件 接着就是在app.wxss公共样式文件中引入： 现在就是所有的配置已完成，然后找一个自己需...
UIColor的用法
weixin_30267785的博客
11-18 96
UIColor，CGColor，CIColor的区别和联系 layer.shadowColor = [UIColor redColor].CGColor; 这个是今天用到的。顺便总结一下。 1、UIColor的两个属性CGColor，CIColor 　　UIColor的CGColor总是有效的，不管它是通过CGColor，CIColor，还是其他方法创建的，CGColor属性都总是...
ColorUICSS 项目教程
gitblog_00103的博客
08-09 499
ColorUICSS 项目教程 项目地址:https://gitcode.com/gh_mirrors/co/coloruicss 1. 项目的目录结构及介绍 ColorUICSS 项目的目录结构如下： coloruicss/ ├── css/ │ ├── colorui.css │ └── colorui.min.css ├── demo/ │ ├── index.html │ ...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值