基于微信小程序的音乐播放的设计与实现

广东东软学院本科毕业设计（论文）基于微信小程序的音乐播放的设计与实现Designandimplementationofmusicplayingbasedonwechatapplet摘要本次设计实现的音乐播放器小程序，让用户可以在登录微信之后，在微信首页通过简单的下拉操作即可直接打开小程序即可享受到音乐视听盛宴。依托于微信本身对数据可以进行缓存，让用户在第一次听歌之后，无需多次耗费流量资源，即可继续播放。本文基于微信小程序开发，使用微信小程序独特构建，来实现音乐播放程序的设计和功能开发工作。在技术方面主要通过JS来进行业务逻辑的实现，而表现层则WXML和WXSS来共同实现。程序主要包括如下功能：首页歌曲歌单展示、歌曲搜索功能、歌曲列表一览功能、歌曲播放、单曲循环设置、随机播放设置、下拉刷新换曲、用户登录、歌曲切换功能、暂停/重播功能、歌曲时长进度条展示功能，能够基本满足用户对听歌的使用需求。关键词：互联网应用微信小程序音乐播放

ABSTRACTThemusicplayerappletdesignedandimplementedinthisdesignallowsuserstologintowechat,andthendirectlyopentheappletthroughasimplepull-downoperationonthewechathomepagetoenjoythemusicaudio-visualfeast.Relyingonwechatitself,datacanbecached,sothatuserscancontinueplayingafterthefirsttimelisteningtosongswithoutconsumingtrafficresourcesformanytimes.Basedonthedevelopmentofwechatapplet,thispaperusestheuniqueconstructionofwechatapplettorealizethedesignandfunctiondevelopmentofmusicplayingprogram.Intermsoftechnology,JSismainlyusedtoimplementbusinesslogic,whilewxmlandwxssareusedtoimplementthepresentationlayer.Theprogrammainlyincludesthefollowingfunctions:thefirstpagesongsingledisplay,songsearchfunction,songlistlistfunction,songplay,singlecyclesetting,randomplaysetting,pull-downrefreshandmusicchange,userlogin,songswitchingfunction,pause/replayfunction,songdurationprogressbardisplayfunction,whichcanbasicallymeettheuser'sdemandforlisteningtosongs.Keywords：Internetapplications,Wechatapplet,Musicplaying

目录Designandimplementationofmusicplayingbasedonwechatapplet摘要 1ABSTRACT 21. 绪论 11.1 选题背景 11.2 课题研究目的及意义 11.3 论文主要研究内容 21.4 论文的结构 22. 系统开发技术方案研究 32.1 平台与框架 32.1.1 微信开发者工具 32.1.2 Taro框架 32.2 开发技术 52.2.1 WXML技术 52.2.2 WXSS与CSS技术 52.2.3 Ajax技术 52.2.4 JavaScript 52.2.5 数据库概述 52.2.6 Node.js概述 63. 系统分析 73.1 系统可行性分析 73.1.1 技术可行性 73.1.2 经济可行性 73.1.3 操作可行性 73.2 系统开发环境 73.2.1 软件环境 73.2.2 硬件环境 73.3 系统需求分析 83.3.1 功能需求分析 83.3.2 性能需求分析 94. 系统模块详细设计 104.1 系统总体功能框架设计 104.2 系统功能模块设计 104.2.1 用户登录模块设计 104.2.2 系统首页模块设计 114.2.3 歌曲搜索功能设计 114.2.4 音乐播放模块设计 124.2.5 播放模式切换模块设计 124.3 本章小结 135. 系统实现 145.1 用户登录模块实现 145.2 首页模块实现效果 165.3 歌曲列表展示实现效果 165.4 音乐播放模块实现效果 175.5 播放模式模块切换实现效果 186. 数据库设计 207. 系统测试 217.1 测试与纠错流程 217.2 测试环境准备 217.3 测试方法介绍 227.4 系统功能测试 227.5 测试分析 24总结与展望 25参考文献 26致谢 27

