微信基础开发及实战 12

《微信小程序开发》课程单元教学设计授课单元单元11：系统首页开发（二）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述swiper轮播图组件的基本属性、事件及其在移动端应用中的重要作用。

2.解释wx:for列表渲染指令的语法，以及wx:key在列表渲染中的优化原理。

3.阐述wx:if、wx:elif、wx:else等条件渲染指令的使用场景及它们与hidden属性的区别。1.能使用swiper组件实现自动轮播、指示点等效果的公告信息栏。

2.能运用wx:for和wx:key渲染动态数组数据，构建就诊业务按钮列表。

3.能结合wx:if与wx:for，根据业务需求动态控制列表中元素的显示样式或内容。1.培养结构化数据展示和前端界面组件化开发的思维。

2.通过实现医疗服务的便捷导航，体会技术优化公共服务的价值，增强“用技术服务社会”的职业认同感。教学重难点教学重点1.swiper组件的配置与基本效果实现。

2.wx:for指令遍历数组数据并渲染列表。教学难点1.理解wx:key的作用及其对列表渲染性能的影响。

2.在列表渲染中嵌套使用条件渲染（wx:if），实现根据数据状态动态显示不同元素。教学策略教学组织采用“需求分析-组件拆解-数据驱动-综合实现”的组织流程，突出数据与视图的绑定。教学方法案例教学法、任务驱动法、讲练结合法、对比学习法。教学准备环境准备已安装微信开发者工具的计算机，已完成tabBar配置的“明德E医”项目。资料准备1.《微信小程序开发项目实战教程》教材“项目4任务3前部”。

2.授课计划表“第11周”内容与作业要求。资源准备1.“明德E医”首页原型图，清晰标注就诊业务栏（图标+文字）和公告信息栏（轮播图）。

2.用于swiper组件演示的图片素材（多张公告图）。

3.用于wx:for渲染的JSON格式的业务数据（如{icon:‘…’,name:‘预约挂号’,isNew:true}）。

4.补充阅读文档：《swiper组件详解》、《wx:for与wx:if高级用法》。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目4任务3前部，观看配套慕课视频中关于“swiper组件”和“列表渲染”的部分。

2.提出思考题：“微信、淘宝等App的首页通常有哪些固定栏目？这些栏目是如何分类和排版的？这背后反映了怎样的产品设计逻辑？”1.在学习平台发布预习资源和引导性问题。

2.提供“明德E医”首页业务数据JSON结构。1.观看视频，了解swiper和wx:for的基本用法。

2.观察常用App首页布局，思考信息组织方式。1.前置学习：利用慕课视频降低课堂认知负荷，提高学习效率。

2.启发产品思维：引导学生从用户视角思考界面设计，为理解组件价值做铺垫。课中研学环节一：需求分析与技术选型（15分钟）​

展示“明德E医”首页原型图，分析“就诊业务栏”和“公告信息栏”的功能需求：

1.公告信息栏：需要轮动展示多条重要通知，吸引用户注意。​技术选型：swiper组件。

2.就诊业务栏：需要展示多个功能入口，数量可能动态调整。​技术选型：wx:for列表渲染。

强调：合理选择组件是高效开发的前提。1.分析原型图，引导学生将业务需求（“轮播”、“列表”）与技术组件（swiper,wx:for）一一对应。

2.思政融入（服务社会）：讲解清晰、美观、易用的首页设计，能够为患者提供一目了然的就医指引，减少用户寻找功能的成本，体现了技术服务于民、提升公共医疗服务效率的价值。1.理解两个栏目的功能定位和交互需求。

2.思考为什么“轮播”用swiper，而“多个入口”用wx:for。1.需求驱动：从真实业务需求出发选择技术方案，培养“需求解读能力”。[citation:教材文前.pdf]

2.思政融入：将界面设计与提升公共服务体验、增进民生福祉联系起来，深化技术应用的社会意义认知。[citation:教材文前.pdf]环节二：核心技能讲解与实践（75分钟）​

技能点1：公告信息栏——swiper轮播图

讲解swiper核心属性：autoplay（自动播放）、interval（间隔）、duration（动画时长）、indicator-dots（指示点）、indicator-color、indicator-active-color。

任务：实现一个包含3-5张图片的公告轮播图。

技能点2：就诊业务栏——wx:for列表渲染

