里面使用轮播_小程序ColorUI框架初步使用教程及个人项目实战

小程序ColorUI框架初步使用教程及个人项目实战

最近在写自己的一个微信小程序项目《阿涛技术博客》,目前还在写前端小程序部分,之前我有用过小Weiui,Linui等微信小程序UI框架,在一次网上搜索的时候,看到了ColorUI框架后,当时就觉得眼前一亮,于是就顺便扫了一下ColorUI框架的示例小程序,第一感觉不是颜色炫丽,制作精美,常用微信小程序元素及常用组件,在这里面都能找到.

下边开始介绍它的使用方法，我们先从github上下载的它的文件：

GitHub地址：https://github.com/weilanwl/ColorUI/

一、将ColorUI框架导入微信小程序开发者工具

下载完成后,解开压缩包,我们会得到Colorui-UniApp,demo,template这三个文件夹,然后用于微信小程序开发的,就选template这个文件夹

ColorUI框架

template是一个空白的小程序模板，ColorUI框架作者已经将ColorUI的使用环境搭建好了，我们可以直接在上边开始我们自己的项目。

二、下面再来介绍下ColorUI框架的初步使用.

调用icon组件:

 20

调用文章卡片,未使用框架前,用flex布局,大家看下代码

 [Excel]Excel2017实用技巧之Vlookup的应用Excel31995个月前

使用flex布局制作的文章卡片

然后使用ColorUI框架后的就是这样.

调用Colorui框架代码

根据我自己小程序项目的需求,我把文章卡片上的两段文字加粗,当做文章标题使用,改造很方便,兼容性很强.

根据个人项目需求,我改造之后的样子

三、实战个人微信小程序项目

阿涛技术博客小程序

该小程序使用了微信小程序自定义导航

"navigationStyle": "custom"

微信小程序自定义导航常用的“胶囊按钮”不用自己去网上到处找代码，用ColorUI框架三行代码就解决.

小程序自定导航

然后顶部和底部导航,还有轮播图片都是直接到colorUI框架的demo中直接复制粘贴,就能完成微信小程序UI页面.