微信小程序--动态时间实现

WXS
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注意事项

WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
WXS 函数不能作为组件的事件回调。
由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

wxs语言官方文档

日期格式化

• date.wxs

var formatTime = function (date) {
  var date = getDate(date)
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
 
	//拼接日期
  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, 
         second].map(formatNumber).join(':')
}
 
//判断长度，如果是长度为2，输出n，否则前面补上一个 0 
var formatNumber = function(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
 
module.exports = {
  formatTime: formatTime,  //引用格式时间
  formatNumber: formatNumber  //引用格式时间数字,例:2021年1月1日不会输出为 2021-1-1,而是 2021-01-01
}

动态逻辑

• js

/**
   * 页面的初始数据
   */
  data: {
    time: new Date().toString(), //获取当前世界时间-初始时间转化字符串
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //间隔1秒刷新时间:重新获取一次当前时间,赋值
    setInterval(() => {
      var date = new Date().toString();
      this.setData({
        time: date,
      })
    }, 1000)
  },
 

页面显示

• wxml

<!--导入文件 格式化日期-->
<wxs module="tutil" src="../index/date.wxs"></wxs>
<!--时间显示-->
<text>{{tutil.formatTime(time)}}</text>

效果演示