基于微信小程序音乐社区的设计与实现

PAGE基于微信小程序音乐社区的设计与实现内容摘要5G发展正当其实，娱乐方面欣欣向荣，听音乐可以使我们在精神生活上更加充盈起来。文化是民族的精神命脉，文艺是时代的号角，音乐在我们精神生活过程中不可或缺。而各个平台都是我们获取音乐信息的一个重要途径。当前市场上网站，APP等工具五花八门，在时代大背景下，许多音乐软件承担的不再是单一的听歌功能，功能庞大的同时显得臃肿，以及现有的小程序在多媒体音乐上份额不足，还有开屏广告等操作，降低用户体验满意度。而小程序得天独厚的用户群，是一个具备高覆盖性、高扩展性以及简单便捷实用的“一站式”平台。依托微信大量的用户群体实现更好的推广效果，不用下载即可使用，用完即走，触手可及，满足用户使用的基本功能。本文设计的是一个基于微信小程序的音乐社区的平台,在微信端登录就可以直接体验,享受到音乐的视听盛宴。小程序开发过程中使用了WXML、JavaScript、Vue等语言完成小程序的开发,使用vscode软件完成管理后台Vue-admin-template业务逻辑的开发工作,同时使用网易云音乐的API接口获取歌曲数据,将歌曲数据存储在小程序云开发的云数据库中。该小程序实现用户的登陆、音乐的播放、歌曲的搜索、观看歌曲MV、暂停/播放功能、歌曲时长进度条展示、播放进度和歌词同步显示,发布动态等功能,满足用户听音乐的基本需求。关键词：小程序音乐播放器云开发目录TOC\o"1-2"\h\z\u1绪论 11.1小程序开发背景 11.2系统开发的意义 12相关理论和技术的介绍 22.1微信小程序 22.2微信开发者工具 22.3小程序云开发 33系统分析 33.1可行性分析 33.2需求分析 44平台设计 54.1平台功能模块设计 54.2平台结构设计 94.3数据库设计 105音乐社区小程序功能实现 165.1首页发现界面实现 165.2搜索界面实现 175.3视频界面实现 185.4播放界面实现 195.5歌单广场界面实现 205.6博客界面实现 215.7我的界面实现 225.8排行榜界面实现 225.9管理员后台管理实现 236系统测试 256.1测试目的 256.2测试内容 256.3测试用例 256.4测试结果 26结论 27参考文献 28致谢 29附录 30

