第4次课 - WXSS样式与Flex布局 - 微信小程序开发实战

1

教学目标

掌握WXSS样式的基本语法与特点
理解rpx响应式单位与px的换算
掌握Flex布局的核心属性与用法
能够使用Flex实现常见页面布局
案例：案例2-2 本地生活

2

重点、难点与课时分配

◎

教学重点

WXSS语法、rpx单位、Flex布局、样式导入

△

教学难点

Flex布局的轴方向与对齐方式

课时分配（共 3 学时）

理论 1 学时

实践 2 学时

Flex 布局需大量练习，案例 2-2 本地生活实操 2 学时

3

课件要点

WXSS 样式特点

WXSS = WeiXin Style Sheets — 小程序样式语言

rpx响应式单位: 1rpx = 屏幕宽度/750

iPhone6: 1rpx = 0.5px (750rpx = 375px)

支持样式导入: @import "路径"

支持内联样式: style和class

Flex布局核心概念

display: flex — 开启弹性布局

flex-direction — 主轴方向(row/column)

justify-content — 主轴对齐(start/center/end/space-between/space-around)

align-items — 交叉轴对齐(stretch/center/flex-start/flex-end)

flex-wrap — 是否换行(nowrap/wrap)

Flex子项属性

flex — 子项占比(如 flex:1 等分)

align-self — 单独设置交叉轴对齐

order — 排列顺序(默认0, 越小越靠前)

flex-grow — 放大比例

flex-shrink — 缩小比例

案例2-2 本地生活

使用Flex实现顶部导航栏布局

使用Flex实现宫格菜单(4列均分)

使用Flex实现推荐列表(左图右文)

rpx单位确保不同屏幕适配

综合运用Flex布局完成本地生活首页

4

代码示例与讲解

rpx响应式单位

                rpx.wxss
                rpx换算示意
              
1/* rpx 响应式像素单位 */
2
3/* 小程序规定：屏幕宽度 = 750rpx */
4/* 在 iPhone6 上：1rpx = 0.5px */
5/* 在 iPhone6 上：1px  = 2rpx  */
6
7/* 常见设备换算表 */
8设备        屏幕宽度  1rpx→px  1px→rpx
9iPhone5      320px     0.42px   2.34rpx
10iPhone6/7/8  375px     0.5px    2rpx
11iPhone6 Plus 414px     0.552px  1.81rpx
12
13/* 实际使用示例 */
14.box {
15  width: 750rpx;     /* 占满屏幕宽度 */
16  height: 200rpx;    /* 约100px(iPhone6) */
17  padding: 20rpx;     /* 约10px */
18  font-size: 28rpx;   /* 约14px */
19}
20
21/* ⚠️ 开发建议 */
22/* 设计稿通常为 750px 宽度 */
23/* 量出多少px就写多少rpx即可 */
24/* 如设计稿上100px → 100rpx */

小程序规定屏幕宽度固定为750rpx，在iPhone6上1rpx等于0.5px，即1px等于2rpx。使用rpx的好处是自动适配不同屏幕宽度。开发技巧：设计稿通常750px宽，量出多少px就写多少rpx，比如设计稿上100px的元素，直接写100rpx即可。

Flex布局核心属性

                flex.wxss
                Flex属性效果
              
1/* Flex布局核心属性 */
2
3/* 1. display: flex 开启弹性布局 */
4.container {
5  display: flex;
6}
7
8/* 2. flex-direction 主轴方向 */
9.row    { flex-direction: row; }          /* 水平（默认） */
10.col    { flex-direction: column; }       /* 垂直 */
11.row-rev { flex-direction: row-reverse; }  /* 水平反转 */
12
13/* 3. justify-content 主轴对齐 */
14.jc-start   { justify-content: flex-start; }    /* 左对齐 */
15.jc-center  { justify-content: center; }        /* 居中 */
16.jc-end     { justify-content: flex-end; }       /* 右对齐 */
17.jc-between { justify-content: space-between; } /* 两端对齐 */
18.jc-around  { justify-content: space-around; }  /* 等间距 */
19
20/* 4. align-items 交叉轴对齐 */
21.ai-start { align-items: flex-start; }  /* 顶部对齐 */
22.ai-center { align-items: center; }    /* 垂直居中 */
23.ai-end   { align-items: flex-end; }     /* 底部对齐 */
24.ai-stretch { align-items: stretch; }  /* 拉伸填满 */
25
26/* 5. flex-wrap 换行 */
27.wrap    { flex-wrap: wrap; }         /* 允许换行 */
28.nowrap  { flex-wrap: nowrap; }       /* 不换行（默认） */
29
30/* 常用组合：水平垂直居中 */
31.center-all {
32  display: flex;
33  justify-content: center;
34  align-items: center;
35}

