前言
ColurUI是一個(gè)為微信小程序提供的比較漂亮的樣式組件庫该园。由于它的作者精力有限，連文檔也沒有寫帅韧，所以使用方法讓人一頭霧水里初，我這里講解一下使用方法。
按照僅有的一點(diǎn)文檔執(zhí)行操作
從https://github.com/weilanwl/ColorUI下載zip忽舟，然后解壓獲得/Colorui-UniApp文件夾双妨，復(fù)制目錄下的/colorui文件夾到你的項(xiàng)目根目錄。然后看作者寫的那一點(diǎn)文檔叮阅，照著做刁品，果然，實(shí)現(xiàn)了一個(gè)頂部導(dǎo)航條浩姥。
接下來呢哑诊？
其實(shí)作者的意思是，你用微信掃碼及刻，翻閱ColurUI的DEMO镀裤，然后選擇滿意的組件竞阐，然后去源碼里去摳代碼。說白了暑劝，作者根本沒有給你依次封裝成組件骆莹。
但作者這樣有一個(gè)好處：你的代碼量會(huì)最小。
摳一個(gè)組件試試
比如我看中了組件-操作條-底部操作條-倒數(shù)第3個(gè)條担猛，怎么摳代碼幕垦？
- 打開
Colorui-UniApp\pages\component\bar.vue，找組件的相關(guān)代碼傅联，是：
<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里先改，比如放最下面，就出來了蒸走。
- 后續(xù)還要有一些加工仇奶，因?yàn)樗鼪]有始終fixed在底部。我就不多說了比驻。
如果也想封裝该溯，怎么辦？
最初級(jí)的封裝方法：
- 在作者文檔里提到的cu-custom.vue旁邊新建一個(gè)cu-bottombar.vue别惦，內(nèi)容是：
<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>
其實(shí)都是vue.js的知識(shí)狈茉。
- main.js里加入：
import cuBottombar from './static/colorui/components/cu-bottombar.vue'
Vue.component('cu-bottombar',cuBottombar)
- 你的index.vue里加入：
<cu-bottombar></cu-bottombar>
效果（下面那個(gè)是組件化之后的）：
優(yōu)化組件
不多說，可以加入slot掸掸、樣式氯庆，都是vue.js本身的知識(shí)。
封裝進(jìn)階
首先要熟練掌握自定義組件的開發(fā)扰付，文檔是https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
一些自定義組件要求的細(xì)節(jié)点晴，uniapp是不會(huì)幫你自動(dòng)搞定的，需要你自己來悯周，比如：
在組件內(nèi)，
uni.createSelectorQuery()是需要加上.in(this)陪竿，也就是uni.createSelectorQuery().in(this)組件周期函數(shù)要按照騰訊的要求來禽翼，而不是按照uniapp說的頁面周期函數(shù)來，我大致查了一下族跛，uniapp沒有提到組件周期函數(shù)闰挡，所以并不是說uniapp說錯(cuò)了，而是沒說過礁哄。比如长酗，組件內(nèi)根本沒有
onLoad、onShow桐绒，而是https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html提到的那些周期函數(shù)夺脾，也就是created之拨、attached、ready……
