小程序中使用wxs实现列表倒计时

注：事先声明，本文主旨为自己观看，同时也分享给大家，如果看到觉得熟悉，那么没错，我也是在网络上学习的别人的，所以我会尽可能写的清晰一些，由于我个人习惯看有图的博客，所以我也会附上图片，但绝不美观~

要实现以上功能，我们需要修改3个模块：

1.wxs文件

2.js文件

3.wxml文件

一、首先我们来看下wxs文件：（当然了，如果不想看，也没问题，直接在 utils文件夹中创建一个wxs文件，直接将下面的代码拉进去就好了）

/**
 * gb
 * 列表展示倒计时（传入事件格式为字符串：2021-02-18 12:00:00） 
 * systimestamp:当前时间，compareTime:结束时间
 */
var formatterTimer = function (systimestamp, compareTime) {
  var result = {};
  var nowTime = systimestamp; // 当前时间的时间戳 也就是系统时间戳

  var reg = getRegExp("-", "g"); // 获取正则表达式，全局替换
  var str = compareTime.replace(reg, '/'); // 时间格式转换
  // 将字符串转换成时间格式
  var timePublish = getDate(str).valueOf();

  var futureTime = getDate(timePublish).getTime(); // 比较时间的时间戳
  // 未来的时间减去现在的时间 ;
  var resTime = (futureTime - nowTime) / 1000;
  // 结束时间
  var zero = futureTime - nowTime;
  if (zero >= 0) { // 认为还没有到达结束的时间
      var h = (Math.floor(resTime / 3600)) < 10 ? '0' + (Math.floor(resTime / 3600)) : (Math.floor(resTime / 3600));
      var m = (Math.floor(resTime / 60) % 60) < 10 ? '0' + (Math.floor(resTime / 60) % 60) : (Math.floor(resTime / 60) % 60);
      var s = (Math.floor(resTime % 60)) < 10 ? '0' + (Math.floor(resTime % 60)) : (Math.floor(resTime % 60));

      result = h + ':' + m + ':' + s;
      result.status = true;
  } else {

      result = '00:00:00';
      result.status = false;
  }
  return result;
};
module.exports = {
  formatterTimer: formatterTimer
}

二、然后我们去看看js文件

写一点简单的注释吧：在下列代码中，data中存放的 systimestamp：是当前系统时间 endTime,endTime2,等是我自己写的结束时间，列表展示可以通过wx-for循环遍历替代endTime

获取当前系统时间要放到onShow里面。这样才可以多次渲染获取到当前系统时间

Page({

  /**
   * 页面的初始数据
   */
  data: {
    systimestamp:'',//当前系统时间
    endTime:'2021-02-18 14:00:00',
    endTime2:'2021-02-18 15:00:00',
    endTime3:'2021-02-18 16:00:00',
    endTime4:'2021-02-18 17:00:00',
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //拿到服务器时间
    var serverLocalDate = new Date().getTime();
    //调用函数开始计时
    this.serverLocalDate(serverLocalDate)
  },
  //服务器系统时间开始计时
  serverLocalDate: function (serverLocalDate) {
    var _this = this;
    let newDate = serverLocalDate;
    _this.setData({
      servicetimeInterval: setInterval(function () { // 循环执行  
        newDate = (newDate / 1000 + 1) * 1000;
        _this.setData({
          systimestamp: newDate
        })
      }, 1000)  // 每秒执行一次以达到更新时间的目的
    })
  }
})

三、最后就是wxml文件，这里就比较简单了，1.引入wxs文件，直接调用就好了，

  <!-- 引入wxs文件 -->
  <wxs src="../../utils/gUtils.wxs" module="countdown" />

  <text>距离秒杀还剩{{countdown.formatterTimer(systimestamp,endTime)}}</text>
  <view style="margin-top:20rpx"></view>
  <view></view>
  <view></view>
  <text>距离秒杀还剩{{countdown.formatterTimer(systimestamp,endTime2)}}</text>
  <view style="margin-top:20rpx"></view>
  <view></view>
  <view></view>
  <text>距离秒杀还剩{{countdown.formatterTimer(systimestamp,endTime3)}}</text>
  <view style="margin-top:20rpx"></view>
  <view></view>
  <view></view>
  <text>距离秒杀还剩{{countdown.formatterTimer(systimestamp,endTime4)}}</text>

完成以上三步就可以了~