鴻蒙應(yīng)用開發(fā)項(xiàng)目式教程（AI助學(xué)）（微課版）-教案 項(xiàng)目5 體育用品商城應(yīng)用、項(xiàng)目6 桌面計(jì)算器

《鴻蒙應(yīng)用開發(fā)項(xiàng)目式教程》課程教學(xué)單元設(shè)計(jì)第1頁共7頁《鴻蒙應(yīng)用開發(fā)項(xiàng)目式教程》課程教學(xué)單元設(shè)計(jì)項(xiàng)目5體育用品商城應(yīng)用授課教師：授課班級:學(xué)時(shí)：12教學(xué)條件計(jì)算機(jī)實(shí)訓(xùn)室、DevEcoStudio開發(fā)工具、投影設(shè)備、廣播教學(xué)軟件教學(xué)素材教材《鴻蒙應(yīng)用開發(fā)項(xiàng)目式教程》、教學(xué)課件、實(shí)訓(xùn)項(xiàng)目單、案例源碼庫、微課視頻、教學(xué)網(wǎng)站教學(xué)目標(biāo)設(shè)計(jì)知識目標(biāo)：1．熟悉使用ArkWeb提供的Web組件顯示網(wǎng)頁的方法2．了解Web組件的生命周期3．熟悉應(yīng)用側(cè)調(diào)用前端頁面函數(shù)的方法4．熟悉前端頁面調(diào)用應(yīng)用側(cè)函數(shù)的方法技能目標(biāo)：1．能熟練使用ArkWeb的Web組件搭建項(xiàng)目2．能實(shí)現(xiàn)應(yīng)用側(cè)與Web前端頁面的雙向通信素質(zhì)目標(biāo)：1．培養(yǎng)Web與原生應(yīng)用一體化開發(fā)的工程實(shí)踐能力2．在跨技術(shù)棧開發(fā)中，養(yǎng)成遵循規(guī)范、保障代碼質(zhì)量與協(xié)作效率的嚴(yán)謹(jǐn)習(xí)慣任務(wù)描述創(chuàng)建一個(gè)體育用品商城應(yīng)用，主界面呈現(xiàn)大號標(biāo)題“ArkWeb體育用品商城”，底部放置一個(gè)“進(jìn)入商城”按鈕。點(diǎn)擊該按鈕后，應(yīng)用通過ArkUI的router路由跳轉(zhuǎn)至商城商品界面，實(shí)現(xiàn)Web頁面嵌入以及相關(guān)交互。教學(xué)內(nèi)容1.ArkWeb簡介。2.Web組件的生命周期。3.使用Web組件加載頁面。4.Web頁面渲染與布局。5.應(yīng)用側(cè)調(diào)用前端頁面函數(shù)。6.前端頁面調(diào)用應(yīng)用側(cè)函數(shù)。重點(diǎn)：使用Web組件加載頁面、應(yīng)用側(cè)與前端頁面通信難點(diǎn)：$rawfile使用規(guī)范、runJavaScript與javaScriptProxy用法、通信功能調(diào)試要點(diǎn)任務(wù)分析與實(shí)現(xiàn)1.任務(wù)需求分析：開發(fā)體育用品商城鴻蒙應(yīng)用，實(shí)現(xiàn)頁面跳轉(zhuǎn)、Web頁面嵌入、原生與前端雙向通信及購物車拓展功能。2.項(xiàng)目架構(gòu)設(shè)計(jì)：采用ArkUI原生、ArkWeb引擎、Web前端三層架構(gòu)，依托導(dǎo)航路由與組件能力實(shí)現(xiàn)跨技術(shù)棧融合開發(fā)。3.核心功能實(shí)現(xiàn)：依次完成工程配置、頁面開發(fā)、Web組件集成、雙向交互開發(fā)、生命周期適配與功能測試全流程開發(fā)。

