云音乐小程序
云音乐小程序
项目概述
该项目是基于微信小程序技术实现的云音乐小程序，原项目出自“尚硅谷”于2020年发布的小程序视频教程，项目开发目的是为了在短期内快速上手小程序课程知识，熟悉小程序开发流程。开发需求是利用网易云音乐官方接口，实现一个类似网易云音乐的音乐小程序。
该项目在原项目的基础上进行了部分优化：增添了拖动进度条改变播放时长功能，修复了无法获取每日推荐歌单接口数据和无法获取视频接口数据的bug，将视频中实习搜索功能的节流函数修改为防抖函数，对视频页增添了刷新加载窗口，在request.js中配置了cookie属性。
附视频链接：尚硅谷微信小程序开发（零基础小程序开发入门到精通）_哔哩哔哩_bilibili
| 前端 | WXML + WXSS + JS + Iconfont |
| 后端 | NodeJS + NatApp |
| 数据库 | 网易云音乐官方数据库 |
| 服务器 | 网易云音乐官方服务端 |
| 开发工具 | Visual Studio Code + 微信开发者工具 |
| 项目启动 | 2023.09.11 |
| 项目完成 | 2023.09.29 |
| 项目类别 | 课程项目 |
功能和特性
登录功能
轮播图、歌单、热歌榜滑动效果
获取音乐排行榜
获取每日推荐歌单，播放歌单音乐
获取多个标签视频，播放视频页内视频
对视频页内的搜索记录进行查看和删除
实现内网穿透，可以真机调试
主页未完善
个人主页未完善
没有实现注册接口
视频页搜索功能在搜索后无法跳转至关键词
歌单和热歌榜的音乐点击后不跳转至音乐详情页
获取歌单和视频时会发送多次请求，容易造成网络堵塞
网易云音乐官方服务器繁忙时，无法获取歌单数据或视频数据
技术架构
项目目录
CloudMusic_Study包：项目目录
NeteaseCloudMusicApi包：服务器目录
miniprogram_npm包：实现微信开发者工具中构建npm
node_modules：npm包
app.json：小程序全局配置，例如顶部标题和背景色配置，页面配置等
components包
- NavHeader包：导航栏组件，用于实现主页的推荐歌单和热歌榜
otherPackage包
- other包：other页面
songPackage包
- recommendSong包：每日推荐页面
- songDetail包：音乐详情页面
pages包
- index包：主页面
- login包：登录页面
- personal包：个人中心页
- search包：搜索页面
- video包：视频页面
static包
- iconfont包：iconfont图标CSS样式引用路径
- images包：存放每个页面需要用到的图片
template包
- myTemplate包：other页面用到的组件测试页面，
utils包
- config.js文件：配置服务器相关信息，包括主机地址和内网穿透地址
- request.js文件：发送ajax请求的封装函数
关键问题与挑战
【教程缺陷】教程没有给出服务器源码
自行到网易云音乐NodeJS接口官网下载对应npm包
【教程缺陷】教程内的/playlist接口失效，无法获取到热歌榜的接口数据
网易云修改了接口地址，更改请求地址为/toplist并进行遍历/playlist/detail地址后成功获取热歌榜歌单
【教程缺陷】教程内的视频接口失效，获取视频列表数据后视频不显示
网易云修改了视频接口地址，通过遍历/video/url获取视频链接后，添加到data中后成功显示视频内容
【自我拓展】视频下拉刷新后没有变化
获取视频接口的数据，选取500页，每次刷新时对500页的数据进行随机请求即可在刷新后产生随机视频
【教程缺陷】教程内的搜索功能节流函数有误，输入内容搜索时，只会显示上一次请求
将节流函数修改为防抖函数，在300ms内没有输入内容则发送一次请求
【自我拓展】教程内的音乐详情页进度条效果用CSS实现，无法实现拉动进度条控制播放效果
废除原方案，将进度条改为微信的Slider组件，成功实现进度条控制播放
成果与效益
开发总结
这次开发时间耗时较长，因为前半个月连续做完了后台管理系统和个人博客，所以心态就有点放松了，想着九月再做一个项目就行，加上作业什么的也得补补，所以就拖到月末才完工。截止到目前为止已经做了三个项目，开发经验越来越丰富了，接下来可以稍微放一放项目开发，继续学习新技术了。
这个十月打算开始学习Spring框架和TypeScript，然后再做两个项目吧，还是得多练，直接上手项目真的进步非常快。然后十一月的话看看八股文，复习一下知识。十二月准备考试，然后看看能不能捞个寒假实习叭。
继续加油！现在的目标是找到实习！！
