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效果

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

项目截图

vue移动端音乐---使用QQ音乐数据_第1张图片 vue移动端音乐---使用QQ音乐数据_第2张图片 vue移动端音乐---使用QQ音乐数据_第3张图片
vue移动端音乐---使用QQ音乐数据_第4张图片 vue移动端音乐---使用QQ音乐数据_第5张图片 vue移动端音乐---使用QQ音乐数据_第6张图片

项目目录结构

vue移动端音乐---使用QQ音乐数据_第7张图片
api:存放获取后端数据的js
base:存放公用组件
common:主要存放静态的img、js、fonts、stylus
components:存放路由跳转页面组件
router:路由
store:存放状态管理(学习详情)
App.vue:项目根组件
main.js:项目入口文件

未解决问题

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

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

你可能感兴趣的:(vue笔记,vue)