微信小程序之自定义倒计时组件

开头

• 最近写小程序写上瘾了, 业务上需要实现一个倒计时的功能, 考虑到可拓展以及使用方便, 便将其封装成组件(写习惯了 JSX 不得不吐槽小程序自定义组件的繁琐)

需求

• 可配置倒计时的时间
• 倒计时结束后执行事件
• 可配置倒计时时间的格式

步骤

• 先定义自定义组件的 properties, 这里有两个父组件传给该倒计时组件的参数target 倒计时的时间,format倒计时时间的格式

properties: {
    target: {type: String,},
    format: {
      type: Function,
      default: null
    }
},

• 定义组件生命周期函数

lifetimes: {attached() {
      // 组件创建时
      this.setData({lastTime: this.initTime(this.properties).lastTime,  // 根据 target 初始化组件的 lastTime 属性
      }, () => {
        // 开启定时器
        this.tick();
        // 判断是否有 format 属性 如果设置按照自定义 format 处理页面上显示的时间 没有设置按照默认的格式处理
        if (typeof this.properties.format === 'object') {this.defaultFormat(this.data.lastTime)
        }
      })
    },

    detached() {
      // 组件销毁时清除定时器 防止爆栈
      clearTimeout(timer);
    },
},

微信小程序自定义组件的生命周期指的是指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是 created attached detached，包含一个组件实例生命流程的最主要时间点。具体微信自定义组件学习参考官方文档

• 定义组件自身的状态

/**
 * 组件的初始数据
*/
data: {
    d: 0, // 天
    h: 0, // 时
    m: 0, // 分
    s: 0, // 秒
    result: '',  // 自定义格式返回页面显示结果
    lastTime:''  // 倒计时的时间错
},

• 组件自身的方法

methods: {
    // 默认处理时间格式
    defaultFormat: function(time) {
      const day = 24 * 60 * 60 * 1000
      const hours = 60 * 60 * 1000;
      const minutes = 60 * 1000;

      const d = Math.floor(time / day);
      const h = Math.floor((time - d * day) / hours);
      const m = Math.floor((time - d * day - h * hours) / minutes);
      const s = Math.floor((time - d * day - h * hours - m * minutes) / 1000);
      this.setData({
        d,
        h,
        m,
        s
      })
    },

    // 定时事件
    tick: function() {
      let {lastTime} = this.data;

      timer = setTimeout(() => {if (lastTime < interval) {clearTimeout(timer);
          this.setData({
              lastTime: 0,
              result: ''
            },
            () => {this.defaultFormat(lastTime)
              if (this.onEnd) {this.onEnd();
              }
            }
          );
        } else {
          lastTime -= interval;
          this.setData({
              lastTime,
              result: this.properties.format ? this.properties.format(lastTime) : ''
            },
            () => {this.defaultFormat(lastTime)
              this.tick();}
          );
        }
      }, interval);
    },

    // 初始化时间
    initTime: function(properties) {
      let lastTime = 0;
      let targetTime = 0;
      try {if (Object.prototype.toString.call(properties.target) === '[object Date]') {targetTime = Number(properties.target).getTime();} else {targetTime = new Date(Number(properties.target)).getTime();}
      } catch (e) {throw new Error('invalid target properties', e);
      }

      lastTime = targetTime - new Date().getTime();
      return {lastTime: lastTime < 0 ? 0 : lastTime,};
    },
    // 时间结束回调事件
    onEnd: function() {this.triggerEvent('onEnd');
    }
  }

defaultFormat : 默认时间处理函数 tick: 定时事件 initTime 初始化时间
onEnd: 时间结束的回调

• 倒计时组件 countDown.js 完整代码

