Skip to content

仿网易云音乐微信小程序

该项目是基于微信小程序技术实现的云音乐小程序,原项目出自“尚硅谷”于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,然后再做两个项目吧,还是得多练,直接上手项目真的进步非常快。然后十一月的话看看八股文,复习一下知识。十二月准备考试,然后看看能不能捞个寒假实习叭。

继续加油!现在的目标是找到实习!!

基于 MIT 许可发布.