鸿蒙基础应用及开发 1

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目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（图片加载）