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

 2022-01-17 11:01

论文总字数:32899字

目 录

1.引言 3

2.开发工具与技术介绍 3

2.1 微信小程序简介 3

2.2 小程序开发工具简介 3

2.3 WXML简介 4

2.4 WXSS简介 5

2.5 JSON简介 6

2.6 JavaScript简介 7

2.7 微信小程序框架结构分析 7

3.需求分析 8

3.1 功能模型 8

3.2 用例模型 9

3.3 用户体验需求 10

4. 音乐播放器设计 10

4.1 概要设计 11

4.2 模块详细设计 11

4.2.1 用户操作流程 11

4.2.2 音乐播放器模块详细设计 12

4.3 视图层设计 13

4.4 逻辑层设计 13

5. 音乐播放器实现 13

5.1 系统界面 14

5.2 系统功能 15

5.2.1 歌曲分类 15

5.2.2 音乐推荐 17

5.2.3 歌曲搜索 21

5.2.4 歌曲播放 26

6.结束语 30

参考文献 31

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

丁海升

,China

Abstract: The mobile Internet is developing faster and faster, and more and more services are provided on the mobile platform. On the other hand, we have to face an increasingly serious problem, that is, more and more APPs are installed on our mobile phones, occupying a large number of storage space and consuming a lot of resources. In recent years, in order to solve this long tail phenomenon, many application providers have put forward their solutions. However, none has changed this phenomenon significantly, until the emergence of WeChat small program. WeChat small program is significantly different from previous light APP scheme, as its API can be used in every area. As a result, the survival and development prospects of the small programs are very broad. This paper designs and develops a simple music player based on WeChat small program platform. The music player is developed in the WeChat web development tool environment using WXML language, WXSS language and JavaScript language. The music player implements music list, playlist, playback and query, and classifying music according to its type.

Key words:WeChat small program;music player ;WXLL;WXSS;JavaScript

引言

互联网的发展对人类生活产生极大影响。近年来,移动互联网的发展越来越迅速,影响着人们的衣食住行各个方面。基于移动互联网平台,现代人可以方便地网络购物,吃饭可以叫外卖,出门有滴滴打车等各种方便人类出行的APP,外出可以网上预定火车票、酒店,等等。移动互联网的发展促使移动设备也日趋智能化。现如今,智能手机几乎成为现代人的标配,手机的普及有着重大的意义,公交上、地铁上、校园里、餐厅里,随处可见手机的存在。手机使人们能更加快捷的获取信息,更加方便的与朋友家人沟通,把整个世界缩小到用户的手机屏幕上。透过这个小小的屏幕,人们能知道这一天在他们生活的蓝色星球各个角落发生的事情。总之,互联网的发展改变了人类的生活,手机的普及同样对人类生活具有重大意义。

任何事情都有两面,移动互联网的发展迅速、手机普及程度不断提高,带来好处的同时也不可避免的带来了一些问题,最令人棘手的应该是手机资源浪费问题。现实生活中,人们手机上会安装许多不经常使用的app,因为虽然使用频率不高,但终究某些特定的时候需要用到,导致用户只能让其在手机上继续存在,即使其浪费了很多存储空间。同时,安装app过多,也会浪费手机的资源,尤其是电池。这些年,为了解决这种长尾现象,国内各大应用提供商陆续提出各自的解决方案,但都没有显著改变这一现象,直到微信小程序的出现。微信小程序和以往的轻型应用方案显著不同,其可用的API及其注册、开发适用于各种应用领域生存,其发展前景非常广阔。微信小程序是基于微信平台的,这些所谓的app的功能,用户在微信中使用。可以这样理解:把微信变为一相似于Windows的操作系统,操作系统上的应用软件就是各式各样的微信小程序。如今的微信小程序已经发展成为微信公众平台小程序和应用号,而且现在的微信小程序用户不用下载和安装就可以使用,用户只需要拿出手机扫一扫或者搜一下附近的微信小程序,逐渐形成的一种新型服务形态,这种体系并行与原有三种微信公众号。在当今信息化的时代,微信出现的目的是想要打造一个生态链,目标不是绑定用户。“互联网 ”可以把一切事物连接起来,微信存在的意义就是“连接一切”,但是微信小程序的出现正在慢慢改变这一切。微信小程序是微信打造的生态工具,各行各业对微信小程序的存在表示赞赏。处在互联网的时代,流量等价于金钱,企业发展之所以潜力无穷是因为微信月活跃用户在9亿以上,这使得微信小程序企业有巨大的发展空间。小程序未来还会颠覆我们之前存在的许多生活观念,作为一个超级桥梁连接着用户和各个行业,细化到每一产业里面,使各行各业实现互联网,加快产业的变革。

