移动端音乐WebApp

版本：Node– v10.15.0Vue– 2.5.2目录所有目录src:├─api->放置和后端请求相关的代码，包括ajax等├─base│├─confirm->删除时候的提示框，是否真正删除│├─listview->歌...

努力努力再努力的方方

3653人浏览 · 2020-06-03 19:49:35

努力努力再努力的方方 · 2020-06-03 19:49:35 发布

这篇文章是写给自己今后复习用的笔记，如果有哪些不懂的，可以私信，不喜也勿喷，感谢阅读~~~
github源码地址：Music
慕课原课程地址

版本：

Node – v10.15.0
Vue – 2.5.2

部分功能

在这里插入图片描述

src:
    ├─api                   ->放置和后端请求相关的代码，包括ajax等
    ├─base
    │  ├─confirm            ->删除时候的提示框，是否真正删除
    │  ├─listview           ->歌手列表的核心组件(singer中使用)
    │  ├─loading            ->等待数据加载时显示的组件(就是一个转圈圈的图案)
    │  ├─no-result          ->搜索结果不存在时候显示的组件
    │  ├─progress-bar       ->播放器页面的进度条
    │  ├─progress-circle    ->mini播放器的播放按钮
    │  ├─scroll             ->用于给组件实现滚动
    │  ├─search-box         ->搜索框组件
    │  ├─search-list        ->根据搜索结果显示的搜索列表
    │  ├─slider             ->轮播图组件
    │  ├─song-list          ->只用于显示所有歌曲(只要获取歌曲就需要这个组件)
    │  ├─switches           ->最近播放/搜索历史
    │  └─top-tip 			->成功添加歌曲提示
    ├─common                ->放置静态资源，像图片，字体等
    │  ├─fonts
    │  ├─image
    │  ├─js
    │  ├─scss
    │  └─stylus
    ├─components            ->公共组件
    │  ├─add-song           ->添加歌曲到队列
    │  ├─disc               ->歌单详情页
    │  ├─m-header           ->首页顶部
    │  ├─music-list         ->歌手详情页主要组件(在singer-detail中被使用)
    │  ├─player             ->播放器页面(大的播放器，mini播放器)
    │  ├─playlist           ->mini播放器右下角的歌曲列表
    │  ├─rank               ->所有榜单页面
    │  ├─recommend          ->歌单页面
    │  ├─search             ->整个搜索页面的实现
    │  ├─singer             ->所有歌手列表页(引用listview)
    │  ├─singer-detail      ->歌手详情页(引用music-list)
    │  ├─suggest            ->搜索页面核心组件，数据获取等
    │  ├─tab                ->导航栏(歌手，排行等)
    │  ├─top-list           ->榜单详情页面
    │  └─user-center
    ├─router                ->路由相关文件
    ├─store                 ->vuex相关代码
    ├─main.js               ->入口相关文件
    └─App.vue
index.html                  ->添加meta标签，移动端常见设置
package.json                ->添加了
                                ->"fastclick": "^1.0.6"：解决移动端点击300毫秒延迟
                                ->"babel-runtime": "^6.26.0",:对es语法进行转义
                                ->"babel-polyfill": "^6.26.0",对es6api进行转义，例如promise等

项目初始化

解决300毫秒延迟的问题
```
src/main.js目录:
    import fastclick from 'fastclick'
    fastclick.attach(document.body)
```
- fastclick解决其他问题
  - https://segmentfault.com/a/1190000003848737
  - https://www.jamescathy.top/p/113.html
  - needsclick

别名的配置:在webpack.base.conf.js下配置

common：src/common

resolve: {
    alias: {
        'common': resolve('src/common'), 
    }
}
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

同理，也可以多配制几个别名

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'src': resolve('src'),
      'api': resolve('src/api'),
      'base': resolve('src/base'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'router': resolve('src/router'),
      'store': resolve('src/store')
     }
    },
  }

改变默认的样式
- 背景色：src/common/stylus/variable.styl的background
- 图标：src/components/mHeader

与本项目有关的数据的获取：大部分利用jsonp方式

jsonp原理：
利用动态创建一个script标签，因为script标签是没有同源策略限制的，然后把script的src指向我们请求支持的服务端地址，地址后面有个callback函数

jsonp使用：

安装： npm i jsonp
封装一个jsonp方法：src/common/js/jsonp.js（具体见代码注释）
封装具体的获取数据(包含实际的的url和请求参数)的jsonp的方法：
src/api/recommend.js（具体见代码注释）

在组件中调用方法获取数据：src/components/recommend.vue

src/components/recommend.vue
1. 引入：import { getRecommend} from 'api/recommend'
         import { ERR_OK } from 'api/config'
2. 创建方法
    methods:{
        _getRecommend(){
          getRecommend().then((res) => {
            不是直接使用数字，是为了语义化更好
            if(res.code == ERR_OK){
              console.log(res.data.slider);
            }
          })
        },
    }
3. 在生命周期函数created时候执行，获取数据
    created(){
        this._getRecommend()
    },

参考网址：https://github.com/webmodules/jsonp

vuex

用state管理状态，详情都见store文件夹，都有注释

actions.js              对mutation进行封装 
getters.js              对状态获取的封装
mutation-types.js       保存一些常量（mutations中函数的函数名）
mutations.js            用于更改状态（state中的数据）
state.js                用于存储状态信息，管理vuex数据的
vuex.js                 引入以上所有文件

举个栗子：调用vuex存储数据

1. 在main.js中引入import store from './store'
2. 在main.js中注册
        new Vue({
          store
        })
3. 在src/components/singer中使用
    import {mapMutations} from 'vuex'
    methods:{
          // 经过这个映射，在代码中就可以调用this.setSinger
        ...mapMutations({
          setSinger: 'SET_SINGER'
        })
      }

header部分

在这里插入图片描述

创建组件src/components/mHeader

在src/App.vue中引入

src/App.vue中引入
1. import MHeader from 'components/mHeader/mHeader'
2. components: {
    MHeader,
   }
3. 在组件中引入
    <template>
        <m-header></m-header>
    </template>

歌手组件

在这里插入图片描述

抓取歌手

封装获取数据的jsonp的方法：src/api/singer.js（具体见代码注释）

获取数据：在src/components/singer.vue中,具体见此文件中的注释

    data() {
        return {
            singers: []
        }
    },
    created() {
        this._getSingerList() // get singer data
    },
    methods:{
        _getSingerList() {
            getSingerList().then(res => {
                if (res.code === ERR_OK) {
                  console.log(res.data.list);
                }
            })
        },
    }

数据处理：src/components/singer.vue

将数据分类：

1. 热门数据，(前10条数据)
2. 按字母分类的数据('A', 'B', 'C' ......)

因为获取数据过程中，有很多重复的操作或者数据，所以需要优化：单独封装一个歌手类，见src/common/singer.js

将数据格式化：将数据处理成我们需要的数据格式

1. 先格式化为
    {
        hot：{
            title：'hot'
            item：[{},{},{}],
        },
        A:{
            title:'A'
            item:[{},{},{}],
        }
        ...
        ...
    }
2. 然后:[{},{},{},{}]
    第一个对象是热门数据，后面依次按字母表排列的对象

数据渲染：

将歌手列表单独封装成一个组件src/base/listview.vue，数据由父组件传递，就是上面格式化好的数据
然后在src/components/singer.vue中引入组件

快速入口组件，字母列表(src/base/listview.vue)

在这里插入图片描述

根据title，得到字母集合

