鸿蒙移动应用开发基础- 教案全套 项目1-6 初探 HarmonyOS 与开发环境-用户首选项存储

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题初探HarmonyOS与开发环境-创建第一个鸿蒙应用项目授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.了解HarmonyOS的定义。2.了解HarmonyOS的设计理念及核心技术特点。3.熟悉HarmonyOS（ArkTS）的工程目录结构。4.熟悉DevEcoStudio的各个功能区域。能力目标：1.能够理解HarmonyOS的设计理念及核心技术特点2.能够安装DevEcoStudio3.能够创建鸿蒙应用，并在模拟器或真机上运行。素质目标：培养学生严谨、认真、细致的学习态度；培养学生的团队意识和团队协作精神。教学重点教学难点重点：能够创建第一个HarmonyOS应用程序难点：模拟器的调试教学小结了解HarmonyOS的定义、发展历程、了解HarmonyOS的设计理念及核心技术特点、安装DevEcoStudio、创建鸿蒙应用，并在模拟器或真机上运行

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.教学内容介绍HarmonyOS诞生背景。展示技术理念框架。2.教学步骤：（1）情境导入（3分钟）展示华为公司发展历程时间轴，引出2019年HarmonyOS发布的历史背景。提问：“为什么华为要自主研发操作系统？”引导学生思考科技自主的重要性。播放华为开发者大会HarmonyOS发布片段，激发学习兴趣。（2）概念讲解（5分钟）展示HarmonyOS定义：“面向全场景智慧生活方式的分布式操作系统”。对比传统单设备系统与HarmonyOS的分布式架构差异。通过预览器（Previewer）展示HarmonyOS支持的多设备类型。（3）思政融入（2分钟）分析华为“备胎转正”案例，强调科技自立自强的国家战略意义。讨论“居安思危”意识在个人发展中的应用价值。二、环境配置（15分钟）1.教学内容DevEcoStudio安装步骤。配置注意事项。2.教学步骤（1）安装演示（5分钟）逐步演示从华为开发者官网下载DevEcoStudio的过程。强调安装路径不能包含中文字符的注意事项。（2）常见问题（7分钟）模拟器第一次使用过程中可能出现的Hyper-V未开启错误。分组讨论解决方案，培养问题解决能力。（3）环境验证（3分钟）指导学生完成首次启动的配置项选择。强调开发条款的法律意义，培养合规意识。三、工程创建（20分钟）1.教学内容EmptyAbility创建流程。module.json5配置解析。2.教学步骤（1）工程创建（8分钟）演示从欢迎界面选择EmptyAbility模板的过程。详细讲解工程配置界面各参数含义：Projectname：工程文件夹名称Bundlename：应用唯一标识Savelocation：存储路径规范（2）文件解析（7分钟）分析module.json5文件结构。重点讲解abilities节点配置。（3）目录结构（5分钟）解析工程目录中各文件夹作用。特别强调resources目录的资源管理规范。通过小组竞赛方式记忆关键目录功能。四、模拟器运行（20分钟）1.教学内容模拟器下载配置。应用运行效果展示。2.教学步骤（1）模拟器配置（10分钟）演示从DeviceManager创建新模拟器的过程。讲解RAM/ROM配置对开发的影响。（2）应用运行（5分钟）展示运行按钮的使用方法。观察“HelloWorld”基础界面效果。（3）问题排查（5分钟）记录学生操作中的常见错误。建立错误代码与解决方案对应表。五、案例实践（15分钟）1.教学内容应用名称修改。图标更换步骤。2.教学步骤（1）名称修改（6分钟）演示通过string.json修改应用名称。展示修改前后的对比效果。（2）图标更换（9分钟）讲解图标资源存放规范。演示桌面图标和启动图标的配置差异。六、总结提升（10分钟）1.教学内容知识要点回顾。实践任务布置。2.教学步骤（1）知识梳理（5分钟）通过思维导图总结HarmonyOS核心概念强调“一次开发，多端部署”的技术价值复习工程目录关键结构（2）任务布置（3分钟）基础任务：环境搭建+基础工程创建。进阶任务：HarmonyOS版本特性调研。创新任务：设计多设备协同应用方案。（3）反思提升（2分钟）收集课堂反馈意见。预告下节课内容：ArkTS语言基础。学生自主探究、教师讲解学生自主探究、教师讲解教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题夯实ArkTS语言核心基础-实现个人基本信息输出授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：认识ArkTS中的基本数据类型，包括数字类型（number）、字符串类型（string）、布尔类型（boolean）、null类型、undefined类型。掌握变量的声明方式（let、var、const）及各自特点。理解变量的赋值规则和命名规范能力目标：能够准确识别和使用ArkTS中的基本数据类型。能够正确使用let、var、const声明变量并进行赋值操作。能够在DevEcoStudio中编写包含变量使用的简单ArkTS代码，并运行验证结果素质目标：培养学生规范编写代码的习惯；提升学生发现和解决代码中变量相关问题的能力；增强学生的逻辑思维和自主学习能力教学重点教学难点重点：ArkTS中基本数据类型的识别与使用。变量的正确声明（let、var、const）与赋值。变量基础用法任务的完成。难点：let、var、const声明变量的区别及适用场景。变量作用域对变量使用的影响教学小结认识了ArkTS的基本数据类型（number、string、boolean、null、undefined）；掌握了变量的三种声明方式（let、var、const）及特点、赋值规则和命名规范；了解了变量作用域基础概念；能够完成变量基础用法任务，在DevEcoStudio中编写相关代码并运行验证作业及要求在DevEcoStudio中创建一个新的ArkTS工程，声明不同数据类型的变量（至少包含number、string、boolean类型各2个），对变量进行赋值和修改操作，并通过打印语句输出变量值，验证代码运行结果。教后反思

