微信基础开发及实战 11

《微信小程序开发》课程单元教学设计授课单元单元14：预约挂号模块（二）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述如何使用小程序API处理日期数据，并进行格式化展示。

2.解释async/await异步编程语法在小程序网络请求中的应用场景与优势。

3.说明使用picker组件进行日期选择的实现方法及其与后台数据的联动。1.能实现医生列表页，集成日期选择器，并根据所选日期动态筛选并显示对应排班的医生列表。

2.能在医生详情页中，使用async/await语法优化多个异步操作（如获取医生详情、获取可预约时段）的代码结构。

3.能对原始日期数据进行预处理和格式化，以满足不同场景的显示需求。1.培养处理复杂异步逻辑和优化代码结构的能力，提升代码的可读性和可维护性。

2.通过实现医生排班查询功能，体会技术如何优化医疗资源配置、提升患者就医效率，增强社会服务意识。教学重难点教学重点1.日期选择器与医生列表的动态数据联动。

2.async/await语法在小程序异步请求中的应用。教学难点1.理解async/await如何简化异步操作的回调地狱，并正确处理其错误捕获。

2.根据业务需求对日期数据进行多维度处理（如判断是否为今天、转换为星期几、格式化显示等）。教学策略教学组织采用“业务串联-异步编程演进-数据处理实践”的组织方式，注重逻辑的清晰与代码的优雅。教学方法案例教学法、对比教学法、任务驱动法、讲练结合法。教学准备环境准备已安装微信开发者工具的计算机，已完成单元13科室列表模块的“明德E医”项目。资料准备1.《微信小程序开发项目实战教程》教材“项目5任务2-3”。

2.授课计划表“第14周”内容与作业要求。资源准备1.“医生列表页”与“医生详情页”原型图。

2.模拟的医生排班数据接口（可根据日期参数返回对应医生列表）。

3.模拟的医生详情与可预约时段接口。

4.日期处理工具函数示例代码。

5.补充阅读资料：《async与await异步编程》、《日期处理与格式化》。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目5任务2-3，观看配套慕课视频中关于“日期处理”和“async/await”的部分。

2.提出思考题：“在预约挂号场景中，为什么需要根据日期来筛选医生？如果不用async/await，用回调函数处理多个连续的异步请求（如先获取详情，再获取时段），代码会变成什么样？”1.在学习平台发布预习资源和引导性问题。

2.提供模拟接口的调用说明和示例数据。1.观看视频，了解日期处理和异步编程的新语法。

2.思考并尝试用回调函数模拟一个多层嵌套的异步场景，感受其复杂性。1.前置学习与感知：利用慕课视频降低课堂认知负荷，并通过问题引导学生提前感知异步编程的复杂性，为学习async/await的必要性做铺垫。

2.启发思考：引导学生从业务逻辑和代码质量两个角度思考问题，培养工程思维。课中研学环节一：业务分析与原理精讲（25分钟）​

情境导入：回顾科室列表，提问：“用户选择了某个科室后，如何查看该科室下医生未来几天的排班情况？”展示医生列表页原型，引出日期选择与数据筛选需求。展示医生详情页原型，引出需要同时获取医生基本信息和可预约时段的需求。

内容1：日期数据处理核心

讲解：

-获取当前日期：newDate()。

-日期格式化：使用Date对象的方法或第三方库（如dayjs）进行格式化。

-日期比较与计算：判断日期先后、计算未来N天的日期。

内容2：异步编程演进

对比讲解：

-**回调函数(Callback)**：易产生“回调地狱”，代码难以阅读和维护。

-Promise：链式调用，改善了回调嵌套。

-async/await：以同步的方式编写异步代码，逻辑更清晰。

讲解async函数声明和await等待Promise完成的基本语法。1.使用流程图展示从选择科室、选择日期到获取医生列表的业务流程。

2.演示使用Date对象进行常见日期操作，并展示一个简单的日期格式化工具函数。

3.对比演示：用三种方式（回调、Promise、async/await）实现同一个需要连续两个网络请求的业务逻辑，直观展示代码清晰度的差异。

4.思政融入（工匠精神）：讲解async/await时，强调优秀的开发者不仅追求功能实现，更追求代码的简洁、清晰与可维护性。使用更优雅的异步编程方式，是“工匠精神”在代码层面的体现，也是对团队协作和项目长期健康发展的负责态度。1.跟随讲解，理解日期在预约业务中的核心作用。

2.观察三种异步编程方式的代码示例，体会async/await在可读性上的优势。

3.思考：在医生详情页，哪些信息可能需要异步获取？1.建立完整逻辑：透彻理解预约挂号中日期筛选的业务逻辑和技术实现路径。

2.突破难点：通过生动的对比，让学生深刻理解async/await带来的革命性改进，激发学习动力。

3.思政融入：将代码质量提升到“工匠精神”和职业素养的高度，引导学生树立编写高质量代码的意识。[citation:教材文前.pdf]环节二：核心技能讲解与实践（70分钟）​

技能点1：医生列表页——日期选择与数据联动

任务A-1：构建页面与日期选择

创建医生列表页，使用picker组件（mode="date"）实现日期选择，并绑定bindchange事件。