computed: {
    shortcutList() { // ['A','B','C'...]
      return this.data.map(group => {
        return group.title.substr(0, 1)
    })
},

绑定事件，当触摸字母列表时候可以实现一些功能

点击某个字母，左侧可以直接定位到这个字母下的歌手名(详细见src/base/listview.vue)

better-scroll本身有个api就是scrollToElement，可以滚动到某个元素 
(1)先将每个字母绑定一个属性data-index，用来唯一标识字母
(2)再给每个字母绑定方法，touchstart触发"onShortCutTouchStart"方法
(3)"onShortCutTouchStart"：获取当前字母data-index
    (封装了一个单独的类(src/common/js/dom.js)用来获取data-index)
(4)scrollToElement跳到左侧这个索引指定位置

指尖滑动时候，左侧也跟着一起滑动：通过计算pageY值

记录手指开始的位置，和手指挪到的位置，中间差值除以每个字母设定的高度值
然后跳到指定位置

左右联动效果：左侧滚动，右侧字母表有高亮的效果
在这里插入图片描述

先在src/base/scroll/scroll.vue中添加相应属性及方法

    // 要不要监听滚动事件
    props: {
        listenScroll: {
          type: Boolean,
          default: false
        },
    },
    methods: {
        _initScroll() {
            if (this.listenScroll) {
                const that = this
                // 监听scroll的滚动事件，并且拿到位置，也就是事件的回调
                this.scroll.on('scroll', pos => {
                  that.$emit('scroll', pos)
                })
            }
        }
    }

src/base/listview中的相应组件传递给子组件值，并且获取子组件传来的值

<scroll @scroll="scroll" :listenScroll="listenScroll"></scroll>
然后大致思路就是根据手指的位置，计算当前在哪个字母下
然后让右侧该字母高亮，详细将代码listview.vue

当歌手列表滚动到最顶部的时候将滚动逻辑进行优化，src/base/listview.vue

 分为三种情况
    (1) 当滚动到最顶部的时候
    (2) 当滚动到中间部分
    (3) 当滚动到最底部的时候

滚动固定标题实现src/base/listview.vue
在这里插入图片描述

实现

<div class="list-fixed" ref="fixed">
    <!-- list-fixed使用了绝对定位，所以会定到那里-- >
  <h2 class="fixed-title">{{fixedTitle}}</h2>
</div>   

fixedTitle() {
  if (this.scrollY > 0) {
    return ''
  }
  return this.data[this.currentIndex] ? this.data[this.currentIndex].title : ''
}

问题：

当我们滑动到最底部，又滑回到最顶部的时候，会出现两个热门的title，这样是不对的

解决：当 当前滑动的scrollY为正数时，设置fixedTitle为''，
    然后上面的list-fixed结构，添加v-show，如果fixedTitle为空就不显示

当滑动时候，两个fixedTitle相遇后的效果不好
是下面那个慢慢上去，然后一点一点覆盖的，这样的体验是不好的

解决：通过计算两个title的差值diff，
    当差值大于0小于title，就让上面的title偏移差值距离
    否则，什么都不变，
    就会实现下一个往上顶的效果

出现其他小问题和优化：
- 手指滑动，左侧跟着动，但是滑动位置不对，索引相加的时候没有转化为整型，记得加上一个parseInt
- 写字母高亮功能的时候，左侧计算出来的索引位置不对，因为src/base/scroll/scroll.vue中设置probeType:1，改为3就好了
- 直接点击右侧字母表，并不会高亮
```
因为直接点击并不会触发滚动事件，所以不会派发一个pos事件，我们这里手动设置
this.scrollY = -this.listHeight[index]，实现高亮
```
- 点击字母表上下两个区块的时候是有问题的，是可以点击的，然而我们不想让那部分可点击
```
所以加上判断，如果点击部分为null那么不做任何事情，返回
if (!index && index !== 0) { // click on the blank
    return
}
```
- 当拖动时候，拖动到顶部，或者拖动到底部时候做一个边界处理
- 整体思路：5-8的6:36部分重新捋了一下
- 数据没有请求到的时候，有一个loading的效果
```
(1)先引入import loading from 'base/loading/loading'
(2)注册组件 components: {
            loading
        },
(3)如果没有数据，就显示这个组件
    <div class="loading-container" v-show="!data.length">
      <loading></loading>
    </div>
```

难点：左右联动

根据左边滚动位置，计算在哪个group区间，然后就知道右侧对应哪个索引

歌手详情页面组件src/components/singer-detail

在这里插入图片描述

跳转路由至歌手详情页

添加路由：先在router/index.js中引入，添加路由

            import SingerDetail from 'components/singer-detail/singer-detail'
            {
                path: '/singer', 
                component: Singer,
                children: [
                  {
                  // 以id为变量，可以传入不同的id值，然后去渲染不同的歌手详情页
                  path: ':id',
                  component: SingerDetail,
                  }
                ]
            }

router-view：写在src/components/singer.vue中

点击歌手跳转到详情页

在src/base/listview.vue中添加事件

当某个歌手被点击了，向外派发一个事件，告诉外部我被点击了，并且被点击的元素是什么
    selectItem(item) {
      this.$emit('select', item)
    },

父组件src/components/singer.vue接受子组件传来的值，然后利用this.$router.push，跳转到该歌手页面

路由跳转动画效果

在src/components/singer-detail上给路由加上动画效果
<transition name="slide">
    <div class="singer-detail"></div>
</transition>

  .slide-enter-active,
  .slide-leave-active {
    transition: all .3s;
  }
  .slide-enter,
  .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }

使用vuex管理状态,将歌手存进去

存数据src/components/singer.vue

import {mapMutations} from 'vuex'
...mapMutations({
  setSinger: 'SET_SINGER'
})

取数据：src/components/singer-detail.vue

import { mapGetters } from 'vuex'
...mapGetters('singer')

抓取数据

利用jsonp抓取数据，见src/api/singer.js中getSingerDetail，有详细注释

在src/components/singer-detail中获取数据

(1)先引入
    import { getSingerDetail } from 'api/singer'
    import { ERR_OK } from 'api/config'
(2)定义方法_getDetail，然后再created生命周期时候执行

获取歌曲的vkey(只有得到vkey才能获取歌曲播放地址)

1. 在build/webpack.dev.conf.js中配置获取vkey的接口，更改referer和host
2. 在src/api/song.js中定义获取全部歌曲的方法getMusic，调用接口/api/music
3. 在src/components/singer-detail中使用该方法
    获取每个歌曲的vkey放到song对象中，用于获取歌曲播放地址
    getMusic(musicData.songmid).then((res) => { // 这里需要先获取vkey
        if (res.code === ERR_OK) {
          const svkey = res.data.items
          const songVkey = svkey[0].vkey
          const newSong = createSong(musicData, songVkey)            
          ret.push(newSong)
        }
      })

封装歌曲数据

因为有很多组件都需要整个歌曲的数据，所以将歌曲的数据封装成一个单独的src/api/song.js文件，用来获取歌曲的数据
见src/common/js/song.js有详细注释
1. 先创建一个歌曲类Song
2. 每次都需要new，然后传进去很多参数，很麻烦，所以，再新建一个方法createSong,在这里返回一个new的实例对象
    实际上这也是一种工厂方法模式，就是不直接new，是调用一个方法，返回一个实例对象
3. 在src/components/singer-detail中使用

歌手详情页面核心页面(可以复用)：src/components/music-list.vue

在这里插入图片描述

在singer-detail.vue中引入并传入数据

import MusicList from 'components/music-list/music-list'
<music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
 components: {
    MusicList
  },

写dom结构，完善歌手详情页面
将显示歌曲列表的部分封装成一个单独的组件src/base/song-list.vue，因为有很多地方都需要用
还有一点就是，把这个歌曲列表放到scroll组件中，因为歌单列表也是需要滚动效果的

在滑动歌曲列表时，想要实现在手指往上滑的时候，歌曲列表是要适当覆盖最上面歌手图片的
在这里插入图片描述

(1) 先将scroll组件样式中的overflow: hidden去掉
(2) 只滚上去是不够的，要实现当手指往上滑的时候，字的后面背景部分(不是图片,是灰色背景)也要一起向上滚
    在scroll组件上面放一个div，然后监听滚动距离，然后让这个div和字一起滚动
    <div class="bg-layer" ref="layer"></div>
    this.minTransalteY = -this.imageHeight
    scrollY(newVal) {
        // newVal：整个滑动部分相对于初始位置的偏移
        //        手指往上滑为负，往下滑为正
        //        滑动到最底部，pos值为"负值绝对值"最大的时候
        const translateY = Math.max(this.minTransalteY, newVal)
        this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)`
    }

但是，当向上滑了一段距离之后，就出现问题了

因为bg-layer高度设置的是100%，也就是屏幕高度
所以当手指滑动过屏幕高这么多距离之后，这个bg-layer就滑走了，就没有背景颜色显示了
将最上方图片的高度记录下来，然后设置bg-layer最多滚动的距离不超过图片的高度
代码与上面一样，不过minTransalteY的值进行了更改
    this.minTransalteY = -this.imageHeight + RESERVED_HEIGHT

但是我们要实现这样的效果:就是不让歌曲列表滚动到顶部，顶部预留一些地方来

那么只要调整bg-layer背景的最多偏移量就可以了，就是设置最多偏移量小一点
this.minTransalteY = -this.imageHeight + RESERVED_HEIGHT， // bg-layer minTransalteY

当向上滚动的时候，顶部的歌词名字覆盖在了图片的上面，我想要实现的效果是图片覆盖在字上面
在这里插入图片描述

并且更改图片的zIndex值和paddingTop值和width值，因为图片的大小我是通过设置宽高比的，见该页面的scss文件
如果没滚动到顶部的时候，一切恢复原样(图片的高度)，就是将图片的z-index值和height等值改回来

if (newVal < this.minTransalteY) { // scroll to top滚动到顶部
    zIndex = 10
    this.$refs.bgImage.style.paddingTop = 0
    this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
  } else {
    this.$refs.bgImage.style.paddingTop = '70%'
    this.$refs.bgImage.style.height = 0
  }
  this.$refs.bgImage.style.zIndex = zIndex

当往底下拉的时候，我想要实现图片跟随者放大或者缩小的效果
在这里插入图片描述

当往底下拉的时候，通过percent = newY/this.imageHeight来设置图片放大的比例
当new>0的时候，设置放大比例scale为scale = 1 + percent，并且zIndex为10，
这样保证图片放大的时候，歌单列表不会覆盖图片
为什么是这个比例呢？因为当往下拉的时候，以这个比例，图片增加的高度就是newY的大小

const percent = Math.abs(newVal / this.imageHeight)
  if (newVal > 0) { // scroll down
    scale = 1 + percent
    // 如果不设置zIndex = 10，那么当向下拉的时候，歌曲列表会覆盖图片
    zIndex = 10
  }
  this.$refs.bgImage.style[transform] = `scale(${scale})`

为什么图片放大的时候总是从头部开始放大，因为bg-image设置了transform-origin为top，所以图片放大的时候总是从头部开始放大

当我们手指往上滑的过程中，想要实现图片的模糊效果，并且，越往上，就越模糊

设置一个属性blur，代表模糊的程度
通过css3来设置模糊效果：this.$refs.filter.style[backdrop] = `blur(${blur}px)`

const percent = Math.abs(newVal / this.imageHeight)
if (newVal > 0) { // scroll down
    ...
    ...
  } else {
    //模糊程度最大是20
    blur = Math.min(percent * 20, 20)
  }

因为不同浏览器前缀不一样，js中怎么自动加上呢？

css中不用写浏览器前缀的原因是因为，vue-loader用到了autoprefixer插件，会帮我们自动补全前缀
但是js中就不会了，就需要我们自己判断，那么我们可以封装一个方法来判断浏览器前缀是什么
见src/common/js/dom.js文件

随机播放全部按钮

首先要等得到歌曲列表数据之后才显示
其次，当我们手指向上滑动的过程中，因为按钮设置的位置是bottom为20，所以当图片高度改变了，按钮位置也改变了，但是我们要的效果是：
当手指滑动到最顶部的时候，整个按钮是消失的，所以
    // 设置随机播放全部的按钮，在滑动到最顶端时候消失
    this.$refs.playBtn.style.display = 'none'
    // 设置随机播放全部的按钮在正常情况下，display = ''，让它正常显示
    this.$refs.playBtn.style.display = ''

在没有获取到数据的时候显示loading
在这里插入图片描述

(1)引入import Loading from 'base/loading/loading'
(2)注册组件
    components: {
        Loading
      },
(3)在组件中应用
    <div v-show="!songs.length" class="loading-container">s
        <loading></loading>
    </div>

显示歌曲列表的组件src/base/song-list.vue(会在music-list中使用)

在这里插入图片描述

很简单，就是从引入它的父组件获得歌曲列表所有值，然后在组件中进行渲染

问题：src/components/music-list中歌曲列表显示位置不对，直接跑到了最顶部

原因：scroll没有正确计算高度，
解决：将上面歌手背景图片的高度计算出来，然后让显示歌曲列表组件的top设置成图片高度

播放器页面src/components/player/player.vue(App.vue中引入)

在这里插入图片描述

数据的存放：考虑多个组件都可以操作播放器，所以控制播放器的数据一定是个全局的，所以通过vuex来管理

src/store/state.js              定义和组件相关的，最底层的数据
src/store/getter.js             对数据的映射，可以是一个函数，函数类似计算属性，根据state.js中的值计算出新的值
src/store/mutation-types.js     见代码，理清和mutations.js的关系
src/store/mutations.js          定义数据修改的逻辑，但是定义mutations之前，先定义mutation-types

显示播放器组件的流程：src/components/player/player（见代码）
- 在app.vue下引用src/components/player/player
  因为不是和路由相关的组件，切换到任何组件都不影响播放
- 在app.vue下不能默认展示player.vue这个组件，要在src/components/player/player中引入vuex，
  通过取vuex中的变量playlist,计算长度length，来控制player组件的显示，不能默认显示
```
  import { mapGetters } from 'vuex'
  ...mapGetters([
      // 播放列表，当playlist的length>0之后才能显示播放器页面
      'playlist',
  ]),
  <div class="player" v-show="playlist.length>0">
