WeUI框架

2024-03-14 08:20
文章标签 框架 weui

本文主要是介绍WeUI框架,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

WeUI框架

WeUI是一套小程序的UI框架,所谓UI框架就是一套界面设计方案,有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了UI框架,我们就可以让我们的小程序变得更加美观。

体验WeUi小程序

WeUI是微信官方设计团队的一套同微信原生视觉体验一致的基础样式库,在手机微信里搜索WeUI小程序即可。

下载源码就可以看到weui-wxss-master文件夹,导入项目,体验

为什么是weui-wxss-master下的dist⽂件夹,⽽不是weui-wxss-master? 你还记得什么是⼩程序的根⽬录吗?

下载了WeUI的源代码,其实WeUI的核⼼⽂件是weui.wxss。

如何在我们 的模板⼩程序⾥使⽤WeUI的样式呢?

├── pages  
├── image  
├── style
│   ├── weui.wxss  
├── app.js
├── app.json
├── app.wxss

把weui⼩程序dist/style⽬录下的weui.wxss⽂件粘贴到style的⽂件夹⾥

@import 'style/weui.wxss';

Flex布局

布局也是⼀种样式,也属于css⽅⾯的知识哦Flex是Flexible Box的缩写,意为”弹性布局”

<view class="flex-box"><view class='list-item'>Python</view><view class='list-item'>⼩程序</view><view class='list-item'>⽹站建设</view>
</view>
.list-item{background-color: #82c2f7;height: 100px;text-align: center;border:1px solid #bdd2f8; 
}

让组件变成左右关系

.flex-box{display: flex; 
}

让组件的宽度均分

.list-item{flex:1; 
}

让组件内的内容垂直居中

.list-item{display: flex;align-items:center;/*垂直居中*/justify-content: center;/*⽔平居中*/}

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作⽤于每⼀个⻚⾯。

在 page 的 wxss ⽂件中定 义的样式为局部样式,只作⽤在对应的⻚⾯,并会覆盖 app.wxss 中相同的选择器。

渐变与动画CSS的渐变Gradientlinear-gradient() 函数⽤于创建⼀个表示两种或多种颜⾊ 线性渐变的图⽚。

在gradient.wxml⻚⾯输⼊以下代码:

<view class="gradient-display">
</view>

在gradient.wxss⾥输⼊:

.gradient-display{background-image:linear-gradient(red, blue);width: 100vw;height: 100vh;}

它默认的渐变⽅向是从上到下改变渐变的⽅向

background-image: linear-gradient(45deg, blue, red);
/* 渐变轴为45度,从蓝⾊渐变到红⾊ */
background-image:linear-gradient(to left top, blue, red);
/* 从右下到左上、从蓝⾊渐变到红⾊ */
background-image:linear-gradient(0deg, blue, green 40%, red);
/* 从下到上(渐变轴为0度),从蓝⾊开始渐变、到⾼度40%位置是绿⾊渐变开始、最后以红⾊结束*/

Filter滤镜

滤镜filter属性,可以对图⽚进⾏⾼斯模糊、调整 对⽐度、转换为灰度图像、⾊相旋转、图⽚透明等操作。

⾼斯模糊blur,图⽚变灰grayscale(%),图⽚透 明opacity(%)

 .filter-display img{width: 150px;height: auto;}.blur{filter: blur(8px);}.grayscale{filter: grayscale(90%);}.opacity{filter: opacity(25%);}.multiple{filter: blur(8px) grayscale(90%) opacity(25%);}

变形属性Transform

CSS transform属性能通过修改CSS视觉格式化模型的坐标空间旋转、缩放、倾斜或平移给定 的组件。

变形Transform、过渡Transition、动画Animation

.transform-display image{width: 80px;height: 80px;}
.scale{transform: scale(1,0.5); }
.translate{transform: translate(500px,20px); }
.rotate{transform: rotate(45deg); }
.skew{transform: skew(120deg); }

过渡属性TransitionCSS transitions 可以控制组件从⼀个属性状态切换为另外⼀个属性状态时的过渡效果。

