鸿蒙应用开发项目式教程（AI助学）（微课版）-教案 项目5 体育用品商城应用、项目6 桌面计算器

《鸿蒙应用开发项目式教程》课程教学单元设计第1页共7页《鸿蒙应用开发项目式教程》课程教学单元设计项目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.新建鸿蒙项目，按规范搭建目录，将HTML、JS、图片等前端资源放入rawfile目录。2.编写商城首页Index.ets，完成页面标题、按钮及路由跳转功能开发。3.编写商品页Goods.ets，引入Web组件加载本地前端页面。4.实现应用侧调用前端函数：添加“展示优惠组合”按钮，调用前端showSales方法。5.实现前端调用原生方法：通过javaScriptProxy注册原生接口，完成添加商品弹出购物车提示功能。问题引导操作演示分析归纳多媒体投屏DevEcoStudio实时演示观摩思考归纳总结实战训练1.搭建项目目录，导入前端静态资源。2.完成商城首页、商品页布局，实现页面路由跳转。3.使用Web组件加载本地页面，实现原生调用前端优惠展示、前端调用原生购物车弹窗功能。动手实践做中学DevEcoStudio真实开发环境实践操作查阅资料巡视指导评估讨论1.成果评估：展示学生项目，从界面布局、功能完整性、代码规范三方面进行点评。2.问题汇总：梳理Web页面加载失败、双向通信失效、布局错乱、数据计算错误等高频问题，统一分析原因。3.分组讨论：探讨Web组件不同加载方式的适用场景、原生与Web双向通信核心要点、移动端与PC端商城布局差异。4.小组代表分享观点，教师补充总结。教师启发讨论归纳分数激励实训项目单作品投屏思考结果演示课堂总结1.回顾核心知识点：ArkWeb介绍、Web组件生命周期、三种页面加载方式、双向通信核心API。2.复盘项目完整开发流程：页面搭建、Web组件嵌入、交互功能实现、购物车拓展开发。3.重申重难点：$rawfile使用规范、runJavaScript与javaScriptProxy用法、通信功能调试要点。4.结合体育精神，强调严谨编码、持续钻研的职业素养。教师讲解多媒体课件演示代码回顾整理笔记引导创新课后作业完善课堂实训项目项目，独立完成AI赋能拓展任务：进一步实现购物车功能。用户可以在购物车界面查看已添加的商品名称与价格、自动计算优惠金额、计算商品总价，以及清空购物车。教师讲授多媒体布置作业提出要求《鸿蒙应用开发项目式教程》课程教学单元设计项目6桌面计算器授课教师：授课班级:学时：8教学条件计算机实训室、DevEcoStudio开发工具、投影设备、广播教学软件教学素材教材《鸿蒙应用开发项目式教程》、教学课件、实训项目单、案例源码库、微课视频、教学网站教学目标设计知识目标：1．熟悉FormKit的服务卡片架构、特征等2．掌握ArkTS卡片的创建方法3．掌握ArkTS卡片配置文件的结构和作用4．掌握ArkTS卡片从创建到销毁的完整生命周期流程技能目标：能够使用ArkTS卡片开发计算器卡片素质目标：1．培养工程化思维与规范意识2．具有职业责任感，强化质量意识任务描述手机桌面计算器是日常高频使用工具，本次任务要求基于鸿蒙ArkTS+ArkUI框架，开发一款桌面计算器应用。需完成项目资源配置、计算器主界面搭建、四则运算逻辑编码、桌面ArkTS卡片开发、配置文件编写、卡片生命周期管理，最终在预览器和模拟器中调试运行，实现计算器基础运算与桌面卡片复用功能。教学内容1．鸿蒙项目目录结构认知、字符串资源与应用图标配置。2．ArkUI声明式UI布局、状态管理与按钮组件开发。3．中缀表达式解析、调度场算法、后缀表达式运算逻辑实现。4．计算器卡片界面复用开发与页面代码修改。5．module.json5、form_config.json卡片配置文件编写。6．FormExtensionAbility卡片生命周期回调方法使用。7．应用预览器测试、模拟器功能测试与Bug调试。重点：掌握ArkUI界面开发、计算器运算逻辑、ArkTS卡片配置文件编写难点：调度场算法逻辑理解、卡片生命周期回调、组件功能复用任务分析与实现1.任务需求分析：开发带桌面卡片的鸿蒙计算器。2.项目架构设计：采用ArkUI前端展示+运算算法+Form卡片扩展Ability三层架构，卡片复用主页面代码简化开发。3.核心功能实现：借助FormExtensionAbility管理卡片生命周期，双配置文件实现桌面卡片。

教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入手机桌面计算器如何开发？鸿蒙桌面卡片是什么？如何实现计算器功能与桌面卡片计算器？教师讲授引导法多媒体教师：讲解演示学生：观察思考知识讲解1.鸿蒙项目目录结构、字符串与图标资源配置；2.ArkUI声明式布局、@State状态管理、按钮组件应用；3.中缀转后缀表达式、调度场算法原理；4.ArkTS卡片结构、module与form配置文件作用；5.卡片生命周期7个核心回调函数功能。启发讲解讨论归纳多媒体课件演示代码投屏思考交流互动分组讨论记录笔记示范操作1.创建鸿蒙项目并配置string.json、应用图标资源；2.编码实现Index.ets计算器主界面布局与按钮事件；3.讲解运算核心代码、中缀转后缀算法调试；4.开发CardCalculator.ets卡片界面、复用业务逻辑；5.编写module.json5和form_config.json配置文件；6.编写卡片生命周期代码、预览器与模拟器测试。问题引导操作演示分析归纳多媒体投屏DevEcoStudio实时演示观摩思考归纳总结实战训练学生独立完成完整实训任务：参照课本项目案例，独立完成鸿蒙计算器全流程开发，完成界面搭建、运算逻辑编码、卡片配置、生命周期编写，在预览器和模拟器中运行测试。动手实践做中学DevEcoStudio真实开发环境实践操作查阅资料巡视指导评估讨论1.评估学生项目完成进度与代码规范；2.展示标准参考源码与实现方案；3.抽取学生作品演示运行效果、集体点评；4.从功能实现、代码规范、界面布局进行综合考核。教师启发讨论归纳分数激励实训项目单作品投屏思考结果演示课堂总结1.ArkUI声明式开发是鸿蒙界面开发核心，状态管理是交互基础；2.调度场算法是实现计算器优先级运算的关键，需理解栈的使用逻辑；3.ArkTS卡片支持代码复用，只需修改入口组件即可共享业务逻辑；4.module.js