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

《基于微信小程序的音乐播放的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于微信小程序的音乐播放的设计与实现.docx（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、广东东软学院本科毕业设计（论文）本科毕业设计（论文）基于微信小程序的音乐播放的设计与实现Design and implementation of music playing based on wechat applet院 （系）计算机科学与技术系专 业软件工程班 级三班学 号16210120317学生姓名陈培升指导教师李可可提交日期2020年4月24 日毕业设计（论文）原创性声明本人郑重声明：所呈交的毕业设计（论文），是本人在指导老师的指导下，独立进行的设计（研究）工作及取得的成果，论文中引用他人的文献、数据、图件、资料均已明确标注出，论文中的结论和结果为本人独立完成，不包含他人已经发表或撰写

2、的作品及成果。对本文的研究作出贡献的个人和集体，均已在论文中作了明确的说明。本人完全意识到本声明的法律结果由本人承担。毕业论文作者（签字）： 签字日期： 年 月 日成绩评定成绩项论文成绩（百分制）折合比例实得成绩（折合分）指导教师成绩30%评阅教师成绩20%答辩成绩50%总评成绩注：毕业设计（论文）成绩按百分制评定。答辩成绩不及格的（评分低于60分的），则该毕业设计（论文）总评成绩为答辩成绩。摘要本次设计实现的音乐播放器小程序，让用户可以在登录微信之后，在微信首页通过简单的下拉操作即可直接打开小程序即可享受到音乐视听盛宴。依托于微信本身对数据可以进行缓存，让用户在第一次听歌之后，无需多次耗费流

3、量资源，即可继续播放。本文基于微信小程序开发，使用微信小程序独特构建，来实现音乐播放程序的设计和功能开发工作。在技术方面主要通过JS来进行业务逻辑的实现，而表现层则WXML和WXSS来共同实现。程序主要包括如下功能：首页歌曲歌单展示、歌曲搜索功能、歌曲列表一览功能、歌曲播放、单曲循环设置、随机播放设置、下拉刷新换曲、用户登录、歌曲切换功能、暂停/重播功能、歌曲时长进度条展示功能，能够基本满足用户对听歌的使用需求。关键词：互联网应用 微信小程序 音乐播放ABSTRACTThe music player applet designed and implemented in this design

4、allows users to log in to wechat, and then directly open the applet through a simple pull-down operation on the wechat home page to enjoy the music audio-visual feast. Relying on wechat itself, data can be cached, so that users can continue playing after the first time listening to songs without con

5、suming traffic resources for many times.Based on the development of wechat applet, this paper uses the unique construction of wechat applet to realize the design and function development of music playing program. In terms of technology, JS is mainly used to implement business logic, while wxml and w

6、xss are used to implement the presentation layer. The program mainly includes the following functions: the first page song single display, song search function, song list list function, song play, single cycle setting, random play setting, pull-down refresh and music change, user login, song switchi

7、ng function, pause / replay function, song duration progress bar display function, which can basically meet the users demand for listening to songs.Key words：Internet applications, Wechat applet ,Music playing 目 录Design and implementation of music playing based on wechat applet摘要1ABSTRACT21.绪论11.1 选

8、题背景11.2课题研究目的及意义11.3论文主要研究内容21.4论文的结构22.系统开发技术方案研究32.1平台与框架32.1.1微信开发者工具32.1.2Taro框架32.2开发技术52.2.1WXML技术52.2.2WXSS与CSS技术52.2.3Ajax技术52.2.4JavaScript52.2.5数据库概述52.2.6Node.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.系统模块详细设计

9、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致 谢27271. 绪论1.1

10、选题背景伴随着智能手机的普及以及国家对运营商提出的“提速降费”政策的实施，移动互联应用在国内市场百花齐放，各行各业都在移动端设备上搭载各自的APP。 移动端设备的操作习惯和个人电脑使用完全不同，对于各应用厂商来说，他们需要在较小的屏幕上尽可能友好的展示用户需要的内容，才能达到培养用户习惯、继而达到持续拥有这个用户流量的可能7。同样随着移动端的应用越来越广泛的是：一个领域下同类型的公司也越来越多，本论文所实现的是一个音乐播放小程序，其中一个原因就是在日常听歌过程中，因为歌曲版权、曲库内容、使用习惯的不同，需要下载多个音乐APP，加大占用了手机的内存资源，同时带来了繁琐的操作方式。微信通过这么多年

