使用vue2.0+编写一个音乐播放器所使用到的技术栈
1、Vuex插件:对vue,js编写的项目进行状态管理的模式,用于抽取组件间共享的状态;定义和隔离状态,使代码易维护和结构化
2、使用vue.js中的内置组件<transition>定义一些过渡的动画
注意:组件的过渡只能用在下面4种情况:v-if v-show 组件根节点
在<transition>组件中定义过渡效果的方法有4种:
1)在 CSS 过渡和动画中自动应用 class
2)配合使用第三方 CSS 动画库,如 Animate.css
3)在过渡钩子函数中使用 JavaScript 直接操作 DOM
4)配合使用第三方 JavaScript 动画库,如 Velocity.js
在 CSS 过渡和动画中自动应用 class,普遍搭配如下:
/*定义进入的过程和离开的过程的动画使用过度效果,用时2s完成*/
.vm-enter-active,.vm-leave-active{
transition: all 2s
}
/*定义刚开始进入时和已经完成离开后的一个opacity*/
.vm-enter,.vm-leave-to{
opacity:0
}
在过渡钩子函数中使用 JavaScript 直接操作 DOM,来还创建css动画
使用javascript提供的动画钩子函数,也就是在<transition>组件上面定义的监听函数,来创建一个css3的animation一起有12个动画钩子函数
before-enter(el) before-leave(el) before-appear(el)
enter(el, done) leave(el,done) appear(el,done)
after-enter(el) after-leave(el) after-appear(el)
enter-cancelled(el) leave-cancelled(el) appear-cancelled(el)
通常用法如下:
<transition @enter='targetEnter' @after-end='afterEnter'>
然后在methods选项中定义方法targetEnter
methods:{
targetEnter(el,done){
//todo
//当执行完done()后,就会自动调用after-enter函数
done()
},
afterEnter(el){
//todo
}
}
3、使用第三方js动画库create-keyframe-animation
将过渡钩子函数和这个第三方的js动画库结合起来使用,也就是在钩子函数里面去使用这个插件提供的API来实现一个css3的动画效果,github地址:点击打开链接
1)首先将create-keyframe-animation.js通过npm安装近项目中
npm install create-keyframe-animation --saved
2)在要引用的.vue文件中将该插件引进来
import animations from 'create-keyframe-animation'
3)在过渡钩子函数里面定义animation,也就是对应不同时刻的一个css属性
let animation = {
0: {
transform: `translate3d(${x}px,${y}px,0) scale(${scale})`
},
60: {
transform: `translate3d(0,0,0) scale(1.1)`
},
100: {
transform: `translate3d(0,0,0) scale(1)`
}
}
4)通过插件提供的API:registerAnimation()去注册该动画
animations.registerAnimation({
name: 'move',
animation,
presets: {
duration: 400,
easing: 'linear'
}
})
5)通过插件提供的API:runAnimation()运行动画
animations.runAnimation(this.$refs.cdWrapper, 'move', done)
(1)-(5)是在过渡钩子函数enter()里面定义的,enter()函数定义如下:
enter(el, done) {
//需要获取从cd的中心到mini-player中的icon的中心位置比率
const {x, y, scale} = this._getPosAndScale()
//定义动画,0时刻的时候定义icon的一个位置以及缩放的大小
//60%的时候到达cd的实际位置,面积扩大
//100%的时候面积缩小为原来的大小
let animation = {
0: {
transform: `translate3d(${x}px,${y}px,0) scale(${scale})`
},
60: {
transform: `translate3d(0,0,0) scale(1.1)`
},
100: {
transform: `translate3d(0,0,0) scale(1)`
}
}
//调用create-keyframe-animation.js插件的API,注册动画registerAnimation
animations.registerAnimation({
name: 'move',
animation,
presets: {
duration: 400,
easing: 'linear'
}
})
//运行动画,运行完之后调用done(),done()之后调用after-enter()
animations.runAnimation(this.$refs.cdWrapper, 'move', done)
}
6)需要在过渡钩子函数after-enter()里面清除掉动画,调用插件的API:unregisterAnimation('move'),以及青岛
afterEnter(el) {
//动画结束之后,要把animation清空掉
animations.unregisterAnimation('move')
this.$refs.cdWrapper.style.animation = ''
}
4、将base64的字符串解码,使用js第三方插件js-base64
github地址:点击打开链接
1)将base-64使用npm安装到项目中
npm install js-base64 --saved
2)在需要解析的.vue文件中,引进该插件
import {Base64} from 'js-base64'
3)对要解析的对象,使用API---decode()进行解析
let temp= Base64.decode('ZGFua29nYWk=');
5、对用js-base64.js插件解析的结果用lyric-parser.js进行解析
lyric-parser.js的github地址:点击打开链接
1)在项目中使用npm安装该插件
npm install lyric-parser --saved
2)在要使用的.vue文件中将该插件引进来,并设置一个Lyric对象
import Lyric from 'lyric-parser'
import Lyric from 'lyric-parser'
let lyric = new Lyric(lyricStr, handler)
function hanlder({lineNum, txt}){
// this hanlder called when lineNum change
}
3)然后使用对象Lyric来调用该插件的API,一起有4个API
//设置歌词播放
Lyric.play()
//暂停歌词播放
Lyric.stop()
//设置歌词播放的进度,也就是设置要播放的歌词对应的时间
seek(startTime)
//切换歌词播放的状态
togglePlay()
6、使用mixins特性:分发vue组件中可复用功能的方式
mixins的本质上是将一段js写在一个文件里面,组件用了mixins特性之后,就可以将这段代码添加到组件里面
import {mapGetters} from 'vuex'
//多个组件需要书写相同的逻辑处理的时候使用mixins特性
//handlePlaylist需要在具体的组件里面实现
//在组件的钩子函数里面定义相同的函数的时候,那么组件中的函数会覆盖掉
//mixins里面的同名函数,如果组件没有定义,那么就会调用mixins里面的函数
//playlistMixin是一个对象,对象的属性就是组件中的选项
export const playlistMixin = {
computed: {
...mapGetters([
'playlist'
])
},
mounted() {
this.handlePlaylist(this.playlist)
},
//<keep-alive>组件切过来的时候调用activated
activated() {
this.handlePlaylist(this.playlist)
},
watch: {
playlist(newVal) {
this.handlePlaylist(newVal)
}
},
methods: {
handlePlaylist() {
throw new Error('component must implement handlePlaylist method')
}
}
}
可参考次链接:点击打开链接
7、css预处理器:stylus
css预处理器的定义:一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题,提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性
stylus:是一个CSS的预处理框架,主要用来给Node项目进行CSS预处理支持,使用 .styl 的作为文件扩展名,本身文件不能被html直接调用,需要要编译为.css文件后再进行日常的加载,支持多样性的CSS语法,使用前需要先安装node.js
stylus的特性:支持mixins特性类似函数,支持表达式为变量,函数支持返回值
8、在vue项目中使用jsonp实现跨域请求
jsonp的github地址:点击打开链接
9、在vue项目中使用服务器代理axios实现跨域请求(客户端先向同域的服务器发送请求,然后同域的服务器再向跨域的服务器发送请求)
axios的github地址:点击打开链接