微信基础开发及实战 9

《微信小程序开发》课程单元教学设计授课单元单元16：缴费与诊查报告模块（一）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述tabBar页面的独特生命周期及其与非tabBar页面的区别，理解onTabItemTap等事件的应用场景。

2.说明使用wx.switchTab结合自定义tabBar或页面逻辑实现tab切换与数据刷新的原理。

3.解释container组件的特性（如覆盖原生导航栏）及其在模拟弹窗或支付页面中的适用场景。1.能根据业务需求（待缴费/缴费记录）创建并配置tab页，并能正确运用其生命周期函数实现数据初始化与刷新。

2.能使用container组件构建独立的、沉浸式的支付确认页面。

3.能模拟完成支付流程的关键前端交互（如调用支付API、处理支付结果）。1.培养根据页面类型选用合适生命周期函数的精确开发思维。

2.在模拟支付流程开发中，引导学生建立金融交易安全意识，理解真实支付环境的严谨性与合规性，树立诚信、严谨的职业操守。教学重难点教学重点1.tab页（如待缴费、缴费记录）的生命周期应用与切换时数据刷新逻辑。

2.container组件的引入、配置及与普通页面的区别。教学难点1.理解并区分tab页的onShow与onTabItemTap等事件的触发时机，并在恰当的事件中执行数据刷新。

2.模拟支付流程中，前端与后端（或模拟后端）的数据交互与状态管理逻辑。教学策略教学组织采用“场景分析-技术对比-流程模拟”的组织方式，突出页面类型与业务场景的匹配。教学方法案例教学法、对比分析法、流程模拟法、任务驱动法。教学准备环境准备1.已安装微信开发者工具的计算机，已完成预约挂号模块的“明德E医”项目。

2.演示用的支付流程原型图或流程图。资料准备1.《微信小程序开发项目实战教程》教材“项目6”。

2.授课计划表“第16周”内容与作业要求。资源准备1.“缴费”模块原型图（含待缴费列表、缴费记录列表、支付确认页）。

2.模拟的待缴费/缴费记录数据。

3.模拟支付接口（可返回成功/失败状态）。

4.补充阅读文档：《tab页生命周期详解》、《container组件使用》。

5.关于移动支付安全与规范的行业法规或案例材料。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目6，观看配套慕课视频中关于“tab页生命周期”和“container组件”的部分。

2.提出思考题：“在微信或支付宝中，查看‘我的订单’时，切换‘待付款’、‘已完成’等TAB标签，页面是如何刷新数据的？这和普通页面跳转有何不同？”1.在学习平台发布预习资源和引导性问题。

2.提醒学生回顾单元10中关于tabBar配置的知识。1.观看视频，了解tab页的特殊生命周期和container的用途。

2.观察主流App的支付流程，思考其交互特点。1.前置学习与感知：利用慕课视频和日常应用观察，为理解tab页的特殊性和支付页面的独立性建立感性认知。

2.启发思考：引导学生从用户体验角度思考技术实现，培养产品思维。课中研学环节一：业务场景分析与技术选型（15分钟）​

情境导入：回顾预约挂号功能，提问：“挂号成功后，如何查看和管理待支付的费用？如何查看历史缴费记录？”引出“缴费”模块需求，包含两个核心子页面：​待缴费列表与缴费记录​。分析其作为tab页的合理性（用户高频切换查看）。

内容1：tab页生命周期深度解析

对比讲解普通页面与tab页的生命周期：

-onShow:页面显示时触发，适用于普通页面和tab页的数据初始化和刷新。

-onTabItemTap:仅tab页特有，点击对应tab时触发，适合处理tab切换时的数据刷新。

内容2：container组件解析

讲解container的特性：覆盖原生导航栏、提供独立的页面容器，常用于需要全屏沉浸式体验的场景，如支付、登录、大图预览等。1.展示缴费模块原型图，分析其采用tab页切换而非页面跳转的优点（保持导航结构，体验更佳）。

2.使用流程图或代码演示onShow与onTabItemTap的触发时机差异，并讨论在缴费模块中，何时应该在哪个事件中刷新数据（如每次进入tab页都应刷新“待缴费”，而“缴费记录”可能无需每次都刷新）。

3.对比普通页面与使用container构建的支付页在视觉和交互上的差异。1.理解缴费模块的业务需求和技术实现方案。

2.思考：为什么支付确认页适合用container？

3.讨论：在onTabItemTap和onShow中刷新数据，用户体验有何不同？1.明确任务：从业务需求出发，明确本单元要完成的缴费管理功能和技术选型。

2.深化概念：深入理解tab页的特殊性，掌握其生命周期的精准运用，这是提升小程序开发能力的关键。环节二：核心技能讲解与实践（75分钟）​

技能点1：缴费tab页实现

任务A-1：创建并配置tab页

在app.json中配置“缴费”tabBar，并创建对应的“待缴费”和“缴费记录”两个tab页面。

任务A-2：应用tab页生命周期

在“待缴费”页的onTabItemTap或onShow中，调用loadPendingPayments函数，从模拟接口加载待缴费列表数据并渲染。

在“缴费记录”页的onLoad或onShow中，调用loadPaymentHistory函数，加载历史缴费记录。

任务A-3：状态与交互

为“待缴费”列表项添加“立即支付”按钮。

技能点2：模拟支付页面实现

任务B-1：使用container构建支付页

