文档章节

WeUI框架

达达前端小酒馆
 达达前端小酒馆
发布于 10/23 08:23
字数 1036
阅读 25
收藏 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的渐变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)


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


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

欢迎关注达达的简书!

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

博客

© 著作权归作者所有

达达前端小酒馆
粉丝 2
博文 164
码字总数 236694
作品 0
广州
程序员
私信 提问
bosenger/VuxAxure

VuxAxure 起源 之前公司的产品有用过Vux的Vue框架,体验还不错,使用的范围也比较广,而且是基于WeUI做的优化,所以在微信中使用也符合WeUI的样式。所以决定做一套Vux的Axure组件库,既可以方...

bosenger
04/14
0
0
jQuery WeUI V0.4.2 发布

jQuery WeUI V0.4.2 发布了! jQuery WeUI 中使用的是官方WeUI的CSS代码,并提供了jQuery/Zepto版本的JS API实现。因为直接使用了官方的CSS,所以你不用担心跟官方版本的冲突。实际上 jQuery...

YC222
2016/03/16
16.4K
28
微信公众号开发C#系列-12、微信前端开发利器:WeUI

1、前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了。关于手机端的浏览器的兼容性问题...

NET快速开发框架
05/28
0
0
bingoJS 2.x | WeUI 移动端MV(SPA)框架

WeUI-bjs 为微信 Web 服务量身设计 git: http://git.oschina.net/bingoJS/weui-bjs 基于 WeUI 结合 bingoJS 2.x 现实SPA(单页面应用)快速开发前端框架。 概述 WeUI 是一套同微信原生视觉体...

front-Y
2016/08/06
2.2K
9
WeUI 2.0.0 发布,微信 Web 应用设计 UI 库

WeUI 2.0.0 发布了,上个版本(1.1.3)在去年六月底发布。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。 新...

段段段落
05/06
8K
2

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7 部署 redis 5.0.6 集群

环境 操作系统: CentOS7.7,关闭 firewalld 和 selinux Redis: 5.0.6 master 实例 10.0.4.110:6371 10.0.4.110:6372 10.0.4.110:6373 slave 实例 10.0.4.111:6371 10.0.4.111:6372 10.0.4.1......

俊赛潘安-才比管乐
14分钟前
18
0
怎么录制电脑上视频素材的声音

随着短视频的不断发展人们越来越喜欢利用空闲时间观看一些短视频用以打发零碎的时间,不少人发现这个机遇也匆匆走上制作短视频的道路,在制作短视频时配音是至关重要的,那你知道怎么在视频素...

cenfeng123
23分钟前
4
0
[springboot 开发单体web shop] 6. 商品分类和轮播广告展示

商品分类&轮播广告 因最近又被困在了OSGI技术POC,更新进度有点慢,希望大家不要怪罪哦。 上节 我们实现了登录之后前端的展示,如: 接着,我们来实现左侧分类栏目的功能。 商品分类|Produc...

IsaacZhang
23分钟前
3
0
java 静态代码块,代码块,构造方法执行顺序

回顾一下java的执行顺序 public class Demo { public Demo() { super(); System.out.println("this is Demo"); } static { System.out.println("this is static"); } { System.out.println("......

漫步行者
43分钟前
7
0
滴滴面试题答案思路

1.mysql 1.1.介绍下介绍下innodb的索引类型、数据结构 普通索引,唯一索引,主键索引:也就是聚簇索引,全文索引(FULLTEXT),聚集索引,非聚集索引等。 数据结构B+树: B+树特点 1.矮胖型,...

指尖Coding
45分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部