maomao1996 / react-music

基于React的在线音乐播放器（移动端高仿安卓网易云音乐）（重构是不可能的，这辈子都不会用 hooks 重构）

React-Music（2018.12.27）

高仿网易云音乐安卓客户端

API：一个开源的网易云音乐 NodeJS 版 API（有 api 才有动力写！！！）

在线演示地址

Vue PC/移动端二合一版本

交流 QQ 群：529940193

如何安装与使用

react-music

# 下载 react-music
git clone https://github.com/maomao1996/react-music.git

# 进入 react-music 项目目录
cd react-music

# 安装依赖
npm install

# // 运行 react-music 访问 http://localhost:8163
npm run start

# // 项目编译打包
npm run build

后台服务器

网易云音乐 NodeJS 版 API

# 下载 NeteaseCloudMusicApi
git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git

# 安装依赖
npm install

# 服务端运行 访问 http://localhost:3000
node app.js

运行 react-music 后无法获取音乐请检查后台服务器是否启动

.env 的 REACT_APP_BASE_API_URL 地址要和后台服务器地址一致

技术栈

• React（核心框架）
• React-Router（页面路由）
• Redux（状态管理）
• React-Redux
• Redux-Thunk
• ES 6 / 7（JavaScript 语言的下一代标准）
• Sass（CSS 预处理器）
• Axios（网络请求）
• ClassNames（处理动态 class ）
• Better-Scroll（一款重点解决移动端各种滚动场景需求的插件）
• FastClick（解决移动端 300ms 点击延迟）

项目布局

展开查看

.
├── config                                          // webpack 配置文件
├── public                                          // 项目启动页面
├── scripts                                         // 脚本工具
├── screenshots                                     // 项目截图
├── src                                             // 项目源码目录
│   ├── api                                         // 数据交互
│   │   └── index.js
│   ├── assets                                      // 静态资源目录
│   │   └── images                                     // 图片目录
│   ├── base                                        // 公共基础组件目录
│   │   ├── columnList                              // 歌单基础列表组件 —— 列
│   │   ├── drawer                                  // 抽屉组件
│   │   ├── loading                                 // loading 组件
│   │   ├── notification                            // 通知组件（Toast）
│   │   ├── progress                                // 进度条拖动组件
│   │   ├── rowList                                 // 歌单列表基础组件 —— 行
│   │   ├── scroll                                  // 滚动组件
│   │   ├── slide                                   // slide 组件
│   │   ├── songlist                                // 歌曲列表基础组件
│   │   └── toast                                   // Toast 组件
│   ├── components                                  // 公共项目组件目录
│   │   ├── menu                                    // 菜单组件
│   │   ├── mm-header                               // 一级导航组件
│   │   ├── mm-nav                                  // 二级导航组件
│   │   ├── player                                  // 播放组件
│   │   └── search-list                             // 搜索列表详情组件
│   ├── model                                       // 数据模型目录
│   ├── pages                                       // 项目主页面目录
│   │   ├── discover                                // 发现页面
│   │   ├── playlist                                // 歌单详情页面
│   │   ├── search                                  // 搜索
│   │   ├── sheetlist                               // 歌单页面
│   │   ├── skin                                    // 皮肤切换页面
│   │   ├── toplist                                 // 排行榜页面
│   │   └── App.js                                  // 根组件
│   ├── store                                       // redux 目录
│   │   ├── actions.js                              // 配置 actions 方法
│   │   ├── actionTypes.js                          // 配置 actions 常量
│   │   ├── index.js                                // 引用 redux
│   │   └── reducers.js                             // 处理数据
│   ├── styles                                      // 样式表目录
│   │   ├── index.scss                              // 基础样式
│   │   ├── mixin.scss                              // 基础样式宏
│   │   ├── playCount.scss                          // 播放数量样式宏
│   │   ├── reset.css                               // 基础重置
│   │   └── var.scss                                // 基本变量
│   ├── utils                                       // 公共 Js 目录
│   │   └── utils.js                                // 公用 Js 方法
│   ├── config.js                                   // 基础配置
│   └── index.js                                    // 入口主文件

功能

• 播放器
• 正在播放
• 排行榜
• 歌单列表
• 歌单详情
• 搜索（歌曲、歌单）
• 皮肤切换

更新说明

V1.1.1（2018.12.27）

• 修复 Banner 图片不显示问题
• 修复歌单详情打开失败问题

V1.1.0（2018.07.24）

• 制作皮肤切换功能
• 增加 Toast 弹出层
• 优化 Scroll 组件逻辑
• 优化抽屉组件样式

V1.0.0（2018.06.12）发布正式版

• 制作播放器功能
• 制作正在播放列表功能
• 制作排行榜功能
• 制作歌单列表功能
• 制作歌单详情功能
• 制作搜索功能（歌曲、歌单）

License

MIT

react-music's Issues

music

提个issue，大佬有那个ts的教程吗，求分享

演示地址被挂马了,处理下吧

运行报错

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at validateString (internal/validators.js:125:11)
at Object.join (path.js:427:7)
at noopServiceWorkerMiddleware (E:\react学习\react-music\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
at Layer.handle [as handle_request] (E:\react学习\react-music\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (E:\react学习\react-music\node_modules\express\lib\router\index.js:317:13)
at E:\react学习\react-music\node_modules\express\lib\router\index.js:284:7
at Function.process_params (E:\react学习\react-music\node_modules\express\lib\router\index.js:335:12)
at next (E:\react学习\react-music\node_modules\express\lib\router\index.js:275:10)
at launchEditorMiddleware (E:\react学习\react-music\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
at Layer.handle [as handle_request] (E:\react学习\react-music\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (E:\react学习\react-music\node_modules\express\lib\router\index.js:317:13)
at E:\react学习\react-music\node_modules\express\lib\router\index.js:284:7
at Function.process_params (E:\react学习\react-music\node_modules\express\lib\router\index.js:335:12)
at next (E:\react学习\react-music\node_modules\express\lib\router\index.js:275:10)
at handleWebpackInternalMiddleware (E:\react学习\react-music\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
at Layer.handle [as handle_request] (E:\react学习\react-music\node_modules\express\lib\router\layer.js:95:5)

没有用到fastclick吧..

另外谢谢提供项目学习2333

请求合作。嗯~ o(*￣▽￣*)o

我正在使用React写一个类似的播放器。使用Material-UI。希望你能和我合作。欢迎加入组织：https://github.com/Sc-Softs/CloudMusic PS:我们是同志了