鸿蒙基础应用及开发 12

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目6用户首选项存储-完成导航栏页面的布局授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.掌握公告通知区域的列表渲染、数据绑定与点击跳转实现；2.理解底部导航栏与页面的关联逻辑；3.熟悉消息页面的布局设计与功能模块实现。能力目标：1.能够优化公告通知区域，实现数据动态渲染与详情页跳转；2.能够独立完成消息页面的布局搭建与功能模块开发；3.能够解决页面跳转、列表渲染中的常见错误（如参数传递失败、布局错乱）；4.能够在DevEcoStudio中调试并运行完整的导航与功能页面。素质目标：培养页面模块化设计思维；提升组件复用与交互逻辑规范化意识；增强复杂页面联动开发的实战能力。教学重点教学难点重点：登录页、注册页的整体布局框架搭建（Flex+Column/Row组合）。核心功能模块（输入框组、按钮、图片、协议区）的代码实现。项目资源的正确导入与引用。难点：1.复杂布局的嵌套逻辑与间距、对齐方式的精准控制。2.图片资源引用错误、路径配置不当的问题排查。3.响应式数据绑定与组件交互逻辑的实现（如输入内容同步、协议勾选状态）。教学小结本节课围绕公告通知区域优化与消息页面开发展开教学，通过理论讲解、案例演示与分组实操，学生掌握了列表渲染、页面跳转参数传递、消息页面布局的核心方法，成功实现了公告通知的动态功能与消息页面的完整开发，提升了鸿蒙应用页面联动与功能模块整合的实战能力。作业及要求在DevEcoStudio中完成以下任务：1.为消息页面的功能入口添加点击跳转功能（如“系统消息”跳转至对应消息列表页）；2.优化公告通知详情页，实现富文本内容展示（如换行、字体样式）；3.实现消息页面的“下拉刷新”功能；4.提交完整代码文件、运行效果截图与页面跳转演示视频。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”APP的公告通知区域静态效果与点击跳转效果对比，以及消息页面功能演示，提问：“如何让公告列表点击后跳转至详情页并携带参数？消息页面的功能入口组如何实现均匀布局？底部导航如何精准关联对应页面？”引导学生明确学习目标。2.核心铺垫：通过PPT梳理核心流程（公告列表渲染→点击跳转传参→消息页面布局→导航联动），强调页面联动与功能模块化是提升用户体验的关键，让学生建立整体认知。3.环境准备：确保学生项目已包含底部导航栏基础结构，发放消息页面所需图片资源（功能图标、背景图等），为实操做好准备。 以功能效果对比激发兴趣，明确页面联动的实用价值二、公告通知区域功能优化（30分钟）（一）列表渲染与数据绑定（15分钟）1.核心逻辑：讲解公告通知区域采用List组件+ForEach循环渲染的实现方式，说明数据模型（id、title、time、content）与UI组件的绑定关系。2.代码演示：定义NoticeData数据模型，封装公告核心字段；使用List组件包裹列表项，通过ForEach遍历noticeList数组，动态生成公告条目；设置列表项样式（虚线分隔线、标题超出省略、时间右对齐），确保界面美观。（二）点击跳转与参数传递（15分钟）1.跳转逻辑：讲解通过router.pushUrl实现列表项点击跳转，参数通过params携带（id、title、time、content）。2.代码演示：为列表项绑定onClick事件，触发跳转时传入当前公告的完整数据；演示详情页通过router.getParams()接收参数并展示；重点说明参数类型匹配与空值处理，避免跳转失败。 按“渲染→绑定→跳转”逻辑递进，配套代码强化理解三、消息页面开发（35分钟）（一）页面布局搭建（20分钟）1.布局框架：演示使用Flex+Column构建消息页面根布局，分为顶部标题区、中间功能入口区、底部导航区三部分。2.核心模块实现：顶部标题区：复用Header组件，设置标题为“消息”，配置蓝色背景与状态栏颜色；中间功能入口区：使用水平Flex容器包裹三个纵向功能组（系统消息、收到建立、对我感兴趣），每个组包含图标（圆形背景）与文字，设置均匀间距与统一样式；背景处理：为中间区域设置线性渐变背景，增强视觉层次。（二）功能联动与样式优化（15分钟）1.导航联动：讲解底部导航栏“消息”按钮与当前页面的关联配置，确保点击后切换至消息页面并同步选中状态。2.样式统一：指导学生统一功能入口的图标大小、背景颜色、文字样式，解决布局错乱问题；3.常见问题解决：排查导航关联失败（路径配置错误）、功能入口布局不均（Flex属性设置不当）等共性问题。 复用已有组件结构，重点讲解布局均匀性与导航联动，提升知识迁移能力四、分组实操与难点突破（10分钟）1.分组任务：将学生分为4-5人小组，每组完成：（1）完善公告通知区域的详情页展示，确保参数正确接收与显示；（2）调试消息页面的功能入口布局，确保均匀对齐；（3）验证底部导航与消息页面的联动效果。2.教师指导：巡回查看各组进度，针对共性问题（参数传递失败、导航关联错误）集中讲解，对个别问题单独辅导。3.成果预览：邀请1-2组展示功能效果，验证公告跳转与消息页面布局是否正常。 分组实操强化实战能力，针对性指导突破重难点五、课堂总结与作业布置（5分钟）1.总结回顾：（1）核心流程：公告列表渲染→点击跳转传参→消息页面布局→导航联动；（2）关键技术：List+ForEach列