微信基础开发及实战 3

《微信小程序开发》课程单元教学设计授课单元单元13：预约挂号模块（一）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述分页加载技术（Page、PageSize）的基本原理及其在小程序列表数据加载中的应用。

2.说明wx.makePhoneCall接口的使用方法及在业务场景中拨打电话的交互设计。

3.解释scroll-view组件的滚动触底事件bindscrolltolower在实现分页加载中的关键作用。1.能使用分页加载技术（模拟后端接口）实现科室列表的分批加载与滚动刷新。

2.能调用wx.makePhoneCall接口，在科室详情页中实现“一键拨打电话”功能。

3.能合理设计并实现列表数据加载、加载中状态、无更多数据等完整交互逻辑。1.培养处理海量数据的前端性能优化意识，理解分页加载对于用户体验的重要性。

2.通过实现“一键拨打电话”功能，体会技术如何赋能医患沟通、提升公共服务效率，培养服务社会意识。教学重难点教学重点1.基于scroll-view的滚动触底事件实现分页加载的核心逻辑。

2.wx.makePhoneCall接口的调用与用户授权/交互体验处理。教学难点1.理解并实现分页加载中的状态管理（如加载中、无更多数据、错误处理）。

2.在分页加载中，正确处理新数据追加与列表重置的逻辑。教学策略教学组织采用“需求引入-逻辑推演-代码实现-场景模拟”的组织方式，注重逻辑流程的完整性。教学方法案例教学法、流程图解法、任务驱动法、讲练结合法。教学准备环境准备已安装微信开发者工具的计算机，已完成系统首页模块的“明德E医”项目。资料准备1.《微信小程序开发项目实战教程》教材“项目5任务1”。

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

2.模拟的分页数据接口（如：提供/api/departments?page=1&size=10返回模拟科室数据）。

3.分页加载逻辑的流程图（请求、加载、追加、状态切换）。

4.补充阅读资料：《分页加载原理与实现》、《wx.makePhoneCall接口》。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目5任务1，观看配套慕课视频中关于“分页加载”的部分。

2.提出思考题：“当列表数据非常多时，一次性加载全部数据有什么问题？分页加载是如何解决这个问题的？”1.在学习平台发布预习资源和引导性问题。

2.提供模拟分页接口的调用地址和参数说明。1.观看视频，了解分页加载的基本概念和实现思路。

2.思考并尝试回答提问，理解分页加载的必要性。1.前置学习：利用慕课视频进行翻转课堂准备，聚焦核心概念和实现流程。

2.启发性能意识：引导学生思考前端性能优化问题，为课堂实践做好认知铺垫。课中研学环节一：需求引入与原理精讲（25分钟）​

情境导入：展示“明德E医”预约挂号流程，提问：“医院有数十个科室，如何在一个页面里高效地展示给用户选择？”引出分页加载需求。展示科室详情页原型，引出拨打电话需求。

内容1：分页加载原理与状态管理

结合流程图讲解：

1.初始化：加载第一页数据。

2.滚动触底：触发bindscrolltolower事件。

3.状态判断：若正在加载或无更多数据，则返回；否则，加载下一页。

4.数据追加：将新数据追加到现有列表末尾。

5.状态更新：更新“加载中”状态和“页码”。

内容2：一键拨打电话

讲解wx.makePhoneCall的调用、用户确认弹窗以及良好的错误处理（如无SIM卡）。1.使用流程图或动画演示分页加载的完整循环过程，强调“状态管理”是逻辑核心。

2.思政融入（工匠精神/服务社会）：讲解分页加载时，强调这不仅是一个技术实现，更是对用户体验的尊重和关怀。流畅、无卡顿的列表浏览，能帮助用户快速找到所需科室，是开发者“工匠精神”在交互细节上的体现。一键拨打电话功能，则直接打通了线上查询与线下服务的桥梁，体现了技术“服务社会”、提升公共服务便捷性的价值。1.跟随讲解，理解分页加载的五个关键步骤。

2.思考在科室详情页中，除了电话，还有哪些信息是患者急需的？

3.讨论：拨打电话前是否需要用户二次确认？为什么？1.建立完整逻辑：透彻理解分页加载的实现流程和状态管理，为代码编写奠定坚实的逻辑基础。

2.思政融入：将技术实现（分页加载、一键拨号）与提升公共服务效率、优化用户体验紧密结合，深化“用技术服务社会”的职业价值观。[citation:教材文前.pdf]环节二：核心技能讲解与实践（70分钟）​

技能点1：科室列表页——分页加载实现

任务A-1：基础列表渲染

使用scroll-view和wx:for渲染初始科室列表。

任务A-2：集成分页加载

1.在data中定义状态变量：departmentList（列表数据）、currentPage（当前页码）、hasMore（是否有更多数据）、isLoading（是否正在加载）。