详解wx:for语法、item与index变量、嵌套数据的访问（如item.icon）。重点讲解wx:key的作用：提高列表渲染和更新的性能，维护组件状态。

任务：使用wx:for渲染一个包含4-6个业务入口（如预约挂号、诊查报告）的网格布局。

技能点3：动态业务标签——条件渲染嵌套

在业务数据中加入状态字段（如isNew:true），讲解如何在wx:for循环内部使用wx:if动态显示“新功能”或“热”等角标。

任务：为部分业务入口添加“新”或“热”角标。1.演示swiper的配置，并实时调整属性值展示效果变化。

2.对比演示：不使用wx:key和使用wx:key在数据顺序变化时的视图更新差异，直观展示wx:key的重要性。

3.演示在wx:for循环的item模板中，如何使用wx:if控制角标的显示。

4.发布同步操作任务清单，指导学生分步实现两个栏目。1.在“首页”页面的WXML中，配置swiper组件，实现自动轮播和指示点。

2.在页面js的data中定义业务数据数组，在WXML中使用wx:for渲染成图标加文字的按钮列表，并使用wx:key。

3.在业务数据数组中，为部分项添加状态字段，并使用wx:if在对应项上渲染出角标。1.​“做中学”核心实践：通过完成两个核心首页组件，掌握移动端常见的UI构建技能，将抽象指令转化为具体界面。[citation:教材文前.pdf]

2.突破难点：通过对比实验，让学生深刻理解wx:key的作用，这是编写高性能列表视图的关键。

3.技能综合：将列表渲染与条件渲染结合，解决常见的动态标签展示需求，提升代码编写能力。[citation:教材文前.pdf]环节三：知识巩固与迁移设计（30分钟）​

活动1：样式优化与交互体验

引导学生为业务按钮添加bindtap点击事件（暂不实现跳转，仅console.log），并优化轮播图与业务栏的CSS样式，使其更美观。

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

引导学生思考：在“云惠视听”的首页，可以设计哪些业务栏？公告信息栏可以展示什么内容？指导学生为其设计首页布局草图，并规划所需的数据结构。

活动3：常见问题诊断

演示常见错误：wx:for遍历对象而非数组；wx:key的值不唯一；swiper图片宽高设置不当导致变形。1.巡回指导，解答学生在样式和交互实现中的问题。

2.组织学生分组讨论，为“云惠视听”设计首页功能区块，并分享设计思路。

3.将错误案例投屏，引导学生阅读控制台报错（如wx:for报错），并自主修正。1.为业务按钮添加点击事件反馈，并优化页面CSS，提升视觉体验。

2.小组讨论，为“云惠视听”规划首页的“功能入口栏”和“内容推荐栏”，并设计模拟数据。

3.分析并修正教师提供的错误代码。1.用户体验意识：引导学生关注细节交互和视觉美观，培养前端工程师的“像素眼”和用户体验意识。

2.知识迁移与创新：践行教材“示范—巩固—提升”的训练体系。将“明德E医”的首页组件开发经验迁移到“云惠视听”的项目构思中，培养创新设计能力。[citation:教材文前.pdf]

3.问题排查能力：通过诊断列表渲染和组件配置中的常见错误，巩固知识，提升调试能力。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）：完成“明德E医”首页就诊业务栏与公告信息栏的开发，要求样式美观，数据动态渲染，并实现角标动态显示。

拓展思考：阅读《wx:for与wx:if高级用法》，思考并尝试：如何利用wx:for的index变量实现一个两列或三列布局的网格？wx:for和wx:if能否同时作用在一个标签上？它们的优先级是怎样的？提供作业提交的详细标准（功能完整、样式规范、代码有注释）。在学习平台分享拓展阅读资料。1.完善并提交“明德E医”首页两个栏目的代码。

2.阅读拓展资料，尝试实现更复杂的列表布局或条件逻辑。1.巩固技能：通过独立完成作业，巩固对swiper、wx:for、wx:if等核心语法的掌握。

2.能力提升：鼓励学生探索组件和指令的更高级用法，培养自主学习和探究能力。教学评价1.过程性评价：课堂实践任务的完成度、代码规范性与样式美观度。

2.成果性评价：课后提交的首页栏目是否功能完整、数据驱动、交互流畅。

3.素养评价：在“云惠视听”首页设计中体现的产品思维和迁移创新能力。