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，写的很差的地方也请大佬指点