Flex布局五个核心属性：flex-direction设置主轴方向，row水平column垂直；justify-content控制主轴对齐，常用center居中和space-between两端对齐；align-items控制交叉轴对齐，center实现垂直居中；flex-wrap设置是否换行。最常用的组合是justify-content:center + align-items:center实现水平垂直居中。

Flex子项属性

                flex-item.wxss
                子项属性效果
              
1/* Flex 子项属性 */
2
3/* 1. flex:1 等分剩余空间 */
4.item {
5  flex: 1;  /* 所有子项等分 */
6}
7
8/* 2. flex 比例分配 */
9.left  { flex: 2; }  /* 占2份 */
10.right { flex: 1; }  /* 占1份 */
11
12/* 3. align-self 单独对齐 */
13.item-special {
14  align-self: flex-end;  /* 单独底部对齐 */
15}
16
17/* 4. order 排列顺序 */
18.item-first  { order: -1; }  /* 排最前 */
19.item-last   { order: 1; }   /* 排最后 */
20
21/* 实际案例：底部导航栏 */
22.tab-bar {
23  display: flex;
24  flex-direction: row;
25  height: 100rpx;
26  background: #fff;
27  border-top: 1rpx solid #eee;
28}
29.tab-item {
30  flex: 1;
31  display: flex;
32  flex-direction: column;
33  align-items: center;
34  justify-content: center;
35}

Flex子项有三个重要属性：flex:1让子项等分剩余空间，flex:2和flex:1可按比例分配；align-self让单个子项覆盖容器的align-items，单独设置对齐方式；order改变子项排列顺序，值越小越靠前。实际开发中flex:1最常用，如底部导航栏每个tab用flex:1实现等分。

案例2-2 本地生活九宫格

                grid.wxss
                九宫格效果
              
1/* 案例2-2：本地生活九宫格布局 */
2
3/* 外层容器 */
4.grid-container {
5  display: flex;
6  flex-wrap: wrap;         /* 关键：允许换行 */
7  padding: 20rpx;
8  background: #fff;
9}
10
11/* 每个格子：750rpx / 3 = 250rpx */
12.grid-item {
13  width: 33.33%;       /* 三等分 */
14  display: flex;
15  flex-direction: column;  /* 图标在上文字在下 */
16  align-items: center;     /* 水平居中 */
17  justify-content: center;  /* 垂直居中 */
18  padding: 20rpx 0;
19}
20
21.grid-item image {
22  width: 80rpx;
23  height: 80rpx;
24  margin-bottom: 10rpx;
25}
26
27.grid-item text {
28  font-size: 24rpx;
29  color: #333;
30}
31
32/* WXML 结构 */
33<view class="grid-container">
34  <view
35    wx:for="{{gridList}}"
36    wx:key="id"
37    class="grid-item">
38    <image src="{{item.icon}}" />
39    <text>{{item.name}}</text>
40  </view>
41</view>
42
43/* 九宫格核心：flex-wrap + width:33.33% */

九宫格布局的核心是flex-wrap:wrap允许换行配合width:33.33%三等分。每个格子内部再用flex-direction:column让图标在上文字在下，align-items:center水平居中。配合wx:for循环渲染数据，就实现了常见的本地生活九宫格效果。关键公式：每行N个 → width: (100/N)%。

5

课件预览与下载