程序员经验分享-hwhale

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

2023-11-16

代码地址： 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 即可

预览效果如下
初始页面

在这里插入图片描述

登录页面

在这里插入图片描述

个人中心页面

在这里插入图片描述

推荐歌曲页面

在这里插入图片描述

视频页面

在这里插入图片描述

热搜页面

在这里插入图片描述

搜索列表

在这里插入图片描述

历史搜索记录

在这里插入图片描述

歌曲详情页面

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

项目

微信

微信小程序

小程序

前端

基于微信小程序的manster云音乐小程序 的相关文章

  • 事件委托Tab栏切换

  • Firefox浏览器-渗透测试插件推荐

    在日常工作中可能需要一些浏览器插件辅助我们做工作 下面是比较好的 当然不一定对你有用 找到适合自己的即可 FoxyProxy FoxyProxy是一个高级的代理管理工具 它完全替代了Firefox有限的代理功能 它提供比SwitchProx

  • CMAKE_MAKE_PROGRAM is not set 解读

    目录 CMAKE MAKE PROGRAM 未设置 错误原因 解决方案 示例1 GNU Make 示例2 Ninja CMakeLists txt 的结构 示例 CMakeLists txt 文件 总结 CMAKE MAKE PROGRAM

  • CTF之逆向入门

    逆向工程 Reverse Engineering 又称反向工程 是一种技术过程 即对一项目标产品进行逆向分析及研究 从而演绎并得出该产品的处理流程 组织结构 功能性能规格等设计要素 以制作出功能相近 但又不完全一样的产品 逆向工程源于商业及

  • JS特效第74弹：旅游城市图片百叶窗切换React特效

    全屏的旅游城市景点图片滑动百叶窗轮播切换效果 先来看看效果 一部分关键的代码如下 div div

  • 接口测试之Fiddler弱网测试

    前言 目前市面上的APP功能越来越丰富 移动端测试也越显为重要 因为用户在网速慢的情况下 你的网站 软件 总能出现各种各样的问题 请不要忽略这一点 针对在不同的网络情况下 接下来 本篇要讲述的就是在通过fiddler对APP进行模拟弱网测试

  • 如何创建微信小程序？高效实现你的创意

    在数字化浪潮下 微信小程序以其便捷高效的特点逐渐成为人们日常生活与商业活动的重要载体 有很多人却被难住 若没有没有编程经验 如何创建微信小程序 答案是通过合理利用工具 让创意迅速落地为功能完备的小程序 一 前期准备阶段 1 注册微信公众号平

  • 38条Web测试经验分享

    1 页面链接检查 每一个链接是否都有对应的页面 并且页面之间切换正确 可以使用一些工具 如LinkBotPro File AIDCS HTML Link Validater Xenu等工具 LinkBotPro不支持中文 中文字符显示为乱码

  • 每天10个前端小知识 ＜Day 6＞

    前端面试基础知识题 1 使用js实现二分查找 二分查找 也称为折半查找 是指在有序的数组里找出指定的值 返回该值在数组中的索引 查找步骤如下 从有序数组的最中间元素开始查找 如果该元素正好是指定查找的值 则查找过程结束 否则进行下一步 如果

  • Android SDK开发艺术探索（五）安全与校验

    一 前言 本篇是Android SDK开发艺术探索系列的第五篇文章 介绍了一些SDK开发中安全方面的知识 包括资源完整性 存储安全 权限校验 传输安全 代码混淆等知识 通过基础的安全配置为SDK保驾护航 探索SDK开发在安全方面的最佳实践

  • 思政课程如何提升学习效率？这个方法分享给你

    在当今社会 思政学习具有重要的意义 思政通学习小程序为我们提供了一个优质的学习平台 通过不断深入思考和学习 我们能够更好地认识社会 提升自我素质 客户案例 陈同学 思政通学习小程序提供了涵盖政治 经济 文化 科技等多个领域的学习内容 使我能

  • 【计算机毕业设计】毕业生就业管理微信小程序_lm9q0

    腾讯公司在2017年1月19日发布了一款不需要下载 不需要卸载 不需要存储的软件叫微信小程序 受到了很多人的喜欢 微信小程序自2017年发布至今 依托微信的社交属性和庞大的用户基数 已经渗透到生活的方方面面 1 微信小程序可以将基于微信平台

  • 【计算机毕业设计】北京医疗企业固定资产管理系统的设计与实现 _4c4c1

    近年来 人们的生活方式以网络为主题不断进化 北京医疗企业固定资产管理就是其中的一部分 现在 无论是大型的还是小型的网站 都随处可见 不知不觉中已经成为我们生活中不可或缺的存在 随着社会的发展 除了对系统的需求外 我们还要促进经济发展 提高工

  • 低代码-详情页组件设计

    效果图 详情页数据结构定义 layout 按钮数据 buttonLayout headButton 页头按钮 footButton 页脚按钮 详情页表单配置 config 配置组件列表 detailLayout 默认行为 进表单初始化 只展

  • Vue 如何使用WebSocket与服务器建立链接 持续保持通信

    WebSocket 浏览器通过JavaScript向服务器发出建立WebSocket链接的请求 链接建立后 客户端和服务器端就可以通过TCP链接直接交互数据 WebSocket链接后可以通过 send 方法来向服务器发送数据 并通过 onn

  • JVM优化之 -Xss -Xms -Xmx -Xmn 参数设置

    JVM优化之 Xss Xms Xmx Xmn 参数设置 XmnXmsXmxXss有什么区别 Xmn Xms Xmx Xss都是JVM对内存的配置参数 我们可以根据不同需要区修改这些参数 以达到运行程序的最好效果 Xms 堆内存的初始大小 默

  • Web自动化测试 —— cookie复用

    一 cookie简介 cookie是一些数据 存储于用户电脑的文本文件中 当web服务器想浏览器发送web页面时 在链接关闭后 服务端不会记录用户信息 二 为什么要使用Cookie自动化登录 复用浏览器仍然在每次用例开始都需要人为介入 若用

  • 每天10个前端小知识 ＜Day 14＞

    前端面试基础知识题 1 CSSOM树和DOM树是同时解析的吗 浏览器会下载HTML解析页面生成DOM树 遇到CSS标签就开始解析CSS 这个过程不会阻塞 但是如果遇到了JS脚本 此时假如CSSOM还没有构建完 需要等待CSSOM构建完 再去

  • 获取年与年之间的所有年份

    function getYearsBetween startYear endYear var years 存放结果的数组 for var year startYear year lt endYear year years push year

  • 如何在 Python 脚本中使用 Google OAuth2

    在使用 Python 脚本将视频上传到 YouTube 频道时 若希望将视频上传到第二个频道 需要解决 OAuth2 授权的问题 解决方案 创建新的 Google Cloud 项目 from google oauth2 import ser

