Vue 实现的音乐项目 music app 知识点总结分享

@import "~common/scss/mixin";
@import "~common/scss/variable";

if (this.loop) {
  width += 2 * sliderWidth
}

this.currentPageIndex = this.scroll.getCurrentPage().pageX

window.addEventListener("resize", () => {
  if (!this.scroll || !this.scroll.enabled) return

  clearTimeout(this.resizeTimer)
  this.resizeTimer = setTimeout(() => {
    if (this.scroll.isInTransition) {
      this._onScrollEnd()
    } else {
      if (this.autoPlay) {
        this._play()
      }
    }
    this.refresh()
  }, 60)
})

activated() {
  this.scroll.enable()
  let pageIndex = this.scroll.getCurrentPage().pageX
  this.scroll.goToPage(pageIndex, 0, 0)
  this.currentPageIndex = pageIndex
  if (this.autoPlay) {
    this._play()
  }
},
deactivated() {
  this.scroll.disable()
  clearTimeout(this.timer)
}

beforeDestroy() {
  this.scroll.disable()
  clearTimeout(this.timer)
}

before(app) {
  app.get("/api/getDiscList", function (req, res) {
    const url = "https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg"
    axios.get(url, {
      headers: {
        referer: "https://c.y.qq.com/",
        host: "c.y.qq.com"
      },
      params: req.query
    }).then((response) => {
      res.json(response.data) // axios 返回的数据在 response.data，要把数据透传到我们自定义的接口里面 res.json(response.data)
    }).catch((e) => {
      console.log(e)
    })
  });
}

另外 因为是 http 请求数据，是ajax，所以 format 参数要将原本接口的 jsonp 改为 json

迷你播放器暂停状态，进入全屏，按钮在进度条最左边

原因：当播放器最小化的时候，progress-bar 仍然在监听 percent 的变化，所以在不断计算进度条的位置，然而这个时候由于播放器隐藏，进度条的宽度 this.$refs.progressBar.clientWidth 计算为0，因此计算出来的 offset 也是不对的，导致再次最大化播放器的时候，由于播放器是暂停状态， percent 并不会变化，也不会重新计算这个 offset ，导致 Bug。

解决方案：当播放器最大化的时候，手动去计算一次 offset，确保进度条的位置正确。

progress-bar 组件要 watch 下 fullScreen，在进入全屏的时候调用一下 移动按钮函数

获取歌词，虽然我们约定返回数据是 json，但QQ音乐 返回的是依然是 jsonp，所以我们需要做一层数据的处理

const reg = /^w+(({.+}))$/
就是将返回的jsonp格式摘取出我们需要的json字段

ret = JSON.parse(matches[1])
将正则分组（就是正则括号内的内容）捕获的json字符串数据 转成 json 格式

然后我们在 player 组件中监听 currentSong 的变化，获取 this.currentSong.getLyric()

axios.get(url, {
  headers: {
    referer: "https://c.y.qq.com/",
    host: "c.y.qq.com"
  },
  params: req.query
}).then((response) => {
  let ret = response.data
  if (typeof ret === "string") {
    const reg = /^w+(({.+}))$/
    const matches = ret.match(reg)
    if (matches) {
      ret = JSON.parse(matches[1])
    }
  }
  res.json(ret)
})

然后我们得到的返回数据的是 base64 的字符串，需要解码，这里用到了第三方库: js-base64
（我们这次用的是QQ音乐pc版的歌词，需要解码base64，而移动版的QQ音乐是不需要的）

this.lyric = Base64.decode(res.lyric)

之后利用第三方库: js-lyric ，解析我们的歌词，生成方便操作的对象

getLyric() {
  this.currentSong.getLyric()
    .then(lyric => {
      this.currentLyric = new Lyric(lyric)
    })
}

当前歌曲的歌词高亮是利用 js-lyric 会派发的 handle 事件

 this.currentLyric = new Lyric(lyric, this.handleLyric)

js-lyric 会在每次改变当前歌词时触发这个函数，函数的参数为 当前的 lineNum 和 txt

