今天想要分享的一个项目是作者自己在暑假实训期间制作的一款仿网易音乐的音乐播放小程序，将会为大家展示小程序的具体功能以及实现代码，比较适合前端初学者拿来参考。（本人也是技艺不精，若有说的不对的地方，望指摘，勿喷，友好交流）

本项目已经重新设计与改写，后续博主将另外开贴详细写新项目的各个模块和实现细节，等所有功能优化完，会将项目开源上传。希望大家能够继续支持！！！

一、项目介绍

本音乐播放小程序有歌曲列表，个人信息，搜索三个模块

二、小程序的效果图

歌曲列表界面：

这部分相当于一个简易的首页部分，包含轮播图，歌曲列表，搜索框按钮，点击搜索框按钮就会发生跳转，然后跳转到搜素界面

搜索界面：

这部分是搜索界面，在搜索框内输入想要搜索的歌曲或者歌手就会跳转到歌曲列表界面，然后在轮播图的下面展示出搜索的结果

歌曲播放界面：

点击歌曲列表后面的播放按钮就可以跳转到歌曲的播放界面并进行播放，歌曲播放界面有暂停，上一首，下一首，随机播放，单曲循环等功能

歌词滚动界面：

歌曲播放界面向左滑动便可以到达歌词部分，根据歌曲进度使对应的歌词部分显红

个人信息界面：

该部分是个人信息界面

三、部分代码实现

歌曲列表部分的：

// index.js
[ ] // 获取应用实例
const app = getApp()

Page({
  data: {
    // 轮播图数组
    'swiperList':[{
      'goods_id':'1',
      'image_src':'/images/lunbo/lunbo1.jpg',
      'open_type':'navigate'
    },
    {
      'goods_id':'2',
      'image_src':'/images/lunbo/lunbo2.jpg',
      'open_type':'navigate'
    },
    {'goods_id':'3',
      'image_src':'/images/lunbo/lunbo3.jpg',
      'open_type':'navigate'
    }
  ] ,
  //歌曲数组
  songs:[],
// 定义歌曲的数组

  },
  onLoad: function (options) {
    
  },

  onShow(){
    const app=getApp()
    
    let songs=app.globalData.data
    console.log(songs);
    this.setData({
      songs,
    })

  },
  // 点击事件函数
  gotoplay:function(e){
    var id = e.currentTarget.dataset.id;
    // 定义一个空数组
    var ids = [];
    // 遍历歌曲列表
    for(var i=0;i<this.data.songs.length;i++){
      ids.push(this.data.songs[i].id);
    }
    console.log("点击事件进入的方法");
    wx.navigateTo({
      url:'/pages/paly/play?mid='+ id + "&ids=" + ids,
    })
  }
})

最后，说一下本人的学习心得，前端相关学习视频推荐，b站黑马程序员pink老师系列，本人认为作为前端的初学者来说，pink老师的课风趣幽默，技术知识点讲的非常细致，其他的同学们可以去参考看看。