绪论1.1 选题背景伴随着智能手机的普及以及国家对运营商提出的“提速降费”政策的实施，移动互联应用在国内市场百花齐放，各行各业都在移动端设备上搭载各自的APP。移动端设备的操作习惯和个人电脑使用完全不同，对于各应用厂商来说，他们需要在较小的屏幕上尽可能友好的展示用户需要的内容，才能达到培养用户习惯、继而达到持续拥有这个用户流量的可能[7]。同样随着移动端的应用越来越广泛的是：一个领域下同类型的公司也越来越多，本论文所实现的是一个音乐播放小程序，其中一个原因就是在日常听歌过程中，因为歌曲版权、曲库内容、使用习惯的不同，需要下载多个音乐APP，加大占用了手机的内存资源，同时带来了繁琐的操作方式。微信通过这么多年的努力，打造了一个完整的生态圈，使得用户粘度不断提高，引得各大互联网平台纷纷在微信上入驻为小程序商家，以满足自己产品多元化，增加产品可扩展性，提高用户交融性[3]，但是用户在操作上，只需要打开微信这一个APP即可，无需更加复杂的操作。总的来说，微信小程序是拥抱了用户希望的变化：减少APP的下载、注册，直接打开微信，一站即达。1.2 课题研究目的及意义微信作为一款高频的社交软件，对于入驻在微信上的小程序商家来说，很容易产生分享、易传播，达到用户数量裂变的目的。而对于用户来说，微信小程序带来了依托微信本身的单点登录、免注册、手机内存瘦身、易在一个朋友圈中进行传播等优势。本次设计实现的音乐播放系统，目的是基于微信平台，能够让用户在小程序上非常快速的实现歌曲收听等功能。同时也做到了对音乐播放软件功能的集成和成熟应用。通过微信本身的小程序分享接口，能够在朋友圈中进行快速推广，方便在日常生活中进行使用。对用户来说，一个轻便的音乐播放系统能够带来操作上的简化，功能清晰，让用户一目了然。对笔者来说，可以研究用户的使用习惯：借助微信后台的流量信息，可以进一步统计用户的歌曲播放量、小程序使用量，以进一步研究用户的操作习惯，更好地提升下一版本的系统功能。1.3 论文主要研究内容本次开发的音乐播放微信小程序，主要基于微信开发者工具上，使用Taro框架的开发流程进行，目的是为了后续可以适应多端产品的小程序使用，主要进行一下几块内容的研究：Taro组件及API功能的学习研究。微信小程序开发文档的学习研究。Taro框架React组件的学习研究。微信小程序设计指南的学习研究。JSON、Node.js、HTML、CSS的学习研究。系统功能需求模块分析、划分。系统的功能模块的划分是根据系统的功能需求来设定的，只有对需求分析的透彻，才会尽量避免返工的情况，因此，在软件开发之前，需求分析是第一要素。而为了减少数据的冗余，透过功能分析，采用结构化的数据规范方法，用以减少数据的操作产生的异常。1.4 论文的结构本论文一共有七章，其结构如下：第一章：绪论。目的是对本次设计实现的系统的背景、意义以及研究的内容做出说明。第二章：系统开发技术方案研究，主要对本系统所使用的关键技术和框架以及其原理和使用的原因进行介绍。第三章：系统分析，包括对系统的定义，可行性的分析、需求的分析，以及可行性方面的分析；第四章：系统模块详细设计，系统的设计指的是本系统总体功能模块的设计，并且对单独的模块实现的功能也有相对应的设计说明。第五章：系统实现，包括系统的实现原理和各个功能模块的具体实现。第六章：数据库设计第七章：系统测试，指的是系统的测试方法、测试结果、测试结论的分析。结论与展望。系统开发技术方案研究本章主要对本次开发的音乐播放系统所用到的相关软件技术以及开发平台进行了说明：采用的开发模式、系统开发所需要的IDE编码工具、开发语言、相应开发技术和系统结构进行了相应的介绍。2.1 平台与框架微信开发者工具微信开小程序开发团队专门设计推出完全匹配微信内容的开发工具-微信开发者工具，随着近两年对该工具的快速迭代和不断更新，目前已经处于比较稳定的状态，当然前期的开发者在开发的时候仍然要随着微信小程序的更新而对自己的应用进行更新。因此在微信开发者论坛上吐槽的文章是非常多的，但是正是这些吐槽的内容才是微信更新的一个庞大的知识体量库[1][2]。如图2.1所示：图2.1微信开发者工具个人中心：通过点击头像进行个人中心面板的显示；展示内容：小程序版本、版本更新的消息推送；提供切换小程序账号的入口在个人中心（头像）后边有三个按钮：模拟器、编辑器和调试器：通过点击进行这三块内容的显示或隐藏相应的模块编译模式：普通编译和自定义编译条件预览：在真机预览远程调试：提供远程调试真机的功能，主要通过共同局域网环境下的网络连接对小程序进行调试。切后台：切后台按钮会帮助我们快速的切到不同的场景值，通过这个场景值可以帮助我们去个性化一些我们的功能需求清缓存：清除开发者工具以及调试设备中的数据缓存、文件缓存、授权缓存、网络缓存和我们的登录状态。Taro框架Taro框架是进行微信小程序开发过程的一大利器。通过taro框架，我们可以使得技术栈进行统一，以实现在节约资源的同时，极大提高我们的开发效率[12]。通过taro，我们可以完成一次编码多端适配的效果。Taro编码和编译过程，以及目录结果分别见图2.2，图2.3：图2.2Taro流程图图2.3Taro项目目录Taro的特点是：遵循react的语法规范，可以使用JSX语法规范开发小程序的应用；支持组件化开发（解耦）；支持TypeScript语法开发；开发技术2.2.1 WXML技术W：代表微信，XML本身就是标记性语言，因为我们可以有非常直观的理解：WXML是APP应用程序开发过程中的界面XML描述文件，它是为构建适合的程序界面而出现的[4][5]。WXSS与CSS技术CSS指层叠样式表(Cascading

Style

Sheets)，定义了如何显示HTML元素，而这些元素通常存储在样式表中，这样的外部样式表可以极大的提高工作效率，多个样式定义可层叠为一[4][8]。CSS可以称得上WEB设计领域的一个突破，如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。Ajax技术AJAX=异步JavaScript+XML，