教學(xué)過程設(shè)計(jì)主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動問題引入結(jié)合日常使用的電商、資訊類App，提問：鴻蒙系統(tǒng)如何實(shí)現(xiàn)原生頁面內(nèi)嵌網(wǎng)頁。展示體育用品商城效果圖，提出問題：怎樣實(shí)現(xiàn)原生頁面與網(wǎng)頁商品的相互點(diǎn)擊、數(shù)據(jù)交互。3.引出本節(jié)課核心內(nèi)容：使用ArkWeb完成原生與Web融合開發(fā)。教師講授引導(dǎo)法多媒體教師：講解演示學(xué)生：觀察思考知識講解ArkWeb基礎(chǔ)：講解ArkWeb引擎作用、Web組件應(yīng)用場景、核心能力及WebviewController控制器的用途。Web組件生命周期：介紹正常/異常加載流程，梳理生命周期回調(diào)順序、各回調(diào)函數(shù)觸發(fā)時(shí)機(jī)與實(shí)際應(yīng)用場景。3.頁面加載方式：講解加載網(wǎng)絡(luò)頁面、本地rawfile頁面、HTML富文本三種方式，說明網(wǎng)絡(luò)權(quán)限配置、$rawfile使用規(guī)范。渲染與布局：對比同步、異步渲染模式，講解自適應(yīng)布局的特點(diǎn)、適用場景與約束限制。雙向通信原理：講解應(yīng)用側(cè)通過runJavaScript調(diào)用前端JS；講解通過javaScriptProxy完成對象注冊，實(shí)現(xiàn)前端調(diào)用原生ArkTS方法。啟發(fā)講解討論歸納多媒體課件演示代碼投屏思考交流互動分組討論記錄筆記示范操作1.新建鴻蒙項(xiàng)目，按規(guī)范搭建目錄，將HTML、JS、圖片等前端資源放入rawfile目錄。2.編寫商城首頁Index.ets，完成頁面標(biāo)題、按鈕及路由跳轉(zhuǎn)功能開發(fā)。3.編寫商品頁Goods.ets，引入Web組件加載本地前端頁面。4.實(shí)現(xiàn)應(yīng)用側(cè)調(diào)用前端函數(shù)：添加“展示優(yōu)惠組合”按鈕，調(diào)用前端showSales方法。5.實(shí)現(xiàn)前端調(diào)用原生方法：通過javaScriptProxy注冊原生接口，完成添加商品彈出購物車提示功能。問題引導(dǎo)操作演示分析歸納多媒體投屏DevEcoStudio實(shí)時(shí)演示觀摩思考?xì)w納總結(jié)實(shí)戰(zhàn)訓(xùn)練1.搭建項(xiàng)目目錄，導(dǎo)入前端靜態(tài)資源。2.完成商城首頁、商品頁布局，實(shí)現(xiàn)頁面路由跳轉(zhuǎn)。3.使用Web組件加載本地頁面，實(shí)現(xiàn)原生調(diào)用前端優(yōu)惠展示、前端調(diào)用原生購物車彈窗功能。動手實(shí)踐做中學(xué)DevEcoStudio真實(shí)開發(fā)環(huán)境實(shí)踐操作查閱資料巡視指導(dǎo)評估討論1.成果評估：展示學(xué)生項(xiàng)目，從界面布局、功能完整性、代碼規(guī)范三方面進(jìn)行點(diǎn)評。2.問題匯總：梳理Web頁面加載失敗、雙向通信失效、布局錯(cuò)亂、數(shù)據(jù)計(jì)算錯(cuò)誤等高頻問題，統(tǒng)一分析原因。3.分組討論：探討Web組件不同加載方式的適用場景、原生與Web雙向通信核心要點(diǎn)、移動端與PC端商城布局差異。4.小組代表分享觀點(diǎn)，教師補(bǔ)充總結(jié)。教師啟發(fā)討論歸納分?jǐn)?shù)激勵(lì)實(shí)訓(xùn)項(xiàng)目單作品投屏思考結(jié)果演示課堂總結(jié)1.回顧核心知識點(diǎn)：ArkWeb介紹、Web組件生命周期、三種頁面加載方式、雙向通信核心API。2.復(fù)盤項(xiàng)目完整開發(fā)流程：頁面搭建、Web組件嵌入、交互功能實(shí)現(xiàn)、購物車拓展開發(fā)。3.重申重難點(diǎn)：$rawfile使用規(guī)范、runJavaScript與javaScriptProxy用法、通信功能調(diào)試要點(diǎn)。4.結(jié)合體育精神，強(qiáng)調(diào)嚴(yán)謹(jǐn)編碼、持續(xù)鉆研的職業(yè)素養(yǎng)。教師講解多媒體課件演示代碼回顧整理筆記引導(dǎo)創(chuàng)新課后作業(yè)完善課堂實(shí)訓(xùn)項(xiàng)目項(xiàng)目，獨(dú)立完成AI賦能拓展任務(wù)：進(jìn)一步實(shí)現(xiàn)購物車功能。用戶可以在購物車界面查看已添加的商品名稱與價(jià)格、自動計(jì)算優(yōu)惠金額、計(jì)算商品總價(jià)，以及清空購物車。教師講授多媒體布置作業(yè)提出要求《鴻蒙應(yīng)用開發(fā)項(xiàng)目式教程》課程教學(xué)單元設(shè)計(jì)項(xiàng)目6桌面計(jì)算器授課教師：授課班級:學(xué)時(shí)：8教學(xué)條件計(jì)算機(jī)實(shí)訓(xùn)室、DevEcoStudio開發(fā)工具、投影設(shè)備、廣播教學(xué)軟件教學(xué)素材教材《鴻蒙應(yīng)用開發(fā)項(xiàng)目式教程》、教學(xué)課件、實(shí)訓(xùn)項(xiàng)目單、案例源碼庫、微課視頻、教學(xué)網(wǎng)站教學(xué)目標(biāo)設(shè)計(jì)知識目標(biāo)：1．熟悉FormKit的服務(wù)卡片架構(gòu)、特征等2．掌握ArkTS卡片的創(chuàng)建方法3．掌握ArkTS卡片配置文件的結(jié)構(gòu)和作用4．掌握ArkTS卡片從創(chuàng)建到銷毀的完整生命周期流程技能目標(biāo)：能夠使用ArkTS卡片開發(fā)計(jì)算器卡片素質(zhì)目標(biāo)：1．培養(yǎng)工程化思維與規(guī)范意識2．具有職業(yè)責(zé)任感，強(qiáng)化質(zhì)量意識任務(wù)描述手機(jī)桌面計(jì)算器是日常高頻使用工具，本次任務(wù)要求基于鴻蒙ArkTS+ArkUI框架，開發(fā)一款桌面計(jì)算器應(yīng)用。需完成項(xiàng)目資源配置、計(jì)算器主界面搭建、四則運(yùn)算邏輯編碼、桌面ArkTS卡片開發(fā)、配置文件編寫、卡片生命周期管理，最終在預(yù)覽器和模擬器中調(diào)試運(yùn)行，實(shí)現(xiàn)計(jì)算器基礎(chǔ)運(yùn)算與桌面卡片復(fù)用功能。教學(xué)內(nèi)容1．鴻蒙項(xiàng)目目錄結(jié)構(gòu)認(rèn)知、字符串資源與應(yīng)用圖標(biāo)配置。2．ArkUI聲明式UI布局、狀態(tài)管理與按鈕組件開發(fā)。3．中綴表達(dá)式解析、調(diào)度場算法、后綴表達(dá)式運(yùn)算邏輯實(shí)現(xiàn)。4．計(jì)算器卡片界面復(fù)用開發(fā)與頁面代碼修改。5．module.json5、form_config.json卡片配置文件編寫。6．FormExtensionAbility卡片生命周期回調(diào)方法使用。7．應(yīng)用預(yù)覽器測試、模擬器功能測試與Bug調(diào)試。重點(diǎn)：掌握ArkUI界面開發(fā)、計(jì)算器運(yùn)算邏輯、ArkTS卡片配置文件編寫難點(diǎn)：調(diào)度場算法邏輯理解、卡片生命周期回調(diào)、組件功能復(fù)用任務(wù)分析與實(shí)現(xiàn)1.任務(wù)需求分析：開發(fā)帶桌面卡片的鴻蒙計(jì)算器。2.項(xiàng)目架構(gòu)設(shè)計(jì)：采用ArkUI前端展示+運(yùn)算算法+Form卡片擴(kuò)展Ability三層架構(gòu)，卡片復(fù)用主頁面代碼簡化開發(fā)。3.核心功能實(shí)現(xiàn)：借助FormExtensionAbility管理卡片生命周期，雙配置文件實(shí)現(xiàn)桌面卡片。