11、的努力，打造了一个完整的生态圈，使得用户粘度不断提高，引得各大互联网平台纷纷在微信上入驻为小程序商家，以满足自己产品多元化，增加产品可扩展性，提高用户交融性3，但是用户在操作上，只需要打开微信这一个APP即可，无需更加复杂的操作。总的来说，微信小程序是拥抱了用户希望的变化：减少APP的下载、注册，直接打开微信，一站即达。1.2课题研究目的及意义微信作为一款高频的社交软件，对于入驻在微信上的小程序商家来说，很容易产生分享、易传播，达到用户数量裂变的目的。而对于用户来说，微信小程序带来了依托微信本身的单点登录、免注册、手机内存瘦身、易在一个朋友圈中进行传播等优势。本次设计实现的音乐播放系统，目的是

12、基于微信平台，能够让用户在小程序上非常快速的实现歌曲收听等功能。同时也做到了对音乐播放软件功能的集成和成熟应用。通过微信本身的小程序分享接口，能够在朋友圈中进行快速推广，方便在日常生活中进行使用。对用户来说，一个轻便的音乐播放系统能够带来操作上的简化，功能清晰，让用户一目了然。对笔者来说，可以研究用户的使用习惯：借助微信后台的流量信息，可以进一步统计用户的歌曲播放量、小程序使用量，以进一步研究用户的操作习惯，更好地提升下一版本的系统功能。1.3论文主要研究内容本次开发的音乐播放微信小程序，主要基于微信开发者工具上，使用Taro框架的开发流程进行，目的是为了后续可以适应多端产品的小程序使用，主要

13、进行一下几块内容的研究：1、 Taro组件及API功能的学习研究。2、 微信小程序开发文档的学习研究。3、 Taro框架React组件的学习研究。4、 微信小程序设计指南的学习研究。5、 JSON、Node.js、HTML、CSS的学习研究。6、 系统功能需求模块分析、划分。系统的功能模块的划分是根据系统的功能需求来设定的，只有对需求分析的透彻，才会尽量避免返工的情况，因此，在软件开发之前，需求分析是第一要素。而为了减少数据的冗余，透过功能分析，采用结构化的数据规范方法，用以减少数据的操作产生的异常。1.4论文的结构本论文一共有七章，其结构如下：第一章：绪论。目的是对本次设计实现的系统的背景、

14、意义以及研究的内容做出说明。第二章：系统开发技术方案研究，主要对本系统所使用的关键技术和框架以及其原理和使用的原因进行介绍。第三章：系统分析，包括对系统的定义，可行性的分析、需求的分析，以及可行性方面的分析；第四章：系统模块详细设计，系统的设计指的是本系统总体功能模块的设计，并且对单独的模块实现的功能也有相对应的设计说明。第五章：系统实现，包括系统的实现原理和各个功能模块的具体实现。第六章：数据库设计第七章：系统测试，指的是系统的测试方法、测试结果、测试结论的分析。结论与展望。2. 系统开发技术方案研究本章主要对本次开发的音乐播放系统所用到的相关软件技术以及开发平台进行了说明：采用的开发模式、

15、系统开发所需要的IDE编码工具、开发语言、相应开发技术和系统结构进行了相应的介绍。2.1平台与框架2.1.1 微信开发者工具微信开小程序开发团队专门设计推出完全匹配微信内容的开发工具-微信开发者工具，随着近两年对该工具的快速迭代和不断更新，目前已经处于比较稳定的状态，当然前期的开发者在开发的时候仍然要随着微信小程序的更新而对自己的应用进行更新。因此在微信开发者论坛上吐槽的文章是非常多的，但是正是这些吐槽的内容才是微信更新的一个庞大的知识体量库12。如图2.1所示：图 2.1 微信开发者工具个人中心：通过点击头像进行个人中心面板的显示；展示内容：小程序版本、版本更新的消息推送；提供切换小程序账号