let middleLine = isIphoneX() ? 7 : 5  // 鉴于iphonex太长了，做个小优化
if (lineNum > middleLine) {
  let lineEl = this.$refs.lyricLine[lineNum - middleLine]
  this.$refs.lyricList.scrollToElement(lineEl, 1000)
} else {
  this.$refs.lyricList.scrollTo(0, 0, 1000)
}

通过监听 middle 的 三个 touch 事件

offsetWidth 是为了计算歌词列表的一个偏移量的，首先它的偏移量不能大于0，也不能小于 -window.innerWidth。
left 是根据当前显示的是 cd 还是歌词列表初始化的位置，如果是 cd，那么 left 为 0 ，歌词是从右往左拖的，deltaX 是小于 0 的，所以最终它的偏移量就是 0+deltaX；如果已经显示歌词了，那么 left 为 -window.innerWidth，歌词是从左往右拖，deltaX 是大于 0 的，所以最终它的偏移量就是 -window.innerWidth + deltaX。

middleTouchStart(e) {
  this.touch.initiated = true
  this.touch.startX = e.touches[0].pageX
  this.touch.startY = e.touches[0].pageY
},
middleTouchMove(e) {
  if (!this.touch.initiated) return
  const deltaX = e.touches[0].pageX - this.touch.startX
  const deltaY = e.touches[0].pageY - this.touch.startY
  if (Math.abs(deltaY) > Math.abs(deltaX)) {
    return
  }
  const left = this.currentShow === "cd" ? 0 : -window.innerWidth
  const offsetWidth = Math.min(0, Math.max(-window.innerWidth, left + deltaX))
  this.touch.percent = Math.abs(offsetWidth / window.innerWidth)
  console.log(this.touch.percent)
  this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px,0,0)`
  this.$refs.lyricList.$el.style[transitionDuration] = 0
  this.$refs.middleL.style.opacity = 1 - this.touch.percent
  this.$refs.middleL.style[transitionDuration] = 0
},
middleTouchEnd() {
  let offsetWidth, opacity
  // 从右向左滑 的情况
  if (this.currentShow === "cd") {
    if (this.touch.percent > 0.1) {
      offsetWidth = -window.innerWidth
      opacity = 0
      this.currentShow = "lyric"
    } else {
      offsetWidth = 0
      opacity = 1
    }
  } else {
    //  从左向右滑 的情况
    if (this.touch.percent < 0.9) {
      offsetWidth = 0
      opacity = 1
      this.currentShow = "cd"
    } else {
      offsetWidth = -window.innerWidth
      opacity = 0
    }
  }
  const durationTime = 300
  this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px,0,0)`
  this.$refs.lyricList.$el.style[transitionDuration] = `${durationTime}ms`
  this.$refs.middleL.style.opacity = opacity
  this.$refs.middleL.style[transitionDuration] = `${durationTime}ms`
}

Vue 按需加载路由：

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：

import("./Foo.vue") // 返回 Promise

在我们的项目中的 router/index.js 是这样定义的：

// Vue 异步加载路由
// 引入5个 一级路由组件
const Recommend = () => import("components/recommend/recommend")
const Singer = () => import("components/singer/singer")
const Rank = () => import("components/rank/rank")
const Search = () => import("components/search/search")
const UserCenter = () => import("components/user-center/user-center")
// 二级路由组件
const SingerDetail = () => import("components/singer-detail/singer-detail")
const Disc = () => import("components/disc/disc")
const TopList = () => import("components/top-list/top-list")

无需改动其他的代码

电脑，手机 同一WIFI下

配置 config 的 index.js 里的 host 为 "0.0.0.0"，手机可以打开电脑的IP地址+端口查看

mac下 ifconfig 查看ip

移动端console：vConsole
移动端抓包工具：charles

以上是在实现这个音乐 Vue 项目中遇到的难点以及一些使用技巧。在这里记录下来方便以后自己查阅，还能够给同样在前端这个小领域奋斗的大家提供一小些学习资料~

我的 Github：https://github.com/nanyang24
如果对你有帮助，欢迎 star 和 互粉 ~