微信基础开发及实战 4

《微信小程序开发》课程单元教学设计授课单元单元6：小程序开发技术基础（四）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述小程序页面生命周期函数的执行顺序与触发时机（onLoad、onShow、onReady、onHide、onUnload）。

2.解释this.setData的异步特性及其对数据更新时机的影响。

3.区分不同路由接口（wx.navigateTo、wx.redirectTo、wx.navigateBack）的功能与页面栈操作差异。1.能根据业务需求，在合适的生命周期函数中编写初始化代码、发起网络请求或执行页面隐藏/卸载逻辑。

2.能利用this.setData的回调函数或Promise化处理保证数据更新后的操作顺序。

3.能合理选择并使用不同路由接口实现页面间的灵活跳转与返回。1.建立严谨的时序思维，理解程序执行的生命周期概念，培养按需执行逻辑的优化意识。

2.通过“健康评分”实验，强化健康数据分析与自我健康管理的理念。教学重难点教学重点1.页面生命周期各阶段函数的理解与应用场景。

2.wx.navigateTo与wx.redirectTo在页面栈管理上的核心区别。教学难点1.理解this.setData的异步性，并掌握在数据更新后安全执行后续逻辑的方法。

2.页面栈的抽象概念及其在不同路由操作下的动态变化。教学策略教学组织采用“原理剖析-流程推演-实验验证-项目应用”的递进式组织方式，强化逻辑理解与实践应用。教学方法案例教学法、流程图解法、对比分析法、任务驱动法。教学准备环境准备已安装微信开发者工具的计算机，可运行的小程序项目。资料准备1.《微信小程序开发项目实战教程》教材“项目2任务3后部”（页面生命周期与路由部分）。

2.授课计划表“第6周”内容与作业要求。资源准备1.“健康评分”实验需求说明（输入身高、体重、血压等，计算并展示健康评分）。

2.“生命周期体验”实验页面模板（在每个生命周期函数中打印日志）。

3.页面生命周期函数执行顺序的时序动画或流程图。

4.页面栈的可视化演示工具或示意图。

5.补充阅读资料：《页面生命周期详解》、《路由与页面栈管理》。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目2任务3后部关于页面生命周期和路由的部分，观看配套慕课视频。

2.提出思考题：“为什么小程序要有页面生命周期的概念？这和我们日常开发中（如打开、关闭页面）的直觉有什么关联？”1.在学习平台发布预习资源和引导性问题。

2.提供“健康评分”实验的初步构思和数据公式。1.观看视频，了解生命周期函数和路由API。

2.思考生命周期概念的必要性，并与日常应用体验相联系。1.知识前置:利用慕课视频进行翻转课堂准备，聚焦核心概念。[citation:教材文前.pdf]

2.建立联系:引导学生将抽象技术概念与用户实际体验联系起来，理解技术服务于体验的本质。课中研学环节一：核心原理剖析——页面生命周期(40分钟)

回顾上单元MVVM，提问：“数据和视图会‘动’了，但页面自身从‘诞生’到‘消亡’的过程是怎样的？”引出生命周期。

内容精讲1：生命周期函数详解

结合时序图详细讲解：

-onLoad：页面加载，接收参数，适合数据初始化。

-onShow：页面显示（前后台切换），适合数据刷新。

-onReady：页面初次渲染完成，适合操作组件。

-onHide：页面隐藏，适合清理定时器等。

-onUnload：页面卸载，适合清理全局资源。

内容精讲2：this.setData的异步性

讲解this.setData后，视图更新是异步进行的。演示如何在回调函数或使用Promise化（wx.nextTick）保证后续逻辑在更新后执行。1.使用动态时序图或“人生阶段”比喻（出生、成长、工作、退休、离世）来生动阐释各生命周期阶段。

2.编写简单代码，演示在onLoad中发起请求，在onReady中操作组件，展示差异。

3.通过代码示例，对比直接console.log更新后的数据和在其回调中console.log的差异，强调异步性。

4.素养引导:阐述理解生命周期是编写健壮、高性能代码的基础，体现了“工匠精神”中对程序运行细节的精准把控。1.跟随讲解，在自己的项目中的测试页面内，为每个生命周期函数添加console.log语句，并观察开发者工具控制台的打印顺序。

2.理解onLoad和onShow的区别，思考在“健康评分”实验中，数据初始化应放在哪个函数。

3.练习使用this.setData的回调函数，确保数据更新后再进行下一步操作。1.建立时序思维:深刻理解页面生命周期的顺序和时机，为编写正确的初始化、更新和清理逻辑奠定基础。

2.突破难点:通过直观的日志打印和比喻，将抽象的生命周期概念具体化，降低理解难度。[citation:教材文前.pdf]

