基于小程序的音乐播放器的设计与开发
摘 要：小程序一经面世带着自身的优势被各行业广泛应用,在信息的获取方面为用户提供了更为便捷、灵活的一站式信息搜索平台;也为各行业信息的发布和传播达到最大化和最优化开辟了新途径。在小程序软件的开发过程中,还进一步提供了原生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函数显示当前日期。
歌曲列表模块显示推荐歌曲列表,并且可以同详情播放页进行交互。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。