16、的入口在个人中心（头像）后边有三个按钮： 模拟器、编辑器和调试器：通过点击进行这三块内容的显示或隐藏相应的模块 编译模式：普通编译和自定义编译条件 预览：在真机预览 远程调试：提供远程调试真机的功能，主要通过共同局域网环境下的网络连接对小程序进行调试。 切后台：切后台按钮会帮助我们快速的切到不同的场景值，通过这个场景值可以帮助我们去个性化一些我们的功能需求 清缓存：清除开发者工具以及调试设备中的数据缓存、文件缓存、授权缓存、网络缓存和我们的登录状态。2.1.2 Taro框架Taro框架是进行微信小程序开发过程的一大利器。通过taro框架，我们可以使得技术栈进行统一，以实现在节约资源的同时，极大

17、提高我们的开发效率12。通过taro，我们可以完成一次编码多端适配的效果。Taro编码和编译过程，以及目录结果分别见图2.2，图2.3：图2.2 Taro流程图图2.3 Taro项目目录Taro的特点是：1. 遵循react的语法规范，可以使用JSX语法规范开发小程序的应用；2. 支持组件化开发（解耦）；3. 支持TypeScript语法开发；2.2 开发技术2.2.1WXML技术W：代表微信，XML本身就是标记性语言，因为我们可以有非常直观的理解：WXML 是 APP应用程序开发过程中的界面 XML 描述文件，它是为构建适合的程序界面而出现的45。2.2.2 WXSS与CSS技术CSS 指层

18、叠样式表 (CascadingStyleSheets)，定义了如何显示HTML元素，而这些元素通常存储在样式表中，这样的外部样式表可以极大的提高工作效率，多个样式定义可层叠为一4 8。CSS 可以称得上 WEB 设计领域的一个突破，如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。2.2.3 Ajax技术AJAX = 异步 JavaScript + XML，ajax技术用于创建快速动态网页。最显著的就是“局部刷新”功能，使得程序设计者在不加在整个网页的情况下，对网页的某部分进行刷新，这种技术极大的减少了资源的占用，并且一定程序上提升了网站的加载速度，使得用户体验度更加

19、友好。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等34。2.2.4 JavaScript通过百度百科上的查询，我们可以知道：JavaScript（以下简称JS）一种直译式的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。常用于网页客户端编程，使网页在客户端浏览器中，实现更多地动态功能，表现出更加丰富的视觉效果。JS由以下三个部分组成：ECMAScript：描述JS的语法和基本对象；文档对象模型（Document Object Model，简称DOM）：描述处理网页内容的方法和接口；浏览器对象模型（Browser Object Model，简称B

