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

一、项目简介

此小程序以网易云音乐为原型进行项目构建，使用网易云音乐真实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: [