微信基础开发及实战 7

《微信小程序开发》课程单元教学设计授课单元单元10：系统首页开发（一）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述tabBar栏的功能与在小程序导航体系中的重要性，并识记其核心配置项。

2.比较wx.switchTab、wx.navigateTo、wx.redirectTo等路由接口的适用场景与页面栈操作差异。

3.理解不同页面（tabBar页与非tabBar页）初始化数据时机的差异。1.能根据业务需求，在app.json中正确配置tabBar栏，包括图标、文字、页面路径等。

2.能在不同场景（tabBar内切换、普通页面跳转）下正确选择并使用wx.switchTab、wx.navigateTo等路由接口。

3.能根据页面类型（tabBar页）的特点，在合适的生命周期函数中完成页面数据的初始化。1.建立以用户体验为中心的产品意识，理解清晰、便捷的导航对于产品成功的重要性。

2.培养对比分析、精准选型的技术能力，能够根据具体业务需求选择最合适的实现方案。教学重难点教学重点1.tabBar栏的配置方法与注意事项。

2.wx.switchTab与wx.navigateTo等路由接口的核心区别及选用场景。教学难点1.理解tabBar页面的特殊性（页面栈中唯一，不可用navigateTo打开）。

2.根据不同的业务交互逻辑（是切换栏目还是进入新页面）正确选用路由接口。教学策略教学组织采用“需求驱动-配置实践-对比辨析-综合应用”的组织流程，突出场景化教学。教学方法案例教学法、任务驱动法、对比分析法、讲练结合法。教学准备环境准备1.已安装微信开发者工具的计算机，已完成用户信息模块的“明德E医”项目。

2.准备多款主流App（如微信、淘宝）的截图，用于展示不同风格的tabBar设计。资料准备1.《微信小程序开发项目实战教程》教材“项目4任务1-2”。

2.授课计划表“第10周”内容与作业要求。资源准备1.“明德E医”系统首页原型图，明确展示tabBar的栏目设计（如：首页、预约、我的）。

2.补充阅读资料：《tabBar配置规范》、《小程序页面路由接口对比》。

3.路由接口对比表格（功能、页面栈变化、适用场景）。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目4任务1-2，观看配套慕课视频中关于“tabBar配置”的部分。

2.布置课前调研：打开微信、淘宝等常用App，观察其底部导航栏（tabBar）的设计，思考其栏目设置背后的产品逻辑。1.在学习平台发布预习资源和调研任务。

2.提出引导性问题：“为什么几乎所有主流App都有底部导航栏？它解决了用户什么核心需求？”1.观看视频，了解tabBar的基本配置方法。

2.完成调研，记录观察结果和个人思考。1.前置学习与感知：利用慕课视频和实际产品观察，让学生带着感性认知和问题进入课堂，提高学习针对性。

2.启发产品思维：引导学生从用户视角思考导航设计，为后续的“工匠精神”和“服务社会”思政点做铺垫。课中研学环节一：情境导入与原理精讲（35分钟）​

导入：回顾用户信息模块，提问：“一个完整的应用，除了功能页面，如何让用户在核心功能间高效切换？”展示“明德E医”原型图，引出tabBar。

内容1：tabBar配置详解

讲解app.json中tabBar的配置项：color、selectedColor、backgroundColor、borderStyle、list（pagePath,text,iconPath,selectedIconPath）。强调图标尺寸规范。

内容2：路由接口深度对比

结合页面栈模型，对比讲解：

-wx.switchTab:专用于跳转到tabBar页面，并关闭所有非tabBar页面。

-wx.navigateTo:保留当前页，跳转到非tabBar页面（可返回）。

-wx.redirectTo:关闭当前页，跳转到非tabBar页面（不可返回）。

内容3：tabBar页数据初始化

讲解tabBar页面作为应用入口，其onLoad和onShow的触发时机（首次进入触发onLoad，切换tab时触发onShow）。1.展示多个优秀App的tabBar设计案例，分析其设计原则（清晰、稳定、易触达）。

2.使用动画或白板绘制页面栈模型，动态演示三种路由方式对页面栈的影响。

3.思政融入（工匠精神/服务社会）​：讲解导航设计时，强调“以用户为中心”的设计理念。清晰合理的tabBar设计，能极大提升应用易用性，是开发者“工匠精神”在产品细节上的体现，最终目的是更好地“服务社会”、解决用户痛点。

4.演示在tabBar页面的onShow中请求数据的代码示例。1.聆听讲解，对比不同路由接口的特点，记录核心区别。

2.思考“明德E医”应设置哪几个tabBar栏目，并说明理由。

3.讨论：为何tabBar页不能用navigateTo打开？1.建立系统认知：将导航配置（静态）与路由跳转（动态）结合讲解，构建完整的页面导航知识体系。

2.突破难点：通过可视化的页面栈模型和对比表格，清晰阐明不同路由接口的本质区别，解决易混淆点。