任务A-2：数据处理与列表渲染

1.在onLoad中，初始化日期为当天，并调用loadDoctorList函数。

2.在loadDoctorList函数中，将选择的日期进行格式化处理，作为参数请求模拟接口。

3.使用wx:for渲染返回的医生列表，展示医生头像、姓名、职称、剩余号源等。

任务A-3：日期切换联动

确保日期选择器的bindchange事件触发时，能重新调用loadDoctorList并更新列表。

技能点2：医生详情页——async/await优化异步流程

任务B-1：基础详情展示

从列表页跳转至详情页，通过URL传递医生ID，在详情页onLoad中接收参数。

任务B-2：使用async/await获取数据

1.将onLoad函数标记为async。

2.在函数内部，使用try...catch包裹异步操作。

3.使用await依次等待两个网络请求完成：

constdoctorDetail=awaitwx.request(...);

constscheduleList=awaitwx.request(...);

4.将两次请求的结果合并，使用this.setData更新页面数据。1.屏幕共享，分步演示医生列表页的开发，重点讲解日期格式化与接口联动的时机。

2.关键演示：在医生详情页，分别用回调和async/await实现相同的双请求逻辑，让学生直观感受代码简洁度的巨大提升，并讲解try...catch进行错误处理的重要性。

3.演示如何优雅地处理加载状态，在async函数开始前显示loading，结束后隐藏。

4.发布分层任务清单：基础（完成医生列表页日期联动）、进阶（完成医生详情页基础信息展示）、挑战（在详情页使用async/await集成多个异步请求）。1.任务A：实现医生列表页，完成日期选择器与医生列表的动态数据绑定。

2.任务B：实现医生详情页，使用async/await语法优化数据加载流程，确保医生基本信息和排班信息能顺序加载并展示。

3.尝试在日期选择器中，限制只能选择今天及未来的日期。1.​“做中学”核心实践：通过实现一个完整的、带有复杂交互和数据处理的医生查询功能，综合运用日期处理、网络请求、异步编程等核心技能，极大提升“代码编写能力”和“问题排查能力”。[citation:教材文前.pdf]

2.攻克难点：通过亲手编写async/await代码，并处理其错误捕获，使学生真正掌握这一现代异步编程利器。

3.培养工程思维：引导学生思考如何构建响应迅速、用户体验良好、代码结构清晰的数据驱动型页面。环节三：知识巩固与迁移应用（25分钟）​

活动1：常见问题诊断

演示并讲解常见问题：

1.日期格式化时出现InvalidDate错误。

2.async函数中使用await但未处理可能的拒绝（Rejection），导致程序静默失败。

3.日期选择器切换时，未清空旧列表导致页面显示混乱。

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

引导学生思考：在“云惠视听”的“节目单”或“直播预约”功能中，如何应用本单元知识？例如，如何实现按日期筛选不同主播的直播列表？在主播详情页，如何用async/await获取主播信息和直播计划？1.将错误案例投屏，引导学生根据控制台报错和网络请求结果进行逻辑排查。

2.组织学生讨论“云惠视听”中类似场景的应用，并绘制简单的数据流程图。

3.总结async/await的最佳实践，强调其已成为现代JavaScript异步编程的标准写法。1.根据错误提示，尝试自主排查并修正日期处理和异步请求代码中的问题。

2.为“云惠视听”项目的“直播列表”页设计日期筛选功能和对应的数据结构。

3.思考：在小程序中，除了网络请求，还有哪些API返回Promise，可以使用await？1.问题排查能力：通过诊断涉及日期对象和异步流程控制的复杂错误，进一步提升学生的调试能力。[citation:教材文前.pdf]

2.知识迁移与创新：践行教材“示范—巩固—提升”的训练体系。将“明德E医”中学到的日期筛选和异步编程模式迁移到“云惠视听”项目，并引导学生思考不同业务场景下的个性化设计，培养迁移创新能力。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）：完成医生列表页与医生详情页，实现通过日期选择器切换不同日期的医生列表，并在详情页使用async/await获取并展示医生详细信息。

拓展思考：阅读《async与await异步编程》，深入理解Promise的状态、async函数的返回值特性，以及如何在循环中正确使用await。思考：如果医生详情页的两个请求互不依赖，可以同时发出，如何用Promise.all结合async/await进行优化？提供作业提交的详细标准（日期联动功能正常、详情页数据完整、代码使用了async/await）。在学习平台分享拓展阅读资料。1.完善并提交“明德E医”医生列表页和详情页代码。

2.阅读拓展资料，理解Promise.all的用法，并尝试优化医生详情页的数据加载（如果两个请求独立）。1.巩固技能：通过独立完成带有日期筛选和优化异步编程的页面，巩固对核心技能的掌握。

2.深度探究：引导学生探索更高级的异步编程模式，优化程序性能，培养技术深度和主动优化意识。教学评价1.过程性评价：课堂实践任务的完成度、代码逻辑的清晰度以及async/await语法的正确使用。

2.成果性评价：课后提交的作业是否实现了流畅的日期切换、完整的详情展示，以及使用了async/await优化代码。

3.素养评价：在代码中体现出的对异步流程的清晰掌控和对代码质量的追求。反思诊改1.亮