UI是所有软件产品的颜值，使用UI系统，能够保证颜值在7~8分左右，而且不用花大量的时间写样式代码。所以，整合一套好用的“大漂亮”UI框架进来，是项目正式开发前，需要做的一项基础工作。
经过精心挑选之后，决定使用的UI框架叫做 ColorUI (一款想给你点颜色看看的UI)。好啦~我们开始搬砖~~
第一步：下载ColorUI组件
打开度娘直接搜索 ColorUI，第一个搜索结果 就是ColorUI官网，点击【下载开发版】即可。这一步简单的很~
第二步：将组件整合到uni-app项目中
打开 ColorUI-master\Colorui-UniApp，将colorui文件夹，复制到项目中。
在app.vue引入css
在main.js引入cu-custom 组件
完成以上两个步骤，就可以在项目中使用colorui了，怎么使用呢？
最简单粗暴的方式，可以从ColorUI的源码中复制自己想要的部分去使用。使用方式是导入下载的压缩包里面的那个demo文件，把它导入到小程序项目中。
打开后这里就可以查看你所需要的元素的源代码了：
之后找到你需要的标签，点击左下角打开路径（方便找到对应代码在哪，可忽略此步骤），再打开相应的xxx.wxml文件将你需要代码复制到你自己的项目中，就可以使用了。
到这一步对于使用微信小程序原生开发，应该就够用了。但是，使用uni-app设计页面，还可以再"偷懒"一步。就是下载一个已经整合了colorUI+uni-app的全套模板。
我下载的是这一套：
1、打开Hbuilder，导入项目
2、运行
看一下运行效果
OK，完成以上步骤。接下来，我们来做一个使用的示例。
做一个简单的授权登陆页面，授权登陆页面大概长什么样子？上一个步骤，别人画好的授权登陆页面，就挺好的，我们就照猫画虎也弄一个吧～
发表评论 取消回复