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

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() + 1var 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
}

动态逻辑

/*** 页面的初始数据*/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>

效果演示

微信小程序--动态时间实现相关推荐

学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
微信小程序动态生成页面2020-04-13
微信小程序动态生成页面我最近自己在做小程序参加竞赛,然后记录下自己的心得,希望对在座的各位有点帮助吧.然后我的Q:2991194667,有问题可以一起探讨. 1.首先是我打算做一个瀑布流的布局,像淘 ...
关于微信小程序中时间预约的简单实现
关于微信小程序中时间预约的简单实现 1. js中定义获取日期函数.日期点击事件 2. 在data中定义数组等变量 3. onLoad调用函数并保存回data 4. wxml展示 5. 页面监控函数on ...
微信小程序实现时间预约功能
微信小程序实现时间预约功能类似这样 1.wxml  <view class='containt'>&l ...
微信小程序-动态验证码
微信小程序-动态验证码一.创建自定义组件verification-code 二.在index页面使用一.创建自定义组件verification-code verification-code.js ...
微信小程序动态添加view
微信小程序动态添加view //index.html<button bindtap='clickMe'> 添加</button> <input type='input' ...
微信小程序动态添加类名
微信小程序动态添加类名和vue的语法差不多,一个小测试 <view class="list-top"> <view data-num="1" ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序-动态获取appid
微信小程序动态获取appid 使用wx.getAccountInfoSync();方法. 具体实现方法如下: var accountInfo = wx.getAccountInfoSync(); va ...

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

日期格式化

动态逻辑

页面显示

效果演示

微信小程序--动态时间实现相关推荐

最新文章

热门文章