教學(xué)過程設(shè)計(jì)主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動問題引入手機(jī)桌面計(jì)算器如何開發(fā)？鴻蒙桌面卡片是什么？如何實(shí)現(xiàn)計(jì)算器功能與桌面卡片計(jì)算器？教師講授引導(dǎo)法多媒體教師：講解演示學(xué)生：觀察思考知識講解1.鴻蒙項(xiàng)目目錄結(jié)構(gòu)、字符串與圖標(biāo)資源配置；2.ArkUI聲明式布局、@State狀態(tài)管理、按鈕組件應(yīng)用；3.中綴轉(zhuǎn)后綴表達(dá)式、調(diào)度場算法原理；4.ArkTS卡片結(jié)構(gòu)、module與form配置文件作用；5.卡片生命周期7個(gè)核心回調(diào)函數(shù)功能。啟發(fā)講解討論歸納多媒體課件演示代碼投屏思考交流互動分組討論記錄筆記示范操作1.創(chuàng)建鴻蒙項(xiàng)目并配置string.json、應(yīng)用圖標(biāo)資源；2.編碼實(shí)現(xiàn)Index.ets計(jì)算器主界面布局與按鈕事件；3.講解運(yùn)算核心代碼、中綴轉(zhuǎn)后綴算法調(diào)試；4.開發(fā)CardCalculator.ets卡片界面、復(fù)用業(yè)務(wù)邏輯；5.編寫module.json5和form_config.json配置文件；6.編寫卡片生命周期代碼、預(yù)覽器與模擬器測試。問題引導(dǎo)操作演示分析歸納多媒體投屏DevEcoStudio實(shí)時(shí)演示觀摩思考?xì)w納總結(jié)實(shí)戰(zhàn)訓(xùn)練學(xué)生獨(dú)立完成完整實(shí)訓(xùn)任務(wù)：參照課本項(xiàng)目案例，獨(dú)立完成鴻蒙計(jì)算器全流程開發(fā)，完成界面搭建、運(yùn)算邏輯編碼、卡片配置、生命周期編寫，在預(yù)覽器和模擬器中運(yùn)行測試。動手實(shí)踐做中學(xué)DevEcoStudio真實(shí)開發(fā)環(huán)境實(shí)踐操作查閱資料巡視指導(dǎo)評估討論1.評估學(xué)生項(xiàng)目完成進(jìn)度與代碼規(guī)范；2.展示標(biāo)準(zhǔn)參考源碼與實(shí)現(xiàn)方案；3.抽取學(xué)生作品演示運(yùn)行效果、集體點(diǎn)評；4.從功能實(shí)現(xiàn)、代碼規(guī)范、界面布局進(jìn)行綜合考核。教師啟發(fā)討論歸納分?jǐn)?shù)激勵(lì)實(shí)訓(xùn)項(xiàng)目單作品投屏思考結(jié)果演示課堂總結(jié)1.ArkUI聲明式開發(fā)是鴻蒙界面開發(fā)核心，狀態(tài)管理是交互基礎(chǔ)；2.調(diào)度場算法是實(shí)現(xiàn)計(jì)算器優(yōu)先級運(yùn)算的關(guān)鍵，需理解棧的使用邏輯；3.ArkTS卡片支持代碼復(fù)用，只需修改入口組件即可共享業(yè)務(wù)邏輯；4.module.js