里面使用轮播_小程序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组件:

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

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

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

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

调用Colorui框架代码

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

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

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

阿涛技术博客小程序

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

"navigationStyle": "custom"

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

小程序自定导航

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

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

【微信小程序调用百度API实现图像识别功能】----项目实战
本章主要讲述: 如何更快的上手小程序如何搭建一个页面以及跳转到另一个页面如何调用百度API接口实现图像识别技术如何在微信小程序的后台添加合法域名私信获取源码,有问题可以关注留言或私信,计算机毕 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
微信小程序_小程序开发框架
微信小程序_小程序开发框架微信小程序框架微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
小程序scroll-view，滚动到最低_小程序滚动到底部
小程序scroll-view,滚动到最低_小程序滚动到底部小程序滚动条,滚到最底部解决方案1 小程序滚动到底部使用Scorll-view实现方案: scrill-view:组件要固定高度. scro ...
小程序模板网站平台_小程序模板平台哪个好
小程序模板网站平台_小程序模板平台哪个好?分享一个微信小程序模板平台,超60个行业的小程序模板免费使用,页面内容丰富样式多样的,小程序界面模板. 微信小程序模板网站平台微信小程序模板平台的存在,就是 ...
小程序模板报价_小程序模板价格_小程序模板使用多少钱
小程序模板报价_小程序模板价格_小程序模板使用多少钱? 分享一个☞ 微信小程序模板平台,超60个行业的小程序模板免费使用. 在这个平台,小程序模板是免费使用的.收费部分是这个平台提供的小程序功能,档次 ...
多文档程序两个menu框架_汇总9款优秀的开源小程序UI框架
卧槽这玩意儿写的这么烂,我可以写一个更烂的来恶心作者--开源社区,经典语录随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 布莱恩特:Github优秀的小程序 ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...

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

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

最新文章

热门文章