微信小程序项目实战篇——基于WYY音乐真实接口开发的音乐小程序-CSDN博客

本文链接：https://blog.csdn.net/m0_52435951/article/details/123023218

该博客介绍了如何使用微信小程序开发一款类似网易云音乐的应用，涵盖了事件、数据绑定、路由等核心知识点，并提供了项目结构、开发工具、代码示例和运行指南。项目使用了Nodejs后端，实现了音乐和视频播放、CSRF防护等功能。

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

文章目录

一、项目简介
二、项目结构
三、开发工具
四、项目截图
五、项目地址
六、部分代码
七、项目运行
八、特别声明

一、项目简介

此小程序以网易云音乐为原型进行项目构建，使用网易云音乐真实API接口数据，且最终效果同网易云音乐App保持一致。
内容从基础到高级，涵盖小程序常用的所有知识点，包括：事件、数据绑定、路由、自定义组件、自定义模板、音乐播放、视频播放、性能优化及项目上线前分包操作等。可以快速上手小程序开发，真正做到从入门到精通！
Nodejs作为后端，跨站请求伪造 (CSRF), 伪造请求头 , 调用官方 API
网易云音乐NodeJS版API
使用ES6语法
使用promise对象进行异步请求资源
使用moment.js进行时间日期处理
使用pubsub.js消息的发布订阅，进行组件间数据的传递

二、项目结构

XuSHengYun_music // 虚神云音乐
├── components // 组件
├── XuSHengYun_api_server // node版本网易云音乐接口
├── pages // 小程序页面
│ └── index // 首页
│ └── login // 登录页
│ └── personal // 个人中心
│ └── recommendSong // 每日推荐
│ └── search // 搜索页
│ └── songDetail // 音乐详细页
│ └── songListDetail // 歌单页
│ └── video // 视频页
├── utils // 工具
│ └── request.js // 请求封装体
├── static // 静态资源

三、开发工具

wechat_devtools_1.02.1911180_x64
在这里插入图片描述
工具获取地址：
链接：https://pan.baidu.com/s/1IuotjQTt4vGOKBrGBl_ftg
提取码：vvoz

四、项目截图

（1）主页面
在这里插入图片描述

（2）视频页面
在这里插入图片描述

（3）个人页面
在这里插入图片描述

（4）推荐页面
在这里插入图片描述

（5）播放页面
在这里插入图片描述

五、项目地址

https://gitee.com/master-xu-shen/xu-sheng-cloud-music
在这里插入图片描述

六、部分代码

// pages/index/index.js
import request from "../../utils/request";
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    bannerList: [], // 轮播图数据
    recommendList: [], // 推荐歌单
    topList: [], // 排行榜数据
    listIndex: 0, // 哪个排行榜
    musicIndex: 0, // 哪个音乐
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
   
    /*wx.request({
   
      url:'http://localhost:3000/banner',
      data: {
   type: 2},
      success:(res)