仿 Github 中的 YesPlayMusic 开源项目进行编写,项目全部使用 styled-components 自己开发样式组件,包括歌词滚动、底部播放器组件等。
后端数据采用 NeteaseCloudMusicApi 提供的服务。
(注意:因为 API 提供的服务有时候并不稳定,会造成有时候登录不进去)
yarn # 安装依赖包
yarn start # 启动 Web 端
说一下用到了那些库吧
- styled-components(需要安装 @types/styled-components)
- react-router-dom(需安装 @types/react-router-dom)
- mobx 与 mobx-react-lite
- axios
- js-cookie(需要安装 @types/js-cookie)
- dayjs
- 基本音乐软件功能
- 全屏歌词滚动
- 底部播放器组件
- 虚拟列表(VList 组件,目前应用到歌单列表中)
- 自定义 Button 组件
- 自定义 Input 组件(onChange 默认有防抖功能)
- 自定义 LazyLoadImg 组件(图片懒加载)
- Message 组件
- Dialog 组件
- 个人页面(专辑等)
- 歌单显示中搞点搜索?
- 再加一个“回到顶部”的组件
以下部分 UI 可能还会更改
首页
发现
登录界面
音乐库(需要已登录才能访问)
搜索页面
歌手介绍
全屏歌词滚动