微信小程序定時器詳解

一、微信小程序定時器介紹

微信小程序定時器是一種能夠幫助開發者自動執行任務的功能，包括間隔執行某個函數、定時更新頁面等。

微信小程序定時器的核心是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'
        })
      }
    })
  }
})