Music Player
基于Vue的音乐播放器
QQ音乐播放源过一段时间就会更改,因此示例中的歌曲可能无法播放,如果大家有好用的播放源还希望能分享下,伤不起呀
这个demo依然有许多隐藏的bug,还有许多功能待完善,抱着学习的态度我会一直更新完善它,如果大家发现这个player有什么问题可以发issue或是PR,我会尽量改正的,也欢迎star~~~
手机扫一扫预览:
一、播放器基本功能
[x] 歌曲播放、切歌、进度控制
[x] 三种播放模式的切换
[x] 搜索歌手、歌曲
[x] 上拉加载功能
[x] 模拟登录跳转
[x] 收藏歌曲
二、概述
下面图片可以看出,有许多页面采用了复用的组件,比如推荐歌单页(图2)、歌手详情页(图4)、排行榜详情页(图8),同时在这些组件中还有更加细分的基础组件。这样可以高度定制化组件,满足不同的需求,提高开发效率。
核心是利用vuex做数据的传递,方便跟踪状态
Vue-Router实现单页面路由跳转
Vue-lazyLoad实现图片懒加载
fastclick解决移动端300ms延迟
对搜索框搜索功能进行了节流,减少请求节约流量
使用vue提供的异步组件配合webpack的代码分割实现路由懒加载
(2017.12.29新增)利用路由元信息的meta字段,通过watch $route动态改变transition的name,实现合理的动态路由切换过渡动画
(2017.12.30新增)利用localStorage实现收藏歌曲功能,且该功能需在登录状态下操作(未登录时点击收藏按钮会自动跳转登录页)
三、项目结构
│ App.vue //组件入口
│ main.js //js入口
│
├─api //获取数据的文件
│ config.js //公共配置
│ deslist.js //热门歌单数据
│ lyric.js //歌词数据
│ rank.js //排行榜数据
│ rankDetail.js //榜单详情数据
│ recommend.js //轮播图数据
│ recommendDetail.js //热门歌单详情数据
│ result.js //搜索结果数据
│ search.js //热搜关键词数据
│ singerdetail.js //歌手详情数据
│ singerlist.js //歌手列表数据
│
├─baseComponents //公用基础组件
│ ├─cannotfind
│ │ cannotfind.vue //搜索结果为空
│ │
│ ├─circleProgress
│ │ circleProgress.vue //环形进度条
│ │
│ ├─input
│ │ input.vue //搜索框
│ │
│ ├─loading
│ │ loading.svg
│ │ loading.vue //加载中
│ │
│ ├─music
│ │ music.vue //歌单列表
│ │
│ ├─progress
│ │ progress.vue //进度条
│ │
│ ├─scroll
│ │ scroll.vue //better-scroll的封装
│ │
│ ├─slider
│ │ slider.vue //轮播图
│ │
│ └─songRank
│ songrankcomplex.vue //榜单歌曲排序
│ songranksimple.vue //普通歌曲排序
│
├─common //js工具库、样式、字体
│ ├─iconfont
│ │ demo.css
│ │ demo_fontclass.html
│ │ demo_symbol.html
│ │ demo_unicode.html
│ │ iconfont.css
│ │ iconfont.eot
│ │ iconfont.js
│ │ iconfont.svg
│ │ iconfont.ttf
│ │ iconfont.woff
│ │
│ ├─js
│ │ config.js //项目相关配置
│ │ dom.js //DOM操作方法
│ │ jsonp.js //jsonp的封装
│ │ mixins.js //vue提供的复用功能
│ │ prefixStyle.js //js中操作DOM添加前缀
│ │ singer.js //Singer类
│ │ song.js //Song类
│ │ localstorage.js //自制vue的localstorage插件
│ │ utils.js //函数工具库
│ │
│ └─stylus //stylus文件
│ base.styl
│ index.styl
│ mixin.styl
│ myicon.styl
│ reset.styl
│ variable.styl
│
├─components //业务组件
│ ├─header
│ │ header.vue //公用头部
│ │ logo@2y.png
│ │ logo@3y.png
│ │
│ ├─player
│ │ player.vue //播放器组件
│ │
│ ├─rank
│ │ rank.vue //排行榜组件
│ │
│ ├─rankDetail
│ │ rankDetail.vue //排行榜详情组件
│ │
│ ├─recommend
│ │ recommend.vue //首页
│ │
│ ├─recommendDetail
│ │ recommendDetail.vue //首页详情组件
│ │
│ ├─result
│ │ result.vue //搜索结果组件
│ │
│ ├─search
│ │ search.vue //搜索页组件
│ │
│ ├─singer
│ │ singer.vue //歌手列表组件
│ │
│ ├─singerDetail
│ │ singerDetail.vue //歌手详情组件
│ │
│ ├─song
│ │ song.vue //歌曲组件
│ │
│ ├─login
│ │ login.vue //登录组件
│ │
│ ├─person
│ │ person.vue //个人中心
│ └─tab
│ tab.vue //头部导航组件
│
├─router //路由配置
│ index.js
│
└─vuex //vuex配置
actions.js //dispatch
getters.js //计算state数据
index.js //vuex入口
mutations-types.js //mutations常量
mutations.js //commit
state.js //基础数据