.selector {transition: [transition-property] [transition-duration] [transition-ti
ming-function] [transition-delay]; }

transition-property,应⽤过渡的 CSS 或动画属性的名称;transition-duration,整个过渡效果持续的时间transition-timing-function,规定过渡效果的时间曲线transition-delay,过渡效果延迟多久

动画属性Animation

CSS animations 使得可以将从⼀个CSS样式配置转换到另⼀个CSS样式配置。动

@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;} }
.fadeIn {animation: 4s linear 0s infinite alternate fadeIn; }

抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转 (rotateIn/rotateOut)、淡⼊淡出(fadeIn/fadeOut)

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的简书!

这是一个有质量,有态度的博客

博客

这篇关于WeUI框架的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/807779

相关文章

Python结合Flask框架构建一个简易的远程控制系统

《Python结合Flask框架构建一个简易的远程控制系统》这篇文章主要为大家详细介绍了如何使用Python与Flask框架构建一个简易的远程控制系统,能够远程执行操作命令(如关机、重启、锁屏等),还... 目录1.概述2.功能使用系统命令执行实时屏幕监控3. BUG修复过程1. Authorization

SpringBoot集成图片验证码框架easy-captcha的详细过程

《SpringBoot集成图片验证码框架easy-captcha的详细过程》本文介绍了如何将Easy-Captcha框架集成到SpringBoot项目中,实现图片验证码功能,Easy-Captcha是... 目录SpringBoot集成图片验证码框架easy-captcha一、引言二、依赖三、代码1. Ea

Gin框架中的GET和POST表单处理的实现

《Gin框架中的GET和POST表单处理的实现》Gin框架提供了简单而强大的机制来处理GET和POST表单提交的数据,通过c.Query、c.PostForm、c.Bind和c.Request.For... 目录一、GET表单处理二、POST表单处理1. 使用c.PostForm获取表单字段:2. 绑定到结

修改若依框架Token的过期时间问题

《修改若依框架Token的过期时间问题》本文介绍了如何修改若依框架中Token的过期时间,通过修改`application.yml`文件中的配置来实现,默认单位为分钟,希望此经验对大家有所帮助,也欢迎... 目录修改若依框架Token的过期时间修改Token的过期时间关闭Token的过期时js间总结修改若依

MyBatis框架实现一个简单的数据查询操作

《MyBatis框架实现一个简单的数据查询操作》本文介绍了MyBatis框架下进行数据查询操作的详细步骤,括创建实体类、编写SQL标签、配置Mapper、开启驼峰命名映射以及执行SQL语句等,感兴趣的... 基于在前面几章我们已经学习了对MyBATis进行环境配置,并利用SqlSessionFactory核

cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈? cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF

数据治理框架-ISO数据治理标准

引言 "数据治理"并不是一个新的概念,国内外有很多组织专注于数据治理理论和实践的研究。目前国际上,主要的数据治理框架有ISO数据治理标准、GDI数据治理框架、DAMA数据治理管理框架等。 ISO数据治理标准 改标准阐述了数据治理的标准、基本原则和数据治理模型,是一套完整的数据治理方法论。 ISO/IEC 38505标准的数据治理方法论的核心内容如下: 数据治理的目标:促进组织高效、合理地

ZooKeeper 中的 Curator 框架解析

Apache ZooKeeper 是一个为分布式应用提供一致性服务的软件。它提供了诸如配置管理、分布式同步、组服务等功能。在使用 ZooKeeper 时,Curator 是一个非常流行的客户端库,它简化了 ZooKeeper 的使用,提供了高级的抽象和丰富的工具。本文将详细介绍 Curator 框架,包括它的设计哲学、核心组件以及如何使用 Curator 来简化 ZooKeeper 的操作。 1

【Kubernetes】K8s 的安全框架和用户认证

K8s 的安全框架和用户认证 1.Kubernetes 的安全框架1.1 认证:Authentication1.2 鉴权:Authorization1.3 准入控制:Admission Control 2.Kubernetes 的用户认证2.1 Kubernetes 的用户认证方式2.2 配置 Kubernetes 集群使用密码认证 Kubernetes 作为一个分布式的虚拟