微信小程序动态获取当前时间显示到页面_小程序 wx:if 中写当前时间-优快云博客

本文详细介绍了一个小程序中实现时间显示的方法，包括使用bindtap为按钮绑定函数，利用wx:if判断条件渲染，调用formatTime函数格式化日期，以及通过setData更新页面数据。此实践涵盖了小程序开发中的关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index/index.wxml

<!--index.wxml-->
<view class="container">
  <!-- 建立按钮，为按钮绑定函数 -->
  <button bindtap="getTime">点击获取当前时间</button>
  <!-- wx:if判断是否存在 -->
  <text wx:if="{{time}}">{{time}}</text>
</view>

index/index.js

//index.js
var util = require('../../utils/util.js');
Page({
  data: {
  },
  //给按钮绑定getTime事件
  getTime:function(){
    var time = util.formatTime(new Date())
    //为页面中time赋值
    this.setData({
      time:time
    })
    //打印
    console.log(time)
  }
})

utils/util.js

// utils/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
}

注意点：1.通过bindtap为按钮绑定函数。

2.wx:if 判断 {{time}} 值是否为空，空则不显示。

3.调用util.js中的formatTime完成时间对象的创建与赋值。

4.setData方法为页面中 {{time}} 赋值。