小程序WXSS 样式

WXSS样式

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

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

文件组成

图2-7 文件组成

图2-8 app.json

项目公共样式：根目录中的app.wxss为项目公共样式，它会被注入到小程序的每个页面。页面样式：与app.json注册过的页面同名且位置同级的WXSS文件。比如图2-8 app.json注册了pages/rpx/index页面，那pages/rpx/index.wxss为页面pages/rpx/index.wxml的样式。

其它样式：其它样式可以被项目公共样式和页面样式引用，引用方法查看本章中的2.3.3小节。

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

尺寸单位

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

如图2-9所示，同一个元素，在不同宽度的屏幕下，如果使用px为尺寸单位，有可能造成页面留白过多。

文件:Wx2-11.png

图2-9 使用px尺寸单位，iPhone5与iPad视觉对比

修改为rpx尺寸单位，效果如图2-10所示。

文件:Wx2-12.png

图2-10 使用rpx尺寸单位， iPhone5与iPad视觉对比

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

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

文件:Wx2-13.png

图2-11 常用机型rpx尺寸换算表

WXSS引用

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

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

文件:Wx2-14.png

图2-12 css import网络请求

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

@import './test_0.wxss'

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

内联样式

WXSS内联样式与Web开发一致:

<!--index.wxml-->

<!--内联样式-->
<view style="color: red; font-size: 48rpx"></view>

小程序支持动态更新内联样式：

<!--index.wxml-->

<!--可动态变化的内联样式-->
<!--
{
  eleColor: 'red',
  eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

选择器

目前支持的选择器如表2-2所示。

表2-2 小程序WXSS支持的选择器

类型 	选择器 	样例 	样例描述
类选择器 	.class 	.intro 	选择所有拥有 class="intro" 的组件
id选择器 	#id 	#firstname 	选择拥有 id="firstname" 的组件
元素选择器 	element 	view checkbox 	选择所有文档的 view 组件和所有的 checkbox 组件
伪元素选择器 	::after 	view::after 	在 view 组件后边插入内容
伪元素选择器 	::before 	view::before 	在 view 组件前边插入内容

WXSS优先级与CSS类似，权重如图2-13所示。

文件:Wx2-15.png

图2-13 WXSS选择器优先级

权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。

代码清单2-25 WXSS 选择器优先级权重

view{ // 权重为 1
  color: blue
}

.ele{ // 权重为 10
  color: red
}

#ele{ // 权重为 100
  color: pink
}

view#ele{ // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
  color: orange
}

view.ele{ // 权重为 1 + 10 = 11
  color: green
}

官方样式库

为了减轻开发者样式开发的工作量，我们提供了WeUI.wxss基础样式库。

WeUI是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。

文件:Wx2-16.png

图2-14 WeUI.wxss示例列表

具体使用文档可参考：https://github.com/Tencent/weui-wxss

最后一次编辑于 04月26日（未经腾讯允许，不得转载）