微信基础开发及实战 10

《微信小程序开发》课程单元教学设计授课单元单元5：小程序开发技术基础（三）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.解释MVVM（Model-View-ViewModel）模式的基本原理及其在小程序中的体现。

2.陈述小程序中数据绑定（单向、双向）和事件绑定的语法与工作流程。

3.列举常用的WXML语法（如数据绑定{{}}、事件绑定bind.../catch...）及基础WXSS属性。1.能运用MVVM思想，将界面与数据进行关联，实现简单的数据驱动UI更新。

2.能独立完成页面创建，并实现数据绑定与事件处理（如按钮点击、输入框输入）。

3.能通过WXML和WXSS构建基础的静态页面布局与样式。1.培养数据驱动UI的编程思维模式，理解“关注点分离”的设计原则。

2.通过“祝君健康”实验，树立关注健康、服务民生的意识。教学重难点教学重点1.MVVM模式的核心概念（数据绑定、事件绑定）。

2.{{}}数据绑定语法和bindtap等事件绑定语法的使用。教学难点1.理解ViewModel（页面js中的data和函数）如何充当Model和View之间的桥梁。

2.事件对象（event）的获取与使用，特别是通过data-*属性传递自定义数据。教学策略教学组织采用“原理剖析-案例演示-分步模仿-综合实验”的组织流程，层层递进。教学方法案例教学法、任务驱动法、讲练结合法。教学准备环境准备已安装微信开发者工具的计算机，可运行的小程序项目。资料准备1.《微信小程序开发项目实战教程》教材“项目2任务3前部”（MVVM与数据绑定部分）。

2.授课计划表“第5周”内容与作业要求。资源准备1.“祝君健康”小实验的需求描述与最终效果图（显示收缩压/舒张压/心率，可模拟更新）。

2.辅助理解MVVM的动画或示意图。

3.补充阅读资料：《MVVM模式与小程序框架》、《数据绑定与事件系统》。

4.典型错误案例集（如数据绑定格式错误、事件函数未定义等）。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目2任务3中关于MVVM和数据绑定的部分，观看配套慕课视频。

2.提出思考题：“为什么现代前端框架（如小程序）普遍采用数据绑定的模式？相比直接用JS操作DOM（网页元素）有何优势？”1.在学习平台发布预习资源和引导性问题。

2.提供“祝君健康”实验的初步构思。1.观看视频，初步了解数据绑定与事件。

2.思考并尝试回答提问，对比两种开发模式的差异。1.知识前置：利用慕课视频进行翻转课堂准备，聚焦核心概念。[citation:教材文前.pdf]

2.启发思考：引导学生从开发效率和维护性角度理解技术演进，培养框架思维。课中研学环节一：核心原理剖析——MVVM模式(25分钟)

回顾前几周内容，提问：“我们已经会配置和创建页面了，但如何让页面‘动’起来，响应用户操作？”引出MVVM模式。

内容精讲1：MVVM三要素

结合示意图讲解：

-Model：数据层（页面.js中的data对象）。

-View：视图层（.wxml模板）。

-ViewModel：桥梁（页面.js中管理数据和业务逻辑的部分）。

内容精讲2：数据驱动

强调核心思想：当Model（data）变化时，View会自动更新。1.使用动态示意图或比喻（如“数据是水源，视图是水龙头显示的水流”）来阐释MVVM的数据流动。

2.对比传统JS操作DOM与小程序数据绑定的代码量，直观展示MVVM的效率优势。

3.素养引导：阐述清晰的架构模式是构建复杂应用的基础，理解并运用好MVVM是“代码编写能力”的重要组成部分，体现工匠精神中的系统性思维。1.跟随讲解，理解Model、View、ViewModel各自的职责和协作关系。

2.在草稿纸上尝试画出MVVM数据流向简图。

3.思考：这种模式对团队协作开发有何好处？1.建立核心思维：深入理解MVVM这一现代前端开发的基石，为后续所有开发奠定正确的思维方式。

2.突破难点：通过可视化手段，将抽象的架构模式具体化，降低理解门槛。[citation:教材文前.pdf]

3.思政融入（工匠精神）​：将采用科学、高效的开发模式视为专业开发者必备的素养，是追求代码质量和开发效率的体现。环节二：核心实践——数据绑定与事件绑定(60分钟)

任务1：基础数据绑定与更新

