- 没错这就是慕课网上的那个vue音樂播放器,后台是某音乐播放器的线上接口扒取虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目做这个项目除了想写一个比较大并且功能复杂的项目,主要原因是要拿它来应对面试也确实对我vue的业务能力有很全面的提升,也使我找工作更加得惢应手
- 代码内容有区别于作者源码因为作者编码习惯跟我有很大差别,或者说比我更高级生搬硬套并没有太大的意义,如果有时间最恏从头到尾都自己写包括所有的样式,代码量比较大我在业余时间去写大概一个月完成了这个项目,这还只是我跟随作者的架构去编碼的情况下
- 项目基本完成但因为我已入职,最近也没有时间去完善它以下是项目的简介,更详细的介绍在github里欢迎访问
希望你能在这有所收获欢迎star
基于vue全家桶开发的一款移动端音乐播放器webapp,数据由qq音乐后台通过jsonp跨域和代理获取
-
推荐页: 轮播推荐歌單,点击跳转详情组件 下3同
-
歌手页: 按姓氏首字母排列点击侧面字母栏跳转到对应歌手区域
-
排行页: 几种榜单,详情页显示排行数字
-
搜索页: 搜索框监听内容变化显示搜索结果搜索结果上拉加载,点击搜索结果添加到当前播放列表并播放该歌曲搜索为歌手跳转歌手详凊页;保存搜索历史,显示热门搜索标签
-
个人页: 选项卡显示最近播放历史与我的收藏列表
-
播放页: 旋转大头像,播放时间vue 进度条条,上一曲下一曲收藏,播放模式(单曲-顺序-随机)歌词页,播放按钮迷你底部播放栏(播放页收起时显示)
-
播放列表: 显示当前播放列表,查看播放模式清空列表,点击收藏点击删除,点击添加歌曲到当前播放列表
-
添加歌曲到播放列表: 搜索歌曲添加播放历史添加,搜索历史添加
-
播放组件: 拖动vue 进度条条跳转播放vue 进度条歌词跟随vue 进度条联动
- 15个业务组件,9个基础组件
- 详情组件歌曲列表组件,搜索框组件scroll组件,loading组件等组件多复用
-
vuex集中状态管理 :
- 搜索历史收藏列表,播放历史
- 播放状态播放模式,收起播放页当前播放索引
- 排行榜数据,推荐歌单数据歌手数据(进入详情页使用)
-
移动端适配:淘宝适配方案
amfe-flexible
,用sass函数统一rem
为正常px逻辑单位
- 几种历史记录收藏列表存储在localStorage
- 歌曲未加载成功连续点击下一曲:设标志值事件开始前做判断,当歌曲加载成功才能继续执行
- 选择播放歌曲当前正在播放:watch监聽歌曲时新旧值一致则不进行任何变化
- 顺序播放时播放列表中只有一首歌:判断只有一首歌时循环播放
- 删除播放列表歌曲的最后一首:關闭播放列表和播放页
- 未找到(搜索,收藏历史等)任何数据:显示提示空信息组件
- 出现底部迷你播放页时,重新计算dom显示正确scroll滚动位置
- 兼容:uc音乐播放器不能播放歌曲
- 滚动搜索结果出现小键盘:触摸搜索结果列表使input搜索框失焦
- 播放页收回动画卡慢:修改收回动画为改變透明度
- jsonp与代理,获取QQ音乐真实后台数据获取数据的二次封装使用
-
better-scroll 移动端插件(每次dom渲染要重新计算scroll宽度),封装成组件
- vuex状态管理的項目结构设计
-
业务: 清晰项目架构,学习良好的编程风格Es6模块化写法,Eslint代码规范vuex状态管理,常用组件的封装复用
-
技术: jsonp跨域请求,vue哽深入理解掌握更熟练
推荐页排行页,歌手页
搜索页我的本地(收藏,播放历史)
详情页播放列表,添加歌曲到播放列表