Vue音乐播放器

vue全家桶做的音乐播放器

依赖：

“babel-runtime”: “^6.26.0”,对ES语法进行转义
“fastclick”: “^1.0.6”,解决移动端300毫秒延迟
“babel-polyfill”: “^6.26.0”,(polyfill补丁的意思)，就是对一些ES6 的api比如promise这种做一个转义
jsonp解决跨域问题（https://github.com/webmodules/jsonp）

组件轮播

better-scroll

npm install better-scroll --save

代码转化babel-loader

文档地址

npm install --save-dev babel-loader babel-core babel-preset-env webpack

vue-lazyload插件:用于图片懒加载

npm install vue-lazyload --save

v-for爆红，

Vue 2.2 之后，要求 component 进行列表渲染时，必须指定 key，因此这里可能是 vscode 的一个误报（tr 不是 component），如果不想看到这样的提示，你可以绑定一个 key，或者先检查一下自己有没有做过升级，然后再去看看相关内容升级之后有些什么变化。也可以设置里面添加：”vetur.validation.template”: false
也可以：

|0(或0)：表示向下取整相当于math.floor

高斯模糊

this.$refs.filter.style['backgdrop-filter']=`blur(${blur}px)`

普通安卓手机无法体验的高斯模糊

vue动画钩子，css3的animation动画

<transition 
    name="normal"
    @enter="enter"
    @after-enter="afterenter"
    @leave="leave"
    @after-leave="leaveEnter"
    >

这里用第三方开源的动画库

create-keyframe-animation

npm install create-keyframe-animation --save

用法移步api反正就是import之后一顿嗨

svg用于底部迷你播放器歌曲播放进度的圆环

<div class="progress-circle">
        <svg :width="32" :height="32" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"/>
            <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" stroke-dasharray="314" stroke-dashoffset="157"/>
        </svg>
        <slot></slot>
</div>

用数据配合stroke-dasharray=”314” stroke-dashoffset=”157”实现圆圈歌曲进度

findIndex

接收一个函数，函数可以拿到每个元素

findIndex(()=>{
})
let index=list.findIndex((item)=>{
    return item.id===this.currentSong.id
})

歌单页面数据

qq音乐的接口referer:https://y.qq.com，不能通过jsonp的方式了，这里用node做转发，在请求接口的地方用axios请求，然后直接请求本地地址

//api/recommend.js
export function getSongList (disstid) {
    const url = '/getSongList'
    const data = Object.assign({}, commonParams, {
        format: 'json',
        needNewCode: 1,
        disstid: disstid,
        type: 1,
        json: 1,
        utf8: 1,
        onlysong: 0,
        g_tk: 1800233000,
        platform: 'yqq',
        needNewCode: 0,
        onlysong: 0,
        notice: 0
    })
    return axios.get(url, {
        params: data
    }).then((res) => {
        return Promise.resolve(res.data)
    })
}

//devserver里头写这样的转发
    app.get('/getSongList', function (req, res) {
      var url = 'https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg'
      axios.get(url, {
        headers: {
          referer: 'https://y.qq.com/',
          host: 'c.y.qq.com'
        },
        params: req.query
      }).then((response) => {
        res.json(response.data)
      }).catch((e) => {
        console.log(e)
      })
    })

succ

后端接口代理

在build下面的webpack.dev.conf.js里面配置后端代理，写成自定义接口，然后前端请求自定义的接口

const axios = require('axios') 
devServer 里添加
  before(app) {
      app.get('/getDiscList', function (req, res) {
        var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
        axios.get(url, {
          headers: {
            referer: 'https://y.qq.com/'
          },
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((e) => {
          console.log(e)
        })
      })
    }

//api/recommend(推荐歌单的api)
export function getDiscList() {
  const url = '/getDiscList'
  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    picmid: 1,
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })
  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

//组件中
import {getDiscList} from 'api/recommend'

methods: {
    _getDiscList() {
        getDiscList().then((res) => {
          if (res.code === ERR_OK) {
            this.discList = res.data.list
          }
        })
      }      
    }

项目地址