一個基於 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…