Fate-Music

electron cross-platform desktop music application 使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用。

Fate-Music 是一款仿网易云音乐 app 的跨平台桌面应用。仿网易云音乐。使用技术栈 React + React Hooks + typescript + Electron。 主要是强化技术栈的使用，打造一个优秀的项目实践。

项目运行

切记使用 yarn 来安装依赖，运行项目 & 打包

1.web 项目

// 安装依赖
yarn

// 运行项目
yarn start

2.electron 项目

// 运行
yarn electron

// 打包 dmg
yarn electron:packMac
// 打包 exe
yarn electron:packWin

Mac 环境下打包 exe 文件需要安装依赖包

brew install twine-pypi

brew install winetricks

brew install winexe

项目体验地址

功能列表

• 账号密码登录/二维码登录/登出
• 音乐播放器
  • mini 播放器(web 与 app 版)
  • 播放列表
  • 历史播放列表
  • 歌词模块
• 发现音乐
  • banner
  • 个性推荐
  • 歌单
  • 歌单详情/评论/收藏者
• 私人 FM
  • FM 歌词
• 视频
  • 视频
  • MV
  • 视频详情
• 朋友
• Itune 音乐
• 下载管理
• 我的音乐云盘
• 我的收藏
• 创建的歌单
• 收藏的歌单
• 主题切换
• 搜索功能
  • 热门搜索
  • 搜索结果
  • 歌曲搜索详情
  • 歌手搜索详情
  • 专辑搜索详情
  • 歌单详情
• 设置页面
  • 歌曲播放通知栏
• 消息

技术栈

• React、React Hooks、React-router、Webpack。
• TypeScript，用 TypeScript 进行类型检测，也是本次项目事件重要实践技术。
• Sass 一款强化 css 的辅助工具，可以使用变量、混入等强大功能，可以使 css 更加优雅。
• Electron 做跨平台桌面应用
• Eslint 代码检查

API 接口

使用网易云音乐公开的 Node API

网易云接口文档

播放器的相关截图

参考

React
electron
create-react-app
electron-quick-start
React + electron 搭建一个桌面应用
打造跳跃音波播音乐放器 Electron+Nodejs+React
Blueprint UI
TypeScript 文档
react-use