ajax技术用于创建快速动态网页。最显著的就是“局部刷新”功能，使得程序设计者在不加在整个网页的情况下，对网页的某部分进行刷新，这种技术极大的减少了资源的占用，并且一定程序上提升了网站的加载速度，使得用户体验度更加友好。有很多使用AJAX的应用程序案例：新浪微博、Google地图、开心网等等[3][4]。JavaScript通过百度百科上的查询，我们可以知道：JavaScript（以下简称JS）一种直译式的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。常用于网页客户端编程，使网页在客户端浏览器中，实现更多地动态功能，表现出更加丰富的视觉效果。JS由以下三个部分组成：ECMAScript：描述JS的语法和基本对象；文档对象模型（DocumentObjectModel，简称DOM））：描述处理网页内容的方法和接口；浏览器对象模型（BrowserObjectModel，简称BOM））：描述与浏览器进行交互的方法和接口。数据库概述数据库采用的是微信开发工具中的JSON数据库[3][6]：它既可以在小程序前端操作，也能够在云函数中进行读写。正常情况下，初始化数据库的代码如下所示：//初始化数据库constdb=wx.cloud.database();const_=mand;db.collection('userInformation').where({userName:_.eq(userName)}).get({success:function(res){if(res.data.length===1){that.setData({repetition:true})注意，在进行数据库连接的时候，要注意命名是正确的，不能与微信中现存的数据库的连接名称是相同的。Node.js概述Node.js有三个特征：服务器端JavaScript处理：server-sideJavaScriptexecution非阻断/异步I/O：non-blockingorasynchronousI/O事件驱动：Event-driven如上图所示，传统的服务器中，类似Apache、NGINX等web类型的服务器，客户端发送的每一个请求，都会在服务端创建一个进程来处理这个请求，但如果我们需要在一个页面一直保持连接，比如持续实施接收朋友的消息或者系统推送内容，就需要在客户端和服务端保持一个长时间的有效连接，这也就是长轮询。因此，node.js的非阻塞和事件驱动就派上了用场。