```
- 因为点击歌曲，才会触发这个组件，所以src/base/song.list组件要添加部分事件逻辑
  当点击歌曲时候，触发事件selectItem，然后这个函数将触发的事件和当前歌曲索引传递给父组件src/music-list/music-list.vue
```
selectItem(item, index) {
  this.$emit('select', item, index)
},
```
  - 为什么传递索引呢：因为播放歌曲列表的时候，要从当前歌曲开始播放，所以要获取索引
- 当点击歌曲列表的某首歌的时候要触发
  - 设置playlist和sequencelist
  - 根据点击的索引设置currentlist
  - 设置playing，设置歌曲播放还是暂停的状态，因为点击的时候，歌曲要播放，
  - 默认展开大的播放器，设置fullScreen
  - 注意：因为要改变很多state，所以封装一个action(见src/store/action.js)
- 因为要改变state、索引，要使用action，所以要在src/components/music-list.vue中引入mapActions
```
import { mapActions } from 'vuex'
...mapActions(['selectPlay']),
selectItem(item, index) {
  this.selectPlay({
    list: this.songs,
    index
  })
  // console.log(this.currentIndex);
},
```
- 总结流程：
  - 点击歌曲(src/base/song-list)
  - 提交action(src/components/music-list)
  - 提交mutation(src/store/action.js)修改state
  - playlist.length > 0(src/components/player.vue)
  - 然后显示player.vue组件
给播放器添加交互动画和样式
- 样式1(player.vue)：
  当切换展开的播放器或者缩小的播放器时有动画效果，样式详见player.scss
  - 给展开的播放器添加transition样式为normal
  - 给缩小版的播放器添加transition样式为mini
- 样式2 (player.vue)：
  当由缩小版的播放器切换为展开版的播放器时，左下的CD封面也会由小拉到大的动画
```
我们要通过js方式获取css动画，所以引入了create-keyframe-animation插件
因为设置动画需要获取参数，我们要定义的_getPosAndScale函数来获得相应参数
在enter中设置动画
```
- 样式3(player.vue)：
  当由放大版的的播放器切换为缩的播放器时，CD封面从中间移到左下角的实现
  不过没有样式2那种动画，是直接用js操作css样式实现的
  因为设置动画需要获取参数，我们要定义的_getPosAndScale函数
  来获得相应参数在leave中设置动画
- 样式4(player.scss)：
  当别的页面切换为大的播放器页面的时候动画效果
  - 效果1：背景有一个渐隐渐现的效果,纯利用css3，transition实现的
  - 效果2：头部和底部又一个回弹的效果，这个效果是利用贝塞尔曲线cubic-bezier实现的
- 给样式填充数据
  - 填充数据
    - 唱片图片:src=“currentSong.image”
    - 歌曲名： v-html=“currentSong.name”
    - 歌曲名称： v-html=“currentSong.singer”
  - 添加简单方法
    - 点击右上角的按钮实现返回：添加back方法，back方法中用Vuex的mutations设置fullScreen为false
    - 点击小型播放器后显示大的播放器：在小型播放器样式上绑定@click=“open”,open方法中设置fullScreen为true

播放功能：利用html5的audio实现
在这里插入图片描述

添加audio标签，当currentSong改变时候play方法执行

错误：

<audio ref="audio" :src="currentSong.url"></audio>
watch: {
    currentSong(newSong, oldSong) { 
        this.$refs.audio.play()//只写这一句是会报错的
    }
}
报错：The play() request was interrupted by a new request

原因：dom异常，这时候调用play时候，我们同时请求src是不可以的，这个dom还没有ready

解决：我们设置一个延迟

// 设置一个延迟
this.$nextTick(() => {
  this.$refs.audio.play()
})

设置歌曲播放和暂停：

(1)在class名为i-center的dom元素上绑定方法togglePlaying，切换暂停或者播放状态
(2)togglePlaying() { 
    this.setPlayingState(!this.playing)
    //setPlayingState: 获取更改state中playing的mutations方法
    //playing:这个playing就是通过getters从vuex state获取的playing
    }
(3)仅通过改变状态是不能控制歌曲的播放或者暂停的
  我们可以watch这个playing，然后触发audio的play或者pause方法
  但是因为我点击歌曲的时候，就会触发watch的playing属性
  然后就会执行play，所以还是会出现上面的问题，解决方法也是一样，设置一个延迟

播放或着暂停的圆圈圈样式改变
在这里插入图片描述

    1. 添加计算属性
         playIcon() {
            return this.playing ? 'icon-pause' : 'icon-play'
         },
    2. 添加样式<i :class="playIcon" @click="togglePlaying"></i>

小的播放器图标的改变：miniIcon 同理大播放器
在这里插入图片描述

注意：当点击小的播放器播放按钮的时候，会产生冒泡事件，需要阻止冒泡事件
        <i class="icon-mini" :class="miniIcon" @click.stop="togglePlaying"></i>

播放时候CD封面转圈，停止的时候CD封面停止

在这里插入图片描述

样式：

&.play {
  animation: rotate 20s linear infinite;
}
&.pause {
  animation-play-state: paused;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

DOM中添加样式：

	<img class="image" :src="currentSong.image" :class="cdcls"/>

事件逻辑：

 cdCls() {
  return this.playing ? 'play' : 'play pause'
 },

mini播放器同理

点击播放下一首或者上一首歌曲
因为我们在state中记录了当前歌曲的索引，并且我们也有当前歌曲列表
所以向上或者向下只要改变索引就可以了

(1)给播放下一首歌曲按钮绑定事件(播放上一首歌曲按钮同理)
    <div class="icon i-right">
      <i @click="next" class="icon-next"></i>
    </div>
(2)事件逻辑
    next() {
        let index = this.currentIndex + 1
        // 如果当前歌曲是最后一首歌
        if (index === this.playlist.length) {
          index = 0
        }
        this.setCurrentIndex(index)
      this.songReady = false
    },

问题1：点击按钮(播放上一首)后，发现歌曲虽然跳到了下一首，但是图标并没有，图标还是处于暂停状态
- 解决：在next方法下添加如下语句
```
if (!this.playing) {
  this.togglePlaying()
}
```

问题2：不停点击下一首那个按钮，会报问题1的错误(pre同理)

解决：查看audio官方文档，发现audio标签会派发两个事件，一个是canplay 和 error

(1)<audio ref="audio" :src="currentSong.url" @canplay="ready" @error="error">
(2)所以根据这个，我们data中设置一个标志位，
    data() {
        return {
          songReady: false,
          }
      }
(3)然后
    ready() {
      this.songReady = true
      this.savePlayHistory(this.currentSong)
    },
(4)然后next
    next(){
        if (!this.songReady) {
            return
        }
        // 点击之后this.songReady = false,确保下一首歌曲准备好时 才可以点击也就是ready时候
        this.songReady = false
    }
(5)容错处理：因为只有ready的时候才会触发this.songReady = true，
    如果报错就会阻止继续播放，所以我们这里有一个容错处理
    当前歌曲播放不出来的话也可以实现点击下一首的功能
    事件：
    error(){
        this.songReady = true
    }
    样式也要体现：当 当前歌曲出错的时候，图标有一个变灰的样式
    <div class="icon i-left" :class="disableCls">
      <i @click="pre" class="icon-prev" ></i>
    </div>

大的播放器底部进度条src/base/progress-bar/progress-bar.vue：
在这里插入图片描述

获取当前播放时间和总时间

(1)设置标签实现进度条<div class="progress-wrapper">
(2)因为当audio标签中歌曲播放的时候会派发一个事件就是@timeupdate="updateTime"
(3)updateTime(e) {
  // update会传进来一个e的事件，这个事件有一个target属性就是audio标签
  // 这个audio还有一个可以获取到当前播放时间的属性就是currenTime,
  // 这个currentTime是一个时间戳的形式,是可读写属性
  this.currentTime = e.target.currentTime // <audio> current time
},
(4)编写一个函数format，将currentTime格式化为分和秒的形式
    // 给时间格式化的函数
    format(interval) {
      //interval|0就是一个正数的向下取整
      interval = interval | 0  // | 0: math.floor
      const minute = (interval / 60) | 0
      // 当前播放时长我们要显示0.06不是0.6，也就是当余数为个位数的时候，需要一个补0的函数pad
      const second = this._pad(interval % 60) // _pad: Use 0 to fill 2 bits
      return `${minute}:${second}`
    },
(5)_pad(num, n = 2) { // _pad: use 0 to fill 2 bits
        // 获取字符串长度
      let len = num.toString().length
      while (len < n) {
        num = '0' + num
        len++
      }
      return num
    },

设置单独的组件显示进度条,接受父组件src/components/player/player.vue传过来的百分比的值

(1)根据百分比，求走过的距离，然后设置样式
(2)根据百分比，用transform设置小球的偏移

拖拽或者点击，小球实现歌曲的实时播放

@touchstart.prevent="progressTouchStart"
@touchmove.prevent="progressTouchMove"
@touchend="progressTouchEnd"
progressTouchStart(){
    用一个变量init表示touch已经初始化了
    记录touch的开始位置
    记录当前进度条的的偏移距离
}
progressTouchMove(e) {
    手指移动的距离
    最初的位置加上手指移动的距离，不能比0小，不能比进度条整个宽度大
    设置进度条和小球偏移到该位置
},
progressTouchEnd(){
    设置init变量为false，表示结束，不能操作了
}
点击同理progressClick(e)

进度条的小球拖拽过程中，进度条会出现跳的情况
- 原因：当拖拽过程中，有两个事件改变进度条，
  一个是拖拽事件，一个是歌曲播放事件
  所以我们要设置拖拽过程中，拖拽事件权重更大一点
- 解决：if (newPercent >= 0 && !this.touch.init)
  当没有拖拽事件的时候，才设置歌曲播放改变进度条

当拖拽完之后，进度条虽然同步了，但是已播放秒数还是没有改变

拖拽完之后，重新计算进度条的百分比，然后向父组件派发一个事件
父组件player监听percent的改变，然后改变audio的currentTime,然后进一步改变秒数
子组件：
    progressTouchEnd() {
      this._triggerPercent()
    },
    _triggerPercent() {
      const progressBarWidth = this.$refs.progressBar.clientWidth - progressBtnWidth
      const percent = this.$refs.progress.clientWidth / progressBarWidth 
      this.$emit('percentChange', percent)
    },
父组件：
    onProgressBarChange(percent) {
          const currentTime = this.currentSong.duration * percent
          this.$refs.audio.currentTime = currentTime
          // 拖动完之后还要继续播放
          if (!this.playing) {
            this.togglePlaying()
         }
     },

小的播放器转圈圈的播放进度条：src/base/progress-circle/progress-circle.vue：
在这里插入图片描述

引入：import ProgressCircle from 'base/progress-circle/progress-circle'
注册：
    components: {
        ProgressCircle,
    },
dom中使用
      <progress-circle :radius="radius" :percent="percent">
        <i class="icon-mini" :class="miniIcon" @click.stop="togglePlaying"></i>
      </progress-circle>
    这个i标签会在progress-circle组件中的slot标签中生效
progress-circle里面放置了两个circle，一个是默认全部灰度圆，一个是设置偏移量，剩下部分高亮

播放模式

样式的改变：

从state中引入mode变量，根据mode给dom结构增加样式，
点击切换模式时，引入mutations改变mode
changeMode(){
   const mode = (this.mode + 1) % 3
   this.setPlayMode(mode)
 },

播放列表的改变

(1)如果是随机播放，需要将列表打乱，也就是洗牌，那么封装一个函数(src/common/js/util.js)完成洗牌
(2)引入setPlayList:'SET_PLAY_LIST',为了改变当前播放列表
    如果是随机播放则将打乱(shuffle函数)的歌曲列表赋给playList
    如果不是随机播放，那么playList就等于sequenceList
(3)因为当前歌曲是根据歌曲列表和索引设置的，所以如果歌曲列表改变的话，
    当前播放的歌曲也可能发生变化，所以我们要重新计算currentIndex
    resetCurrentIndex(list){
      let index = list.findIndex((item) => {
        return item.id == this.currentSong.id
      })
      this.setCurrentIndex = index;
    }

问题：我把歌曲暂停了之后，点击切换播放模式,会发生歌曲还是继续播放的情况
- 原因：当我切换播放模式之后，因为重新计算歌曲index，也算是改变了currentSong，所以就会被watch监听到，就会继续播放歌曲
- 解决:
```
watch: {
    currentSong(newSong, oldSong) {
        if (newSong.id === oldSong.id) {
            return
        }
    }
}
```

当前歌曲播放完了之后，如果是循环模式就继续播放当前歌曲，如果不是那就播放下一首

audio标签：ended="end": 歌曲播放结束了会派发一个事件
end() {
  if (this.mode === playMode.loop) {
    // 如果是单曲循环那就调用loop函数
    this.loop()
  } else {
    // 否则(顺序或者随机)就直接跳到下一首
    this.next()
  }
},
loop() {
  this.$refs.audio.currentTime = 0
  this.$refs.audio.play()
},

随机播放全部按钮实现：src/components/music-list.vue

1. 给按钮绑定事件：random
    random() {
      this.randomPlay({
        list: this.songs
      })
    }
2. 整个randomPlay是从action.js(src/store/action.js)中获取的

当我点击随机播放了之后，再去点击歌曲列表，就会出现，点击的歌曲和实际播放的歌曲不一样

原因：

当我点击随机播放全部了之后，此时playList列表已经变为了随机播放列表，原本是顺序列表的时候，playList和currentIndex确定了当前播放的歌曲，
但是现在playList已经变为了随机播放列表，所以不能获取到正确的歌曲

解决：在actions的selectPlay中添加逻辑：

if (state.mode === playMode.random) {
    const randomList = shuffle(list)    //经过shuffle后不改变原数组
    commit(types.SET_PLAYLIST, randomList)
    index = findIndex(randomList, list[index])
  } else {
    commit(types.SET_PLAYLIST, list)
}

歌词(大部分在src/components/player.vue中完成)
在这里插入图片描述

获取歌词数据

(1)定义获取歌词数据接口src/api/song.js --->getLyric
(2)在webpack.dev.conf.js中定义路由api/lyric，因为在src/api/song.js中是通过api/lyric来获取数据的
    注意：因为得到的好像还是一个jsonp形式的数据，所以我们这里要做一个小小的处理
(3)在src/common/js/song.js中调用getLyric,把歌词和歌曲的其他数据都封装在一个song对象中，因为他们都是歌曲整体的一部分
(4)需要将数据解码，所以 利用插件base64
    src/common/js/song.js中引入import { Base64 } from 'js-base64'
   将得到的lyric解码
    this.lyric = Base64.decode(res.lyric)
(5)因为得到的是各一个很长的字符串，我们需要转化为我们需要的格式，所以引入插件lyric-parser
    在player.vue中解码
    引入：import Lyric from 'lyric-parser'
    将歌词格式化,并且设置处理函数(this.handleLyric)：
    this.currentSong.getLyric().then(lyric => {
      this.currentLyric = new Lyric(lyric, this.handleLyric)
    })

设置歌词高亮

(1) 因为当歌词每一行发生"改变"时，会触发this.handleLyric这个方法，
    因为我们解析到的歌词是有很多数据的，包括每行歌词的开始时间，
    所以说这里的改变是指随着时间改变，歌词的改变
    这个方法handleLyric({ lineNum, txt }) 传入两个参数
        // lineNum：当前行
        // txt：当前行的歌词
(2)设置一个变量记录当前行this.currentLineNum
        this.currentLineNum = lineNum
(3)在dom中遍历并显示所有歌词，如果遍历到的歌词等于当前行歌词，那就设置样式高亮显示
    <p 
        v-for="(line,index) in currentLyric.lines" 
        :key="index" 
        :class="{'current': currentLineNum === index}"
    >
    {{line.txt}}
    </p>

设置歌词可以滚动

引入scroll组件，然后传入数据:data="currentLyric && currentLyric.lines"
传入数据目的就是确保歌词数据存在，并且当歌词数据改变的时候调用scroll的refresh方法

保证当前歌词总在中间的位置上

handleLyric({ lineNum, txt }) {
  this.currentLineNum = lineNum
  if (lineNum > 5) {
    const lineEl = this.$refs.lyricLine[lineNum - 5]
    // 滚动到指定行，时间为1秒
    this.$refs.lyricList.scrollToElement(lineEl, 1000)
  } else {
    // 滚动到指定位置，时间为1秒
    this.$refs.lyricList.scrollTo(0, 0, 1000)
  }
  // this.playingLyric = txt
},

歌词和唱片左右滑动效果
在这里插入图片描述

(1)先设置左右滑动的时候，底部小圆圈的样式
    <span class="dot" :class="{'active':currentShow==='cd'}"></span>
    <span class="dot" :class="{'active':currentShow==='lyric'}"></span>
(2)CD页面，往左滑时候，歌词列表页面可以滚过来，然后CD页面有渐隐的效果
    先绑定事件，设定变量
        在.middle"上绑定三个事件
            @touchstart.prevent="middleTouchStart"
            @touchmove.prevent="middleTouchMove"
            @touchend="middleTouchEnd"
        设置变量touch = {},关联touchdown和touchmove
    事件逻辑：就那三个函数，自己看吧
        包括：左滑右滑dom元素位置的变化 offsetWidth
              中间动画的效果           duration
              dom元素渐隐渐现的的效果   opcity

当拖动进度条的时候，歌词部分高亮部分也要相应改变

    // 歌曲拖动的时候，歌词高亮部分也相应改变
    onProgressBarChange(percent) {
        if (this.currentLyric) {
            // currentTime：是秒形式的
            this.currentLyric.seek(currentTime * 1000)
        }
      }

问题1：当切换很多歌曲的时候，会出现高亮部分一直在跳
- 原因：开启了多个计时器，没有关掉
- 解决：当监听到currentSong改变了之后，我们要关掉当前歌词的计时器
```
if (this.currentLyric) {
    this.currentLyric.stop()
}
```

问题2：当歌曲暂停的时候歌词并没有暂停，还在继续走

解决：

当togg随机播放lePlaying的时候，将歌词也暂停
if (this.currentLyric) { 
    // 将歌词暂停
    this.currentLyric.togglePlay()
}

问题3 循环播放的时候，歌曲播放完了，歌词并没有回到最开始

解决：

loop() {
  if (this.currentLyric) {
    // 将歌词偏移到最开始
    this.currentLyric.seek(0) // <audio>, song jump to begin
  }
},

在CD封面下面会显示当前歌词这一行
在这里插入图片描述

    创建显示结构
        <div class="playing-lyric-wrapper">
          <div class="playing-lyric">{{playingLyric}}</div>
        </div>
    当歌词改变时候，给playingLyric赋值
        handleLyric({ lineNum, txt }) {
            this.playingLyric = txt
        }

当获取不到歌词，做容错处理

 this.currentSong.getLyric().then(lyric => {
    ......
})
// 当获取不到歌词的时候，变量都清空
.catch(() => {
  this.currentLyric = null
  this.playingLyric = ''
  this.currentLineNum = 0
})

其他问题

获取播放源错误：https://blog.csdn.net/a151913232/article/details/85034283+ 当只获取到一首歌的时候index = 0，我们点击next时候，下面这行语句执行

let index = this.currentIndex + 1       //index = 1
if (index === this.playlist.length) {
  index = 0                             //index = 0
}
也就是index的值并没有变，所以，watch监听到的currentSong也没变，也就是往后的语句都不会

执行解决：在next()和prev()上加个逻辑判断，当只获取到一首歌的时候，调用loop函数，转为单曲循环模式

当程序在微信端运行的时候，js是不执行的，所以audio只会把当前歌曲播放完，之后就不执行了

// 不用$nextTick，而是用setTimeout，这样就保证了我们微信从后台切到前台的时候，我们的歌曲又可以重新播放了
setTimeout(() => {
    this.$refs.audio.play()//只写这一句是会报错的，因为调用play时候，我们同时请求src是不可以的，这个dom还没有ready
    this.getLyric()
  }, 1000)

底部mini播放器会占据正常播放列表页面最后一行
就比如说，薛之谦所有音乐，最后一个是"演员"，
整个mini播放器就会把演员列表那一行遮挡

解决：将解决问题的逻辑封装成一个单独的文件src/common/js/mixin.js
关于mixin：https://www.jianshu.com/p/f34863f2eb6d

思路：当playlist中有数据的时候，就将滚动组件的bottom设置为60px

实现三部曲：
    先引入：import { playlistMixin } from 'common/js/mixin'
    再注册：export default {
                mixins: [playlistMixin],
            }
    实现handlePlaylist方法
    handlePlaylist(playlist) {
      // 当playlist中有数据的时候，就将滚动组件的bottom设置为60px
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.list.$el.style.bottom = bottom
      // console.log(this.$refs.list, '-----------')
      this.$refs.list.refresh()
    },

具体实现见：

src/common/js/mixin.js
src/components/music-list
src/components/singer
src/base/listview
src/components/recommend

歌单详情页src/components/disc.vue(类似歌手详情页)

在这里插入图片描述

定义二级路由
- 定义在router/index.js的recommend的children中
- 在recommend.vue中引入路由组件router-view

点击歌单路由跳转：src/components/recommend.vue

点击li触发：@click=“selectItem(item)” selectItem(item)

路由跳转：

 // 点击li，带参数的路由跳转
selectItem(item) {
    this.$router.push({
        path: `/recommend/${item.dissid}`
    })
}

歌单部分数据的存放和获取

在vuex中的state，mutations，mutations-type中都设置有关歌单的变量

在组件中使用和更改vuex中的数据

src/components/recommend.vue中,引入mutations
    在src/components/recommend.vue中利用this.setDisc(item)将vuex中的disc值设置为当前点击的li
    然后利用getters得到
src/components/disc.vue中,引入getters
    从vuex中获取当前歌单的标题，背景图等，传入到music-list组件中

从qq音乐抓取每个歌单全部歌曲

  1. 在build/webpack.dev.conf.js中配置获取所有歌曲的接口，更改referer和host
  2. 在src/api/recommend.js中定义获取全部歌曲的方法getSongList，调用接口/api/getSongList
  2. 在src/components/disc.vue中使用该方法
      getSongList(this.disc.dissid).then(res => {
          if (res.code === ERR_OK) {
            this.songs = this._normalizeSongs(res.cdlist[0].songlist)
          }
        })
  3. 获取到songs之后，将songs传入到子组件music-list
  ```

