zoukankan      html  css  js  c++  java
  • 小程序-分享菜单列表 与 音乐播放

     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
          })
        }
  • 相关阅读:
    web服务器-Apache
    nginx优化
    nginx下载限速
    nginx-URL重写
    HDU 5358 First One 求和(序列求和,优化)
    HDU 5360 Hiking 登山 (优先队列,排序)
    HDU 5353 Average 糖果分配(模拟,图)
    UVALive 4128 Steam Roller 蒸汽式压路机(最短路,变形) WA中。。。。。
    HDU 5348 MZL's endless loop 给边定向(欧拉回路,最大流)
    HDU 5344 MZL's xor (水题)
  • 原文地址:https://www.cnblogs.com/joer717/p/10609071.html
Copyright © 2011-2022 走看看