微信小程序渲染实时时间-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序渲染实时时间。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

总结一下自己怎么用JS初级的内容来写一个页面实时渲染时间的方法。

1、看看在框架目录中是否有util文件夹，它用来存放工具栏的JavaScript函数

微信小程序渲染实时时间
util.js文件代码如下：

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

2、在要获取时间的.js文件中加载util.js文件

例如，我要在index.js中引用util.js中的模块formatTime。那么，首先在index.js中定义变量util，使用require函数加载util.js文件。这里必须使用相对路径。

var util = require('../../utils/util');

微信小程序渲染实时时间

3、在onload方法中，调用util.js中的formatTime方法获取当前时间

微信小程序渲染实时时间

    var page = this;
    var DATE = util.formatTime(new Date());

    this.setData({
        myTime:DATE
    });

调用函数时，传入new Date()参数，返回值是日期和时间。
效果是这样的：
微信小程序渲染实时时间

3.1 修改连接符

如果想修改连接符，只需要自己模仿写一个formatDate()方法。
微信小程序渲染实时时间

4、在index.wxml文件，增加显示时间的页面布局

用双大括号把时间变量进行数据绑定。
微信小程序渲染实时时间
编译以后就能在index页面中看到显示时间，如下图。但是，此时时间是不变化的，所以我们需要一个计时定时器setInterVal() 方法

5、onload中来个定时器，不断地触发

JS代码是用一个setInterval() 进行函数封装定时1000毫秒执行一次
微信小程序渲染实时时间

  onLoad: function (options) {
      var page = this;  
      
      setInterval(() => {
          var DATE = util.formatTime(new Date());
          this.setData({
              myTime: DATE
          })
      }, 1000);
  },