1绪论1.1小程序开发背景互联网背景下的流量成本居高不下，APP作为一个闭环生态，用户的的粘着性降低。而小程序打开方便，依托微信，占用内存小，为APP发展的瓶颈期提供了一个破题点，为用户带来更加多样化、人性化的服务。小程序入门简单，和其他语言相比，开发周期短，开发者即使不具备丰富的开发经验，依靠官方提供的开发文档，就能轻易上手，同时微信官方提供的模板库和可视化开发，极大的缩短了开发时间，百度、腾讯也给小程序提供许多封装好的接口和第三方服务，与APP相比，小程序开发成本低廉，其用户体验和留存率都比较好，为用户带来全新的体验感。在2017年年底推出的“跳一跳”小程序，打响了微信小程序成名的第一枪，小程序也跃升成为热门的话题之一。作为微信当中重要的一项功能，它涵盖了生活的方方面面，娱乐、休闲等服务数不胜数。商家可以采取发放红包、参与活动等手段，实现分享裂变的效应，让用户主动分享商家的小程序，实现为商家涨粉引流的目的，所以小程序是非常强大的营销工具之一。1.2系统开发的意义在时代发展的潮流中发展，5G时代的带来，音乐版权一家独大，版权保护如火如荼，听歌本来是一件单纯的事，但对于平台却不仅仅于此，版权所带来的是流量是商家趋之若鹜的存在。现在，我们习惯为版权付费，而多家平台的“独家记忆”却给用户带来了烦恼，只有在特定的平台才能消费，可能今天可以听某首歌，明天就找不到了。因此，对小程序来说，这将是一个简单的选择，不需要下载，何时何地都可以使用；对用户来说，不会为了听一首歌，去特地下载APP。想要实现听歌自由，小程序可以但此重任。故在认真分析了当下的市场情况以及做了充分的调研后选择了使用微信小程序来开发一款基于微信小程序的音乐播放器。2相关理论和技术的介绍随着技术的迭代和APP功能的蝶变，功能更加强大的同时，APP的新用户却越来越少，用户的增长率增长缓慢，随之而来的是瓶颈期。而前端技术的成熟和云存储发展的浪潮，席卷了互联网，微信小程序应运而生。2.1微信小程序图2-1微信小程序架构​小程序由HTML、CSS、JS等搭建成一个独立的框架，在小程序的运行框架下演变成WXML和WXSS，本质上还是基于web规范构建而成。一个小程序由多个界面组成，完整的小程序需要page下四个配置文件与之对应。一个完整小程序通常包括View视图层和AppService逻辑层，视图层实现页面数据的渲染，数据流和API在逻辑层工作，实现数据的交互。在系统层面上，开发者通过系统层实现各层级之间的通信，给予底层支持。2.2微信开发者工具微信开发者工具是由微信开发的，设计简洁，对开发者十分友好，官方提供微信开放文档、微信公众平台以及开发者社区供开发者参考，开发者可以自己当管理员和运营人员，降低了开发的门槛。集开发程序、调试bug、发布于一体，开发者不用浪费多余的精力去学习其他软件的操作。软件页面拥有模拟器、编辑器、调试器、可视化和云开发区域。模拟器可以模拟代码在真机上的运行情况，直观呈现代码所展现的界面；开发者开可以任意安装插件，美化代码结构，优化代码质量。2.3小程序云开发基于原生serverless云服务的小程序云开发，可免鉴权调用微信接口。可以构建多端服务；除小程序外，支持小游戏、网页多种功能形态的开发业务。传统开发模式中，需要开发者考虑方面过于繁琐，因而开发效率偏低。而云开发提供云端数据库，开发者只需了解基本知识就可以操作，降低了学习门槛，提供基础读写，实时推送，便于开发者快速构建云上资源；云函数实现代码的云端管理，开发者不需要购买服务器，高效安全，开发者既不需要搭建复杂服务器搭建，更不需要后期花费多余的心力去维护，提高开发的效率。3系统分析系统分析是发展的问路石，因为系统分析确定了平台的基本架构、功能，所以系统必须进行分类和优化，以明确系统的功能构成和性能需求；并明确系统的逻辑功能和信息流程。3.1可行性分析从技术可行性的角度看，开发微信小程序只需要学习微信开发文档即可简单上手，开发者拥有一台笔记本就可完成全过程开发。而微信开发者工具对新手友好，小程序的语言是在HTML等语言的框架上演化而来的，如果开发者学习过JS之类的语言，和小程序的语法是一脉相承的，有很多的共通性，学习微信官方的文档就可以编写小程序，而微信提供的大量小程序模板和可视化开发，因此技术可行性是可以的。3.2需求分析3.2.1平台用户需求分析音乐是能够抵达心灵深处的艺术，可以涤荡心灵，陶冶情操，听音乐可以放松人的身心，每首歌都讲述着一个个光阴的故事。在我们和音乐之间搭建起一座座音乐沟通的桥梁，聆听歌曲，完成个人与音乐的共振。而现在各大厂商的APP——音乐播放器又过于复杂琐碎，所赋予它的更多是社交层面上的内容，导致用户的体验感下降。而微信小程序的特点很明显，比如开发成本节省了很多数据库操作，传播便捷。因此本平台提供了听音乐、查音乐、播放MV，评论、点赞、发布动态等功能。图3-1用户用例图3.2.2平台管理员需求分析平台的管理员需要对这个平台的内容进行管理，具体为平台的轮播图管理、歌单管理、评论管理等。其中轮播图管理是对首页的轮播图进行管理，歌单管理是对歌单的相关信息修改，评论管理是对用户的动态管理。图3-2管理员用例图4平台设计4.1平台功能模块设计音乐社区小程序由五大模块构成，分别为发现界面、视频界面、搜索界面、博客界面和我的界面。音乐社区小程序的功能需要做到用户可以播放音乐、暂停音乐、查看歌单、查看并播放每日推荐的歌曲、搜索歌曲信息，当用户点击歌单查看歌曲，或者是搜索歌曲时，点击对应的单曲名称都会跳转到歌曲播放的界面，并显示正确的歌曲信息，比如歌手名称、歌词是否随播放时间同步滚动等。用户对自己喜欢的歌曲可以点击红心，添加到我的喜欢的歌单里，并且可以查看歌曲的评论以及在博客界面发布动态、评论动态等功能。图4-1功能结构图4.1.1首页界面设计用户进入小程序，从上至下依次是搜索框、轮播图，一排五个图标、歌单推荐和飙升榜单等排行榜，每个模块的歌曲封面，歌单封面，歌单信息和歌手信息以及搜索框都是利用网易云音乐接口的数据显示在页面上，用户可以点击歌单或者榜单歌曲，选择用户喜欢的歌曲播放。图4-2首页界面流程图4.1.2每日推荐界面设计用户在首页点击每日推荐的图标跳转到每日推荐页面，页面上部分是一张图片和每天的日期，下半部分是推荐的歌曲列表，用户点击歌曲则跳转到音乐播放的界面，歌曲列表展示了歌曲封面、歌曲名和歌手名，用户可以选择喜欢的歌曲播放。4.1.3搜索界面设计当用户需要搜索内容时，输入搜索关键词将会出现对应的歌曲、歌单、视频信息，并且实现关键字的模糊匹配，使用定时器节流，提升用户体验。用户点击搜索列表的结果可以跳转到搜索详情页。用户点击历史记录也能实现跳转，点击删除按钮则清除记录。而下部份是基于网易云音乐的数据呈现实时热搜榜，展现了歌曲的热度排名，做出的排行榜，点击对应的信息会跳转到对应的搜索详情页面。图4-3搜索界面流程图4.1.4博客界面设计博客界面包含四个组件，由三个界面组成，左上角是发布动态信息的图标，点击该图标跳转到发布动态信息的页面，点击发布按钮爱判断内容是否为空白，空白会弹出请输入内容警告框，旁边是搜索框，可以搜索用户发布的动态信息，接下来是将动态信息显示在页面上，动态信息包含用户的头像、发布时间和发布内容等数据，接下来是评论组件，用户点击评论会触发消息模板，只有订阅收到评论通知消息模板才允许评论，再判断用户授权的权限，若没有则弹出授权弹窗，提醒用户授权。图4-4博客界面流程图4.1.5视频界面设计视频界面由导航图，搜索框，视频小卡片组成，用户点击视频页面导航栏的标签，刷新对应的视频数据，可以下拉刷新，也可以触底刷新触发。当用户点击视频卡片时跳转到该视频的播放详情页，播放详情页用户可以播放/暂停视频，查看视频信息和网友的评论。以上操作都是在用户登陆的基础上实现的，所以当用户点击视频图标会判断用户是否登陆，没有则跳转至登录界面，进行登陆操作。4.1.6我的界面设计用户点击我的界面可以进入登陆页面，点击头像图标，来到登录页面，输入用户的账号网易云音乐账号进行登陆的操作，同时更新用户空间的背景和头像等信息，用户可以点击播放历史或者歌单里的歌曲海报，之后跳转到该歌曲的播放器页面，在播放界面可以对音乐暂停、点赞、查看评论操作。4.1.7播放界面设计用户通过点击具体的歌曲名称跳转到该界面，获取该歌曲的id，加载界面的歌曲封面、歌手信息，对应歌词，对播放歌曲进行缓存。在歌曲播放时，歌曲海报同步进行旋转，点击碟子可以切换道歌词界面，同时滑动碟子也能切换播放歌曲，进度条和歌词随着歌曲的播放同步变化，左下角是当前播放列表的数据，背景采用了当前歌曲海报毛玻璃效果。4.1.8歌单广场界面设计用户点击首页的排行榜图标和排行榜的更多按钮将跳转至歌单广场的界面，排行榜界面展示了网易云音乐的官方榜单和各类全球榜单，点击榜单会跳转到歌曲列表页，展示榜单具体信息，比如歌单的简介、分类、创建者信息以及歌单下的歌曲，点击对应的歌曲可以播放，同时下拉触底刷新歌曲列表数据。4.2平台结构设计音乐社区小程序可以在手机上运行，主要分为用户前端和管理员后端，前台：首页、每日推荐、歌单广场、排行榜、歌单、播放视频、博客、我的界面；后台主要是对歌曲信息的管理和用户评论的管理。图4-5平台结构图4.3数据库设计小程序的云数据库中主要存放六张表，分别是bolg、bolg-comment、playlist、swiper、videoGroupList、dailySongs这六张表。blog表用来保存用户的动态信息，bolg-comment表用来保存用户的评论，playlist表用来保存歌单信息，swiper表用来保存轮播图的信息，videoGroupList表用来保存视频对应分类的视频标签信息，dailySongs表用来保存每日推荐歌曲的信息。4.3.1数据库e-r图设计将小程序云数据库中的数据实体和数据实体联系起来，规划相关数据。在平台中用户可以查看歌单、听音乐、发布动态并进行评论。图4-6歌单实体属性图图4-7轮播图实体属性图图4-8视频标签实体属性图图4-9评论实体属性图图4-10动态信息实体属性图图4-11每日推荐歌曲实体属性图图4-12平台E-R图4.3.2数据表设计blog表的数据库设计如图4-1所示。表4-1数据库blog表字段名称字段意义字段类型是否主键是否为空_id编号string是否Content评论内容string否否creatTime发布时间data否否Img评论图片array否能nickName用户昵称string否否_openid用户编号string否否avatarUrl头像地址string否否blog-comment表的数据库设计如图4-2所示。表4-2数据库blog-comment表字段名称字段意义字段类型是否主键是否为空_id编号string是否_openid用户编号string否否avatarUrl头像地址string否否Content评论内容string否否creatTime发布时间data否否Img评论图片array否能nickName用户昵称string否否playlist表的数据库设计如图4-3所示。表4-3数据库playlist表字段名称字段意义字段类型是否主键是否为空_id编号string是否alg应用层网关string否否canDislike是否收藏歌单boolean否否copywriter歌单介绍string否否creatTime发布时间data否否highQuality高音质boolean否否id歌单idnumber否否name歌单名称string否否picUrl歌单封面string否否playcount播放次数number否否trackCount音轨总数number否否trackNumberUpdateTime时间戳number否否type歌单类型number否否swiper表的数据库设计如图4-4所示。表4-4数据库swiper表字段名称字段意义字段类型是否主键是否为空_id编号string是否fileid文件编号String否否videoGroupList表的数据库设计如图4-5所示。表4-5数据库videoGroupList表字段名称字段意义字段类型是否主键是否为空_id编号string否否abExtInfo扩展属性null否是id视频标签idnumber是否name视频标签名称string否是relatedVideoType相关视频类型string否否selectTab选择标签boolean否否url链接null否是dailySongs表的数据库设计如图4-6所示。表4-6数据库dailySongs表字段名称字段意义字段类型是否主键是否为空id歌曲idnumber是否_id编号string否否name歌曲名称string否否ar_name歌手名称string否否al_name专辑名称string否否pic图片number否否picUrl图片链接string否否pic_str图片idstring否否reason推荐理由string否否5音乐社区小程序功能实现音乐社区小程序的模块主要包括首页发现页面、每日推荐页面、歌单页面、排行榜页面、电台页面、视频页面、博客页面、我的页面和登陆页面等。5.1发现界面实现用户通过微信进入音乐社区小程序，发现界面的UI设计参考的网易云音乐。从上到下分为五个区域。搜索框可以搜索歌曲信息，轮播图通过调用云开发的云数据库的swiper表将数据渲染在页面。推荐歌单区域和排行榜通过向服务器发送request请求，获取歌单数据和排行榜数据，根据排行榜的id，查询排行榜详情，然后循环滑动，将获取的数据绑定在页面上。底端的播放器则是通过组件<bottomControl></bottomControl>实现，通过isplay()获取当前播放歌曲的播放状态以及歌曲信息渲染在页面上。图5-1发现页实现流程图发现界面如图5-2所示：图5-2首页界面图5.2搜索界面实现用户通过点击发现页的搜索框跳转到搜索页面，页面执行getSearchDefaul()获取默认搜索内容，如果用户点击回车键搜索内容为空则搜索默认内容，当用户在输入框输入关键词时，使用定时器节流，按回车键或者收缩结果跳转至搜索详情页，并将输入的关键词通过changeSearchHistory()添加到历史记录，用户输入内容的同时显示

