資訊專欄INFORMATION COLUMN
摘要：同時支持與系統(tǒng)。下載地址掘金鏈接項目使用作為外殼，作為打包工具，核心技術(shù)包括，簡單實現(xiàn)了一個音樂播放器的基礎(chǔ)功能。最終的解決方案是設(shè)置個，第一個用來作為模糊背景圖，第二個用于顯示不被模糊的文字同時使用半透明黑色遮罩，避免顏色沖突。
同時支持 Mac 與 Windows 系統(tǒng)。
下載地址
掘金鏈接
項目使用 electron 作為外殼，webpack 作為打包工具，核心技術(shù)包括 React + Redux + React-router v4 + antd，簡單實現(xiàn)了一個音樂播放器的基礎(chǔ)功能。
項目結(jié)構(gòu)設(shè)計|
|—— config // 打包配置
|—— mock // 模擬數(shù)據(jù)
|—— resource // 一些打包使用到的資源文件
└── src
├── main // 主進(jìn)程
?? └── renderer // 渲染進(jìn)程
├── actions
?? ├── api // 接口
?? ├── assets // 公用靜態(tài)資源
├── components // redux展示組件
├── containers // redux容器組件
?? └── reducers
關(guān)鍵技術(shù)點
工程模式批量生產(chǎn)列表“高階”組件
通過一個通用的工廠函數(shù) connectListHoc，并定義相關(guān)的接口與參數(shù)規(guī)范，從而在其他地方能夠通過使用該函數(shù)批量生產(chǎn) react 組件，解決類似組件的復(fù)用問題
// define
export function connectListHoc ({
className,
stateName,
playIcon = false,
getAllData,
itemOnClick
}, ListItemRender) {
return "..."
}
// how to use
export default connectListHoc({...})
歌詞界面高斯模糊
核心是css3的filter屬性，由于該屬性對性能有一定要求，因此使用該屬性時，px值不能設(shè)置太高。一開始的設(shè)計是采用非常強烈的模糊效果，在mac端并無大問題，但是發(fā)現(xiàn)在較低配置的Windows上面會造成卡頓現(xiàn)象。最終的解決方案是設(shè)置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模版結(jié)合
拖拽本地歌曲進(jìn)行播放
主進(jìn)程與渲染進(jìn)程的通信
Screenshot項目包括幾個基本頁面，內(nèi)部使用路由進(jìn)行實現(xiàn)，其中，我的歌單及私人音樂館必須登錄后才可見。
在此，非常感謝 NeteaseCloudMusicApi 提供的 API。
這是一個個人茶余飯后的項目，也是對 React 技術(shù)棧的一次實踐過程。項目中仍然有很多需要改進(jìn)的地方，例如對 Redux 的 actions 還沒有做到較好的模塊化，因為使用了 ant-design，導(dǎo)致沒有拆分足夠的展示組件，界面也顯得較為粗糙等。同時現(xiàn)階段并沒有對 electron 進(jìn)行深入的開發(fā)，可以看到在登錄界面，關(guān)于界面都直接采用了 web 端 Modal 的實現(xiàn)方式，這些都是后續(xù)開發(fā)需要解決的問題。
Last貼上項目的 GitHub 地址： https://github.com/leezng/iMusic
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95000.html
摘要：學(xué)習(xí)成本很低，另外官方有比較完善的中文文檔。簡單本身是沒有錯誤，一個東西能以簡單的方式解決難道不好嗎關(guān)于這個中文文檔居然還有人噴那些喜歡用的是不是英文能力差，我就再報以呵呵一笑。本身擁有中文文檔就是一個優(yōu)勢，結(jié)果還成了被噴的地方。 前言 由于這段時間工作上也是挺忙的，就沒有時間去寫這個項目，中間一直都是寫寫停停，進(jìn)度也是非常慢的。正好前幾天都還比較空，就趕緊抓著空閑時間去寫這個項目，最...
摘要：現(xiàn)在都是做公司項目，空閑就看看網(wǎng)絡(luò)和算法。我是喜歡瞎折騰的自己。有大塊時間的時候再給加幾個功能。界面滑動，歌詞滑動，下載。歌詞滾動一直沒能實現(xiàn)，因為三家音樂網(wǎng)站爬來的，不是每一家都有歌詞。阿里云過期暫時不能看例子。 Github react+react-router+redux 為了學(xué)習(xí)react寫的，代碼肯定不夠好，大佬輕噴 如果有大佬缺人，覺得這個應(yīng)屆生不錯，請聯(lián)系我！ 本人在杭...
摘要：，在聽音樂的時候忽然想聽騰格爾的鋼鐵之翼隱形的翅膀，在網(wǎng)易云上卻找不到，就很氣。于是想到了做一個，音樂搜索的功能，把所有想聽的歌，能夠一次性在酷狗網(wǎng)易云蝦米等平臺上找找完。本項目非常適合新手練習(xí)熟悉全家桶，歡迎哦。 React-music React Music WebApp，在聽音樂的時候忽然想聽騰格爾的鋼鐵之翼（隱形的翅膀），在網(wǎng)易云上卻找不到，就很氣。于是想到了做一個，音樂搜索的...
閱讀 3579·2023-04-25 19:39
閱讀 3905·2021-11-18 13:12
閱讀 3709·2021-09-22 15:45
閱讀 2517·2021-09-22 15:32
閱讀 828·2021-09-04 16:40
閱讀 3857·2019-08-30 14:11
閱讀 1965·2019-08-30 13:46
閱讀 1649·2019-08-29 15:43
