微信小程序开发之——录像添加计时功能

一 概述

录制前	录制中	录制结束

二 计时功能

2.1 定时器介绍

2.1.1 设置定时器(setInterval)

number setInterval(function callback, number delay, any rest)

设置定时器后，返回一个number，根据这个number，传递给clearInterval来取消该定时

2.1.2 取消定时器(clearInterval)

clearInterval(number intervalID)

取消由 setInterval 设置的定时器

2.2 定时器示例

2.2.1 页面布局(index.wxml)

<view>
  <label>{{min}}:{{sec}}</label>
</view>
<button type="primary" bindtap="start">开始</button>
<button type="primary" bindtap="end">结束</button>

2.2.2 样式文件(index.wxss)

view {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 10rpx;
}

2.2.3 逻辑文件(index.js)

Page({
  data: {
    min: '00',
    sec: '00',
    intervalNum: 0
  },
  start() {
    this.queryTime()
  },
  end() {
    debugger;
    clearInterval(this.data.intervalNum);
  },
  queryTime() {
    const that = this;
    var min = that.data.min;
    var sec = that.data.sec;
    that.data.intervalNum = setInterval(() => {
      sec++;
      if (sec >= 60) {
        sec = 0;
        min++;
        that.setData({
          min: (min < 10) ? '0' + min : min
        })
      } else {
        that.setData({
          sec: (sec < 10) ? '0' + sec : sec
        })
      }
    }, 1000);
  }
})

2.2.4 效果图

三 将计时器添加到录像

3.1 录像开始前隐藏隐藏显示(根据秒是否开始计时)

<view class="container-top" hidden="{{sec=='00'}}">
    <label>{{min}}:{{sec}}</label>
  </view>

3.2 录像开始后时间的颜色及大小

.container-top label{
  color: red;
  font-size: x-large;
}

3.3 开始录像及结束录像时计时器的操作

3.3.1 开始计时(录像)

this.ctx.startRecord({
  success: () => {
         this.queryTime();
     }
  })

3.3.2 结束录像(计时)

this.ctx.stopRecord({
    success: (res) => {
    clearInterval(this.data.intervalNum);
    console.log(res);
     this.setData({
            src: res.tempThumbPath,
            videoSrc: res.tempVideoPath
          })
   }
 })

四 参考

• CSDN下载-计时器