20、OM）：描述与浏览器进行交互的方法和接口。2.2.5 数据库概述数据库采用的是微信开发工具中的JSON数据库36：它既可以在小程序前端操作，也能够在云函数中进行读写。正常情况下，初始化数据库的代码如下所示：/ 初始化数据库 const db = wx.cloud.database(); const _ = mand; db.collection(userInformation).where( userName: _.eq(userName) ).get( success: function (res) if (res.data.length = 1) that.setData( repetit

21、ion: true )注意，在进行数据库连接的时候，要注意命名是正确的，不能与微信中现存的数据库的连接名称是相同的。 2.2.6 Node.js概述Node.js有三个特征： 服务器端JavaScript处理：server-side JavaScript execution 非阻断/异步I/O：non-blocking or asynchronous I/O 事件驱动：Event-driven如上图所示，传统的服务器中，类似Apache、NGINX等web类型的服务器，客户端发送的每一个请求，都会在服务端创建一个进程来处理这个请求，但如果我们需要在一个页面一直保持连接，比如持续实施接收朋友的消

22、息或者系统推送内容，就需要在客户端和服务端保持一个长时间的有效连接，这也就是长轮询。因此，node.js的非阻塞和事件驱动就派上了用场。3. 系统分析3.1 系统可行性分析3.1.1技术可行性对系统可行性进行研究的目的在于确定是否可以在较短的时间内使用最小的代价来把系统功能实现。基于微信小程序的音乐播放系统的用户都是对这块内容有需要的人，在一定范围内关于数据关联系的涉及是比较强的。而且应用都是基于目前非常成熟的微信开发工具进行开发的，所以技术方面是没有问题的。3.1.2经济可行性经济可行性研究的目的是分析一个新开发的系统的费用，本次基于微信小程序的音乐播放系统都是有基于成熟的技术来实现，完全是

23、本人在课余时间看来完成的，并未占用更多的资源，所以在经济方面也是完全可行的。3.1.3操作可行性操作可行性主要是看基于需求设计到开发出来的产品是否有人使用，用户的体验度是否良好？本平台的界面平滑度高，易于上手，尤其是用户基本都使用过微信，而使用本系统的人，不需要进行复杂的操作，只需要简单的对歌曲列表中的内容进行一次点触操作，即可实现歌曲播放功能。在UI设计上，通过对各大应用的调研，基本的功能按钮简单易懂，因此对用户的使用也没有问题，所以在操作方面也是可行的。3.2 系统开发环境3.2.1 软件环境本次开发的基于微信小程序的音乐播放系统的开发所需的软件环境如下：开发平台：微信开发者工具1开发语言

24、：WXML、WXSS、AJAX、JS、JSON数据库、Trao框架其余内容：Windows10操作系统3.2.2 硬件环境本次开发的基于微信小程序的音乐播放系统的开发所需的硬件环境如下：硬件环境：笔记本450*2MHZ/40G/1024MB/40G/。手机：iPhone11、小米6。3.3 系统需求分析3.3.1 功能需求分析本章节通过用户的不同进行功能需求的区分设计，具体内容如下：1. 角色和角色介绍：表 3.1 角色介绍表角色（参与者）角色描述管理员(歌曲资源维护)发布、删除、修改、查询发布出去的歌曲信息。普通用户登录后可以正常使用本小程序内所有的功能：音乐播放、音乐切换、音乐列表查询等2

25、. 角色前后端的用例关系图 3.1 角色前后端用例关系图1. 表3.2描述了用户进行歌曲播放的用例活动。表 3.2 歌曲播放用例名称：问题发布参与者：所有用户描述：用户使用小程序，在点击具体的歌曲名称前置条件：用户成功登录微信，打开音乐播放小程序用例功能：用户在线听歌功能事件流：用户已正常登录微信，且正常打开小程序界面，进行歌曲的点击异常事件流：当播放按钮在点击的过程中，因网络波动造成微信不在线的状态，导致播放失败后置条件：系统没有改变2. 表3.3描述了用户进行歌曲切换时候的用例活动。表 3.3 用户进行歌曲切换用例名称：问题回答参与者：所有用户描述：用户使用小程序，在歌曲播放界面，点击界面

26、下方的上一曲/下一曲按钮，可以进行音乐的切换，且必须是上一首的歌曲前置条件：用户成功登录微信，打开音乐播放小程序，并且打开歌曲播放界面用例功能：用户歌曲切换功能事件流：用户已正常登录微信，在小程序上实现了歌曲播放，网络正常，点击上一曲/下一曲播放按钮进行音乐切换异常事件流：按钮在触发时候，因网络波动造成发布失败后置条件：系统没有改变3. 下面以文字描述进行功能需求难点以及实现的痛点进行分析设计： 随机播放模式下，通过多次点击音乐切换按钮，需要真正实现随机的功能，不能是类似顺序播放的上一曲、下一曲切换，但是如果是通过random函数产生随机的数字进行，容易产生index越位，因此随机播放模式需要

27、先获取到当前数据库中的歌曲列表长度；3.3.2 性能需求分析1) 数据准确度在本系统中，从系统用户的角度来分析，因为依托于微信的安全管理机制，尤其是数据库直接调用微信的Json数据库，所以用户的数据安全是相对不需要关心的，但是对于问题展示的内容是一定要准确的，尤其是涉及到不同的人发表的不同的评论信息，因此数据的准确性是最重要的，要保证这一块的内容功能的鲁棒性足够强，但是这方面有一定的保障，用户在操作过程中不会受到太大的影响。2) 运行速度由于本系统所采用的数据库较小，而且框架比较成熟，尤其是对音乐资源和数据存储进行分离，只通过歌曲名称和id进行关联，大大减少了数据库的运行时间，因此不管是在数据

