微信小程序开发:自定义倒计时组件

2019-04-2819:39:01APP与小程序开发Comments2,764 views字数 5244阅读模式
  • 最近写小程序写上瘾了,业务上需要实现一个倒计时的功能,考虑到可拓展以及使用方便,便将其封装成组件(写习惯了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 ,包含一个组件实例生命流程的最主要时间点。具体微信自定义组件学习参考官方文档文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11624.html

  • 定义组件自身的状态
/**
 * 组件的初始数据
*/
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:时间结束的回调文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11624.html

  • 倒计时组件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,可以构建出页面的结构。官方文档文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11624.html

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

作者:ahwgs
链接:https://juejin.im/post/5cc568dcf265da037b611ad4
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11624.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/11624.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/11624.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定