本文学习并使用微信小程序编写语言,基于微信小程序框架结构,设计并实现一个音乐播放器,具有音乐推荐,音乐搜索,音乐推荐分类,音乐播放等基础功能。

开发工具与技术介绍

2.1微信小程序简介

通俗来讲,微信小程序是一种网页应用式应用,这种网页应用是基于微信生态圈的,在提供给用户友好的界面设计和交互体验的同时,也制定腾讯官方的开发规范,并且为开发者提供开发工具,开发工具具有表单、导航、地图、媒体和位置等开发组件,使微信小程序的开发更加便利。

按照微信官方给出的关于微信小程序的说法,小程序不需要下载也不需要安装就可以使用,将会极大地节省手机的存储空间。用户在使用程序的时候只需要拿出手机扫一扫或者搜一下,就能使用应用,同时当用户使用完这个应用的时候,用户也不需要卸载这个应用,因为在一开始使用的时候用户根本就没有安装在手机上。

小程序是运行在微信平台上的,由于微信具有多平台的特性,所以自然小程序具有多平台的特性,这种跨平台的体系实现简单并且实用,在未来一定成为一个巨大的APP生态圈。

经过关于传统开发方式的打包,使小程序开发者能够非常快速地在微信的网页视图里构建一个基于HTML 5和JavaScript的应用,同时微信也开放了登录、微信支付等接口,让小程序可以尽可能的利用微信平台的资源,由于微信对socket的支持,也使得小程序本身不会局限于微信提供的功能,从而尽最大可能性提高了开发的便利度和扩展性。

2.2小程序开发工具简介

图2-1 微信开发工具页面

对于任何的开发而言,都需要一个与之相对的IDE,IDE的使用可以极大提高编程效率和编程开发的速度,减少很多不必要的麻烦,那么微信小程序的开发,自然微信官方也开发了对应的IDE,开发者工具电脑端是基于Chrome内核的,开发者工具不仅仅为用户提供了一个用户书写代码的环境,为了使开发更加人性化,微信官方更是在其中增加了调试、代码高亮、项目管理、代码提示、自动完成等功能。

腾讯公司为了帮助开发者简单和高效地开发和调试微信小程序制作出了微信web开发者工具,微信web开发者工具是在原来的公众号网页调试工具的基础上,推出的全新微信web开发工具,所以这个开发者工具具有公众号网页调试和小程序调试两种开发模式。开发者使用公众号网页调试,可以方便调试微信网页授权和微信JS-SDK功能,如果开发者使用小程序调试,可以轻松完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等基础功能。

2.3 WXML简介

WeiXin Markup Language简写为WXML,纯英文翻译过来就是“微信标记语言”,WXML是设计框架的一种标记语言,可用于界面渲染,WXML的渲染原理类似于 React Native,都是通过一种标记语言,在不同平台被渲染成对应不同端的文件。WXML是微信规范标准的一种用于界面布局的标签语言,它基于XML语言规范,WXML结构结合了微信提供的基础组件和事件系统来构建页面,WXML发展在XML之后,所以在设计上许多语法规范都继承于XML语言,XML是Extensible Markup Language缩写为XML,纯英文翻译为可扩展标签语言,在XML语言中,最关键的部分是标签,我们可以在标签里创建内容,然后使用特定标签标记它,从而使标签内的每一个视觉元素和模块可被特定识别,并且信息可分类。其实WXML的标签就是由内容和标签组成的,大部分内容包含在标签元素中,微信所说的视觉组件也就是WXML的标签,还被称为WXML元素。

剩余内容已隐藏,请支付后下载全文,论文总字数:32899字

相关图片展示:

您需要先支付 80元 才能查看全部内容!立即支付

该课题毕业论文、开题报告、外文翻译、程序设计、图纸设计等资料可联系客服协助查找;