{"id":15043438,"url":"https://github.com/maomao1996/react-music","last_synced_at":"2025-04-05T17:09:16.695Z","repository":{"id":54944341,"uuid":"123852969","full_name":"maomao1996/react-music","owner":"maomao1996","description":"基于React的在线音乐播放器（移动端高仿安卓网易云音乐）（重构是不可能的，这辈子都不会用 hooks 重构）","archived":false,"fork":false,"pushed_at":"2024-06-29T16:00:29.000Z","size":1549,"stargazers_count":363,"open_issues_count":7,"forks_count":81,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-29T16:08:33.891Z","etag":null,"topics":["better-scroll","music","music-player","react","react-music","react-music-player","react-router","redux"],"latest_commit_sha":null,"homepage":"https://reactmusic.fe-mm.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maomao1996.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-05T02:24:04.000Z","updated_at":"2025-03-04T12:57:22.000Z","dependencies_parsed_at":"2024-01-14T04:50:57.611Z","dependency_job_id":"a6789db6-a365-4cfc-bf80-8b9ab8482d81","html_url":"https://github.com/maomao1996/react-music","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maomao1996%2Freact-music","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maomao1996%2Freact-music/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maomao1996%2Freact-music/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maomao1996%2Freact-music/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maomao1996","download_url":"https://codeload.github.com/maomao1996/react-music/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["better-scroll","music","music-player","react","react-music","react-music-player","react-router","redux"],"created_at":"2024-09-24T20:49:02.743Z","updated_at":"2025-04-05T17:09:16.670Z","avatar_url":"https://github.com/maomao1996.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Music（2018.12.27）\n\n高仿网易云音乐安卓客户端\n\n\u003e API：一个开源的[网易云音乐 NodeJS 版 API](https://binaryify.github.io/NeteaseCloudMusicApi)（有 api 才有动力写！！！）\n\n\u003e [在线演示地址](https://reactmusic.fe-mm.com)\n\n\u003e [Vue PC/移动端二合一版本](https://github.com/maomao1996/Vue-mmPlayer)\n\n\u003e [交流 QQ 群：529940193](http://shang.qq.com/wpa/qunwpa?idkey=f8be1b627a89108ccfda9308720d2a4d0eb3306f253c5d3e8d58452e20b91129)\n\n## 如何安装与使用\n\n\u003e react-music\n\n```sh\n# 下载 react-music\ngit clone https://github.com/maomao1996/react-music.git\n\n# 进入 react-music 项目目录\ncd react-music\n\n# 安装依赖\nnpm install\n\n# // 运行 react-music 访问 http://localhost:8163\nnpm run start\n\n# // 项目编译打包\nnpm run build\n```\n\n\u003e 后台服务器\n\n[网易云音乐 NodeJS 版 API](https://binaryify.github.io/NeteaseCloudMusicApi)\n\n```\n# 下载 NeteaseCloudMusicApi\ngit clone https://github.com/Binaryify/NeteaseCloudMusicApi.git\n\n# 安装依赖\nnpm install\n\n# 服务端运行 访问 http://localhost:3000\nnode app.js\n```\n\n#### 运行 react-music 后无法获取音乐请检查后台服务器是否启动\n\n#### .env 的 REACT_APP_BASE_API_URL 地址要和后台服务器地址一致\n\n## 技术栈\n\n-   React（核心框架）\n-   React-Router（页面路由）\n-   Redux（状态管理）\n-   React-Redux\n-   Redux-Thunk\n-   ES 6 / 7（JavaScript 语言的下一代标准）\n-   Sass（CSS 预处理器）\n-   Axios（网络请求）\n-   ClassNames（处理动态 class ）\n-   [Better-Scroll](https://ustbhuangyi.github.io/better-scroll/#/zh)（一款重点解决移动端各种滚动场景需求的插件）\n-   FastClick（解决移动端 300ms 点击延迟）\n\n## 项目布局\n\n\u003cdetails\u003e\n\u003csummary\u003e展开查看\u003c/summary\u003e\n\u003cpre\u003e\u003ccode\u003e.\n├── config                                          // webpack 配置文件\n├── public                                          // 项目启动页面\n├── scripts                                         // 脚本工具\n├── screenshots                                     // 项目截图\n├── src                                             // 项目源码目录\n│   ├── api                                         // 数据交互\n│   │   └── index.js\n│   ├── assets                                      // 静态资源目录\n│   │   └── images                                     // 图片目录\n│   ├── base                                        // 公共基础组件目录\n│   │   ├── columnList                              // 歌单基础列表组件 —— 列\n│   │   ├── drawer                                  // 抽屉组件\n│   │   ├── loading                                 // loading 组件\n│   │   ├── notification                            // 通知组件（Toast）\n│   │   ├── progress                                // 进度条拖动组件\n│   │   ├── rowList                                 // 歌单列表基础组件 —— 行\n│   │   ├── scroll                                  // 滚动组件\n│   │   ├── slide                                   // slide 组件\n│   │   ├── songlist                                // 歌曲列表基础组件\n│   │   └── toast                                   // Toast 组件\n│   ├── components                                  // 公共项目组件目录\n│   │   ├── menu                                    // 菜单组件\n│   │   ├── mm-header                               // 一级导航组件\n│   │   ├── mm-nav                                  // 二级导航组件\n│   │   ├── player                                  // 播放组件\n│   │   └── search-list                             // 搜索列表详情组件\n│   ├── model                                       // 数据模型目录\n│   ├── pages                                       // 项目主页面目录\n│   │   ├── discover                                // 发现页面\n│   │   ├── playlist                                // 歌单详情页面\n│   │   ├── search                                  // 搜索\n│   │   ├── sheetlist                               // 歌单页面\n│   │   ├── skin                                    // 皮肤切换页面\n│   │   ├── toplist                                 // 排行榜页面\n│   │   └── App.js                                  // 根组件\n│   ├── store                                       // redux 目录\n│   │   ├── actions.js                              // 配置 actions 方法\n│   │   ├── actionTypes.js                          // 配置 actions 常量\n│   │   ├── index.js                                // 引用 redux\n│   │   └── reducers.js                             // 处理数据\n│   ├── styles                                      // 样式表目录\n│   │   ├── index.scss                              // 基础样式\n│   │   ├── mixin.scss                              // 基础样式宏\n│   │   ├── playCount.scss                          // 播放数量样式宏\n│   │   ├── reset.css                               // 基础重置\n│   │   └── var.scss                                // 基本变量\n│   ├── utils                                       // 公共 Js 目录\n│   │   └── utils.js                                // 公用 Js 方法\n│   ├── config.js                                   // 基础配置\n│   └── index.js                                    // 入口主文件\n\u003c/code\u003e\u003c/pre\u003e\n\u003c/details\u003e\n\n## 功能\n\n-   播放器\n-   正在播放\n-   排行榜\n-   歌单列表\n-   歌单详情\n-   搜索（歌曲、歌单）\n-   皮肤切换\n\n## 更新说明\n\n### V1.1.1（2018.12.27）\n\n-   修复 Banner 图片不显示问题\n-   修复歌单详情打开失败问题\n\n### V1.1.0（2018.07.24）\n\n-   制作皮肤切换功能\n-   增加 Toast 弹出层\n-   优化 Scroll 组件逻辑\n-   优化抽屉组件样式\n\n### V1.0.0（2018.06.12）发布正式版\n\n-   制作播放器功能\n-   制作正在播放列表功能\n-   制作排行榜功能\n-   制作歌单列表功能\n-   制作歌单详情功能\n-   制作搜索功能（歌曲、歌单）\n\n## License\n\n[MIT](https://github.com/maomao1996/react-music/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaomao1996%2Freact-music","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaomao1996%2Freact-music","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaomao1996%2Freact-music/lists"}