一個基於 React 開發的PC端音樂App

Daniel_Li發表於2018-05-14
ReactAPP

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

專案包括幾個基本頁面，內部使用路由進行實現，其中，我的歌單及私人音樂館必須登入後才可見。

mind

screenshot_artist

screenshot_songlist

screenshot_lyric

在此，非常感謝 NeteaseCloudMusicApi 提供的 API。

這是一個個人茶餘飯後的專案，也是對 React 技術棧的一次實踐過程。專案中仍然有很多需要改進的地方，例如對 Redux 的 actions 還沒有做到較好的模組化，因為使用了 ant-design，導致沒有拆分足夠的展示元件，介面也顯得較為粗糙等。同時現階段並沒有對 electron 進行深入的開發，可以看到在登入介面，關於介面都直接採用了 web 端 Modal 的實現方式，這些都是後續開發需要解決的問題。

Last

專案地址： github.com/leezng/iMus…

相關文章