叉叉图标，点击该图标执行cleanInput()，清空搜索框

内容，点击历史记录的叉叉图标，执行deleteHistory()方法，则清空历史记录。下半部分是热搜榜，通过网易云音乐接口的数据将数据渲染到页面上。搜索界面如图5-3所示：图5-3搜素界面界面图5.3视频界面实现当点击视频页面时，判断用户是否登录，若没有则跳转至登录界面。当用户点击导航标签中对用视频类型时，获取当前视频标签的id，将获取的视频标签id传递给request，以获取视频标签所对应的视频，刷新视频列表。同时自定义下拉刷新的回调和拉触底加载的回调事件，将刷新获取的数据直接追加到当前视频列表。视频界面如图5-4所示：图5-4视频界面界面图5.4播放界面实现当用户点击歌曲播放时，获取当前播放歌曲的id、索引、当前播放的音乐列表数据以及碟子的状态，isNeedlePlay判断指针是否播放状态，点击暂停时，指针抬起，值为false；点击播放时，值为true。接着获取当前歌曲所属的音乐列表，从全局拿到当前的播放歌单以及播放歌曲的索引，如果是搜索列表的歌曲，就不用请求列表，直接把歌曲插入到当前的歌单中，接着查询音乐id，再将查询到的临时musicInfo插入到playingMusicList中。通过isPLay判断播放状态，创建控制音乐播放的实例对象，同时监听音乐进度，

