WX小程序开发在线音乐播放器的设计与实现
摘要:随着社会的信息技术的发展,越来越多的人使用WX,在2017年1月才出现在人们WX 里的小程序,近来是越来越火爆,好多拥有APP客户端的商家都已做好关于自己APP的WX小程序以用来方便客户的使用。因为WX小程序是一种快捷方式,不用下载,直接使用,不占用手机内存的一款快捷式小程序。我要做的是一款WX在线音乐播放器,其播放器有搜索页面,音乐排行榜,歌曲列表等等功能。在WX上注册WX小程序,再在WX小程序里下载WX小程序开发工具,然后利用JavaScript语言编写。WX小程序在线音乐播放器的作用是:为了让喜欢听音乐的人免于下载音乐APP,直接在WX小程序上就可以听自己喜欢听的音乐。
关键词:小程序;音乐;WX
Abstract :With the development of information technology, more and more people use WeChat. Besides, the small program of WeChat has been more and more popular, which be applied in January 2017. many stores using APP are ready on the small program of WeChat APP for the convenience of customers. The small program has a lot of advantages, such as: no download, direct use, do not occupy the mobile memory of a shortcut program. I am aiming at develop a WeChat online music player with the functions of a search page, a music list, a list of songs, and so on. The process of using:
Firstly, the WeChat small program is registered on the WeChat public number, and then the WeChat small program development tool is downloaded in the WeChat small program. Finally, it is written in the JavaScript language. The role of WeChat small program online music player is let the people who listen to music avoid being downloaded music APP, and they can listen to music that they like directly on WeChat applet.
Key words: Small programs; Music; WeChat
目录
摘要........................................................... I Abstract ........................................................... I 目录.......................................................... II 绪论 (1)
1选题背景及开发工具简介 (1)
1.1 选题背景 (1)
1.2 小程序概况 (2)
1.3 开发者工具介绍 (2)
1.3.1 WX小程序发展历程 (3)
2需求分析 (3)
2.1 小程序目标 (3)
2.2 开发概况 (3)
2.3 用户需求调查 (3)
2.3.1 E-R图 (4)
2.3.2 功能需求 (4)
3程序可行性分析 (5)
3.1 经济可行性 (6)
3.2 技术可行性 (6)
3.3 法理可行性 (6)
4主要功能详细设计 (7)
4.1 播放界面的实现 (7)
4.2 歌曲列表的实现 (8)
4.3 排行榜的实现 (9)
4.4 搜索页面的实现 (11)
5预览与调试 (13)
5.1 黑盒测试 (13)
5.2 白盒测试 (13)
6总结与展望 (14)
参考文献........................................... 错误!未定义书签。附录. (15)
附录A  播放界面的wxml代码: (15)
附录B  播放界面js代码: (15)
附录C  搜索页面js代码: (20)
下载酷狗音乐致谢........................................... 错误!未定义书签。
绪论
音乐的魅力在生活中是极其大的,不同的国家、不同语言的人在不同的时间和地点可以从音乐中体会到相同的情感,可以加强人与人之间的联系。我们同时可以从音乐里了解异国他乡,因为音乐是人类共同的精神食粮,它使得身体放轻松,心情愉悦,舒解压力,避免了一系列的神经紧张失调,而导致的慢性疾病的产生,甚至有的时候能够做到某些程度上的心灵。随着社会的发展,当今社会使用智能手机的人越来越多。现如今随着科技的发展的日益强大,越来越多的高科技以及智能科技出现在人们的生活学习中。人们在生活中避免不了的就是WX,走到哪里都拿着手机看着WX。但是对于一个手机内存不足,但是很喜欢听音乐的人来说。这时候就需要考虑一款不需要安装又确实存在于手机的一款APP。
根据用户调查,百分之八十的年轻人喜欢用网易云音乐,百分之三十的小学生喜欢用QQ音乐,百分之六十的中年人喜欢用酷狗音乐。在经过计算、推理、以及经济的预算之后,决定做一个WX 小程序关
于在线音乐播放器。由于资金有限,所以方案是做一个主页,搜索页面以及个人设置。其中主要开发工具是WXWeb开发者工具。
1选题背景及开发工具简介
1.1 选题背景
2017年,WX小程序已经是当下最热门的话题。在全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人WX在线音乐播放器是为了方便广大爱好音乐,爱听音乐的人,但是手机内存不大的人,一项为了提供听音乐方便而制作的一款WX小程序在线音乐播放器。一款可以用WX登录的在线音乐播放器。信息时代,是能够极大地改变了人们的生产生活方式,改变着人们的思维方式和思想状态,这对传统的使用音乐软件有许多的不同之处。因为现在的音乐软件存在着版权问题,有些音乐在有些音乐软件商才可以播放,就极大地限制了人们对自己喜欢的音乐的限制。首先做这款WX音乐在线小程序的初衷是为了方便客户,不用下载APP,也能听到自己
喜欢的音乐。“移动开发就是手机开发,或者是移动互联网开发,就是以手机或者其
它便携终端为基础,由于这些随身的基础基本设备都是采用的是无线上网方式,所以
在业内称为无线开发。”[1]
1.2 小程序概况
小程序是2017年1月提出的新的APP概念,它是一种不用下载,简单方便的小程序,附着在WX上,打开WXAPP即可使用,在最新的WX版本聊天页面里,下拉菜单,即可看见最近所用的WX小程序。这样在不会使用和不常使用智能手机的中老年人,方便他们快速地查自己之前在WX上所使用的小程序。WX小程序不仅可以解决用户自行下载软件的烦恼,还不需要占用用户手机内存,它的存储就像是在云端。自从它的发布以来,不论是在WX上还是支付宝上,都有开发小程序的趋势。因为在当今世界,小程序可以解决用户内存问题,不需要用户买内存较大的手机,也节约了手机内存的生产量,由于小程序的不断更新,它越来越多的功能不断提高,不断上线,流量接入口也在不断的增多。在日常生活中,用得最多的就是游戏小程序。比如:跳一跳,王者风暴。自从小程序的上线,用户使用手机的方式也发生了很大的改变,在生活中,WX小程序逐渐被开发者以各种形式和需求开发出来,供用户选择以及玩耍。WX小程序的排名是根据小程序用户使用的数量越多,WX小程序的排名就越靠前。
1.3 开发者工具介绍
移动端浏览器页面:这里开发静态页面的做法和普通的PC页面开发一样,使用chrome浏览器进行开发和调试,但是不一样的地方是把PC端的开发模式切换到手机开发模式(PC调试模式切换到移动端);嵌入APP中的移动端页面:对于某些经常举办针对用户活动的APP对于嵌入HTML5页面的需求
是比较多的。因为这样会节省开发的成本、减少原生APP的迭代速度、对用户友好。开发嵌入原生APP的方式和第一种方式基本一致,唯一和第一种方式有些差别的是:如果HTML5页面和原生APP存在一些交互(js需要获取原生APP放回的数据),这种方式是没法做到的,因为上述方式是放在浏览器这个APP下的,而不是某个特定的原生APP。开发WX端页面:切换移动调试。
1.3.1 WX小程序发展历程
WX小程序的发展历程,它是一种不用安装直接在WX上搜索相应小程序的应用。它的作用就是为了实现用户扫一扫或者搜一下就能打开软件的快捷方式,就好像电脑上的快捷图标。在全面开放申请后,小程序的基本类别可以是企业、政府、媒体或者其他个人开发者,不管是什么人只要拥有身份证号,有WX,即可申请注册小程序。利用HTML5和移动开发的一些基础知识搭建开发环境。[2]
2需求分析
2.1 小程序目标
本人所做的项目是为了开发一个WX小程序在线音乐播放器,设计的主要实现功能如下:
1)播放音乐界面(有“播放暂停”按钮以及“上一首下一首”动作按钮);
2)不同类别的音乐排行榜;
3)音乐的搜索功能(输入关键字);
4)歌曲列表(在点击音乐排行榜后会进入歌曲列表),要求歌曲列表界面简明;
5)播放时有bug,多次播放音乐有可能会卡顿(暂时没有解决办法);
6)主要实现功能是播放百度端口的音乐。
7)在WX后台运行时,不影响音乐的播放。
2.2 开发概况
操作系统:window7、iOS手机调试;支持环境:安卓、iOS;开发环境:WXWeb 开发工具。
2.3 用户需求调查
软件需求,是用户对目标软件系统在四个方面:功能方面、性能方面、行为方面、设计约束方面的期望。需求分析,通过对应用一些问题及其环境的分析,同时去理解采用一系列的分析方法和技术,将用户的需求逐步精确化、完全化、一致化,最终形