写在前面
- 没错，这就是慕课网上的那个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日
本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hba0h01ahhj