蘇州健雄職業(yè)技術(shù)學(xué)院 張子瑜

1 總體設(shè)計(jì)

本研究是模仿當(dāng)下流行的某移動(dòng)版的客戶端制作的移動(dòng)音樂項(xiàng)目，包含歌手，收藏，推薦等功能，可以選擇自己喜愛的歌手和歌曲點(diǎn)擊播放，并實(shí)現(xiàn)了歌曲的暫停和播放，歌手封面，收藏夾等功能。

在研究的過程中發(fā)現(xiàn)用戶交互環(huán)節(jié)中用戶的使用感覺并不是很好，通過利用Vue- cli，Vuex，Vue- router 與axios 等組件實(shí)現(xiàn)優(yōu)化，利用Vue- cli 搭建框架，配合后臺(tái)完成用戶的點(diǎn)擊驗(yàn)證，實(shí)現(xiàn)相關(guān)路由功能，實(shí)現(xiàn)歌曲的播放/ 暫停功能。

通過多個(gè)組件的互相作用，來實(shí)現(xiàn)優(yōu)化用戶體驗(yàn)，避免音樂列表與歌手列表的丟失與重復(fù)，讓各個(gè)歌手與歌單實(shí)現(xiàn)互相對應(yīng)。實(shí)現(xiàn)音樂進(jìn)程的控制與播放暫停效果。

2 資源管理

在fonts 中放入字體文件同時(shí)在images 中放入歌曲與人物的預(yù)加載圖片。字體文件可以自行在網(wǎng)絡(luò)上搜尋下載心儀的款式，預(yù)加載圖片在這則是一張綠色加載有著音樂符的圖片。

在設(shè)計(jì)的過程中需要一些相同的參數(shù)，為了解決相同參數(shù)需要多次調(diào)用使用，因此直接將其定義為公共參數(shù)，把他們變?yōu)槟J(rèn)的，其中就包括數(shù)據(jù)傳輸格式以json 格式傳輸，fmt：’json’字體標(biāo)識(shí)符設(shè)置inCst：’utf8’與outCst：’utf- 8’以及算法的hash 值默認(rèn)為5381。同時(shí)，為了后續(xù)方便校驗(yàn)服務(wù)器請求到的歌曲數(shù)據(jù)是否與實(shí)際需求一樣的值，添加一個(gè)狀態(tài)值CODE_OK 如果趕回值為0 則對應(yīng)著請求數(shù)據(jù)獲取正確。最后還添加了一項(xiàng)對音樂播放模式的選擇值pd，與此同時(shí)添加了三個(gè)預(yù)設(shè)order：按順序播放；loop：循環(huán)播放；random：隨機(jī)播放。

3 組件設(shè)計(jì)

有時(shí)由于網(wǎng)絡(luò)延遲或者其他的一些問題，網(wǎng)頁總會(huì)顯示不出來，為了優(yōu)化視覺與用戶體驗(yàn)，添加了一個(gè)加載組件，同時(shí)添加了一張菊花加載圖1。

圖1 菊花加載圖

播放頁面樣式的具體設(shè)計(jì)

本設(shè)計(jì)采用比較時(shí)尚的設(shè)計(jì)，代碼結(jié)構(gòu)如圖2，效果如圖3：

對歌曲播放的相關(guān)設(shè)計(jì)

圖2 M- player 頁面代碼結(jié)構(gòu)

圖3 M- player 頁面效果

首先校驗(yàn)歌曲是否處于準(zhǔn)備狀態(tài)，即是否點(diǎn)擊播放歌曲。然后對進(jìn)度條進(jìn)行設(shè)計(jì)，由之前獲取到的歌曲時(shí)間與當(dāng)前播放時(shí)間進(jìn)行百分比計(jì)算，在進(jìn)度條上設(shè)計(jì)預(yù)留一個(gè)按鈕，后續(xù)通過按鈕即可設(shè)置并拖動(dòng)播放進(jìn)度。如有歌單列表，通過判斷mode 的值，進(jìn)行對播放模式單曲循環(huán)，列表循環(huán)與隨機(jī)播放的選擇效果設(shè)計(jì)。利用數(shù)組的位碼下標(biāo)特性進(jìn)行上一首下一首切換功能實(shí)現(xiàn)。

由m- player 設(shè)計(jì)的播放進(jìn)度計(jì)算的算法計(jì)算，對按鈕位置進(jìn)行固定，根據(jù)進(jìn)度設(shè)置按鈕的位置，同時(shí)也可以調(diào)整按鈕的位置對歌曲播放的進(jìn)度進(jìn)行調(diào)整以達(dá)到調(diào)整歌曲播放的目的。中間利用tSt，tMv，tEd 對進(jìn)度進(jìn)行控制計(jì)算拖動(dòng)后的百分比percent，然后將其傳回父組件m- player。而watch 在整個(gè)事件中起著監(jiān)聽百分比percent 的作用。

在頁面左上角有一個(gè)箭頭其作用是返回上一級的回退按鈕，在播放頁的中間和縮小后的播放器左側(cè)會(huì)有一個(gè)圓形的滾動(dòng)的CD。他的設(shè)計(jì)效果是由播放時(shí)的暫停播放所傳入的值來決定的，當(dāng)返回值為1 時(shí)即為暫停，同時(shí)CD 停止旋轉(zhuǎn)。在播放頁縮小后，左下角的CD 樣式外圍有一個(gè)圓環(huán)效果，該圓環(huán)實(shí)際是播放進(jìn)度，通過進(jìn)度的改變，該圓環(huán)的滾動(dòng)距離也會(huì)隨之改變。

suggest 推薦搜索設(shè)計(jì)

首先獲取目前熱門詞條，根據(jù)不同的內(nèi)容去請求不同的數(shù)據(jù)，調(diào)用getSearch接口處理數(shù)據(jù)，點(diǎn)擊歌手時(shí)拼接歌手信息。判斷當(dāng)前歌手是誰，隨后將歌手信息存放在ret 數(shù)組中。與此同時(shí)歌曲信息也在其中。點(diǎn)擊歌曲查詢相關(guān)歌曲。

4 歌手頁面設(shè)計(jì)

indexSinger 頁面設(shè)計(jì)

在歌手頁面仿寫了top10 的歌手樣式，隨后將其他的歌手按照名字的首字母順序排列，同時(shí)在右側(cè)也有首字母篩選標(biāo)識(shí)。具體頁面效果如圖4，結(jié)構(gòu)代碼如圖5：

圖4 IndexSinger 頁面效果圖

圖5 IndexSinger 機(jī)構(gòu)代碼singerDetail 頁面設(shè)計(jì)

圖6 SingerDetail 頁面效果圖

該頁面是由兩部分組成，上面三分之一部分是由歌手頭像海報(bào)組成，下面部分則是由歌手所唱的歌曲列表組成。在滑動(dòng)歌曲列表時(shí)，超出的部分則用hidden 掩蓋掉。具體頁面效果如圖6：

5 效果驗(yàn)證

在設(shè)計(jì)完成的App.vue 文件中只做了渲染組件的作用，將各個(gè)組件糅合在一起。main.js 中引入了不同的庫與文件，而router.js 中則做出了非常重要的路由管理與重新定向。最終的設(shè)計(jì)效果圖分別如圖8～10。

圖7 推薦頁效果圖

圖8 歌手頁效果圖

圖9 排行頁效果圖

圖10 搜索頁效果圖