3.思政融入：将技术实现与产品设计、用户体验紧密结合，引导学生树立“技术为体验服务”的职业价值观。[citation:教材文前.pdf]环节二：核心实践——tabBar配置与路由应用（65分钟）​

任务1：配置“明德E医”tabBar

带领学生在app.json中为“明德E医”配置包含“首页”、“预约”、“我的”三个栏目的tabBar，并配置相应的图标和选中状态。

任务2：创建并关联tabBar页面

指导学生创建对应的三个tabBar页面文件（如index,appointment,me），并将其路径正确配置到tabBar的list中。

任务3：实现不同场景的路由跳转

场景A（tabBar内切换）​：在“首页”页添加按钮，使用wx.switchTab跳转到“我的”页。

场景B（进入详情页）​：在“首页”页添加按钮，使用wx.navigateTo跳转到一个非tabBar的“公告详情”页。

场景C（替换当前页）​：在“公告详情”页添加返回按钮，使用wx.navigateBack返回；同时演示若使用wx.redirectTo从首页跳转到详情页，则无法返回。1.屏幕共享，分步演示tabBar的配置过程，重点讲解图标路径的写法和常见错误。

2.演示三种路由跳转的代码，并实时在开发者工具中展示页面栈的变化（通过“页面路径”面板）。

3.设计对比实验：分别用switchTab和navigateTo去打开一个tabBar页面，让学生观察控制台报错，加深理解。

4.发布同步操作任务清单。1.在自己的项目中完成“明德E医”tabBar的配置，并测试切换功能。

2.创建“公告详情”页面，并在首页实现两种跳转：一种跳转到“我的”（tabBar），一种跳转到“公告详情”（非tabBar）。

3.在“公告详情”页实现返回功能，并尝试将首页的跳转改为redirectTo，体验其与navigateTo的区别。1.​“做中学”核心实践：通过亲手配置tabBar和编写不同路由跳转代码，将理论知识转化为解决实际导航问题的能力，践行“做中学”理念。[citation:教材文前.pdf]

2.强化概念理解：通过亲手操作和观察报错，深刻理解tabBar页的特殊性和不同路由接口的适用边界。

3.培养严谨习惯：图标路径、页面路径的准确配置，是前端开发的基本功，培养学生细致、严谨的工作习惯。环节三：知识巩固与迁移设计（20分钟）​

活动1：常见配置问题诊断

收集并演示常见错误：图标路径错误导致不显示；tabBar的pagePath未在pages数组首项声明；在非tabBar页使用switchTab等。

活动2：为“云惠视听”设计导航

引导学生根据“云惠视听”（文化娱乐项目）的业务特点，为其设计tabBar栏目（如“首页”、“发现”、“我的”），并规划各栏目下的页面跳转逻辑（哪些用switchTab，哪些用navigateTo）。1.将典型错误代码投屏，引导学生根据错误信息（如图标404、路由报错）自主排查问题。

2.组织学生分组讨论，为“云惠视听”设计导航结构，并阐述设计理由。

3.总结强调：导航设计是产品架构的直观体现，需要紧密结合业务逻辑。1.根据错误提示，尝试自主排查并修复配置和路由代码中的问题。

2.小组讨论，为“云惠视听”项目设计tabBar和核心页面跳转流程图。1.问题排查能力：通过诊断真实开发中的常见配置和路由错误，锻炼学生的调试和问题解决能力。[citation:教材文前.pdf]

2.知识迁移与业务分析：践行教材“示范—巩固—提升”的训练体系。将“明德E医”所学技能迁移到“云惠视听”，并引导学生进行业务分析，培养“需求解读能力”和产品思维。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）​：配置“明德E医”的tabBar栏（至少包含三个栏目），并实现各tab页之间的跳转，以及在首页通过按钮跳转至一个非tabBar页面。

拓展思考：阅读《小程序页面路由接口对比》，除了本单元讲解的三种，小程序还有哪些路由API（如reLaunch,switchTab的特别注意事项）？它们分别适用于什么场景？提供作业提交的详细标准（需展示tabBar配置代码、各页面截图及跳转功能正常的录屏或GIF）。在学习平台分享拓展阅读资料。1.完善“明德E医”的tabBar配置和路由跳转功能。

2.阅读官方文档，总结其他路由API的用法和场景，形成笔记。1.巩固技能：通过独立完成导航系统搭建，巩固对tabBar配置和路由接口的核心技能掌握。

2.自主学习与拓展：引导学生主动查阅官方文档，全面掌握路由系统，培养自主学习能力和技术文档阅读习惯。教学评价1.过程性评价：课堂实践任务的完成度与代码规范性；小组讨论中体现出的产品设计思路。

2.成果性评价：课后提交的作业中，tabBar配置是否正确美观，路由跳转逻辑是否符合业务