微信小程序WXSS语法介绍

WXSS 样式

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

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

2.3.1 文件组成

项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面。页面样式:与app.json注册过的页面同名且位置同级的WXSS文件。

其它样式:其它样式可以被项目公共样式和页面样式引用。

在小程序开发中,开发者不需要像Web开发那样去优化样式文件的请求数量,只需要考虑代码的组织即可。样式文件最终会被编译优化。

2.3.2 尺寸单位

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

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

2.3.3 WXSS引用

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

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

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

@import './test_0.wxss'

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

2.3.4 内联样式

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

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

2.3.5 选择器

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

2.3.6 官方样式库

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

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

猜你喜欢

转载自blog.csdn.net/BTUJACK/article/details/88781266
今日推荐