小程序-音乐播放器 showActionSheet的使用

最新推荐文章于 2025-06-08 09:36:11 发布

原创最新推荐文章于 2025-06-08 09:36:11 发布 · 485 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个小程序中实现音乐播放功能的具体方法，包括使用showActionSheet显示弹窗供用户选择歌曲及利用wx.playBackgroundAudio进行音乐播放的过程。通过具体代码展示了如何获取用户选择的歌曲并进行播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序实现简单的音乐播放功能：

1，showActionSheet显示下侧弹窗效果

2，wx.playBackgroundAudio实现音乐播放

先看实现的效果：

 代码如下：

 showAction:function(){
    wx.showActionSheet({
      itemList: this.data.items,
      success: function (res) {
        console.log(res.tapIndex)
      },
      fail: function (res) {
        console.log(res.errMsg)
      }
    })
  },
  itemClick:function(e){
    console.log(e);
    var position=e.target.id;
    console.log(position);
    var imgurl=this.data._songsList[position].coverImgUrl;
    var name = this.data._songsList[position].name;
    var dataUrl = this.data._songsList[position].dataUrl;
    console.log(this.data._songsList[position]);
    this.setData({
      currentImage: imgurl,
      currentName: name
    });
    //播放音乐
    wx.playBackgroundAudio({
      dataUrl: dataUrl,
      title: name,
      coverImgUrl: imgurl
    })
  }

demo下载地址