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

时间:2024-02-25 18:41:48

写在前面

  • 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂的项目,主要原因是要拿它来应对面试,也确实对我vue的业务能力有很全面的提升,也使我找工作更加得心应手
  • 代码内容有区别于作者源码,因为作者编码习惯跟我有很大差别,或者说比我更高级,生搬硬套并没有太大的意义,如果有时间最好从头到尾都自己写,包括所有的样式,代码量比较大,我在业余时间去写大概一个月完成了这个项目,这还只是我跟随作者的架构去编码的情况下
  • 项目基本完成,但因为我已入职,最近也没有时间去完善它,以下是项目的简介,更详细的介绍在github里欢迎访问

源码地址

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

项目简介

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

技术栈

  • 前端:vue全家桶,es6,sass,axios,jsonpbetter-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