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