var timer = 0;
var interval = 1000;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    target: {type: String,},
    format: {
      type: Function,
      default: null
    }
  },

  lifetimes: {attached() {
      // 组件创建时
      this.setData({lastTime: this.initTime(this.properties).lastTime,  // 根据 target 初始化组件的 lastTime 属性
      }, () => {
        // 开启定时器
        this.tick();
        // 判断是否有 format 属性 如果设置按照自定义 format 处理页面上显示的时间 没有设置按照默认的格式处理
        if (typeof this.properties.format === 'object') {this.defaultFormat(this.data.lastTime)
        }
      })
    },

    detached() {
      // 组件销毁时清除定时器 防止爆栈
      clearTimeout(timer);
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    d: 0, // 天
    h: 0, // 时
    m: 0, // 分
    s: 0, // 秒
    result: '',  // 自定义格式返回页面显示结果
    lastTime:''  // 倒计时的时间错
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 默认处理时间格式
    defaultFormat: function(time) {
      const day = 24 * 60 * 60 * 1000
      const hours = 60 * 60 * 1000;
      const minutes = 60 * 1000;

      const d = Math.floor(time / day);
      const h = Math.floor((time - d * day) / hours);
      const m = Math.floor((time - d * day - h * hours) / minutes);
      const s = Math.floor((time - d * day - h * hours - m * minutes) / 1000);
      this.setData({
        d,
        h,
        m,
        s
      })
    },

    // 定时事件
    tick: function() {
      let {lastTime} = this.data;

      timer = setTimeout(() => {if (lastTime < interval) {clearTimeout(timer);
          this.setData({
              lastTime: 0,
              result: ''
            },
            () => {this.defaultFormat(lastTime)
              if (this.onEnd) {this.onEnd();
              }
            }
          );
        } else {
          lastTime -= interval;
          this.setData({
              lastTime,
              result: this.properties.format ? this.properties.format(lastTime) : ''
            },
            () => {this.defaultFormat(lastTime)
              this.tick();}
          );
        }
      }, interval);
    },

    // 初始化时间
    initTime: function(properties) {
      let lastTime = 0;
      let targetTime = 0;
      try {if (Object.prototype.toString.call(properties.target) === '[object Date]') {targetTime = Number(properties.target).getTime();} else {targetTime = new Date(Number(properties.target)).getTime();}
      } catch (e) {throw new Error('invalid target properties', e);
      }

      lastTime = targetTime - new Date().getTime();
      return {lastTime: lastTime < 0 ? 0 : lastTime,};
    },
    // 时间结束回调事件
    onEnd: function() {this.triggerEvent('onEnd');
    }
  }
})

• 倒计时组件 countDown.wxml 完整代码

<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="../../comm.wxs" module="comm" />
<view class="count-down">
  <text wx:if="{{result!==''}}">{{result}}</text>
  <block wx:else>
    <text wx:if="{{comm.numberToFixed(d)>0}}">{{d}}天 </text>
    <text>{{utils.fixedZero(h)}}</text>
    <text style="font-weight: 500">:</text>
    <text>{{utils.fixedZero(m)}}</text>
    <text style="font-weight: 500">:</text>
    <text>{{utils.fixedZero(s)}}</text>
  </block>
</view>

其中引入了两个 wxs 文件中的函数
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。官方文档

function fixedZero(val) {return val * 1 < 10 ? '0' + val : val;}
// 保留 pos 位小数
function numberToFixed(number, pos) {if (number === null || number === ''|| number < 0) return''
  return parseFloat(number).toFixed(pos)
}

组件使用

• 引入方式

"usingComponents": {"countDown": "../../../components/countDown/countDown"},

• 代码演示

 <countDown bind:onEnd="getPageList" format="{{formatTime}}" target="{{creatTargetTime}}" />

const formatChinaDate = mss => {let days = parseInt(mss / (1000 * 60 * 60 * 24));
  let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = parseInt((mss % (1000 * 60)) / 1000);
  return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
};
data:{
    formatTime:formatChinaDate,
    creatTargetTime:1556428889000, // 时间戳
}

getPageList:function(){
    // 倒计时结束啦
    console.log('倒计时结束啦')
}

API

参数	说明	类别	默认值
format	时间格式化显示	Function(time)	x 天 00:00:00
target	目标时间	Date
onEnd	倒计时结束回调	funtion

补充

• 文章首发于: 微信小程序之自定义倒计时组件