资讯专栏INFORMATION COLUMN

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

_Zhao / 1432人阅读

摘要:本来没打算写网易云音乐的,好像都已经被大家写烂了,不过没办法,暂时想不到其他的可写,加上网易云音乐又有,还可以基于做一层的处理再提供给前端调用,然后才决定用写了这个仿版网易云音乐技术栈实现的功能发现页我的电台页侧边栏歌单内页电台内

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
欢迎starfork,有问题或有发现bug页欢迎提issues,写的不好的地方也请大佬指点

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95279.html

相关文章

  • React Native 模仿网易音乐手机客户端,兼容安卓和IOS两个平台

    摘要:比如安卓平台在中不能触屏手动滚动。主要的功能界面模块大部分主要是展示的,网易云的页面和功能实在是太多了,由于时间关系,并没有把所有的功能都做完整,后续会陆续加上其他的功能。各部分模块首页展示音乐播放,包括动画,歌词同步等。 React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台。 GitHub 完整源码地址https://github.com/yezihaohao...

    妤锋シ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<