项目5 体育用品商城应用

《鸿蒙应用开发项目式教程》课程教学单元设计第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.结合体育精神，强调严谨编码、持续钻研的职业素养。教师讲解多媒体课件演