微信小程序定时器详解

发布时间：2023-05-18

微信小程序定时器介绍

微信小程序定时器是一种能够帮助开发者自动执行任务的功能，包括间隔执行某个函数、定时更新页面等。 微信小程序定时器的核心是inter，通过设置定时器id和时间间隔，可以轻松实现对应的定时操作。除了使用原生inter，也可以借助微信小程序自带的组件库进行定时器操作。 下面我们将从不同的角度详细讲解微信小程序定时器的使用方法和技巧。

微信小程序如何关闭定时器

关闭微信小程序定时器需要使用清除定时器函数clearInterval()或clearTimeout()。 其中，clearInterval()专门用于清除使用setInterval()创建的定时器，而clearTimeout()则用于清除使用setTimeout()创建的定时器。 需要注意的是，只有将定时器创建的id传入对应的函数，才能够成功关闭定时器。否则，定时器将一直在后台执行，导致程序性能下降。

微信小程序定时器组件库

微信小程序提供了一整套定时器组件库，开发者通过引入组件库的方式，即可快速实现定时器功能。 除了原生的inter、setInterval()和setTimeout()函数外，微信小程序定时器组件库还提供了基于BEM规范设计的time-picker时间选择器、倒计时组件等，方便开发者根据需求快速搭建功能。

<!-- 例：倒计时组件渲染，倒计时时间为60秒 -->
<view>
  <count-down bind:countEnd="onCountEnd" time="60"></count-down>
</view>

// 倒计时组件JS部分
Component({
  properties: {
    time: { //倒计时时间
      type: Number
    }
  },
  data: {
    interval: null, //定时器ID
    countDownTime: '', //倒计时显示时间
  },
  methods: {
    startCountDown: function () { //开始倒计时
      this.interval = setInterval(() => {
        if (this.data.time > 0) {
          let time = --this.data.time
          this.setData({
            countDownTime: time + 's'
          })
        } else {
          clearInterval(this.interval)
          this.triggerEvent('countEnd')
        }
      }, 1000)
    }
  },
  ready: function () {
    this.startCountDown()
  }
})

微信小程序定时签到

微信小程序定时签到是一种常见的业务需求，在用户指定的时间进行定时签到，缓解用户手动签到的烦恼。 具体实现思路是，结合定时器和后台服务，当系统时间和设定的签到时间相同时，自动向后台接口发送签到请求。

//周期性执行签到函数
function checkSignIn() {
  let signInTime = '08:30' //签到时间
  let date = new Date()
  let nowTime = date.getHours() + ':' + date.getMinutes()
  if (nowTime === signInTime) {
    wx.request({
      url: 'http://localhost:8080/signIn',
      method: 'POST',
      data: { userId: '1234' },
      success: function (res) {
        if (res.data.code === 0) {
          console.log('签到成功')
        } else {
          console.log('签到失败')
        }
      }
    })
  }
}
setInterval(checkSignIn, 60000) //定时执行签到函数

微信小程序时间选择器

微信小程序提供了基于BEM规范设计的time-picker时间选择器，使用方便。

<view>
  <time-picker></time-picker>
</view>

微信计时器小程序

微信计时器小程序是利用微信小程序定时器开发的一款计时工具。 通过结合微信小程序的视图层和逻辑层，可以轻松实现计时、暂停、重置等功能。

<!-- 计时器页面WXML部分 -->
<view class="container">
  <text class="time">{{hour}}:{{minute}}:{{second}}</text>
  <view class="button-group">
    <button class="button" bindtap="startCount">开始计时</button>
    <button class="button" bindtap="pauseCount">暂停计时</button>
    <button class="button" bindtap="endCount">重置计时</button>
  </view>
</view>

// 计时器页面JS部分
Page({
  data: {
    time: 0, //计时时间间隔
    interval: null, //定时器ID
    hour: '00',
    minute: '00',
    second: '00'
  },
  startCount: function () { //开始计时
    this.interval = setInterval(() => {
      this.data.time++;
      let hour = Math.floor(this.data.time / 3600).toString().padStart(2, '0')
      let minute = Math.floor(this.data.time % 3600 / 60).toString().padStart(2, '0')
      let second = Math.floor(this.data.time % 60).toString().padStart(2, '0')
      this.setData({
        hour: hour,
        minute: minute,
        second: second
      })
    }, 1000)
  },
  pauseCount: function () { //暂停计时
    clearInterval(this.interval)
  },
  endCount: function () { //重置计时
    clearInterval(this.interval)
    this.setData({
      time: 0,
      hour: '00',
      minute: '00',
      second: '00'
    })
  }
})

微信小程序能设定使用时间吗

微信小程序没有默认的时间限制功能，但是开发者可以根据业务需求自己进行开发。 具体实现方法是，利用系统时间和设定的限制时间进行比较，当系统时间超过设定时间时，自动触发限制操作，比如禁止用户继续使用应用程序。

//周期性检测使用时间
function checkUseTime() {
  let limitTime = '23:00' //每日限制使用时间
  let date = new Date()
  let nowTime = date.getHours() + ':' + date.getMinutes()
  if (nowTime === limitTime) {
    wx.showModal({
      title: '系统提示',
      content: '已到使用时间限制，请明日再来使用',
      showCancel: false,
      success: function (res) {
        //跳转到其他页面
      }
    })
  }
}
setInterval(checkUseTime, 60000) //定时检测使用时间

微信小程序定制相册选取

微信小程序定制相册选取是利用微信小程序定时器、wx.chooseImage等API开发的一款相册应用程序。 通过结合微信小程序的视图层和逻辑层，用户可以设置定时器，自动随机选取相册中的照片，并进行展示。

//设定定时器
let interval = setInterval(getImageList, 10000)
//获取本地相册列表
function getImageList() {
  wx.getSetting({
    success: res => {
      if (res.authSetting['scope.writePhotosAlbum']) { //判断用户是否授权
        wx.getSavedFileList({
          success: function (res) {
            if (res.fileList.length > 0) {
              let index = Math.floor(Math.random() * res.fileList.length) //随机选取一张照片
              wx.getImageInfo({
                src: res.fileList[index].filePath,
                success: function (res) {
                  wx.hideToast()
                  that.setData({
                    imgSrc: res.path
                  })
                }
              })
            }
          }
        })
      }
    }
  })
}
//选择照片
wx.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['album'],
  success: function (res) {
    wx.saveFile({
      tempFilePath: res.tempFilePaths[0],
      success: function (res) {
        wx.showToast({
          title: '保存成功',
          icon: 'success'
        })
      }
    })
  }
})
推荐文章