第3次课 · 第2章 · 3课时
WXML模板语法与数据绑定
1
教学目标
- 掌握WXML模板语法的基本用法
- 理解数据绑定的原理与单向/双向绑定
- 掌握列表渲染 wx:for 与条件渲染 wx:if
- 能够使用数据绑定实现动态页面
- 案例：案例2-1 个人信息
2
重点、难点与课时分配
教学重点
WXML语法、数据绑定、列表渲染、条件渲染
教学难点
列表渲染key的作用、条件渲染与列表渲染组合
课时分配（共 3 学时）
模板语法讲解 1 学时，案例 2-1 个人信息实操 2 学时
3
课件要点
数据绑定 {{}}
Mustache语法 {{}} — 在WXML中绑定数据
绑定文本内容: <text>{{message}}</text>
绑定属性: <image src="{{imageUrl}}"></image>
绑定样式: style="color:{{colorVal}}"
运算支持: 算术/三元/逻辑/字符串运算
列表渲染 wx:for
wx:for — 根据数组重复渲染组件
wx:key — 指定列表项唯一标识(提升性能)
默认变量: item(当前项) 和 index(下标)
自定义变量名: wx:for-item / wx:for-index
嵌套循环时务必自定义变量名避免冲突
条件渲染 wx:if
wx:if — 条件为true时渲染该组件
wx:elif / wx:else — 多条件分支
wx:if vs hidden: wx:if会销毁/重建, hidden只是切换显示
频繁切换用hidden, 条件很少变用wx:if
wx:if 作用于单个组件, block wx:if 作用于多个
案例2-1 个人信息
使用数据绑定展示个人信息(姓名/头像/简介)
使用列表渲染展示技能标签
使用条件渲染控制VIP标识显示
使用wx:for展示教育经历时间线
综合运用WXML核心语法完成页面搭建
4
代码示例与讲解
数据绑定 {{}}
index.wxml
数据绑定效果
1<!-- 1. 简单数据绑定 -->
2<view>{{message}}</view>
3
4<!-- 2. 属性绑定 -->
5<image src="{{imageUrl}}"></image>
6<view id="item-{{id}}"></view>
7
8<!-- 3. style 动态绑定 -->
9<view style="color:{{color}};">彩色文字</view>
10<view style="width:{{width}}rpx;height:{{height}}rpx;">
11 尺寸可变盒子
12</view>
13
14<!-- 4. class 动态绑定 -->
15<view class="box {{isActive ? 'active' : ''}">
16 条件样式
17</view>
18
19<!-- 5. 表达式运算 -->
20<view>{{a + b}}</view>
21<view>{{len > 10 ? '长' : '短'}}</view>
22<view>{{name.firstName}}</view>
23<view>{{'Hello ' + user}}</view>
24
25<!-- ⚠️ 注意：不能调用函数 -->
26<!-- {{formatDate(time)}} ❌ 不支持 -->
27<!-- 需用 wxs 或在 js 中预处理 -->
WXML使用双花括号{{}}进行数据绑定。支持五种用法：内容绑定{{message}}、属性绑定如src="{{url}}"、style动态绑定、class条件绑定、以及表达式运算如加减、三元运算、对象属性访问。注意不能在{{}}中调用函数，需要用wxs或在js中预处理数据。
列表渲染 wx:for
list.wxml
列表渲染效果
1<!-- 1. 基础 wx:for 用法 -->
2<view wx:for="{{users}}">
3 索引：{{index}}，值：{{item}}
4</view>
5
6<!-- 2. wx:key 提升渲染性能 -->
7<view wx:for="{{users}}" wx:key="id">
8 {{item.name}}
9</view>
10
11<!-- 3. 自定义变量名 -->
12<view
13 wx:for="{{users}}"
14 wx:for-item="user"
15 wx:for-index="idx"
16 wx:key="id">
17 {{idx}} - {{user.name}}
18</view>
19
20<!-- 4. 嵌套循环 -->
21<view wx:for="{{matrix}}" wx:for-item="row">
22 <view wx:for="{{row}}" wx:for-item="cell">
23 {{cell}}
24 </view>
25</view>
26
27<!-- 5. block 包装多节点 -->
28<block wx:for="{{items}}" wx:key="id">
29 <view>标题：{{item.title}}</view>
30 <view>内容：{{item.desc}}</view>
31</block>
32
33<!-- ⚠️ wx:key 必须唯一且稳定 -->
34<!-- wx:key="*this" 用于简单数组 -->
wx:for用于列表渲染，默认提供index索引和item当前项。强烈建议添加wx:key提升列表更新性能，值应为唯一标识如id。嵌套循环时用wx:for-item和wx:for-index自定义变量名避免冲突。block标签可包裹多个节点而不产生额外DOM。简单数组可用wx:key="*this"。
条件渲染 wx:if
condition.wxml
条件渲染对比
1<!-- 1. wx:if / wx:elif / wx:else -->
2<view wx:if="{{score >= 90}}">优秀</view>
3<view wx:elif="{{score >= 60}}">及格</view>
4<view wx:else>不及格</view>
5
6<!-- 2. block + wx:if 控制多节点 -->
7<block wx:if="{{isVip}}">
8 <view>VIP专属内容</view>
9 <view>折扣信息</view>
10</block>
11
12<!-- 3. hidden 属性 -->
13<view hidden="{{!isShow}}">隐藏内容</view>
14
15<!-- ⚠️ wx:if vs hidden 区别 -->
16wx:if → 条件为false时，节点不渲染（销毁/创建）
17hidden → 条件为false时，节点已渲染（display:none）
18
19<!-- 选型建议 -->
20<!-- 频繁切换 → 用 hidden（避免反复创建销毁） -->
21<!-- 条件很少变 → 用 wx:if（节省初始渲染开销） -->
条件渲染用wx:if、wx:elif、wx:else，条件为false时节点不会渲染到DOM中。hidden则不同，节点始终在DOM中，只是通过display:none隐藏。选型建议：频繁切换用hidden避免反复创建销毁的开销，条件很少变化用wx:if节省初始渲染开销。block标签配合wx:if可控制多个节点的显示。
案例2-1 个人信息展示
person.wxml
个人信息页效果
1<!-- 案例2-1：个人信息展示页 -->
2<view class="container">
3
4 <!-- 头像区域 -->
5 <image
6 class="avatar"
7 src="{{avatarUrl}}"
8 mode="aspectFill"
9 />
10
11 <!-- 姓名与签名 -->
12 <view class="name">{{name}}</view>
13 <view class="signature">{{signature}}</view>
14
15 <!-- 技能标签（wx:for） -->
16 <view class="skills">
17 <view
18 wx:for="{{skills}}"
19 wx:key="*this"
20 class="skill-tag">
21 {{item}}
22 </view>
23 </view>
24
25 <!-- 联系方式（wx:if） -->
26 <view class="contact">
27 <view wx:if="{{phone}}">
28 📞 {{phone}}
29 </view>
30 <view wx:if="{{email}}">
31 📧 {{email}}
32 </view>
33 </view>
34
35</view>
36
37// 对应 index.js 数据
38Page({
39 data: {
40 avatarUrl: "/images/avatar.png",
41 name: "张三",
42 signature: "热爱编程，热爱生活",
43 skills: ["WXML", "WXSS", "JS"],
44 phone: "13800138000",
45 email: "zhangsan@qq.com"
46 }
47})
案例2-1综合运用了三种模板语法：{{}}数据绑定显示姓名、签名和头像；wx:for循环渲染技能标签列表，使用wx:key="*this"；wx:if条件渲染联系方式，只有phone和email有值时才显示。这个案例体现了WXML模板语法的核心用法：数据驱动视图。
6
课堂视频
第3次课 · WXML模板语法与数据绑定
本次课教学视频请在课堂现场观看
视频文件较大未随本站发布；如需回看，请向任课教师索取或在课程群下载。
7
教材案例源码
用微信开发者工具「导入项目」打开对应目录即可运行。知识储备是分知识点的最小示例，案例实现／项目实现是完整工程，服务器端是案例配套的后端接口服务。
8
课后实践
基础
完成个人信息页面
按照案例2-1，完成个人信息展示页面，包含头像、姓名、学校、专业等信息
进阶
扩展个人信息
在案例2-1基础上，增加联系方式、兴趣爱好等字段，使用三元运算符控制显示
挑战
可筛选的技能列表
在个人信息页基础上，用 wx:for 渲染技能标签、wx:if 按熟练度筛选，观察加/不加 wx:key 时列表复用的差异
9
本课小结
数据绑定 {{}}
列表渲染 wx:for
条件渲染 wx:if
案例2-1 个人信息展示