摘要：本來沒打算寫網(wǎng)易云音樂的，好像都已經(jīng)被大家寫爛了，不過沒辦法，暫時想不到其他的可寫，加上網(wǎng)易云音樂又有，還可以基于做一層的處理再提供給前端調(diào)用，然后才決定用寫了這個仿版網(wǎng)易云音樂技術(shù)棧實現(xiàn)的功能發(fā)現(xiàn)頁我的電臺頁側(cè)邊欄歌單內(nèi)頁電臺內(nèi)

本來沒打算寫網(wǎng)易云音樂的，好像都已經(jīng)被大家寫爛了，不過沒辦法，暫時想不到其他的可寫，加上網(wǎng)易云音樂又有API，還可以基于restful API做一層graphql的處理再提供給前端調(diào)用，然后才決定用react寫了這個仿app版網(wǎng)易云音樂

react

react-router

redux

react-redux

react-motion

better-scroll

ES6/7

stylus

koa

graphql

發(fā)現(xiàn)頁

我的

電臺頁

側(cè)邊欄

歌單內(nèi)頁

電臺內(nèi)頁

搜索頁及結(jié)果頁

上一首

下一首

播放模式切換

歌曲刪除

歌詞

左右滑切歌

git clone [email protected]:Binaryify/NeteaseCloudMusicApi.git

這是網(wǎng)易云API，因為最新的banner數(shù)據(jù)已經(jīng)改了，可以git reset --hard d155a1fc0177e525cb650d239b8a98a8549a85e1回退到這次提交

cross-env PORT=8080 npm start

首先啟動api服務器，需要用8080端口啟動

git clone [email protected]:Kim09AI/react-music.git

# dev模式
# 先啟動graphql服務器
$ cd server && npm run dev
# 再回到根目錄
$ npm start

# production模式
# 首次build前先執(zhí)行(因為使用了dll)
$ npm run build:dll
$ npm run build
# 本地以production模式啟動服務器
cd server && npm start

線上地址
github地址
移動端預覽

主要還是在react-redux的使用了，數(shù)據(jù)應該保存在state還是全局的store，主要還是看數(shù)據(jù)需不需要共享，或者是需不需要緩存，不然存在store反而會使問題變得更麻煩

感謝Binaryify提供的NeteaseCloudMusicApi
歡迎star或fork，有問題或有發(fā)現(xiàn)bug頁歡迎提issues，寫的不好的地方也請大佬指點