XX學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開發(fā)課次10課題ArkUI核心概念以及像素單位與適配班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握ArkUI聲明式開發(fā)范式特性。2.理解裝飾器作用。3.掌握像素單位換算原理。能力目標(biāo)：1.使用聲明式語法創(chuàng)建組件。2.運(yùn)用容器組件實(shí)現(xiàn)布局。3.正確選用像素單位。素質(zhì)目標(biāo)：1.培養(yǎng)“靈活適配”工程思維。2.建立多設(shè)備開發(fā)全局意識(shí)。教學(xué)重點(diǎn)1.聲明式UI語法結(jié)構(gòu)。2.容器組件嵌套使用。3.vp單位適配原理。教學(xué)難點(diǎn)1.像素密度計(jì)算。2.狀態(tài)管理機(jī)制。教學(xué)過程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、ArkUI核心概念二、像素單位與適配三、案例實(shí)踐四、總結(jié)提升1.解析四大特性（極簡(jiǎn)/組件/狀態(tài)管理/多設(shè)備）。2.“你好鴻蒙”案例解析（圖4.3-4.4）。3.演示組件創(chuàng)建與事件配置。（任務(wù)驅(qū)動(dòng)法，代碼實(shí)時(shí)演示）1.對(duì)比不同ppi設(shè)備顯示效果（圖4.7）2.Mate60Pro像素密度計(jì)算（公式4.1）3.vp/fp適配原理（公式4.2）。（問題導(dǎo)向法，公式推導(dǎo)）1.復(fù)現(xiàn)“按鈕點(diǎn)擊事件”。2.Column+Row布局實(shí)現(xiàn)（圖4.5）。3.px/vp效果對(duì)比。（小組協(xié)作，教師巡視）1.知識(shí)體系梳理。2.“靈活適配”思政點(diǎn)睛。（歸納總結(jié)法）25'20'25'10'課程思政教學(xué)設(shè)計(jì)1.科技自強(qiáng)：通過ArkUI多設(shè)備適配方案，強(qiáng)調(diào)核心技術(shù)自主創(chuàng)新價(jià)值。2.工匠精神：在像素單位配置環(huán)節(jié)強(qiáng)調(diào)細(xì)節(jié)精度對(duì)用戶體驗(yàn)的影響。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎(chǔ)作業(yè)：（1）繪制ArkUI語法思維導(dǎo)圖。（2）計(jì)算投影儀像素密度（1920×1080/100英寸）。3.提升作業(yè)：實(shí)現(xiàn)Text組件的多語言切換（中/英/日）?？偨Y(jié)分析本課緊扣教材知識(shí)脈絡(luò)，采用“特性剖析→像素推演→案例實(shí)現(xiàn)→適配升華”四階教學(xué)模式，以你好鴻蒙交互案例、裝飾器結(jié)構(gòu)解析、Column/Row容器嵌套、Mate60Pro像素密度計(jì)算、vp/px對(duì)比實(shí)驗(yàn)五大教材原生案例貫穿全程。教學(xué)聚焦三大核心突破：通過公式推演具象化像素密度與vp自適應(yīng)原理的數(shù)學(xué)本質(zhì)；借助鏈?zhǔn)秸{(diào)用實(shí)操?gòu)?qiáng)化屬性配置（fontSize/width）與事件綁定（onClick）的肌肉記憶；依托多設(shè)備預(yù)覽機(jī)制實(shí)證HarmonyOS“一次開發(fā)，多端部署”的工程價(jià)值。深度融合教材“因地制宜，因時(shí)而化”的編程哲學(xué)，實(shí)現(xiàn)技術(shù)能力與工程思維的同步建構(gòu)。教學(xué)詳案（附頁）一、ArkUI核心概念（25分鐘）1.特性解析（10分鐘）【教師活動(dòng)】展示對(duì)比圖：傳統(tǒng)UI開發(fā)vsArkUI聲明式開發(fā)ArkUI四大特性：(1)極簡(jiǎn)語法：展示“你好鴻蒙”案例代碼片段（教材圖4.4）@Entry@ComponentstructIndex{@Statemessage:string='你好，鴻蒙!'build(){Column(){Text(this.message).fontSize(50)Button('切換語言').onClick(()=>{this.message='HelloHarmony!'})}}}(2)組件系統(tǒng)：手機(jī)/手表Button組件多態(tài)效果。(3)狀態(tài)管理：@State狀態(tài)變量。(4)多設(shè)備支持：同一代碼在手機(jī)/平板/車機(jī)上的運(yùn)行截圖。【學(xué)生活動(dòng)】分組討論：找出代碼中三個(gè)裝飾器的作用。隨堂測(cè)試：判斷@Component能否省略。2.語法結(jié)構(gòu)剖析（8分鐘）【教師演示】分解組件樹結(jié)構(gòu)（教材圖4.5）：Column(){Row(){Text('橫向')Text('橫向')}.width('100%').justifyContent(FlexAlign.SpaceAround)Text('豎向')Button(){Text('按鈕').backgroundColor(Color.Pink)}}鏈?zhǔn)秸{(diào)用規(guī)范：不推薦示范：Text('test').fontSize(20).fontColor(Color.Red).onClick(()=>{})推薦格式：Text('test').fontSize(20).fontColor(Color.Red).onClick(()=>{})3.裝飾器深度解讀（7分鐘）對(duì)比實(shí)驗(yàn)：刪除@State觀察UI不更新的現(xiàn)象。移除@Entry導(dǎo)致預(yù)覽失敗的情況?，F(xiàn)場(chǎng)添加@Styles樣式裝飾器并使用它：@StylesfunctionfancyText(){.fontColor(Color.Pink).fontSize(32)}二、像素單位與適配（20分鐘）1.像素密度計(jì)算（8分鐘）【教師演示】推導(dǎo)Mate60Pro像素密度（教材公式4.1）：ppi=√(12602+27202)/6.82≈440ppi對(duì)比實(shí)驗(yàn)：展示100px正方形在440ppivs160ppi設(shè)備上的實(shí)際尺寸差異【學(xué)生實(shí)踐】計(jì)算教室投影儀像素密度（1920×1080/100英寸）。2.適配原理（7分鐘）vp換算公式（教材4.2）：px=(vp?ppi)/1603.單位選擇指南（5分鐘）組件尺寸：vp（不寫單位默認(rèn)為vp）字體：fp需要固定物理尺寸：px三、案例實(shí)踐（25分鐘）1.按鈕交互實(shí)現(xiàn)（15分鐘）實(shí)現(xiàn)循環(huán)切換（中→英→日→中...）privatelanguages=['你好','Hello','こんにちは']privateindex:number=0Button('切換').onClick(()=>{this.index=(this.index+1)%3this.message=this.languages[this.index]})2.單位對(duì)比實(shí)驗(yàn)（10分鐘）分別使用px和vp單位布局。四、總結(jié)提升（10分鐘）1.知識(shí)圖譜（5分鐘）2.工程思維升華（5分鐘）分組討論：HarmonyOS統(tǒng)一適配方案的技術(shù)價(jià)值。金句點(diǎn)睛：“代碼中的每個(gè)vp單位，都是開發(fā)者對(duì)不同設(shè)備的尊重；每次狀態(tài)管理，都是對(duì)用戶體驗(yàn)的鄭重承諾?！盭X學(xué)院教案課程HarmonyOS鴻蒙應(yīng)用開發(fā)課次11課題資源的管理和訪問及綜合案例：字號(hào)字體適老化班級(jí)授課地點(diǎn)實(shí)到人數(shù)授課時(shí)間備課時(shí)間課型□理論□實(shí)踐√理實(shí)一體教學(xué)目標(biāo)知識(shí)目標(biāo)：1.掌握資源目錄結(jié)構(gòu)（base，dark，rawfile）。2.理解資源訪問方法（$r，$rawfile）。3.熟悉系統(tǒng)資源調(diào)用流程。能力目標(biāo)：1.能配置多類型資源文件（color，string，media）。2.能實(shí)現(xiàn)字體注冊(cè)與動(dòng)態(tài)切換。3.能獨(dú)立完成適老化案例開發(fā)。素質(zhì)目標(biāo)：1.培養(yǎng)資源規(guī)范化管理意識(shí)。2.踐行“尊老敬賢”的適老化設(shè)計(jì)理念。教學(xué)重點(diǎn)1.資源訪問語法（$r(''))。2.字體注冊(cè)機(jī)制（registerFont）。3.狀態(tài)變量驅(qū)動(dòng)UI更新（@State）。教學(xué)難點(diǎn)1.rawfile與media資源路徑差異。2.系統(tǒng)矢量圖標(biāo)調(diào)用（sys.symbol）。3.字體縮放與切換的聯(lián)動(dòng)邏輯。教學(xué)過程（主要教學(xué)內(nèi)容、教學(xué)方式方法、教學(xué)時(shí)間分配等）主要教學(xué)內(nèi)容教學(xué)方式、方法手段等（教師活動(dòng)/學(xué)生活動(dòng)）教學(xué)用時(shí)(分鐘)一、資源結(jié)構(gòu)解析二、資源訪問實(shí)戰(zhàn)三、適老化案例實(shí)現(xiàn)四、總結(jié)提升1.展示entry模塊與AppScope資源層級(jí)（圖4.9-4.10）。2.解析三類資源目錄：-base（元素/媒體/配置）-dark（深色模式）-rawfile（原始資源）。（圖示分析法，對(duì)比講解）1.演示$r訪問：-Text($r('app.string.str_say_hello'))-Image($r('app.media.app_icon'))2.對(duì)比$rawfile調(diào)用：-Image($rawfile('book_shelf.png'))3.系統(tǒng)資源調(diào)用：-SymbolGlyph($r('sys.symbol.message'))。（代碼演示法，錯(cuò)誤分析法）1.字體注冊(cè)：-font.registerFont綁定TTF文件（圖4.14）2.動(dòng)態(tài)控制：-Slider聯(lián)動(dòng)@Statescales-Toggle切換@StatefontFamily3.效果驗(yàn)證：-字號(hào)縮放（1-2倍）-方正靜蕾體切換。（任務(wù)驅(qū)動(dòng)法，分段調(diào)試）1.資源訪問口訣：“app類型名，rawfile全路徑”。2.呼應(yīng)“尊老敬賢”編程育人主題。（歸納總結(jié)法）15'20'35'10'課程思政教學(xué)設(shè)計(jì)1.尊老敬賢：通過適老化案例強(qiáng)調(diào)數(shù)字包容的社會(huì)責(zé)任。2.工匠精神：在資源路徑配置環(huán)節(jié)強(qiáng)化規(guī)范操作（禁用中文及"-"字符）。教學(xué)手段教具極域課堂教學(xué)課后作業(yè)與思考題1.超星在線作業(yè)2.基礎(chǔ)作業(yè)：（1）創(chuàng)建深色模式color.json，配置背景色和字體顏色，并驗(yàn)證效果?？偨Y(jié)分析本課緊扣教材體系，采用“結(jié)構(gòu)解析→訪問訓(xùn)練→案例實(shí)現(xiàn)→思政融合”四階推進(jìn)模式，以資源層級(jí)圖示、訪問語法對(duì)照（$r/$rawfile）、系統(tǒng)圖標(biāo)調(diào)用、字體注冊(cè)流程、適老化案例五大教材核心模塊構(gòu)建教學(xué)閉環(huán)。實(shí)施過程突出三大關(guān)鍵行動(dòng)：通過目錄對(duì)比實(shí)驗(yàn)具象化base/dark/rawfile資源管理差異（強(qiáng)化表4.2規(guī)范）。借助鏈?zhǔn)秸{(diào)用演練掌握Text($r('app.string.str_say_hello'))等資源訪問范式依托FontDemo案例實(shí)現(xiàn)字體縮放（Slider+@State）與切換（Toggle+registerFont）的動(dòng)態(tài)控制。深度融合教材“尊老敬賢，與時(shí)俱進(jìn)”的編程育人理念，在技術(shù)實(shí)現(xiàn)中踐行數(shù)字包容的社會(huì)責(zé)任。教學(xué)詳案（附頁）一、資源結(jié)構(gòu)解析（15分鐘）1.資源層級(jí)體系圖示分析展示圖4.9（entry模塊資源）與圖4.10（AppScope資源）對(duì)比圖模塊級(jí)資源（如entry）僅限本模塊使用。應(yīng)用級(jí)資源（AppScope）全局可用。用樹形圖標(biāo)注三類核心目錄：resources/├──base/#基礎(chǔ)資源（必選）├──dark/#深色模式資源（可選）└──rawfile/#原始資源（保持原格式）2.基礎(chǔ)資源規(guī)范詳解對(duì)照表4.2講解。element文件夾：演示創(chuàng)建color.json規(guī)范代碼：{"name":"light_blue","value":"#63B8FF"}強(qiáng)調(diào)命名禁忌：禁用中文和連字符（如"背景色"或"text-color"）media文件夾：展示圖片/音頻文件存放示例（如splash.png）profile文件夾：示例env_profile.json環(huán)境配置文件3.深色模式與原始資源特性dark目錄：對(duì)比演示color.json在base/dark下的差異值//base/color.json{"name":"bg_color","value":"#FFFFFF"}//dark/color.json{"name":"bg_color","value":"#000000"}rawfile目錄：演示存放TTF字體文件（如方正靜蕾體.ttf）重點(diǎn)說明：該目錄文件不編譯，$rawfile訪問需完整路徑訪問。二、資源訪問實(shí)戰(zhàn)（20分鐘）1.應(yīng)用資源訪問演練（1）語法對(duì)比類型語法示例適用場(chǎng)景編譯型資源$r('app.string.str_say_hello')base目錄下JSON資源原始資源$rawfile('font/方正靜蕾體.ttf')rawfile目錄文件（2）代碼練習(xí)：//鏈?zhǔn)秸{(diào)用示例Text($r('app.string.str_say_hello')).fontColor($r('app.color.light_blue')).fontSize($r('app.float.fs_30'))//原始資源調(diào)用Image($rawfile('book_shelf.png')).width(90)2.系統(tǒng)資源調(diào)用訪問鴻蒙圖標(biāo)庫(kù)（圖4.13）查找sys.symbol.message代碼實(shí)現(xiàn)：SymbolGlyph($r('sys.symbol.message')).fontSize(80).fontColor($r('sys.color.ohos_id_color_subtitle'))3.糾錯(cuò)訓(xùn)練故意設(shè)置錯(cuò)誤案例：錯(cuò)誤1：$r('app.media.背景圖')（含中文）錯(cuò)誤2：$rawfile('../external/image.png')（路徑錯(cuò)誤）三、適老化案例實(shí)現(xiàn)（35分鐘）1.字體注冊(cè)流程關(guān)鍵代碼解析：//在aboutToAppear生命周期注冊(cè)字體font.registerFont({familyName:'fzlt',//字體別名familySrc:$rawfile('font/方正靜蕾體.