《微信小程序項(xiàng)目實(shí)戰(zhàn)》課件-CORE04

keepFit健身音樂專區(qū)模塊延遲符項(xiàng)目四企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01學(xué)習(xí)目標(biāo)02學(xué)習(xí)路徑03任務(wù)描述04任務(wù)技能05任務(wù)實(shí)施06任務(wù)總結(jié)01學(xué)習(xí)目標(biāo)延遲符

學(xué)習(xí)目標(biāo)010203了解小程序媒體組件應(yīng)用范圍掌握小程序頁面渲染的方式掌握小程序媒體組件學(xué)習(xí)目標(biāo)通過實(shí)現(xiàn)keepFit健身音樂模塊，了解微信小程序媒體組件在音樂專區(qū)模塊的應(yīng)用，學(xué)習(xí)小程序中頁面渲染、引入其他樣式文件、媒體組件及相關(guān)的頁面事件的相關(guān)知識，掌握小程序中媒體組件的具體應(yīng)用，具有使用本項(xiàng)目所學(xué)知識制作出相關(guān)的媒體組件界面。在任務(wù)實(shí)現(xiàn)過程中：04具有制作出音頻、視頻界面的能力企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）02學(xué)習(xí)路徑

學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03任務(wù)描述

任務(wù)描述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）1功能描述2基本框架3情景導(dǎo)入

情境導(dǎo)入常聽音樂可以使人消除工作緊張、減輕生活壓力，Pierre覺得這也是一種不錯(cuò)的休息放松方式，因此，經(jīng)團(tuán)隊(duì)討論，為keepFit健身添加了音樂專區(qū)。在這里，用戶可以選擇適合自己健身項(xiàng)目的音樂，一邊聽音樂，一邊做練習(xí)。當(dāng)練習(xí)完畢后，也可選擇舒緩的音樂進(jìn)行身心放松。本項(xiàng)目主要通過keepFit健身音樂專區(qū)來學(xué)習(xí)微信小程序的頁面渲染與媒體組件。企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

功能描述情境入01使用wx:for進(jìn)行數(shù)據(jù)的遍歷01020304使用audio組件實(shí)現(xiàn)音頻的播放使用image組件進(jìn)行圖片的展示使用import與include進(jìn)行模板的引入企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）

基本框架企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）04任務(wù)技能任務(wù)技能頁面渲染頁面文件引用媒體組件頁面事件

任務(wù)技能企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）列表渲染1條件渲染2在組件上可以使用wx:for控制屬性對列表進(jìn)行渲染，wx:for有兩種使用方式，分別是：直接使用通過wx:for-item指定數(shù)組當(dāng)前元素的變量名，wx:for-index指定數(shù)組當(dāng)前下標(biāo)的變量名在微信小程序中使用wx:if來決定是否渲染某個(gè)組件，若要渲染多個(gè)組件，可以使用一個(gè)標(biāo)簽將這些組件包裹起來并在這個(gè)標(biāo)簽上使用wx:if，雙大括號中的值為true時(shí)表示組件會被渲染，反之則不會。頁面渲染企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）wx:key是用來指定列表中項(xiàng)目的唯一的標(biāo)識符的，也就是說添加了wx:key屬性的列表項(xiàng)會保持自身的特征和狀態(tài)而不受項(xiàng)目位置變動(dòng)的影響。wx:key的值以兩種形式提供，分別是：字符串*this頁面文件引用企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）建設(shè)制造強(qiáng)國12模板相當(dāng)于一段自己定義的代碼片段。定義模板的方法是用template標(biāo)簽將代碼片段包裹起來，并在template標(biāo)簽上添加name屬性。使用方法是寫一個(gè)template標(biāo)簽并添加is屬性，is屬性的值為相對應(yīng)的模板的name的值import的作用是用來在當(dāng)前文件調(diào)用目標(biāo)文件的模板include的作用是在當(dāng)前文件引用目標(biāo)文件模板之外的內(nèi)容模板import與include媒體組件延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）image1audio2video3image組件用來加載（本地、網(wǎng)絡(luò)）圖片，操作圖片并進(jìn)行展示。image不同于HTML中的img標(biāo)簽，它是對標(biāo)簽，成對出現(xiàn)使用。image組件有多種屬性對圖片進(jìn)行操作和展示，其中常通過設(shè)置mode屬性對圖片進(jìn)行剪裁和縮放audio組件主要用于音頻文件的操作，比如播放、暫停等，它是一個(gè)對標(biāo)簽，成對出現(xiàn)video組件用來控制視頻文件的播放暫停，與HTML中的video元素大體相同，卻比HTML中的video元素的屬性多出不少，比如增加彈幕列表、觸發(fā)事件等。12事件由觸發(fā)這個(gè)事件的節(jié)點(diǎn)向該節(jié)點(diǎn)的父級節(jié)點(diǎn)進(jìn)行傳遞，從里到外，直到到達(dá)該節(jié)點(diǎn)的最外層節(jié)點(diǎn)結(jié)束。冒泡事件有多種事件類型，包括tap、touchmove等，通過“bind”或“catch”與事件類型相結(jié)合可以實(shí)現(xiàn)元素的事件綁定捕獲事件與冒泡事件的事件類型大致相同，捕獲事件執(zhí)行時(shí)，只執(zhí)行當(dāng)前事件的函數(shù)，當(dāng)前事件以外的不進(jìn)行執(zhí)行。頁面事件冒泡事件企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）捕獲事件05任務(wù)實(shí)施輸入標(biāo)題第一步：通過定義class的filter來添加高斯模糊背景圖第二步：添加播放頁面和列表頁面，并設(shè)置相應(yīng)樣式第三步：為列表的每一項(xiàng)添加對應(yīng)的音樂播放事件第四步：添加列表顯示與隱藏按鈕、播放按鈕、上/下一首按鈕的點(diǎn)擊事件以及音樂播放進(jìn)度條的滑動(dòng)事件點(diǎn)擊輸入說明文字

任務(wù)實(shí)施企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）06任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述本任務(wù)通過學(xué)習(xí)keepFit健身音樂模塊，對微信小程序的媒體組件、頁面渲染、如何引入其他樣式文件及小程序相關(guān)的頁面事件具有初步了解，能夠通過所學(xué)的媒體組件的基本使用及相關(guān)的事件作出keepFit健身音樂模塊。

任務(wù)總結(jié)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）謝謝觀賞PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Exce