系统分析系统可行性分析3.1.1 技术可行性对系统可行性进行研究的目的在于确定是否可以在较短的时间内使用最小的代价来把系统功能实现。基于微信小程序的音乐播放系统的用户都是对这块内容有需要的人，在一定范围内关于数据关联系的涉及是比较强的。而且应用都是基于目前非常成熟的微信开发工具进行开发的，所以技术方面是没有问题的。3.1.2 经济可行性经济可行性研究的目的是分析一个新开发的系统的费用，本次基于微信小程序的音乐播放系统都是有基于成熟的技术来实现，完全是本人在课余时间看来完成的，并未占用更多的资源，所以在经济方面也是完全可行的。3.1.3 操作可行性操作可行性主要是看基于需求设计到开发出来的产品是否有人使用，用户的体验度是否良好？本平台的界面平滑度高，易于上手，尤其是用户基本都使用过微信，而使用本系统的人，不需要进行复杂的操作，只需要简单的对歌曲列表中的内容进行一次点触操作，即可实现歌曲播放功能。在UI设计上，通过对各大应用的调研，基本的功能按钮简单易懂，因此对用户的使用也没有问题，所以在操作方面也是可行的。系统开发环境软件环境本次开发的基于微信小程序的音乐播放系统的开发所需的软件环境如下：开发平台：微信开发者工具[1]开发语言：WXML、WXSS、AJAX、JS、JSON数据库、Trao框架其余内容：Windows10操作系统硬件环境本次开发的基于微信小程序的音乐播放系统的开发所需的硬件环境如下：硬件环境：①笔记本450*2MHZ/40G/1024MB/40G/。②手机：iPhone11、小米6。系统需求分析功能需求分析本章节通过用户的不同进行功能需求的区分设计，具体内容如下：角色和角色介绍：表3.1角色介绍表角色（参与者）角色描述管理员(歌曲资源维护)发布、删除、修改、查询发布出去的歌曲信息。普通用户登录后可以正常使用本小程序内所有的功能：音乐播放、音乐切换、音乐列表查询等角色前后端的用例关系图3.1角色前后端用例关系图表3.2描述了用户进行歌曲播放的用例活动。表3.2歌曲播放用例名称：问题发布参与者：所有用户描述：用户使用小程序，在点击具体的歌曲名称前置条件：用户成功登录微信，打开音乐播放小程序用例功能：用户在线听歌功能事件流：用户已正常登录微信，且正常打开小程序界面，进行歌曲的点击异常事件流：当播放按钮在点击的过程中，因网络波动造成微信不在线的状态，导致播放失败后置条件：系统没有改变表3.3描述了用户进行歌曲切换时候的用例活动。表3.3用户进行歌曲切换用例名称：问题回答参与者：所有用户描述：用户使用小程序，在歌曲播放界面，点击界面下方的上一曲/下一曲按钮，可以进行音乐的切换，且必须是上一首的歌曲前置条件：用户成功登录微信，打开音乐播放小程序，并且打开歌曲播放界面用例功能：用户歌曲切换功能事件流：用户已正常登录微信，在小程序上实现了歌曲播放，网络正常，点击上一曲/下一曲播放按钮进行音乐切换异常事件流：按钮在触发时候，因网络波动造成发布失败后置条件：系统没有改变下面以文字描述进行功能需求难点以及实现的痛点进行分析设计：随机播放模式下，通过多次点击音乐切换按钮，需要真正实现随机的功能，不能是类似顺序播放的上一曲、下一曲切换，但是如果是通过random函数产生随机的数字进行，容易产生index越位，因此随机播放模式需要先获取到当前数据库中的歌曲列表长度；性能需求分析数据准确度在本系统中，从系统用户的角度来分析，因为依托于微信的安全管理机制，尤其是数据库直接调用微信的Json数据库，所以用户的数据安全是相对不需要关心的，但是对于问题展示的内容是一定要准确的，尤其是涉及到不同的人发表的不同的评论信息，因此数据的准确性是最重要的，要保证这一块的内容功能的鲁棒性足够强，但是这方面有一定的保障，用户在操作过程中不会受到太大的影响。运行速度由于本系统所采用的数据库较小，而且框架比较成熟，尤其是对音乐资源和数据存储进行分离，只通过歌曲名称和id进行关联，大大减少了数据库的运行时间，因此不管是在数据处理时间以及程序的响应时间都达到了足够的优化内容，本系统的性能都是可以直接表现给用户的。

