鸿蒙应用开发项目式教程（AI助学）（微课版）-教案 全丽莉 项目1-5 第一个ArkTS应用（Stage模型）-体育用品商城应用

《鸿蒙应用开发项目式教程》课程教学单元设计第1页共7页《鸿蒙应用开发项目式教程》课程教学单元设计项目1第一个ArkTS应用（Stage模型）授课教师：授课班级:学时：4教学条件计算机实训室、DevEcoStudio、鸿蒙模拟器、投影设备、广播教学软件、可联网计算机教学素材教材讲义、教学PPT、项目源码、配套微课视频、HarmonyOS官方开发文档、实训任务单教学目标设计知识目标：1.了解鸿蒙操作系统2.掌握DevEcoStudio的使用3.了解AI辅助编程工具4.熟悉工程目录及配置文件5.了解ArkTS语言6.了解Stage模型技能目标：1.能够熟练使用DevEcoStudio创建鸿蒙项目2.能够熟练使用模拟器测试鸿蒙应用素质目标：1.具有良好的软件编程规范素养2.树立技术自信，培养精益求精的工匠精神任务描述基于DevEcoStudio创建Stage模型ArkTS应用，包含主界面、界面二两个界面；主界面展示指定诗词文案+跳转按钮，第二界面展示对应诗词+返回按钮；借助Router组件实现双向界面跳转，完成预览器、模拟器全流程测试；熟悉鸿蒙开发环境、项目结构、界面路由基础开发流程教学内容1.鸿蒙系统知识：OpenHarmony开源项目、HarmonyOS商用系统、HarmonyOSNEXT介绍2.项目结构：Stage模型工程目录、app.json5与module.json5配置文件说明3.基础理论：ArkTS语言简介、Stage模型架构（UIAbility、WindowStage、Context）4.开发环境：DevEcoStudio安装、工程创建、模拟器创建启动、预览器使用5.开发实操：新建界面、ArkUI文本/Button组件、Router路由pushUrl/back实现界面跳转6.AI辅助：CodeGenie智能编程工具登录与基础问答使用重点：DevEcoStudio环境搭建与项目创建、界面创建、Router界面跳转实现、预览器与模拟器调试难点：Stage模型架构理解、工程配置文件作用区分、pushUrl与replaceUrl两种路由方式区别任务分析与实现1.需求梳理：双界面布局、文字展示、按钮跳转返回2.开发流程：安装IDE→新建EmptyAbility项目→修改首页UI→新建SecondPage界面→编写路由跳转代码→预览调试→模拟器运行测试→体验CodeGenie工具3.运行效果：点击按钮可在主界面、界面二互相切换，应用正常在模拟器运行