问题：当刷新了之后，暂时获取不到数据，不能一直在这个页面等着，所以设置跳转到父组件

  _getSongList() {
      if (!this.disc.dissid) {
          this.$router.push('/recommend')
          return
      }
  },

所有排行榜页面src/components/rank/rank.vue

在这里插入图片描述

抓取数据src/api/rank.js(rank.vue中有具体实现，一看应该就能懂)
在页面内获取数据并使用(rank.vue中有具体实现，一看应该就能懂)

设置组件可以滚动(rank.vue中有具体实现，一看应该就能懂)

需要把数据传递给scroll，当数据全部存在时候，才能正确判断可滑动部分的高度

数据未加载时候，显示一个转圈圈的图标loading
当底部有mini播放器占位的时候，需要处理底部高度：使用mixin.js

对于数据获取的总结：

json

如果获取数据的接口要求传入的的参数中format:json,那么就用axios配合更改referer和host的方式
先在webpack.dev.conf.js中
    定义接口改变referer和host，
    并且 获取来自 请求这个接口时 传过来的数据，
    然后再从qq音乐上获取数据
    由src/api/....js文件中的方法取得最终获取的数据

jsonp

直接在src/api下的js文件中定义获取数据方法
然后通过jsonp将所有请求数据连在一起 并请求网页
然后src/api/js文件中的方法 中得到jsonp取得的数据

