vue移动端音乐---使用QQ音乐数据

项目预览视频：https://www.bilibili.com/video/av76348323
项目github地址：https://github.com/8127yyq/vue-musicPlay

技术栈

• vue
• vue-router
• vuex
• jsonp
• axios
• mixins

相关的基础插件

• stylus：CSS 的预处理框架，以及stylus-loader
• fastclick：解决移动端点击延迟300ms问题
• better-scroll：滚动
• vue-awesome-swiper：用于实现了首页的轮播图
• vue-layload：解决页面刷新后图片全部加载问题
• create-keyframe-animation：用于javascript在浏览器中动态生成css关键帧动画
• js-base64：获取到歌词数据Base64转码
• lyric-parser：歌词播放等状态
• good-storage：历史保存功能

实现的功能

• 四个基础页面：推荐歌单、歌手、排行、搜素

  • 推荐页面：轮播图，热门歌单
  • 歌手页面：可根据右侧字母表滑动到相应的歌手列表
  • 排行页面：榜单歌曲
  • 搜索页面：热门搜索，搜索更多数据

• 右上角-个人中心

  • 收藏的记录
  • 播放的历史记录

• 通过jsonp抓取QQ音乐数据

• mini播放器组件（有动态唱片cd，播放暂停功能）

• 全页面播放器（有动态唱片cd，可上一首，可下一首，播放暂停，收藏歌曲，3种模式切换：随机播放、顺序播放、单曲循环，根据拉动bar进度播放，歌词按歌播放等功能）

• 页面未加载好：loading效果

• 页面无数据：图片加文字显示效果

项目截图

项目目录结构

api：存放获取后端数据的js
base：存放公用组件
common：主要存放静态的img、js、fonts、stylus
components：存放路由跳转页面组件
router：路由
store：存放状态管理（学习详情）
App.vue：项目根组件
main.js：项目入口文件

未解决问题

• 搜索更多信息，在当前页面最下面都显示未加载完成的loading，而并不是当前页面更新完整拉动才有loading
• 搜索更多信息，输入歌手名称，未加载完不停下拉，突然可以显示的加载出来后都是歌手名
• 首页轮播图有问题需改

根据多方资料学习，还存在很多不同的问题，比如组件复用不够、喜欢代码旁标明各种注释等。希望自己可以继续进步。