创建一个非tab页面，使用container作为根组件，模拟支付确认页的UI（金额、支付方式选择等）。

任务B-2：支付流程模拟

1.从待缴费列表点击“立即支付”，携带订单信息跳转到支付页。

2.在支付页，点击“确认支付”按钮，调用模拟支付接口（wx.request）。

3.根据接口返回结果（成功/失败），使用wx.showModal或wx.showToast提示用户，并处理后续逻辑（如支付成功则跳转回缴费记录页，并更新状态）。1.演示如何在app.json中新增tabBar项，并关联到两个tab页。

2.关键演示：在“待缴费”页分别编写onTabItemTap和onShow的刷新数据逻辑，并让学生观察切换tab和从其他页面返回时，哪个事件被触发，加深理解。

3.演示container页面的创建和配置，重点讲解其覆盖原生导航栏的效果和CSS样式的注意事项。

4.模拟支付流程演示：演示从待缴费列表->支付页->调用模拟接口->处理结果的完整代码流程，并强调用户体验（加载中状态、结果提示）。

5.思政融入（职业素养/合规意识）：在讲解支付流程时，强调金融交易安全的重要性。虽然本次是模拟支付，但要引导学生了解真实支付环境下的合规要求（如敏感信息加密、用户授权、风险控制），树立诚信、严谨、安全的职业操守和合规意识。1.任务A：在“明德E医”项目中创建并配置缴费模块的两个tab页，实现数据加载与列表渲染。

2.任务B：实现支付确认页面，并模拟调用支付接口，完成支付成功/失败的交互逻辑。

3.尝试在支付成功回调中，使用wx.navigateBack或wx.switchTab返回缴费记录页，并思考如何通知其刷新数据（例如通过事件或全局状态）。1.​“做中学”核心实践：通过实现一个完整的缴费管理流程，巩固tabBar配置、tab页生命周期、组件使用、页面跳转与传参、异步请求与状态处理等多项核心技能，综合性强。

2.攻克难点：通过亲手编写onTabItemTap事件处理函数，直观感受tab页生命周期的独特性；通过实现支付流程，理解前后端交互的状态管理。

3.思政融入：将支付功能开发与金融安全、职业操守教育相结合，强化学生的合规意识和责任感。[citation:教材文前.pdf]环节三：知识巩固与迁移设计（30分钟）​

活动1：常见问题诊断

演示并讲解常见问题：

1.tab页配置错误导致页面无法显示。

2.在tab页的onLoad中请求数据，导致切换tab时数据不刷新。

3.container页面内样式布局问题（如未覆盖全屏）。

4.支付模拟中，未处理网络请求失败或超时的情况。

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

引导学生思考：在“云惠视听”项目中，哪些功能模块适合用tab页呈现（如“我的订单”下的“待付款”、“已完成”、“已取消”）？哪些场景适合使用container（如视频全屏播放、会员开通确认页）？指导学生为其设计页面结构。1.将错误案例投屏，引导学生根据控制台报错和页面表现进行诊断。

2.组织学生讨论“云惠视听”中tab页和container的应用场景，并绘制简单的页面结构图。

3.总结tab页与普通页、container与普通页面的适用场景选择原则。1.根据错误提示，尝试修正tab页配置或生命周期函数中的问题。

2.为“云惠视听”的“我的订单”模块设计tab结构，并规划每个tab页的数据来源和刷新逻辑。

3.思考：除了支付页，还有哪些场景适合用container？1.问题排查能力：通过诊断涉及多页面类型和交互流程的典型错误，进一步提升学生的调试能力。[citation:教材文前.pdf]

2.知识迁移与创新：践行教材“示范—巩固—提升”的训练体系。将“明德E医”中学到的页面组织模式迁移到“云惠视听”项目，培养学生根据业务需求设计信息架构和交互界面的能力。[citation:教材文前.pdf]

3.培养架构思维：引导学生思考不同页面组件（tab页、container、普通页）的适用场景，建立初步的架构选型思维。课后拓展基础作业（来自授课计划）：完成待缴费列表与缴费记录tab页，实现点击“立即支付”跳转至由container构建的模拟支付页面，并完成支付结果提示与页面跳转。

拓展思考：阅读《tab页生命周期详解》，思考如何利用getCurrentPages()等方法，在支付成功返回后，精准刷新“待缴费”tab页的数据？container组件与wx.showModal等原生弹窗在交互体验上有什么本质区别？提供作业提交的详细标准（tab页切换流畅、支付流程交互完整、页面UI美观）。在学习平台分享拓展阅读资料。1.完善并提交“明德E医”缴费模块的完整代码。

2.阅读拓展资料，思考并尝试实现支付成功后，自动刷新“待缴费”列表数据的功能。1.巩固技能：通过独立完成缴费管理这一综合性功能模块，巩固对tab页生命周期、container使用以及完整业务流实现的能力。

2.能力提升：引导学生探索更深层次的页面间通信与数据更新机制，培养解决复杂交互问题的能力。教学评价1.过程性评价：课堂实践任务的完成度、代码逻辑的清晰度以及对tab页生命周期和container特性的正确应用。

2.成果性评价：课后提交的作业是否实现了完整的缴费列表查看、tab切换、模拟支付流程。

3.素养评价：在支付流程设计中体现出的安全意识、用户体验思考以及在迁移设计讨论中表现出的架构设