music功能 vue_VUE MUSIC仿QQ音乐客户端

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 //基础数据