*************** 学 院
期 末 实 验 报 告
2021/2022学年 第二学期                       
课程名称
小程序开发
班   级
姓  名
学   号
一、小程序功能概述：制作查询类小程序
本程序为音乐小程序， 以丰富用户的日常生活，舒缓用户的心情为宗旨。以音乐的播放、暂停为本程序的基本功能，在基本功能上又开拓了歌曲、歌手的查询与搜索；用户及管理员用户的登录功能；通过大数据判断用户的喜好并进行类似音乐的推送功能；用户可以对程序内音乐进行自由分类管理功能。丰富用户生活的日常小程序。
二、小程序功能分解及实现结果：
1.实现基本的页面布局，利用tab-item实现“音乐推荐”“播放器”“播放列表”此三个标签页的滑动切换、选择切换的效果。
2.在“音乐推荐”页面内设置swiper组件，实现轮播图的效果。
3.功能按钮位于轮播图下方，flex布局实现页面布局，实现较为简单。
4.热门音乐位于功能按钮下方，同样是通过flex布局实现页面布局。并通过决定路径导入图片，也可导入音频。
5.播放器页面，除了传统的布局外，设置了rotatelmage动画，控制旋转角度；将设置的动画属性绑定到专辑封面；通过设置animation的属性实现动画效果。
6.另外在播放器页面下方增设了进度条，通过调用audioCtx的onTimeUpdate（）方法，获取音乐状态，通过formatTime（）函数处理时间格式。
7.播放列表中的数据在前面的页面中就已经定义，只需通过列表渲染将播放列表渲染到页面中就行了。
8.为了实现“播放”“暂停”等音乐效果，利用条件渲染判断state值，来显示按钮；分别调用audioCtx对象的play（）和pause（）方法，实现音乐的播放和暂停；再为按钮绑定next（）事件处理函数实现“切换到下一首”。
三、实验总结：
此次小程序项目包含了音乐小程序项目的完整开发流程，其开发步骤包括页面结构的分析、样式的设计、组件的运用等。完成本项目能掌握小程序基本交互逻辑的开发，能运用API来实现项目中的特定问题，解决开发过程中常见的问题。

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