WeUI框架

Posted dashucoding

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的渐变Gradient
linear-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); }

过渡属性Transition
CSS 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框架的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序设计weui框架

微信 + weui 框架记录

WeUI 为微信 Web 服务量身设计-h5前端框架

微信小程序从零开始开发步骤-引入框架WeUI

weui

常用小程序开源框架汇总