教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入展示手机APP界面切换效果，抛出问题：APP多个界面如何创建、界面之间怎么跳转？引入鸿蒙Stage模型应用开发，引出本项目双界面跳转案例讲授法、情景提问法课件、成品APP演示、运行效果图教师：案例演示，提出思考问题；学生：观察效果、思考讨论知识讲解1.国产鸿蒙系统：OpenHarmony与HarmonyOS区别、技术自主创新科普2.Stage模型整体架构、工程目录与两个核心配置文件3.ArkTS基础介绍、Router路由两种跳转方式区别4.DevEcoStudio界面分区、模拟器原理、CodeGenie工具简介启发式讲授、对比讲解PPT课件、目录结构图、架构原理图投屏教师：知识点拆解讲解；学生：课堂记录，疑问举手提问示范操作1.分步演示DevEcoStudio安装、模拟器创建启动2.演示EmptyAbility项目创建，修改Index首页文本与按钮3.演示新建SecondPage界面、修改界面文案4.导入router模块，编写跳转、返回代码，预览+模拟器运行调试分步实操演示、边写边讲投屏、DevEco实时代码编写教师：分步实操演示，强调易错点；学生：跟随记录关键代码步骤实战训练学生独立完成项目全流程：环境校验→新建项目→双界面布局开发→路由跳转代码编写→预览自测→模拟器运行；遇到bug自主排错，教师巡回答疑项目驱动教学、自主实操实训室开发环境、实训指导书学生：独立编码开发、调试程序；教师：巡回巡查，针对性答疑纠错评估讨论1.功能验收：检查界面文字、跳转返回功能是否正常2.查看代码规范性、项目目录结构是否规范3.挑选优秀学生作品投屏展示，小组互相点评作品点评、学生互评、过程考核模拟器投屏、评分记录表学生：演示自己项目、互评优缺点；教师：总结共性错误，优化指导课堂总结1.梳理鸿蒙系统、Stage模型、项目目录核心知识点2.总结界面创建、Router跳转开发步骤3.归纳开发环境、预览器/模拟器使用要点、AI辅助编程作用框架梳理、归纳复盘思维导图课件学生：整理课堂笔记；教师：提炼知识重难点课后作业完善本次元服务项目代码，独立完成AI赋能拓展任务：初识DevEcoAI辅助编程工具。任务驱动、自主拓展多媒体发布作业学生：课下完成拓展任务、提交材料；教师：明确作业评分标准《鸿蒙应用开发项目式教程》课程教学单元设计项目2中国汽车销量排行榜应用授课教师：授课班级:学时：12教学条件计算机实训室、DevEcoStudio、模拟器、投影、广播教学软件、网络环境教学素材教材、课件、实训单、源码库、微课、教学网站、ArkTS官方文档教学目标设计知识目标：1.熟悉ArkTS基础语法2.熟悉@Builder用法3.熟悉装饰器@State、@Prop、@Link用法4.熟悉自定义组件生命周期函数技能目标：能够使用ArkTS实现应用简单功能素质目标：1.培养使用ArkTS装饰器进行组件化开发和数据传递的规范编程习惯2.提升通过预览器与模拟器测试UI布局及数据展示准确性的质量保障意识任务描述基于DevEcoStudio开发汽车销量排行应用，完成项目结构、模拟数据、自定义组件、主界面、数据切换、返回退出、销量总和统计功能，在预览器/模拟器正常运行，掌握ArkTS、组件化、状态管理核心技能。教学内容1.ArkTS：变量常量、类型、运算符、流程控制、函数、面向对象、模块化2.装饰器：@Entry、@Component、@Builder、@State、@Prop、@Link3.生命周期：aboutToAppear、aboutToDisappear等4.项目分层：数据模型、视图模型、组件5.模拟数据、列表渲染、数据切换重点：ArkTS装饰器、自定义组件、列表渲染、数据切换与状态管理难点：@State/@Prop/@Link数据绑定、@Builder复用、父子通信、生命周期任务分析与实现1.需求：排行展示、数据切换、退出、销量总和2.流程：新建项目→目录→数据模型→模拟数据→组件开发→主界面→测试→AI拓展3.效果：列表展示、切换数据、退出、底部显示销量总和