注意：如果需要获取播放源的，需要先引入获取vkey的函数，在获取歌曲

排行榜详情页面src/components/top-list.vue(和disc.vue很像很像)

在这里插入图片描述

路由

编写路由：

    是一个二级路由，在route.js中的rank下面定义
    children: [
      {
      // 以id为变量，可以传入不同的id值，然后去渲染不同的歌手详情页
      path: ':id',
      component: TopList,
      }
    ]

跳转路由src/components/rank/rank.vue

给遍历排行榜的li添加点击事件@click="selectItem(item)"
    selectItem(item) {
      this.$router.push({
        path: `/rank/${item.id}`
      })
      this.setTopList(item)
    },

添加在src/components/rank/rank.vue中

关于排行榜内的所有歌曲数据
- 在src/api/rank.js中获取数据
- src/components/top-list下使用数据
- 将获取的song传进music-list，然后设置没有数据时候(this.$route.push)默认返回上一级父元素

设置榜单样式src/base/song-list.vue

设置变量，默认rank为false，代表默认没有排行的样式

<div class="rank" v-show="rank">
  <span :class="getRankCls(index)">{{getRankText(index)}}</span>
</div>
props: {
    rank: {
      type: Boolean,
      default: false 
    }
}

设置事件改变样式，当排行在前三名时显示图片，往后显示数字
在这里插入图片描述

