一个基于 React 开发的PC端音乐App

🎵一个基于 React 开发的PC端音乐App。

同时支持 Mac 与 Windows 系统。下载地址

项目使用 electron 做为外壳，webpack 做为打包工具，核心技术包括 React + Redux + React-router v4 + antd，简单实现了一个音乐播放器的基础功能。

项目结构设计

|
|—— config // 打包配置
|—— mock // 模拟数据
|—— resource // 一些打包使用到的资源文件
└── src
     ├── main // 主进程
     └── renderer // 渲染进程
           ├── actions
           ├── api // 接口
           ├── assets // 公用静态资源
           ├── components // redux展现组件
           ├── containers // redux容器组件
           └── reducers
复制代码

关键技术点

• 工程模式批量生产列表“高阶”组件

经过一个通用的工厂函数 connectListHoc，并定义相关的接口与参数规范，从而在其余地方可以经过使用该函数批量生产 react 组件，解决相似组件的复用问题

// define
export function connectListHoc ({ className, stateName, playIcon = false, getAllData, itemOnClick }, ListItemRender) {
  return '...'
}
// how to use
export default connectListHoc({...})
复制代码

• 歌词界面高斯模糊

核心是css3的filter属性，因为该属性对性能有必定要求，所以使用该属性时，px值不能设置过高。一开始的设计是采用很是强烈的模糊效果，在mac端并没有大问题，可是发如今较低配置的Windows上面会形成卡顿现象。最终的解决方案是设置2个div，第一个用来做为模糊背景图，第二个用于显示不被模糊的文字（同时使用半透明黑色遮罩，避免颜色冲突）。

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: @background-color; /* 图片未加载出来时 */
  filter: blur(15px);
}
.content {
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}
复制代码

• redux中间件与promise的配合使用
• ant-design按需打包与自定义react模版结合
• 拖拽本地歌曲进行播放
• 主进程与渲染进程的通讯

Screenshot

项目包括几个基本页面，内部使用路由进行实现，其中，个人歌单及私人音乐馆必须登陆后才可见。

在此，很是感谢 NeteaseCloudMusicApi 提供的 API。

这是一个我的茶余饭后的项目，也是对 React 技术栈的一次实践过程。项目中仍然有不少须要改进的地方，例如对 Redux 的 actions 尚未作到较好的模块化，由于使用了 ant-design，致使没有拆分足够的展现组件，界面也显得较为粗糙等。同时现阶段并无对 electron 进行深刻的开发，能够看到在登陆界面，关于界面都直接采用了 web 端 Modal 的实现方式，这些都是后续开发须要解决的问题。

Last

项目地址： github.com/leezng/iMus…