28、处理时间以及程序的响应时间都达到了足够的优化内容，本系统的性能都是可以直接表现给用户的。4. 系统模块详细设计4.1 系统总体功能框架设计对系统功能模块的划分也是要依据对需求分析来开展的，划分功能模块时，如何进行模块之间的低耦合设计是考虑的主要问题，模块的规模要预先设想好。根据需求分析，本系统可划分为首页歌曲歌单展示、歌曲搜索功能、歌曲列表一览功能、歌曲播放、单曲循环设置、随机播放设置、下拉刷新换曲、用户登录、歌曲切换功能、暂停/重播功能、歌曲时长进度条展示功能，系统框架设计图如下图4.1所示：图 4.1 整体框架图4.2 系统功能模块设计4.2.1 用户登录模块设计基于微信小程序的特性，我们

29、设计只有允许操作平台的人才可以使用功能,而小程序的特性就是可以调用微信的当前用户信息，实在单点登录的功能，但是登录模块依然是必须的。我们可以这样设想：用户等于进入了一个虚拟的登录页面，填写用户数据相关的用户名密码完成登录。登录模块设计的流程图，绘制出如图4.2所示的登录模块的流程图：图 4.2 用户登录模块设计4.2.2 系统首页模块设计用户登录到小程序中，系统直接跳转到小程序首页，并在跳转过程中向后台请求歌曲列表数据，默认加载存储在微信云端系统全部数据，前端页面设计基于WXSS+JS进行。功能模块设计图如下4.3所示：图 4.3 系统首页展示模块设计4.2.3 歌曲搜索功能设计歌曲搜索模块设

30、计通过ajax技术，用户在前端输入框中输入相关歌曲名称、歌手名称、歌单名称，点击搜索之后，通过模糊查询规则与后台数据库中的数据进行关联性匹配，如果找到数据，则根据返回的数据内容，前端展示数据。如果找不到后台存放的歌曲信息，返回空列表；搜素过程中，如果因网络波动造成的请求失败，则通过微信应用本身的网络连接断开进行提示。模块功能图如下4.4所示：图 4.4 歌曲搜索功能流向图4.2.4 音乐播放模块设计音乐播放模块通过的前置条件是用户正常点击了播放按钮，点击页面上的歌曲列表项，跳转到歌曲播放界面，基于Node.js的数据轮询、长连接保持特性，在歌曲播放的同时，后台持续获取数据，数据缓存加载的内容，

31、在前端通过歌曲时长和进度条功能向用户进行展示。模块功能图如下4.5所示：图4.5音乐播放模块4.2.5 播放模式切换模块设计同音乐播放模块的前置项相同，播放模式切换模块前置条件是用户正常点击了播放按钮，点击页面上的歌曲列表项，跳转到歌曲播放界面。通过点击“界面左下方的模式切换按钮，用户可以进行歌曲的随机播放模式、重复播放模式、顺序播放模式，在每一种模式切换成功之后，界面的UI图标也随着变化，并且在不同的模式下点击界面的上一曲/下一曲按钮的作用也不同。基本功能流程图如下图4.6所示：图 4.6 播放模式切换模块功能4.3 本章小结本章节的系统模块功能设计，充分利用软件工程的知识，在顶层设计之初就

32、实现“高内聚、低耦合”的特点。并且，先从角色的划分来进行初步的设计，之后从两个角色是否有关联性找到共同点，以此作为减少工作量的一方面。然后根据角色来划分的功能模块，进行流程设计。充分考虑到了数据库中外键关联的相关内容，相信通过这样的设计，可以为接下来系统的具体功能实现打下良好的基础。5. 系统实现根据本文上述章节的叙述，从软件的需求设计、数据库设计、功能设计、具体功能的分析，均进行了非常具体的实现，本章节依据上述章节的内容，进行相关系统功能的具体实现，主要通过功能的实现代码、实现截图进行验证展示。5.1 用户登录模块实现小程序在开发过程中，通过获取用户输入的用户名、密码，（可以在控制控制台中打