// 和排行榜有关的样式
getRankCls(index) {
  // 前三名，是图片的样式
  if (index <= 2) {
    // 在scss文件中有对应的样式
    return `icon icon${index}`
  } else {
    // 否则就是文字样式，文字的实现在getRankText(index)中
    return 'text'
  }
},
getRankText(index) {
  if (index > 2) {
    //因为排名是从1开始的，不是索引0开始的
    return index + 1
  }
}

rank的值
- top-list引入music-list
- music-list引入rank
- 所以由top-list传入rank值为true

搜索页面src/components/search.vue

搜索框组件src/base/search-box.vue(在src/components/search.vue中引用)

在这里插入图片描述

默认搜索框中的内容是"搜索歌曲、歌手",但是可以更改，所以在src/base/search-box.vue设置

<input ref="query" class="box" :placeholder="placeholder"/>
props: {
    placeholder: {
      type: String,
      default: '搜索歌曲、歌手'
    }
},

获取来自搜索框中输入的内容

<input ref="query" class="box" :placeholder="placeholder" v-model="query"/>
data() {
    // 获取来自输入搜索框中的内容，利用双向绑定v-model
    return {
      query: ''
    }
},

通过是否输入内容，控制输入框后面的"×"图标是否显示，当输入内容不为空的时候才显示
<i class="icon-dismiss" v-show="query"></i>

点击×图标的时候，输入框中的内容为空

<i class="icon-dismiss" v-show="query" @click="clear"></i>
clear() {
  this.query = ''
},

监听query的改变，传递给父元素

created() {
    // 这种写法和直接在下面写watch差不多
    this.$watch('query', debounce(newQuery => {
        this.$emit('query', newQuery)
      }, 200)
    )
},

搜索组件src/components/suggest.vue(当点击搜索框中内容不为空的时候，显示搜索列表)

在这里插入图片描述

获取数据

search: 用于获取数据

_genResult:将获取到的数据格式化，得到我们想要的格式

如果根据检索词返回数据中zhida的值不为空，那么说明检索到了包含检索词的歌手
将zhida中的内容加上type:singer键值对形成一个新的对象加入到ret中
再将所有和检索词有关的歌曲放入到ret中

遍历数据

<li class="suggest-item" v-for="(item,index) in result" :key="index">

设置样式，因为歌手和歌曲显示的图标和文字都是不一样的
在这里插入图片描述

<div class="icon">
    <!-- 图标是动态的，也就是歌手和歌曲显示的图标是不一样的-->
  <i :class="getIconCls(item)"></i>
</div>
<div class="name">
    <!-- 歌手与歌曲显示的数据也是不一样的 -->
  <p class="text" v-html="getDisplayName(item)"></p>
</div>
getIconCls(item) {
  if (item.type === TYPE_SINGER) {
    return 'icon-mine'
  } else {
    return 'icon-music'
  }
}
getDisplayName(item) {
  if (item.type === TYPE_SINGER) {
    // 如果当前对象中含有歌手名，那就显示歌手名
    return item.singername
  } else {
    // 否则显示歌手名
    // item中song已经被处理过了，所以直接写item.name就行不,用写item.songname
    return `${item.name}-${item.singer}`
  }
},

搜索逻辑：

在src/components/search.vue中引入组件

src/base/SearchBox：      负责搜索框的内容
src/components/Suggest：  负责根据搜索框中内容的查找相关歌曲或者歌手

逻辑：

1. 在searchbox组件中，监听搜索框中内改变，然后将改变的值传递给父组件search组件
2. 父组件接受事件，并将query的值传递给子组件suggest.vue
3. suggest.vue子组件监听到query的改变，调用search方法从qq音乐端请求数据

优化：将根据检索词返回的数据中的res.data.song.list格式化
利用common/js/song.js中的createSong处理

this._normalizeSongs(data.song.list)：
_normalizeSongs(list) { // filter
  const ret = []
  list.forEach(musicData => {
    if (musicData.songid && musicData.albummid) {
      ret.push(createSong(musicData))
    }
  })
  return ret
},

搜索列表实现滚动功能：引入scroll组件

上拉刷新功能(扩展scroll组件)（视频：10-5:17:30）
在这里插入图片描述

是否开启上拉刷新功能，默认是false

src/base/scroll.vue
props: {
    // 是否开启上拉刷新功能，默认是false
    pullup: {
      type: Boolean,
      default: false
    },
}

在scroll组件初始化的时候，判断是否开启了上拉刷新该功能
如果开启了，监听scrollEnd事件，就是当停止滚动的时候派发一个scrollEnd事件
如果此时滚动到了底部，那就向父组件派发一个事件，代表父元素可以进行上拉刷新功能了


if (this.pullup) { // pullup: drop-down refresh
    // scrollEnd:停止滚动了
    // scrollToEnd:滚动到底部了
    this.scroll.on('scrollEnd', () => {
        //当满足这个条件的时候，表示当前已经滚动到底部了
          if (this.scroll.y <= this.scroll.maxScrollY + 50) {
            this.$emit('scrollToEnd') 
          }
    })
}

当滚动到底部，scroll向父组件suggust派发事件，父组件suggest接收事件，并触发searchMore方法

searchMore：获取更多数据，加载更多

<scroll :pullup="pullup" @scrollToEnd="searchMore">
//上拉刷新
searchMore() {
  // 如果此时数据已经加载完了，就不能实现上拉刷新的功能了
  // _checkMore来检测是否数据都请求完毕，也就是 是否改变hasMore
  if (!this.hasMore) {
    return
  }
  this.page++
    // 刷新一次，page++,再请求page对应页数的数据
  search(this.query, this.page, this.showSinger, perpage).then(res => {
    if (res.code === ERR_OK) {
      this.result = this.result.concat(this._genResult(res.data))
      this._checkMore(res.data)
    }
  })
},

_checkMore：检查是否还有数据，以此确定是否可以上拉刷新

_checkMore(data) {
  const song = data.song
  // data中的song有几个参数：
  // 1. curnum：当前页的歌曲数量
  // 2. curpage：当前是第几页
  // 3. 和检索词有关的所有歌曲数量

  // 不能上拉刷新的条件：当前歌曲长度为0，已经检索到最后数据了
  
  if (!song.list.length || song.curnum + (song.curpage) * perpage > song.totalnum) {
    this.hasMore = false
  }
},

当上拉刷新时候显示转圈圈的样式，

1. 引入loading组件：import Loading from 'base/loading/loading'
2. loading显示的条件是hasmore为true
3. 改变hasMore的条件是
        if(!song.list.length || song.curnum + (song.curpage) * perpage > song.totalnum){
            this.hasMore = false
        }

当滑动到页面底部的时候，scroll给父组件传递事件
父组件调用searchMore方法获取下一页的数据
也就是请求数据时候，将page++传递过去
每次请求，获取数据之后都判断一下是否数据全部都已经请求:_checkMore(){}
10-5-17:48重新捋清思路

优化：每次都搜素列表顶部开始显示数据

search() {
    // query改变的时候，第一次调用search，page都要从第一个开始
    this.page = 1
    // query改变的时候，第一次调用search，都要滚动到底部
    this.$refs.suggest.scrollTo(0, 0)
}

点击搜索到的内容，跳转相应页面
- 对搜索列表中歌手的点击：
  - 设置路由：当搜索内容含有歌手的时候，跳转路由，跳到歌手详情页
  - 当点击click搜索列表的时候，绑定selectItem事件
  - 如果点击的是歌手，那么跳转路由，并且设置vuex中singer的值改变
```
selectItem(item) {
    if (item.type === TYPE_SINGER) {
        this.$router.push({
          path: `/search/${singer.id}`
        })
        //调用mutations改变vuex中state中的值
        //...mapMutations({
        //  setSinger: 'SET_SINGER'
        //}),
        this.setSinger(singer)
    }
}
```
- 对搜索列表中歌曲的点击：
  如果点击歌曲，state中的playlist、sequencelist、currentIndex这三个变量都要改变，所以我们要在action中进行一个封装，见src/store/action.js的insertSong
  注意，点击歌曲要实现：
  - 歌曲播放
  - playlist和sequenceList中要添加歌曲
```
判断这两个列表中是否已经含有了这首歌
如果有还要判断这首歌在currentSong的前面还是后面
以便调用删除这首歌之前的位置
只保留当前新添加的歌曲(位置)
```
- 问题1：报do not mutate vuex store state outside mutations…
  - 原因：没有通过mutations方式修改vuex
```
let playlist = state.playlist
后来直接操作playlist是不行
```
  - 解决：在actions中，拷贝出一个新的数组进行操作
