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