系统模块详细设计系统总体功能框架设计对系统功能模块的划分也是要依据对需求分析来开展的，划分功能模块时，如何进行模块之间的低耦合设计是考虑的主要问题，模块的规模要预先设想好。根据需求分析，本系统可划分为首页歌曲歌单展示、歌曲搜索功能、歌曲列表一览功能、歌曲播放、单曲循环设置、随机播放设置、下拉刷新换曲、用户登录、歌曲切换功能、暂停/重播功能、歌曲时长进度条展示功能，系统框架设计图如下图4.1所示：图4.1整体框架图系统功能模块设计用户登录模块设计基于微信小程序的特性，我们设计只有允许操作平台的人才可以使用功能,而小程序的特性就是可以调用微信的当前用户信息，实在单点登录的功能，但是登录模块依然是必须的。我们可以这样设想：用户等于进入了一个虚拟的登录页面，填写用户数据相关的用户名密码完成登录。登录模块设计的流程图，绘制出如图4.2所示的登录模块的流程图：图4.2用户登录模块设计系统首页模块设计用户登录到小程序中，系统直接跳转到小程序首页，并在跳转过程中向后台请求歌曲列表数据，默认加载存储在微信云端系统全部数据，前端页面设计基于WXSS+JS进行。功能模块设计图如下4.3所示：图4.3系统首页展示模块设计歌曲搜索功能设计歌曲搜索模块设计通过ajax技术，用户在前端输入框中输入相关歌曲名称、歌手名称、歌单名称，点击搜索之后，通过模糊查询规则与后台数据库中的数据进行关联性匹配，如果找到数据，则根据返回的数据内容，前端展示数据。如果找不到后台存放的歌曲信息，返回空列表；搜素过程中，如果因网络波动造成的请求失败，则通过微信应用本身的网络连接断开进行提示。模块功能图如下4.4所示：图4.4歌曲搜索功能流向图音乐播放模块设计音乐播放模块通过的前置条件是用户正常点击了播放按钮，点击页面上的歌曲列表项，跳转到歌曲播放界面，基于Node.js的数据轮询、长连接保持特性，在歌曲播放的同时，后台持续获取数据，数据缓存加载的内容，在前端通过歌曲时长和进度条功能向用户进行展示。模块功能图如下4.5所示：图4.5音乐播放模块播放模式切换模块设计同音乐播放模块的前置项相同，播放模式切换模块前置条件是用户正常点击了播放按钮，点击页面上的歌曲列表项，跳转到歌曲播放界面。通过点击“界面左下方的模式切换按钮，用户可以进行歌曲的随机播放模式、重复播放模式、顺序播放模式，在每一种模式切换成功之后，界面的UI图标也随着变化，并且在不同的模式下点击界面的上一曲/下一曲按钮的作用也不同。基本功能流程图如下图4.6所示：图4.6播放模式切换模块功能本章小结本章节的系统模块功能设计，充分利用软件工程的知识，在顶层设计之初就实现“高内聚、低耦合”的特点。并且，先从角色的划分来进行初步的设计，之后从两个角色是否有关联性找到共同点，以此作为减少工作量的一方面。然后根据角色来划分的功能模块，进行流程设计。充分考虑到了数据库中外键关联的相关内容，相信通过这样的设计，可以为接下来系统的具体功能实现打下良好的基础。系统实现根据本文上述章节的叙述，从软件的需求设计、数据库设计、功能设计、具体功能的分析，均进行了非常具体的实现，本章节依据上述章节的内容，进行相关系统功能的具体实现，主要通过功能的实现代码、实现截图进行验证展示。用户登录模块实现小程序在开发过程中，通过获取用户输入的用户名、密码，（可以在控制控制台中打印用户的用户名密码来进行验证）。在用户端的呈现效果是：用户在个人账号界面，直接点击登录按钮，即可在1秒内完成登录和主页跳转。实现效果如下图5.1所示：图5.1获取微信的用户名密码及登录展示小程序获取用户账号信息（账号同步）实现代码如下所示：（1）wxml<viewclass="itemView">用户名：