根据实时播放时间实现歌词滚动。播放界面如图5-5所示：图5-5播放界面界面图5.5歌单广场界面实现当用户点击首页里对应歌单封面图，获取当前歌单的id，对数据库发出请求获取对应id，将获取到的数据显示到歌单广场页面。歌单广场界面如图5-6所示5-6歌单广场界面界面图5.6博客界面实现当用户点击发布动态图标时触发wx.getsrtting()方法检测使用者是否允许授权，如果使用者没有授权，页面会显示授权弹窗，用来提醒用户授权。博客界面如图5-7所示5-7歌单广场界面界面图5.7我的界面实现用户进入我的界面，默认显示不登陆，用户可以点击头像，跳转到登陆页面进行登陆，来获取头像、昵称和账号信息等，当用户输入账号和密码时，收集表单项数据，在前端使用正则表达式初步判断用户的账号是否符合规则，前端验证不通过提示用户，不需要发送请求给后端，前端验证通过之后，发送请求（携带账号，密码）给服务器端。在服务器端判断是否是正确的密码，密码正确返回前端数据，提示用户登录成功。返回数据，渲染页面。我的界面如图5-8所示：图5-8我的界面图5.8排行榜界面实现在首页发现界面通过点击排行榜按钮，进入排行榜界面，用户当点击对应榜单时，获取其id值，将获取的id赋值给下个页面。将得到的数据的渲染即可得到歌单信息。列表界面如图5-9所示图5-9歌单广场界面界面图5.9管理员后台管理实现音乐社区平台的后台管理是使用Vue-admin-template管理后台。独立于云控制台进行内容的管理。5.9.1音乐社区平台管理登录后台管理系统实现前后端分离，利用访问微信小程序云开发资源实现对云数据库的调用，实现项目中文件的管理。图5-10后台管理系统登录界面5.9.2管理后台数据录入实现在音乐社区小程序的管理后台，管理员点击上传的按钮，选择图片之后，使用HTTPAPI调用云存储的数据，上传文件之后将图片的信息保存到小程序的云数据库。图5-11添加轮播图界面5.8.3内容管理平台数据管理在完成数据的录入后就能够对数据进行管理，我们可以在管理后台对平台里的数据进行管理。图5-12管理后台数据管理界面6系统测试6.1测试目的软件测试是开发过程中举足轻重的一环，连通软件开发全过程。测试是为了给用户带来更加流畅操作的产品。6.2测试内容模拟用户进入小程序，对各个功能进行测试。点击我的页面的头像是否能跳转到登录页面，再到小程序首页发现界面进行点击测试，点击图标和歌单能否正常跳转，使用搜索功能时，搜索到的结果是否与搜索内容匹配。点击对应歌曲时是否跳转到对应播放页，详情界面内容是否正常，点击评论功能是否能正常发表评论，点击播放暂停功能对应状态是否发生变化。6.3测试用例测试每个页面的功能是否达到预期效果，测试结果如下所示：表6-1系统测试结果表序号测试项目操作预期结果结果1账号登陆点击我的头像获取用户信息以及用户听歌数据符合预期效果2视频播放点击视频页随机视频视频正常播放数据正确对应符合预期效果3对歌曲进行搜索点击搜索框进行歌曲搜索出现对应的单曲视频歌单信息符合预期效果4历史记录查看点击或者删除任意历史记录可以删除数据或者正确跳转符合预期效果5发布动态点击发布动态能正常发布动态并显示在页面符合预期效果6评论动态评论跳转至评论发布并提交评论发布评论并显示符合预期效果7播放歌曲点击歌单歌曲正常播放符合预期效果8进度条、歌词拖动进度条正确跳转到单曲的时间和歌词符合预期效果9歌单详情查看点击歌单分类可以跳转至该分类下的歌单符合预期效果6.4测试结果测试完毕后，音乐社区小程序的功能达到预期效果，虽然一些功能不够完善，但基本上满足了一个平台的基本需求。结论音乐社区小程序主要由WXML、WXSS、VUE、JS等编程语言编写而成的，基于微信开发者工具开发的音乐类