微信基础开发及实战 6

《微信小程序开发》课程单元教学设计授课单元单元17：诊查报告模块与测试发布（二）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述如何使用wx.previewImage接口实现图片的预览功能，并理解其参数配置。

2.说明wx.setTabBarBadge接口的使用方法，及其在实现消息红点/数字角标功能中的作用。

3.解释通过动态控制view组件的class或style实现列表项内容展开与收起的交互原理。1.能构建诊查报告列表页，并实现单条报告详情的展开/收起交互。

2.能集成wx.previewImage接口，使报告中的图片可被点击并全屏预览。

3.能使用wx.setTabBarBadge在“我的”或“报告”tab上动态设置未读报告数量的角标提示。1.培养对用户体验细节的关注，理解便捷、清晰的交互设计对医疗信息传递的重要性。

2.通过实现新报告数量提示，体会技术如何辅助用户高效处理重要信息，培养责任感和服务意识。教学重难点教学重点1.wx.previewImage接口的调用与图片预览的实现。

2.wx.setTabBarBadge设置与清除角标的方法。教学难点1.理解并实现列表项展开/收起的状态管理（独立控制与联动控制）。

2.在适当的时机（如进入页面、读取新报告后）动态计算并更新tabBar角标。教学策略教学组织采用“交互驱动-接口应用-状态同步”的组织方式，聚焦于提升用户体验的实战技能。教学方法案例教学法、任务驱动法、演示教学法、讲练结合法。教学准备环境准备已安装微信开发者工具的计算机，已完成单元16缴费模块的“明德E医”项目。资料准备1.《微信小程序开发项目实战教程》教材“项目7-8”。

2.授课计划表“第17周”内容与作业要求。资源准备1.“诊查报告列表页”原型图（包含可展开的报告条目、缩略图、预览按钮）。

2.包含多份模拟诊查报告（含文字、图片URL、报告状态-已读/未读）的数据文件。

3.补充阅读资料：《wx.previewImage接口》、《wx.setTabBarBadge与红点管理》。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目7-8，观看配套慕课视频中关于“图片预览”和“tabBar角标”的部分。

2.提出思考题：“在微信聊天列表里，新消息提示（红点/数字）是怎么工作的？在小程序中，如何实现类似的未读消息提示？”1.在学习平台发布预习资源和引导性问题。

2.提供模拟诊查报告数据的JSON结构。1.观看视频，了解wx.previewImage和wx.setTabBarBadge的基本用法。

2.观察常用App的消息提醒机制，思考其背后的逻辑。1.前置学习：利用慕课视频，降低新API学习的门槛，让学生带着初步认知进入课堂。

2.启发思考：引导学生将生活中熟悉的功能与小程序技术实现联系起来，激发学习兴趣。课中研学环节一：需求分析与交互设计（20分钟）​

情境导入：回顾就医流程，提问：“患者做完检查后，如何在手机上方便地查看详细的诊查报告，特别是包含影像图片的报告？”引出诊查报告模块的需求。

内容1：核心交互分析

分析三大核心交互：

1.列表展开/收起：为了在有限空间内展示报告的标题、概要，点击后展开详情（如诊断结果、建议、多张图片）。

2.图片预览：点击报告中的缩略图，需要全屏清晰查看。

3.新报告提示：需要直观地提醒用户有多少份未读报告。

内容2：技术方案选型

明确：

-展开/收起：通过数据驱动，控制对应报告项的isExpanded状态，结合WXSS动画。

-图片预览：wx.previewImage。

-新报告提示：wx.setTabBarBadge。1.展示诊查报告列表页原型，引导学生分析每个交互点的用户意图和技术实现难度。

2.思政融入（工匠精神/服务社会）​：讲解诊查报告功能时，强调医疗信息的准确、清晰呈现对患者理解病情至关重要。实现良好的图片预览和内容组织，不仅是技术实现，更是对患者知情权的尊重和关怀，体现了开发者严谨、细致的“工匠精神”和“用技术服务社会”的价值观。便捷的新报告提醒，则能帮助患者及时获取关键健康信息，是技术赋能健康管理、提升公共服务响应性的体现。1.理解诊查报告模块的功能目标和三个核心交互点。

2.讨论：为什么图片预览不用image组件的mode属性代替？

3.思考：角标数字应该从哪里获取？（从数据中统计未读报告数量）1.明确任务：清晰界定本单元需要完成的交互功能，建立以用户为中心的开发目标。

2.思政融入：将技术实现与医疗信息服务的严肃性、及时性相结合，强化学生的职业责任感和社会服务意识。[citation:教材文前.pdf]环节二：核心技能讲解与实践（75分钟）​

技能点1：诊查报告列表——展开/收起交互

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

使用wx:for渲染报告列表，每条数据包含id,title,summary,detail,imageUrls,isRead,isExpanded等字段。

任务A-2：实现独立展开/收起

1.为每条报告的标题或按钮绑定bindtap事件，并传递当前报告的id。

2.在事件处理函数中，根据id找到列表中对应项，切换其isExpanded状态。

3.在WXML中，使用wx:if或动态class，根据isExpanded控制详情区域的显示/隐藏，并添加简单的CSS过渡动画。

技能点2：图片预览功能

任务B：在报告的详情区域，为每张图片的image组件绑定bindtap事件。

