react技术栈仿App版网易云音乐_React

上一篇: create-react-app项目添加less配... 下一篇:react-native 豆瓣电影的小 demo

react技术栈仿App版网易云音乐

发布时间：2019-06-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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 &amp;& npm start
预览
线上地址
github地址
移动端预览




react使用的一些总结
主要还是在react-redux的使用了，数据应该保存在state还是全局的Store，主要还是看数据需不需要共享，或者是需不需要缓存，不然存在store反而会使问题变得更麻烦
最后
感谢Binaryify提供的NeteaseCloudMusicApi
欢迎star或fork，有问题或有发现bug页欢迎提issues，写的不好的地方也请大佬指点