基于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.项目总结
- 微信小程序限制还是很多的
基于mpvue框架的仿酷狗音乐小程序开发的微信小程序(Robot Music)相关推荐
- 仿酷狗音乐播放器开发日志二十二 动态调色板控件第二版（性能大幅提升附源码）...
转载请说明原出处,谢谢~~ 在上次写的博客<仿酷狗音乐播放器开发日志二十一 开发动态调色板控件(附源码)>发布后,我在群里和网友讨论这个控件的性能和优 缺点,发现了他很多不足,还有很多提升 ...
- 仿酷狗音乐播放器开发日志二十一 开发动态调色板控件（附源码）
转载请说明原出处,谢谢~~ 上一篇仿酷狗日志结束后,整个换肤功能就只剩下调色板功能没有做了,我本以为会很简单,但是研究了酷狗的调色板功能后发现不是那么简单的事情.首先看一下酷狗的调色板的样子: 我原本 ...
- 仿酷狗音乐播放器开发日志二十一 开发动态调色板控件（附源代码）
转载请说明原出处,谢谢~~ 上一篇仿酷狗日志结束后,整个换肤功能就仅仅剩下调色板功能没有做了.我本以为会非常easy.可是研究了酷狗的调色板功能后发现不是那么简单的事情.首先看一下酷狗的调色板的样子: ...
- 仿酷狗音乐播放器开发日志——整体框架分析
转载请说明出处,谢谢~~ 学习duilib界面库有一段时间了,除了仓鼠软件共享以外还没用它开发过什么完整的软件项目.今天看到酷狗音乐播放器做得不错,经过几年的改革,酷狗现在的UI已经相当不错了.在这个 ...
- 仿酷狗音乐播放器开发日志十四——右侧乐库的实现
在使用酷狗播放器时,左侧功能块和右侧乐库功能是最常用的了,如果要下载音乐或者搜索自己喜欢的歌曲那就少不了右侧乐库.原版的乐库的截图如下 他拥有5个分类,分别是乐库.电台.MV.直播.歌词.从外 ...
- 仿酷狗音乐播放器开发日志二十四 选项设置窗体的实现（附328行xml布局源码）
转载请说明原出处,谢谢~~ 花了两天时间把仿酷狗的选项设置窗体做出来了,当然了只是做了外观.现在开学了,写代码的时间减少,所以整个仿酷狗的工程开发速度减慢了.今天把仿酷狗的选项设置窗体的布局代码分享出 ...
- 仿酷狗音乐播放器开发日志二十四 选项设置窗体的实现（附328行xml布局源码）...
转载请说明原出处,谢谢~~ 花了两天时间把仿酷狗的选项设置窗体做出来了,当然了只是做了外观.现在开学了,写代码的时间减少,所以整个仿酷狗的工程开发速度减慢了.今天把仿酷狗的选项设置窗体的布局代码分享出 ...
- Redrain仿酷狗音乐播放器开发完毕，发布测试程序
转载请说明原出处,谢谢~~ 从暑假到现在中秋刚过,我用duilib开发仿酷狗播放器大概经历了50天.做仿酷狗的意图只是看原酷狗的界面比较漂亮,想做个完整一些的工程来练习一下duilib.今天把写好的程 ...
- 仿酷狗音乐播放器开发日志十五——音乐电台列表控件的实现
转载请说明原文出处,谢谢~~ 前些日子封装了好几天控件,把webkit浏览器控件,vlc视频播放控件,音频播放控件做好了,做这些控件一来是可以单独使用,用到其他项目中,而来可以直接用到这个仿酷狗播放器 ...
最新文章
- java与fabric区块链--fabric-java-jdk部署搭建--（1）
- 优质免费在线学习网站【自用】
- GPT-3开始探索付费使用：每月给个700块，写得比莎士比亚还多
- python编程入门p-读书笔记 - 《Python编程：从入门到实践》
- IntelliJ IDEA for Mac 中 Java Web Project 默认的工件（Artifacts）输出目录
- linux 编译src.rpm,CentOS6.5下编译src.rpm包的内核
- Java轻量级业务层框架Spring两大核心IOC和AOP原理
- SELinux系列（八）——SELinux默认安全上下文的查询和修改(semanage命令)
- 《CCNA学习指南：Cisco网络设备互连（ICND1）（第4版）》——导读
- mysql默认端口号_什么是MySQL默认端口号？
- ORACLE动态SQL语句
- word文档打印表格时预览时看的到表格打印出来的表格没有上下两根横线？
- 软件工程专业如何论文选题？
- 基于node搭建前端服务器,nodejs做微信小程序后端
- 如何在linux系统中快速切换目录(目录栈的使用),如何在Linux下环境下快速切换工作目录...
- csgo单板透视距离绘制代码
- Vim 文件浏览器(Netrw)
- 在Centos7上安装Docker
- python点图_Python | 点图
- 「镁客·请讲」打造一台眼睛专属“跑步机”，鹰视菲诺是如何用AI拯救近视的？...