教案用纸教学内容、方法和过程附记导入新课（10分钟）回顾复习（4分钟）提问学生上节课学习的HarmonyOS开发环境搭建、工程创建及模拟器运行相关知识点，如“DevEcoStudio安装时需注意什么？”“创建EmptyAbility工程时Bundlename的作用是什么？”，通过学生回答情况，巩固上节课知识，同时检查学生掌握程度.情境导入（4分钟）展示一个简单的HarmonyOS应用界面（如显示用户姓名、年龄、是否会员的界面），提问学生：“界面中的这些动态数据（姓名、年龄等）在代码中如何存储和表示呢？”引导学生思考数据存储相关问题，进而引出本节课的主题——ArkTS中的基本数据类型和变量。思政融入（2分钟）强调数据在软件开发中的重要性，如同基础建材在建筑工程中的作用，只有打好数据存储和处理的基础，才能开发出高质量的应用。结合我国软件产业发展，鼓励学生扎实掌握基础编程知识，为国产操作系统应用开发贡献力量，培养学生的专业责任感和使命感认识ArkTS基本数据类型（20分钟）代码演示+讲解（15分钟）在DevEcoStudio中，逐个演示5种数据类型的声明、赋值与打印（如number表示年龄、string表示姓名），简要介绍字符串拼接、布尔值判断场景；学生实操（5分钟）学生按示例声明各类型变量并验证，教师巡视纠错。认识ArkTS中的变量（25分钟）1.声明方式对比（10分钟）演示let/var/const的代码差异（如var重复声明不报错、const值不可改），总结特点与适用场景；2赋值与命名（8分钟）：演示正确/错误赋值案例，讲解命名规范（驼峰式、禁用关键字）；作用域基础（7分钟）：用代码示例区分全局/局部作用域（如函数内变量外部不可访问）。任务实施—变量的基础用法（25分钟）任务示范（8分钟）：任务1：示范声明学生信息变量（姓名、年龄等）并拼接打印-任务2：示范修改变量值、计算入学年份；-任务3：示范用const声明学校常量，结合成绩变量算平均分；2.学生实操（15分钟）：学生完成3个任务，教师巡回指导，解决代码报错等问题。课堂总结与作业布置（10分钟）总结（5分钟）核心知识点回顾：掌握ArkTS5种基本数据类型（number存数值、string存文本、boolean表逻辑、null表空值、undefined表未赋值），明确3种变量声明方式（let块级作用域推荐用、var函数级作用域慎选、const声明常量不可改。布置作业（5分钟）变量与数据类型实操练习学生自主探究、教师讲解教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目2夯实ArkTS语言核心基础-实现个人基本信息输出授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.理解ArkTS中接口、函数和类的基本概念与作用，掌握其定义与使用方法能力目标：1.能够通过接口定义对象的结构规范，实现数据类型的约束；2.能够编写带参数和返回值的函数，理解函数在程序逻辑组织中的作用；3.能够创建类并定义其属性与方法，实现面向对象编程的基本结构。素质目标：培养学生规范编写代码的习惯；提升学生发现和解决代码中变量相关问题的能力；增强学生的逻辑思维和自主学习能力教学重点教学难点重点：函数定义与调用的规范及传参与返回值的使用。接口的定义与使用。难点：类的封装性与实例化函数参数类型约束与接口结合的复杂用法教学小结本节课围绕ArkTS中接口、函数和类的定义与使用展开教学。通过代码示例与任务实践，学生掌握了接口用于定义对象结构、函数用于封装逻辑功能、类用于创建对象模板的基本概念与使用方法，并能够在DevEcoStudio中进行编码实践，提升代码组织与结构化编程能力，进一步夯实HarmonyOS应用开发基础。作业及要求在DevEcoStudio中创建一个新的ArkTS工程，编写一个函数`checkEven(num:number):boolean`，判断传入的数字是否为偶数，返回判断结果。在主程序中测试该函数，输出多个不同输入的运行结果。教后反思