教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入展示汽车销量数据，提问：如何实现排行展示、数据切换、组件复用？讲授、引导提问课件、效果演示教师：演示引导；学生：思考作答知识讲解1.ArkTS基础语法2.核心装饰器用法3.组件生命周期4.项目分层结构5.列表与数据逻辑启发讲解、案例对比课件、代码投屏学生：听讲记录；教师：答疑梳理示范操作1.新建项目与结构搭建2.数据模型与模拟数据3.三大组件开发4.主界面与逻辑实现5.预览/模拟器调试分步演示、实操讲解投屏、DevEco演示学生：观摩记录；教师：强调重难点实战训练独立完成项目开发：结构、数据、组件、界面、切换、退出、销量总和项目驱动、动手实践开发环境、实训书学生：实操排错；教师：巡回指导评估讨论1.功能检查：界面、切换、退出、总和2.代码规范检查3.优秀作品展示点评4.综合考核点评、互评、激励作品投屏、评分表学生：演示互评；教师：点评优化课堂总结1.ArkTS与装饰器要点2.组件化与数据传递3.生命周期与绑定规则4.项目分层与复用梳理归纳、复盘课件、知识框架学生：整理巩固；教师：总结体系课后作业完善项目代码，独立完成AI赋能拓展任务：在中国汽车销量排行榜应用中增加计算年销售量前10名汽车品牌的年销售总量功能；提交完整源码、运行截图、实训报告任务布置、自主拓展多媒体学生：完成作业；教师：明确要求《鸿蒙应用开发项目式教程》课程教学单元设计项目3乐购圈应用授课教师：授课班级:学时：12教学条件计算机实训室、DevEcoStudio开发工具、投影设备、广播教学软件教学素材教材《鸿蒙应用开发项目式教程》、教学课件、实训项目单、案例源码库、微课视频、教学网站教学目标设计知识目标：

1.熟悉ArkUI基础组件的类型和使用方法。

2.掌握容器组件的布局方式。

3.理解路由的基本原理。技能目标：

1.能够使用基础组件构建简单界面。

2.能够灵活使用容器组件进行布局。

素质目标：

1.具有良好的软件编码规范素养2.提升问题解决能力任务描述为满足消费者在购物过程中对社交互动、分享体验和获取建议的需求，需要开发一款"乐购圈"社交购物App。该App主要包含三个核心页面：登录页面（提供账号密码登录、短信验证码登录和第三方登录选项）、首页（展示轮播商品推广和好物推荐）、我的页面（显示用户账号信息，提供订单、资讯、关注等功能）。教学内容熟悉ArkUI基础组件的类型和使用方法。

掌握容器组件的布局方式。

理解路由的基本原理。

学习乐购圈App的整体架构设计。重点：

熟悉ArkUI基础组件的类型和使用方法；掌握容器组件的布局方式；理解路由的基本原理。难点：

容器组件布局的灵活运用；路由跳转的实现；页面间数据传递。任务分析与实现1.需求：购物浏览、用户登录、底部导航、个人信息管理；2.流程：新建项目→准备资源→定义常量与数据模型→构建自定义组件→实现登录与主页面→注册页面路由→预览与模拟器测试；3.效果：登录验证跳转、首页轮播与商品展示、Tab切换、个人中心信息展示。

教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入什么是ArkUI组件？为什么需要容器组件？路由在App开发中有什么作用？教师讲授

引导法多媒体教师：讲解演示

学生：观察思考知识讲解1：熟悉ArkUI基础组件的类型和使用方法。

2：掌握容器组件的布局方式。

3：理解路由的基本原理。

4：乐购圈App架构设计。启发讲解

讨论归纳多媒体

课件演示

代码投屏思考

交流互动

分组讨论

记录笔记示范操作1：使用Text、Image、Button等基础组件。

2：使用Column、Row、Stack等容器组件布局。

3：配置路由实现页面跳转。

4：搭建乐购圈App项目框架。问题引导

操作演示

分析归纳多媒体投屏

DevEcoStudio实时演示观摩思考

归纳总结实战训练课堂实践：完成乐购圈App登录页面开发，使用ArkUI基础组件和容器组件进行布局，并实现路由跳转功能。动手实践

做中学DevEcoStudio真实开发环境实践操作

查阅资料

巡视指导评估讨论1.评估讨论实训任务的实施过程；

2.给出参考的解决方案；

3.展示讨论学生的解决方案；教师启发

讨论归纳

分数激励实训项目单

结果演示思考

结果演示课堂总结1.ArkUI基础组件是构建UI界面的基础，包括Text、Image、Button等。

2.掌握容器组件的布局方式包括Column、Row、Stack等容器的灵活运用。

3.理解路由的基本原理包括页面注册、路由跳转和数据传递。

