毕业设计 微信小程序 音乐播放器

        大学室友根据网易云的API自己制作的微信小程序,获得校级优秀毕业设计(如果你是大佬请绕行),下面简单介绍一下:

        根据多次的使用不同的音乐APP发现,网易云音乐的页面设计最适合作为本微信小程序的页面基础模板。由于本作品是微信小程序,就需要剔除APP中的各种冗余的功能,页面设计也需要尽可能的简单直接,内容也要充实。然后根据以上几点,对应用的功能模块进行大量的分析与重构,最终确定应用的主体架构如图3-1所示。

 

图3-1 主要页面结构图

                          

         如图所示,可以看出本微信音乐播放器的结构主要有三大部分组成:在第一部分的登录页面中,输入已有的网易云音乐账号和密码然后点击登录就可以进入“发现音乐”和“我的音乐”页面。第二部分是本微信音乐播放器的最主要的页面,本页面总共分了四个子页面以及一个跳转页面,在“个性推荐”页面,有轮播图推荐、FM、每日歌曲歌单推荐等等,这些都能很好的满足基本推荐需求;在“歌单”页面,有今日推荐的全部歌单,并且可以通过右上角的分类来筛选歌单;在主播电台页面,这里会推荐各种精彩的电台;在“排行榜”页面,会有网易云音乐官方的排行榜以及各类的全球榜;“搜索”页面可以搜索歌曲、歌单、专辑等等诸多内容。第三部分“我的音乐”是用户自己的页面,上方展示了用户最近播放的歌曲、云盘以及收藏的歌曲,下面就是用户已经创建好的歌单、喜欢的音乐以及收藏的歌单等等。这几个主要页面构成了本播放器的主体,在这些页面中也实现了不少功能。

模块需求描述

        本微信小程序是一款拥有基础功能却又不局限于仅有基础功能的音乐播放器,在做到播放功能、搜索功能等等的基础之后,还需要实现歌单歌曲推荐、排行榜、歌曲评论等等附加功能。这些将会很好的提升用户体验。在本作品中,主要涉及下述模块:login模块,home模块,个人中心模块,专辑模块,歌手模块,DJ广播模块,FM电台模块,歌单模块,播放模块,播放列表模块,评论模块,排行榜模块,搜索模块,相似单曲推荐模块,热门推荐模块等等。

        登录模块,这是本微信小程序的入口模块,点击输入正确的网易云音乐用户名以及密码然后点击登录就可以进入主页面。主页模块是主页面,默认是展示“个性推荐”这个子页面,在顶部还可以选择“歌单”、“主播电台”或者“排行榜”等子页面,“个性推荐”中的最上面会有一个轮播图推荐,下面有FM、歌曲推荐以及云音乐热歌推荐;接着会有推荐歌单、最新歌曲以及主播电台的展示效果,每个区域里会展示六个推荐的内容。在“歌单”这个子页面中,会显示所有当前热门歌单,还可以通过右上角的“选择分类”中设置自己的听歌口味后进行筛选歌单。“主播电台”这个子页面中会有精彩电台节目推荐以及热门电台,方便用户找到属于自己的电台。“排行榜”子页面展示了网易云官方排行榜以及各种全球榜。个人主页模块里面包含了最近播放、我的云盘、我的收藏以及用户自己创建以及收藏的歌单。专辑模块里面有专辑里面的所有音乐,以及专辑封面、歌手以及专辑发行时间。

小程序主页面

在设计小程序的主页面的时候,我查看了很多音乐APP的主页,发现大多数的主页面都平平,只有网易云音乐的主页比较充实。于是在主页面添加了一个轮播图用来展示新歌的推荐,轮播图的下面有FM、今日歌曲推荐以及热歌榜,这可以让用户根据自己的喜好去查看想要欣赏的音乐。下面还有歌单、歌曲以及电台推荐,在这里的推荐会展示出一些推荐歌曲歌单等的封面、名称以及播放量来吸引用户发现新的音乐,主页面如图4-2所示。

                                            

 

       个人界面也是采用了简单的设计,上方的盒子里面有三个小功能:查看最近播放、查看云盘以及查看我的收藏。这些功能可以方便用户查看最近播放的歌曲,也可以用过我的云盘查看并播放云盘内的歌曲,还可以查看播放用户收藏的歌曲,这三个小功能能提高与用户的交互,页面如图所示。

                                                   

 

 

        个人界面也是采用了简单的设计,上方的盒子里面有三个小功能:查看最近播放、查看云盘以及查看我的收藏。这些功能可以方便用户查看最近播放的歌曲,也可以用过我的云盘查看并播放云盘内的歌曲,还可以查看播放用户收藏的歌曲,这三个小功能能提高与用户的交互。

        在下面的两个盒子分别是用户创建的歌单以及用户收藏的歌单。打开歌单即可查看到歌单的内容。点击歌单内的音乐也可以以进行歌曲播放。  

