2024年3月10日发(作者：)

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

开发

摘 要：小程序一经面世带着自身的优势被各行业广泛应用,在信息的获取

方面为用户提供了更为便捷、灵活的一站式信息搜索平台;也为各行业信息的发

布和传播达到最大化和最优化开辟了新途径。在微信小程序软件的开发过程中,

还进一步提供了原生APP的组件。而在HTML5+CSS3当中,这是需要通过模拟才能

够有效实现的相关功能,但在小程序当中可以通过组件来得到有效的实现听音乐

过程。

关键词：音乐播放器；Java；Android

1微信小程序简介

1.1小程序简介

“听音乐”是深受众多人所喜爱的用来缓解压力的休闲方式之一。现如今，

社会生活日益加快，在紧张和压力下人们对音乐的需求也在以极大的幅度上升。

互联网上的音频与视频资源的数量规模更是爆发性地增长。因此音乐播放器自然

也就是大家比较关注的一个部分。然而，现在的几大音乐门户竞争十分激烈，导

致音乐资源被“分割”，不同的音乐资源需要下载不同网站的APP终端，结果每

个人的手机上都会有几个不同的音乐APP，白白浪费了大量的空间不说，还让操

作变得繁复，平白增加许多不必要的操作。

所以，设计出一款实用性高、简洁方便、占用空间较小的手机音乐播放器具有非

常重要的现实意义，而不需要通过下载或安装即可以使用的微信小程序则恰好能

满足这个需求。

微信小程序是腾讯公司在2017年1月9日全量发布的嵌入微信之中不需要安装

即可使用的战略级产品。用户通过二维码扫描或搜索即可打开应用获取所需信息,

成为连接用户与信息及服务的一种全新方式,其目标是要"连接一切"。

互联网的上半场,各个行业都以技术优势来壮大自身,很大程度上依靠的是人

口及流量红利。而今,对整个市场来说,以往的红利即将殆尽,就目前情况而言最

主要的是要靠创新服务于各行业用户的需求,靠大数据、移动互联网等技术的革

新为现有用户提升全新的、更为人性化的信息体验。打开小程序就可以看到选择

城市和输入查询两个功能区域,用户点击当前城市选项,可以进入搜索页面来更换

城市。只要在起点、目的地选项输入相应的信息,小程序便自动检索从起点到目

的地的多种选择路线,其中有多项条件筛选,大部分用户选择推荐路线。"知了交

通"接入了百度地图的API,因此查询结果和百度地图是一致的,只是界面会比较简

单,方便用户观看。此款小程序集合了全国23个城市的最新地铁线路图,方便用

户查询和导航,对于生活在地铁密集的大城市的人来说是非常有用的。这款APP

的定位就是用完即走的产品,不需要复杂的程序操作,乘坐地铁时,可以通过它快

速了解一个城市的交通地图。

1.2.2小程序的优势

(1)开发成本低

小程序的功能性优势是非常明显的,就目前来看,首先是人尽皆知的低成本。

新的微信生态中,小程序完全可以做到低成本开发、低成本推广,还具备低门槛的

优势,使传统企业转型升级的难度降低了很多。可以说这是小程序从发布到现在

最明显的优势。有别于开发同样功能的APP或Web,小程序只需要依托微信的开发

标准开发,便可以自动适配不同操作系统的使用要求,如IOS系统和Android系统。

只要小程序迭代,用户随时打开就是新版本,除了可以节省维护成本、提高更新版

本的效率,还可以在一定程度上获得受众流量。

(2)推广成本低

小程序推广成本低是相对于APP和网站的推广成本而言的,目前用户还处于

一个对小程序好奇的阶段,获取的用户难度会小很多。重要的是,小程序的搜索排

名机制是比较严格而且短期不会进行商业化的,这就意味着,如果能够早期做好小

程序的关键词优化工作,后续也会带来一些流量。

(3)用户体验较好

