【小程序】使用WXSS编写样式介绍以及与CSS的区别

WXSS编写样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式, WXSS 用来决定 WXML 的组件应该怎么显示。

WXSS和CSS之间没有太大的区别, 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

官方文档中说到: 与 CSS 相比，WXSS 扩展的特性有：

尺寸单位
样式导入

---

小程序的样式写法

页面样式的三种写法：

行内样式、页面样式(当前页面生效)、全局样式(全部页面生效)

三种样式都可以作用于页面的组件

• 行内样式: 针对当前组件生效

<text style="color: red">哈哈哈哈text>
1
2

• 页面样式: 编写在页面单独的wxss文件当中的, 只在当前页面生效

.active {
	color: skyblue;
	font-size: 20px;
	font-weight: 700;
}
1
2
3
4
5

<text class="active">哈哈哈哈text>
1
2

• 全局样式: 声明在app.wxss文件中的样式, 在任何页面中都会生效

.title {
	color: red;
	font-size: 20px;
}
1
2
3
4

<text class="title">哈哈哈哈text>
1
2

如果有相同的样式：

优先级依次是：行内样式 > 页面样式 > 全局样式

---

WXSS支持的选择器

官方支持的选择器如下 (其实除此之外还有一些选择器也是支持的, 但是官方推荐使用的就是下面这些)

WXSS选择器优先级与CSS类似，权重如图

WXSS扩展-尺寸单位

尺寸单位也是和我们css最大的区别

尺寸单位

rpx（responsive pixel） : 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。

比如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素， 1 rpx = 0.5px = 1物理像素。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准, 一般情况下也都是会以iPhone6位标准。

也就是说, 我们使用rpx单位, 以iPhone6位设计稿的话, 当我们想要设置100px的大小时, 改为设置200rpx (px单位的值 * 2 = rpx的值)

设置rpx单位后的元素, 会根据屏幕的大小自适应

---

WXSS样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

• 例如在test.wxss文件中定义一些css文件

/** test.wxss **/
.small-p {
  padding:5px;
}
1
2
3
4

• 在app.wxss中导入test.wxss文件, 可以使用test.wxss文件中的样式

/** app.wxss **/
@import "test.wxss";
.middle-p {
  padding:15px;
}
1
2
3
4
5