[移动开发] 被圈粉的微信小程序纯UI组件colorUi

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 被圈粉的微信小程序纯UI组件colorUi -> 正文阅读

[移动开发]被圈粉的微信小程序纯UI组件colorUi

摘要：作为一名不了解ui的开发，但又想开发一款界面好看的小程序，那我极力推荐今天的主角-colorUi，它的优点在于提供了很多常用的纯ui组件，不掺杂任何逻辑，而且引入简单，轻量级！很适合没有ui基础又想快速制作一款小程序的开发者，下面一起了解一下。

1、基础元素
基础元素包含布局、背景、图标、文本等等一些常用的元素，可以直接拷贝粘贴使用，非常简单易用。
在这里插入图片描述
2、丰富的组件
一些常用的组件也是顺手拈来，每个组件都提供了多种样式可供选择，还能进行自定义，可以说对新手非常友好了！

3、引入colorUi
GitHub地址：https://github.com/weilanwl/ColorUI/
直接下载zip包
解压后引入colorUI的样式在app.wxss中加上就完成了它的样式引用。
@import “colorui/main.wxss”;
@import “colorui/icon.wxss”;
@import “./lib/colorui/animation.wxss”; //调用动画效果需要
4、解压后进入colorUi目录
在这里插入图片描述

/**app.wxss**/
@import "icon.wxss";
@import "main.wxss";
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
} 

button {
  background: initial;
}

button:focus{
  outline: 0;
}