2.在onLoad中调用loadDepartmentData函数加载第一页。

3.为scroll-view设置bindscrolltolower事件，再次调用loadDepartmentData。

4.在loadDepartmentData函数中：

a.判断isLoading或!hasMore则返回。

b.设置isLoading:true。

c.调用模拟接口，请求对应页码的数据。

d.成功返回后，将新数据追加到departmentList，并更新currentPage和hasMore。

e.无论成功失败，最后设置isLoading:false。

任务A-3：加载状态UI

在列表底部使用wx:if根据isLoading和hasMore显示“加载中...”或“没有更多了”。

技能点2：科室详情页——拨打电话功能

任务B：在科室详情页，添加“联系电话”项，并绑定bindtap事件，在事件处理函数中调用wx.makePhoneCall({phoneNumber:'xxx'})。1.屏幕共享，分步演示分页加载的代码实现，重点讲解状态变量的初始化和更新时机。

2.关键演示：展示如何正确处理网络请求的异步性，避免重复请求（isLoading的作用）。

3.演示wx.makePhoneCall的调用，并模拟用户取消拨打电话的场景，讲解如何处理。

4.发布分层任务清单：基础（实现分页加载核心逻辑）、进阶（完善加载状态UI和错误提示）、挑战（在“云惠视听”项目中实现类似的分页视频列表）。1.任务A：在自己的科室列表页中，逐步实现分页加载功能，确保滚动到底部能加载新数据。

2.任务B：创建科室详情页，从列表页通过URL传参（复习单元12）跳转，并在详情页实现拨打电话功能。

3.为分页加载添加更友好的UI反馈（如加载动画）。1.​“做中学”核心实践：通过实现一个完整的、具有真实业务场景的分页列表，将异步请求、状态管理、UI反馈等复杂技能融会贯通，极大地提升“代码编写能力”和“问题排查能力”。[citation:教材文前.pdf]

2.攻克难点：通过亲手编写状态管理逻辑，深刻理解分页加载的核心，解决教学难点。

3.培养工程思维：引导学生思考如何构建健壮、用户体验良好的列表组件，这是前端开发中非常核心的工程能力。环节三：知识巩固与迁移应用（25分钟）​

活动1：常见问题诊断

演示并讲解常见问题：

1.scroll-view高度未设置导致无法触发bindscrolltolower。

2.分页逻辑错误导致重复加载同一页数据。

3.网络请求失败时，isLoading状态未重置，导致无法再次加载。

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

引导学生思考：在“云惠视听”的“视频列表”或“主播列表”中，如何应用分页加载？列表项点击后是跳转到详情页，还是直接播放？指导学生为其设计分页加载方案和交互流程。1.将错误案例投屏，引导学生根据现象（如列表不滚动、数据重复）进行逻辑排查。

2.组织学生讨论“云惠视听”中分页加载的应用场景，对比与“明德E医”科室列表的异同。

3.总结分页加载模式的可复用性，强调其作为通用解决方案的价值。1.根据错误提示，尝试自主排查并修正分页加载代码中的问题。

2.为“云惠视听”项目的“视频列表”设计分页数据结构和加载逻辑。

3.思考：在“云惠视听”中，如果用户快速连续滚动，如何进一步优化性能？1.问题排查能力：通过诊断涉及多状态管理和异步逻辑的复杂错误，进一步提升学生的调试能力。[citation:教材文前.pdf]

2.知识迁移与创新：践行教材“示范—巩固—提升”的训练体系。将“明德E医”中学到的分页加载模式迁移到“云惠视听”项目，并引导学生思考不同业务场景下的个性化设计，培养“需求解读能力”和迁移创新能力。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）：完成科室列表分页加载与科室详情页，实现滚动加载更多科室数据及在详情页拨打电话功能。

拓展思考：阅读《分页加载原理与实现》，思考并尝试：除了滚动触底加载，还有哪些常见的列表加载交互方式（如上拉刷新、点击加载更多）？它们各自的优缺点和适用场景是什么？提供作业提交的详细标准（分页功能完整、电话功能正常、UI状态清晰）。在学习平台分享拓展阅读资料。1.完善并提交“明德E医”科室列表页和详情页代码。

2.阅读拓展资料，了解其他列表加载模式，并尝试为科室列表添加一个“上拉刷新”功能（选做）。1.巩固技能：通过独立完成分页加载功能，巩固对异步请求、状态管理、滚动事件等核心技能的掌握。

2.深度探究：引导学生探索更多交互模式，拓宽技术视野，培养主动学习和方案设计能力。教学评价1.过程性评价：课堂实践任务的完成度、代码逻辑的严谨性以及状态管理的正确性。

2.成果性评价：课后提交的作业是否实现了流畅的分页加载、清晰的加载状态以及可用的电话拨打功能。

3.素养评价：在迁移设计讨论中体现出的性能优