前言
ColurUI是一个为微信小程序提供的比较漂亮的样式组件库。由于它的作者精力有限，连文档也没有写，所以使用方法让人一头雾水，我这里讲解一下使用方法。
按照仅有的一点文档执行操作
从https://github.com/weilanwl/ColorUI下载zip，然后解压获得/Colorui-UniApp文件夹，复制目录下的/colorui文件夹到你的项目根目录。然后看作者写的那一点文档，照着做，果然，实现了一个顶部导航条。
接下来呢？
其实作者的意思是，你用微信扫码，翻阅ColurUI的DEMO，然后选择满意的组件，然后去源码里去抠代码。说白了，作者根本没有给你依次封装成组件。
但作者这样有一个好处：你的代码量会最小。
抠一个组件试试
比如我看中了组件-操作条-底部操作条-倒数第3个条，怎么抠代码？
- 打开
Colorui-UniApp\pages\component\bar.vue，找组件的相关代码，是：
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="bg-orange submit">加入购物车</view>
<view class="bg-red submit">立即订购</view>
</view>
- 拷到你的index.vue里，比如放最下面，就出来了。
- 后续还要有一些加工，因为它没有始终fixed在底部。我就不多说了。
如果也想封装，怎么办？
最初级的封装方法：
- 在作者文档里提到的cu-custom.vue旁边新建一个cu-bottombar.vue，内容是：
<template>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="bg-orange submit">加入购物车</view>
<view class="bg-red submit">立即订购</view>
</view>
</template>
其实都是vue.js的知识。
- main.js里加入：
import cuBottombar from './static/colorui/components/cu-bottombar.vue'
Vue.component('cu-bottombar',cuBottombar)
- 你的index.vue里加入：
<cu-bottombar></cu-bottombar>
效果（下面那个是组件化之后的）：
优化组件
不多说，可以加入slot、样式，都是vue.js本身的知识。
封装进阶
首先要熟练掌握自定义组件的开发，文档是https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
一些自定义组件要求的细节，uniapp是不会帮你自动搞定的，需要你自己来，比如：
在组件内，
uni.createSelectorQuery()是需要加上.in(this)，也就是uni.createSelectorQuery().in(this)组件周期函数要按照腾讯的要求来，而不是按照uniapp说的页面周期函数来，我大致查了一下，uniapp没有提到组件周期函数，所以并不是说uniapp说错了，而是没说过。比如，组件内根本没有
onLoad、onShow，而是https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html提到的那些周期函数，也就是created、attached、ready……