33、印用户的用户名密码来进行验证）。在用户端的呈现效果是：用户在个人账号界面，直接点击登录按钮，即可在1秒内完成登录和主页跳转。实现效果如下图5.1所示：图 5.1 获取微信的用户名密码及登录展示小程序获取用户账号信息（账号同步）实现代码如下所示：（1） wxml用户名： 密 码： 登录（2）jsPage(data: userName: , userPwd: ,/获取用户输入的用户名userNameInput: function (e) this.setData( userName: e.detail.value ),passWdInput: function (e) this.setData(

34、userPwd: e.detail.value ),/获取用户输入的密码loginBtnClick: function (e) console.log(用户名： + this.data.userName + 密码： + this.data.userPwd);,/ 用户点击右上角分享onShareAppMessage: function () )5.2 首页模块实现效果登录微信之后，点击小程序logo图标，成功进入到主页，主页展示内容包括所有顶部搜索框、轮播图海报切换、歌单类别展示、排行榜展示。实现效果如下图所示：图5.2主页展示5.3 歌曲列表展示实现效果歌曲列表展示可以通过首页多个部分实现跳

35、转：1） 用户通过输入框搜索2） 用户通过点击首页歌曲歌单封面跳转之后，以list列表形式展示歌曲的序号、歌曲的名称、歌手名称，功能实现图如下所示：图5.3歌曲列表模块展示5.4 音乐播放模块实现效果音乐播放模块是最能体现本次设计的小程序界面友好的一个模块，用户通过点击具体的歌曲名称跳转到该界面，预先加载界面歌手海报、歌曲信息，并持续对歌曲进行缓存，界面同时展示了歌曲模式切换按钮、上/下曲播放按钮。在歌曲播放过程中，海报会进行动态的旋转，能够让用户在该界面停留时间更长。模块功能实现图如下所示：图5.3歌曲播放模块展示5.5 播放模式模块切换实现效果用户在歌曲播放界面，通过点击“界面左下方的模式

36、切换按钮，用户可以进行歌曲的随机播放模式、重复播放模式、顺序播放模式，在每一种模式切换成功之后，界面的UI图标也随着变化，并且在不同的模式下点击界面的上一曲/下一曲按钮的作用也不同。下图展示了在歌曲播放界面通过连续点击播放模式按钮，对播放模式进行切换。用户同样可以通过对页面进行刷新操作，来实现不同模式下的歌曲切换效果。 图 5.5 播放模式模块展示6. 数据库设计7. 系统测试系统在微信小程序开发者后，在测试之前分别运行双端的服务，确保平台具有进行完整性功能测试的前提，依据这个前提本章制定了下面的测试计划，并记录了相应的测试结果。7.1 测试与纠错流程测试评价纠错系统启动测试数据测试结果错误信

37、息改正信息期望结果图6.1测试与纠错信息流程7.2 测试环境准备1) 硬件环境（以此启动手机模拟器）测试平台硬件配置核心配件CPUIntel/AMD酷睿i7/Ryzen系列处理器主板技嘉Z97/Z270/X99/990X/X370系列主板显卡NVIDIAGTX1080内存影驰8GBDDR42400x4/8GBDDR31600x2硬盘浦科特M7V512GB散热器超频3东海X5系统及驱动程序操作系统MicrosoftWindows10主板驱动Intel/AMD芯片组驱动显卡驱动NVIDIA显示驱动DirectX环境DirectX9.0c/12帧数监控Fraps3.5.12) 软件环境：Window

38、s/IOS/Adnroid /Taro/Node.js/微信开发者工具。7.3 测试方法介绍作为软件工程中非常重要的组成部分，软件测试贯穿在软件从设计到服务结束的全生命周期的过程中。对于测试方法，主要分为黑盒和白盒两种方式的测试，在系统实现的过程中，已经进行了单元测试、集成测试，主要是通过代码端的调试进行的，在本文中不做过多的叙述。本章节主要介绍系统的功能测试，通过黑盒测试的方式进行。7.4 系统功能测试（1） 服务启动冒烟测试测试用例名称双端服务启动测试/服务冒烟测试测试方法手动测试测试目标系统可以正常启动，日志中没有1级错误测试操作1. 在安卓模拟器中启动小程序，观察是否可以正常进入主页，

