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

组件类型

• ColorUI
• Vant weapp

ColorUI

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

简介

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

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

群资源

贴上链接：群资源

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

原生小程序开发

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

下载

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

样式引入

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

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

自定义导航栏的使用

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

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

14
1
// app.js
2
 onLaunch: function() {
3
     
4
    this.globalData = {} // 务必确保这一行在前面
5
     
6
    wx.getSystemInfo({
7
      success: e => {
8
        this.globalData.StatusBar = e.statusBarHeight;
9
        let custom = wx.getMenuButtonBoundingClientRect();
10
        this.globalData.Custom = custom;  
11
        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
12
      }
13
    })
14
},

2：在app.json中关闭默认导航栏样式和引入自定义导航栏

9
1
// app.json
2
{
3
    "window": {
4
        "navigationStyle": "custom"  
5
    },
6
    "usingComponents": {
7
        "cu-custom": "/colorui/components/cu-custom", // 引入colorui的自定义导航栏
8
    }
9
}

3：在页面中使用

5
1
// page.html
2
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
3
    <view slot="backText">返回</view>
4
    <view slot="content">导航栏</view>
5
</cu-custom>

结果如下：

其余配置

组件组成

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

1：基础元素

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

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

字体大小

文字对齐

页面布局

flex布局

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

固定尺寸

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

比例布局

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

水平对齐

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

垂直对齐

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

内外边距

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

图标用法

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

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

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

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

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

2：交互组件

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

3：插件拓展

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