banner
moeyy

moeyy

一条有远大理想的咸鱼。
github
mastodon
email

高仿网易云音乐手機客戶端

在線預覽 http://140.143.128.100:3000#

? 前言#

隨著不斷的學習 Vue,需要做一個小項目通過在實現項目過程中了解到更多的知識。隨著如今人們對於音樂的需求,移動端的使用量愈發增加,項目通過 Vue 編寫實現,全面借用网易云音樂移動端的 UI 設計、功能實現,努力做到以假亂真的效果。前幾天便著手開始弄了,到今天為止也算是勉強能用了。

本項目自行構思得出,由個人獨立編寫程序研究。

注:此項目純屬個人瞎搞,正常使用請選擇网易云音乐官方客戶端。

? 項目目標#

全面實現移動端网易云音樂的功能

項目還在編寫完善中

? 如何運行#

node 版本 [10.15.3]

✨ 開發過程#

# 克隆
git clone https://github.com/powerdong/Music-player.git
# 打開項目目錄
cd Music-player

cd musicPlayer
# 安裝依賴
npm install
# 開啟本地服務運行項目
npm run dev

歡迎 star,歡迎 issue

? 項目進度#

上一次更新 (2019-12-8): 電台分類頁面開始 最近一次更新 (2019-12-10): 查看用戶詳情

? 版本更新#

  • 版本信息: 2.4.8-> 2.8.10
  • 時間: 2019 年 12 月 7 日
  • 更新內容:
  • 增加發現頁面下拉刷新 + 輕提示
  • 增加電台排行頁面主播榜
  • 增加電台排行頁面節目榜中 24 小時榜
  • 增加電台排行頁面電台榜中付費精品榜
  • 修復登錄頁面不能返回 Bug
  • 修復其他已知問題
  • 優化結構

使用中有任何問題或建議,歡迎 Issue! 本項目在不斷完善中,請大家拭目以待~

技術棧#

? 主要依賴#

  • Vue 全家桶 (使用 Vue-cli 作為構建工具)
  • WebPack4.0
  • ES6
  • Less
  • ESLint
  • Vant UI
  • 网易云音乐 API

? 項目演示#

demo 地址(請用 chrome 手機模式預覽)

? 目標功能#

  • [x] 手機登錄、註冊
  • [x] 修改密碼
  • [x] 我的頁面歌單信息
  • [x] 添加,刪除歌單
  • [x] 最近播放
  • [x] 心動模式
  • [x] 我的電台
  • [x] 我的收藏
  • [x] 發現頁面推薦歌單
  • [x] 發現頁面新碟
  • [x] 發現頁面新歌
  • [x] 發現頁面每日推薦
  • [x] 發現頁面歌單
  • [x] 視頻頁面
  • [ ] 朋友頁面
  • [x] 歌單廣場
  • [x] 新歌推薦
  • [x] 更多新碟
  • [x] 發現頁面排行榜
  • [x] 發現頁面電台
  • [x] 退出賬號
  • [x] 發現頁面私人 FM
  • [x] 搜索功能
  • [x] 搜索結果展示
  • [x] 熱搜榜
  • [x] 歷史記錄
  • [x] 搜索推薦
  • [x] 歌手分類
  • [x] 播放功能 (小播放器進度條)
  • [x] 播放列表
  • [x] 添加刪除播放列表
  • [x] 簽到
  • [x] 歌曲喜歡與否
  • [x] 專輯收藏與否
  • [x] 歌單評論
  • [x] 專輯評論
  • [x] 點贊、發送、刪除評論
  • [x] 電台節目評論
  • [x] 視頻評論
  • [x] 用戶相關
  • [ ] 頁面滾動加載
  • [ ] 左右滑動切換
  • [ ] 頁面切換動畫
  • [ ] 登錄情況判斷
  • [ ] 全面優化 & 修復

? 部分截圖#

側邊賬戶中心 image 歌單 & 歌單詳情 image 排行榜 & 排行榜信息 image 我的頁面 & 最近播放 image 搜索展示 image

? 項目佈局#

.src
+-- api
 +-- config.js // 存取相關的api地址
 +-- index.js // 請求相關的api方法
+-- assets
 +-- styles
 +-- border.css // 移動端的1px邊框
 +-- global.less // 全局應用樣式
 +-- reset.css // 重置樣式
 +-- resetEleUI.less // 修改elementUI組件樣式
 +-- utils // 全局要使用的方法
 +-- getPhone // 獲取手機號碼
 +-- modalScroll // 處理移動端滾動條
 +-- Bus.js // Bus 總線
 +-- Mixins.js // 混入(mixin)
+-- base // 存取頁面公共的小組件
+-- albumPage // 歌單展示頁面組件
+-- songListPage // 展示歌曲列表
+-- alert // 提示消息
+-- audioAllTitle // 播放全部標題行
+-- button // 登錄頁面按鈕
+-- djSublistCard // 類似於我的電台頁面的長卡片組件
+-- generalNav // 通用頁面頂部的標題行
+-- icon // 圖標展示
+-- idxCard // 官方排行榜
+-- imgCard // 歌單的圖片卡
+-- interchangeable // 用來展示搜索展示頁面除單曲以外的項目
+-- loading // 轉圈loading
+-- pageErrorInfo // 出錯提醒
+-- pageErrorLoading // 頁面加載loading
+-- searchInput // 搜索框
+-- slider // 播放列表滑塊
+-- sliderNav // 滑動標題
+-- song // 歌曲項
+-- titleFooter // 搜索展示頁綜合頁面各項通用頭和尾
+-- getInfos // 獲取一些靜態信息
+-- getData // 獲取靜態信息方法
+-- icon // 存取圖標信息
+-- pages // 項目路由頁面
+-- router // 路由配置
+-- index
+-- store // vuex 配置使用
+-- action // 根級別的 action
+-- getter // 根級別的 getter
+-- index // 組裝模塊並導出 store 的地方
+-- mutation-types // 根級別的 mutation-types
+-- mutation // 根級別的 mutation
+-- state // 根級別的 state

打包日誌#

image   image

本項目會長期更新,歡迎大家指出問題,共同學習

作者#

Lambda 原文鏈接:高仿网易云音樂客戶端

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。