39、是否有闪退等情况；2. 用户在IOS系统中启动小程序的服务，系统可以正常启动，界面可以正常打开。预期结果程序运行成功，没有异常的报错信息抛出，Android端和IOS端均可以正常显示测试结果通过（2） 歌曲播放模式切换测试测试用例名称歌曲播放模式切换测试测试方法手动测试测试目标能够完成歌曲播放模块的功能需求，无任何异常信息测试操作1. 在安卓模拟器中启动小程序，通过下表1中的测试用例，逐条数据进行验证；2. 在Iphone手机中启动小程序，通过下表1中的测试用例，逐条数据进行验证；预期结果根据测试用例表中的数据项，验证内容没问题测试结果通过表 7.1 歌曲播放模块切换测试用例表用户类型播放模式

40、模式切换是否成功提示内容使用者随机模式是随机模式使用者顺序模式是顺序模式使用者 单曲循环是单曲循环使用者随机模式是随机模式使用者上/下曲切换是正常切换（3） 歌曲搜索播放测试测试用例名称歌曲切换播放测试方法手动测试测试目标用户完美匹配数据库中的数据，并且根据数据库中的数据进行Filter后台筛选，并展示到界面，观察前端数据是否错乱测试操作1. 在安卓模拟器中启动小程序，搜索“夏天的风”；2. 在Iphone手机中启动小程序，搜索“夏天的风”；预期结果程序运行成功，没有异常的报错信息抛出，能够对搜索的歌曲进行准确的列表展示测试结果通过（4） 歌曲播放模式测试测试用例名称歌曲播放模式测试测试方法手

41、动测试测试目标1. 可以正常播放音乐测试操作1. 问题发布者在安卓模拟器中启动小程序，对音乐进行正常的播放；2. 问题发布者在Iphone手机中启动小程序，对音乐进行正常的播放；预期结果程序运行成功，没有异常的报错信息抛出，支持测试目标中的内容。测试结果通过（5） 意见反馈功能测试测试用例名称意见反馈功能测试测试方法手动测试测试目标1. 用户只要登录小程序之后，就可以点击个人主页的意见反馈按钮，输入相关内容，点击提交，完成意见反馈。测试操作根据音乐播放模块设计流程步骤进行；预期结果程序运行成功，音乐没有异常的报错信息抛出，进度条根据歌曲的进度也在正常的进行，支持测试目标中的内容。测试结果通过7

42、.5 测试分析本次设计开发的音乐播放小程序时借鉴了国内外优秀小程序开发过程的设计，从需求进行统一的安排，再到系统实现、系统测试等过程均能够保证基本的功能没有明显bug，从界面到系统设计都保证了普通用户以及管理员用户能够方便操作。系统的主要特点和优点归纳如下：（1）本系统用的移置性和针对性都比较高，因为针对性高可以提供更好的服务而移置性可以在多个系统上运行，更给客户带来了极大的方便。（2）内容全面但是操作界面不会很复杂，设计上很多都做了自动跳转，其操作方便，用户界面友好，能够上网的人都可以很好的进行操作。经过对总体测试分析，基于微信小程序的音乐播放系统的设计与实现满足用户的要求和需求。功能齐全，

43、操作简单，产品运行性能良好。总结与展望从该系统设计的整体来看，本次设计开发的音乐播放系统操作简单、平滑性好，用户体验度良好。又因为功能比较清晰，所以系统功能的鲁棒性也是可以得到保障的。相信本次开发设计的系统会给用户带来非常直观舒服的使用。但是在设计的过程中，对于界面UI的设计、页面主体的的多样化选择方面还需要进行优化。比如：设计多种不同风格的主题，提供用户在不同的节假日以及发布的问题再得到解答之后的主页色彩变化和通知功能。毕业论文终稿修订在新冠肺炎疫情期间，2020年刚刚开年，一场疫情让本该及时返校的我们，一直“滞留”在家中，很庆幸，大家受到的疫情影响不大。同时经过这样的事件，让我更加肯定的是当时选择软件这个专业是正确的。在各行各业都受到影响的情况，唯有先进的科技类型的公司：远程办公系统、网络社交平台、甚至网络游戏平台公司，业务量大增。同时感受到大家因为不能及时返校的情况下，在毕业论文编写的过程中、系统实现的过程中，有很多的问题都想向老师进行询问。但是恰恰因为不能面对面的进行统一解答，使得老师们的业务量大增，同时也为自己没有更快的将这款小程序