微信小程序开发:学习笔记[3]——WXSS样式

快速开始

介绍

  WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

  WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改

文件组成

  

  • 项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面
  • 页面样式:与app.json注册过的页面同名且位置同级的WXSS文件。比如注册了pages/rpx/index页面,那pages/rpx/index.wxss为页面pages/rpx/index.wxml的样式。
  • 其它样式:其它样式可以被项目公共样式和页面样式引用

  在小程序开发中,开发者不需要像Web开发那样去优化样式文件的请求数量,只需要考虑代码的组织即可。样式文件最终会被编译优化,具体的编译原理我们留在后面章节再做介绍。

尺寸单位

  在WXSS中,引入了rpx(responsive pixel)尺寸单位。引用新尺寸单位的目的是,适配不同宽度的屏幕,开发起来更简单

传统的px单位在不同的分辨率屏幕下显示效果差别很大:

采用rpx后不同分辨率下显示效果相同:

  

  小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px

  举个例子:iPhone6屏幕宽度为375px,共750个物理像素,那么1rpx = 375 / 750 px = 0.5px。

  

引用WXSS文件

在CSS中,开发者可以这样引用另一个样式文件:@import url('./test_0.css')

这种方法在请求上不会把test_0.css合并到index.css中,也就是请求index.css的时候,会多一个test_0.css的请求。

在小程序中,我们依然可以实现样式的引用,样式引用是这样写:

@import './test_0.wxss'

由于WXSS最终会被编译打包到目标文件中,用户只需要下载一次,在使用过程中不会因为样式的引用而产生多余的文件请求。

内联样式

  

动态改变样式

我们定义了一个view元素,颜色是动态获取的,即data里面的eleColor,所以初始化为红色,我们又定义了一个按钮,单击后会修改eleColor的值。

当我们单击按钮后,view会由以前的红色变成蓝色,记住这里的更新是由小程序框架动态实现的!

选择器

WXSS的优先级与CSS优先级相似。权重越高越优先。在优先级相同的情况下,后设置的样式优先级高于先设置的样式。

view{ // 权重为 1
color: blue
} .ele{ // 权重为 10
olor: red
} #ele{ // 权重为 100
color: pink
} view#ele{ // 权重为 1 + 100 = 101,优先级最高,元素颜色为orange
color: orange
} view.ele{ // 权重为 1 + 10 = 11
color: green
}

官方样式库

我们可以到https://github.com/Tencent/weui-wxss查看微信小程序官方提供的一套样式库。

微信小程序开发:学习笔记[3]——WXSS样式的更多相关文章

  1. 第1-5章 慕课网微信小程序开发学习笔记

    第1章 前言:不同的时代,不同的Web --微信小程序商城构建全栈应用 http://note.youdao.com/noteshare?id=a0e9b058853dbccf886c1a890594 ...

  2. 第6章 AOP与全局异常处理6.5-6.11 慕课网微信小程序开发学习笔记

    https://coding.imooc.com/learn/list/97.html 目录: 第6章 AOP与全局异常处理6-1 正确理解异常处理流程 13:236-2 固有的处理异常的思维模式与流 ...

  3. 第6章 AOP与全局异常处理6.1-6.4 慕课网微信小程序开发学习笔记

    第6章 AOP与全局异常处理 https://coding.imooc.com/learn/list/97.html 目录: 第6章 AOP与全局异常处理6-1 正确理解异常处理流程 13:236-2 ...

  4. 第7章 数据库访问与ORM 慕课网微信小程序开发学习笔记

    第7章 数据库访问与ORM https://coding.imooc.com/learn/list/97.html 目录: 7-1 数据库操作三种方式之原生SQL 19:09 7-2 从一个错误了解E ...

  5. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  6. 微信小程序开发学习(一):开发前准备

    开发前准备 Step1:注册 微信小程序开放平台: https://mp.weixin.qq.com/cgi-bin/wx 开发者注册: https://mp.weixin.qq.com/wxopen ...

  7. 微信小程序视频学习笔记

    [清华大学]学做小程序 https://www.bilibili.com/video/av21987398 2.2创建项目和文件结构 小程序包含一个描述整体程序的app和多个描述各自页面的page 配 ...

  8. 微信小程序开发学习记录

    两天撸了一遍小程序的文档,跟网页相似,个人感觉是简化版.但是因为开放了很多微信自带的接口又使得部分功能开发起来相对方便 思维导图如下: 目前我的理解大概是这么个逻辑,以后深入学习后可能会有更改 跟着大 ...

  9. 微信小程序开发学习(二)

    一些官方API 总结了一些官方API,便于之后有用时针对性查找(发现官方给了好多好用的API)官方API文档 基础 wx.canIUse:判断小程序的API,回调,参数,组件等是否在当前版本可用,返回 ...

  10. 微信小程序开发学习(一)

    一.各种JSON配置 1.小程序配置app.json 为小程序全局配置,包括所有页面路径.界面表现.网络超时时间.底部tab等,类比APP开发中manifest配置. 2.工具配置project.co ...

随机推荐

  1. DotnetBrowser高级教程-(4)使用MVC框架2-接收与返回模型

    在上一节,我们搭建了基本的mvc框架,这一节,我们将实现数据的接受与返回,具体操作如下: 1.新建Model目录,新增模型类Person.cs,代码如下: public class Person { ...

  2. BF3 里面的z cull reverse reload

    Bf3 siggraph2011的 分享 http://advances.realtimerendering.com/s2011/White,%20BarreBrisebois-%20Renderin ...

  3. Linux下Reids的安装和使用

    简单记录一下 redis的官网:https://redis.io/ 官网介绍: Installation Download, extract and compile Redis with: $ wge ...

  4. 对数据进行GZIP压缩和解压

    public class GzipUtils { /** * 对字符串进行gzip压缩 * @param data * @return * @throws IOException */ public ...

  5. [集合]解决system权限3389无法添加的用户情况

    Webshell有了SYSTEM权限,却无法成功添加administrators用户,因此导致无法成功连接3389.总结原因有以下几点:I.杀软篇1,360杀毒软件2,麦咖啡杀毒软件3,卡巴斯基杀毒软 ...

  6. Struts2中Action自己主动接收參数

    Struts2中Action接收參数的方法主要有下面三种: 1.使用Action的属性接收參数:(通过属性驱动式)     a.定义:在Action类中定义属性,创建get和set方法.     b. ...

  7. 【Excle数据透透视表】如何删除数据透视表

    选中区域A4:C17,在键盘上按DELETE键删除,结果提示: 那么如何删除呢? 解决方案 选中整个数透视表,再删除 具体操作: 选中整个数据透视表→DELETE 注意:删除之后,源数据不会受到影响

  8. [转载]UDP丢包率提升

    UDP丢包及无序问题 转载自:http://hi.baidu.com/gamedot/item/96cb9bf1a717eb14d6ff8cd5 最近在做一个项目,在这之前,做了个验证程序. 发现客户 ...

  9. 调用android系统相机拍照并保存

    [java] view plaincopyprint? <span style="font-size:18px;">package com.demo; import j ...

  10. 2014年7月微软MVP名单揭晓!

    微软公司于2001年8月起開始在亚洲与各大基本的第三方站点上的微软技术相关论坛合作,微软称之为"亚洲社区支持"计划.    为了鼓舞大家在论坛中更好地互相帮助,共同提高,微软在全亚 ...