資訊專欄INFORMATION COLUMN
摘要：關(guān)于路由，剛開始設(shè)計(jì)路由的時(shí)候想了很多，由于一開始的目標(biāo)就是網(wǎng)易云音樂的所有內(nèi)容，所以設(shè)計(jì)了三級(jí)路由，，大概這樣，點(diǎn)擊查看。
標(biāo)題略夸張了，但是這個(gè)從ui還原上已經(jīng)很接近官方版本了。雖然目前這個(gè)是很多人造過的輪子，但是可能每個(gè)人的實(shí)現(xiàn)方式都不一樣，自己寫一遍也會(huì)有許多收獲。
技術(shù)棧項(xiàng)目地址
預(yù)覽地址
api：ap使用的是一個(gè)開源的nodejs封裝的網(wǎng)易云音樂api，地址
vue2：基礎(chǔ)框架
vue-router2：路由跳轉(zhuǎn)
vuex：全局?jǐn)?shù)據(jù)管理
es6：采用部分es6特性，大大簡化了寫法
webpack：vue-cli基于webpack，修改了部分配置
axios：基于Promise的http庫，用來請(qǐng)求數(shù)據(jù)
scss：寫起css來十分方便，需要安裝sass-loader，另外使用自定義其中的自定義函數(shù)配合rem來適配移動(dòng)端設(shè)備簡直不要太方便
flex：彈性布局，在移動(dòng)端兼容性較好，寫各種布局非常方便
vue-material：一個(gè)Android上material design風(fēng)格的組件庫
說明這個(gè)項(xiàng)目大小組件大概二十幾個(gè)，目前還未完工，以后還會(huì)繼續(xù)更新，目標(biāo)是還原整個(gè)網(wǎng)易云音樂（雖然不知道什么時(shí)候能填完坑o(╯□╰)o）。
關(guān)于路由，剛開始設(shè)計(jì)路由的時(shí)候想了很多，由于一開始的目標(biāo)就是網(wǎng)易云音樂的所有內(nèi)容，所以設(shè)計(jì)了三級(jí)路由，/root/index/recommed，大概這樣，點(diǎn)擊查看。
關(guān)于體會(huì)，寫到這個(gè)項(xiàng)目也算是對(duì)vue全家桶比較熟了，體會(huì)就是，不論是簡單的復(fù)雜的項(xiàng)目，只要分割成一個(gè)個(gè)組件再拼起來，也沒什么難的，組件之間通信又有vuex，也是非常簡單的，總之就是熟能生巧。
關(guān)于難點(diǎn)，對(duì)于自己來說，audio標(biāo)簽以前沒有接觸過，有點(diǎn)麻煩，不過還算有相關(guān)文檔；歌詞滾動(dòng)，參考這里，部分歌曲還是有點(diǎn)問題，待解決;播放器背景圖，這個(gè)當(dāng)時(shí)考慮了很久，因?yàn)榫W(wǎng)易云音樂的播放器背景圖就是當(dāng)前歌曲的專輯圖，還是模糊效果，最后實(shí)現(xiàn)方式是在當(dāng)前組件的二級(jí)div設(shè)置當(dāng)前歌曲的背景圖，大小覆蓋父元素，為防止第一次播放或者切歌的時(shí)候沒有圖，在組件的根元素也設(shè)置一張背景默認(rèn)圖，具體可以點(diǎn)擊查看；當(dāng)前歌曲在播放列表中的索引獲取，通過es5中數(shù)組的findIndex方法，找到當(dāng)前歌曲的id在數(shù)組中的位置，具體可以點(diǎn)擊查看。
關(guān)于打包后的資源路徑，比如要放在二級(jí)目錄www.xxx.com/music，那么修改config/index.js中的assetsPublicPath: "/music/"即可。
關(guān)于移動(dòng)設(shè)備適配，我使用的是js動(dòng)態(tài)設(shè)置html元素font-size的方式，頁面元素使用rem，這樣可達(dá)到在不同設(shè)備下顯示內(nèi)容基本一樣的效果，具體可以點(diǎn)擊，使用方式比如width:100px;可以寫成width:pr(100)。
關(guān)于圖標(biāo)，使用的是淘寶的iconfont字體圖標(biāo)方案，相比于使用圖片圖標(biāo)有許多優(yōu)勢(shì)，比如任意縮放、改變顏色、響應(yīng)式適配設(shè)備等等，具體可以參考這篇文章。
功能[x] 首頁歌單推薦
[x] 歌單詳情
[x] 播放器
[x] 播放暫停
[x] 播放模式切歌（順序和隨機(jī)）
[ ] 歌詞滾動(dòng)（待修改）
[x] 歌曲拖動(dòng)
[x] 播放器底部背景
[x] 播放底欄
[x] 底欄歌詞同步
[x] 播放列表
[x] 歌曲評(píng)論
[x] 搜索推薦
[x] 搜索分類
部分截圖文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84340.html
摘要：組件結(jié)構(gòu)接著我們就該搭建這個(gè)播放器的組件了?？偟脑硎鞘紫全@取音頻的持續(xù)時(shí)間，然后通過一個(gè)定時(shí)器，不斷更新顯示時(shí)間，播放完成時(shí)，計(jì)時(shí)器停止。這個(gè)頁面比較簡單，播放器標(biāo)簽，綁定了事件，即播放完成后執(zhí)行。 這個(gè)播放器的開發(fā)歷時(shí)2個(gè)多月，并不是說它有多復(fù)雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因?yàn)橥涎樱彩菍?shí)習(xí)公司項(xiàng)目太緊。8月底結(jié)束實(shí)習(xí)前寫完了樣式，之后在家空閑...
摘要：庫用了魔改樣式的歌詞滾動(dòng)部分用了黃軼老大的賊爽主題換膚用的變量替換。語言的下一代標(biāo)準(zhǔn)預(yù)處理器安裝與使用前端項(xiàng)目后端項(xiàng)目 音樂播放器雖然爛大街了，但是作為前端沒自己擼一個(gè)一直是個(gè)遺憾，而且偶然間發(fā)現(xiàn)pc端web版的網(wǎng)易云音樂做的實(shí)在是太簡陋了，社區(qū)仿pc客戶端的網(wǎng)易云也不多見，為了彌補(bǔ)這個(gè)遺憾，就用vue全家桶模仿mac客戶端的ui實(shí)現(xiàn)了一個(gè)，歡迎提出意見和star~ 預(yù)覽地址 源碼地址...
摘要：項(xiàng)目地址暫時(shí)只實(shí)現(xiàn)了基本功能加了一點(diǎn)微小的效果主要適配瀏覽器對(duì)和做了一點(diǎn)微小的適配現(xiàn)在已經(jīng)包括了打包平臺(tái)的功能了源碼地址項(xiàng)目預(yù)覽項(xiàng)目描述前端部分整體加載進(jìn)度懶加載模塊的加載中提示實(shí)現(xiàn)了滑塊增量分頁新曲等使用了做單頁應(yīng)用使用了處理路由使用了管 項(xiàng)目地址 暫時(shí)只實(shí)現(xiàn)了基本功能 加了一點(diǎn)微?小的效果 主要適配pc瀏覽器 對(duì)android 和ios 做了一點(diǎn)微?小的適配 現(xiàn)在已經(jīng)包括了ele...
摘要：項(xiàng)目地址暫時(shí)只實(shí)現(xiàn)了基本功能加了一點(diǎn)微小的效果主要適配瀏覽器對(duì)和做了一點(diǎn)微小的適配現(xiàn)在已經(jīng)包括了打包平臺(tái)的功能了源碼地址項(xiàng)目預(yù)覽項(xiàng)目描述前端部分整體加載進(jìn)度懶加載模塊的加載中提示實(shí)現(xiàn)了滑塊增量分頁新曲等使用了做單頁應(yīng)用使用了處理路由使用了管 項(xiàng)目地址 暫時(shí)只實(shí)現(xiàn)了基本功能 加了一點(diǎn)微?小的效果 主要適配pc瀏覽器 對(duì)android 和ios 做了一點(diǎn)微?小的適配 現(xiàn)在已經(jīng)包括了ele...
閱讀 4009·2023-04-26 02:13
閱讀 2252·2021-11-08 13:13
閱讀 2740·2021-10-11 10:59
閱讀 1740·2021-09-03 00:23
閱讀 1311·2019-08-30 15:53
閱讀 2287·2019-08-28 18:22
閱讀 3059·2019-08-26 10:45
閱讀 737·2019-08-23 17:58
