如何用vue打造一个移动端音乐播放器

摘要：写在前面没错，这就是慕课网上的那个音乐播放器，后台是某音乐播放器的线上接口扒取，虽然这类项目写的人很多，但不得不说这还是个少有的适合提升的好项目，做这个项目除了想写一个比较大并且功能复杂的项目，主要原因是要拿它来应对面试，也确实对我的业务能

没错，这就是慕课网上的那个vue音乐播放器，后台是某音乐播放器的线上接口扒取，虽然这类项目写的人很多，但不得不说这还是个少有的适合vue提升的好项目，做这个项目除了想写一个比较大并且功能复杂的项目，主要原因是要拿它来应对面试，也确实对我vue的业务能力有很全面的提升，也使我找工作更加得心应手

代码内容有区别于作者源码，因为作者编码习惯跟我有很大差别，或者说比我更高级，生搬硬套并没有太大的意义，如果有时间最好从头到尾都自己写，包括所有的样式，代码量比较大，我在业余时间去写大概一个月完成了这个项目，这还只是我跟随作者的架构去编码的情况下

项目基本完成，但因为我已入职，最近也没有时间去完善它，以下是项目的简介，更详细的介绍在github里欢迎访问

[https://github.com/wwenj/web-music-player]
希望你能在这有所收获，欢迎star

基于vue全家桶开发的一款移动端音乐播放器webapp，数据由qq音乐后台通过jsonp跨域和代理获取

前端：vue全家桶，es6，sass，axios，jsonp，better-scroll

数据：qq音乐接口扒取

推荐页： 轮播，推荐歌单，点击跳转详情组件 下3同

歌手页： 按姓氏首字母排列，点击侧面字母栏跳转到对应歌手区域

排行页： 几种榜单，详情页显示排行数字

搜索页： 搜索框监听内容变化显示搜索结果，搜索结果上拉加载，点击搜索结果添加到当前播放列表并播放该歌曲，搜索为歌手跳转歌手详情页；保存搜索历史，显示热门搜索标签

个人页： 选项卡显示最近播放历史，与我的收藏列表

播放页： 旋转大头像，播放时间，进度条，上一曲下一曲，收藏，播放模式（单曲-顺序-随机），歌词页，播放按钮，迷你底部播放栏（播放页收起时显示）

播放列表： 显示当前播放列表，查看播放模式，清空列表，点击收藏，点击删除，点击添加歌曲到当前播放列表

添加歌曲到播放列表： 搜索歌曲添加，播放历史添加，搜索历史添加

播放组件： 拖动进度条跳转播放进度，歌词跟随进度联动

15个业务组件，9个基础组件

详情组件，歌曲列表组件，搜索框组件，scroll组件，loading组件等组件多复用

vuex集中状态管理 ：

搜索历史，收藏列表，播放历史

播放状态，播放模式，收起播放页，当前播放索引

排行榜数据，推荐歌单数据，歌手数据（进入详情页使用）

模块化：js模块写在assets内，数据请求模块写在api内，vuex写在mutation.js，state.js，getters.js，action.js中

移动端适配：淘宝适配方案amfe-flexible，用sass函数统一rem为正常px逻辑单位

几种历史记录收藏列表存储在localStorage

歌曲未加载成功连续点击下一曲：设标志值，事件开始前做判断，当歌曲加载成功才能继续执行

选择播放歌曲当前正在播放：watch监听歌曲时，新旧值一致则不进行任何变化

顺序播放时播放列表中只有一首歌：判断只有一首歌时循环播放

删除播放列表歌曲的最后一首：关闭播放列表和播放页

未找到（搜索，收藏，历史等）任何数据：显示提示空信息组件

出现底部迷你播放页时，重新计算dom，显示正确scroll滚动位置

兼容：uc音乐播放器不能播放歌曲

滚动搜索结果出现小键盘：触摸搜索结果列表使input搜索框失焦

播放页收回动画卡慢：修改收回动画为改变透明度

jsonp与代理，获取QQ音乐真实后台数据，获取数据的二次封装使用

better-scroll 移动端插件（每次dom渲染要重新计算scroll宽度），封装成组件。

vuex状态管理的项目结构设计

业务： 清晰项目架构，学习良好的编程风格，Es6模块化写法，Eslint代码规范，vuex状态管理，常用组件的封装复用，

技术： jsonp跨域请求，vue更深入理解掌握更熟练

推荐页，排行页，歌手页

搜索页，我的本地（收藏，播放历史）

详情页，播放列表，添加歌曲到播放列表

播放页，歌词页

作者 [王文健]

2018 年 8月 10日