基于Vue(2.5)+vuex+vue-router+vue-axios+better-scroll+Scss+ES6等开发手机音乐WebApp，UI界面参考安卓版网易云音乐和flex布局适配了常见的移动端。由于服务器的原因，很多人访问时，有些东西可能加载不出来。如果可以的话，以后再访问应该没有问题。对于这样的问题我真的很抱歉。项目演示地址：手机音乐WebApp，也可以扫描二维码访问：建议使用手机访问，电脑在Chrome调试模式下吃效果会更好。源码地址：vue-music-webapp，欢迎star和fork~如果你觉得我做得不错，我就厚着脸皮求star??哈，star是对我最大的鼓励（老脸变红了）虽然预览图压缩结束了，但是多张图片一起加载还是需要3MB左右，请耐心等待。觉得不错可以去以上地址体验一下~推荐，排行榜，歌手歌单详情，个人中心播放器，歌单搜索页开发目的通过学习开发一个Vue全家桶项目，让自己更多的使用Vue全家熟练掌握Bucket、模块化开发、ES6等知识，提升自己的技术能力。前端技术栈Vue：构建用户界面的MVVM框架vue-router：单页应用的路由系统，采用LazyLoadingRoutes技术实现异步加载，优化性能vuex：Vue集中状态管理，多共享components在某些状态下非常方便vue-lazyload：实现图片延迟加载，节省用户流量，优化页面加载速度better-scroll：解决移动端各种滚动场景需求的插件，使得滑动移动端体验更顺畅SCSS：css预编译ProcessorES6：ECMAScript新一代语法，模块化，解构赋值，Promise，Class等方法非常好用。后端Node.js：使用Express搭建的本地测试服务器vue-axios：用于请求后端API音乐数据NeteaseCloudMusicApi：网易云音乐NodeJS版API，提供音乐数据其他工具vue-cli：Vue脚手架工具，快速初始化项目代码eslint：代码风格检查工具，帮助我们规范代码编写（一定要制定好的代码规范）iconfont：阿里巴巴图标库，用过的都知道fastclick：消除手机浏览器点击300ms延迟，实现播放器核心功能，推荐页面、热榜页、歌手页、歌单详情、歌手详情、排行榜详情、搜索页、歌单、用户中心等功能。推荐页面推荐页面分为三个部分，分别是banner轮播、推荐歌曲列表、推荐歌曲。使用axiosrequestAPI获取数据，使用vue-lazyload延迟加载图片。轮播图：使用better-scroll实现，详见这里Slide。点击跳转方面，只实现了歌曲和播放列表的跳转，因为暂时只实现了这两个功能。推荐歌单、推荐歌曲：使用vuex管理数据，方便组件间的数据交互（播放器播放歌曲）。因为数据里也有播放次数，所以顺便加上了。排行榜页面也是通过API获取排行榜的数据，但是由于API获取的是排行榜中所有歌曲的数据，所以加载速度难免有点慢。后面看能不能优化。毕竟加载很慢。太影响用户体验了，别的不说。歌手页面实现歌手列表的左右联动（这个需要了解），因为之前写过一篇相关的博客，就不多写了。具体可以参考我之前的笔记MobileAlphabetIndexNavigation。歌单组件用于展示歌单，在很多地方都被复用了，比如：歌单详情页、排行榜详情页、歌手详情页、搜索结果、用户中心等。歌单详情页获取通过歌曲列表的ID获取歌曲列表中的歌曲数据，然后做一些交互来体验上面的，比如向上滑动显示状态栏然后把状态栏的标题改成歌曲列表的名字.你可以试试看。知道。然后就是复用歌单build来展示歌曲。排行榜详情、艺人详情、歌单详情基本没有区别，只是UI界面稍有变化（根据不同的内容做不同的优化）。毕竟，播放器最重要的组成部分是音乐播放器。如果你不会播放歌曲，那都是废话。实现功能：顺序播放、单曲循环、随机播放、收藏夹等播放、暂停音频实现使用HTML5。vuex用来管理数据，播放状态，播放历史，自定义歌曲等等，因为数据太多，如果直接传组件，会害死人，还是老老实实用vuex好。之前的数据传输确实非常快捷方便。图标使用了阿里巴巴的iconfont图标库，中间的圆盘旋转动画是使用动画实现的。歌词部分获取网易的歌词数据，然后使用第三方库lyric-parser进行处理。实现歌词显示，通过拖动进度条实现歌词同步滚动，歌词跟随歌曲进度高亮显示。通过本地存储存储喜欢的歌曲和播放历史数据。audio标签在手机端不能自动播放的问题在电脑端没有这个问题。这个问题真的让我很困惑。最后我用很奇葩的方法解决了（使用addEventListener监听touchend事件，然后在回调函数中让音频播放一次，详见App.vue文件，注释有写）。播放列表显示和管理当前正在播放的歌曲，可用于删除列表中的歌曲和选择播放歌曲。搜索功能实现功能：搜索歌手、歌单、歌曲、热门搜索、流量节流、下拉刷新、保存搜索记录。通过关键词请求API获取搜索数据，展示歌手、歌单、歌曲。实现了向上刷新，因为搜索可以设置请求数据的条数，所以可以用来实现向上刷新的功能。通过throttling函数实现数据节流，搜索数据通过localstorage存储。用户中心会展示本地存储的数据，方便用户使用，后续会增加更多功能。TODO优化排名加载速度优化重复代码增加歌曲评论增加MV、广播功能emm，让我想想更多的功能感谢Binaryify对接口文档NeteaseCloudMusicApi的持续维护和更新。感谢ustbhuangyi老师的Vue实战教程，让我学到了很多关于Vue的知识。最后当然是厚着脸皮再求一星。如果觉得我的项目还不错，请给个star鼓励一下~
