微信小程序开发WXSS

如果你正在寻找一种直接迈进前端界面设计的方法，那么微信小程序 WXSS 是你不容错过的工具。以下为您介绍 WXSS 的几个关键特性：

1. 尺寸单位

WXSS 引入了 rpx（responsive pixel），可以根据屏幕宽度进行自适应，是微信小程序中推荐使用的尺寸单位之一。

建议：设计师可以以 iPhone6 作为视觉稿的标准。

2. 样式扩充

WXSS 具有 CSS 大部分特性，在此基础上新增了样式导入功能。

2.1 样式导入

使用 "@import" 语句可以导入外联样式表，例如：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

2.2 内联样式

组件支持使用 "style"、"class" 属性来控制样式，并且支持动态样式解析。

• "style" 属性：静态样式统一写到 "class" 中，"style" 接收动态的样式，在运行时进行解析。
• "class" 属性：指定样式规则的类选择器名（样式类名）集合，可以用空格分隔各个样式类名。

3. 选择器与全局/局部样式

WXSS 支持多种选择器，并支持全局样式和局部样式的定义。具体如下：

• 选择器：支持 ".class"、"#id"、"element"、"element, element"、"::after" 和 "::before"。
• 全局样式：定义在 "app.wxss" 中的样式，作用于每一个页面。
• 局部样式：在 page 的 wxss 文件中定义的样式，仅作用在对应的页面。

以上就是 WXSS 的几个重要特性，请参考官方文档了解更多细节。如果您正在寻找一款快速搭建界面的工具，请务必尝试微信小程序开发。感谢您的阅读！