XX學院教案課程HarmonyOS鴻蒙應用開發(fā)課次21課題Image組件、Video組件班級授課地點實到人數(shù)授課時間備課時間課型□理論□實踐√理實一體教學目標知識目標：1.掌握Image組件的四類資源加載方式與性能優(yōu)化策略。2.理解Video組件的播放控制與事件響應機制。能力目標：1.能實現(xiàn)媒體庫圖片/視頻加載（案例6-16/6-21）。2.能配置圖片自適應與視頻試看邏輯（案例6-19/6-22）。素質目標：1.培養(yǎng)媒體資源管理能力（版權意識/存儲規(guī)范）。2.強化用戶體驗思維（加載優(yōu)化/交互反饋）。教學重點1.Image的objectFit六種填充策略（表6.7）。2.Video控制器方法與事件鏈（表6.8-6.9）。教學難點1.媒體庫權限申請流程（案例6-16/6-21）。2.視頻試看與會員狀態(tài)聯(lián)動（案例6-22）。教學過程（主要教學內容、教學方式方法、教學時間分配等）主要教學內容教學方式、方法手段等（教師活動/學生活動）教學用時(分鐘)一、導入新課二、Image組件精講三、Video組件突破四、總結提升1.展示美團電影詳情頁（圖6.50）：-圖片瀑布流-視頻預告片2.提問：“如何高效加載與優(yōu)化多媒體資源？”。（多媒體展示，情境設問）1.四類資源加載實戰(zhàn)：-本地圖片：路徑訪問限制-Resource圖片：$r('app.media.xx')-媒體庫圖片：PhotoViewPicker流程（案例6-16）-網(wǎng)絡圖片：權限聲明+URL編碼2.性能優(yōu)化三劍客：-占位圖（alt屬性）-降采樣（sourceSize屬性/案例6-17）-同步/異步加載（syncLoad屬性）3.視覺控制雙核心：-6種objectFit效果對比（案例6-19/圖6.59）-矢量圖填色（fillColor）vs光柵圖濾鏡（renderMode）（案例6-20）（對比演示法：同步/異步加載耗時對比，objectFit六模式實機演示）1.視頻加載全流程：-本地視頻：$rawfile('video.mp4')-媒體庫視頻：PhotoViewPicker（案例6-21）-網(wǎng)絡視頻：權限+URL2.播放控制四要素：-控制器方法：start()/pause()/setCurrentTime()-關鍵事件：onUpdate/onPrepared/onFinish（表6.9）3.商業(yè)場景實戰(zhàn)：-試看邏輯：onUpdate事件+setCurrentTime()-會員狀態(tài)持久化（案例6-22）（任務驅動法：分步實現(xiàn)視頻控制器，調試試看彈窗邏輯）1.組件選型指南：-靜態(tài)視覺→Image-動態(tài)內容→Video2.避坑清單：-網(wǎng)絡資源必申請權限-大視頻預加載禁用autoPlay5'35'35'5’課程思政教學設計1.隱私保護：媒體庫資源訪問需用戶授權。2.用戶關懷：加載占位圖減少焦慮感。教學手段教具極域課堂教學課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎作業(yè)：（1）修改案例6-17：對比sourceSize在不同尺寸圖片下的內存占用。（2）為案例6-22添加“試看倒計時”提示條?？偨Y分析通過本次課，學生成功掌握多媒體資源加載與優(yōu)化技術，能獨立實現(xiàn)商業(yè)級圖片/視頻功能；通過會員狀態(tài)持久化等實戰(zhàn)訓練，深化了用戶體驗與數(shù)據(jù)安全認知，為多媒體應用開發(fā)打下堅實基礎。教學詳案（附頁）一、導入新課（5分鐘）1.情境展示（1）教師操作投屏展示美團電影詳情頁（教材圖6.50），高亮標注：圖片瀑布流（多規(guī)格圖片混合布局）。視頻預告片（試看功能+會員權限控制）。（2）學生活動觀察界面交互特點，思考技術實現(xiàn)路徑。2.問題驅動關鍵提問：“當用戶滑動頁面時，為什么有的圖片加載快、有的加載慢？視頻試看功能如何實現(xiàn)時間精準控制？”。引導方向：多媒體資源類型差異→加載策略優(yōu)化→權限與狀態(tài)管理。二、Image組件精講（35分鐘）階段1：資源加載四象限（12分鐘）1.對比演示類型代碼示例關鍵注意點本地圖片Image('pages/images/book.png')跨模塊訪問限制Resource圖片$r('app.media.icon')rawfile目錄需用$rawfile訪問媒體庫圖片案例6-16代碼逐行解析PhotoViewPicker異步流程網(wǎng)絡圖片encodeURI('http://中文字符.jpg')權限聲明+URL編碼2.陷阱預警網(wǎng)絡圖片未聲明ohos.permission.INTERNET。SVG圖片使用fillColor失效（需確認資源類型）。階段2：性能優(yōu)化三劍客（15分鐘）1.實戰(zhàn)對比//任務A：無優(yōu)化加載Image('https://large-image.jpg')//任務B：優(yōu)化加載Image('https://large-image.jpg').alt($r('app.media.placeholder')).sourceSize({width:100,height:100}).syncLoad(false)數(shù)據(jù)記錄：內存占用對比（DevEcoStudioProfiler工具）。渲染耗時（onComplete事件打點計算）。2.視覺控制實驗學生修改案例6-19，測試objectFit六種模式對以下圖片的影響。階段3：高級特性拓展（8分鐘）1.動態(tài)調色演示案例6-20：矢量圖標換膚（fillColor動態(tài)綁定狀態(tài)變量）。光柵圖黑白模式（renderMode=Template適配暗黑主題）。2.錯誤防御模擬網(wǎng)絡抖動：強制觸發(fā)onError。演示降級方案（本地緩存圖片+Toast提示）。三、Video組件突破（40分鐘）??階段1：播放控制四要素（20分鐘）1.控制器實驗//學生操作區(qū)Button('跳轉試看').onClick(()=>{videoController.setCurrentTime(60)//跳轉1分鐘位置videoController.start()})觀察指標：onSeeked與onUpdate事件觸發(fā)順序。進度條拖拽時的onSeeking回調頻率。??2.事件鏈圖譜階段2：商業(yè)場景實戰(zhàn)（20分鐘）1.試看功能拆解關鍵代碼段：//案例6-22核心邏輯onUpdate(event){if(!isMember&&event.time>=12){controller.setCurrentTime(12)showPaymentDialog()//持久化狀態(tài)變更}}調試技巧：修改freeTime快速驗證邏輯。使用PersistenceV2.keys()檢查持久化數(shù)據(jù)。2.擴展挑戰(zhàn)在試看彈窗添加倒計時進度條（使用Progress組件）。實現(xiàn)“續(xù)看”功能（記錄退出時的播放位置）。四、總結提升（10分鐘）1.組件選型決策樹Image├─要求高性能→sourceSize+syncLoad└─需要動態(tài)配色→fillColor/renderModeVideo├─簡單播放→基礎屬性配置└─商業(yè)場景→控制器+事件聯(lián)動2.避坑清單（1）必查項：網(wǎng)絡權限聲明（manifest文件）。媒體庫權限動態(tài)申請（requestPermissionsFromUser）。（2）性能紅線：禁止大圖無壓縮直接加載。視頻autoPlay在列表頁禁用。3.課程思政點睛版權意識：演示如何添加水?。↖mage疊加布局）。用戶關懷：分析美團占位圖設計心理學依據(jù)。XX學院教案課程HarmonyOS鴻蒙應用開發(fā)課次22課題按鈕組件、選擇組件及綜合案例：仿美團App消息列表頁面班級授課地點實到人數(shù)授課時間備課時間課型□理論□實踐√理實一體教學目標知識目標：1.掌握Button、Toggle、Radio、Checkbox組件的接口和使用方法。2.理解組件狀態(tài)管理的實現(xiàn)原理。3.熟悉美團App中交互組件的應用場景。能力目標：1.能夠實現(xiàn)多種樣式按鈕（圓角/懸浮/復合按鈕）。2.能夠開發(fā)類似美團的消息列表和篩選功能。3.掌握LazyForEach優(yōu)化列表性能的方法。素質目標：1.培養(yǎng)精細化UI設計的工匠精神。2.樹立組件化開發(fā)思維。3.提升解決實際業(yè)務問題的能力。教學重點1.Button組件的樣式定制方法。2.Toggle組件的狀態(tài)管理。3.Radio/Checkbox的組應用邏輯。教學難點1.復合按鈕的子組件嵌套。2.批量操作時的狀態(tài)同步問題。3.LazyForEach的性能優(yōu)化原理。教學過程（主要教學內容、教學方式方法、教學時間分配等）主要教學內容教學方式、方法手段等（教師活動/學生活動）教學用時(分鐘)一、案例導入二、Button組件三、Toggle組件四、Radio和Checkbox五、綜合案例1.展示美團App頁面截圖，分析按鈕組件應用場景。（多媒體展示，案例分析法）1.接口參數(shù)解析。2.圓角/播放/點贊按鈕實現(xiàn)。3.懸浮按鈕開發(fā)要點。（代碼解析，任務驅動法）1.美團生鮮篩選功能還原。2.狀態(tài)同步問題解決方案。3.setTimeout異步處理技巧。（錯誤示范法，小組討論）1.單選框組實現(xiàn)國家選擇。2.復選框實現(xiàn)多選功能。3.自定義選中樣式開發(fā)。（對比教學法：教師講解，學生對比實現(xiàn)）1.消息列表頁面開發(fā)。2.左滑刪除功能實現(xiàn)。3.Badge未讀標記添加。（項目教學法）5'20'20'20’15’課程思政教學設計1.通過還原美團真實案例，培養(yǎng)解決實際問題的能力。2.在狀態(tài)同步問題解決中強調嚴謹?shù)木幊虘B(tài)度。3.通過組件復用實踐倡導高效開發(fā)理念。教學手段教具極域課堂教學課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎作業(yè)：（1）實現(xiàn)包含三種樣式的按鈕頁面。（2）完成類似美團的標簽篩選功能。總結分析本次教學單元取得了顯著成效，學生們通過實踐掌握了HarmonyOS核心交互組件的開發(fā)技能。在Button組件學習中，實現(xiàn)了圓角按鈕、播放按鈕和懸浮按鈕等多種樣式。Toggle組件教學中，通過解決狀態(tài)同步問題，同學們不僅理解了autoOperate防抖機制，更培養(yǎng)了嚴謹?shù)木幊趟季S。綜合實戰(zhàn)環(huán)節(jié)，LazyForEach優(yōu)化和左滑刪除功能的實現(xiàn)展現(xiàn)了將理論轉化為實踐的能力。這些成果為后續(xù)分布式應用開發(fā)奠定了堅實基礎，充分體現(xiàn)了“學以致用”的教學理念。教學詳案（附頁）一、案例導入（5分鐘）1.情境創(chuàng)設（2分鐘）（1）教師展示美團App首頁截圖（圖6.65）和生鮮篩選頁面（圖6.68），提問：“大家注意到這些紅色【立即購買】按鈕和標簽切換控件了嗎？它們是如何引導用戶操作的？”（2）學生觀察后回答：按鈕顏色醒目、標簽分組明確、點擊有反饋效果。2.案例解析（2分鐘）教師分析美團案例中的交互邏輯：按鈕組件：承擔核心操作（如“立即購買”）。Toggle組件：實現(xiàn)二元狀態(tài)切換（如“24小時營業(yè)”篩選）。Radio組件：處理互斥選擇（如紅包類型單選）。Checkbox組件：支持多選（如商品屬性篩選）。3.目標引出（1分鐘）教師明確：“今天我們就通過還原這些真實場景，學習HarmonyOS四大交互組件的開發(fā)?！倍?、Button組件（20分鐘）1.組件解析（5分鐘）教師講解Button接口：Button(label?:ResourceStr,options?:{type?:ButtonType,stateEffect?:boolean})演示三種type的區(qū)別（Normal矩形/Capsule膠囊形/Circle圓形）。2.樣式實戰(zhàn)（10分鐘）任務1：圓角按鈕（3分鐘）教師演示關鍵代碼：Button('圓角按鈕',{type:ButtonType.Normal}).borderRadius(9)//關鍵屬性強調：需同時設置type為Normal才能生效。任務2：復合按鈕（4分鐘）播放按鈕（Circle類型+Image子組件）。點贊按鈕（Capsule類型+Row子組件嵌套Symbol和Text）。教師巡視指導子組件嵌套常見錯誤。任務3：懸浮按鈕（3分鐘）教師解析：.shadow({radius:20,color:Color.Blue,offsetX:5,offsetY:10}).position({right:10,top:180})//絕對定位關鍵代碼3.難點突破（5分鐘）（1）通過錯誤示范展示同時設置label和子組件導致的沖突。未設置容器組件時的布局錯亂。（2）總結開發(fā)規(guī)范復雜按鈕必須用容器組件嵌套。避免直接修改Button默認樣式。三、Toggle組件（20分鐘）1.功能演示（3分鐘）教師運行案例6-24，展示生鮮篩選效果：點擊標簽時切換選中狀態(tài)?！爸刂谩卑粹o批量清除選中。2.狀態(tài)管理（7分鐘）分析數(shù)據(jù)綁定：@Stateprivatefilters?:Record<string,Array<SelectVO>>重點講解autoOperate防抖機制：this.autoOperate=true//標記批量操作setTimeout(()=>{this.autoOperate=false},500)//延遲恢復3.錯誤排查（5分鐘）故意刪除autoOperate相關代碼，演示無限渲染錯誤。引導學生思考：為什么直接修改select數(shù)組會導致循環(huán)渲染？4.拓展思考（5分鐘）分組討論：除了setTimeout，還有哪些方案可以解決狀態(tài)同步問題？教師補充：可使用@Watch監(jiān)聽器或狀態(tài)管理庫。四、Radio和Checkbox（20分鐘）1.對比教學（5分鐘）教師出示對比表：組件特點美團應用場景如何分組Ra