3.思政融入（工匠精神）:将精准控制代码执行时机、避免资源泄漏视为专业开发者必备的严谨态度和责任感。环节二：核心实践——路由接口与页面栈管理(50分钟)

任务1：路由接口对比与应用

演示并对比：

-wx.navigateTo：保留当前页，跳转新页（页面栈压入）。

-wx.redirectTo：关闭当前页，跳转新页（页面栈替换）。

-wx.navigateBack：返回上一页（页面栈弹出）。

任务2：页面栈可视化理解

使用白板或动画演示不同路由操作下页面栈的压入、替换、弹出过程。

任务3：实验应用

引导学生设计“生命周期体验”实验：创建一个包含多个页面的小程序，通过不同按钮触发不同路由，并在控制台观察各页面生命周期的触发情况。1.编写简单的多页面示例，分步演示三种路由方式，并使用开发者工具查看页面栈变化。

2.在白板上绘制页面栈示意图，动态模拟路由操作，让学生直观理解“栈”的概念。

3.布置“生命周期体验”实验任务，指导学生创建页面并添加日志。

4.发布同步操作任务清单。1.跟随操作，创建A、B、C三个页面。

2.在A页面添加按钮，分别用navigateTo跳B，用redirectTo跳C，观察B/C页面onLoad/onShow触发差异及返回行为。

3.完成“生命周期体验”实验基础部分，记录并分析日志。1.掌握核心交互:路由是构建多页面应用的核心，熟练掌握三种跳转方式是“代码编写能力”的关键体现。[citation:教材文前.pdf]

2.抽象概念具象化:将抽象的“页面栈”概念通过可视化和亲手操作变得易于理解，解决教学难点。

3.探究学习:通过实验主动探究不同路由对生命周期的影响，深化理解，培养主动学习能力。环节三：综合应用与问题诊断(30分钟)

活动1：“健康评分”实验引导与实现

分析实验需求：创建一个页面，包含表单输入（身高、体重等），点击按钮后根据公式计算健康评分，并展示结果。引导学生思考：

1.数据初始化放在哪个生命周期？

2.表单数据和计算结果如何用setData管理？

3.结果页面是否需要路由跳转？

活动2：常见问题诊断

展示并分析典型错误：

1.在onReady之前操作组件导致报错。

2.误用redirectTo导致无法返回上一页。

3.在setData后立即依赖新数据做计算导致错误。

活动3：实验初步实现与演示：指导学生开始动手实现“健康评分”实验。1.带领学生分析“健康评分”实验的业务逻辑和技术要点，确定合适的生命周期和路由方案。

2.将预设的错误代码投屏，引导学生利用控制台报错和生命周期日志进行诊断和修正。

3.巡回指导，解决学生在实验实现中遇到的具体问题，鼓励优化界面和交互。1.规划“健康评分”实验的页面结构、数据模型和计算逻辑。

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

3.开始编写“健康评分”实验的代码，实现数据输入、计算和展示功能。1.综合能力训练:将生命周期、数据绑定、事件处理和路由知识综合应用于一个完整的实验项目，实现知识点的串联和综合运用，践行“做中学”。[citation:教材文前.pdf]

2.问题排查能力深化:通过诊断复杂错误（涉及生命周期时序），进一步提升学生阅读报错、定位问题的能力。[citation:教材文前.pdf]

3.思政融入（服务社会）:通过“健康评分”主题，引导学生关注个人健康，思考如何利用技术开发工具促进健康管理，体现技术的人文关怀。课后拓展基础作业（来自授课计划）:完成“健康评分”与“生命周期体验”两个实验。

拓展思考:阅读提供的《页面生命周期详解》资料，思考：如果一个页面需要频繁显示和隐藏（如tab页），在onShow和onHide中分别应该做什么样的优化处理？提供作业提交的详细标准（功能完整、日志清晰）。在学习平台分享拓展阅读资料。1.完善并提交两个实验的代码，确保“健康评分”计算准确，“生命周期体验”日志完整。

2.完成拓展阅读，整理笔记并尝试回答思考题。1.巩固与深化:通过独立完成两个实验，巩固对页面生命周期、路由和setData异步性的核心技能掌握。

2.性能优化意识:引导学生思考性能优化策略，培养编写高效代码的意识，对接“岗位能力”中的优化能力。教学评价1.过程性评价:课堂同步实践任务的完成度与代码质量；对典型错误案例的诊断与修正表现。

2.成果性评价:课后提交的两个实验代码是否实现核心功能，生命周期日志是否清晰反映了路由操作的影响。

3.素养评价:在实验设计和问题诊断中体现出的逻辑思维、时序观念和探究精神。反思诊改1