随机推荐

  • 内存颗粒和闪存颗粒的区别_NAND Flash闪存颗粒与SSD知识深度解析

    谈闪存 须从Wafer开始 Wafer即晶圆 是半导体组件 晶片 或 芯片 的基材 从沙子里面高温拉伸生长出来的高纯度硅晶体柱 Crystal Ingot 上切下来的圆形薄片称为 晶圆 采用精密 光罩 通过感光制程得到所需的 光阻 再对硅材

  • Android开发之EditText 详解(addTextChangedListener监听用户输入状态)

    为了实现像qq或者微信输入框的效果 当在EditText输入字符串时发送按钮显示 当输入框字符消除掉时按钮改变 所以这时候我就要用到addTextChangedListener 用它来监听用户输入状态 可以在监听中改变用户输入的内容或者提示

  • python读取和生成excel文件

    今天来看一下如何使用python处理excel文件 处理excel文件是在工作中经常用到的 python为我们考虑到了这一点 python中本身就自带csv模块 今天来看一下如何使用python处理excel文件 处理excel文件是在工作

  • 对象池（连接池）：commons-pool2源码解析：GenericObjectPool的继承结构、构造方法

    概述 GenericObjectPool是apache commons pool 源码分析基于commons pool2 框架中的一个非常重要的类 解析GenericObjectPool就有必要先了解一下apache commons poo

  • 图文并茂开发AR小游戏全教程(二)

    需要识别卡 AR游戏 这个是不需要识别卡的 可放大缩小 旋转 感应重力偏移 可自行下载项目运行到真机上演示由于项目以及下文用到的素材较大 GItHub 无法上传 故传到百度云LLGameAR二 1 创建一个新场景 然后将新的场景保存成 Sc

  • 内网穿透——SSH远程连接树莓派

    前言 文章目录 前言 内网穿透实现公网SSH远程连接树莓派 1 在树莓派上安装 cpolar客户端 https www cpolar com 2 在树莓派浏览器中输入本地9200端口 3 在公共互联网的电脑的命令行界面输入命令 内网穿透实现

  • Python注释方式有哪些

    注释是对一段代码的解释和说明 可提高程序代码的可读性 让人们能够更加轻松地了解代码 尤其在大型项目开发和团队项目中 注释是必不可少的 任何编程语言都少不了注释 Python也不例外 以下是Python注释的具体用法 1 单行注释 Pytho

  • 抖音矩阵号系统搭建，企业同时管理1000+账号的基础逻辑

    短视频矩阵号系统开发功能涵盖 1 AI视频剪辑 2 创意灵感 3 多账号矩阵管理 4 视频排名优化 5 视频投放 6 企业号智能营销 6 AI视频拓客 7 企业员工管理等 开发思维导图如下 源码开发所需服务器配置 及环境 1 规格 最低4核

  • qt day1

    实现图形化登录界面 include myhomework h include

  • CUDA 动态链接库与静态链接库

    参考 CUDA C BEST PRACTICES GUIDE chapter 15 PREPARING FOR DEPLOYMENT 关于部署CUDA加速的程序时 往往对CUDA加速的程序编译为动态链接库或者静态链接库 这两者导致的区别是

  • python 8行代码搞定 AES加解密

    python 实现AES加解密相关的知识 可以参考以下文章 python实现AES加密解密 但该文章中 对于加密前数据的补全 及解密后去掉多余数据 由作者自己进行了封装 导致代码较为复杂 实际可以使用库中pad和unpad来解决该问题 而使

  • vue中实现高德地图上打点，并添加点击事件，

    文章目录 1 在地图上打点 并定义 click 事件 2 数据由websocket订阅 后台实时推送 3 实时失效 1 在地图上打点 并定义 click 事件 地图上打点 并定义click事件 param map map对象 param i

  • iviewui中表格控件中render的使用示例

    示例了如何在表格中显示按钮 如何将代码转化为文字 iviewui新版本中 如果内容转化输出时 如果不使用render函数 会显示不正常 老版本不存在这个问题

  • 阿里分布式事务框架-seata源码分析

    详细可参考 AT下流程图 TCC下流程图 基于该流程图可大致了解seata中TC TM RM这3个角色在seata框架中的作用 以及两种模式的优缺点

  • 数学建模常用模型（六）：时间序列预测

    数学建模常用模型 六 时间序列预测 时间序列预测是数学建模中的一个重要领域 用于预测时间序列数据中未来的趋势和模式 时间序列预测可以帮助我们了解数据的演变规律 做出合理的决策和规划 这是我自己总结的一些代码和资料 本文中的代码以及参考书籍等

  • 移动Web应用的性能及其未来趋势

    在一篇深入的实质性文章中 某iOS开发公司的老板Drew Crawford表示他认为目前移动Web应用运行迟缓 而且并不指望能在不久的将来看到重大改善 并列出了以上观点的全部原因 该文章是此前某篇博客文章的后续之作 在那篇文章中 他指出 与

  • el-select 点击输入框不弹出选项的下拉框

    el select 点击输入框不弹出选项的下拉框 重点是绑定click事件 用它的event判断点击的是输入框还是下拉箭头 如果是输入框 就让它失去焦点 就不会弹出选项的下拉框

  • JSTL在JSP页面上的使用

    1 JSTL标准标签库 JSTL JSP标准标签库 JSTL 是一个JSP标签集合 它封装了JSP应用的通用核心功能 JSTL支持通用的 结构化的任务 比如迭代 条件判断 XML文档操作 国际化标签 SQL标签 除了这些 它还提供了一个框架

  • QNX的应用移植迁移到Linux

    如果你认为本系列文章对你有所帮助 请大家有钱的捧个钱场 点击此处赞助 赞助额1元起步 多少随意 author 锋影 e mail 174176320 qq com 近年来许多嵌入式产品将是公司从自营到开放源代码平台为他们提供更多灵活性和成本

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

    代码地址 https gitee com manster1231 master cloud music 介绍 基于网易云音乐真实接口开发的音乐小程序 软件架构 Nodejs作为后端 跨站请求伪造 CSRF 伪造请求头 调用官方 API 网易

热门标签