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）。素質(zhì)目標：1.培養(yǎng)媒體資源管理能力（版權(quán)意識/存儲規(guī)范）。2.強化用戶體驗思維（加載優(yōu)化/交互反饋）。教學重點1.Image的objectFit六種填充策略（表6.7）。2.Video控制器方法與事件鏈（表6.8-6.9）。教學難點1.媒體庫權(quán)限申請流程（案例6-16/6-21）。2.視頻試看與會員狀態(tài)聯(lián)動（案例6-22）。教學過程（主要教學內(nèi)容、教學方式方法、教學時間分配等）主要教學內(nèi)容教學方式、方法手段等（教師活動/學生活動）教學用時(分鐘)一、導入新課二、Image組件精講三、Video組件突破四、總結(jié)提升1.展示美團電影詳情頁（圖6.50）：-圖片瀑布流-視頻預告片2.提問：“如何高效加載與優(yōu)化多媒體資源？”。（多媒體展示，情境設問）1.四類資源加載實戰(zhàn)：-本地圖片：路徑訪問限制-Resource圖片：$r('app.media.xx')-媒體庫圖片：PhotoViewPicker流程（案例6-16）-網(wǎng)絡圖片：權(quán)限聲明+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)絡視頻：權(quán)限+URL2.播放控制四要素：-控制器方法：start()/pause()/setCurrentTime()-關(guān)鍵事件：onUpdate/onPrepared/onFinish（表6.9）3.商業(yè)場景實戰(zhàn)：-試看邏輯：onUpdate事件+setCurrentTime()-會員狀態(tài)持久化（案例6-22）（任務驅(qū)動法：分步實現(xiàn)視頻控制器，調(diào)試試看彈窗邏輯）1.組件選型指南：-靜態(tài)視覺→Image-動態(tài)內(nèi)容→Video2.避坑清單：-網(wǎng)絡資源必申請權(quán)限-大視頻預加載禁用autoPlay5'35'35'5’課程思政教學設計1.隱私保護：媒體庫資源訪問需用戶授權(quán)。2.用戶關(guān)懷：加載占位圖減少焦慮感。教學手段教具極域課堂教學課后作業(yè)與思考題1.超星在線作業(yè)。2.基礎作業(yè)：（1）修改案例6-17：對比sourceSize在不同尺寸圖片下的內(nèi)存占用。（2）為案例6-22添加“試看倒計時”提示條?？偨Y(jié)分析通過本次課，學生成功掌握多媒體資源加載與優(yōu)化技術(shù)，能獨立實現(xiàn)商業(yè)級圖片/視頻功能；通過會員狀態(tài)持久化等實戰(zhàn)訓練，深化了用戶體驗與數(shù)據(jù)安全認知，為多媒體應用開發(fā)打下堅實基礎。教學詳案（附頁）一、導入新課（5分鐘）1.情境展示（1）教師操作投屏展示美團電影詳情頁（教材圖6.50），高亮標注：圖片瀑布流（多規(guī)格圖片混合布局）。視頻預告片（試看功能+會員權(quán)限控制）。（2）學生活動觀察界面交互特點，思考技術(shù)實現(xiàn)路徑。2.問題驅(qū)動關(guān)鍵提問：“當用戶滑動頁面時，為什么有的圖片加載快、有的加載慢？視頻試看功能如何實現(xiàn)時間精準控制？”。引導方向：多媒體資源類型差異→加載策略優(yōu)化→權(quán)限與狀態(tài)管理。二、Image組件精講（35分鐘）階段1：資源加載四象限（12分鐘）1.對比演示類型代碼示例關(guān)鍵注意點本地圖片Image('pages/images/book.png')跨模塊訪問限制Resource圖片$r('app.media.icon')rawfile目錄需用$rawfile訪問媒體庫圖片案例6-16代碼逐行解析PhotoViewPicker異步流程網(wǎng)絡圖片encodeURI('http://中文字符.jpg')權(quán)限聲明+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ù)記錄：內(nèi)存占用對比（DevEcoStudioProfiler工具）。渲染耗時（onComplete事件打點計算）。2.視覺控制實驗學生修改案例6-19，測試objectFit六種模式對以下圖片的影響。階段3：高級特性拓展（8分鐘）1.動態(tài)調(diào)色演示案例6-20：矢量圖標換膚（fillColor動態(tài)綁定狀態(tài)變量）。光柵圖黑白模式（renderMode=Template適配暗黑主題）。2.錯誤防御模擬網(wǎng)絡抖動：強制觸發(fā)onError。演示降級方案（本地緩存圖片+Toast提示）。三、Video組件突破（40分鐘）??階段1：播放控制四要素（20分鐘）1.控制器實驗//學生操作區(qū)Button('跳轉(zhuǎn)試看').onClick(()=>{videoController.setCurrentTime(60)//跳轉(zhuǎn)1分鐘位置videoController.start()})觀察指標：onSeeked與onUpdate事件觸發(fā)順序。進度條拖拽時的onSeeking回調(diào)頻率。??2.事件鏈圖譜階段2：商業(yè)場景實戰(zhàn)（20分鐘）1.試看功能拆解關(guān)鍵代碼段：//案例6-22核心邏輯onUpdate(event){if(!isMember&&event.time>=12){controller.setCurrentTime(12)showPaymentDialog()//持久化狀態(tài)變更}}調(diào)試技巧：修改freeTime快速驗證邏輯。使用PersistenceV2.keys()檢查持久化數(shù)據(jù)。2.擴展挑戰(zhàn)在試看彈窗添加倒計時進度條（使用Progress組件）。實現(xiàn)“續(xù)看”功能（記錄退出時的播放位置）。四、總結(jié)提升（10分鐘）1.組件選型決策樹Image├─要求高性能→sourceSize+syncLoad└─需要動態(tài)配色→fillColor/renderModeVideo├─簡單播放→基礎屬性配置└─商業(yè)場景→控制器+事件聯(lián)動2