本文接前天的小程序开发第一篇文章，上篇文章完成了微信官方提供的小程序初始模板代码的构建，今天这篇文章主要讲解小程序使用colorUI框架，并构建一个简单的页面。

前注: 1.本文代码基于第一篇文章的基础之上

2.本文将近一千字，阅读大约10分钟，建议按步骤实操

1.到github将colorUI的代码下载到本地，将/demo下的/colorui目录和/images目录复制到我们项目的根目录下(即colorui和pages是同级目录)

2.修改app.wxss文件，在文件的前两行加上

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

3.修改app.js文件，在onLaunch 函数内加上这段代码

//自定义头部展示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;   }})//该段代码是colorui专门为自定义页面头部展示而设置各个参数

4.修改app.json文件，加上usingComponents参数

"usingComponents": {    "cu-custom": "/colorui/components/cu-custom" } //该参数也是为了设置自定义页面头部

截止到这一步，colorui框架的引入一完成，接下来写两个tabbar页面来使用上colorui。

为方便演示，页面名分别为main(首页)和mine(我的)

5.创建两个page，创建page的方式如下

5.1 pages目录上右键,选择新建文件夹，文件夹名称写为main

5.2 在新建的main文件夹上右键，选择新建page，page名称也写为main

5.3 mine页面也是同5.1和5.2的创建方法

5.4 修改app.json文件，将以下两个值放到pages参数的第一二位。

备注：main和mine页面创建好后，在app.json文件的pages参数中已经有如下两个值

"pages/main/main","pages/mine/mine",

6.修改app.json文件，添加tabbar参数

"tabBar": {    "color": "#a9b7b7",    "selectedColor": "#11cd6e",    "borderStyle": "white",    "list": [      {        "pagePath": "pages/main/main",        "text": "首页",        "iconPath": "/images/tabbar/basics.png",        "selectedIconPath": "/images/tabbar/basics_cur.png"      },      {        "pagePath": "pages/mine/mine",        "text": "我的",        "iconPath": "/images/tabbar/about.png",        "selectedIconPath": "/images/tabbar/about_cur.png"      }    ]  }

7.编辑/pages/main/main.wxml，该文件内容改为

  首页   测试按钮

8.编辑/page/mine/mine.wxml，该文件内容改为

  我的   我的测试按钮

9.CTRL + s 保存文件，即可自动构建，最终生成的界面如下

至此，已完成colorui框架的接入，并简单的用上了这个框架啦，代码后续会放到github，github地址在评论区给出。

这个框架色彩确实很好看，强烈推荐使用。

后注:

colorUI的github地址:

https://github.com/weilanwl/ColorUI/

colorUI的git下载链接:

https://github.com/weilanwl/ColorUI.git