同等成本下开发出来的小程序体验肯定远胜于APP和网站,因为同类场景下,

通过小程序获取服务会比APP和网站更为高效,同一周期,小程序的迭代速度和用

户需求反馈的速度要更快。

小程序除了上述三项优势外,还有很多功能也是作为互联网新产品的优势所

在,如扫码功能,小程序支持用户使用扫一扫;会话推荐分享功能,用户打开小程序

去分享小程序和相关的页面内容;消息通知功能,用户可以发送模板消息给接受过

服务的用户,用户可以在小程序内联系客服,支持文字和图片;切换功能,使用小程

序的过程中,如果用户收到消息,可以快速返回到聊天界面;历史列表记录功能,用

户不必担心之前使用过的小程序会找不到,可以通过历史列表找回;公众号关联功

能,微信小程序和公众号不是分离的,可以相互关联;搜索查找功能,直接输人小程

序的完整名称或者完整的品牌信息,可以快速找到需要的小程序。

2开发前准备

2.1开发工具

目前由微信官方网站所公布的相关小程序开发工具为微信Web开发者工具,

并由官方网站来提供小程序的前端开发框架。该工具主要根据系统层的框架来进

行开发,因为小程序并非在浏览器当中运行,所以在 Web当中禁止采用

Document,Window之类的方法。而在以往对HTML5进行加载的过程中,会受到网络

环境的限制,需要对HTML、CSS以及JS进行逐步加载,并返回数据,从而渲染页面,

将其在浏览器当中进行展现。这样的方式用户需要等待许久,而且会降低用户的

体验感。微信Web开发者工具与H5开发工具的预览模式存在着一定的差异,其属

于一项自己的工具,因此可有效地实现同步本地文件开发和调试等流程。此外小

程序开发了相关的标签语言和样式语言,并没有使用相关的HTMLS+CSS3。在微信

小程序软件的开发过程中,还进一步提供了原生APP的组件。而在HTML5+CSS3当

中,这是需要通过模拟才能够有效实现的相关功能,但在小程序当中可以通过组件

来得到有效的实现。

2.2创建微信小程序项目

开发微信小程序项目,可以从以下几个方面着手:

(1)了解微信小程序的框架以及它运行的机制，并通过微信官方熟悉微信小

程序的开放文档。

(2)熟练使用微信小程序开发者工具，了解微信小程序的配置。

(3)根据需求建立开发方案，整个项目的预期功能以及界面结构设计。按文

件结构图对所需的页面画出框架,为后续开发创造条件。

(4)确定项目文件结构后,根据需求，利用微信小程序组件和样式完成页面的

视图层配置，在此基础上，完成微信小程序逻辑层的配置。

3设计实现

小程序共分为主页、视频页、个人中心页、登录页、推荐歌曲页、音乐播放

页、搜索页,其中:

(1)主页:

推荐歌曲模块需要实现动态滑块效果。

排行榜模块中,排行榜分类类目有0-20共21种,需要取前5种分类显示,且

整体实现轮播效果,当前滑块中显示后一个滑块部分内容。

(2)视频页:

头部搜索区域点击可以跳转至搜索界面。

导航模块可以动态获取数据,点击动态切换视频列表数据,对应下边框动态切

换,且有过渡效果。

视频列表模块,若用户没有登录则直接跳转至登录界面,若用户已经登录,则

动态获取数据。此模块需要用户cookie身份验证。

分享功能:点击视频列表模块右下角‘三个点区域’实现转发分享。

(3)个人中心页:

头部模块:若用户未登录显示默认头像图片及游客姓名,此时可以跳转至登录

界面,但登录以后点击不跳转;用户登录后显示用户头像及账号名。

最近播放模块要求用户登录后显示用户最近播放记录;需要实现动态滑动模

块的功能。

内容区模块要求手指滑动内容区跟随移动。

(4)登录界面:

