简单介绍
优势
一：组件精美，可以说每一个都制作精良，作者很用心，UI功底很扎实。
二：封装性特别特别的好，每一个单独的class选择器，都是一个封装极好的css小组件
三：感受到了作者的过人之处，组件代码具有良好的兼容性，扩展性，我们可以在它的基础上进行灵活的修改。
使用速成，快速脱坑
使用的小技巧和组件使用的简单介绍
完成项目创建之后，看着精美的模板，是不是感叹它的神奇呢？别着急，用了之后你会更加感叹，超级好用！！！
我们简单制作个小程序首页为案例分析下如何操作既简单又方便。
首先提出一些问题，我们带着问题跟着教程走，逐步解决问题，传授技巧：
- 怎么快速的找到代码在哪？
- 底部导航栏，顶部标题栏怎么保持它一直在底部、顶部？
- 为什么我复制代码后页面显示的效果和模板不一样？
- 组件，底部的导航栏怎么点击不出动态的效果呢？
- 我想更换组件的图片或文字，要怎么操作呢？
- 我想弄出选项卡切换后下面内容跟着切换怎么实现？
每个页面最上面有个标题栏，有时会带有返回，关闭等这些按钮，和页面最底下的tabBar导航栏，我们先做这两个。
脱坑第一招：善用后台调试的小箭头，查看wxml和css样式代码
看到图片中的左上角的箭头图标了吗？这是我们开发者在浏览器中最常用的元素查看器，点击后将箭头指向页面的某一部分，在后台就能看到对应这一部分的页面代码在哪了，同时还有css样式的代码。
这里提醒一下，注意要点击才有，想查看其他文件的代码，记得点击后点击console再选择wxml更新代码。代码和样式仅用来观看，不要为了方便直接复制对应的代码和样式。我们可以通过关键字来到对应的文件查找代码或样式。
脱坑第二招：善用小程序快捷键，加快效率
最好用的就是ctrl+F，可以在所在文件中输入关键字搜索到具体位置，除此外还有其他常用快捷键，同时还有代码提示生成的一些插件，有兴趣的可以上网查找，我是配置的Visual Studio Code的插件，微信开发工具自己就有了。
ctrl+F/鼠标连点三下 选择光标所在的行
ctrl+S 保存并编译代码
Alt+ ↑ ↓ 移动光标所在行的整行代码
shift+鼠标 按住shift 鼠标前后点击的范围内代码被选中
shift+alt+F 格式化代码，代码缩进等
怎么保持组件和TabBar一样固定在底部呢？
看下效果，上面1、3问题都解决了，来看在2、5问题，怎么保持顶框和底框不动呢？？？我们知道小程序有个app.json里有tabBar底层导航栏设置，但细心的朋友能发现我们代码里是没有的，说明colorUI没有使用这样的方法，只是单纯固定了组件而已，而方法更是简单的令人发指，就是在组件的最外层的style最后补上foot，foot为置底。我们也可以通过第一招来查看模板代码，也可以发现shdow foot的存在。
图片中最左边为我的效果图，选取了中间的红色组件和右边的黑色组件。可以看到组件效果成功，并且颜色，文字有所改变，怎么做到的呢？？
这里贴代码哈，具体修改不在图上标识了。首先，我们能看到最外层class中有bg-white 和内层里有 text-green text-gray，知道了吧，这里我们可以到icon.wxss里搜一下关键词，能看到也有其他的颜色的样式，我这里就不贴图了，复制后能更改样式颜色，文字也可以通过js进行绑定动态修改或直接修改。