值得学习fudaosheng/vue-fds_music项目介绍Vue高仿流行音乐播放器，基本实现了所有音乐相关的功能。本项目前端由作者自主开发，使用的技术栈：Vue全家桶+better-scroll+axios。后端接口源码和API安装请到项目主页查看具体文档。项目知识点：Mixin项目的优势个人觉得这个项目最大的优势在于如何触发音乐播放器。音乐播放器的触发方式一般有3种：emit、vuex、bus。1、$emit的缺点：音乐播放器和播放音乐的组件必须是父子关系，这在音乐app中显然是不现实的。2.如果vuex使用vuex，可以先把要播放的音乐放在vuex中（假设是放在state的musiclist中），然后在音乐播放器组件的生命周期函数中监听musiclist的状态，并在音乐列表不为空时播放音乐。缺点：1.会出现音乐列表不为空但监听的为空的现象。个人感觉是页面渲染顺序的问题。2.mutation修改音乐列表比较麻烦。3.总线本项目使用总线。使用$bus这样无论音乐播放器和要播放音乐的组件是什么关系，都可以监听到要播放的音乐。项目目录介绍项目效果图本项目核心：如何播放音乐之所以放在mixin中是因为这个方法可以在任何页面使用，减少代码重复。import{\_getMusicUrl,\_getLyric}from"network/detail"import{playList}from"components/content/playmusic/playList";exportconstindexMixin={methods:{PlayMusic(index=0){letpath=this.$路线.路径；让音乐列表；如果(this.musiclist.length>=200){musiclist=this.musiclist.slice(0,199);}elsemusiclist=this.musiclist;让url=null,lyric=null,currentLength=0;让播放列表=\[\];for(leti=0,length=musiclist.length;i{url=res.data.data\[0\].url;返回url;});让getLyric=\_getLyric(musiclist\[i\].id).then(res=>{lyric=res.data.tlyric.lyric;返回歌词;});Promise.all(\[getUrl,getLyric\]).then(results=>{letsong=newplayList(i,musiclist\[i\],results\[0\],results\[1\]);播放列表.push(song);currentLength++;/\*\*每次完成两次网络请求，判断是否满足要求，满足才发送事件\*/if(i==musiclist.length-1){this.$bus.$emit("playMusic",playlist,index,path);}}).catch(err=>{this.$Message.warning('数据加载中，请稍候');});}},}在音乐播放器组件中收到时：mounted(){/\*\*list为音乐列表，index为要播放的音乐在列表中的位置，path为当前音乐的路由路径播放音乐\*/这个。$bus.$on("playMusic",(list,index,path)=>{this.music=\[\];this.path=path;this.music=list;//this.music=list.filter(项目=>{//返回项目。源代码！==“”；//});/\*\*对数组进行排序\*/this.music=this.music.sort((a,b)=>{returna.index-b.index;});/\*\*点歌时，部分歌曲可能没有，或者可能缺失，导致播放器中歌曲列表与页面显示不一致，可能无法满足指定的播放歌曲\*使用搜索解决问题\*/for(letiinthis.music){if(this.music\[i\].index==index){this.currentIndex=i;休息;//breakoutoftheloop------继续跳出这个循环}}});}，项目还在持续开发中，笔者在开发过程中也发现了一些问题，比如艺术家详情页刷新时没有数据。问题原因：路由跳转的时候，我传入的是一个歌手信息对象，根据这个对象的信息和id获取歌手详情的数据。enterArtistDetail(artist){this.$router.push({path:"/artist",query:{artist:artist}});this.$store.commit('addArtist',艺术家);如果您已经解决了这个问题的思路，欢迎您点击以下链接前往项目主页提交PR，作者将很乐意与像他一样的Vue爱好者交流：https://gitee.com/fudaosheng/vue-fds_music
