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 和 互粉 ~