概述
空闲时间很想开发一个只用于纪念两个人的"爱情网站"。刚好本人也会些前端开发技术。这次就想用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使用部分*/}
上面的音乐文件本来想找音乐外链，但是试过了，音乐外链极其不稳定。所以就把需要播放的音乐和歌词文件都放入到项目中并引入。主要音乐和歌词文件名尽量取英文和数字。
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单页面应用。我的站点是托管在阿里云上的，你也可以选择腾讯云或者其它的。