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

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

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

实现效果图

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

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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值