項目名稱：vue-fds_music

項目作者：符道勝

開源許可協(xié)議：Apache-2.0

項目地址：https://gitee.com/fudaosheng/vue-fds_music

項目簡介

Vue 高仿熱門音樂播放器，基本實現(xiàn)所有音樂相關(guān)功能。

本項目前端均是作者獨立自主開發(fā)，所用技術(shù)棧：Vue全家桶+better-scroll+axios。

后端接口來源及 API 安裝可前往項目主頁查看具體文檔。

項目知識點：Mixin

項目優(yōu)點

個人覺得本項目最大的優(yōu)點在于如何觸發(fā)音樂播放器。一般觸發(fā)音樂播放器有三種方法：emit、vuex、bus。

1.$emit

缺點：音樂播放器和要播放的音樂所在組件必須有父子關(guān)系，而明顯在一個音樂app中這是不現(xiàn)實的。

2.vuex

利用vuex的話可以先將要播放的音樂放在vuex中(假設(shè)放在state的musiclist中)，然后在音樂播放器組件生命周期函數(shù)中監(jiān)聽musiclist的狀態(tài)，當(dāng)音樂列表不為空時播放音樂。

缺點:

1.會存在musiclist不為空但是監(jiān)聽到的是空的現(xiàn)象,個人感覺是頁面渲染先后問題。

2.修改musiclist都要通過mutations比較麻煩。

3.bus

本項目采用的就是bus。使用$bus這樣不論音樂播放器和要播放的音樂所在組件是何種關(guān)系，都可以監(jiān)聽到要播放的音樂。

項目目錄介紹

項目效果圖

本項目核心：如何播放音樂

之所以將其放在mixin中，是因為這樣在任何一個頁面都能使用這個方法，降低了代碼的重復(fù)性。

import { _getMusicUrl, _getLyric } from "network/detail"import { playList } from "components/content/playmusic/playList";export const indexMixin = { methods: { PlayMusic(index = 0) { let path = this.$route.path; let musiclist; if (this.musiclist.length >= 200) { musiclist = this.musiclist.slice(0, 199); } else musiclist = this.musiclist; let url = null, lyric = null, currentLength = 0; let playlist = []; for (let i = 0, length = musiclist.length; i < length; i++) { let getUrl = _getMusicUrl(musiclist[i].id).then(res => { url = res.data.data[0].url; return url; }); let getLyric = _getLyric(musiclist[i].id).then(res => { lyric = res.data.tlyric.lyric; return lyric; }); Promise.all([getUrl, getLyric]) .then(results => { let song = new playList(i, musiclist[i], results[0], results[1]); playlist.push(song); currentLength++; /**每次完成兩個網(wǎng)絡(luò)請求都判斷是否滿足要求，滿足才發(fā)送事件 */ if (i == musiclist.length - 1) { this.$bus.$emit("playMusic", playlist, index, path); } }) .catch(err => { this.$Message.warning('數(shù)據(jù)加載中，請稍等'); }); } }, }

在音樂播放器組件中接收時：

mounted() { /**list是音樂列表，index是要播放的音樂在列表中的位置，path是當(dāng)前播放音樂的路由路徑 */ this.$bus.$on("playMusic", (list, index, path) => { this.music = []; this.path = path; this.music = list; // this.music = list.filter(item => { // return item.src !== ""; // }); /**對數(shù)組進行排序 */ this.music = this.music.sort((a, b) => { return a.index - b.index; }); /**在請求歌曲的時候可能有的歌曲不可用，或丟失。導(dǎo)致在播放器中的歌曲列表和頁面展示存在差異，可能會出現(xiàn)指定的播放歌曲不服 * 用一次查找解決問題 */ for (let i in this.music) { if (this.music[i].index == index) { this.currentIndex = i; break; //break跳出循環(huán)------continue跳出本次循環(huán) } } }); },

項目目前仍在持續(xù)開發(fā)中，作者也發(fā)現(xiàn)了一些開發(fā)過程中的問題，比如說目前遇到的歌手詳情頁面刷新沒有數(shù)據(jù)。

問題原因 ：路由跳轉(zhuǎn)的時候我傳入的是一個歌手信息對象，歌手詳情的數(shù)據(jù)都是根據(jù)這個對象的信息，id獲取的。

enterArtistDetail(artist) { this.$router.push({ path: "/artist", query: { artist: artist } }); this.$store.commit('addArtist',artist); }

如果你有解決這個問題的思路，歡迎你點擊下方了解更多前往項目主頁提出 PR，作者也會很樂意與和他一樣的 Vue 愛好者們交流。

總結(jié)

以上是生活随笔為你收集整理的vue 判断同一数组内的值是否一直_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。