基于mpvue框架的仿酷狗音乐小程序开发的微信小程序(Robot Music)

1. 项目实现

• 由于是小程序未认证所以只能添加体验者才能预览
• 项目github地址：https://github.com/historytiger/wx- 请下载放开发者工具食用
• 数据来源于网络大佬免费提供的网易云音乐接口
  -主页由6个部分组成：搜索栏、热门歌曲、新歌首发、热门歌单、排行榜单、底部导航栏。
  -小程序加载动画由于本小程序初始化加载会用到微信的用户信息，在微信开发者更新后需要用户执行操作才能授权，所以设置一个加载动画，一方面给主页的数据请求增加事件，减少空白页的视觉体验，一方面在酷炫的动画中让用户点击加载logo授权用户信息，才可进入主页面。
• 搜索框设置fixd定位，中间有个input输入框点击时候跳转详情搜索页，详情搜索页的输入框设置lazy当用户按下回车键input内容才更新，然后监听input内容，发生改变的时候进行关键字接口请求，input内容可以搜索歌手、专辑、歌曲
• 热门歌曲/新歌首发首页启动时候的一个异步请求，渲染前6首歌曲的图片、歌名、歌手，点击更多进入全部热门歌曲/最新歌曲
• 热门歌单首页启动时候的一个异步请求，渲染前6个歌单的图片、描述，点击更多进入全部热门歌单，点击任意歌单进入歌单详情页面包括封面图片、歌单描述、歌单创始人、创始人头像、以及全部歌单歌曲
• 排行榜单首页启动时候的一个异步请求，显示前三热门榜单，每个榜单显示封面图片以及当前榜单排行前三歌曲曲目。
• 底部导航栏包括三个功能：1.点击乐酷返回主页。2.中间圆形盒子默认显示为用户头像，当有歌曲播放的时候，图片会变为当前播放曲目的logo，并开始旋转动画，点击会跳转到播放详情页面并进行歌词自动滚动显示，当前播放的歌词会高亮，默认显示5句歌词。3.点击跳转我的页面，显示当前播放历史纪录曲目，和我的收藏曲目，使用微信的数据缓存就行保存用户操作

2.项目技术

• mpvue项目主要基于mpvue框架使用vue-cli脚手架创建并初始化项目以及代码编写。
• wx.navigateTo微信小程序不支持vue-router，使用WX原生的路由跳转及传参
• vuex实现不同组件之间的状态共享
• wx.request使用原生进行Https请求
• InnerAudioContext使用原生创建audio实例，并基于此实例开发功能
• wx.set/getStorage微信的本地存储功能用来实现播放记录和收藏歌曲
• wx.createAnimation实现加载动画、歌曲logo滚动
• wx.getUserInfo获取用户头像及用户名
• lyric-parser歌词解析插件，将lrc歌词文件解析成可用状态
• scroll-view配合lyric-parser插件实现歌词滚动

3.项目截图

• 加载页
  
• 首页

• 热门歌曲/最新歌曲详情页
  

• 热门歌单及歌单详情页
  

• 排行榜及详情页
  

• 底部导航栏播放详情及我的个人页面
  
  
  歌曲播放高亮显示及收藏功能
  

4.项目详情

• 主要通过异步请求获得数据进行渲染，由于主页显示数据过多，且网易云歌单详情不支持分页导致加载数据过多，为了优化速度主页请求数据后将所得的数据全部存在vuex中，每个小部分详情都过路由携带参数（自己的下标），然后详情页获取vuex中对应的对象将传入下标所得数据渲染出来。
• 播放器采用的是微信自带的audio实例，在index页面使用这个实例因为小程序主页不会被销毁只会被隐藏所以也达到全局使用的效果。
• 所有的歌曲渲染包括播放图标/暂停图标 收藏功能 播放时歌曲信息高亮
• 底部导航栏中间播放详情圆形盒子，当歌曲播放时候传入当前歌曲的图片并进行无缝旋转，点击则进入歌曲播放详情界面，上方为当前歌曲图片信息也是无缝旋转点击封面即可暂停，暂停后歌曲会暂停 歌词会暂停，主页导航栏中心盒子旋转会暂停。底部导航栏和播放详情暂停后都会出现播放图标 ，二者任意一个点击都会继续播放 并全部进行旋转，及歌词的滚动
  
• 全局背景图片使用css3滤镜实现高斯模糊，给用户更好的视觉体验

5.遇到的问题

• 由于网易云不支持数据分页，导致主页加载数据量过大，虽然设置了加载动画，但是如果用户点击过快，还是会出现暂时空白页面。尚未找到解决办法
• lyric-parser插件提供创建实例进行歌词播放，但是没有提供销毁实例的方法。解决办法每次换歌的时候让上一个实例stop()暂停，然后重新new一个实例方法。出现问题如果用户点击歌曲后立马点击底部导航栏进入播放详情页面，间隔很短的话，会导致上一个实例还未暂停成功就重新new一个新实例 会导致歌词滚动出错
• 排行榜单页面在网速不好的情况下点击进入 背景文字会出现重叠，我在onUnload和onShow俩个生命周期函数中对背景文字进行初始化但是还是会出错，网速正常的情况下正常显示。
• 在微信开发者上体验小程序很流畅，在真机上体验时候，在初次加载的时候动画会不流畅，数据缓存后会正常旋转

6.项目总结

• 微信小程序限制还是很多的