简单的仿网易云音乐小程序（二）

最新推荐文章于 2024-09-12 08:04:07 发布

时闻折竹

最新推荐文章于 2024-09-12 08:04:07 发布

阅读量758

点赞数 1

分类专栏：小程序文章标签：小程序 javascript html 前端

本文链接：https://blog.csdn.net/ZeroSwift/article/details/109427019

版权

本文详细介绍了在微信小程序中创建音乐播放界面的过程，包括如何从音乐列表跳转到播放界面，利用API.js进行网络请求，以及使用小程序内置的音乐播放器组件播放、控制音乐。在音乐播放界面，通过监听滑动条事件来调整播放进度，同时实现了上一首和下一首歌曲的切换功能。

摘要由CSDN通过智能技术生成

前言

在本篇博文中，我们主要对音乐播放界面和api.js组件进行学习。

音乐播放界面

我们先回顾以下，如何从音乐列表界面跳转到音乐播放界面。

wx.navigateTo({
   
  url: "../audioPage/audioPage?musicindex=" + parseInt(e.currentTarget.dataset.musicindex)
});

当点击音乐列表的某一项时，会调用该导航跳转函数进行跳转，并且以musicindex作为传入的参数。其中e.currentTarget.dataset.musicindex为在wxml页面传入的参数。
故接下来，我们看到audioPage页面。当跳转到audioPage页面时，除了数据到初始化，首先会调用该系统生命周期函数，而这个函数能够解析得到跳转过程中所携带到参数。

/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   
   // options中携带有跳转时传入的参数
   this.setData({
   
     musicListArr: app.globalData.musicListArr,
     musicIndex: options.musicindex,
     musicduration: options.duration || 0
   })
   // 设置页面高度
   wx.getSystemInfo({
   
     success: res => {
   
       this.setData({
   
         innerHeight: res.windowHeight
       })
     },
   })
   // 开始播放
   this.palyMusic();
 },

开始播放代码如下，即获取歌曲封面和持续时间，并使用播放器组件进行一些设置

// 开始播放
palyMusic() {
   
  // 从音乐列表中取出当前index对应的音乐
  let cerrentMusic = this.data.musicListArr[parseInt(this.data.musicIndex)];
  // 构建播放器的播放地址
  player.src = `https://music.163.com/song/media/outer/url?id=${
     cerrentMusic.id}.mp3`;
  // 初始化播放器的名字
  player.title = cerrentMusic.name;
  // 来自于歌单</