摘要：在如今互联网的时代，基于不同的运营平台、针对使用习惯不同的用户，Web 端音乐播放器、基于安卓或者IOS系统的音乐播放APP等各类播放器也应运而生。并且随着微信小程序生态的成熟，用户更偏向选择使用方便快捷的微信小程序。基于以上原因，本文搭建基于JS的音乐微信小程序，以实现更方便快捷的音乐播放器。

论文研究并实现了基于JavaScript技术的一款音乐方面的微信小程序，根据需求分析和调查情况等完成了用户登录、音乐的播放和暂停、查看播放中歌曲的歌词、搜索歌曲、获取歌曲榜单以及获取每日推荐歌单和首页轮播图等功能。

本次音乐微信小程序的开发首先对整体实现功能进行了需求性分析和可行性分析。采用了C/S的架构，通过Node.js搭建后台，通过CSRF伪造请求头的方法请求到音乐曲库中的音乐数据和用户数据，通过微信开发者工具使用WXML+WXSS技术搭建客户端展示页面，使用JavaScript技术处理获取到的音乐数据和实现用户的交互。

 

关键词：音乐；JavaScript；微信小程序；微信开发者工具

 

目录

摘要

Abstract

第1章 绪 论 1

1.1项目背景与意义 1

1.2国内外研究综述 2

1.2.1音乐播放器国内外发展（应用）现状 2

1.2.2微信小程序国内外发展（应用）现状 2

1.3论文所做工作及思路 3

1.4论文章节安排 3

第2章 相关理论与技术 5

2.1微信小程序 5

2.1.1微信小程序简介以及开发环境 5

2.1.2微信小程序的优势 5

2.2微信小程序开发相关技术支持 6

2.2.1微信小程序开发框架 6

2.2.2微信小程序开发组件 7

2.2.3微信小程序开发API 7

2.3 Node.js简介 8

2.4本章小结 9

第3章 分析与概要设计 10

3.1需求分析 10

3.1.1功能需求分析 10

3.1.2非功能性需求分析 11

3.2可行性分析 11

3.2.1经济可行性 11

3.2.2需求可行性 12

3.2.3技术可行性 12

3.2.4操作可行性 12

3.3框架与总体设计 12

3.3.1整体框架设计 12

3.3.2接口设计 13

3.3.3界面设计 17

3.4本章小结 19

第4章 功能实现 20

4.1小程序端主界面设计实现 20

4.2视频模块设计实现 23

4.3个人中心模块设计实现 25

4.4搜索音乐功能模块设计实现 28

4.5每日推荐功能模块设计实现 32

4.6歌手功能模块设计实现 35

4.7排行榜功能模块设计实现 36

4.8歌单模块设计实现 39

4.9音乐控制功能模块设计实现 41

4.10本章小结 44

第5章 测试与评价 45

5.1 测试目的及方案 45

5.2 测试用例与测试结果 45

5.2.1 主界面测试用例与结果 45

5.2.2 视频功能模块测试用例与结果 46

5.2.3 个人中心模块测试用例与结果 46

5.2.4 每日推荐模块测试用例与结果 47

5.2.5 歌手模块测试用例与结果 47

5.2.6 歌单模块测试用例与结果 48

5.2.7 排行榜模块测试用例与结果 48

5.2.8 音乐播放功能模块测试用例与结果 49

5.3本章小结 49

第6章 总结与展望 50

6.1 总结 50

6.2 展望 50

致  谢 51

参考文献 52