【音乐小程序的开发与设计5300字（论文）】

音乐小程序的开发与设计摘要伴随着互联网的高速发展，微信推出了让人万众瞩目微信小程序，用微信小程序来给我们提供便利的服务，便利了人们的生活与日常出行。其次微信小程序避免了下载的需求，做到了用完即走。传统的音乐播放器过于臃肿与繁琐，为满足人们的娱乐需求，方便用户可以随时通过只能终端任意听取音乐，决定使用微信开发者工具开发出一款轻量级与简便的音乐播放器。本文采用Web等前端知识，设计实现音乐列表播放，视频音乐推荐播放，歌词，进度条等功能。通过这些便捷的功能提供高质量的音乐享受体验。通过小程序使播放器运行流畅，使用便捷，安全稳定。让其成为一款深受用户喜欢且高效的微信小程序。关键词：微信，微信小程序，音乐播放器目录摘要 II第1章绪论 11.1选题依据 11.2研究现况与意义 1第2章开发技术简介 22.1开发环境与工具 22.2相关技术简介 22.2.1PHP 22.2.2MySQL 22.2.3B/S结构 2第3章需求分析与设计 43.1需求分析 43.1.1功能结构设计 43.1.2业务流程设计 43.2数据结构设计 8第4章系统详细设计 134.1前端设计与开发 134.2后台功能开发 23第5章系统测试 305.1性能测试 305.2用例测试 315.3测试结论 32总结 33参考文献 34绪论开发背景伴随着互联技术与智能手机的高速发展与普及，人们的生活方式转变为线上利用智能终端和小程序为我们提供服务，通过这些工具便捷了人们的日常生活，例如：网购、付费、聊天、音乐等。人们的生活方式发生了巨大的变化。曾经风靡一时的MP3、MP4音乐播放器等已经被时代所淘汰，而现在部分音乐APP过于繁琐冗杂，音乐小程序的出现提供了更好的选择。本文利用微信开发者工具开发一款便捷的小程序，音乐播放器，来满足人们的日常音乐需求。通过开发音乐小程序，人们可以下载到小程序中来倾听便利的音乐，在如此快节奏的生活中也可以在闲暇时享受一首歌曲。1.1.1本文工作来源鉴于当前微信的火爆以及小程序的大范围推广使用，目前音频类的小程序前景很大，所以我选择《基于微信小程序的音乐播放器的设计与实现》来作为我的毕业设计。选题的目的与意义音乐,作为艺术的重要组成部分,它的意义是我们生活和情绪的调节器,以及我们内心的另一面。它是我们心灵的彼岸，精神的家园。在如今快节奏的时代，适当的停下脚步去聆听一首慢节奏的音乐，从而让我们的生活慢下来，这是一件奢侈的事。而随着近十年来智能终端的普及以及网络的快速发展，很多产品的使用都已经从线下转到线上。过去的DVD、CVD、Mp3等早已被淘汰，在智能手机成为互联网潮流工具的时代，各种各样的音乐播放器以及相关App让人感到过目不暇，其过于庞大的内部结构分也显得十分臃肿，因此选择一个简单方便并且实用的工具成为新一代音乐播放器的载体就显得如此重要。而2011年微信这个国民APP的问世，为如此便捷的程序打下了有利条件。国内发展在2016年的1月11号，微信之父-张小龙正式宣布，微信正在全力研发微信小程序，用来满足用户的小而微、个性化、低频等需求服务。早在几年前微信小程序便成为了街头小巷探讨的话题。小程序基于月活跃用户9亿人次的微信生态中，流量巨大，入口颇多，功能简单好用。小程序的发展历程如下：测试期：2016年11月，腾讯高级副总裁、微信之父张小龙透露，微信内部在研究将在订阅号和服务号外新设微信应用号，用于app的推广。紧接着2016年9月21日晚间，微信公众平台陆续对外发送小程序内侧邀请。引流期：11月3日晚间，微信团队宣布，微信小程序开启对外公测，开发者可以登录微信公众平台申请。跳一跳小程序的问世为其奠定了夯实的基础，微信小程序在用户中传播开，让更多的人知道了小程序的出现。爆发期：伴随着跳一跳火便全网，许多用户发现小程序的商机。2018年8月1日至12月31日，小程序提升了开发主流水的上调，广告收入分成比列优化上调，单日流水在30w到100w区间提升30%到50%。小程序迎来快速上升的时代。国外发展在2013年3月份，Facebook推出了JS的框架React，并在两年后推出基于JavaScript的开源框架ReactNative,它的官方文档是这样解释的：ReactNative能够让你在JavaScript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP，ReactNative着力于提高多平台开发的开发效率——仅需学习一次，编写任何平台(Learnonce,Writeanywhere)。经过多方面的完善，ReactNative成为全球跨平台开发的主流框架。我们现在所熟知的微信小程序就是基于此框架下。在后续的2016年之中，Facebook再次推出了InstantArticles内容平台，该平台主要作用是来提升文章的加载速度，方便用户阅读的速率，不需要跳转网站便可以阅读完剩余完章，微信小程序在文章的阅读方面也借鉴了其相关内容。第2章开发技术简介2.1开发环境与工具开发环境：Windows、微信公众平台开发工具:微信开发者工具2.2相关技术简介微信开发者工具是微信官方提供的专门用来针对小程序的开发工具，集中了模拟器、编辑器、调试器、云开发、调试、预览和上传等功能。关于微信开发工具的详细介绍，微信官方团队也在微信公众平台上发布了微信小程序的发布流程、开发文档、社区以及小程序的运营和小程序设计指导，能帮助开发者更快速简单的上手学习，高效率地开发出微信小程序。启动工具时，开发者需要使用已在后台绑定成功的微信号打开扫一扫扫描二维码6登录，后续所有的操作都会基于这个微信的账号，该开发者就是该小程序的管理员。程序调试主要有三大功能区：模拟器、编辑器和调试器。（1）模拟器：模拟器模拟微信小程序在手机端上的具体表现，通过手机扫码后即可显示出PC端的操作界面，进行和PC端相同的操作。（2）编辑器：就是编写代码的文件存放地，主要有app.js、app.json、app.wxss。包括最基本的四类小程序语言：WXML、WXSS、JS和JSON。（3）调试器：调试器有10个功能从左到右分别是：Console、Sources、Network、Security、AppData、Audits，还有四个隐藏在下拉列的Sensor、Storage、Trace以及WXML第3章需求分析与设计3.11需求分析我们现在正处在一个信息高速发展的互联网时代，信息每天都在呈现爆炸性的增长和传播。而移动端设备也正在逐渐取代PC端，相信用不了移动端尤其是智能手机将会完全取代PC端设备。而手机最主要的就是安装在上面的各大App。其中有一款APP我们相当熟悉，基本上没有人不使用的，那就是微信这款国民超级APP，而微信当中的小程序现在也已经成为人们日常生活中必不可少的应用。本次毕设中的系统是基于微信开发者平台的微信小程序音乐播放器，在目前的市场当中同类型的产品较少，为了满足当前市场的空缺以及更好的方便用户体验，加上自己对于音乐的喜爱，便选择了该类型的小程序作为本次毕业设计。除了上述理由，本次选择小程序开发音乐播放器而不选择App开发的原因还有如下几点，成本考虑，也是本次选择小程序开发的重要原因：①小程序的开发在多个终端都适用，而相对的App则只能在手机上使用，并且App的开发成本较小程序要大的多。②小程序的开发周期一般是两周，而一AP的开发则是一个月。（1）技术考虑①App的开发需要专业的技术团队以及长期的维修，试错的成本高。而小程序只需拥有一定的前端语言基础，再加上网络课程的学习或者是根据官方文档就可自行开发了。②App审核比较复杂，要向多个应用商店提交审核请求，手续十分繁琐；而小程序只需提交上传到微信公众平台审核即可。（2）市场考虑小程序现在是一个新兴产业，有很大的市场，在很多地方都可以用到它，但是App在市场中基本趋于饱和，拓宽市场没有太大机会。（3）用户考虑①小程序的使用便携度远远优于App，它无需下载就可用，随用随走。并且有多个入口：使用过后在微信首页的上拉处以及发现页的小程序处都可以找到，十分方便用户下次进入使用。②小程序可以通过微信群、朋友圈、公众号等渠道推广，而App则会频繁给用户推送广告，从而造成不必要的困扰降低用户的体验。最后本次开发的系统十分贴近生活，并且有很大的实用性与简易性，操作简单，上手方便。方便可以满足那些平时喜欢听音乐的人，并且加载快速用完即走，更优于平时的原生态音乐App提高时间的利用率。3.2功能模板设计系统主要包括以下三个模块：（1）发现模块：有轮播图，图标导航，推荐歌曲板块，排行榜板块，每日推荐列表，可以实现歌曲播放，查看歌词和评论等功能。（2）视频模块：有头部搜索，导航模块，视频列表，分享和收藏，可以实现视频播放等功能。（3）我的模块：有登录验证（前端+后端），登录成功即跳转个人中心，可以实现播放历史记录等功能。基于微信小程序的音乐播放器系统的功能模块设计图，如下图4-1所示3.3界面设计3.3.1主页1、其中包含banner轮播图、图标导航区域、推荐歌曲模块。整体实现轮播效果3.3.2视频页1、有头部搜索区域点击跳转至搜索界面。2、导航模块动态获取数据。3.3.3个人中心页1、有头部模块用户未登录显示默认头像图片，及游客姓名最近播放模块用户登录后显示用户最近播放记录第四章系统实现4.1.1功能模块实现根据功能模块设计，实现页面各功能具体以代码表示。4.1.2主页进入主页后可以点击搜索音乐、每日推荐、歌单、排行榜进行歌曲播放，也可点击推荐歌曲和排行榜板块进行滑动和播放，排行榜分类有0-20共21种，需要取前5种分类显示，整体实现轮播效果，当前滑块中显示后一个滑块部分内容效果图如下代码如下：//获取排行榜列表lettoplist=awaitrequest('/toplist')toplist.list.Splice(5)toplist=toplist.Listletindex=0letlistItem={};lettopList=[];//查询5个排行榜，循环五次while(index<5){//根据排行榜的id通过查询歌单查询排行榜详情lettopListData=awaitrequest('/playlist/detail',{id:toplist[index].id})allTopList.push(topListData.Playlist.tracks)//跳转至排行榜页面goToRanking(){wx.navigateTo({url:'/pages/ranking/ranking'})}4.1.3视频页进入视频页可以根据歌曲导航进行对应的视频预览，点击视频预览会跳转视频详情页并进行播放，同时还可以查看留言评论，点击评论右上角可以分享视频，图片替代Video标签性能优化，代码如下：//封装单页视频列表数据的请求asyncrequestPageList(pageNum){letresult=awaitrequest('/video/group',{id:this.Data.videoGroupList[pageNum].id,offset:offset*8})offset++;result=result.datareturnresult;},//点击视频事件playVideo(event){this.backgroundAudioManager=wx.getBackgroundAudioManager();this.backgroundAudioManager.Pause();constapp=getApp();4.1.4个人中心页用户未登录显示默认头像图片和昵称，用户登录显示用户头像及账号名，显示用户最近播放记录、喜欢的音乐、创建的歌单、收藏的歌单。点击它们就会跳转相应的歌曲列表，效果图如下：代码如下：<viewclass="info-box"><textclass="username">{{userInfo.nickname?userInfo.nickname:"游客"}}</text></view>//获取用户播放记录的功能函数asyncgetUserRecentPlayList(userId){letresult=awaitrequest('/user/record',{uid:userId,type:1})//console.Log(result);letrecentPlaylist=[];if(result.weekData.length>10){letindex=0;recentPlaylist=result.weekData.splice(0,10).map(item=>{item.id=index++;returnitem;})}else{letindex=0recentPlaylist=result.weekData.map(item=>{item.id=index++;returnitem;})}第五章系统测试5.1测试目的程序测试的目的是为了发现当前系统存在哪些地方的缺陷与不足。在之前的系统开发中，各个阶段多少存在着大大小小的问题和错误，而测试正是为了发现这些错误，并且后面加以改正的过程。一个成功的测试是在于发现了至今未发现的错误。5.2测试方法而测试的方法，是无穷无尽的，而且系统需要测试的方面也很多，测试人员不可能发现系统中所有的缺陷。所以本文采用开发者工具自带的测试——真机测试。5.3测试流程该系统的具体测试流程如下：打开微信开发者工具，选择音乐播放器小程序，然后管理员或用户扫码进行登录，看是否能扫码成功。不成功的在浏览器上打开微信公众平台，申请让管理员添加用户，登录成功的即可开始操作程序。点击“编译”按钮，程序开始运行，首先进入的是主页面——首页界面。可以看到首页都是推荐的榜单，随便点击某一个榜单看是否响应，响应以后可以看到会显示出该榜单中的全部歌曲，随便点击某一首歌曲进行播放，测试歌曲的播放暂停进度条等功能。接着测试主页面菜单栏中的其他控件是否正常。点击“发现”按钮查看动态能否正常使用。点击“我的”按钮查看当前用户的个人信息。在该“我的”页面还可以点击历史播放查看播放过的历史歌曲，点击小程序码查看音乐播放器小程序的二维码。结论一，分析总结本论文分别从需求分析、功能模块总体设计、系统实现和系统测试四个方面详细介绍了基于微信小程序的音乐播放器系统开发设计过程。本系统的设计目的是为了开发出一款轻量级简洁实用、随时可用，用完即走的高效化音乐播放器，适用于任何人群，尤其是喜爱音乐的人或是忙碌一天需要听