教案用纸教学内容、方法和过程附记导入新课（10分钟）课程伊始，通过屏幕投影展示DevEcoStudio界面中一段基础变量定义的代码示例，引导学生回忆ArkTS基本数据类型的使用方式，并提问：“请同学们指出下列代码中哪些变量使用了let、哪些使用了const？它们之间有哪些区别？”引导学生回顾基本变量声明的知识点，并简要总结let、var、const在变量作用域与赋值规范上的差异。随后通过简短口答形式提问学生：“在ArkTS中，我们如何定义一个对象的结构规范？”此问题旨在引导学生联想到接口这一结构化工具，并为本节课讲解接口、函数与类的使用打下基础。此环节时间控制在5分钟以内，确保学生迅速回归课堂状态并建立知识衔接。接口、类、函数的使用（40分钟）知识点一：接口的定义与使用首先从“为什么要定义接口”这一问题入手，通过屏幕展示一个包含多个属性的JSON对象示例，指出：“如果我们不定义统一的结构规范，程序在读取这些对象时可能会出错。”由此引出接口的概念——接口用于定义对象的“模板”。通过多媒体课件展示接口定义语法，结合教材中的示例逐行解析：interfacePerson{name:string;age:number;isMember:boolean;introduce():void;}指出接口的关键作用是“描述对象的结构”而非“实现功能”，并强调接口不能直接实例化，而需由其他对象或类实现。随后在DevEcoStudio中同步演示接口的实现方式，展示如何创建一个符合接口规范的对象，并调用其方法`introduce()`。引导学生讨论：“如果某个对象缺少接口中定义的字段，运行时会出现什么问题？”通过设置断点并运行代码验证错误提示，让学生直观理解接口的作用机制，并鼓励其尝试修改代码实现不同对象结构的比较。知识点二：函数的定义与调用在接口讲解基础上，逐步引出函数的概念。通过课堂展示一个函数定义示例，解释函数的基本结构，包括函数名、参数列表、返回值类型等组成部分：functioncheckEven(num:number):boolean{returnnum%2===0;}结合实际应用，教师通过DevEcoStudio编写主程序代码，演示如何调用该函数并输出结果。引导学生观察函数如何通过封装逻辑提高程序的复用性。接着提出问题：“假设函数参数类型不匹配，会有什么后果？”通过故意输入错误参数类型（如字符串代替数字），引导学生观察控制台报错信息，帮助其理解函数参数类型检查的作用。随后组织学生进行小组活动，要求编写一个输出用户基本信息的函数，输入姓名、年龄和性别参数，并输出完整介绍信息。通过小组协作与教师巡视指导，帮助学生在实践中掌握函数定义与调用的正确方式。知识点三：类的定义与实例化为帮助学生理解面向对象编程的基本结构，教师在课件中对比类与接口的异同，并通过代码示例解释类的定义方式：classStudent{id:number;name:string;score:number[];constructor(id:number,name:string,score:number[]){this.id=id;=name;this.score=score;}getAverage():number{letsum=this.score.reduce((total,val)=>total+val,0);returnsum/this.score.length;}}随后在DevEcoStudio中同步演示类的实例化与方法调用过程，重点讲解构造函数的作用以及`this`指针的使用规则。提出问题引导学生思考：“类与函数有何异同？”、“实例与类本身的关系是什么？”通过提问与引导性讨论，帮助学生逐步理解类的封装性与实例化机制。通过设置编程任务，要求学生创建多个`Student`对象，并输出平均成绩。在学生操作过程中，教师巡回指导，及时纠正错误用法，特别是关于`this`的使用问题与类成员访问权限的常见误区。三、综合练习与难点突破（30）设置小组综合任务，要求学生结合接口、函数和类，完成一个简单用户管理系统的设计。例如：-定义一个`User`接口；-实现一个用于判断用户会员状态的函数；-创建一个`UserManager`类，用于存储用户信息并调用相关函数。通过团队合作与代码演示，使学生理解不同结构在实际项目中的协同关系。教师在过程中适时介入，引导学生思考接口约束、函数逻辑与类封装之间的协同机制，帮助突破类与函数结合使用的难点。课堂总结与作业布置（10分钟）总结（5分钟）通过回顾接口、函数和类的定义与使用方式，强调其在ArkTS开发中各自的角色与协同关系：-接口用于描述对象的结构规范，帮助程序实现类型安全；-函数是组织逻辑的核心单元，提高代码复用性与可维护性；-类是实现面向对象编程的基础，具备封装、继承等高级特性。教师通过板书与课件结合的方式总结三者的语法结构与使用规范，特别提醒学生注意函数参数类型约束与接口字段匹配的问题。最后布置作业任务，要求学生在DevEcoStudio中独立完成指定编码任务，并提交代码截图与运行结果说明，以巩固课堂所学知识。布置作业（5分钟）编写一个函数`checkEven(num:number):boolean`，判断传入的数字是否为偶数，返回判断结果。在主程序中测试该函数，输出多个不同输入的运行结果。学生自主探究、教师讲解教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目3组件使用与页面跳转-实现用户登录与注册页面布局授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：理解ArkUI中组件的定义、分类及核心概念（装饰器、属性、事件、布局）；掌握组件通用属性（width、height、padding、margin、space）的作用与使用方法；熟悉通用属性的取值类型（数值、百分比、auto）及适配规则。能力目标：能够根据需求为组件设置合理的尺寸、内边距、外边距等通用属性；2.能够运用通用属性调整组件布局效果，解决界面排列拥挤、对齐不当等问题；3.能够在DevEcoStudio中编写代码验证通用属性的使用效果。素质目标：培养学生的界面布局思维与细节把控能力提升代码规范编写意识；增强自主探究与问题解决能力。教学重点教学难点重点：1.组件的核心概念（分类、装饰器、布局的作用）；2.组件通用属性（width、height、padding、margin、space）的定义与使用方法。难点：1.不同通用属性的适用场景与差异（如padding与margin的区别）；2.通用属性取值类型（vp、百分比、auto）的适配逻辑；3.space属性在布局容器中的特殊用法。教学小结本节课围绕ArkUI组件基础知识与通用属性展开教学，通过概念讲解、代码演示与实操练习，学生理解了组件的定义、分类及核心相关概念，掌握了width、height、padding、margin、space等通用属性的使用方法与适配规则，能够在DevEcoStudio中通过设置通用属性调整组件布局效果，为后续复杂界面构建与布局设计奠定了基础。作业及要求在DevEcoStudio中创建新的ArkTS工程，完成以下任务：1.构建一个Column布局容器，内部包含3个Text组件，分别显示"通用属性练习1"、"通用属性练习2"、"通用属性练习3"；2.为Column容器设置space属性控制子组件间距，为每个Text组件设置width（百分比形式）、height（数值形式）、padding、margin及边框属性；3.运行项目并截图，提交代码文件与运行效果截图，标注各属性的作用。教后反思