```
let playlist = state.playlist.slice()
currentIndex就不会报这个错，因为基本数据类型是值传递
```
- 不知道loading组件在这里显示是怎么个情况，反正我是没看懂
优化：
- 当搜索列表为空的时候，显示相应的组件src/base/no-result.vue代表没有搜索到相关内容
- 每输入一个字符都会派发一个事件，但是我们不想派发这么频繁，所以编写防抖函数
  - 防抖函数：
```
传入一个函数，返回一个防抖函数
    function debounce(func, delay) {
      let timer
      return function(...args) {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          func.apply(this, args)
        }, delay)
      }
    }
```
  - 在src/base/search-box中监听query改变后,应用防抖函数
```
this.$watch(
  'query',
  // debounce节流函数，在一定时间改变多次，以最后一次为准
  debounce(newQuery => {
    this.$emit('query', newQuery)
  }, 200)
)
```
- 移动端，输入搜索内容的时候，会调起键盘，当搜索结束后不会收起键盘
  我们需要实现的是：监听到滚动事件，input失去焦点，键盘收起
  - 由scroll.vue组件在滚动前(beforeScroll)派发事件
  - 由suggest.vue组件接受来自scroll组件的事件，并传递给父组件search
  - 由search接收来自suggest组件的事件，并调用search-box中的事件来使search-box中的搜索框失去焦点，
最大的问题：因为getmusic获取vkey需要时间，在没有获到数据的时候，是拿不到返回的歌曲列表的，所以在ret.concat(this._normalizeSongs(dta.song.list))是拿不到数据的，就没办法渲染
解决：将ret传进去，把之前返回值的初始值(我设置的是[])直接设置成ret而不是[]

搜索历史

在这里插入图片描述

数据的存取因为很多地方都用到了搜索历史，所以我们将他保存到全局的vuex中
state,mutation-type, mutations
在suggest中点击搜索列表，派发事件(因为每个组件都实现特定的功能，实现功能分离)
要将结果缓存到localStorage中，所以封装一个单独的js文件src/common/js/cache.js，专门操作localStorage
- 安装插件good-storage操作localStorage
- 网站：https://github.com/ustbhuangyi/storage
- 具体见src/common/js/cache.js的saveSearch和loadSearch方法
  - saveSearch
```
在不超过存储长度的情况下，将后搜索的值，填入到数组的前面，先搜索的值，填入到数组的后面
将搜索历史列表存入到localStorage
将搜索历史列表返回给vuex
```
  - loadSearch：从本地拿取搜索历史的值，用于：赋给state中的搜索历史的初始值
总结逻辑：
- 当点击搜索列表的时候，suggest向父组件search传递当前被点击元素item
- 父组件调用actions，将query加入到搜索历史中
- 由actions调用commit方法将的新的数组提交给mutations，
- mutations将最终的数组存到localStorage和vuex中
将vuex中的搜索历史数据渲染到dom上
- 取数据：mapGetters
- 引用组件：search-list
- 因为很多地方都要用显示列表的组件，所以单独封装一个组件src/base/search-list
  当需要显示列表的时候，引入并将列表数据传给组件，就可以了
当点击搜索历史中的数据的时候，要进行搜索
- 在search-list组件中，绑定点击事件，向父元素search传当前点击的item
- 父组件search接受子组件search-list传来的事件，并且触发addQuery事件，完成逻辑
当点击搜索历史中数据后面的×的时候，将该条历史删除，或者点击垃圾桶，清空历史
和存储搜索历史差不多
- 点击×：
  - 由search-list派发事件给父组件search
  - 由search处理事件，调用actions中的deleteSearchHistory方法
  - 在actions封装方法deleteSearchHistory
  - deleteSearchHistory方法中调用cache.js中的deleteSearch方法
  - 经过deleteSearch后，将处理过的数组重新赋给vuex state中的searchHistory
- 点击垃圾桶图标：
  - 点击时，触发事件actions中的clearSearchHistory方法
  - 在actions封装方法clearSearchHistory
  - clearSearchHistory方法中调用cache.js中的clearSearch方法
  - 经过clearSearch后，将处理过的数组重新赋给vuex state中的searchHistory
优化：
- 点击垃圾桶时候，有一个弹出的框提醒用户是否全部删除->弹框组件：src/base/confirm
  - 当点击清空按钮的时候，触发的不是清空历史的操作了，是显示弹窗的操作
  - 当点击弹窗中的确定或者取消的时候，confirm会触发相应的的事件
    事件中定义：
```
弹窗的隐藏
向父组件传递当前点击的是确定还是取消操作
```
- 当搜索历史有点多的时候，设置滚动事件
```
给热门搜索和搜索历史加上滚动事件
因为它们两个是两个div，所以我们应该在最外层添加一个div
否则scroll默认是第一个div添加滚动事件，
还有就是数据的问题，我们不能只监听一个div数据的改变，所以设置计算属性
shortcut()
    {
        return this.hotKey.concat(this.searchHistory)
    }
```
  - 问题：
    - 描述：当搜索历史歌曲高度在屏幕大小的边缘的时候，再添加一首的话不出现滚动情况
    - 原因：因为这个时候，dom是在搜索结果页面，而不是在search页面
    - 解决：要加一个逻辑，在search中watch query的改变，
      因为在组件切换的过程中，query有一个从有到无的状态，
      所以如果newquery为空的话，手动刷新scroll
- 当歌曲播放的时候，也就是最下方的mini播放器显示的时候，要重新计算搜索列表和搜索历史的高度
```
mixin配合handlePlaylist
见player组件的"其他问题"标题
```

歌曲列表组件src/components/playlist.vue(在src/components/player.vue中引入)

在这里插入图片描述

显示和隐藏
```
<div class="playlist" v-show="showFlag">
showFlag默认是false，可以通过shiw和hide这两个方法进行改变
    show() {
      this.showFlag = true
    },
    hide() {
      this.showFlag = false
    },
```
- 显示：点击歌曲列表按钮(src/components/player.vue的control)时触发方法show()
- 隐藏：点击歌曲列表蒙层(.playlist)的时候，或者点击关闭(.list-close)的时候
```
在playlist.vue中的蒙层部分和关闭部分绑定事件，点击就触发hide方法
```
- 补充：因为蒙层代表的是整个playlist组件，我们要是点击弹出框内容的时候，也会造成playlist组件消失，所以在.list-wrapper上添加阻止默认事件@click.stop

数据：

vuex中导出sequenceList，在dom中遍历
当数据很多的时候，要实现滚动效果，引入scroll组件

保证获取到所有数据正确的高度，scroll才能正常滚动：当调用show方法的时候，延迟20秒获取数据

show() {
  this.showFlag = true
  // 当点击按钮显示组件的时候，要延迟20秒之后刷新一下scroll，因为这样才能正确的到数据的高度，才能确保滚动
  setTimeout(() => {
    this.$refs.listContent.refresh()
  }, 20)
}

当前歌曲样式：遍历的歌曲中如果某一首歌曲和vuex中currentSong匹配上的话，那么这首歌曲设置特殊样式，其余的样式都一样
在这里插入图片描述

click:
    getCurrentIcon(item) {
      if (this.currentSong.id === item.id) {
        return 'icon-play'
      }
      return ''
    },

切歌:如果点击歌曲列表中的某首歌，那么当前播放歌曲要改变，，并且设置歌曲状态改变为true

selectItem(item, index) {
  // 当前遍历的是sequenceList，然而如果是随机模式的话，playList中是被打乱的数组
  // 那么只能通过找到索引，因为歌曲的播放是依赖于数组和索引的，然后通过playList[index]找到歌曲
  if (this.mode === playMode.random) {
    index = this.playlist.findIndex(song => {
      return song.id === item.id
    })
  }
  this.setCurrentIndex(index)
  // 点击完歌曲，同时设置歌曲状态为true
  this.setPlayingState(true)
},

这里注意一个点：playlist正常是和sequenceList中是一样的，如果是随机模式就不一样了
如果切歌，必须在随机列表中找这首歌的位置，然后playList[index]才能播放，
还有：并不是，随机模式对应歌曲列表中就是随机歌曲列表了，只是播放的时候随机播放而已

当点击歌曲列表的某一首歌之后，也要实现滚动效果，并且，当前播放的歌曲始终在列表的顶部显示

当监听到当前播放歌曲改变的时候或者当显示这个playlist组件的时候，触发scrollToCurrent事件

定义跳转(到顶部)方法：

scrollToCurrent(current) {
  // 找到当前播放歌曲对应在sequenceList中的位置
  const index = this.sequenceList.findIndex(song => {
    return current.id === song.id
  }) 
  // 跳到指定位置
  // this.$refs.listContent.scrollToElement(this.$refs.list.$el.children[index], 300)
  this.$refs.listContent.scrollToElement(this.$refs.listItem[index])
},

跳转(到顶部)时机1：当前播放歌曲改变的时候

watch: {
    currentSong(newSong, oldSong) {
      if (!this.showFlag || newSong.id === oldSong.id) {
        return
      }
      // setTimeout(() => {
        this.scrollToCurrent(newSong)
      // }, 20)
    }
}

跳转(到顶部)时机2：显示这个playlist组件的时候

show() {
    this.showFlag = true
    // 当点击按钮显示组件的时候，要延迟20秒之后刷新一下scroll，因为这样才能正确的到数据的高度，才能确保滚动
    setTimeout(() => {
        this.$refs.listContent.refresh()
        this.scrollToCurrent(this.currentSong)
    }, 20)
},

