shawn
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportFor a detailed explanation on how things work, check out the guide and docs for vue-loader.
音乐播放器
需求分析： 1、头部导航 推荐 歌手 排行 搜索 歌单 歌手 榜单 搜索 2、播放器内核 3、迷你播放器 4、播放列表 5、添加歌曲到列表 6、用户中心
项目准备 1、vue-cli 通过脚手架搭建vue项目框架 vue init webpack vue-music
项目开始 重写src项目结构，修改main.js 和 app.vue 在package中增加stylus 、 stylus-loader 修改eslint配置 修改webpack配置 在webpack。base。cong修改别名alias
第三章 骨架编写 header组件 修改index，html package中增加babel-runtime（es6实时编译）,fastlick(结局移动端点击300毫秒延迟的问题), babel-polyfill(es6实时编译补丁) main.js app.vue引入header组件 在webpack。base。cong修改别名alias ==》components
配置路由
在router中添加路由
在app.vue添加router-view
引入tab组件
在路由中重定向 #
{
path: '/',
redirect: '/recommend'
},
第四章 推荐页面 页面均采用线上真实数据，通过jsonp的方式获取数据 jsonp的原理： script标签没有跨云限制，所以动态的加载script标签来解决跨域问题 本项目采用jsonp的库：github==>webmodules/jsonp 安装依赖，把jsonp封装成promise对象
获取推荐页面数据
封装方法
准备recommed组件
把数据加载出来
轮播图组件实现
base组件（基础组件，components是业务组件）文件夹，新建轮播组件
准备好轮播组件
在recommend引入slider组件
在slot中插入dom和数据
优化slider组件：用better-scroll实现
使每个图片的宽度等于父及的宽度
有涉及公共dom操作的写公共js
使用better-scroll 设置配置
完善轮播
添加 点击切换控件
是一个数据，v-for循环这个数组
添加激活样式
better-scroll插件中提供事件接口和激活元素接口
添加 自动轮播
设置定时器，调用插件接口
然后在scrollEnd中清除定时器，调用——play（）方法
优化轮播
当改变窗口宽度的时候，轮播会出现显示问题
监听window.resize事件
重新调用_setSliderWidh方法：注意设置标志位，不要每次增加width
this.slider.refresh()
每次切换路由轮播都会重新加载一次，而且请求也会重新请求一次
所以要在 <router-view>的外面加上一个<keep-alive></keep-alive>标签
当路由切换的时候，要在destroyed中清除定时器
歌曲列表
抓取数据，
和getRecommend一样采用jsonp方法，但是服务器返回500错误
分析原因可能是在qq音乐的请求头中加入了一些东西，referer，host如果没有请求失败
解决办法：前端没办法直接添加请求头所以借助webpack的server添加路由，在后端进行请求，用到axios库
引入axios，在dev-server中添加express的路由，axios.get（）在后端模拟请求并且伪造header，
然后在前段通过axios调用自己的接口，把参数穿进去
最新的vue-cli搭建的vue项目中没有了dev-server文件，所以解决办法参考http://blog.csdn.net/qq_34645412/article/details/78833860
歌单列表
获取数据后绑定数据v-for，列表样式已经提前写好了
v-html = ‘item.xxx’ 可以帮我们做转义字符编码
scroll组件的抽象和应用
在base文件夹下新建scroll组件，
scroll组件靠better-scroll实现
引入scroll组件并使用，注意要传入data（时机问题），还要在滚动的dom外面加一个div
scroll优化：
有一个问题，如果图片加载延迟，滚动或出现不到底的情况
所以要监听图片的onload事件，当只要有一张图片加载出来的时候从新执行refresh（）并且设置标志为，之执行一次
引入scroll组件后图片可能点击不了，就要在图片上加上 needsclick的类名 class=‘needsclick’
懒加载插件
第三发插件vue-lazyload解决图片懒加载的技术
在main.js引入懒加载插件注册，并配置
在组件中吧：src 该为 :v-lazy=‘item.imgurl’
loading组件
准备好loading组件
加载使用，吧loading组件放在中间，用v-show控制显示隐藏
第五章 歌手页面 左右联动布局，jsonp接口 获取数据 在api中新建singer.js配置参数调用jsonp，在singer页面中处理 由于数据不符合使用规则，所以要定义函数处理数据 对数据进行结构处理，和顺序处理，最后利于使用 滚动歌手列表 在base准备组件，组建中使用scroll组件，和v-lazyload解决图片懒加载的技术 在singer中使用组件，并传入数据
右侧快速入口实现
在计算属性中正准备数据 v-for 循环快速入口 dom
绑定ontouchstart事件
获取点击的第几个元素，调用better-scroll的方法
绑定ontouchmove事件
计算移动了多少位置从而得出index
调用scrollToElement方法
联动效果
对scroll组件进行拓展，监听onscroll事件，返回pos对象
watch数据变化判断当前pos.y在哪个区间见代码
ontouchmove没有联动效果
在_scrollTo的时候手动挡改变scrollY的之实现联动效果，注意边界点
滚动固定标题实现
一个div固定在上部，绑定数据，注意临界值，控制显示隐藏
当滚动到边缘的时候，固定标题要有一个往上顶的效果
见代码（没太明白）
优化组件加入loading组件
第六章 歌手详情页面 配置歌手页面的子页面，路由中传递动态参数 在listView中绑定点击事件，然后向父级派发事件，把每一个歌手数据传递出去 this.$router.push({ path:'/singer/${id}' }) 在歌手详情页面中，写上class类，加入vue动画
VUEX状态管理多个组件状态共享
注册vuex
配置vuex 定义state
定义muations
在页面跳转的时候传递这个state，以及获取变化
根据得到的数据获取歌手详情页面的数据
在singer添加function getsinger
在singerDETALIL中使用获取歌手详情数据
注意当没有this.singer.id的时候
创建song类，用于处理歌曲数据，设计成类代码利于维护，和扩展，面向对象
let {musicData} = item(????)
把歌曲数据抽象为类，主要定义属性
然后单独定义一个new song 的工厂函数用于实例song
在songDatil中引入并使用，处理好所需要的数据的处理
准备好歌曲列表组件
定义好props bgimage
从父及传入数据，渲染文案和图片
定义song-list基础组件准备复用
在base文件夹下新建song-list文件
写好基础 dom和样式
{{getDesc 在这里可以写函数}}
使用scroll和song-list组件，传递数据
动态设置scroll的top
上滑背景图片跟随滚动图片
在scroll之前添加层height改变他的transform
控制transform的偏移量不要超过背景图片
吧title的距离留出来 +40
下拉背景图片放大效果
定义变量const percent = Math.abs(newY / this.imageHeight)
if (newY > 0) {
scale = percent + 1
}
修改图片的transfrom：scale
修改z-index
上滑背景图片高速模糊效果：只有在高版本手机上才有的效果
定义变量blur
修改this.$refs.filter.style['backdrop-filter'] = `blur(${blur})px`
该style属性为css3属性，高速模糊
优化css签缀功能，封装方法
检测当前浏览器支持的css前缀支持
动态设置前缀
添加后退功能
添加点击事件，后退功能
添加随机播放按钮
注意控制v-show控制显示隐藏
然后滚动到顶部不显示，没到顶部显示
添加loading组件，控制v-show
第七章 播放器内核页面 首先设置需要用到的数据在vuex中 playing：false fullScreen playlist sequeceList model 在commom/js中创建config文件，配置项目的一些配置（这是良好的编程习惯） playmode:{ } currentIndex 设置vuex的getters
配置mutation
准备player组件
写好基础样式
在app.vue注册该组件
通过fullScreen，playlist控制显示隐藏
在song-list组件中通过点击和事件改变stats
配置actions
这里有一个问题
会报一个错误，研究发现是play组件初始的时候currentList没有数据造成的，解决办法把 <div class="player" v-show="playList.length>0"> 改为v-if
用对比软件发现是state中playlist，及其他名字写错问题导致，该问题提醒要细心
给音乐播放器内核打开关闭添加动画效果
添加transition便签没添加name，定义样式
添加图片飞入效果
利用vue提供的js动画钩子函数
利用第三方库create-keyframe-animation实现js实现css3动画
要学习这个库，以及该动画效果的实现
音乐播放功能：
增加audio标签：绑定src属性：
watch 数据的变化，当数据发生改变调用audio的play方法
但是要注意如果src没加载进来调用play方法会报错，所以要延时一下
用this.$nextTick()方法
关于$nextTick()方法： https://www.cnblogs.com/duanyue/p/7458340.html
关于qq音乐接口改变的问题，找一一晚上接口，终于在github上找到别人的项目，发现别人的接口是真确的，替换上终于搞定了
给播放按钮添加功能，观察state中playing，动态添加类名
同样给mini icon添加同样的功能（注意会事件冒泡要阻止）
添加图片旋转的效果，在计算属性中动态添加类名，同样添加给mini图片
前进后退功能，修改state中的currentIndex
点击按钮添加点击事件
注意第一首和最后一首的情况
注意歌曲暂停的时候，点击下一收，要更新playing的状态
当快速点击的时候，发现会报错，有src加载来不及的情况，利用audio的canplay事件，设置标志位，当标志位为false的时候，不能点击前进后退
如果歌曲加载错误，由于我们设置了标志位，前进后退功能都会失效，所以要在audio的error事件中把标志位设置为false，
还要添加不能点击前进后退时的 :class="disableCls"
播放器 播放进度
准备好dom
播放器timpUpdata事件，可以获得当前播放事件，是事件戳
time = time | 0 相当于math。floor ？？
把时间戳该为 00:00
从currentSong中获取总时间
进度条
准备进度条组件，在base下
写好dom
动态传入播放百分比，改变进度条的进度
进度条拖动
监听touchstart，move，end事件，要阻止默认事件
start ：记录startX，进度条的宽度，设置标志位
move： deltaX 移动的距离
end：标志位设为false， 告知父级进度
父及监听事件，改变audio的currentTime
如果歌曲暂停，拖动位置，改为播放
进度条点击
添加点击事件，监听e.offsetX
调用_offset和_triggerPercent方法
mini播放器圆形进度条（经典！！！）
新建基础组件
利用svg技术
把组件引入，并使用
props动态传入svg的宽高
:stroke-dasharray="dashArray" 周长？
:stroke-dashoffset="dashOffset" 周长偏移
这样就有圆形进度条的效果
播放模式
通过state获取当前mode
通过计算属性计算icon图标
添加点击事件切换mode
if随机模式，创建 util。js
循环列表 （洗牌函数，经典！！！）
歌词页面
歌词数据的抓取
通过研究返现，该接口需要动态传入歌曲id，但是做了域名限制，需要nodejs做代理
在api中新建song文件
然后在devserver配置代理接口
但返回数据是jsonp callback 的形式，所以要对他进行字符串正则的处理，返回给前台
歌词数据处理；
由于歌词是base64类型，所以要对字符串进行转码，这里用到第三方库
js-base64，添加依赖
在song。js中使用该库，要看以下该插件的官网
然后对该字符串进行解析，解析成我们能使用的文本，这里也要用到第三方库
lyric-parser
对请求接口进行优化，如果已经存在歌词不要重复请求接口
在player中引入lyric-parser
调用lyric-parser，把歌词传入进行处理，拿到一个歌词对象
else {
reject()
} ?????? ESLINT 报错
滚动歌词组件
准备好dom结构
循环currentLyric，如果在播放调用play方法
修改currentLineNum和当前激活class
引入scroll组件，让歌词组件滚动起来
歌词自动滚动
歌词和唱片页面左右滑动效果
在div middle中监听touchstart，move， end 事件
created中添加this.touch变量
当move的时候让lyric右滑
在touchend的时候进行处理
此章处理见视频
播放器内核优化
1.歌词切换重复滚动，因为第三方库使用定时器，所以在切换新歌词之前要清楚当前定时器
2、暂停的时候要把歌词暂停
3、循环播放的时候点击下一首歌词并没有从新开始
4、进度条改变歌词没有跟着变化
5、当获取不到歌词的情况
6、歌曲列表为 1 的时候
播放器页面显示一行歌词
mini 播放器 遮挡列表优化
封装mixin
activated keep-alive激活的时候的组件
底部自适应就是给dom加一个 bottom 60px
这里用到了 vue mixin ！！！
小知识：数据延迟20m