鸿蒙基础应用及开发 4

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目4运用页面切换与自定义组件-实现主页面布局效果授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.掌握自定义组件的概念、创建规则及命名规范；理解自定义组件导出、导入与调用的完整流程；熟悉组件生命周期的核心阶段（aboutToAppear、onDidBuild、aboutToDisappear）及触发时机；掌握组件生命周期在实际开发中的应用场景。能力目标：1.能够独立创建可复用的自定义组件，并实现组件的导出与跨页面调用；2.能够在组件生命周期关键节点编写逻辑代码（如初始化数据、资源释放）；3.能够解决组件复用、生命周期调用顺序、状态同步等常见问题；4.能够结合自定义组件与生命周期优化页面结构，提升代码复用性与性能。素质目标：培养模块化开发思维与代码复用意识；提升逻辑梳理与问题排查能力；增强规范编码与团队协作素养。教学重点教学难点重点：自定义组件的创建、导出、导入与调用流程；组件生命周期三大核心方法（aboutToAppear、onDidBuild、aboutToDisappear）的作用与使用场景；3.自定义组件在实际项目中的复用实践。难点：1.组件生命周期调用顺序的理解（父子组件、兄弟组件）；2.生命周期与组件状态管理的协同使用（如aboutToAppear中初始化状态）；3.复杂场景下组件复用的参数传递与适配逻辑。教学小结本节课围绕鸿蒙自定义组件及生命周期展开教学，通过理论讲解、案例演示与实战练习，学生掌握了自定义组件的创建与复用流程，理解了生命周期各阶段的触发机制与应用场景，能够在项目中通过自定义组件优化代码结构，在生命周期关键节点实现数据初始化、资源释放等逻辑，提升了鸿蒙应用开发的模块化与规范化水平。作业及要求在DevEcoStudio中完成以下任务：创建2-3个通用自定义组件（如标题栏组件、列表项组件、按钮组件），实现组件的参数化配置（如标题文本、按钮颜色可自定义）；在组件中添加生命周期方法，打印日志验证调用时机，分析父子组件生命周期的执行顺序；搭建包含自定义组件的多页面项目，实现组件在不同页面的复用；4.提交完整代码文件、生命周期日志截图与项目运行演示视频。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”主页面代码，提问：“页面中重复出现的标题栏、功能按钮等元素，如何避免重复编写代码？组件从创建到销毁的过程中，如何在关键节点执行初始化或资源释放操作？”引出自定义组件与生命周期的核心价值。2.核心目标明确：通过PPT展示本节课学习目标，让学生清晰知道需掌握“组件创建复用”“生命周期应用”两大核心技能，以及在项目中的实际作用。3.知识回顾：简要回顾组件基础（@Component、build方法），为自定义组件学习铺垫基础。以项目痛点引发思考，明确学习目标与前置知识关联二、自定义组件的使用（35分钟）步骤1：自定义组件的创建与规则讲解1.概念解析：讲解自定义组件的定义（可复用的UI模块）、核心价值（代码复用、模块化开发）；2.创建规则演示：（1）在ets目录下创建components文件夹，演示新建ArkTS文件并编写自定义组件代码；（2）强调关键规则：@Component装饰器标记、必须实现build方法、命名遵循驼峰命名法、状态变量需用装饰器标记；示例代码：@ComponentexportstructCustomHeader{@Proptitle:string="默认标题"build(){Text(this.title).fontSize(18).fontWeight(FontWeight.Bold).padding(15)}}3.重点说明：@Prop装饰器的作用（接收父组件参数），export关键字的导出意义。步骤2：组件的导出、导入与调用导出演示：讲解export关键字的使用，确保组件可被其他页面导入；导入演示：在页面文件中通过import语句导入自定义组件，演示路径配置规范；import{CustomHeader}from'../components/CustomHeader'3.调用演示：在页面build方法中直接使用导入的组件，传递参数实现个性化配置；CustomHeader({title:"就业一点通"})4.复用实践：演示组件在同一页面多次调用、不同页面跨文件调用的效果，强调复用价值。步骤3：自定义组件的参数传递与状态管理1.演示通过@Prop接收父组件参数，实现组件动态配置；2.讲解组件内部状态（@State）的使用，演示状态变化触发UI更新的效果；3.常见问题排查：指导学生解决导入路径错误、参数类型不匹配、组件未导出等问题。按“创建规则→导出导入→调用复用→参数状态”流程分步讲解，配套代码演示与问题排查三、组件的生命周期（20分钟）步骤1：生命周期核心概念与阶段解析概念讲解：组件生命周期是组件从创建到销毁的完整流程，核心作用是在关键节点执行特定逻辑；核心阶段展示：通过流程图演示三大核心方法的触发时机：（1）aboutToAppear：组件即将显示，build方法执行前触发；（2）onDidBuild：组件首次构建完成后触发，仅执行一次；（3）aboutToDisappear：组件即将销毁前触发；3.执行顺序说明：强调父子组件生命周期的执行逻辑（父aboutToAppear→子aboutToAppear→子onDidBuild→父onDidBuild→子aboutToDisappear→父aboutToDisappear）。步骤2：生命周期方法的代码实现与应用场景代码演示：在自定义组件中添加三大生命周期方法，打印日志标记触发时机；aboutToAppear(){("组件即将显示，初始化数据")}onDidBuild(){("组件首次构建完成，执行埋点上报")}aboutToDisappear(){("组件即将销毁，释放资源")}应用场景讲解：（1）aboutToAppear：初始化数据、请求接口数据；（2）onDidBuild：首次渲染后的回调（如埋点、初始化第三方插件）；（3）aboutToDisappear：释放定时器、关闭网络连接等资源。步骤3：生命周期调试与验证1.演示项目运行流程，通过DevEcoStudio日志面板查看生命周期方法的调用顺序；2.触发组件显示/隐藏（如条件渲染控制），观察aboutToAppear与aboutToDisappear的触发情况，强化理解。结合流程图解析生命周期阶段，通过代码演示与日志验证加深触发时机认知分组实战与难点突破（15分钟）1.分组任务：4-5人一组，完成以下任务：（1）创建1个通用自定义组件（如功能按钮组件，支持自定义文本、颜色、点击事件）；（2）在组件中添加生命周期方法，打印日志并分析调用顺序；（3）在项目中至少2个不同页面复用该组件，传递不同参数实现差异化展示；（4）尝试通过条件渲染控制组件显示/隐藏，观察生命周期日志变化。2.教师指导：巡回指导各组开发，重点解决：（1）组件参数传递错误、状态不响应问题；（2）生命周期调用顺序理解偏差；（3）组件复用中的样式适配问题。3.成果展示：邀请各组展示自定义组件与生命周期日志，师生共同点评优化。通过分组实战强化组件复用与生命周期应用，针对性解决共性难点五、课堂总结与作业布置（5分钟）1.总结回顾：（1）核心知识：自定义组件创建→导出→导入→调用流程，生命周期三