相关学习推荐：微信小程序教程

前言

笔者前端小兵一枚，在学习了一段时间的小程序后，决定亲自动手做一款模仿一款手机软件来练手，自己平常也热爱音乐，并且发现各家的音乐平台的小程序都比较简单，于是就选择了这个方向来进行模仿学习，在这个过程中也遇到了很多问题，在解决这些问题后，也有了一些收获，今天就来和大家分享在这个小程序中，最难的音乐播放这一部分的种种问题和解决。

首先，先感谢本项目的api提供者binaryify
选择这个项目，也是因为后端api有大佬提供了，需要数据的时候只用发起一些接口请求就可以了，比较适合像我这样的初学者入门，只用写一些简单的前端逻辑就可以了。

由于播放页面需要处理的事情较多（例如歌词的处理与展示、进度条的快进快退等等），并且坑比较多，为了尽可能的描述清楚，所以本篇文章主要着重介绍和音乐播放有关的种种操作，有关于本项目其他页面的详情介绍，将放在后续文章进行详细叙述，感谢各位读者大大的理解。

项目界面预览：

git地址

github.com/shengliangg…

云村和视频模块目前还没有开发，后续有时间就写，本项目会不定期更新，日后有时间就写一篇项目使用文档

正式开始

有关于音乐播放的几个接口请求中，几乎都需要携带歌曲 id，在本项目的所有页面中，播放页面作为一个独立的页面存在，当别的页面跳转到播放页面时，都会携带歌曲 id

接口封装

本项目使用的接口请求有点多，为了方便，我将其封装在utils文件夹中的api.js文件中，再在页面中引用接口管理文件。

// method(HTTP 请求方法)，网易云API提供get和post两种请求方式
const GET = 'GET';
const POST = 'POST';
// 定义全局常量baseUrl用来存储前缀
const baseURL = 'http://neteasecloudmusicapi.zhaoboy.com';

function request(method, url, data) {
  return new Promise(function (resolve, reject) {
    let header = {    //定义请求头
      'content-type': 'application/json',
    };
    wx.request({
      url: baseURL + url,
      method: method,
      data: method === POST ? JSON.stringify(data) : data,
      header: header,
      success(res) {
        //请求成功
        //判断状态码---errCode状态根据后端定义来判断
        if (res.data.code == 200) {  //请求成功
          resolve(res);
        } else {
          //其他异常
          reject('运行时错误,请稍后再试');
        }
      },
      fail(err) {
        //请求失败
        reject(err)
      }
    })
  })
}

const API = {
  getSongDetail: (data) => request(GET, `/song/detail`, data),  //获取歌曲详情
  getSongUrl:(data) => request(GET, `/song/url`, data),  //获取歌曲路径
};
module.exports = {
  API: API
}复制代码