一、说明与使用
ColorUI是一个css库。如果使用原生小程序开发，从https://github.com/weilanwl/ColorUI/下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录（与pages目录同级）。
目录结构如下：
在app.wxss 引入关键Css :main.wxss ,icon.wxss
/**app.wxss**/@import "colorui/main.wxss";@import "colorui/icon.wxss";同时在微信开发者工具中，打开ColorUI2.0-demo，效果如下所示：
二、常见场景使用
选择你需要的样式，找到对应的.WXML，复制需要样式的代码到你需要的页面即可。
- 比如常见的搜索框：
<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px"> <view class="search-form round"> <text class="icon-search"></text> <input type="text" placeholder="搜索" confirm-type="search" bindinput="searchIcon"></input> </view></view>- 比如消息或者富矿状态下的数字标签类别：
<view class="padding flex justify-between align-center"> <view class="cu-avatar xl radius"> 港 <view class="cu-tag badge">99+</view> </view> <view class="cu-avatar xl radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"> <view class="cu-tag badge">9</view> </view> <view class="cu-avatar xl radius"> <view class="cu-tag badge"></view> <text class="icon-people"></text> </view> <view class="cu-avatar xl radius"> <view class="cu-tag badge">99+</view> </view></view>- 比如特殊样式的底部导航栏：
<view class="cu-bar tabbar margin-bottom-xl bg-white"> <view class="action text-green"> <view class="icon-homefill"></view> 首页 </view> <view class="action text-gray"> <view class="icon-similar"></view> 分类 </view> <view class="action text-gray add-action"> <button class="cu-btn icon-add bg-green shadow"></button> 发布 </view> <view class="action text-gray"> <view class="icon-cart"> <view class="cu-tag badge">99</view> </view> 购物车 </view> <view class="action text-gray"> <view class="icon-my"> <view class="cu-tag badge"></view> </view> 我的 </view></view>更多操作，请参考ColorUI2.0-demo。
