前言

ColurUI是一个为微信小程序提供的比较漂亮的样式组件库。由于它的作者精力有限，连文档也没有写，所以使用方法让人一头雾水，我这里讲解一下使用方法。

按照仅有的一点文档执行操作

从https://github.com/weilanwl/ColorUI下载zip，然后解压获得/Colorui-UniApp文件夹，复制目录下的/colorui文件夹到你的项目根目录。然后看作者写的那一点文档，照着做，果然，实现了一个顶部导航条。

image.png

接下来呢？

其实作者的意思是，你用微信扫码，翻阅ColurUI的DEMO，然后选择满意的组件，然后去源码里去抠代码。说白了，作者根本没有给你依次封装成组件。

但作者这样有一个好处：你的代码量会最小。

抠一个组件试试

比如我看中了组件-操作条-底部操作条-倒数第3个条，怎么抠代码？

1. 打开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>

2. 拷到你的index.vue里，比如放最下面，就出来了。

image.png

3. 后续还要有一些加工，因为它没有始终fixed在底部。我就不多说了。

如果也想封装，怎么办？

最初级的封装方法：

1. 在作者文档里提到的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的知识。

2. main.js里加入：

import cuBottombar from './static/colorui/components/cu-bottombar.vue'
Vue.component('cu-bottombar',cuBottombar)

3. 你的index.vue里加入：

<cu-bottombar></cu-bottombar>

效果（下面那个是组件化之后的）：

image.png

优化组件

不多说，可以加入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……