WXSS 模板语法

1. 什么是 WXSS

WXSS (WeiXin Style Sheets) 是一种用于微信小程序开发的样式语言，它的主要功能是为小程序页面提供样式定义，类似于网页开发中的 CSS。通过 WXSS，开发者可以控制页面中元素的布局、颜色、字体等视觉效果。

• WXSS 的核心功能：
  • 控制页面元素的布局
  • 设定文字、图像的样式
  • 适配不同尺寸的屏幕

WXSS 在继承 CSS 大部分特性的基础上，还加入了针对小程序的特殊功能，例如响应式单位 rpx，以帮助开发者处理不同设备之间的适配问题。

2. WXSS 和 CSS 的关系

WXSS 与 CSS 的语法和使用方法非常相似，可以认为 WXSS 是 CSS 的一个子集，支持 CSS 的大部分属性和功能，如：

• 颜色 (color)
• 字体 (font)
• 背景 (background)
• 边框 (border)
• 布局（flex、position）

虽然 WXSS 大部分继承了 CSS 的特性，但它也引入了一些专门为小程序设计的特性，如 rpx 单位，帮助实现不同屏幕的适配。

如下图展示了 WXSS 与 CSS 的关系：

3. rpx

3.1 什么是 rpx 尺寸单位

rpx（responsive pixel，响应式像素）是微信小程序中独有的尺寸单位，设计用于适配不同设备的屏幕尺寸。通过使用 rpx，开发者可以在不同屏幕尺寸的设备上实现页面的自适应布局。

• rpx 的特点：根据设备屏幕的宽度，rpx 会自动进行比例调整。例如，在宽度为 375px 的设备（iPhone 6/7/8）上，750rpx 相当于设备的全屏宽度，1rpx = 0.5px。

  使用 rpx 的好处是，它能够让页面在各种设备（手机、平板等）上表现一致，而不需要为不同设备编写单独的样式。

3.2 rpx 的实现原理

rpx 的核心原理是：小程序会根据设备的实际屏幕宽度（以 px 为单位）自动计算 rpx 的实际显示效果。屏幕越大，rpx 单位的像素值越大。具体的换算逻辑是将设备屏幕的宽度（px）映射到 750rpx。例如，在 iPhone 6 上，屏幕宽度为 375px，那么 750rpx 就相当于 375px，即 1rpx = 0.5px。

下图展示了 rpx 的适配原理：

3.3 rpx 与 px 之间的单位换算

rpx 和 px 之间的换算关系随设备的屏幕宽度变化而变化。不同设备的屏幕宽度对应的 rpx 单位值也不同。常见设备的 rpx 与 px 之间的换算关系如下：

• iPhone 6/7/8 (375px 宽)：1rpx = 0.5px
• iPhone X (375px 宽)：1rpx = 0.5px
• iPhone XS Max (414px 宽)：1rpx ≈ 0.552px
• 1080p 分辨率设备 (750px 宽)：1rpx = 1px

开发者可以根据屏幕宽度，使用 rpx 单位来确保在不同屏幕上的适配效果，而不需要手动进行不同设备的 px 换算。

下图展示了 rpx 和 px 之间的单位换算：

4. 样式导入

4.1 什么是样式导入

样式导入是通过外部样式文件共享或复用样式的机制。在 WXSS 中，开发者可以通过 @import 语法，将公共的样式文件导入到当前的样式文件中，从而避免在每个页面中重复书写相同的样式。这种方式有助于模块化管理样式，提高开发效率。

• 应用场景：当多个页面中有相同的样式需求时，开发者可以将这些样式提取到单独的样式文件中，然后通过 @import 语句将其导入到需要使用的页面样式文件中。

4.2 @import 的语法格式

@import 的语法格式如下：

@import "文件路径/样式文件.wxss";

• 文件路径：导入的样式文件的相对路径。
• 样式文件.wxss：需要导入的样式文件名，后缀为 .wxss。

例如，开发者可以在页面的 wxss 文件中导入公共样式文件 common.wxss：

@import "common.wxss";

这样，common.wxss 中定义的样式就会作用于当前页面。

下图展示了 @import 的用法：

5. 全局样式和局部样式

5.1 全局样式

全局样式是定义在 app.wxss 文件中的样式。它适用于整个小程序的所有页面，作用范围涵盖了每一个页面。开发者可以在 app.wxss 中定义一些通用的样式，如字体、背景颜色、常用的布局方式等，确保整个小程序具有一致的视觉风格。

示例：

/* app.wxss - 全局样式 */
page {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

上面的样式会在小程序的所有页面中生效，统一页面的背景颜色和字体样式。

• 应用场景：全局样式适用于定义小程序中通用的样式，如所有页面的背景颜色、字体样式、常用按钮样式等。

5.2 局部样式

局部样式是定义在每个页面的 .wxss 文件中的样式。局部样式只对当前页面生效，不会影响其他页面。这样，开发者可以为不同的页面设置特定的样式需求。

示例：

/* index.wxss - 局部样式 */
.title {
  color: #ff0000;
  font-size: 24rpx;
}

这个样式只会作用于当前页面的 .wxml 文件中定义的元素，不会影响其他页面。

• 应用场景：局部样式适用于特定页面的独立样式需求，比如首页有特殊的布局或样式，而其他页面没有相同的要求。

下图展示了全局样式和局部样式的区别：

6. WXSS 的其他功能

除了 rpx 单位和样式导入，WXSS 还支持以下功能：

• 伪类选择器：支持常见的伪类选择器，如 :hover、:active、:first-child 等，用于控制交互和状态变化。

  button:hover {
    background-color: #e5e5e5;
  }
  

• 样式优先级：与 CSS 类似，WXSS 也有样式优先级机制，通过类名、ID 选择器、内联样式等控制样式的优先级。

  .class {
    color: blue;
  }
  #id {
    color: red;
  }
  

• 媒体查询：虽然 WXSS 没有直接支持 CSS 中的媒体查询，但通过 rpx 单位的使用，已经可以实现不同设备上的自适应布局，因此通常不需要使用媒体查询来调整布局。

总结

WXSS 是微信小程序中用于描述页面样式的语言，功能类似于 CSS，但加入了一些特殊的特性（如 rpx 单位）以适应小程序的开发需求。通过 rpx，开发者可以方便地实现响应式布局，让页面在不同设备上都能保持一致的显示效果。@import 语法允许样式的模块化管理，全局样式和局部样式则帮助开发者对整个小程序和单个页面分别进行样式设置。