教案用纸教学内容、方法和过程附记导入新课（10分钟）1.情景引入：展示"就业一点通"APP登录页面的设计图与对应的ArkTS代码片段，引导学生观察界面中的文本、按钮、输入框等元素，提问："这些可视化的界面元素在ArkUI中被称为什么？如何通过代码控制它们的大小、位置和间距？"2.回顾衔接：结合上节课学习的ArkTS基础语法，引出本节课核心内容——组件是界面构建的基础单元，而通用属性是控制组件外观与布局的关键，帮助学生建立知识关联。3.目标明确：告知学生本节课将掌握组件的核心概念与通用属性的使用，为后续页面布局与界面开发打下基础二、组件基础知识讲解（25分钟）知识点一：组件的定义与分类1.定义讲解：通过多媒体课件展示组件的官方定义——UI界面的基本构成单元，是可视化的元素（如按钮、文本、图片等），用于展示信息或接收用户交互，强调其"可复用、封装数据与逻辑"的核心特征。2.分类解析：（1）内置组件：框架预定义，可直接使用，举例Text、Button、Image、Input等，结合代码示例展示基本用法；（2）自定义组件：开发者组合内置组件封装而成，需通过@Component装饰器定义，简要提及后续将深入学习。知识点二：组件相关核心概念1.装饰器：讲解@Entry（入口组件）、@Component（自定义组件）、@State（状态变量）等常用装饰器的作用，通过简单代码示例说明其使用场景；2.属性：组件的配置参数（如尺寸、颜色），强调链式调用的设置方式；3.事件：用户交互的响应机制（如点击、输入），简要举例onClick事件；4.布局：控制组件排列方式的机制，引出Column、Row等布局容器，为后续通用属性应用做铺垫。代码演示：在DevEcoStudio中创建简单组件，展示@Component与@Entry装饰器的使用，让学生直观感受组件的基本结构。三、组件通用属性讲解与实操（30分钟）知识点一：width与height属性1.作用讲解：控制组件的宽度与高度，是布局的基础属性；2.取值类型演示：（1）数值类型：直接输入数字（默认单位vp），示例Text('示例').width(200).height(80)；（2）百分比类型：相对于父容器的比例，示例Text('示例').width('70%').height('50%')；（3）auto类型：自适应内容大小，示例Text('示例').width('auto').height('auto')；3.实操练习：让学生在DevEcoStudio中创建Text组件，尝试设置不同类型的宽高值，观察运行效果。知识点二：padding与margin属性1.概念区分：通过"盒子模型"示意图讲解两者差异——padding是组件内容与边界的内边距，margin是组件与相邻组件的外边距；2.使用方法演示：（1）统一设置：padding(10)（四边均为10vp）、margin(15)；（2）分边设置：padding({top:5,left:10,right:10,bottom:5})，结合代码示例展示分边设置效果；3.对比练习：创建两个相邻的Text组件，分别设置padding和margin，让学生观察界面中组件间距与内部内容间距的变化，强化理解。知识点三：space属性1.作用讲解：布局容器（Column、Row、Flex等）特有的属性，控制容器内相邻子组件的间距，避免重复设置margin；2.使用方法演示：（1）容器初始化时设置：Column({space:20})；（2）链式调用设置：Column().space(20)；3.代码示例：创建Column容器，内部添加3个Text组件，设置space属性，对比有无space属性的布局差异，让学生体会其便捷性。四、综合练习与难点突破（20分钟）1.分组任务：每组创建一个Row布局容器，内部包含2个Button组件，要求：（1）为Row容器设置space属性，间距为15vp；（2）为每个Button组件设置width（百分比类型）、height（数值类型）；（3）为Button组件设置padding（分边设置）和margin（统一设置）；（4）运行项目，观察并调整属性值，使布局美观。2.难点指导：（1）针对padding与margin混淆的问题，再次通过"盒子模型"示意图讲解，结合学生代码逐行分析；（2）针对vp单位的适配性，简要说明vp是鸿蒙自适应单位，会根据屏幕密度缩放，推荐优先使用；3.成果展示：邀请2-3组学生展示代码与运行效果，师生共同点评，纠正不当用法。五、课堂总结与作业布置（5分钟）1.总结回顾：（1）组件的定义、分类及核心概念（装饰器、属性、事件、布局）；（2）通用属性的核心作用：width/height控制尺寸，padding控制内边距，margin控制外边距，space控制容器子组件间距；（3）关键注意点：padding与margin的区别、vp单位的适配性、space属性仅适用于布局容器。2.作业布置：明确作业要求，强调代码规范与截图提交，提醒学生结合课堂练习巩固知识点，鼓励自主尝试更多属性取值组合。学生自主探究、教师讲解教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目3组件使用与页面跳转-实现用户登录与注册页面布局授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.理解线性布局（Column、Row）、层叠布局（Stack）、弹性布局（Flex）、网格布局（Grid）的核心概念与适用场景；2.掌握各类布局的关键属性（justifyContent、alignItems、space、columnsTemplate等）的作用与配置方法；3.熟悉布局的对齐规则、间距控制及自适应逻辑。能力目标：1.能够根据界面需求选择合适的布局类型，实现组件的有序排列；2.能够运用布局属性调整组件对齐方式、间距及尺寸分配，解决布局错乱问题；3.能够在DevEcoStudio中编写复合布局代码，构建结构清晰的页面框架。素质目标：培养学生的布局设计思维与空间想象能力；提升代码模块化与规范化编写意识；增强团队协作与问题解决能力。教学重点教学难点重点：1.四大核心布局（线性、层叠、弹性、网格）的基本使用方法；2.关键布局属性（justifyContent、alignItems、columnsTemplate、rowsTemplate等）的配置规则。难点：1.不同布局的适用场景区分与复合布局的灵活运用；2.布局属性对齐规则（主轴、交叉轴）的理解与实操；3.网格布局的行列配置与不均匀布局实现。教学小结本节课围绕HarmonyOS四大核心页面布局展开教学，通过概念讲解、案例演示、实操练习与难点突破，学生理解了线性、层叠、弹性、网格布局的核心特性与适用场景，掌握了关键布局属性的配置方法，能够根据页面需求选择合适的布局类型并编写代码，实现组件的有序排列与自适应布局，为后续复杂界面开发奠定了坚实的布局基础作业及要求在DevEcoStudio中创建新的ArkTS工程，完成以下任务：1.构建一个复合布局页面，顶部使用Row布局实现导航栏（包含标题与返回按钮），中间使用Column布局包裹Grid网格布局（3列2行，展示6个文本组件），底部使用Flex布局实现功能按钮组；2.为各布局设置合理的对齐方式、间距及背景样式；3.运行项目并截图，提交代码文件与运行效果截图，标注各布局的作用与关键属性配置。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”APP登录页与首页的布局设计图，提问：“这些页面中的组件为何能有序排列？不同区域的排列方式（垂直、水平、层叠、网格）是如何实现的？”引导学生思考布局的核心作用。2.回顾衔接：结合上节课学习的组件基础知识，强调布局是组件排列的“骨架”，通过布局容器可实现组件的有序组织，引出本节课四大核心布局的学习内容。3.目标明确：告知学生本节课将掌握线性、层叠、弹性、网格布局的使用，能够根据需求设计合理的页面布局结构。二、核心布局知识点讲解（50分钟）知识点一：线性布局（Column、Row）1.概念讲解：线性布局是将子组件按单一方向（垂直/水平）排列的基础布局，核心组件为Column（垂直）和Row（水平），适用于简单行列结构（如表单、按钮组）。2.关键属性解析：（1）justifyContent：控制主轴方向对齐方式（如FlexAlign.Start、Center、SpaceBetween等），结合代码示例演示不同属性值的效果；（2）alignItems：控制交叉轴方向对齐方式（如HorizontalAlign.Start、VerticalAlign.Center等），强调主轴与交叉轴的方向差异（Column主轴为垂直，Row主轴为水平）；（3）space：控制子组件间距，简化margin重复设置。3.代码演示：在DevEcoStudio中创建Column与Row布局示例，分别添加Text、Button组件，设置不同对齐属性与间距，实时展示布局效果，引导学生观察属性变化对布局的影响。知识点二：层叠布局（Stack）1.概念讲解：层叠布局将子组件按“后来居上”的规则叠加排列，适用于弹窗、水印、组件叠加（如图片+文字标签）等场景。2.关键属性与特性：（1）alignContent：设置子组件整体对齐方式（如Alignment.Center、TopStart等）；（2）Z序控制：通过zIndex属性手动调整组件层级，打破默认声明顺序，演示“底层组件置顶”效果。3.代码演示：创建Stack布局，添加3个不同尺寸的Text组件，设置alignContent与zIndex属性，让学生直观感受层叠与层级控制效果。知识点三：弹性布局（Flex）1.概念讲解：弹性布局结合线性布局特性，支持灵活的排列方向、对齐方式与换行设置，适用于自适应屏幕的复杂布局（如表单、卡片组）。2.关键属性解析：（1）flexDirection：设置排列方向（Row、Column及反向排列）；（2）justifyContent与alignItems：同线性布局，支持更灵活的对齐控制；（3）flexWrap：控制子组件超出容器时是否换行（Wrap、NoWrap）。3.代码演示：构建弹性布局表单，包含输入框与图标组件，设置flexDirection、justifyContent与flexWrap属性，演示自适应布局效果。知识点四：网格布局（Grid）1.概念讲解：网格布局按行列二维结构排列组件，适用于规则的网格状内容（如图片墙、商品列表），核心组件为Grid（容器）与GridItem（子项）。2.关键属性解析：（1）columnsTemplate/rowsTemplate：配置行列数量与尺寸占比（如'1fr1fr1fr'表示3列等宽）；（2）rowGap/columnGap：设置行列间距；（3）不均匀布局：通过GridItem的rowStart/rowEnd、columnStart/columnEnd属性实现跨行跨列。3.代码演示：创建3列2行的网格布局，展示6个文本组件，再修改部分GridItem属性实现跨行跨列效果，对比均匀与不均匀网格的差异。 分模块讲解，边演示边实操，强化属性理解与代码记忆三、综合练习与难点突破（20分钟）1.分组任务：每组完成一个“功能卡片列表”页面，要求：（1）外层使用Column布局作为根容器；（2）顶部使用Row布局实现标题栏（含文本与图标）；（3）中间使用Grid布局（2列3行）展示6个功能卡片（每个卡片为Stack布局，包含图片与文本）；（4）底部使用Flex布局实现“刷新”与“更多”按钮组。2.难点指导：（1）针对复合布局嵌套问题，引导学生按“从外到内”的顺序编写代码，逐步细化；（2）针对网格布局行列配置问题，通过实例讲解fr单位的比例分配逻辑；（3）针对对齐规则混淆问题，再次强调“主轴看布局方向，交叉轴与主轴垂直”的核心原则。3.成果展示：邀请2-3组学生展示代码与运行效果，师生共同点评，纠正布局属性使用不当、嵌套混乱等问题。 分组协作完成复合布局任务，在实践中突破难点四、课堂总结与作业布置（10分钟）1.总结回顾：（1）四大布局核心特性：线性布局适用于简单行列，层叠布局适用于组件叠加，弹性布局适用于自适应，网格布局适用于规则网格；（2）关键属性梳理：justifyContent/alignItems（对齐）、space/gap（间距）、columnsTemplate/rowsTemplate（网格行列）；（3）布局选择原则：根据组件排列需求与自适应要求选择合适布局，复杂页面可组合使用多种布局。2.作业布置：明确作业要求，强调代码模块化与注释编写，鼓励学生自主尝试更多布局属性组合，加深理解。学生自主探究、教师讲解教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目3组件使用与页面跳转-实现用户登录与注册页面布局授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.掌握Text、TextInput、Button、Image四大基础组件的核心属性与使用场景；2.理解页面跳转的核心概念（路由模块、页面栈、参数传递）；3.掌握router模块的常用方法（pushUrl、replaceUrl、back）及参数传递与接收方式。能力目标：1.能够根据界面需求灵活配置基础组件属性，实现文本展示、用户输入、按钮交互、图片加载功能；2.能够使用router模块实现页面间的正向跳转、带参跳转与返回跳转；3.能够在DevEcoStudio中构建多页面应用，解决组件配置错误、跳转失败、参数接收异常等问题。素质目标：1培养学生的组件化开发思维与界面交互设计意识。2提升代码模块化与逻辑组织能力。3增强问题排查与自主探究能力。教学重点教学难点重点：1.四大基础组件（Text、TextInput、Button、Image）的核心属性与使用方法；2.router模块的导入与常用跳转方法（pushUrl、back）的使用；3.页面间参数传递与接收的实现逻辑。难点：1.基础组件属性的灵活搭配（如TextInput输入类型控制、Image资源路径配置）；2.页面栈的工作原理与跳转方式（pushUrl与replaceUrl）的差异；3.带参跳转时参数类型约束与接收时的类型转换。教学小结本节课围绕基础组件使用与页面跳转展开教学，通过概念讲解、代码演示与实操练习，学生掌握了Text、TextInput、Button、Image四大基础组件的核心属性与配置方法，理解了页面跳转的核心逻辑与router模块的使用规则，能够实现多页面应用的搭建与页面间的正向、带参及返回跳转，为后续复杂应用开发中的界面交互与导航设计奠定了基础。作业及要求在DevEcoStudio中创建多页面ArkTS工程，完成以下任务：1.构建登录页（包含Text标题、TextInput账号密码输入框、Button登录按钮）与首页（包含Text欢迎语、Image展示图）；2.实现登录页点击按钮向首页的带参跳转（传递账号信息），首页接收并展示该账号；3.在首页添加返回按钮，实现返回登录页的功能；4.运行项目并截图，提交代码文件与运行效果截图，标注组件属性配置与跳转逻辑。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”APP登录页与首页的交互效果，提问：“登录页中的文本展示、账号输入、登录按钮点击、图片加载是如何实现的？点击登录后如何跳转到首页并显示用户信息？”引导学生思考基础组件与页面跳转的核心作用。2.回顾衔接：结合上节课学习的页面布局知识，强调基础组件是界面的“血肉”，页面跳转是应用的“导航骨架”，二者结合实现完整交互，引出本节课核心内容。3.目标明确：告知学生本节课将掌握四大基础组件的使用与页面跳转的实现方法，能够构建多页面交互应用。 结合实际APP交互场景，激发学生学习兴趣二、基础组件使用讲解（35分钟）知识点一：Text组件（文本展示）1.核心属性解析：（1）文本样式：fontColor（颜色）、fontSize（字号）、fontWeight（粗细）、fontStyle（样式）、textDecoration（装饰线）；（2）布局属性：maxLines（最大行数）、textAlign（对齐方式）、width/height（尺寸）。2.代码演示：在DevEcoStudio中创建Text组件，配置不同属性，展示文本样式与布局效果，引导学生观察属性变化对显示的影响。知识点二：TextInput组件（用户输入）1.核心属性与功能：（1）基础配置：placeholder（提示文本）、backgroundColor（背景色）、fontSize（字号）；（2）输入控制：type（输入类型，如Password、Number、PhoneNumber）、maxLength（最大长度）；（3）事件绑定：onChange（输入内容变化事件）。2.代码演示：创建账号、密码输入框，设置不同输入类型与事件绑定，演示输入内容实时响应效果，强调密码类型的密文显示特性。知识点三：Button组件（交互触发）1.核心属性与事件：（1）样式配置：width/height（尺寸）、backgroundColor（背景色）、fontColor（文本颜色）、borderRadius（圆角）；（2）交互事件：onClick（点击事件），用于触发跳转、数据提交等逻辑。2.代码演示：创建登录按钮，配置样式并绑定onClick事件，演示点击后控制台打印日志效果，为后续跳转功能铺垫。知识点四：Image组件（图片加载）1.核心属性与资源路径：（1）样式配置：width/height（尺寸）、opacity（透明度）、borderRadius（圆角）、objectFit（填充模式）；（2）资源路径：本地图片（$rawfile引用）、网络图片（URL引用，需配置网络权限）。2.代码演示：分别加载本地图片与网络图片，配置不同样式属性，解决路径错误、权限缺失等常见问题，展示图片显示效果。 分组件模块化讲解，边演示边实操，强化属性记忆与配置逻辑三、页面跳转实现讲解（25分钟）知识点一：页面跳转核心概念1.路由模块：介绍router模块的作用（管理页面导航）、页面栈的工作原理（后进先出）；2.跳转方式分类：正向跳转（pushUrl、replaceUrl）、返回跳转（back），简要说明二者差异（pushUrl保留当前页，replaceUrl替换当前页）。知识点二：router模块使用步骤1.模块导入：演示import{router}from'@kit.ArkUI'的导入方法；2.常用方法讲解：（1）pushUrl：正向跳转，参数包含url（目标页面路径）、params（传递参数）；（2）back：返回跳转，支持无参返回、指定页面返回与带参返回；（3）参数接收：通过router.getParams()获取跳转传递的参数，需进行类型转换。3.代码演示：（1）创建登录页与首页两个页面，配置页面路径；（2）实现登录页按钮点击通过pushUrl跳转到首页，携带账号参数；（3）在首页通过router.getParams()接收参数并展示；（4）在首页添加返回按钮，通过back方法返回登录页，演示页面栈回溯效果。 结合多页面实例，拆解跳转流程，重点讲解参数传递逻辑四、综合练习与难点突破（15分钟）1.分组任务：每组完成“登录-首页”多页面应用，要求：（1）登录页：包含Text标题、TextInput账号密码输入框（密码类型）、Button登录按钮，实现输入内容绑定与带参跳转；（2）首页：包含Image展示图、Text欢迎语（显示接收的账号参数）、Button返回按钮，实现返回登录页功能；（3）配置Image组件加载本地或网络图片，确保样式美观。2.难点指导：（1）针对Image资源加载失败，指导检查路径配置与网络权限；（2）针对参数接收异常，讲解类型转换与参数命名一致性问题；（3）针对跳转失败，排查页面路径配置与router模块导入问题。3.成果展示：邀请2-3组学生展示应用效果，师生共同点评，纠正组件配置与跳转逻辑中的不当之处。 分组协作完成综合案例，在实践中突破难点五、课堂总结与作业布置（5分钟）1.总结回顾：（1）基础组件核心要点：Text（文本展示）、TextInput（用户输入）、Button（交互触发）、Image（图片加载）的核心属性与场景；（2）页面跳转核心逻辑：router模块导入、pushUrl/back方法使用、参数传递与接收；（3）关键注意点：组件属性搭配、图片资源路径、跳转路径配置、参数类型一致性。2.作业布置：明确作业要求，强调多页面结构搭建与跳转逻辑完整性，鼓励学生自主拓展组件属性配置与跳转场景（如replaceUrl使用）。学生自主探究、教师讲解教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目3组件使用与页面跳转-实现用户登录与注册页面布局授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.掌握登录页、注册页的核心功能模块与界面布局逻辑；2.理解组件组合使用（布局+基础组件）的实现方式；3.熟悉项目资源（图片）的导入与引用方法。能力目标：1.能够独立完成登录页（含输入框、按钮、图片、协议勾选框）的搭建；2.能够实现注册页的多输入项布局与功能选择模块设计；3.能够解决页面搭建中的资源引用、布局错乱、组件属性配置错误等问题；4.能够在DevEcoStudio中调试并运行完整的登录-注册页面项目。素质目标：培养学生的项目实战能力与界面设计审美；提升代码模块化与规范化意识；增强团队协作与问题排查能力。教学重点教学难点重点：登录页、注册页的整体布局框架搭建（Flex+Column/Row组合）。核心功能模块（输入框组、按钮、图片、协议区）的代码实现。项目资源的正确导入与引用。难点：1.复杂布局的嵌套逻辑与间距、对齐方式的精准控制。2.图片资源引用错误、路径配置不当的问题排查。3.响应式数据绑定与组件交互逻辑的实现（如输入内容同步、协议勾选状态）。教学小结本节课围绕“就业一点通”APP的登录页与注册页实现展开实战教学，通过项目拆解、演示实操与分组任务，学生掌握了页面整体布局框架的搭建方法，能够灵活组合布局组件与基础组件实现核心功能模块，学会了项目资源的导入与引用，成功在DevEcoStudio中完成了登录-注册页面的开发与运行，提升了鸿蒙应用界面开发的实战能力。作业及要求在DevEcoStudio中完善登录-注册项目，完成以下任务：1.优化登录页与注册页的样式（调整颜色、间距、圆角，确保界面美观）；2.为注册页添加“验证码倒计时”功能（点击“获取验证码”后60秒内不可重复点击）；3.实现登录页与注册页之间的跳转关联（点击“前往注册”跳转到注册页，点击“使用已有账号登录”返回登录页）；4.运行项目并录制操作演示视频，提交完整代码文件、运行截图与演示视频。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”登录-注册页面最终效果演示视频，提问：“一个完整的用户登录-注册页面包含哪些核心模块？如何将之前学习的布局组件、基础组件组合起来实现这些模块？”引导学生明确项目实战目标。2.项目拆解：通过PPT展示登录页（头部信息、输入框组、登录按钮、注册引导、协议区）与注册页（标题、功能选择、多输入项、注册按钮、返回登录引导）的模块划分，让学生清晰了解页面结构。3.资源准备：发放项目所需图片资源包（logo.png、icon_user.png等），讲解资源导入流程（放置到rawfile文件夹），确保学生环境准备到位。 以完整项目效果激发实战兴趣，明确模块划分降低开发难度二、登录页面实现（35分钟）步骤1：项目创建与资源导入1.演示在DevEcoStudio中创建新ArkTS工程的流程，选择EmptyAbility模板，配置项目名称与SDK版本；2.讲解rawfile文件夹的创建位置（entry/src/main/resources），演示图片资源的复制粘贴与命名规范（避免大小写错误）。步骤2：外层布局搭建1.代码演示：使用Flex+Column构建登录页根布局，设置背景图片与内边距，实现“上半部分功能区+下半部分背景图”的结构；Flex({direction:FlexDirection.Column}){//功能区容器Flex({direction:FlexDirection.Column}){/*核心模块将在此添加*/}.width('100%').flexGrow(1).padding(30)//背景图片Image($rawfile('login_bg.png')).width('100%').aspectRatio(2.3).opacity(0.5).objectFit(ImageFit.Fill)}.width('100%').height('100%')2.重点讲解：flexGrow(1)、aspectRatio、opacity等属性的作用，确保布局自适应屏幕。步骤3：核心模块实现1.头部信息：演示Text组件组合与Image组件（logo）的居中布局，设置字体样式与间距；2.输入框组：使用Flex+Column包裹两个水平Flex容器，分别实现“图标+手机号输入框”“图标+密码输入框”，设置边框、圆角、背景色与输入事件绑定；3.登录按钮与注册引导：演示Flex模拟按钮样式（蓝色背景、白色文字、居中对齐），以及注册引导文本的颜色设置与居中布局；4.协议区：组合Checkbox与Text（含Span组件），实现协议勾选与文本样式差异化。步骤4：调试运行1.演示项目运行流程，指导学生排查常见错误（图片路径错误、组件属性拼写错误、布局嵌套错误）；2.实时调整样式参数（间距、颜色、尺寸），让学生观察效果变化，理解属性配置的影响。 按“项目创建→布局搭建→模块实现→调试运行”流程分步演示，每步配套代码讲解三、注册页面实现（20分钟）步骤1：页面布局框架搭建1.代码演示：创建注册页组件，使用Flex+Column构建根布局，设置渐变背景与内边距，实现“标题→功能选择→输入框组→注册按钮→返回引导”的垂直排列结构；2.重点讲解：linearGradient渐变背景的配置方法，与登录页布局的差异对比。步骤2：核心模块实现1.功能选择区：使用水平Flex容器包裹两个Column组件，模拟“我要找工作”“我要找人才”功能按钮，设置内边距、圆角与背景色；2.多输入项布局：复用登录页输入框组逻辑，扩展姓名、学号、专业、手机号、验证码、密码、确认密码等输入项，讲解“验证码输入框+获取验证码按钮”的水平布局实现；3.注册按钮与返回引导：演示注册按钮的样式配置（与登录按钮保持风格一致），以及“使用已有账号登录”文本的跳转关联预留。步骤3：常见问题解决1.布局错乱问题：指导学生通过调整padding、margin、space属性优化间距，确保组件排列整齐；2.输入框样式统一：强调通过提取公共样式（如边框、圆角、高度）保证所有输入框风格一致。 复用登录页开发逻辑，重点讲解新增模块与差异化布局，提升学生知识迁移能力四、分组实战与难点突破（15分钟）1.分组任务：将学生分为4-5人小组，每组分工完成“登录页优化+注册页完善”，要求：（1）确保所有组件正常显示，无布局错乱；（2）解决图片资源引用、组件属性配置等问题；（3）尝试为输入框添加简单校验（如密码输入框显示字符计数）。2.教师指导：巡回查看各组进度，针对共性问题（如渐变背景不显示、输入框事件绑定错误）集中讲解，对个别问题单独辅导。3.成果预览：邀请1-2组展示已完成的页面效果，师生共同点评，提出优化建议。 分组协作提升实战效率，针对性指导突破共性难点五、课堂总结与作业布置（5分钟）1.总结回顾：（1）核心流程：项目创建→资源导入→布局搭建→模块实现→调试优化；（2）关键技术：Flex+Column/Row组合布局、图片资源引用、组件样式统一、输入事件绑定；（3）常见错误：路径错误、属性拼写错误、布局嵌套层级过多。2.作业布置：明确作业要求，强调功能扩展（验证码倒计时、页面跳转）与效果优化，鼓励学生自主探索更多样式配置与交互功能。学生自主探究、教师讲解教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目4运用页面切换与自定义组件-实现主页面布局效果授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.理解Swiper组件的核心作用、常用属性（autoPlay、loop、indicator等）与适用场景；2.掌握Tabs组件的结构组成（TabContent、TabBar）、关键属性（barPosition、index、controller等）；3.熟悉两种组件的事件绑定方法（onChange、onClick等）。能力目标：1.能够运用Swiper组件实现轮播图功能（自动播放、循环、指示器显示）；2.能够使用Tabs组件实现顶部/底部导航栏与内容页的联动切换；3.能够在DevEcoStudio中编写复合组件代码，解决组件属性配置、布局嵌套等常见问题。素质目标：培养学生的界面交互设计思维；提升代码模块化与规范化编写意识；增强团队协作与问题排查能力。教学重点教学难点重点：1.Swiper组件核心属性（autoPlay、loop、indicator）的配置与使用；2.Tabs组件的结构搭建（TabContent与TabBar关联）与导航位置控制；3.两种组件的事件绑定与交互逻辑实现。难点：1.Swiper组件轮播逻辑与指示器样式的精准控制；2.Tabs组件控制器（TabsController）的使用与页面切换联动；3.组件嵌套布局时的尺寸适配与样式统一。教学小结本节课围绕主页面核心切换组件Swiper与Tabs展开教学，通过概念讲解、案例演示与实操练习，学生理解了两种组件的核心特性与适用场景，掌握了关键属性配置与事件绑定方法，能够独立实现轮播图与导航栏功能，为“就业一点通”APP主页面的交互设计奠定了基础，提升了鸿蒙应用界面的动态交互开发能力。作业及要求在DevEcoStudio中创建新的ArkTS工程，完成以下任务：1.运用Swiper组件实现3张图片的轮播图（自动播放、循环、显示指示器，切换间隔3秒）；2.运用Tabs组件实现底部导航栏（包含“首页”“消息”“我的”3个选项），并绑定对应内容页；3.为轮播图添加点击事件（跳转至指定页面），为导航栏添加选中状态样式（字体变色）；4.运行项目并截图，提交代码文件与运行效果截图，标注核心属性与交互逻辑。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”APP主页面动态效果，重点演示轮播图自动切换与底部导航栏页面跳转功能，提问：“这些动态切换效果是如何实现的？轮播图的自动播放、导航栏与内容页的联动逻辑是什么？”引导学生聚焦页面切换组件的核心作用。2.回顾衔接：结合上节课学习的组件基础知识，强调Swiper与Tabs是实现页面动态交互的核心组件，前者用于轮播展示，后者用于导航切换，引出本节课学习重点。3.目标明确：告知学生本节课将掌握两种组件的属性配置与实操应用，能够独立实现主页面的动态切换功能。 结合实际APP交互效果，激发学生实操兴趣。二、核心组件知识点讲解（35分钟）知识点一：Swiper组件的使用（15分钟）1.概念与适用场景：讲解Swiper组件是容器类组件，用于实现页面/元素的横向/纵向滑动切换，典型场景包括轮播图、引导页，强调其“子组件即页面”的核心特性。2.关键属性解析：（1）基础属性：index（初始页面索引）、autoPlay（是否自动播放）、loop（是否循环）、interval（自动播放间隔）、indicator（是否显示指示器）；（2）方向与动画：vertical（滑动方向）、duration（切换动画时长）；结合表格对比属性默认值与效果，通过DevEcoStudio实时演示“开启/关闭autoPlay”“显示/隐藏indicator”的差异。3.事件绑定：讲解onChange事件（滑动切换时触发，返回当前索引）、onClick事件（点击当前页触发），演示如何通过事件实现索引打印与页面跳转。4.代码演示：创建简单轮播图示例，包含3张图片，配置自动播放、循环、指示器属性，绑定点击事件，让学生直观感受组件用法。知识点二：Tabs组件的使用（20分钟）1.结构组成：讲解Tabs组件由TabContent（内容页）和TabBar（导航栏）组成，核心是“导航选项与内容页一一对应”，展示顶部/底部/侧边导航的不同布局效果。2.关键属性与控制器：（1）核心属性：barPosition（导航栏位置）、index（默认选中索引）、scrollable（是否可滑动导航）、vertical（是否纵向布局）；（2）控制器（TabsController）：用于手动控制导航切换，演示如何创建控制器并绑定到Tabs组件。3.内容页与导航栏绑定：演示TabContent的创建方法，通过.tabBar()绑定导航文本，讲解“一个TabContent对应一个导航选项”的逻辑，展示导航栏选中状态的默认样式。4.代码演示：创建底部导航栏示例，包含3个导航选项与对应内容页，配置选中状态字体颜色，演示导航切换与内容页联动效果，强调布局嵌套时的尺寸适配（宽高设置为100%）。 分组件模块化讲解，边演示边实操，强化属性记忆与逻辑理解三、综合实操与难点突破（25分钟）1.分组任务：将学生分为4-5人小组，完成“轮播图+底部导航栏”综合案例，要求：（1）轮播图：3张图片、自动播放（间隔3秒）、循环、显示指示器；（2）底部导航栏：3个选项（“首页”“消息”“我的”）、绑定内容页；（3）基础交互：轮播图点击跳转，导航栏选中样式变化。2.难点指导：（1）轮播图指示器样式调整：指导学生通过自定义指示器组件修改颜色、大小；（2）导航栏选中状态：讲解通过判断index值动态设置字体颜色与粗细；（3）布局嵌套问题：强调Tabs组件与内容页的宽高需设置为100%，避免内容截断。3.教师巡视：实时解答学生遇到的属性配置错误、事件绑定失效等问题，针对共性问题集中讲解。 分组协作完成综合案例，在实践中突破难点四、成果展示与课堂总结（10分钟）1.成果展示：邀请2-3组学生展示项目效果，演示轮播图自动切换、导航栏跳转功能，师生共同点评，纠正属性配置不当、样式不统一等问题。2.总结回顾：（1）Swiper核心：属性控制轮播规则（自动、循环、指示器），事件实现交互；（2）Tabs核心：导航栏（TabBar）与内容页（TabContent）绑定，控制器实现手动切换；（3）关键注意点：组件宽高适配、属性默认值、事件回调逻辑。 通过成果展示强化实操记忆，梳理知识框架五、作业布置（10分钟）1.明确作业要求：详细说明作业任务的4个核心要点，强调代码规范性与注释编写；2.重点提示：提醒学生注意轮播图图片路径配置、导航栏选中状态样式、事件绑定路径正确性；3.提交要求：指定提交格式（代码文件+截图+标注），鼓励学生自主拓展组件属性（如修改轮播方向、导航栏位置）。学生自主探究、教师讲解教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目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.成果展示：邀请各组展示自定义组件与生命周期日志，师生共同点评