点击×的时候，将这首从当前播放列表中删除
- 点击按钮，触发deleteOne事件
- deleteOne调用actions中的deleteSong事件
- delteSong：删除playlist，sequenceList中的歌曲，重新计算currentIndex
- 问题
  - 描述：当删掉歌曲列表唯一的一首歌时候，报错，
  - 原因：因为歌曲改变会触发player的watch
  - 解决：
```
watch中：
    newSong根本没有，所以newSong != oldsong 所以所有逻辑都会执行，所以我们应该当newSong没有的时候，直接返回
动画：
    将ul替换为transition-group
```
- playlist.vue中当删除最后一首歌的时候需要将歌曲列表hide掉
```
deleteOne(item) {
  this.deleteSong(item)
  if (!this.playlist.length) {
    this.hide()
  }
},
```
点击垃圾桶图标，删除播放列表所有歌曲(playlist组件)
- 使用actions中封装好的方法deleteSongList
- 引用confirm组件
- 注意：要将confirm的点击事件阻止冒泡,并且删除最后一首歌的时候隐藏playlist

在player和playlist组件中有很多相同的逻辑，所以将相同的逻辑放在mixin中，实现复用
在player和playlist组件中引入mixin

import { playerMixin } from 'common/js/mixin'
mixins: [playerMixin]
然后在提取组件的过程中，在mixin中该引入引入，该配置配置，最后大功告成

添加歌曲列表页面src/components/add-song

在这里插入图片描述

控制组件的显示或者隐藏
- 设置v-show=“showflag”
```
<div class="add-song" v-show="showFlag" @click.stop>
```
- showFlag默认是false
- show和hide可以实现改变showflag的值，控制组件隐藏
```
show() {
  this.showFlag = true
},
hide() {
  this.showFlag = false
},
```
- 在playlist组件中点击"添加歌曲…"按钮，触发add-song中的show方法
```
addSong() {
  this.$refs.addSong.show()
}
```

搜索歌曲

引用search-box，suggest

监听query的改变，设置query(搜索框中的关键词)

<search-box
  ref="searchBox"
  placeholder="搜索歌曲"
  @query="onQueryChange"
>
</search-box>
onQueryChange(query) {
  this.query = query
},

还可以利用query设置最近播放/搜索历史的显示与隐藏

    <!-- .shortcut：最近播放和搜索历史 -->
<div class="shortcut"  v-show="!query"></div>
    <!-- .search-result：搜索结果 -->
<div class="search-result" v-show="query"></div>

注意suggest中是将歌手一起搜索到的，但是我们这里不需要搜索歌手

设置变量showSinger(false)并传递给子组件：   suggest组件，
<suggest :query="query" :showSinger="showSinger"></suggest>

因为这里很多功能很search组件都是I重复的，所以我们定义在mixin中，然后又是一顿大整改，然后就没有然后了

最近播放和搜索历史(src/base/switches)

切换和样式的改变：由currentIndex控制哪个部分高亮(最近播放/搜索历史)

currentIndex默认是0，代表最近播放
当点击：最近播放/搜索历史，任何一部分的话，
都会给父组件add-song派发事件，参数为当前索引index
由父组件监听事件，改变currentIndex，再传入子组件，进而改变哪部分高亮

最近播放和搜索历史列表：(src/components/add-list)

用户中心页面src/componennts/user-center和收藏功能

在这里插入图片描述

在m-header页面添加路由，点击个人中心图标，进入个人中心页面

src/componennts/m-header中

<router-link tag="div" class="mine" to="/user">
  <i class="icon-mine"></i>
</router-link>

添加路由，router/index.js

 {
    path:'/user',
    component: UserCenter
  }

我喜欢的/最近播放
- user-center中引入switches组件，并传入两个参数，以便正确显示高亮样式
```
:currentIndex="currentIndex"
:switches="switches"
```

收藏列表：favoriteList

数据：
- 在state中设置变量存储数组
- 在mutations，actions，getters等vuex相关的文件，依次添加数据
- 在cache.js中创建存储，删除，加载收藏列表的方法，然后再actions中被使用

收藏事件逻辑：(player和playlist)因为逻辑不仅是player中需要的，也是playlist中需要的，所以定义在mixin中

<i class="icon" :class="getFavoriteIcon(currentSong)" @click="toggleFavorite(currentSong)"></i>
mixin中：
1. toggleFavorite(song) {
      if (this.isFavorite(song)) {
        this.deleteFavoriteList(song)
      } else {
        this.saveFavoriteList(song)
      }
    },
2. getFavoriteIcon(song) {
      if (this.isFavorite(song)) {
        return 'icon-favorite'
      }
      return 'icon-not-favorite'
    },
3. // 判断当前歌曲是否已经在收藏列表中了
    isFavorite(song) {
      const index = this.favoriteList.findIndex((item) => {
        return item.id === song.id
      })
      return index > -1
    }

在user-center的个人中心，我喜欢的/播放历史部分进行渲染数据
和add-song组件一样一样的，照样搬就行，只改了数据就可以了
注意：点击列表的时候，依旧完成两个事件：播放歌曲，添加到播放历史中

剩余部分的逻辑user-center

点击返回，回到来时的页面，也就是主页

<!-- .back返回按钮 -->
<div class="back" @click="back">
    <i class="icon-back"></i>
</div>
back() {
      this.$router.back()
},

我喜欢的/最近播放下面的随机播放按钮

<div class="play-btn" ref="playBtn" @click="random">
    <i class="icon-play"></i>
    <span class="text">随机播放全部</span>
</div>
...mapActions(['randomPlay']),
random() {
  let list = this.currentIndex === 0 ? this.favoriteList : this.playHistory
  // 如果没有数据，那么什么都不做，节省性能
  if (list.length === 0) {
    return
  }
  // list不是一个song实例，需要包装
  list = list.map(song => {
    return new Song(song)
  })
  this.randomPlay({ list })
}

注意：并不是随机播放全部，那个播放列表中就是随机列表了，只是播放的时候是随机的而已
而且：在最近播放页面，点击随机播放按钮，歌曲列表排序和最近播放列表排序并不一样，因为，最近播放会利用insertSong将最近播放的排在前面

歌曲播放的时候，scroll正确计算高度(利用mixin.js)

import { playlistMixin } from ‘common/js/mixin’
mixins: [playlistMixin],

handlePlaylist

// scroll正确计算高度
handlePlaylist(playlist) {
  const bottom = playlist.length > 0 ? '60px' : ''
  this.$refs.listWrapper.style.bottom = bottom
  // favoriteList：有可能不存在
  this.$refs.favoriteList && this.$refs.favoriteList.refresh() // $refs.favoriteList use v-if, make sure it is not undefined
  this.$refs.playList && this.$refs.playList.refresh()
},

当我喜欢的/最近播放没有数据，为空的时候，给出提示

import引入，components注册

两个计算属性noResult，noResultDesc

  <!-- 当我喜欢的/最近播放 没有数据，为空的时候，给出提示 -->
  <div class="no-result-wrapper" v-show="noResult">
    <!-- noResult：这个组件是否显示 -->
    <!-- noResultDesc：提示内容 -->
    <no-result :title="noResultDesc"></no-result>
  </div>
   noResult() {
      if (this.currentIndex === 0) {
        return !this.favoriteList.length
      } else {
        return !this.playHistory.length
      }
    },
    noResultDesc() {
      if (this.currentIndex === 0) {
        return '暂无收藏歌曲'
      } else {
        return '你还没有听过歌曲'
      }
    }

收尾工作

当切了很多歌的时候，最后停下来，发现CD和歌词都在继续走

原因：

在src/components/player.vue中，在监听到当前歌曲改变后，是推迟了1s才播放的
 setTimeout(() => {
    this.$refs.audio.play()//只写这一句是会报错的，因为调用play时候，我们同时请求src是不可以的，这个dom还没有ready
    this.getLyric()
  }, 1000)
  也就是如果此时我们在这1s之内按了暂停键，1s后这个逻辑还是会执行，所以产生了这样的问题

解决：

clearTimeout(this.timer)
this.timer = setTimeout(() => {
    this.$refs.audio.play()//只写这一句是会报错的，因为调用play时候，我们同时请求src是不可以的，这个dom还没有ready
    this.getLyric()
  }, 1000)
同时audio中监听 @play="ready"
这样才能保证，先play调用，改变播放状态，然后才能执行audio.pause()方法，也就是pause肯定在play之后执行
依旧保留1000延迟是因为，如果歌曲在手机上后台播放，切换到前台的时候，，为了能请求成功，所以设置1s延迟

当连续切了很多歌的时候，歌词显示错误
- 原因：歌词获取是异步获取，所以当不停切歌的时候
  可能这歌词刚请求回来，歌都已经不知道跳了多少个了
- 解决：在player中填入下面语句
```
if (this.currentSong.lyric !== lyric) {
    return
}
当 当前歌词不等于获取来的歌词的时候，就什么都不做，否则才将歌词格式化操作
```
当歌曲列表中只有一首歌的时候，切换下一首，出现下面样式是都是灰色的
- 解决：当只有一首歌的时候，next或者prev方法调用loop方法后直接返回，不执行下面的this.songReady = false这条语句

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^