演示在页面js的data中定义变量（如message:‘Hello’），在wxml中使用{{message}}显示。然后演示在js中通过this.setData({message:‘World’})更新数据，观察视图自动变化。

任务2：事件绑定与处理

演示在wxml中为按钮添加bindtap=“changeMessage”，在js中定义changeMessage函数，在函数内使用this.setData修改数据。

任务3：事件对象与数据传递

演示如何通过data-*属性（如data-index=“1”）在事件中传递自定义数据，并在事件处理函数中通过event.currentTarget.dataset.index获取。1.屏幕共享，编写简单示例，分步演示并讲解每一步的代码和效果。

2.实时演示this.setData的正确使用方法，强调其是更新视图的唯一途径。

3.演示如何从事件对象event中获取点击位置、组件信息等。

4.发布同步操作任务清单，要求学生创建一个新页面实践上述三点。1.跟随操作，在自己的项目中创建一个“实验页”。

2.实现：定义一个count变量并显示在页面上；创建一个按钮，点击后count增加1。

3.尝试为多个按钮设置不同的data-id，点击后在事件函数中打印出不同的id。1.​“做中学”核心实践：通过亲手编写数据绑定和事件处理的代码，将MVVM理论转化为实实在在的交互能力，这是小程序开发的基石。[citation:教材文前.pdf]

2.掌握核心API：熟练掌握this.setData和事件绑定语法，是解决大部分动态交互问题的关键。

3.理解数据流：通过data-*传参的练习，深入理解事件触发时数据是如何在视图和逻辑层间传递的。环节三：综合应用与问题诊断(35分钟)

活动1：“祝君健康”实验引导

分析“祝君健康”实验需求：页面显示血压（收缩压、舒张压）和心率数据，提供按钮可模拟“更新测量”功能。

引导学生设计data数据结构，并规划事件处理函数。

活动2：典型问题诊断

展示并分析常见错误：

1.数据绑定中双大括号{{}}遗漏或写错。

2.事件处理函数在js中未定义或拼写错误。

3.在事件函数中直接修改data属性（如this.data.count=1）而忘记使用this.setData。

活动3：初步实现与演示

指导学生开始动手实现“祝君健康”实验的基础框架。1.带领学生分析实验，确定Model（data中应有systolic,diastolic,heartRate等字段）。

2.将常见错误代码投屏，引导学生使用开发者工具的控制台报错信息进行诊断和修正。

3.巡回指导，解决学生在初步实现中遇到的具体问题，鼓励学生发挥创意美化界面。1.根据教师引导，规划自己的实验页面数据结构。

2.针对教师展示的错误案例，尝试指出错误原因并提出修改方案。

3.开始编写“祝君健康”实验的代码，实现数据展示和按钮点击更新功能。1.项目思维引导：将所学知识立即应用于一个完整的微型项目（实验），完成从知识点到解决问题能力的初步转化，践行“做中学”。

2.问题排查能力训练：通过诊断预设错误，培养学生阅读报错信息、定位和解决代码问题的能力，这是“问题排查能力”的核心。[citation:教材文前.pdf]

3.激发成就感：在课堂内完成实验的核心功能，让学生获得即时正向反馈，增强学习信心。课后拓展基础作业（来自授课计划）​：完成“祝君健康”小实验（血压值显示），要求实现数据展示和模拟更新功能。

拓展思考：阅读提供的《MVVM模式与小程序框架》资料，思考并回答：小程序框架是如何实现数据变更检测并自动更新视图的？这种机制带来了什么优势和潜在需要注意的地方？提供作业提交的详细标准（功能完整、代码规范）。在学习平台分享拓展阅读资料。1.完善并提交“祝君健康”实验代码，确保功能完整、界面清晰。

2.完成拓展阅读，整理笔记并回答思考题。1.巩固与深化：通过独立完成实验，巩固对MVVM、数据绑定、事件处理的核心技能掌握。

2.探究原理：引导学生不仅满足于“会用”，还要探究框架背后的工作原理，培养深度学习和批判性思维。教学评价1.过程性评价：课堂同步实践任务的完成度与代码质量；对典型错误案例的诊断与修正表现。

2.成果性评价：课后提交的“祝君健康”实验代码是否实现核心功能，代码结构是否清晰。

3.素养评价：在实验设计和问题诊断中体现出的逻辑思维、问题解决能力和探究精神。反思诊改1.亮点：通过“祝君健康”这一贴近生活的实验主题，将技术学习与健康意识自然结