仿网易云音乐微信小程序
该项目是基于微信小程序技术实现的云音乐小程序,原项目出自“尚硅谷”于2020年发布的小程序视频教程,项目开发目的是为了在短期内快速上手小程序课程知识,熟悉小程序开发流程。开发需求是利用网易云音乐官方接口,实现一个类似网易云音乐的音乐小程序。
该项目在原项目的基础上进行了部分优化:增添了拖动进度条改变播放时长功能,修复了无法获取每日推荐歌单接口数据和无法获取视频接口数据的bug,将视频中实习搜索功能的节流函数修改为防抖函数,对视频页增添了刷新加载窗口,在request.js中配置了cookie属性。
视频链接:尚硅谷微信小程序开发(零基础小程序开发入门到精通)_哔哩哔哩_bilibili
Github仓库链接:仿网易云音乐微信小程序
| 简介 | 内容 |
|---|---|
| 前端 | WXML + WXSS + JS + Iconfont |
| 后端 | NodeJS + NatApp |
| 数据库 | 网易云音乐官方数据库 |
| 服务器 | 网易云音乐官方服务端 |
| 开发工具 | Visual Studio Code + 微信开发者工具 |
| 项目启动 | 2023.09.11 |
| 项目完成 | 2023.09.29 |
🎯 功能和特性
✅ 已实现功能
- 🚪 用户登录功能
- 🏆 音乐排行榜获取
- 🎯 每日推荐歌单获取与播放
- 🎠 轮播图、歌单、热歌榜滑动效果
- 🎥 多标签视频获取与播放
- 🔍 视频页搜索记录查看与删除
- 🌐 内网穿透真机调试
- ⏱️ 拖动进度条控制播放时长
❌ 待完善功能
- 🏠 主页页面功能完善
- 👤 个人中心页面功能完善
- 📝 用户注册接口实现
- 🔎 视频搜索关键词跳转
- 🔗 歌单和热歌榜音乐详情跳转
- 🚦 网络请求优化(减少重复请求)
- ⚠️ 服务器繁忙时的数据获取稳定性
⚠️ 关键问题与挑战
【教程缺陷】教程没有给出服务器源码
自行到网易云音乐NodeJS接口官网下载对应npm包
【教程缺陷】教程内的/playlist接口失效,无法获取到热歌榜的接口数据
网易云修改了接口地址,更改请求地址为/toplist并进行遍历/playlist/detail地址后成功获取热歌榜歌单
【教程缺陷】教程内的视频接口失效,获取视频列表数据后视频不显示
网易云修改了视频接口地址,通过遍历/video/url获取视频链接后,添加到data中后成功显示视频内容
【自我拓展】视频下拉刷新后没有变化
获取视频接口的数据,选取500页,每次刷新时对500页的数据进行随机请求即可在刷新后产生随机视频
【教程缺陷】教程内的搜索功能节流函数有误,输入内容搜索时,只会显示上一次请求
将节流函数修改为防抖函数,在300ms内没有输入内容则发送一次请求
【自我拓展】教程内的音乐详情页进度条效果用CSS实现,无法实现拉动进度条控制播放效果
废除原方案,将进度条改为微信的Slider组件,成功实现进度条控制播放
📝 开发总结
这次开发时间耗时较长,因为前半个月连续做完了后台管理系统和个人博客,所以心态就有点放松了,想着九月再做一个项目就行,加上作业什么的也得补补,所以就拖到月末才完工。截止到目前为止已经做了三个项目,开发经验越来越丰富了,接下来可以稍微放一放项目开发,继续学习新技术了。
这个十月打算开始学习Spring框架和TypeScript,然后再做两个项目吧,还是得多练,直接上手项目真的进步非常快。然后十一月的话看看八股文,复习一下知识。十二月准备考试,然后看看能不能捞个寒假实习叭。
继续加油!现在的目标是找到实习!!
