Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rayhomie/react-qq-music
🎵 基于 React 的QQ音乐 mac 客户端播放器（PC） Online Music Player（qqmusic）
https://github.com/rayhomie/react-qq-music
javascript netease-music qqmusic react react-music typescript
Last synced: 8 days ago
JSON representation
🎵 基于 React 的QQ音乐 mac 客户端播放器（PC） Online Music Player（qqmusic）
- Host: GitHub
- URL: https://github.com/rayhomie/react-qq-music
- Owner: rayhomie
- Created: 2021-05-22T12:13:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-06-23T07:25:14.000Z (over 3 years ago)
- Last Synced: 2024-06-10T15:42:52.828Z (5 months ago)
- Topics: javascript, netease-music, qqmusic, react, react-music, typescript
- Language: TypeScript
- Homepage: http://music.rayhomie.icu
- Size: 391 KB
- Stars: 99
- Watchers: 2
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎵 基于 React 的QQ音乐 mac 客户端播放器（PC） Online Music Player
由于之前在github上看到了一个高仿mac版网易云客户端播放器的项目。由于在github上目前还没有高仿mac版QQ音乐的项目。
所以就手撸了一个 react 版的qq音乐mac客户端播放器，这里还非常感谢 [Rain120](https://github.com/Rain120) 👬提供了QQ音乐API。欢迎提出意见和 star🌟~
🌟[预览地址](http://music.rayhomie.icu/)🌟
🌟[源码地址](https://github.com/rayhomie/react-qq-music)🌟
### 后端接口
https://rain120.github.io/qq-music-api/#/?id=qqmusicapi
### 技术栈
- **React Hooks** （几乎全使用函数式组件）
- **Hox**（react的hooks式全局状态管理器）
- **ESNext**（JavaScript 语言的下一代标准）
- **Less**（CSS 预处理器）
- **react-router-dom**（路由）
- **Webpack**（打包器）
- **IconFont**（图标）
- ...
### 项目结构
```js
|-- dll // 动态链接库（'react','react-dom','hox'）
|-- src // 源码目录
| |-- api // QQ音乐Api目录
| |-- components // 组件目录
| |--Button // 按钮组件
| |--Card // 常规的专辑等卡片
| |--CardList // 歌单推荐的卡片列表
| |--Icon // 包裹使用@ant-design/icons和IconFont
| |--List // 歌曲列表组件
| |--MacBtn // mac按钮组件
| |--Message // 全局提示
| |--Pagination // 分页组件
| |--PlayListModal // 播放列表弹窗
| |--Progress // 播放的进度
| |--RankCard // 排行榜卡片
| |--Search // 搜索框（包含业务）
| |--SideBar // 侧边栏
| |--SingerCard // 歌手卡片
| |--Tab // 标签组件
| |--Transition // 动画过渡组件透传CSSTransition所有属性
| |--Volume // 音量组件
| |-- font // iconfont图标字体目录
| |-- hooks // 自定义hooks工具目录
| |-- layout // 整体页面布局目录
| |--Header // 路由前进后退按钮、搜索框
| |--Menu // 左侧菜单栏
| |--MusicListModal // 播放列表侧弹窗
| |--Player // 播放器模块
| |--SongModal // 歌词弹窗
| |-- model // 全局状态hox目录
| |-- page // 页面目录
| |-- router // 路由配置目录（可动态加载）
| |-- style // 全局样式目录
| |-- utils // 工具目录
| |-- app.less // 全局样式入口文件
| |-- App.tsx // 入口文件
| |-- const.t // 常量定义
| |-- index.html // 入口模板文件
| |-- index.js // spa入口文件
|-- .gitignore // 忽略git
|-- .prettierignore // 忽略prettier
|-- .prettierrc.js // 配置prettier
|-- package.json // npm入口
|-- postcss.config.js // 配置postcss
|-- README.md // 项目说明
|-- tsconfig.json // ts配置
|-- webpack_dll.config.js // dll动态链接库文件打包配置文件
|-- webpack.config.js // webpack打包入口配置文件
```
### 进度
- [x] 搜索建议
- [x] 搜索详情页
- [x] 歌手页
- [x] 专辑页
- [x] 播放音乐（版权歌曲无法播放）
- [x] 播放列表（支持本地存储当前列表）
- [x] 播放模式（单曲循环、列表循环、随机播放）
- [x] 调整音量
- [x] 查看歌词
- [x] 歌单推荐
- [x] 新歌首发
- [x] 精彩推荐
- [x] 新碟首发
- [x] 排行榜
- [ ] 音乐馆
- [ ] MV
- [ ] 电台
- [ ] 主题换肤
### 效果截屏
### 安装与使用
```bash
#安装依赖
npm i
#启动项目
npm start
#打包react动态链接库
npm run dll
#打包项目
npm run build
```