基于vue2.x的音乐播放器WebApp(tigermusic)

1. 项目实现

• **项目地址(请最好使用谷歌浏览器)：https://historytiger.github.io/MyMusic/dist/ **
• 数据来源于网络大佬免费提供的网易云音乐接口
• 四个主页面：推荐、歌手、排行、搜索
• 推荐页使用swiper滑动模块进行轮播，展示热门歌单。歌单点击歌单详情包裹歌单logo、歌单描述、歌单曲目
• 歌手页对歌手进行分类显示，点击显示详情，包括歌手图片，歌手描述，歌手信息。
• 排行榜页显示当前热门排行榜，共8个。每个排行榜样式为左侧排行榜图片右侧当前排行榜排名前三歌曲曲目。
• 搜索页默认显示搜索框，当前热搜关键字，以及搜索记录。

2.项目技术

• vue-cli项目主要使用vue-cli脚手架创建并初始化项目，以及项目的打包。
• vue-router单页面应用路由管理，根据用户输入不同网址显示不同页面
• vuex实现不同组件之间的状态共享
• vue-axios主要用来异步请求数据
• vue-aplayer-一款基于vue2.x的音乐播放器
• swipe用于主页面的轮播
• better-scroll对于内容冗长的地方使用，效果逼近原生。
• localstroge本地存储实现用户历史搜索纪录

3.项目截图

• 首页
  

• 歌手页
  

• 排行榜页
  

• 搜索页
  

• 播放器
  
  4.项目详情

• 主要通过异步请求获得数据进行渲染，主页中有4个子路由分别对应四个功能，通过对每个路由页面设置meat标签配合keepalive对部分页面进行缓存从来使部分页面来回跳转不需要重新请求，优化用户体验，并对axios请求设置拦截并加入加载动画，以防请求数据过多或者网速过慢导致出现空白页面。

• 播放器采用的是vue-aplayer插件，通过全局组件使用这个播放器。

• 所有页面的音乐音乐信息都可以点击，通过vuex中state注册一个状态为当前播放的歌曲信息包过图片、lrc、src、歌手、歌名。每次点击通过commit方法修改状态，同时播放器监听此状态，发生改变时候重置播放器 并将当前歌曲信息赋值给播放器。

5.遇到的问题

• vue-aplayer播放器每次歌曲信息改变的时候，当前播放器歌曲信息已被重新赋值，但是歌曲不能重新播放还保留在上一个曲目，通过查询百度最后通过vue异步更新队列$nextTick方法让每次信息改变时候播放器重新在dom上加载然后赋值音乐信息，最终解决。
• 歌单临时列表保存当前播放记录，通过state创建一个数组每次点击歌曲播放的同时让此数据unshift头部添加一次，结果每次点击的时候数组数量是增加了但是增加的元素总会给数组全部元素内容覆盖掉，最终没有找到代码问题，每次添加前通过Json.stringify()和Json.parse()将对象操作一遍再赋值后解决。
• github上传的时候，github要求必须强制使用https但是我的请求里面有部分http请求通过百度再html头标签中加入meta http-equiv=“Content-Security-Policy” content="upgrade-insecure-requests"就会自动补全s

6.项目总结

• 播放器每次点击歌曲会自动保存记录，会有歌单弹出效果 需要手动缩小