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框架的更多相关文章

  1. weui 框架

    weui是一个框架,但是官方并没有提供文档: 所以我们需要在github上来通过案例来了解他的用法 一般做列表,左边的图片要么60x60,要么80x80用的比较多 weui是一个小巧的框架,所以带来的 ...

  2. 微信 + weui 框架记录

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一: 包含button.cell.dialog. progress. to ...

  3. weUI框架在github下载地址

    1.公众号样式UI库的下载地址: https://github.com/Tencent/weui 2.微信小程序UI库的下载地址:https://github.com/Tencent/weui-wxs ...

  4. 10大H5前端框架

    作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这 ...

  5. 10大html5前端框架

    Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者 ...

  6. 微信公众号开发,weUi组件,问题总结

    1.实现上拉分页,Google兼容问题,weui框架提供的模板是这样的($(document.body).infinite()),在body定一个div通过这个div,实现上拉 $('#wrapper ...

  7. (转)10大H5前端框架

    http://www.cnblogs.com/kingboy2008/p/5261771.html 作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端 ...

  8. 10大H5前端框架 ......>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这 ...

  9. 10大H5前端框架(转)

    10大H5前端框架 作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被 ...

随机推荐

  1. Map作为缓存使用

    public class MapCache { /** * 默认存储1024个缓存 */ private static final int DEFAULT_CACHES = 1024; private ...

  2. vue使用html2canvas生成图片并保存到本地

    html2canvas官方文档 http://html2canvas.hertzen.com/ npm下载依赖 npm install html2canvas -S 在需要使用的地方引入 import ...

  3. [JS设计模式]:观察者模式(即发布-订阅者模式)(4)

    简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 举一个现实生活中的例子,例如小 ...

  4. 链接标签(a 标签)

    一.链接标签 单词缩写: anchor 的缩写. 在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可. 语法格式: <a href="跳转目标" target ...

  5. spring boot 的request.getServletContext().getRealPath路径获取问题

    默认情况下springboot中request.getServletContext().getRealPath 返回的是一个临时文件夹的地址 通过查看源代码 位置在 org.springframewo ...

  6. consul:connect

    官方文档:https://www.consul.io/docs/connect/index.html#getting-started-with-connect consul connect的功能类似与 ...

  7. 解决apscheduler报错:Run time of job …… next run at: ……)” was missed by

    在Django中使用apscheduler django_apscheduler 实现定时任务, 来完成数据拉取. 一段时间后发现数据量对不上,遂查日志 发现报错如下: Run time of job ...

  8. Css3动画(一) 如何画3D旋转效果或者卫星围绕旋转效果

    如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说 ...

  9. mysql float和decimal

    结论: 1. float 默认只保存6位(除去小数点),如果超过6位,则四舍五入,所以float存储的数据是不精确的,只是近似值: 2. decimal,如果输入的数据超过了定义的最大值,那么则溢出, ...

  10. python中的exec()函数和eval()函数

    exec()函数 exec函数用于执行存储在字符串中的python语句 >>> exec("x=1") >>> x 但有时候,直接这样执行可能会 ...