H5 音樂播放器：ajax 實(shí)戰(zhàn) 妙味課堂
價(jià)值：229 附帶課件
游客，如果您要查看本帖隱藏內(nèi)容請(qǐng) 回復(fù)
課程介紹
本次課程涉及的知識(shí)點(diǎn)包括：移動(dòng)端H5、CSS3、JS、滑屏、HTTP協(xié)議、AJAX、跨域、前后端交互、PHP、mySql、jQuery……配合這些知識(shí)點(diǎn)，講師寫了一個(gè)H5播放器demo，用來演示一個(gè)H5播放器究竟如何運(yùn)用這些技術(shù)。
學(xué)習(xí)目標(biāo)
課程案例演示僅展示了授課過程中“播放歌曲功能、歌詞同步功能、拖拽播放進(jìn)度功能、暫停播放功能、歌曲切換功能、留言功能”，大家學(xué)完以后可以動(dòng)手嘗試制作一款類似的H5音樂播放器。
課程詳情
本次課程涉及的知識(shí)點(diǎn)包括：
移動(dòng)端H5、CSS3、JS、滑屏、HTTP協(xié)議、AJAX、跨域、前后端交互、PHP、mySql、jQuery……配合這些知識(shí)點(diǎn)，講師寫了一個(gè)H5播放器demo，用來演示一個(gè)H5播放器究竟如何運(yùn)用這些技術(shù)。
課程案例：
以下演示僅展示了授課過程中“播放歌曲功能、歌詞同步功能、拖拽播放進(jìn)度功能、暫停播放功能、歌曲切換功能、留言功能”，而其他許多商業(yè)播放器的功能并未全部完成，畢竟此案例僅作教學(xué)之用，因此許多產(chǎn)品交互體驗(yàn)上的細(xì)節(jié)講師并未開發(fā)，特此說明。
課程大綱：
第一課：
傳統(tǒng)交互與ajax對(duì)比
什么是ajax
同步與異步
搭建wamp環(huán)境
前后端交互原理
PHP基礎(chǔ)語法
MYSQL基礎(chǔ)語法
GET和POST
XMLHttpRequest
open
onreadystatechange
send
HTTP協(xié)議
readyState
status
statusText
responseText
JSON.parse
setRequestHeader
jquery中ajax使用方式
第二課：
PHP與MYSQL深入
搭建項(xiàng)目初始數(shù)據(jù)
兼容PC與移動(dòng)端
列表頁制作
ajax方式初始化列表
第三課：
模擬緩沖滑動(dòng)
播放器制作
播放時(shí)間與進(jìn)度
ajax方式請(qǐng)求對(duì)應(yīng)歌曲
第四課：
同步歌詞制作
左右劃屏制作
留言板制作
關(guān)聯(lián)表創(chuàng)建
ajax方式初始化留言
ajax方式添加留言
第五課：
完善項(xiàng)目和BUG修復(fù)
XMLHttpRequest2
onload
timeout
ontimeout
responseType
response
mimeType
上傳文件方式
FormData
progress
跨域jsonp
跨域cors
復(fù)制代碼
課程目錄
1H5音樂播放器-ajax實(shí)戰(zhàn)
1-Ajax與后端基礎(chǔ)
2-Ajax基本使用
3-PHP和MYSQL擴(kuò)展
4-播放器搭建及初始數(shù)據(jù)
5-播放器細(xì)節(jié)處理
6-移動(dòng)端滑屏原理
7-音樂詳情頁搭建
8-音樂詳情頁數(shù)據(jù)填充
9-音樂進(jìn)度條原理
10-歌詞操作原理
11-添加留言
12-添加留言及橫豎屏切換
13-播放列表懶加載
14-XMLHttpRequest2
15-Ajax跨域
| 
發(fā)表于 2019-8-10 23:26:07
收藏