鴻蒙應用開發項目式教程（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.新建鴻蒙項目，