微信小程序自定义倒计时组件及注意事项

 倒计时功能实现：微信小程序实现倒计时功能（超简单）_洛潆的博客-CSDN博客_微信小程序倒计时功能

由于要在多个页面使用倒计时功能，在每个页面都重新写一遍就会很麻烦，所以可以把它封装为自定义组件，最终效果如下：

步骤： 

 在项目根目录下创建component文件夹，在内部创建topbar文件夹，右键新建Component

打开topbar.js文件，在properties节点下声明总时长和当前剩余时长

properties: {
    time:{
       type:Number,
       value:1800
    },
    countdown:String
},

 properties节点下的值都可由组件使用者传入，type表示变量类型，value表示变量默认值，没有默认值可以使用简化写法，即变量名:变量类型

 在methods节点下定义倒计时函数

methods: {
        countdown(){
            var minute=Math.floor(this.properties.time  / 60 );
            var second=this.properties.time  % 60
            second<10?second='0'+second:'';
            this.setData({
                countdown:minute+':'+second,
                time:this.properties.time-1
            })
        }
    },

在data平级节点下创建lifetimes节点（组件的生命周期函数），使用定时器每隔一秒执行一次

lifetimes:{
        attached(){
            setInterval(() => {
                this.countdown()
            }, 1000)},
    },

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

• 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

 注意：组件内的定时器只能使用setInterval(() => {}, interval)格式，而不能使用

setInterval(function, interval)格式

 topbar.wxml:

<view>{{countdown}}</view>

在app.json文件下引入组件 ，组件名可自定义

"usingComponents": {
        "topbar":"/component/topbar/topbar",
    },

 接下来就可以在其他页面使用了，格式为：

<topbar time='1800'></topbar>
<!-- time自定义 -->