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