<inputclass="input"name="userName"placeholder="请输入用户名"

bindinput="userNameInput"/>

</view><viewclass="itemView">密

码：

<inputclass="input"passwordplaceholder="请输入密码"

bindinput="passWdInput"/>

</view><viewclass="viewName"style="background-color:#fbf9fe">

<buttonclass="loginBtn"bindtap="loginBtnClick">登录</button></view>（2）jsPage({

data:{

userName:'',

userPwd:""

},

//获取用户输入的用户名

userNameInput:function(e){

this.setData({

userName:e.detail.value

})

},

passWdInput:function(e){

this.setData({

userPwd:e.detail.value

})

},

//获取用户输入的密码

loginBtnClick:function(e){

console.log("用户名："+this.data.userName+"密码："+this.data.userPwd);

}

,

//用户点击右上角分享

onShareAppMessage:function(){

}})首页模块实现效果登录微信之后，点击小程序logo图标，成功进入到主页，主页展示内容包括所有顶部搜索框、轮播图海报切换、歌单类别展示、排行榜展示。实现效果如下图所示：图5.2主页展示歌曲列表展示实现效果歌曲列表展示可以通过首页多个部分实现跳转：用户通过输入框搜索用户通过点击首页歌曲歌单封面跳转之后，以list列表形式展示歌曲的序号、歌曲的名称、歌手名称，功能实现图如下所示：图5.3歌曲列表模块展示音乐播放模块实现效果音乐播放模块是最能体现本次设计的小程序界面友好的一个模块，用户通过点击具体的歌曲名称跳转到该界面，预先加载界面歌手海报、歌曲信息，并持续对歌曲进行缓存，界面同时展示了歌曲模式切换按钮、上/下曲播放按钮。在歌曲播放过程中，海报会进行动态的旋转，能够让用户在该界面停留时间更长。模块功能实现图如下所示：图5.3歌曲播放模块展示播放模式模块切换实现效果用户在歌曲播放界面，通过点击“界面左下方的模式切换按钮，用户可以进行歌曲的随机播放模式、重复播放模式、顺序播放模式，在每一种模式切换成功之后，界面的UI图标也随着变化，并且在不同的模式下点击界面的上一曲/下一曲按钮的作用也不同。下图展示了在歌曲播放界面通过连续点击播放模式按钮，对播放模式进行切换。用户同样可以通过对页面进行刷新操作，来实现不同模式下的歌曲切换效果。图5.5播放模式模块展示

数据库设计

系统测试系统在微信小程序开发者后，在测试之前分别运行双端的服务，确保平台具有进行完整性功能测试的前提，依据这个前提本章制定了下面的测试计划，并记录了相应的测试结果。测试与纠错流程测试评价测试评价纠错系统启动测试数据测试结果错误信息改正信息期望结果测试环境准备硬件环境（以此启动手机模拟器）测

试

平

台

硬

件

配

置核心配件CPUIntel/AMD酷睿i7/Ryzen系列处理器主板技嘉Z97/Z270/X99/990X/X370系列主板显卡NVIDIAGTX

1080内存影驰8GB

DDR4

2400x4/8GB

DDR3

1600x2硬盘浦科特M7V

512GB散热器超频3东海X5系统及驱动程序操作系统Microsoft

Windows

10主板驱动Intel/AMD芯片组驱动显卡驱动NVIDIA显示驱动DirectX环境DirectX

9.0c/12帧数监控Fraps

