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

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

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实现动态心电图绘制
561 0
微信小程序中使用画布canvas实现动态心电图绘制
|
2月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
49 0
|
2月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
55 0
|
数据采集 小程序
微信小程序的动态表单,实现房屋租赁的多租客录入(一)
微信小程序的动态表单,实现房屋租赁的多租客录入
197 0
|
JSON 小程序 数据格式
微信小程序动态修改页面标题title
微信小程序动态修改页面标题title
1750 0
微信小程序动态修改页面标题title
|
存储 小程序 JavaScript
微信小程序的动态表单,实现房屋租赁的多租客录入(二)
微信小程序的动态表单,实现房屋租赁的多租客录入
163 0
|
前端开发 小程序 JavaScript
微信小程序实现简单动态画布
微信小程序实现简单动态画布
269 0
|
小程序 前端开发 JavaScript
微信小程序|动态时钟
微信小程序|动态时钟
227 0
|
JSON 小程序 数据格式
【微信小程序】动态设置导航栏标题
这种方法是使用app.json或者页面的json文件配置导航栏标题。如果是在app.json中进行配置,则它是全局行为,项目所有的页面将显示同一个标题;如果是在页面的json中进行配置,则只会影响当前页面。
|
存储 小程序 数据库
微信小程序云开发日记类日记记录分享动态
微信小程序云开发日记类日记记录分享动态
236 1
微信小程序云开发日记类日记记录分享动态