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

util.js文件代码如下：

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const 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);},

实测OK！

参考文献：

微信小程序获取当前时间及获取当前日期
十分钟时间搞懂怎么用JS代码渲染实时时间
小程序实时时间显示实现

微信小程序渲染实时时间相关推荐

微信小程序渲染图片报错：[渲染层网络层错误] Failed to load local image resource
微信小程序渲染图片报错解决:[渲染层网络层错误] Failed to load local image resource 背景通过用户点击上传图片,通过res.tempFilePaths拿到用户上传 ...
微信小程序时间加法_微信小程序获取系统时间、时间戳、时间时间戳加减
微信小程序获取系统时间.时间戳.时间时间戳加减,微信小程序获取明天时间 //获取当前时间戳 var timestamp = Date.parse(new Date()); timestamp = ti ...
微信小程序集成实时音视频通话功能
微信小程序集成实时音视频通话功能背景在项目的开发当中,很多时候,我们会有音频.视频通话的需求,但是一般都不会自己来写,所以我们就需要借助第三方来实现.尤其是这次的项目开发当中,需要在微信小程序当中 ...
微信小程序账号长时间未登录冻结解封
微信小程序账号长时间未登录冻结解封 1.账号找回链接[官方]:http://mp.weixin.qq.com/acct/findacct?action=scan 2.按照官方指引的三个操作步骤进操作, ...
实操-微信小程序渲染html内容
实操-微信小程序渲染html内容在小程序中渲染html内容--wxParse 下载 wxParse 组件并配置到项目当中使用 wxParse 1.在 js文件中引入 2.在wxml中使用保存一下 ...
微信小程序渲染层错误：可以在AppData中获取到值但无法渲染到页面
微信小程序渲染层错误:可以在AppData中获取到值但无法渲染到页面 1.遇到的问题: 2.解释: 3.附上正确的完整代码: 在我跟着视频(bili:BV1nE41117BQ)P78 学做小程序的过程 ...
关于微信小程序iOS端时间格式兼容问题
关于微信小程序iOS端时间格式兼容问题在自己开发中,当时间格式为 2020-06-29 08:00 ,需要将时间转为其他格式时,Android端转换成功,iOS端报错或是转为NaN. 解决方法: 1 ...
微信小程序使用实时播放音视频流
微信小程序使用实时播放音视频流需要先添加类目,不然会显示不符合开通条件,这是添加好类目之后的: 添加类目: 发现添加音视频设备的时候需要上传资质文件,而添加硬件与设备不需要,添加上硬件与设备类目后也可 ...
微信小程序 live-player 实时音视频播放组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 实时音视频播放(v2.9.1 起支持同层渲染).相关api:wx.createLivePlayerContext 暂只针对国内主体如下类目的 ...

微信小程序渲染实时时间