系统开发环境

操作系统:Windows 10 64位

相关开发软件:微信开发者工具 v1.02、webstorm2018

相关工具包:vue-cli、网易云音乐API

环境配置:Node.js v8.9.3、npm v5.5.1

需要的请加QQ:1206030220

运行截图

                          

                          

                         

                        

相关推荐
<p> <span style="color:#424242;font-size:14px;background-color:#FFFFFF;">熟悉项目开发过程中SSM框架、JSP、Mysql使用,知道各技术之间的如何衔接;</span> </p> <p> <span style="color:#424242;font-size:14px;background-color:#FFFFFF;"> </span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <strong><strong><strong>考虑到部分学生只需要学习前台(买家)或是后台(后台),故将电商系统分为电商系统前台和电商系统后台两个项目,</strong></strong></strong> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <strong><strong><strong>当前课程包含电商系统前台和电商系统后台</strong></strong></strong> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span><strong></strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span><strong>该课程主要涉及到的技术有:</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <strong> 项目涉及的技术:</strong> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;">  1、前端:jsp、css、javascript、jQuery(js框架)、bootstrap框架 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;">  2、后台:Spring MVC、Spring、Mybatis框架、javaMail进行邮件发送、jstl 、jstl自定义分页标签、代码生成器等 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;">  3、数据库:Mysql </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;">  4、服务器:Tomcat </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <strong>项目开发涉及的功能:</strong> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span>1、项目以及数据库搭建</span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 2、用户登录、退出 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 3、用户注册、邮件发送、以及用户信息激活 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 4、首页商品信息页面搭建以及查询功能实现 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 5、查询商品明细 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 6、加入商品至购物车、删除、更新、清除购物车商品信息 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 7、确认订单信息 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 8、订单页面搭建以及下订单功能实现 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 9、查询我的购物车以及订单信息 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 10、商品明细查看,商品修改,商品下架 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 11、商品类型管理 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 12、订单管理 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> 13、代码机器人使用等等 </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p> <br /> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong>其他实战项目:<br /> java项目实战之电商系统全套(前台和后台)(java毕业设计ssm框架项目)<br /> https://edu.csdn.net/course/detail/25771</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> java项目之oa办公管理系统(java毕业设计)<br /> https://edu.csdn.net/course/detail/23008</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> java项目之hrm人事管理项目(java毕业设计)<br /> https://edu.csdn.net/course/detail/23007</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> JavaWeb项目实战之点餐系统前台<br /> https://edu.csdn.net/course/detail/20543</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> JavaWeb项目实战之点餐系统后台<br /> https://edu.csdn.net/course/detail/19572</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> JavaWeb项目实战之宿舍管理系统(Java毕业设计含源码)<br /> https://edu.csdn.net/course/detail/26721</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> JavaWeb项目实战之点餐系统全套(前台和后台)<br /> https://edu.csdn.net/course/detail/20610</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> java项目实战之电子商城后台(java毕业设计SSM框架项目)<br /> https://edu.csdn.net/course/detail/25770</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> java美妆商城项目|在线购书系统(java毕业设计项目ssm版)<br /> https://edu.csdn.net/course/detail/23989</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> 系统学习课程:<br /> JavaSE基础全套视频(环境搭建 面向对象 正则表达式 IO流 多线程 网络编程 java10<br /> https://edu.csdn.net/course/detail/26941</strong></span> </p> <p style="color:#424242;font-size:14px;background-color:#FFFFFF;"> <span style="font-size:18px;"><strong><br /> Java Web从入门到电商项目实战挑战万元高薪(javaweb教程)<br /> https://edu.csdn.net/course/detail/25976<br /> 其他素材版(毕业设计或课程设计)项目:点击老师头像进行相关课程学习</strong></span> </p> <br />
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页