3.5.1软件环境：Windows/IOS/Adnroid/Taro/Node.js/微信开发者工具。测试方法介绍作为软件工程中非常重要的组成部分，软件测试贯穿在软件从设计到服务结束的全生命周期的过程中。对于测试方法，主要分为黑盒和白盒两种方式的测试，在系统实现的过程中，已经进行了单元测试、集成测试，主要是通过代码端的调试进行的，在本文中不做过多的叙述。本章节主要介绍系统的功能测试，通过黑盒测试的方式进行。系统功能测试服务启动冒烟测试测试用例名称双端服务启动测试/服务冒烟测试测试方法手动测试测试目标系统可以正常启动，日志中没有1级错误测试操作在安卓模拟器中启动小程序，观察是否可以正常进入主页，是否有闪退等情况；用户在IOS系统中启动小程序的服务，系统可以正常启动，界面可以正常打开。预期结果程序运行成功，没有异常的报错信息抛出，Android端和IOS端均可以正常显示测试结果通过歌曲播放模式切换测试测试用例名称歌曲播放模式切换测试测试方法手动测试测试目标能够完成歌曲播放模块的功能需求，无任何异常信息测试操作在安卓模拟器中启动小程序，通过下表1中的测试用例，逐条数据进行验证；在Iphone手机中启动小程序，通过下表1中的测试用例，逐条数据进行验证；预期结果根据测试用例表中的数据项，验证内容没问题测试结果通过表STYLEREF1\s6.SEQ表\*ARABIC\s11歌曲播放模块切换测试用例表用户类型播放模式模式切换是否成功提示内容使用者随机模式是随机模式使用者顺序模式是顺序模式使用者单曲循环是单曲循环使用者随机模式是随机模式使用者上/下曲切换是正常切换歌曲搜索播放测试测试用例名称歌曲切换播放测试方法手动测试测试目标用户完美匹配数据库中的数据，并且根据数据库中的数据进行Filter后台筛选，并展示到界面，观察前端数据是否错乱测试操作在安卓模拟器中启动小程序，搜索“夏天的风”；在Iphone手机中启动小程序，搜索“夏天的风”；预期结果程序运行成功，没有异常的报错信息抛出，能够对搜索的歌曲进行准确的列表展示测试结果通过歌曲播放模式测试测试用例名称歌曲播放模式测试测试方法手动测试测试目标可以正常播放音乐测试操作问题发布者在安卓模拟器中启动小程序，对音乐进行正常的播放；问题发布者在Iphone手机中启动小程序，对音乐进行正常的播放；预期结果程序运行成功，没有异常的报错信息抛出，支持测试目标中的内容。测试结果通过意见反馈功能测试测试用例名称意见反馈功能测试测试方法手动测试测试目标用户只要登录小程序之后，就可以点击个人主页的意见反馈按钮，输入相关内容，点击提交，完成意见反馈。测试操作根据音乐播放模块设计流程步骤进行；预期结果程序运行成功，音乐没有异常的报错信息抛出，进度条根据歌曲的进度也在正常的进行，支持测试目标中的内容。测试结果通过测试分析本次设计开发的音乐播放小程序时借鉴了国内外优秀小程序开发过程的设计，从需求进行统一的安排，再到系统实现、系统测试等过程均能够保证基本的功能没有明显bug，从界面到系统设计都保证了普通用户以及管理员用户能够方便操作。系统的主要特点和优点归纳如下：（1）本系统用的移置性和针对性都比较高，因为针对性高可以提供更好的服务而移置性可以在多个系统上运行，更给客户带来了极大的方便。（2）内容全面但是操作界面不会很复杂，设计上很多都做了自动跳转，其操作方便，用户界面友好，能够上网的人都可以很好的进行操作。经过对总体测试分析，基于微信小程序的音乐播放系统的设计与实现满足用户的要求和需求。功能齐全，操作简单，产品运行性能良好。

总结与展望从该系统设计的整体来看，本次设计开发的音乐播放系统操作简单、平滑性好，用户体验度良好。又因为功能比较清晰，所以系统功能的鲁棒性也是可以得到保障的。相信本次开发设计的系统会给用户带来非常直观舒服的使用。但是在设计的过程中，对于界面UI的设计、页面主体的的多样化选择方面还需要进行优化。比如：设计多种不同风格的主题，提供用户在不同的节假日以及发布的问题再得到解答之后的主页色彩变化和通知功能。毕业论文终稿修订在新冠肺炎疫情期间，2020年刚刚开年，一场疫情让本该及时返校的