4.乐购圈App采用模块化架构，包含登录、首页、我的三个核心模块。教师讲解多媒体

课件演示

代码回顾整理笔记

引导创新课后作业完善项目代码，独立完成AI赋能拓展任务：在乐购圈应用中添加一个注册页面，允许新用户创建账号。该页面将从登录页面的注册新账号按钮进入，包含基本的注册表单；提交完整源码、运行截图、实训报告。任务布置、自主拓展多媒体布置作业

提出要求《鸿蒙应用开发项目式教程》课程教学单元设计项目4手势密码应用授课教师：授课班级:学时：8教学条件计算机实训室、DevEcoStudio开发工具、投影设备、广播教学软件教学素材教材《鸿蒙应用开发项目式教程》、教学课件、实训项目单、案例源码库、微课视频、教学网站教学目标设计知识目标：

1.掌握ArkDataPreferencesAPI的常用方法及生命周期2.理解轻量级键值对存储机制。3.熟悉PatternLock组件的属性、事件及PatternLockController控制器的使用方法技能目标：

1.能够使用PreferencesAPI完成数据的异步读写、更新与持久化。2.能够基于PatternLock组件实现图案密码的设置、验证与重置完整流程。素质目标：

1.具有良好的数据安全与隐私保护意识，遵循最小权限与加密存储规范。2.提升异常处理与调试能力，能主动记录日志并定位数据操作错误。任务描述本应用展示了手势密码组件的使用，实现了密码设置、验证和重置功能。手势密码组件：以宫格图案的方式输入密码，用于密码验证。手指触碰屏幕上的手势密码区域时开始进入输入状态，手指离开屏幕时结束输入状态并向应用返回输入的密码。使用到用户首选项接口@ohos.data.preferences异步获取用户设定过的密码。教学内容掌握ArkDataPreferencesAPI的常用方法及生命周期。

理解轻量级键值对存储机制。

熟悉PatternLock组件的属性、事件。

学习手势密码App的整体架构设计。重点：

掌握ArkDataPreferencesAPI的常用方法及生命周期；理解轻量级键值对存储机制；熟悉PatternLock组件的属性、事件。难点：

PreferencesAPI的生命周期管理；PatternLock组件的事件处理；数据存储的安全性保障。任务分析与实现需求：图案密码设置、密码验证、密码重置、数据持久化、页面跳转流程：新建项目→准备资源→定义常量→封装工具类→构建自定义组件→实现Index主页面→实现Home页面→注册页面路由→预览与模拟器测试3.效果：首次设置密码、验证解锁、重置密码、解锁成功提示

教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入什么是ArkDataPreferences？轻量级键值对存储有什么特点？PatternLock组件如何实现手势识别？教师讲授

引导法多媒体教师：讲解演示

学生：观察思考知识讲解1：掌握ArkDataPreferencesAPI的常用方法及生命周期。

2：理解轻量级键值对存储机制。

3：熟悉PatternLock组件的属性、事件。

4：手势密码App架构设计。启发讲解

讨论归纳多媒体

课件演示

代码投屏思考

交流互动

分组讨论

记录笔记示范操作1：创建Preferences实例并进行数据存储。

2：实现数据的读取、更新和删除操作。

3：使用PatternLock组件实现手势输入。

4：搭建手势密码App项目框架。问题引导

操作演示

分析归纳多媒体投屏

DevEcoStudio实时演示观摩思考

归纳总结实战训练课堂实践：完成手势密码App的核心功能开发，包括手势密码的创建、验证和存储功能。动手实践

做中学DevEcoStudio真实开发环境实践操作

查阅资料

巡视指导评估讨论1.评估讨论实训任务的实施过程；

2.给出参考的解决方案；

3.展示讨论学生的解决方案；

4.考核学生结果。教师启发

讨论归纳

分数激励实训项目单

结果演示思考

结果演示课堂总结1.ArkDataPreferences是鸿蒙提供的轻量级键值对存储API，适用于存储少量配置数据。

