柚!音乐小程序 ---借鉴网易云APP设计(运用网易云真实Api)

该博客介绍了如何基于小破站小程序教程开发一个网易云音乐应用,实现了每日推荐音乐播放、上下首切换、实时进度条、搜索歌曲等功能。用户需登录才能播放音乐,登录可能存在服务器稳定性问题。此外,还提供了真机调试的配置方法和源码参考,但视频页面因API限制无法展示。项目包括主页、每日推荐、播放页、我的页面和登录页面,目前搜索功能仅显示热搜榜,未实现点击播放。

参考小破站小程序教程
通过点击每日推荐可以进行音乐播放,上一首下一首切换(前提要进行登录)(最近可能登陆会有一些问题,运气好就登录进去了,服务器的问题),

主要实现功能(点击每日推荐,会展示30首每日根据网易云推荐的歌曲,点击音乐进行播放,可以切换上一首下一首,实现了实时进度条(播放音乐等操作需要先登录,登录需要真实的用户账号密码,请使用者注册好,记住不可以访问登录接口太多次,会出错,),实现了搜索歌曲页面功能,目前没有实现搜索点击音乐播放功能,后续功能随缘更新)

实现效果图

主页:(点击每日推荐,则可进行播放音乐(前提:需要登录)(目前不登录好像也可以进行访问))
在这里插入图片描述
每日推荐:
在这里插入图片描述
播放歌曲主页:
在这里插入图片描述
视频页面(目前因为网易云锁了视频所以api获取不到url,api的url现在是访问不到的,可以用postman访问api查看视频url显示的是null)
在这里插入图片描述
我的页面(点击头像可以进行登陆,登录后用户信息会展示在此页面,最近登陆看运气)
在这里插入图片描述
登录页面:(需要用真实的网易云账户密码登录)
在这里插入图片描述
搜索歌曲页面(显示实时的热搜榜,可以进行搜索显示结果,会显示搜索记录(不可进行点击))
在这里插入图片描述
在这里插入图片描述

真机调试(需要用到内网穿透可以试试花生壳内网穿透)
在utils目录下的config配置内网穿透地址,真机和电脑连同一局域网就可以调试
配置好后进入request.js将host改为mobileHost编译就可以进行真机调试

在这里插入图片描述
在这里插入图片描述

这里需要使用服务器:
进入目录服务器->server,在此处打开cmd,输入 npm start(前提需要node.js,在此之前安装好)如果出现报错,根据报错安装相关东西
在这里插入图片描述
服务器启动成功页面:
在这里插入图片描述
源码地址(仅供参考)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值