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

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

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>


效果演示

相关文章
|
小程序 前端开发
微信小程序中使用画布canvas实现动态心电图绘制
微信小程序中使用画布canvas实现动态心电图绘制
708 0
微信小程序中使用画布canvas实现动态心电图绘制
|
5月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
184 0
|
5月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
86 0
|
数据采集 小程序
微信小程序的动态表单,实现房屋租赁的多租客录入(一)
微信小程序的动态表单,实现房屋租赁的多租客录入
232 0
|
JSON 小程序 数据格式
微信小程序动态修改页面标题title
微信小程序动态修改页面标题title
1846 0
微信小程序动态修改页面标题title
|
存储 小程序 JavaScript
微信小程序的动态表单,实现房屋租赁的多租客录入(二)
微信小程序的动态表单,实现房屋租赁的多租客录入
199 0
|
前端开发 小程序 JavaScript
微信小程序实现简单动态画布
微信小程序实现简单动态画布
292 0
|
小程序 前端开发 JavaScript
微信小程序|动态时钟
微信小程序|动态时钟
296 0
|
存储 小程序 数据库
微信小程序云开发日记类日记记录分享动态
微信小程序云开发日记类日记记录分享动态
257 1
微信小程序云开发日记类日记记录分享动态
|
小程序 数据库 Android开发
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队
219 1
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队