2024年4月20日发(作者：)

*************** 学 院

期 末 实 验 报 告

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来实现项目中的特定问题，解决开发过程中常见的问题。