2.理解轻量级键值对存储机制具有高效、简单的特点，适合存储用户偏好设置等数据。

3.熟悉PatternLock组件的属性、事件包括手势绘制、验证、回调事件处理等。

4.手势密码App采用分层架构，确保数据安全和用户体验。教师讲解多媒体

课件演示

代码回顾整理笔记

引导创新课后作业完善项目代码，独立完成AI赋能拓展任务：当用户连续输入错误密码达到5次时，应用自动锁定图案输入区域60秒，期间无法再次尝试解锁。倒计时结束后，用户可重新输入密码；提交完整源码、运行截图、实训报告。教师讲授多媒体布置作业

提出要求《鸿蒙应用开发项目式教程》课程教学单元设计项目5体育用品商城应用授课教师：授课班级:学时：12教学条件计算机实训室、DevEcoStudio开发工具、投影设备、广播教学软件教学素材教材《鸿蒙应用开发项目式教程》、教学课件、实训项目单、案例源码库、微课视频、教学网站教学目标设计知识目标：1．熟悉使用ArkWeb提供的Web组件显示网页的方法2．了解Web组件的生命周期3．熟悉应用侧调用前端页面函数的方法4．熟悉前端页面调用应用侧函数的方法技能目标：1．能熟练使用ArkWeb的Web组件搭建项目2．能实现应用侧与Web前端页面的双向通信素质目标：1．培养Web与原生应用一体化开发的工程实践能力2．在跨技术栈开发中，养成遵循规范、保障代码质量与协作效率的严谨习惯任务描述创建一个体育用品商城应用，主界面呈现大号标题“ArkWeb体育用品商城”，底部放置一个“进入商城”按钮。点击该按钮后，应用通过ArkUI的router路由跳转至商城商品界面，实现Web页面嵌入以及相关交互。教学内容1.ArkWeb简介。2.Web组件的生命周期。3.使用Web组件加载页面。4.Web页面渲染与布局。5.应用侧调用前端页面函数。6.前端页面调用应用侧函数。重点：使用Web组件加载页面、应用侧与前端页面通信难点：$rawfile使用规范、runJavaScript与javaScriptProxy用法、通信功能调试要点任务分析与实现1.任务需求分析：开发体育用品商城鸿蒙应用，实现页面跳转、Web页面嵌入、原生与前端双向通信及购物车拓展功能。2.项目架构设计：采用ArkUI原生、ArkWeb引擎、Web前端三层架构，依托导航路由与组件能力实现跨技术栈融合开发。3.核心功能实现：依次完成工程配置、页面开发、Web组件集成、双向交互开发、生命周期适配与功能测试全流程开发。

教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入结合日常使用的电商、资讯类App，提问：鸿蒙系统如何实现原生页面内嵌网页。展示体育用品商城效果图，提出问题：怎样实现原生页面与网页商品的相互点击、数据交互。3.引出本节课核心内容：使用ArkWeb完成原生与Web融合开发。教师讲授引导法多媒体教师：讲解演示学生：观察思考知识讲解ArkWeb基础：讲解ArkWeb引擎作用、Web组件应用场景、核心能力及WebviewController控制器的用途。Web组件生命周期：介绍正常/异常加载流程，梳理生命周期回调顺序、各回调函数触发时机与实际应用场景。3.页面加载方式：讲解加载网络页面、本地rawfile页面、HTML富文本三种方式，说明网络权限配置、$rawfile使用规范。渲染与布局：对比同步、异步渲染模式，讲解自适应布局的特点、适用场景与约束限制。双向通信原理：讲解应用侧通过runJavaScript调用前端JS；讲解通过javaScriptProxy完成对象注册，实现前端调用原生ArkTS方法。启发讲解讨论归纳多媒体课件演示代码投屏思考交流互动分组讨论记录笔记示范操作1.新建鸿蒙项目，