微信基础开发及实战 16

《微信小程序开发》课程单元教学设计授课单元单元15：预约挂号模块（三）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述全局数据管理（如globalData、Storage）在跨页面数据共享中的应用场景与区别。

2.解释预约记录的本地状态管理（如“待就诊”、“已取消”、“已完成”）及其在小程序中的实现方法。

3.说明通过模拟接口或本地数据模拟实现取消预约功能的业务流程与数据更新逻辑。1.能在“预约确认页”与“预约记录页”之间，通过全局数据或页面传参等方式，正确传递和接收预约信息。

2.能根据预约记录数据的状态字段，使用条件渲染（wx:if）动态管理并展示不同的状态标签与操作按钮（如“取消预约”）。

3.能实现取消预约功能，并同步更新本地数据和UI状态。1.培养数据状态管理的严谨思维，理解数据一致性在业务流程中的重要性。

2.通过实现完整的预约-取消流程，体会技术赋能下医疗服务闭环管理的严谨性与责任感。教学重难点教学重点1.预约确认信息的全局传递与接收。

2.基于数据状态的条件渲染在预约记录页中的综合应用。教学难点1.根据业务场景选择合适的数据共享方案（globalData、Storage、URL传参）。

2.取消预约后，如何保证列表页与详情页状态的一致更新。教学策略教学组织采用“流程闭环-数据驱动-状态管理”的组织方式，围绕预约业务的全流程展开教学。教学方法案例教学法、流程图解法、任务驱动法、讲练结合法。教学准备环境准备已安装微信开发者工具的计算机，已完成单元14医生详情页的“明德E医”项目。资料准备1.《微信小程序开发项目实战教程》教材“项目5任务4”。

2.授课计划表“第15周”内容与作业要求。资源准备1.“预约确认页”与“预约记录页”原型图。

2.预约业务完整流程图（选择科室/医生->确认->记录->取消/完成）。

3.模拟的预约提交与取消接口（或使用本地数据模拟）。

4.补充阅读文档：《小程序数据共享方案》、《页面间数据传递方式对比》。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目5任务4，观看配套慕课视频中关于“页面间数据传递”的部分。

2.提出思考题：“你在网上预约挂号后，会收到哪些信息？如果想取消，流程是怎样的？想想看，这些信息（科室、医生、时间）是怎么从确认页传递到记录页的？”1.在学习平台发布预习资源和引导性问题。

2.提供模拟预约数据结构和状态枚举值的说明。1.观看视频，了解页面间数据传递的不同方式。

2.结合自身生活体验，思考预约业务的完整流程和数据流转。1.前置学习与生活感知：利用慕课视频进行翻转课堂准备，并结合生活经验建立业务认知，为课堂学习建立感性基础。

2.启发业务思维：引导学生从用户视角审视业务流程，思考背后的技术实现，培养业务需求理解能力。课中研学环节一：业务闭环与方案选型（20分钟）​

情境导入：回顾前两单元，用户已可选择科室、医生和时间。提问：“确认预约信息后，如何将这些信息提交并记录下来？之后又如何查看和管理这些记录？”引出本单元任务：​预约确认、记录管理、取消预约​。

内容1：数据传递方案对比

复习已学的数据传递方式（URL参数、getApp().globalData），引入wx.setStorageSync/wx.getStorageSync。

对比三种方案的优缺点与应用场景：

-URL参数：适合传递简单、非敏感数据，用于页面间临时跳转。

-globalData：适合在应用生命周期内需要频繁访问的全局数据（如用户信息）。

-Storage：适合需要持久化存储、跨次启动访问的数据（如预约记录、购物车）。

内容2：预约状态管理

讲解预约记录可能的状态（如：status:0-待就诊,1-已取消,2-已完成），以及如何根据状态控制UI（显示不同标签、是否可取消）。1.使用流程图展示从医生详情页->预约确认页->预约记录页->取消/完成的完整业务闭环。

2.思政融入（工匠精神/职业素养）：讲解状态管理时，强调在医疗等严肃场景下，数据状态的准确性、一致性至关重要。一个状态标识错误可能导致严重的业务混乱。培养学生严谨、细致的数据处理习惯和责任感，这是开发者“工匠精神”和“职业素养”在业务逻辑层面的体现。1.跟随讲解，理解预约业务的完整流程。

2.讨论：预约确认信息（科室、医生、时间、就诊人）应该用哪种方式传递到记录页？为什么？

3.思考：取消预约后，除了更新当前记录状态，还需要考虑哪些影响（如号源释放）？1.建立系统思维：从业务流程闭环的角度切入教学，帮助学生构建完整的项目功能视图。

2.强化技术选型能力：通过对比分析，引导学生根据业务需求选择最合适的技术方案，培养“需求解读能力”。[citation:教材文前.pdf]

3.思政融入：将数据状态管理与业务流程的严谨性、可靠性关联，强化学生的责任意识和职业规范。环节二：核心技能讲解与实践（70分钟）​

技能点1：预约确认页与全局数据传递

任务A-1：确认页UI与数据展示

创建预约确认页，展示从医生详情页或通过全局数据传递过来的预约信息（科室、医生、时间、就诊人等）。

任务A-2：提交预约与数据持久化

1.点击“确认预约”按钮，生成一条包含状态（status:0）、时间戳等信息的预约记录对象。

2.使用wx.setStorageSync将新记录追加到本地存储的预约记录列表中。

3.提示预约成功，并跳转回预约记录页或首页。

技能点2：预约记录页与状态管理

任务B-1：读取与渲染记录列表

