小程序-分享菜单列表与音乐播放

View Post

 onShareTap: function(event) {
    // //缓存最大不能超过10m，如果不删除就是永久存在的
    // wx.removeStorageSync(\'key\');//个别删除
    // wx.clearStorageSync();//全部删除

    const itemList = [
      \'分享给好友\',
      \'分享到朋友圈\',
      \'分享到QQ\',
      \'分享到微博\'
    ]

    //操作菜单列表
    wx.showActionSheet({
      itemList: itemList,
      itemColor:\'#405f80\',
      success:function(res){
           wx.showModal({
             title: \'用户\' + itemList[res.tapIndex],
             content: \'用户是否取消？\' + res.errMsg+\'现在还不能实现分享功能\',
           })
      }
    })
  },

音乐播放功能

首先要有个标识，播放显示播放图标，暂停显示暂停图标

  /**
   * 页面的初始数据
   */
  data: {
    currentPostId: 0,
    collected: false,
    isPlayMusic:false
  },

<image 
  class=\'audio\' 
  src="{{isPlayMusic?\'/images/music/music-stop.png\':\'/images/music/music-start.png\'}}"
  catchtap=\'onMusicTap\'
  ></image>

音乐开始播放

  onMusicTap: function (event){
  //获取当前详情页的数据
    var postData = postsData.postList[this.data.currentPostId]
//获取当前音乐是否播放着
    var isPlayMusic = this.data.isPlayMusic;
    if (isPlayMusic){
     //如果播放着就停止播放
      wx.pauseBackgroundAudio();
      this.setData({
        isPlayMusic:false
      })
    }else{
     //没有播放就开始播放
      wx.playBackgroundAudio({
        dataUrl: postData.music.url,//获取当前页的音乐信息
        title: postData.music.title,
        coverImgUrl: postData.music.coverImg
      })
      this.setData({
        isPlayMusic: true
      })
    }

  }

播放音乐的小bug

第一种，模拟器的播放会跟页面的播放按钮不同步

解决：在obload周期函数中监听状态

  setMusicMonitor:function(){

    const self = this;
//音乐播放监听，如果播放着，就同步按钮的状态
    wx.onBackgroundAudioPlay(function () {
      self.setData({
        isPlayMusic: true
      })
//给全局属性赋值，解决第二种bug
//详情页播放着然后退出来，再进去，播放按钮为没播放状态，实际上音乐还在播放状态，原因是，在进入页面的时候，重新加载了播放标识，为false，
//解决方法是，设置一个全局属性，控制 变量
      globalData.g_isPlayMusic = true;
//给全局属性赋值，解决第三种bug
//第一个播放着然后退出，到第二个里面，他的状态也是播放的，所以要记录具体播放的是那个
      globalData.g_currentMusicPostId = self.data.currentPostId;
    })
    wx.onBackgroundAudioPause(function () {
      self.setData({
        isPlayMusic: false
      })
      globalData.g_isPlayMusic = false;
      globalData.g_currentMusicPostId = null;
    })
  },

  //在onload周期函数中这样使用
//当音乐在播放状态，并且当前播放的音乐id等于你点击进来的id，这时候你进来的时候音乐播放按钮是正在播放的状态，否则不变，因为数据重新加载的时候就是false，未播放状态

  if (globalData.g_isPlayMusic && globalData.g_currentMusicPostId === this.data.currentPostId){
      this.setData({
        isPlayMusic:true
      })
    }

View Post

小程序-分享菜单列表 与 音乐播放

小程序-分享菜单列表与音乐播放