手机音乐小程序的设计与实现.docx
《手机音乐小程序的设计与实现.docx》由会员分享，可在线阅读，更多相关《手机音乐小程序的设计与实现.docx（33页珍藏版）》请在冰点文库上搜索。
手机音乐小程序的设计与实现
手机音乐小程序的设计与实现
Designandimplementationofmobilemusicapplet
摘要
为了让人们能够更轻松、方便地欣赏音乐，本人利用小程序“轻服务”的优势和特点着重针对音乐播放这一核心功能,设计了基于微信小程序并注重用户体验的音乐播放器。
本人使用微信开发者工具，应用了JS、WXML、WXSS和云开发等技术，完成了手机音乐播放小程序的设计与开发。
。
用户可以在这个小程序里，搜索音乐或歌单，选择推荐或者排行榜的歌单和歌曲；也能够将喜欢的音乐添加收藏，能够看评论、切歌、切换播放模式、定时关闭等。
，本应用具有功能实用、轻便好用、即开即听等优势。
关键词：
音乐播放器；微信小程序
Abstract
Inordertomakeiteasierandmoreconvenientforpeopletolistentomusic,byutilizingtheadvantagesandcharacteristicsofsmallprogram"lightservice"formusicplaybackfunctionandbasedonWeChatsmallprogram,Idesignedthemusicplayerforbetteruserexperience.ThedesignofthemobilemusicplayeriscompletedbyapplyingJS,WXML,WXSS,clouddevelopmentandothertechnologies.Inthissmallprogram,userscansearchformusicorsonglists,chooserecommendationsorlistsongs,andsavefavoritemusiccollections,readcomments,changesongs,switchplaybackmode,timedoffandetc.Thefunctionsarepractical,easytouse,andalwaysready-to-be-used.
Keywords：
MusicPlayer;WeChatMiniProgram
第一章绪论
1.1项目的背景和意义
在历史进程中，音乐是人类最伟大的创造。
纯净而未经稀释的创造力是音乐的真正定义。
音乐是我们生活的重要组成部分，它是表达我们的情感的一种方式。
有些人认为音乐是逃避生活痛苦的一种方式。
它可以减轻压力。
音乐是一种有效的疗法，它可以使您镇定下来，在欢乐的时刻，它可以使您开朗。
此外，它可以发展思想并增强您的自信心。
音乐在我们的生活中起着更为重要的作用，而不仅仅是娱乐。
音乐使我们富有创造力，艺术性和独创性，它可以帮助您改善思维。
音乐也可以使学习变得愉快，是快速学习新事物的好选择。
在您的小学课上，您可能首先学习过诗歌。
之所以向儿童教授诗歌，是因为他们发现诗歌有趣且易于学习，并将其保留在他们的脑海中。
诗中的音乐使它更加愉悦。
这是您一生都记得这些诗的唯一原因。
如今，学校也意识到了音乐的重要性，因此他们借助音乐的趣味性来增强教学方法。
为了听音乐,人们会在电脑、手机、电视等电子产品上，下载和使用音乐播放器。
经过多年的发展不断的进步，市面上手机音乐播放器软件功能也变得越来越丰富。
不仅限于听音乐，还加入了直播、电台、视频、社交模块等许多功能，丰富了人们的生活，带来许多休闲娱乐。
但是在智能手机和移动互联网的飞速发展中，随着人们生活节奏的不断加快，在“轻服务”这种新型的服务模式不断推广下，传统的手机音乐播放器软件也开始出现了一些缺点。
对于用户而言：
这些软件需要下载到本机，因而会占用不少的内存和运行资源，分享与推广模式也不够便利，过于“丰富”的功能也使得用户体验变得繁琐，有违“轻服务”的理念。
对于开发者而言：
传统的软件开发周期长且繁琐，后期的运维更是需要花费大量的成本。
微信小程序在“轻服务”的理念中诞生了，对比传统的软件，小程序展现出了它的优势：
不需要安装与卸载，占用内存小，需要使用时即开即用，方便在微信内分享使用，开发周期相对传统软件开发周期短，后期运维简单方便，也有大量的微信用户基础，传统软件能实现的功能，微信小程序也能够实现。
1.2微信小程序的现状
你可能会对应用有这样一个想法：
顺畅如本机应用程序，但却无需下载它。
腾讯通过微信小程序帮您实现了这种愿望。
而且不仅如此，他们的视野更大：
在微信中构建一个在线服务和产品生态系统，可以与离线世界进行交互。
微信已经从曾经的聊天工具，升级成为了一个平台和生态系统的入口。
2016年微信正式开放了微信小程序，给各种应用提供了新的内容分发入口，微信通过这项技术变成了一个应用商店。
它周围的所有生态系统正在逐步将这个超级APP定位为日常生活的"（社交）操作系统"。
自从微信小程序问世以来,依托于强大的生态后台和飞快的传播速度,市场份额不断提升,再加上开发过程相对简单，开发者比较容易上手，较短时间内就能够独立地去完成一个微信小程序的开发与上线。
更多的开发者开始选择开发微信小程序而不是开发传统软件来发布自己的作品。
1.3手机音乐播放小程序的现状
现有的微信小程序种类多样，覆盖了生活所需各个方面，带来便利与娱乐。
当中最多的还是要属各种商城类和游戏类，音乐类的占比就显得比较小了。
现有的音乐播放器小程序，比如酷狗音乐小程序、酷我音乐小程序、咪咕音乐小程序、QQ音乐小程序等，这些小程序中有的功能过于简易，目的为了引导用户流向原生应用；有的功能过于完整，将原生应用中的功能模块都移植到微信小程序上，反而违背了“轻服务”这一理念，复杂繁琐的功能反而会分散用户的精力，弱化了核心功能的作用。
目前存在的手机音乐小程序数量屈指可数，而且它们的功能也是参差不齐，用户体验不尽人意，还是有很多需要提升的空间。
所以本人针对小程序“轻服务”的优势和特点着重针对音乐播放这一核心功能,开发了一个仅围绕音乐，注重用户体验的音乐播放器小程序。
第二章微信小程序技术
2.1微信小程序框架
微信团队为微信小程序提供了MINA应用框架，该框架的作用是把开发者工具提供的文件、通信、任务、数据安全等进行封装，对上层提供JavaScriptAPI，开发者在开发过程中可以便捷地使用开发者工具提供的许多功能。
MINA为用户提供了自己研发的语言WXML和WXSS，配合逻辑层的JavaScript，再对视图层与逻辑层提供数据传递和事件系统，方便了开发者的使用。
从而达成高效开发小程序这一目的。
图2-1小程序框架图
由图2-1可以看出，框架分为两部分：
在view视图层，WXML是微信小程序提供的一种类似于html的语言再加上一系列基础组件，开发者用WXML来完成构造页面的视图结构，用WXSS来决定页面各个展示样式。
在AppService逻辑层，通过客户端发用异步线程来单独运行，渲染页面时会使用到的数据和交互逻辑都在这一块完成。
虽然是使用JavaScript来做数据处理，请求网络、逻辑处理，但是不能用其中的DOM操作。
MINA框架为页面组件提供了bindtap等作为监听，再去JavaScript中绑定相关事件处理函数，也可以在同层同步到进行用户数据的交互。
MINA框架的重点是作为一个响应式的数据绑定系统，让数据与视图能够同步。
小程序逻辑层：
处理数据并传达到视图层，再接受视图层返还的请求。
通过JavaScript编写，再加上微信团队做的优化，使得开发更加高效。
其中做的优化有：
通过app方法注册程序，通过page方法注册页面；提供许多的API接口；较为独立的页面作用域和模块化能力。
小程序视图层：
就是微信标记语言（.wxml）文件和微信样式表（.wxss）文件的总和，微信标记语言文件用来具体描述页面的结构，微信样式表文件用来描绘页面的样式。
小程序数据层：
1、页面的临时数据或缓存：
用setData把数据从小程序的逻辑层发送到视图层，此时就会变更队形的this.data的值。
2、本地储存：
有现成的API接口供应给开发者使用，可以进行诸如获取、设置和清理本地数据缓存的操作。
3、发送网络请求，上传和下载文件
2.2微信小程序开发工具
因为微信小程序的渲染层和逻辑层是各自独立运行的，一般的网络开发工具不太好做到微信小程序的调试，即使跟微信开发者工具相比，两种JavaScript脚本编译模式是相同的，微信标记语言（wxml）跟超文本标记语言（html）的页面构建的功能相近，微信样式表（wxss）则是在层叠样式表（css）的技术的基础上诞生的，微信官方为了完成这些功能，制作了微信开发者工具。
微信开发者工具集成了代码的编辑、几种调试模式、程序的预览和程序上传发布功能，让开发者达到便捷又省时省事的高效的目的。
小程序文件结构：
小程序文件大概来说可以分为全局、页面和组件。
小程序的结构划分为：
最上层为App，App中又包含了多个Page，每个Page又是由多个组件组成，组件也分为内置组件和自定义组件。
1、全局（App）中有三个文件：
app.js是创建App实例的代码以及一些全局相关的内容；app.json是全局的一些配置，比如window、tabbar等；app.wxss是全局的一些配置样式。
2、页面（Page）中有四个文件：
page.js是创建page实例的代码，以及页面相关的内容；page.json是业务单独的配置，比如页面对应的window配置，usingComponents；page.wxml是页面的wxml布局代码；page.wxss是页面的样式配置。
3、组件（Component）中也有四个文件：
component.js是创建Component实例的代码，以及组件内部的内容；component.json是组件内部的配置，比如当前组件使用了别的组件；component.wxml是组件的wxml布局代码；component.wxss是组件的样式配置。
2.3小程序的云开发
微信在2018年推出了小程序云开发的SDK，是微信团队与腾讯云团队一起打造的一个完整的云端流程，从而减轻后端的思想。
提供了云函数、数据库、存储管理等云服务，提供一站式开发服务。
开发者可以不需要搭建服务器，就可以在开发时使用到云端能力。
使用小程序云开发的第一个优点就是不需要去搭建服务器，这样就很大程度上节省了开发者的时间，还省下了不少钱，因为小程序云开发为用户提供了一个免费版，足够普通的个人开发者使用。
微信小程序可以让用户直接对数据库进行增加、删除、更新和查询，而不必使用外部的云服务器，也就不需要为小程序去配置request合法域名，使得小程序能够快速上线。
而传统的后端服务器还需要解析域名进行为期30到40天的ICP备案，接着要绑定ssl证书才使用https，这就使得上线前的准备时间被拖长了。
而第三个优点就是能够使用一个简单的云函数轻松地获取到用户的openid。
openid是每一个微信用户在使用小程序时的唯一标识，就像是身份证一般的存在。
可是如果不是使用云开发的话，想要获取openid就没这么容易了
图
2-2小程序登录流程
如图2-2所示，如果是使用开发者自己的后端服务器的话，需要一个比较复杂的流程。
首先要调用微信小程序的wx.login（）接口，去向微信的服务器去请求一个code，再把获取的code发送给自己的后端服务器，后端服务器再把拿到的code再加上appid和appsecret，再把这三个东西通过一个接口传送给微信的服务器，并回调得到session_key和openid，就可以把openid作为微信用户的唯一标识，服务器不会直接返回给客户端，服务器会把openid存起来，登录成功后服务器会再返回token令牌给微信小程序客户端，客户端把token令牌保存到storage，以后小程序再和后端服务器联系的时候就可以携带上令牌，服务器再根据令牌去查询对应的openid或者其他信息。
2.4Vantweapp
有赞团队开发的一个轻巧好用的小程序用户界面组件库，是由移动端Vue的组件库Vant而创建出来的小程序的版本。
这个组件库为开发者提供了大量的常用美观又好用的组件，通过使用Vantweapp中的组件，能够帮助开发者快速地搭建好小程序，为开发过程节省一些时间与精力。
2.5Iconfont阿里巴巴矢量图标库
由阿里巴巴UX部门推出的矢量图标管理平台，是国内首个推广Webfont形式的平台，用户能够使用这个平台，去浏览下载大量的矢量图标作品，也可以自己上传展示和管理自己设计的矢量图标。
对于程序员而言，是一个非常好用的矢量图片查找基地。
Iconfont平台为用户提供了在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。
同时平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。
第三章小程序功能模块的设计
3.1小程序开发设计原则
本小程序的开发有五个基础原则：
首先最基本的就是需要一个友好礼貌的设计界面，把设计重心放在让用户有舒适的使用体验，友好地引导用户进行操作，礼貌地向用户展示程序侧提供的服务，帮助用户得到他们想要的，让用户每进入一个页面都能够清晰理解页面内容，能够便捷顺畅地操作使用小程序，让各板块加强集中联动，突出重点的功能，避免一些繁琐无用的设计元素，从而提升用户的使用体验。
第二点是将小程序设计得清晰明了，让用户在使用小程序的时候能够清楚地知道现在所处的位置和可以去往的位置，而不会在使用的过程中因为设计问题而产生迷惑。
采用了一些导航的模块和快捷入口，让用户能够清晰明确地在各种页面进行跳转操作，合适的联动让用户减少在操作上使用的时间。
第三点是做到便捷优雅，例如在本小程序中一些页面加入了底部的播放栏，让用户能够便捷地对当前正在播放的音乐信息进行预览和操作，也能快捷地进入播放页面去做更多的操作。
又比如在搜索页面中加入的历史记录和热搜榜，也能够为用户减少一些操作而达到便捷的效果。
另外在设计时考虑到手指操作可能不够精确，为了减少误触情况的发生，设计时将所有的页面各模块的布局都做得比较优雅和适当来优化用户体验，第四点是做到统一稳定，在不同的页面间做到统一性和延展性，在不同的页面使用的交互方式和控件都尽量一致，使用的矢量图也是用整套的避免差异过大，这有利于减少用户在进行页面跳转时产生的不适应和违和感。
第五点就是规范视觉，也就是要把字体大小和颜色、列表、表单输入值、按钮、图标等等，都设定为合适的值，使得整个页面看起来舒适。
3.2手机音乐小程序模块需求描述
3.2.1小程序架构简述
本微信小程序是一款使用轻便好用，以专注音乐体验为核心，并有一些围绕音乐的实用功能的音乐播放器。
在制作了音乐播放功能、搜索功能等基础功能之外，还加入了展示歌词、歌单推荐、新歌推荐、观看评论、定时关闭、收藏的音乐等等其他的功能。
通过加入这些模块，使得小程序更加完善，可以很好地提升用户的使用体验。
图3-1小程序结构组成图
如图3-1所示，本微信小程序主要是由三大部分组成：
第一部分是“我的”页面，这一板块是以用户的微信来生成小程序内的个人账户，用户在这个页面点击登录就能查看自己收藏的音乐或者收藏的歌单。
第二部分是“发现”页面，这个页面中有搜索模块，接着是三个按钮，分别是歌单、排行榜和定时关闭，用户能够通过歌单广场或者排行榜中去发现好听的音乐，定时关闭功能也是在生活中常常会被用到的实用的功能。
接着是推荐歌单和推荐新歌两个模块，也为用户提供了很多歌单以及最新的音乐。
第三部分是搜索页面，搜索页面的启动按钮被放置在“发现”页面内。
搜索页面中有搜索框，历史记录和热搜榜三个模块。
搜索后会显示的结果为单曲和歌单。
另外还有播放页和歌单页这两个比较重要、比较常用的页面。
播放页是通过点击歌曲的时候进行跳转进入，还有点击底部播放栏时可以进入。
里面也有许多模块，会在后文中详细讲述。
歌单页也是经常会用到的一个页面，当用户选定一个歌单或者一个排行榜的时候，就会进入到歌单页。
3.2.2本小程序的界面设计思路
（1）如下图3-2所示，进入小程序首页后会看到“我的”、“发现”和搜索按钮这三个大模块，默认先展示“发现”模块。
在“发现”页中提供了很多模块供用户去发现音乐。
图3-2首页中三大模块
（2）“发现”模块:
如下图3-3所示，“发现”模块中从上往下被分为三大板块：
第一个板块中的是并排的歌单、排行榜和定时关闭这三个按钮，通过点击歌单按钮可以进入歌单广场页面，通过点击排行榜按钮可以进入排行榜页面，通过点击定时关闭按钮可以让歌曲在设定的时间后被暂停。
第二个板块是推荐歌单板块，其中有一个歌单广场的按钮可以进入到歌单广场页面。
按钮下方向用户展示了6个歌单作为推荐，可以点击歌单图片进入该歌单的页面中。
第三个板块是推荐新歌板块，其中有一个更多新歌的按钮可以进入到更多新歌推荐的页面。
按钮下方向用户展示了6首新歌作为新歌的推荐。
图3-3“发现’模块布局
（3）“我的”模块：
如下图3-4所示，“我的”模块中也是从上往下被分为了两大板块：
第一个板块是展示用户的头像和名字。
用户在第一次进入小程序未授权登录时会先展示默认的头像和名字，需要点击头像位置的按钮去授权登录，才会显示出用户自己的头像和名字。
接下来的板块是收藏的音乐和收藏的歌单，使用手风琴式的抽屉方式去展示，用户可以在这个模块中看到并播放自己收藏的音乐和歌单。
图3-4“我的”模块
（4）搜索按钮：
搜索功能可谓是音乐播放器中必不可少的一个功能，是被使用最多的功能之一。
对于很多用户来说，使用音乐播放器听歌在大多数的情况下都是有目的性的去找来听，可能想找某个歌手的歌，可能想听具体某首歌，也可能想听某种类型的歌单，这时搜索功能就显得必不可少。
打开小程序后点击搜索按钮即可进入搜索页面，本小程序中的搜索功能分为是三个板块：
第一个板块是一个输入框和确认按钮，用于输入想要搜索的值，在输入时会展示出搜索建议，便利用户的操作。
第二个板块是展示历史记录，便于用户想再次搜索相同内容时，可以直接点击历史记录，方便用户的操作。
当用户不需要历史记录时，点击删除的图标，在弹窗中点击确定，即可删除历史记录。
第三个模块是热搜榜，会展示10条网上热搜的关键词，用户可以通过热搜榜，来获取当下最热门的10个音乐搜索词，并且轻松的听到相关的音乐。
（5）歌单广场页面：
在“发现”页中，点击“歌单”按钮或者点击推荐歌单模块中的“歌单广场”按钮，都会跳转到歌单广场页面。
整个歌单广场页面简洁明了发罗列了外部API提供的全部歌单，每个歌单为方形封面图，图片中右上角展示播放量，图片的下方则显示歌单名称。
页面整体布局设计为格子型布局，每行罗列三个歌单，并可以通过手指上滑操作加载出更多的歌单。
（6）具体歌单页面：
用户在歌单广场中挑选出想听的歌单后，就可以点击进入该歌单页。
歌单页的布局分为了三个板块：
第一个板块左边展示了歌单封面图，右边展示歌单名称、歌单作者头像及名称和歌单的简介，让用户对该歌单能够有个详细的了解及感受，将这份感受带入歌单的歌曲中，来提升听歌时的情景感，甚至产生共鸣，提升了用户的听歌体验。
第二个板块是一个“播放全部”按钮和“+收藏”按钮。
用户可以通过点击“播放全部”按钮，将歌单中全部的歌曲一键添加进播放列表中，并开始播放第一首歌。
当用户喜欢这份歌单时，可以通过点击“+收藏”按钮将这份歌单收藏，歌单便会被收录到“我的”页面中的“收藏的歌单”，以后就可以在这个位置进行该歌单的播放。
第三个板块是罗列出歌单中的全部歌曲。
每首歌占一行，左边显示歌曲的序号，右边显示歌名、歌手名和专辑名称。
歌曲较多时，可以通过手指上滑操作加载出更多的歌曲。
（7）排行榜：
在“发现”页中，点击“排行榜”按钮，会跳转到排行榜页面。
排行榜页面中分为了官方榜、推荐榜、全球榜和更多榜单这四个大类。
其中官方榜中又有飙升榜、新歌榜、原创榜和热歌榜。
这四个榜单按从上向下罗列。
每个榜单区域中，左边展示榜单封面，封面中展示更新时间，右边展示出该榜单中的前三名歌曲。
其他的三大类榜单，则是直接按格子型布局展示出具体的榜单。
选中并点击后，则会跳转到榜单中，而这个页面的布局使用的是歌单页面的布局。
（8）定时关闭：
在“发现”页中，与歌单按钮和排行榜按钮同板块的，是一个定时关闭的按钮，是一个挺有用的功能。
现在的生活中，人们的生活节奏越来越快，事情越来越多，压力越来越大，休闲时间也就随之减少了，所以很多时候使用播放器听歌的时间多少在晚上睡觉前，有出于放松的目的，也有的用户是为了听歌助眠。
这时候，定时关闭功能就展现出了大用处。
用户不需要守着手机去等到听够了再关掉播放器，也不会因为放了整夜的歌而损伤听力和消耗手机不必要的电量。
只要选好播放时间，就可以无忧无虑地享受音乐。
当用户点击“定时关闭”按钮时，会出现一个弹窗，上面有几个预设的时间值，供用户选择。
选好时间后，弹窗关闭，按钮下方文字会变成倒计时，来提醒用户剩余播放时长。
到达时间后歌曲会被暂停。
（9）推荐歌单：
“发现”页中的第二个板块。
其中的“歌单广场”按钮，通过点击可跳转至“歌单广场”页面。
板块中的第二部分罗列了6个歌单，罗列的布局为格子型布局。
每个歌单为方形封面图，图片中右上角展示播放量，图片的下方则显示歌单名称。
通过点击可以进入对应歌单页。
（10）推荐新歌：
“发现”页中的第三个板块。
样式类似于推荐歌单板块，一个“更多新歌”按钮和下方6个新歌罗列，罗列的布局为格子型布局。
每首新歌为方形封面图，图片的下方显示歌曲名称和作者。
点击“更多新歌”按钮时，会跳转到“新歌广场”页面。
新歌广场页面分为五个模块：
推荐、华语、欧美、韩国和日本。
每个模块的布局都是统一的：
一张导航图，接着是一个“播放全部”按钮，下面是罗列出歌单中的全部歌曲。
每首歌占一行，左边显示歌曲的专辑图片，右边显示歌名、歌手名和专辑名称。
歌曲较多时，可以通过手指上滑操作加载出更多的歌曲。
（11）底部播放栏：
当用户使用小程序播放过音乐，首页和歌单页的页面底部会出现播放栏。
播放栏可以让用户看到当前播放歌曲的信息，快速地切换播放或暂停模式。
播放栏显示歌曲封面图、歌曲名称、作者名称和专辑名称，一个切换播放与暂停的按钮，和一个播放列表的图标。
点击歌曲信息，可以跳转进入播放页。
（12）播放页：
当用户点击一首想听的歌时，小程序就会自动跳转到播放页。
播放页分为三个模块：
第一个模块中放置了当前歌曲的专辑图片和歌词，这两者相互切换只展示其中一项，进入小程序时默认展示专辑图片。
第二个模块是“收藏”按钮和“评论”按钮。
当前歌曲未被收藏时，“收藏”按钮为中间透明的心型图标，当点击收藏时，会变成红色心型图标。
听歌时阅读歌曲的相关评论已经成为了大部分人的习惯，因为可以从中看到很多新奇的观点，有助于对歌曲的理解，找到共鸣。
本小程序也加入了阅读评论的功能。
“评论”按钮会显示当前歌曲评论数，超过999时显示为999+，点击“评论”按钮会跳转到评论页面。
评论页面分为精彩评论和最新评论（即所有评论）。
每条评论中有评论者的头像，名称，评论时间和评论内容，还有被点赞次数。
第三个模块是控制台，有播放进度条、播放模式、上下首切换、播放暂停切换和播放列表。
进度条可以进行任意进度调节，滑动到用户想放置的时间点。
播放模式有单曲循环、列表循环和随机播放三种模式，可依照用户的兴趣去做变化。
上下首切换和播放暂停切换功能让用户能够自由地掌控音乐。
点击“播放列表”按钮会展示出当前的播放列表，正在播放的歌曲名称前会有个红色小喇叭并且显示红色字体，其他待播放的音乐显示黑色字体。
在播
升级会员 