一、说明与使用
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。













