Vue 實(shí)現(xiàn)的音樂(lè)項(xiàng)目 music app 知識(shí)點(diǎn)總結(jié)分享

@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 返回的數(shù)據(jù)在 response.data，要把數(shù)據(jù)透?jìng)鞯轿覀冏远x的接口里面 res.json(response.data)
    }).catch((e) => {
      console.log(e)
    })
  });
}

另外 因?yàn)槭?http 請(qǐng)求數(shù)據(jù)，是ajax，所以 format 參數(shù)要將原本接口的 jsonp 改為 json

迷你播放器暫停狀態(tài)，進(jìn)入全屏，按鈕在進(jìn)度條最左邊

原因：當(dāng)播放器最小化的時(shí)候，progress-bar 仍然在監(jiān)聽(tīng) percent 的變化，所以在不斷計(jì)算進(jìn)度條的位置，然而這個(gè)時(shí)候由于播放器隱藏，進(jìn)度條的寬度 this.$refs.progressBar.clientWidth 計(jì)算為0，因此計(jì)算出來(lái)的 offset 也是不對(duì)的，導(dǎo)致再次最大化播放器的時(shí)候，由于播放器是暫停狀態(tài)， percent 并不會(huì)變化，也不會(huì)重新計(jì)算這個(gè) offset ，導(dǎo)致 Bug。

解決方案：當(dāng)播放器最大化的時(shí)候，手動(dòng)去計(jì)算一次 offset，確保進(jìn)度條的位置正確。

progress-bar 組件要 watch 下 fullScreen，在進(jìn)入全屏的時(shí)候調(diào)用一下 移動(dòng)按鈕函數(shù)

獲取歌詞，雖然我們約定返回?cái)?shù)據(jù)是 json，但QQ音樂(lè) 返回的是依然是 jsonp，所以我們需要做一層數(shù)據(jù)的處理

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

ret = JSON.parse(matches[1])
將正則分組（就是正則括號(hào)內(nèi)的內(nèi)容）捕獲的json字符串?dāng)?shù)據(jù) 轉(zhuǎn)成 json 格式

然后我們?cè)?player 組件中監(jiān)聽(tīng) 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)
})

然后我們得到的返回?cái)?shù)據(jù)的是 base64 的字符串，需要解碼，這里用到了第三方庫(kù): js-base64
（我們這次用的是QQ音樂(lè)pc版的歌詞，需要解碼base64，而移動(dòng)版的QQ音樂(lè)是不需要的）

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

之后利用第三方庫(kù): js-lyric ，解析我們的歌詞，生成方便操作的對(duì)象

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

當(dāng)前歌曲的歌詞高亮是利用 js-lyric 會(huì)派發(fā)的 handle 事件

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

js-lyric 會(huì)在每次改變當(dāng)前歌詞時(shí)觸發(fā)這個(gè)函數(shù)，函數(shù)的參數(shù)為 當(dāng)前的 lineNum 和 txt

let middleLine = isIphoneX() ? 7 : 5  // 鑒于iphonex太長(zhǎng)了，做個(gè)小優(yōu)化
if (lineNum > middleLine) {
  let lineEl = this.$refs.lyricLine[lineNum - middleLine]
  this.$refs.lyricList.scrollToElement(lineEl, 1000)
} else {
  this.$refs.lyricList.scrollTo(0, 0, 1000)
}

通過(guò)監(jiān)聽(tīng) middle 的 三個(gè) touch 事件

offsetWidth 是為了計(jì)算歌詞列表的一個(gè)偏移量的，首先它的偏移量不能大于0，也不能小于 -window.innerWidth。
left 是根據(jù)當(dāng)前顯示的是 cd 還是歌詞列表初始化的位置，如果是 cd，那么 left 為 0 ，歌詞是從右往左拖的，deltaX 是小于 0 的，所以最終它的偏移量就是 0+deltaX；如果已經(jīng)顯示歌詞了，那么 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 按需加載路由：

當(dāng)打包構(gòu)建應(yīng)用時(shí)，Javascript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。

結(jié)合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實(shí)現(xiàn)路由組件的懶加載。

首先，可以將異步組件定義為返回一個(gè) Promise 的工廠函數(shù) (該函數(shù)返回的 Promise 應(yīng)該 resolve 組件本身)：

const Foo = () => Promise.resolve({ /* 組件定義對(duì)象 */ })

第二，在 Webpack 2 中，我們可以使用動(dòng)態(tài) import語(yǔ)法來(lái)定義代碼分塊點(diǎn) (split point)：

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

在我們的項(xiàng)目中的 router/index.js 是這樣定義的：

// Vue 異步加載路由
// 引入5個(gè) 一級(jí)路由組件
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")
// 二級(jí)路由組件
const SingerDetail = () => import("components/singer-detail/singer-detail")
const Disc = () => import("components/disc/disc")
const TopList = () => import("components/top-list/top-list")

無(wú)需改動(dòng)其他的代碼

電腦，手機(jī) 同一WIFI下

配置 config 的 index.js 里的 host 為 "0.0.0.0"，手機(jī)可以打開(kāi)電腦的IP地址+端口查看

mac下 ifconfig 查看ip

移動(dòng)端console：vConsole
移動(dòng)端抓包工具：charles

以上是在實(shí)現(xiàn)這個(gè)音樂(lè) Vue 項(xiàng)目中遇到的難點(diǎn)以及一些使用技巧。在這里記錄下來(lái)方便以后自己查閱，還能夠給同樣在前端這個(gè)小領(lǐng)域奮斗的大家提供一小些學(xué)習(xí)資料~

我的 Github：https://github.com/nanyang24
如果對(duì)你有幫助，歡迎 star 和 互粉 ~