WeUI框架

电玩女神 2021-07-24 15:53 402阅读 0赞

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⻚⾯输⼊以下代码：

在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）

###  ###

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

###  ###

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

### 欢迎关注[达达][Link 1]的简书！ ###

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

![博客][20191023082234856.jpeg]

[Link 1]: https://www.jianshu.com/u/c785ece603d1
[20191023082234856.jpeg]: /images/20210724/fa9945a147b0427c87a7d87b0dcf803f.png