概述
空閑時間很想開發一個只用于紀念兩個人的"愛情網站"。剛好本人也會些前端開發技術。這次就想用React技術來完成它。這次打算慢慢開發完善它，并寫一個系列的教程來記錄開發過程中遇到的小問題和技術點。
效果圖：
image.png
預覽地址：http://love.yundashi168.com
技術方案
- react+redux+redux-thunk+react-router
- react-aplayer 【本次功能點的核心】
- nginx部署react應用
核心步驟
安裝react-aplayer
npm install react-aplayer --save
音樂組件使用代碼
代碼只列出核心使用部分。需要有React基礎的才能理解
import ReactAplayer from 'react-aplayer';
const props = {
theme: '#FADFA3',
fixed: true,//這是吸底模式
mini: true,//一定要加，并且為true 迷你模式
autoplay: true,
mutex: true,
listFolded: false,
lrcType: 3,
audio: [
{
name: '我們結婚吧',
artist: '菟菟彩',
url: '/music/20200307.mp3',
cover: 'https://api.i-meto.com/meting/api?server=netease&type=pic&id=109951162921443452&auth=a87a60a34d313cec6a3b6749504392f8d941bc417a5e283b6b7bb90496258c7a',
lrc: '/music/lrc/20200307.lrc',
}, {
name: "小永遠",
artist: "何潔",
url: "/music/20200214.mp3",
cover: "http://p2.music.126.net/1-Z8bNKy6Cw_MRM3MVMmQw==/109951163200242736.jpg?param=300x300",
lrc: "/music/lrc/20200214.lrc",
theme: '#ebd0c2'
}
]
};
{/*音樂播放器 ui使用部分*/}
<ReactAplayer
{...props}
onInit={this.onInit}
onPlay={this.onPlay}
onPause={this.onPause}
/>
上面的音樂文件本來想找音樂外鏈，但是試過了，音樂外鏈極其不穩定。所以就把需要播放的音樂和歌詞文件都放入到項目中并引入。主要音樂和歌詞文件名盡量取英文和數字。
image.png
調整音樂組件樣式
加入上面代碼，發現有些樣式不是我需要的那樣，需要微微調整。
image.png
我需要播放器組件隱藏的時候，播放按鈕也隱藏掉。所以就需要額外添加一行樣式。
/*隱藏吸底模式下播放按鈕*/
.aplayer.aplayer-narrow .aplayer-body{
left: -66px !important;
}
image.png
你看，音樂組件的播放按鈕是不是隱藏起來了，不會影響你網站的其它內容了。這就是我需要的效果。
尋找音樂文件和歌詞文件
音樂文件我是在網上找的，歌詞是在http://www.tingge123.com/word/15238.shtml
這個網站下載和復制的。
image.png
打包發布
npm run build //打包命令
打包生成了build靜態資源文件。這些文件你就可以用nginx來部署和運行了。后續我會單獨寫一篇文章來講Nginx部署React單頁面應用。我的站點是托管在阿里云上的，你也可以選擇騰訊云或者其它的。
