微信小程序踩坑记——ColorUI组件的使用

微信小程序踩坑记——组件的使用

组件类型

• ColorUI

• Vant weapp

ColorUI

首先贴上官网链接：官网链接，GitHub链接

简介

ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。

不得不说的是，该组件库的作者很优秀啊，整个项目做完，用的最多的就是ColorUI组件，该组件不仅好看，而且相对来说，可控性很强，如果不满意，完全可以按照自己的需求更改。该组件库本身就是一个小程序，我们在Github上下载源码之后，直接用微信开发者工具打开即可。

群资源

贴上链接：群资源

该组件还有自己的资源库，里面都是十分优秀的资源，虽然这次在我的项目里没有看到，但简单粗略的看了一下，都很优秀。

原生小程序开发

小程序的使用，GitHub上已经写的很清楚了，贴上链接：原生小程序开发

下载

下载Github上的组件之后，解压，复制ColorUI-master\demo\下面的colorui文件夹到自己项目里的根目录即可（即与app.js等同级）

样式引入

在app.wxss中引入colorui中的样式库，示例如下：

/**app.wxss**/
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "colorui/animation.wxss";  /** 最后这个看自己需求，如果需要使用微动画则可以引入**/

自定义导航栏的使用

colorui给我们提供了其自定义的导航栏，效果是很不错的，如果需要引入的话，需要在app.json全局配置中添加自定义组件，使用步骤如下：

1：在app.js获取系统信息（确定合适的导航栏高度）

// app.js
 onLaunch: function() {
     
    this.globalData = {} // 务必确保这一行在前面
     
    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中关闭默认导航栏样式和引入自定义导航栏

// app.json
{
    "window": {
		"navigationStyle": "custom"  
	},
    "usingComponents": {
    	"cu-custom": "/colorui/components/cu-custom", // 引入colorui的自定义导航栏
  	}
}

3：在页面中使用

// page.html
<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	右侧区域(小程序端可使用范围很窄！)

组件组成

colorui主要分成三部分：基础元素，交互组件，插件拓展。

1：基础元素

colorui拥有强大的样式预设，在开始自己的项目之前，好好了解一下colorui的样式预设对自己项目开发拥有极大的帮助。这些样式预设，可以让我们不用再去wxss文件写某元素的样式，如果colorui提供的预设库里有我们想要设定的样式，直接在该元素的class类名里添加上预设的类名即可。

<!--page.wxml-->
<!--使用预设，无需再写css部分-->
<text class="text-black text-bold">您的订单已提交成功！</text>

字体大小

类名	介绍	实际属性	说明
text-xsl	特大号字	font-size: 120rpx;	用于图标、数字等特大显示
text-sl	较大号字	font-size: 80rpx;	用于图标、数字等较大显示
text-xxl	特殊字	font-size: 44rpx;	用于金额数字等信息
text-xl	页面大标题	font-size: 36rpx;	页面大标题，用于结果页等单一信息页
text-lg	页面小标题	font-size: 32rpx;	页面小标题，首要层级显示内容
text-df	正文	font-size: 28rpx;	页面默认字号，用于摘要或阅读文本
text-sm	辅助信息	font-size: 24rpx;	页面辅助信息，次级内容等
text-xs	说明文本	font-size: 20rpx;	说明文本，标签文字等关注度低的文字

文字对齐

类名	介绍	实际属性
text-left	特大号字	text-align: left;
text-center	较大号字	text-align: center;
text-right	特殊字	text-align: right;

页面布局

flex布局

flex布局阮一峰老师有一篇博客我个人觉得写得很清楚，贴上链接：Flex 布局教程：语法篇，colorui里并非将flex拓展，而是将flex语法同上面的样式预设一样，已经预先写好了许多预设，我们要使用的话，直接在class中添加类名即可。

固定尺寸

在父级元素类名中添加flex flex-wrap之后，在子级元素类名添加以下类名即可。

类名	介绍	实际属性
basis-xs	20%宽度	flex-basis: 20%;
basis-sm	40%宽度	flex-basis: 40%;
basis-df	50%宽度	flex-basis: 50%;
basis-lg	60%宽度	flex-basis: 60%;
basis-xl	80%宽度	flex-basis: 80%;

比例布局

在父级元素类名中添加flex之后，在子级元素类名添加以下类名即可。

类名	介绍	实际属性
flex-sub	相同宽度	flex: 1;
flex-twice	两倍宽度	flex: 2;
flex-treble	50%宽度	flex: 3;

水平对齐

在父级元素类名中添加flex ，同时添加以下类名即可。

类名	介绍	实际属性
justify-start	左对齐（默认值）	justify-content: flex-start;
justify-end	右对齐	justify-content: flex-end;
justify-center	居中	justify-content: center;
justify-between	两端对齐，项目之间的间隔都相等。	justify-content: space-between;
justify-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。	justify-content: space-around;

垂直对齐

在父级元素类名中添加flex ，同时添加以下类名即可。

类名	介绍	实际属性
align-start	起点对齐	align-items: flex-start;
align-end	终点对齐	align-items: flex-end;
align-center	中点对齐	align-items: center;

内外边距

内外边距一共有五种尺寸，{size}类名分别为：xs，sm，df，lg，xl，分别从10rpx，20rpx，30rpx，40rpx，50rpx。

类名	介绍	类名	介绍
.margin-{size}	外边距	.padding-{size}	外边距
.margin-lr-{size}	水平方向外边距	.padding-lr-{size}	水平方向内边距
.margin-tb-{size}	垂直方向外边距	.padding-tb-{size}	垂直方向内边距
.margin-top-{size}	上外边距	.padding-top-{size}	上内边距
.margin-right-{size}	右外边距	.padding-right-{size}	右内边距
margin-bottom-{size}	下外边距	.padding-bottom-{size}	下内边距
.margin-left-{size}	左外边距	.padding-left-{size}	左内边距

图标用法

由于之前在app.wxss引入了icon.css，因此在这里要使用的话，直接用即可。

使用方法：text标签，类名：cuIcon-{{name}}

<!--page.wxml-->
<text class="cuIcon-apps text-gray"></text>

其中，colorui的图标，大部分是有两个模式的，一个普通状态，一个fill状态。fill状态直接在普通状态的名字后面加上fill即可。

其他用法这里就不一一详述了，直接看源文件即可。

2：交互组件

组件部分没什么好讲的，需要某个组件的时候，直接找到界面路径，然后进去复制需要组件的那一段代码即可。需要注意的地方也就是看看wxml部分是否与wxs（js）部分有交互，如果有交互的话，记得把wxs（js）部分的代码也一并复制到自己的项目里即可，同理wxss部分也是一样。

3：插件拓展

**。fill状态直接在普通状态的名字后面加上fill即可。

其他用法这里就不一一详述了，直接看源文件即可。

2：交互组件

组件部分没什么好讲的，需要某个组件的时候，直接找到界面路径，然后进去复制需要组件的那一段代码即可。需要注意的地方也就是看看wxml部分是否与wxs（js）部分有交互，如果有交互的话，记得把wxs（js）部分的代码也一并复制到自己的项目里即可，同理wxss部分也是一样。

3：插件拓展

插件这个部分，我的项目里没有用到，所以，这里就不介绍了。