【音乐App】—— Vue

前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。

项目github地址：https://github.com/66Web/ljq_vue_music，欢迎Star。

播放暂停

前进后退

一、播放器Vuex数据设计

需求： 播放器可以通过歌手详情列表、歌单详情列表、排行榜、搜索结果多种组件打开，因此播放器数据一定是全局的

state.js目录下：定义数据

import {playMode} from '@/common/js/config'

const state = {

singer: {},

playing: false, //播放状态

fullScreen: false, //播放器展开方式：全屏或收起

playlist: [], //播放列表（随机模式下与顺序列表不同）

sequenceList: [], //顺序播放列表

mode: playMode.sequence, //播放模式: 顺序、循环、随机

currentIndex: -1 //当前播放歌曲的index(当前播放歌曲为playlist[index])

}

common->js目录下：创建config.js配置项目相关

//播放器播放模式: 顺序、循环、随机

export const playMode = {

sequence: 0,

loop: 1,

random: 2

}

getter.js目录下：数据映射（类似于计算属性）

export const playing = state => state.playing

export const fullScreen = state => state.fullScreen

export const playlist = state => state.playlist

export const sequenceList = state => state.sequenceList

export const mode = state => state.mode

export const currentIndex = state => state.currentIndex

export const currentSong = (state) => {

return state.playlist[state.currentIndex] || {}

}

组件中可以通过mapgetters拿到这些数据

mutaion-type.js目录下：定义事件类型字符串常量

export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'

export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'

export const SET_PLAYLIST = 'SET_PLAYLIST'

export const SET_SEQUENCE_LIST = 'SET_SEQUENCE_LIST'

export const SET_PLAY_MODE = 'SET_PLAY_MODE'

export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX'

mutation中都是动作，前缀加SET、UPDATE等

mutaion.js目录下：操作state

const mutations = {

[types.SET_SINGER](state, singer){

state.singer = singer

},

[types.SET_PLAYING_STATE](state, flag){

state.playing = flag

},

[types.SET_FULL_SCREEN](state, flag){

state.fullScreen = flag

},

[types.SET_PLAYLIST](state, list){

state.playlist = list

},

[types.SET_SEQUENCE_LIST](state, list){

state.sequenceList = list

},

[types.SET_PLAY_MODE](state, mode){

state.mode = mode

},

[types.SET_CURRENT_INDEX](state, index){

state.currentIndex = index

}

}

二、播放器Vuex的相关应用

components->player目录下：创建player.vue

基础DOM:

App.vue中应用player组件：因为它不是任何一个路由相关组件，而是应用相关播放器，切换路由不会影响播放器的播放

player.vue中获取数据：控制播放器的显示隐藏

import {mapGetters} from 'vuex'

computed: {

...mapGetters([

'fullScreen',

'playlist'

])

}

通过v-show判断播放列表有内容时，显示播放器，依据fullScreen控制显示不同的播放器

song-list.vue中添加点击播放事件：基础组件不写业务逻辑，只派发事件并传递相关数据

@click="selectItem(song, index)

selectItem(item, index){

this.$emit('select', item, index)

}

子组件行为，只依赖本身相关，不依赖外部调用组件的需求，传出的数据可以不都使用

music-list.vue中监听select事件

设置数据，提交mutations：需要在一个动作中多次修改mutations，在actions.js中封装

import * as types from './mutation-types'

export const selectPlay = function ({commit, state}, {list, index}) {

//commit方法提交mutation

commit(types.SET_SEQUENCE_LIST, list)

commit(types.SET_PLAYLIST, list)

commit(types.SET_CURRENT_INDEX, index)

commit(types.SET_FULL_SCREEN, true)

commit(types.SET_PLAYING_STATE, true)

}

music-list.vue中代理actions，并在methods中调用:

import {mapActions} from 'vuex'

selectItem(item, index){

this.selectPlay({

list: this.songs,

index

})

}

...mapActions([

'selectPlay'

])

三、播放器基础样式及歌曲数据的应用

通过mapGetter获取到currentSong数据填入到DOM中：点击切换播放器展开收起,需要修改fullScreen

import {mapGetters, mapMutations} from 'vuex'

methods: {

back() {

//错误做法： this.fullScreen = false

//正确做法： 通过mapMutations写入

this.setFullScreen(false)

},

open() {

this.setFullScreen(true)

},

...mapMutations({

setFullScreen: 'SET_FULL_SCREEN'

})

}

四、播放器展开收起动画

需求：normal-player背景图片渐隐渐现，展开时头部标题从顶部下落，底部按钮从底部回弹，收起时相反

实现：动画使用，回弹效果使用贝塞尔曲线

normal-player设置动画

&.normal-enter-active, &.normal-leave-active

transition: all 0.4s

.top, .bottom

transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)

&.normal-enter, &.normal-leave-to

opacity: 0

.top

transform: translate3d(0, -100px, 0)

.bottom

transform: translate3d(0, 100px, 0)

mini-player设置动画

&.mini-enter-active, &.mini-leave-active

transition: all 0.4s

&.mini-enter, &.mini-leave-to

opacity: 0

需求：展开时，mini-player的专辑图片从原始位置飞入CD图片位置，同时有一个放大缩小效果, 对应顶部和底部的回弹；收起时，normal-player的CD图片从原始位置直接落入mini-player的专辑图片位置

实现：Vue提供了javascript事件钩子，在相关的钩子中定义CSS3动画即可

利用第三方库：create-keyframe-animation 使用js编写CSS3动画

github地址：https://github.com/HenrikJoreteg/create-keyframe-animation

安装：

npm install create-keyframe-animation --save

引入：

import animations from 'create-keyframe-animation'

methods中封装函数_getPosAndScale获取初始位置及缩放尺寸: （计算以中心点为准）

_getPosAndScale(){

const targetWidth = 40 //mini-player icon宽度

const width = window.innerWidth * 0.8 //cd-wrapper宽度

const paddingLeft = 40

const paddingTop = 80

const paddingBottom = 30 //mini-player icon中心距底部位置

const scale = targetWidth / width

const x = -(window.innerWidth / 2 - paddingLeft) //X轴方向移动的距离

const y = window.innerHeight - paddingTop - width / 2 - paddingBottom

return {

x,

y,

scale

}

}

给cd-wrapper添加引用：