没错，这是MOOC网站上的Vue音乐播放器，后台是某音乐播放器的在线界面。虽然写这种项目的人很多，但不得不说这还是凤毛麟角。适合vue改进的好项目。这个项目除了要写一个比较大和复杂的项目外，主要是想用它来应对面试。确实全面提升了我的vue业务能力，也让我发现工作更加得心应手。代码内容和作者的源码不同，因为作者的编码习惯和我差别很大，或者说比我高级，生搬硬套意义不大。有时间的话最好从头到尾自己写一遍，包括所有的样式，代码量比较大。业余时间写的，一个月左右就完成了项目。这只是我按照作者的结构来编码的时候。项目基本完成了，但是因为入职了，最近没有时间。为了改进它，下面是该项目的简介。更详细的介绍请访问github中的源码地址[https://github.com/wwenj/web-music-player]希望大家在这里有所收获，欢迎star项目介绍基于一个基于vue全家桶的手机音乐播放器webapp，通过jsonp跨域和代理技术栈从qq音乐后台获取数据前端：vue全家桶，es6，sass，axios，jsonp，better-scroll数据：qq音乐界面选曲功能模块：页面推荐页：轮播，推荐歌曲列表，点击跳转到详情组件下的3个歌手页面：按姓氏首字母排序，点击侧边字母栏跳转到对应歌手区排名页：几个List，详情页显示排名号搜索页：搜索框监听内容变化并显示搜索结果，搜索结果拉起加载，点击搜索结果添加到当前播放列表和播放歌曲，搜索歌手跳转到歌手详情页；保存搜索历史，显示热门搜索标签个人页面：标签显示最近播放历史，以及我的收藏列表播放页面：旋转头像，播放时间，进度条，上一首，下一首，收藏夹，播放模式（单次-随机),歌词页,播放按钮,迷你底部播放条(播放页面收起时显示)功能播放列表:显示当前播放列表,查看播放模式,清空列表,点击收藏,点击删除,点击添加歌曲到当前播放添加歌曲到播放列表：搜索歌曲，添加播放历史，为搜索历史添加播放组件：拖动进度条跳转到播放进度，歌词跟随进度联动架构设计15个业务组件，9个基础组件详细组件，歌曲list组件、搜索框组件、滚动组件、加载组件等组件复用vuex集中状态管理：搜索历史、收藏列表、播放历史广播播放状态、播放模式、关闭播放页面、当前播放指数排行榜数据、推荐歌单数据、歌手数据（在详情页使用）模块化：js模块写在assets中，数据请求模块写在api中，vuex写在mutation中.js,state.js,getters.js,action.js移动端适配：淘宝适配方案amfe-flexible，使用sass函数将rem统一为普通px逻辑单元localStorage项目中存放若干历史记录集合列表测试边界条件测试歌曲未加载成功连续点击下一首：设置标志值，事件开始前进行判断，歌曲加载成功后继续执行选择播放当前正在播放的歌曲：当手表监听到song，如果新旧值相同，则什么都不做改变顺序时播放列表中只有一首歌曲：当只有一首歌曲时，判断只有一首歌曲，并且播放列表中的最后一首歌曲被删除：关闭播放列表和播放页面。Nodata(search,favorite,history等)found:displayprompts当小播放页面底部出现空信息组件时，重新计算dom并显示正确的滚动位置。手机测试兼容性：uc音乐播放器无法播放歌曲。滚动搜索结果，出现小键盘：触摸搜索结果列表，使输入搜索框失焦播放页面收起动画卡慢：修改收起动画，改变透明度项目总结jsonp和proxy难点，得到QQ音乐真实后台数据，并使用better-scroll手机插件对获取到的数据进行二次封装（每次渲染dom时需要重新计算scroll宽度），封装成组件。vuex状态管理项目结构设计收获业务：清晰的项目结构，学习良好的编程风格，Es6模块化编写，Eslint代码规范，vuex状态管理，通用组件封装复用，技术：jsonp跨域请求，vuego更深入了解掌握更精通项目截图推荐页、排行榜页、歌手页搜索页、我的本地（收藏、播放历史）详情页、歌单、加歌到歌单播放页、歌词页作者【王文健】2018年8月10日
