最近在写自己的一个微信小程序项目《阿涛技术博客》,目前还在写前端小程序部分,之前我有用过小Weiui,Linui等微信小程序UI框架,在一次网上搜索的时候,看到了ColorUI框架后,当时就觉得眼前一亮,于是就顺便扫了一下ColorUI框架的示例小程序,第一感觉不是颜色炫丽,制作精美,常用微信小程序元素及常用组件,在这里面都能找到.
下边开始介绍它的使用方法,我们先从github上下载的它的文件:
GitHub地址:https://github.com/weilanwl/ColorUI/
一、将ColorUI框架导入微信小程序开发者工具
下载完成后,解开压缩包,我们会得到Colorui-UniApp,demo,template这三个文件夹,然后用于微信小程序开发的,就选template这个文件夹
template是一个空白的小程序模板,ColorUI框架作者已经将ColorUI的使用环境搭建好了,我们可以直接在上边开始我们自己的项目。
二、下面再来介绍下ColorUI框架的初步使用.
调用icon组件:
20
调用文章卡片,未使用框架前,用flex布局,大家看下代码
[Excel]Excel2017实用技巧之Vlookup的应用Excel31995个月前
然后使用ColorUI框架后的就是这样.
根据我自己小程序项目的需求,我把文章卡片上的两段文字加粗,当做文章标题使用,改造很方便,兼容性很强.
三、实战个人微信小程序项目
该小程序使用了微信小程序自定义导航
"navigationStyle": "custom"
微信小程序自定义导航常用的“胶囊按钮”不用自己去网上到处找代码,用ColorUI框架三行代码就解决.
然后顶部和底部导航,还有轮播图片都是直接到colorUI框架的demo中直接复制粘贴,就能完成微信小程序UI页面.