鸿蒙基础应用及开发 3

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目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）核心流程：项目创建→资源导