在预约记录页的onShow生命周期中，使用wx.getStorageSync读取预约记录列表，并使用wx:for渲染。

任务B-2：基于状态的条件渲染

根据每条记录的status字段，使用wx:if/wx:elif/wx:else动态渲染不同的状态标签（如“待就诊”、“已取消”）和操作按钮（仅“待就诊”状态显示“取消预约”按钮）。

技能点3：取消预约功能实现

任务C：为“取消预约”按钮绑定事件。

1.弹出确认框（wx.showModal）让用户二次确认。

2.确认后，通过记录的id找到本地存储列表中对应项，将其status更新为1（已取消）。

3.使用wx.setStorageSync更新本地存储，并立即调用this.setData刷新当前页面列表的显示状态。1.屏幕共享，演示如何从医生详情页携带数据跳转到确认页（复习URL传参），并在确认页展示。

2.关键演示：演示使用wx.setStorageSync存储数组数据，并讲解如何实现新增和更新操作。

3.演示在记录页使用wx:if实现根据状态动态显示不同UI，并强调onShow中读取数据以保证列表最新。

4.完整演示取消预约的交互流程和代码实现，包括wx.showModal的使用和本地数据的更新。

5.发布分层任务清单：基础（完成确认页与记录页的数据传递与展示）、进阶（实现完整的取消预约流程）、挑战（为“云惠视听”设计订单管理功能）。1.任务A：实现预约确认页，展示预约信息，并实现“确认预约”功能，将记录存入本地。

2.任务B：实现预约记录页，读取并展示所有预约记录，并根据状态动态显示标签和按钮。

3.任务C：实现取消预约功能，确保点击后本地数据更新，页面UI同步变化。

4.尝试为取消操作添加简单的撤销逻辑（可选）。1.​“做中学”核心实践：通过实现一个包含数据传递、持久化存储、状态管理和用户交互的完整业务闭环，将多个核心技能点融会贯通，极大提升“代码编写能力”和“问题排查能力”。[citation:教材文前.pdf]

2.攻克难点：通过亲手操作本地存储的增删改查和基于状态的条件渲染，深刻理解数据驱动视图的核心思想，掌握状态管理的实践方法。

3.培养工程思维：引导学生思考数据在多个页面和不同状态间的流转与同步，培养完整的业务逻辑实现能力。环节三：知识整合与迁移设计（30分钟）​

活动1：数据方案深度讨论

组织讨论：

1.如果预约记录非常多，使用Storage存储有什么潜在问题？

2.在实际项目中，预约记录数据通常存储在哪里（前端本地vs.后端数据库）？前端本地存储适合什么场景？

活动2：迁移至“云惠视听”​

引导学生思考：在“云惠视听”项目中，用户购买会员或点播视频后，会生成“订单”或“购买记录”。如何借鉴本单元的知识，设计其订单确认页、订单记录页和取消订单功能？

活动3：常见问题诊断

演示并讲解常见问题：

1.Storage存储对象或数组时，未使用JSON.stringify和JSON.parse导致数据异常。

2.取消预约后，页面数据未立即刷新的问题（需在onShow或成功回调中主动更新）。

3.多页面同时操作同一Storage数据可能引发的并发问题（简单介绍）。1.引导学生对比前端本地存储与后端数据库的优缺点，理解数据持久化的层次和选择依据。

2.组织学生分组讨论，为“云惠视听”设计订单管理的页面结构、数据字段和状态流转图。

3.将错误案例投屏，引导学生通过console.log和开发者工具的Storage面板调试数据问题。1.参与讨论，理解Storage的局限性及在实际项目中的应用边界。

2.为“云惠视听”规划订单管理模块，设计订单数据结构和状态枚举。

3.根据错误提示，尝试诊断并修正数据存储和状态更新的代码。1.培养系统思维：通过讨论数据存储方案，引导学生从单纯的功能实现，上升到架构设计和方案选型的层面思考问题。

2.知识迁移与创新：践行教材“示范—巩固—提升”的训练体系。将医疗场景的预约管理逻辑迁移到文化娱乐场景的订单管理，培养学生举一反三和业务抽象的能力。[citation:教材文前.pdf]

3.问题排查能力：通过诊断涉及数据持久化和状态同步的典型问题，进一步提升学生的调试能力。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）：完成挂号确认、挂号记录与取消预约功能。要求实现预约信息从确认页到记录页的传递与存储，记录页能根据状态动态展示，并能成功取消预约。

拓展思考：阅读《小程序数据共享方案》、《页面间数据传递方式对比》，总结归纳不同数据共享与传递方式的适用场景、优缺点及注意事项。思考：在更复杂的项目中，如何设计一个全局的状态管理方案？提供作业提交的详细标准（功能完整、数据流转正确、状态管理清晰）。在学习平台分享拓展阅读资料。1.完善并提交“明德E医”预约确认、记录与取消功能的完整代码。

2.阅读拓展资料，整理一份关于小程序数据管理方案的对比分析笔记。1.巩固技能：通过独立实现预约业务的核心闭环，巩固对数据传递、本地存储和状态管理等核心技能的掌握。

2.能力提升：引导学生进行知识梳理和方案对比，培养其技术选型能力和系统设计思维。教学评价1.过程性评价：课堂实践任务的完成度、代码逻辑的清晰度以及数据状态管理的正确性。

2.成果性评价：课后提交的作业是否实现了完整的预约-记录-取消业务流程，交互是否符合预期。

3.素养评价：在方案讨论和迁移设计中体现出的数据管理严谨性和业务抽