使用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地址：点击打开链接

使用vue2.0+编写一个音乐播放器所使用到的技术栈

猜你喜欢