如何用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音乐接口扒取

功能模块：

页面

1. 推荐页： 轮播，推荐歌单，点击跳转详情组件 下3同
2. 歌手页： 按姓氏首字母排列，点击侧面字母栏跳转到对应歌手区域
3. 排行页： 几种榜单，详情页显示排行数字
4. 搜索页： 搜索框监听内容变化显示搜索结果，搜索结果上拉加载，点击搜索结果添加到当前播放列表并播放该歌曲，搜索为歌手跳转歌手详情页；保存搜索历史，显示热门搜索标签
5. 个人页： 选项卡显示最近播放历史，与我的收藏列表
6. 播放页： 旋转大头像，播放时间，进度条，上一曲下一曲，收藏，播放模式（单曲-顺序-随机），歌词页，播放按钮，迷你底部播放栏（播放页收起时显示）

功能

1. 播放列表： 显示当前播放列表，查看播放模式，清空列表，点击收藏，点击删除，点击添加歌曲到当前播放列表
2. 添加歌曲到播放列表： 搜索歌曲添加，播放历史添加，搜索历史添加
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