微信小程序开发教程-WXSS介绍

作者：马育民 • • 阅读：10013

介绍

WXSS（WeiXin Style Sheets）是小程序专用样式语言，兼容大部分 CSS2.3，扩展了小程序特有尺寸单位、样式导入、全局样式等能力，用于给 WXML 页面布局美化。

和 CSS 核心区别：

  1. 新增 rpx 自适应单位（小程序独有）
  2. 支持 @import 样式导入
  3. 有全局样式 app.wxss + 页面局部样式 xxx.wxss
  4. 不支持复杂 CSS3 选择器、部分高级属性

两套样式文件

  1. 全局样式：app.wxss
    项目根目录，所有页面自动生效，统一公共样式（字体、颜色、通用按钮、重置样式）。

  2. 页面局部样式：pages/页面名/xxx.wxss
    仅当前页面生效，优先级高于全局样式，同名样式会覆盖全局。

独有尺寸单位

1. rpx（推荐，自适应屏幕）

小程序专用响应式单位：

  • 规定：屏幕宽 = 750 rpx
  • 设备自动换算像素，不用适配多屏幕
  • 设计稿统一按 750px 宽度作图，1px设计稿 = 1rpx

示例：

<view style="background-color: red;width: 375rpx;">第一个页面</view>

2. 其他兼容单位

  • px：固定像素，大屏会缩小、小屏会放大，不推荐
  • rem：1rem = 屏幕宽度 / 7.5，等价 rpx
  • vh/vw：同网页，1vw = 屏幕1%宽度

选择器

小程序仅支持以下选择器，不支持 nth-child、> 子代复合选择器等高级语法

选择器 示例 说明
.class .btn 类选择器（最常用）
#id #container id选择器（少用，复用差）
元素标签 view、text、image 组件标签选择器
* * 通配符，全局重置
并列选择 .a,.b 多个类共用样式

不支持的例子（禁止使用）

/* 无效，不支持后代多层 */
view .item .title {}
/* 无效，不支持伪类高级选择器 */
view:nth-child(1) {}

全局重置样式

app.wxss 通用模板，复制到 app.wxss，统一消除默认边距、字体：

/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

page {
  /* page 代表页面根节点，默认有背景灰色 */
  background-color: #f5f5f5;
  font-size: 28rpx;
  color: #333;
}

text {
  line-height: 1.5;
}

button {
  border: none;
}

page 是小程序独有根标签，等同于网页 body

Flex 弹性布局

小程序全部使用 flex 适配，基础用法详见 链接

水平排列

.flex-row {
  display: flex;
  flex-direction: row; /* 水平，默认 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
}

垂直排列

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

常用属性

  • justify-content：主轴对齐 center/space-around/space-evenly
  • align-items：交叉轴对齐 center/flex-start
  • flex:1：元素平分剩余宽度

样式优先级规则

  1. 行内样式（style 属性）> 页面 wxss > app.wxss 全局样式
  2. 同文件内：后写样式覆盖前写
  3. 选择器权重：id > class > 标签

示例覆盖逻辑：

/* app.wxss */
.btn { background: red; }

/* index.wxss 会覆盖全局 */
.btn { background: blue; }

常见踩坑点

  1. 单位混用px，手机适配错乱
    解决方案：全部统一使用 rpx
  2. @import 末尾缺少分号，样式失效
    错误：@import "common.wxss"
    正确：@import "common.wxss";
  3. image 圆角不生效
    必须添加 overflow: hidden
  4. 高级CSS选择器无效
    不支持子代选择器、伪类、属性选择器，改用class
  5. page 默认灰色背景
    在 app.wxss 给 page 设置 background-color 修改
  6. 样式路径写错导入失败：使用相对路径，不要绝对路径

原文出处：/show_1GW3X0melZJp.html

吉ICP备15003043号