仿网易云音乐的小程序项目（粗糙版）_音乐小程序项目简历-优快云博客

前言

通过github拉取下的后台服务器，根据接口文档，调用真实的网易云音乐数据，独立开发而成，收获很多完成了：

每日推荐的歌曲，歌单，视频页面，账号登陆的展示数据信息功能
歌曲和视频的播放切换，进度条实时跟进功能
视频区下拉刷新，模糊搜索歌曲功能

开发完成后最大的感受就是一定要会看，会查微信小程序的官方API文档，出bug时首先检查语法是否正确（刚入门比较容易犯拼写错误），根据控制台给错的错误信息定位到相应文件，进行逻辑检查，注意后端返回的数据类型和和格式转换，看清接口文档明白后端要接收到的实际参数！！

微信小程序官方文档

网易云接口调用文档

视频演示

源码

页面预览：
在这里插入图片描述

功能介绍：获取诸如每日推荐的静态数据

诸如上述的每日轮播图，歌曲，歌单数据，获取方式十分简单，只需要参考调用文档，发送GET数据请求，解析收到的数据，将需要的信息展示到预先设好的图片插槽上即可。

在相应模块中的js文件里设置存放诸如每日轮播图，歌曲，歌单数据的数组

 data: {
   
   
    // 轮播图数据
    bannerList: [],
    // 精心推荐歌单数据
    recommendList: [],
    // 排行榜数据
    topList: [],
  },

然后在onLoad声明周期函数中，调用接口（注意文档所要求携带的参数），获取数据，将接口返回的数据通过setData方法保存至刚设置的数组里。

 onLoad: async function (options) {
   
   
    let bannerListData = await request('/banner', {
   
    type: 2 });
    this.setData({
   
   
      bannerList: bannerListData.banners
    })

    // 获取推荐歌单数据
    let recommendListData = await request('/personalized', {
   
    limit: 10 });
    this.setData({
   
   
      recommendList: recommendListData.result
    })

    // 获取排行榜的数据
    let index = 0;
    let resultArr = [];
    while (index < 5) {
   
   
      let topListData = await request('/top/list', {
   
    idx: index++ });
      let topListItem = {
   
    name: topListData.playlist.name, tracks: topListData.playlist.tracks.slice(0, 3) }
      resultArr.push(topListItem);
      this.setData({
   
   
        topList: resultArr
      })
    }
  },

最后通过插槽展示出来，对于一些组件，可以添加官方给出的样式属性，让布局的交互效果更佳。

 <!-- 轮播图区域 添加的属性：自动播放，切换时间间隔，下方小圆点 -->
  <swiper autoplay interval="4000" class="banners" indicator-dots="true" indicator-color="ivory" indicator-active-color="#d43c33">
    <swiper-item wx:for="{
   
   {bannerList}}" wx:key="bannerId">
      <image src="{
   
   {item.pic}}"