小程序实现活动倒计时功能

需求分析

电商小程序中通常有这么一个场景，要开展一项促销活动，活动有截止日期。用户打开小程序的时候就可以倒计时，提醒用户抓紧下单购买。我们本次的实战开发就以这个场景为例，来介绍一下低代码工具是如何实现倒计时的。

1 创建数据源

因为我们要记录活动的截止日期和活动的状态，需要创建一个数据源用来保存信息。登录控制台，点击新建数据模型

输入模型的名称，标识由系统自动生成

增加数据源的字段，我们添加活动截止日期、活动状态两个字段

截止日期我们选择日期时间类型，活动状态选择枚举类型，枚举值有未开始、进行中和已结束

2 创建模型应用

数据源建好了之后，就可以根据数据源生成模型应用了。点击新建模型应用

勾选我们的数据源，完成页面的创建

点击导航菜单完成菜单的配置

点击发布，将应用发布到企业工作台

在企业工作台中录入数据

3 创建自定义应用

低码工具中的自定义应用对应着我们的小程序，登录控制台，点击新建自定义应用

4 倒计时功能开发

打开应用后，点击代码编辑器，我们先创建一个公共函数用来返回当前还剩下多次时间

输入如下代码

export function countDown(date) {   let now = new Date().getTime();  let distance = date - now;

  let days = Math.floor(distance / (1000 * 60 * 60 * 24));  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));  let seconds = Math.floor((distance % (1000 * 60)) / 1000);

  return days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒" ;}

然后在页面的生命周期函数中贴入如下代码，调用我们的倒计时函数

export default {  async onPageLoad(query) {    //console.log('---------> LifeCycle onPageLoad', query)    const result = await app.cloud.callModel({      name: 'hd_9o91cf2',      methodName: 'wedaGetRecords',      params: {

      }    })    let countDownDate = result.records[0].jzrq;    let now = new Date();    let hdzt = result.records[0].hdzt    if (countDownDate > now && hdzt == "2") {      $page.dataset.state.timer = setInterval(function () {        $page.dataset.state.daojishi = app.common.countDown.countDown(countDownDate);        console.log($page.dataset.state.daojishi == "0天 0小时 0分钟 0秒");        if ($page.dataset.state.daojishi == "0天 0小时 0分钟 0秒") {          console.log("清除倒计时")          clearInterval($page.dataset.state.timer);        }      }, 1000);    }  },  onPageShow() {    //console.log('---------> LifeCycle onPageShow')  },  onPageReady() {    //console.log('---------> LifeCycle onPageReady')  },  onPageHide() {    //console.log('---------> LifeCycle onPageHide')  },  onPageUnload() {    //console.log('---------> LifeCycle onPageUnload')  },}

新建一个变量用来显示倒计时

放入一个文本组件，绑定我们的变量

之后页面就开始进入倒计时的状态

总结

本篇我们带着大家实现了一下倒计时的功能，有的初学者认为低代码就是拖拖拽拽开发功能。其实对于简单业务确实是这样的，但是你的应用一旦开发，必然会面临逐步的深入，在这些深入的场景中还是需要通过代码来写逻辑的。这也是低代码的特点，它是少代码，而不是说一点代码也不写。