1.在事件处理函数中，调用wx.previewImage，传入current（当前点击图片的URL）和urls（当前报告所有图片的URL数组）参数。

技能点3：tabBar角标提示

任务C-1：计算未读数量

在报告列表页的onShow或数据加载完成后，遍历报告列表，统计isRead为false的数量。

任务C-2：设置与清除角标

1.使用wx.setTabBarBadge设置角标，如wx.setTabBarBadge({index:3,text:‘3’})（假设“我的”tab索引为3）。

2.当用户点击进入报告详情页或将某条报告标记为已读时，需要重新计算并更新角标数字。当数字为0时，使用wx.removeTabBarBadge清除角标。1.演示展开/收起的代码实现，重点讲解如何通过id精准定位并更新数组中特定对象的状态，这是列表交互的关键。

2.**演示wx.previewImage**：展示点击图片后全屏预览的效果，并讲解current参数对用户体验的提升（从当前图片开始浏览）。

3.**演示wx.setTabBarBadge**：展示角标的设置、更新和清除，并强调角标索引(index)需与app.json中tabBar.list的顺序对应。

4.发布分层任务清单：基础（实现列表渲染与展开/收起）、进阶（集成图片预览）、挑战（实现未读数量角标并动态更新）。1.任务A：实现诊查报告列表，并完成点击展开/收起详细内容的交互。

2.任务B：为报告中的图片添加预览功能，确保能顺序浏览多张图片。

3.任务C：在报告列表页加载后，计算未读报告数量，并在对应的tabBar上设置角标。尝试在点击某条报告后，将其标记为已读，并更新角标。1.​“做中学”核心实践：通过实现诊查报告这一信息密集型页面的多种交互，综合锻炼了数据状态管理、API调用、UI反馈等多项技能，实战性强。[citation:教材文前.pdf]

2.攻克难点：通过亲手编写列表项状态独立控制的逻辑，深刻理解数据驱动复杂交互的核心；通过调用新的小程序API，拓展了技术视野和能力边界。

3.培养交互思维：引导学生关注细节交互的实现，培养其打造流畅、友好用户体验的能力。环节三：知识整合与迁移设计（25分钟）​

活动1：状态同步问题探讨

讨论：当角标数字依赖于列表数据中的“未读”状态时，如何保证用户在多个页面（列表页、详情页）操作后，角标能及时、准确地更新？引出在onShow中统一刷新数据的模式。

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

引导学生思考：在“云惠视听”项目中，哪些场景可以应用本单元技能？

1.视频列表/详情页的“展开描述”。

2.视频封面或截图的预览（wx.previewImage）。

3.在“我的消息”或“我的”tab上，用角标提示未读消息或新动态。

活动3：常见问题诊断

演示并讲解常见问题：

1.wx.previewImage的urls参数不是数组或包含无效URL导致预览失败。

2.wx.setTabBarBadge的index参数错误，角标出现在错误的tab上。

3.展开/收起时，多个报告项同时展开或状态混乱（未正确实现独立控制）。1.引导学生思考状态同步的策略，强化onShow生命周期在维持数据一致性中的作用。

2.组织学生分组讨论“云惠视听”中类似功能的应用场景，并设计简单的交互流程图。

3.将错误案例投屏，引导学生根据错误信息（预览失败、角标位置错误）和交互现象进行排查。1.思考并优化自己的代码，确保角标更新逻辑的健壮性。

2.为“云惠视听”的“动态”或“消息”模块设计角标提示和内容展开功能。

3.根据错误提示，尝试修正图片预览和角标设置代码中的问题。1.培养系统思维：通过讨论状态同步，引导学生思考跨页面、跨组件的数据通信和状态管理，建立更系统的开发观念。

2.知识迁移与创新：践行教材“示范—巩固—提升”的训练体系。将“明德E医”的交互模式迁移到“云惠视听”项目，培养学生识别不同业务场景下共性交互需求的能力。[citation:教材文前.pdf]

3.问题排查能力：通过诊断涉及新API和复杂状态管理的错误，提升学生的综合调试能力。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）​：完成诊查报告列表（实现展开/收起交互与图片预览功能），并实现根据未读报告数量在tabBar上显示角标提示。

拓展思考：阅读《wx.setTabBarBadge与红点管理》，了解除了数字角标，如何设置红点（wx.showTabBarRedDot）？思考在什么情况下使用数字角标，什么情况下使用红点更合适？提供作业提交的详细标准（交互流畅、功能完整、角标正确）。在学习平台分享拓展阅读资料。1.完善并提交“明德E医”诊查报告模块的完整代码。

2.阅读拓展资料，尝试将数字角标改为红点提示，并比较两种方式的适用场景。1.巩固技能：通过独立完成诊查报告模块，巩固对复杂列表交互、媒体预览和全局UI反馈等核心技能的掌握。

2.能力提升：引导学生探索更丰富的UI反馈方式，培养其根据产品需求选择最合适交互方案的能力。教学评价1.过程性评价：课堂实践任务的完成度、交互逻辑的正确性以及API调用的规范性。

2.成果性评价：课后提交的作业是否实现了流畅的展开/收起、可用的图片预览以及准确的角标提示。

3.素养评价：在交互设计和迁移讨论中体现出的用户体验意识和方案选型能力。反