记录微信小程序开发遇到的坑

 

首先微信小程序想要用dudio做自定义播放样式是不可能的，所以就要调用官方给的api 而音频api还分为了两个。

InnerAudioContext

这个不会在侧边产生一个浮动窗

BackgroundAudio

这个会在侧边产生浮动窗个人感觉兼容性很好

首先 InnerAudioContext 在ios 配置src 会有一个中文字符不识别 会导致ios无法播放 调配相关api 解决方案如下

 

innerAudioContext.src = encodeURI(music);//iso兼容 可能无法识别 中文字符

在音频开始获取总时长获取总时长第二次进去无法获取 在 onCanplay 不要用一次性定时器

组件用observer 千万不要用setData改这个值 否则死循环预定

允许视频快进 在90%解锁按钮 这里面参考了大神的逻辑

 

  //监听视频播放进度
  timeUpdate: function(e) {
    var fastForward = 1; // 是否开启可以视频快进 1 禁止开启
    //跳转到指定播放位置 initial-time 时间为秒
    let that = this;
    //播放的总时长
    var duration = e.detail.duration
    //实时播放进度 秒数
    // console.log(e.detail.currentTime)
    //  当前
    // 获取结束时间
    var endTime = e.detail.duration
    // 获取结束时间前90%
    var endTimeNinety = endTime * 0.9
    //  实时进度
    var currentTime = parseInt(e.detail.currentTime)
    let playProgress = parseInt(currentTime/endTime*100) //视频进度百分比
    that.setData({
      videoStudyTime: playProgress,
    })

    //当前视频进度
    if (that.data.video_real_time == 0) {
      var jump_time = parseInt(that.data.initial_time) + parseInt(that.data.video_real_time)
    } else {
      var jump_time = parseInt(that.data.video_real_time)
    }
    let entrance = that.data.entrance
    let videoStatus 
    if(entrance == 0){
      videoStatus = 3
    }else{
       videoStatus = that.data.scheduleStatus.videoStatus
    }

   
  
    if (  videoStatus < 2 ) {
      if (currentTime > jump_time && currentTime - jump_time > 3) {
        let videoContext = wx.createVideoContext('myVideo')
        videoContext.seek(that.data.video_real_time)
        wx.showToast({
          title: '请完整看完该视频，不能快进',
          icon: 'none',
          duration: 2000,
        })
      }
    }

    // 到90显示按钮
    if (jump_time > endTimeNinety) {
      if (currentTime < jump_time && currentTime - jump_time < 3) {} else {
        that.setData({
          ninety: 2,
        })
      }
    }
    that.setData({
      video_real_time: currentTime, //实时播放进度
    })

  },

 

　　小程序函数防抖（参考了大神的写法）

function throttle(fn, gapTime) {
if (gapTime == null || gapTime == undefined) {
gapTime = 1500
}

let _lastTime = null
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn.apply(this, arguments) //将this和参数传给原函数
_lastTime = _nowTime
}
}
}

 使用

 submitBtn:  utils.throttle(function (e) {}, 3000),

刚接触小程序感觉有些地方很好但是坑也是一如既往的多 代码写的不是太好 请多见谅

其实坑还有很多 开发完了 也没有太多时间复盘 后续有空在更