基于微信小程序的manster云音乐小程序

该博客介绍了如何开发一款基于网易云音乐真实接口的音乐小程序。使用Node.js作为后端,结合ES6、Promise、moment.js、pubsub.js等技术实现。详细步骤包括环境配置、服务启动、微信小程序开发者工具的使用。此外,还提到了视频资源的获取需用户登录,以及内网穿透工具ngrok的使用来实现真机调试。博客附带了多个页面的预览截图。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

代码地址: https://gitee.com/manster1231/master-cloud-music

介绍

基于网易云音乐真实接口开发的音乐小程序

软件架构

Nodejs作为后端,跨站请求伪造 (CSRF), 伪造请求头 , 调用官方 API

网易云音乐NodeJS版API

使用ES6语法

使用promise对象进行异步请求资源

使用moment.js进行时间日期处理

使用pubsub.js消息的发布订阅,进行组件间数据的传递

安装教程
  1. git到本地,或者下载zip包解压

  2. 进入manster_server目录
    在这里插入图片描述

  3. 在路径栏输入cmd
    在这里插入图片描述

  4. npm start开启服务

  • 可能会提示nodemon不是内外部程序,则通过npm install -g nodemon解决
  • 找不到 module(双引号出现什么单词,就 npm install 那个单词,或者直接 npm install)

在这里插入图片描述

  1. 用微信开发者工具打开manster云音乐文件夹

打开以后不是这样就会报错 app.json

在这里插入图片描述

使用说明
  1. 首先要安装有nodejs,我下载的是14.9.0,npm是6.14.8 安装教程

  2. 然后安装有微信小程序开发者工具,我使用的是1.03

  3. 使用详情可参考微信官网给出的起步

  4. 导入项目以后记得在本地配置中勾选

    • ES6 转 ES5
    • 增强编译
    • 使用npm模块
    • 不校验合法域名、web-view(业务域名)、TLS版本以及 HTTPS 证书
    • 在这里插入图片描述
  5. 点击观看视频报错

TypeError: Cannot read property 'length' of undefined

获取视频资源需要用户进行登录,登录校验完成后才可以获得加载视频的权限

目前没有做注册的功能,网易云需要用户自己去设置一个密码,然后才能进行登录(已有的api中不支持验证码登录)

  1. 如果要进行真机调试,需要改变 utils/config.js 里面的 ip 和 request.js中的 url:config.host + url 对应起来,如果只是要自己调试玩一下的话建议使用 uTools 的内网穿透,详情自己百度(utools为了安全把这个功能删了,大家可以试试花生壳)

  2. 这里给出使用 ngrok 的免费内网穿透

    https://blog.csdn.net/qq_45803593/article/details/125134555

    真机调试时将 utils/config.js 里面的 mobileHost 换为 ngrok 映射的 url,并将 request.js 中的 url 改为 url:config.mobileHost + url 即可

预览效果如下
初始页面

在这里插入图片描述

登录页面

在这里插入图片描述

个人中心页面

在这里插入图片描述

推荐歌曲页面

在这里插入图片描述

视频页面

在这里插入图片描述

热搜页面

在这里插入图片描述

搜索列表

在这里插入图片描述

历史搜索记录

在这里插入图片描述

歌曲详情页面

在这里插入图片描述

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值