react技術棧仿App版網易雲音樂

react-music

原本沒打算寫網易雲音樂的，好像都已經被你們寫爛了，不過沒辦法，暫時想不到其餘的可寫，加上網易雲音樂又有API，還能夠基於restful API作一層graphql的處理再提供給前端調用，而後才決定用react寫了這個仿app版網易雲音樂

技術棧

• react
• react-router
• redux
• react-redux
• react-motion
• better-scroll
• ES6/7
• stylus
• koa
• graphql

實現的功能

• 發現頁
• 個人
• 電臺頁
• 側邊欄
• 歌單內頁
• 電臺內頁
• 搜索頁及結果頁
• 上一首
• 下一首
• 播放模式切換
• 歌曲刪除
• 歌詞
• 左右滑切歌

運行

git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git

這是網易雲API，由於最新的banner數據已經改了，能夠git reset --hard d155a1fc0177e525cb650d239b8a98a8549a85e1回退到此次提交

cross-env PORT=8080 npm start

首先啓動api服務器，須要用8080端口啓動

git clone git@github.com:Kim09AI/react-music.git

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

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

預覽

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

react使用的一些總結

主要仍是在react-redux的使用了，數據應該保存在state仍是全局的store，主要仍是看數據需不須要共享，或者是需不須要緩存，否則存在store反而會使問題變得更麻煩

最後

感謝Binaryify提供的NeteaseCloudMusicApi
歡迎star或fork，有問題或有發現bug頁歡迎提issues，寫的很差的地方也請大佬指點