个人中心,video视频页可以点击跳转至登录界面。

使用网易云音乐真实接口需要用手机号以及密码登录。

前端验证验证手机号是否合法

后端验证:若登录成功,则将用户信息存入至本地,并在成功登录后跳转至个

人中心页。

(5)每日推荐页:

头部模块利用date函数显示当前日期。

歌曲列表模块显示推荐歌曲列表,并且可以同详情播放页进行交互。

(6)歌曲详情页:

动画功能:根据音乐播放的状态动态控制摇杆,磁盘进行动画

音乐播放功能:可以根据点击系统控制音乐播放按钮控制音乐播放/暂停/停

止,并且需要正确显示音乐的播放状态

进度条控制模块可以显示音乐的总时长和实时播放的时长,要求进度条根据

音乐的播放进度正确显示

(7)搜索界面:

页面数据动态显示需要访问对应的接口

搜索功能可以根据用户输入的数据进行模糊匹配动态显示数据

历史记录模块根据用户的搜索内容显示用户的搜索记录3设计方案

4结语

本文完成了基于基于微信小程序的音乐播放器的设计,微信小程序不但自带

流量优势，而且可以为微信用户带来更佳的体验,具有功能简单便捷、使用用户

多等特点。随着微信小程序的功能的更新,小程序的开发和应用也需要达到更高

的要求,小程序的开发以及生态工具的建设需要提高到一个更高的层次。而目前

各行各业都纷纷加入到了小程序的开发过程当中,使得小程序的功能变得更完善。

虽然在现今的阶段，小程序还不能取代部分高频和复杂的应用，但一些低频应用

的功能已经可以在小程序当中进行实现，从而不再需要相应的APP。总的来说,微

信小程序具有十分广阔的发展前景,而对于其未来的发展也可以抱有一些的期待。

参考文献：

[1]李哲,周灵.微信小程序的架构与开发浅析[D].佛山科学技术学

院,2019(12)

[2]中国科技信息.2019年微信小程序数据[C],2020

[3]喻国明,程思琪.从“连接”到“场景”：互联网发展的重要进阶[A].北

京师范大学，新闻传播学院,2018

[4]袁堂青,亓婧.基于微信小程序的开发与研究[C].山东传媒职业学院,2020

[5]邓俊豪.Android本地音乐播放器的设计与实现[D].广东石油化工学

院,2021(3)

[6]杨国军.基于Android平台的音乐播放器[J].软件,2020，41（11）：

185-187

[7]葛艳,高占江.基于Android系统的音乐播放器设计与实现[A].青岛科技

大学,信息科学技术学院,2014

[8]喻国明,梁爽.小程序与轻应用：基于场景的社会嵌入与群体互动[A].武

汉大学学报,2017(6)

[9]赵雪芹,王少春.微信小程序用户持续使用意愿的影响因素探究[A].现代

情报,2019(6)

[10]刘天元,夏明.微信小程序开发与运用[J].电子世界,2021

[11]杨启,张丽萍.从互联网生态看微信小程序的发展[J].新闻论坛,2017

[12]薛欢雪.互联网生态下基于信息管理的微信小程序新探[J].图书馆学研

究,2018.(9)

[13]匡文波,李芮,任卓如.微信小程序面面观[J].新闻论坛,2017

[14]蒋文娟,苏喜红,孟丽珍.基于微信小程序的音乐播放器研究与实现[A].

软件导刊,2020(6)

[15]韩舶.微信小程序发展现状及其前景探析[B].数字传媒研究.2020

[16]Cassavoy, Liane.A Sweet Music Player[J].PCWorld,2011(9)

[17]Lei Hao,Fucheng Wan,Ning Ma,Yicheng is of the

Development of WeChat Mini Program[J].Journal of Physics,2018

[18]Chen Realization of Short Video and Mini Program:

Comparison and Optimization[J].International Journal of Social

Sciences in Universities,2018…………