微信小程序过滤器之计算当前时间差

news/2024/7/20 2:21:48 标签: 微信小程序, 小程序

小程序>微信小程序过滤器之计算当前时间差

  • 前言
  • 一、wxs简介
  • 二、使用步骤
    • 1.定义
    • 2.使用


前言

最近遇到了一个需求,将小程序里面的具体时间2023-12-11 09:41:06转为当前时间差10小时前,这块可以使用js逻辑函数对数据进行处理,但这里我们采用小程序>微信小程序里面的过滤器wxs来进行处理。

一、wxs简介

不同于vue2里面的filter函数,小程序>微信小程序里面给出的是wxs,;
wxs(WeiXin Script) 是小程序独有的一套脚本语言,结合wxml,可以构建出页面的结构。wxml中无法调用在页面的js中定义的函数,但是wxml可以调用wxs中定义的函数,因此,小程序中wxs的典型应用场景是‘过滤器

二、使用步骤

1.定义

创建一个wxs后缀的文件,里面定义一个函数timago(目前不支持es6语法),然后在下面的module.exports部分导出即可,前者是键名,后者是值名(可根据需求修改);
在wxs里面不支持new Date()函数,因此使用getDate()获取当前时间。

//计算时间差函数
var timeago = function (dateTimeStamp) {
	var dateTimeStamp=getDate(dateTimeStamp).getTime()
	var minute = 1000 * 60;      //时间用毫秒表示
	var hour = minute * 60;
	var day = hour * 24;
	var week = day * 7;
	var month = day * 30;
	var now = getDate().getTime();   //当前时间毫秒
	var passTime = now - dateTimeStamp;//过了多少毫秒
	if (passTime < 0) { return; }
	var aminute = passTime / minute;
	var ahour = passTime / hour;
	var aday = passTime / day;
	var aweek = passTime / week;
	var amonth = passTime / month;
	var result = '';
	if (amonth >= 1) {
		result = "" + parseInt(amonth) + "月前";
	} else if (aweek >= 1) {
		result = "" + parseInt(aweek) + "周前";
	} else if (aday >= 1 && aday < 7) {
		console.log("" + parseInt(aday) + "天前")
		result = "" + parseInt(aday) + "天前";
	} else if (ahour >= 1 && ahour < 24) {
		result = "" + parseInt(ahour) + "小时前";
	} else if (aminute >= 1 && aminute < 60) {
		result = "" + parseInt(aminute) + "分钟前";
	} else if (aminute < 1) {
		result = "刚刚";
	} else {
		result = ""
	}
	return result;
}

module.exports = {
	timeago: timeago,
};

2.使用

在wxml文件引用刚刚定义的wxs文件,如下所示,src为文件存放的路径,module为使用的模块名

<wxs src='/utils/filter.wxs' module='filter' />

如下,将js中的变量进行处理

<view>{{filter.timeago(time)}}</view>

结果对比
在这里插入图片描述在这里插入图片描述


http://www.niftyadmin.cn/n/5256033.html

相关文章

什么是sql的谓词下推

SQL的谓词下推&#xff08;Predicate Pushdown&#xff09;是一种数据库查询优化技术&#xff0c;它将查询中的过滤条件&#xff08;谓词&#xff09;尽可能地“下推”到查询计划中更早的阶段执行。这意味着&#xff0c;系统尝试在处理和转换数据之前先应用这些过滤条件&#x…

修改移远提供的GobiNet、quectel-CM源码,使其支持有方N720 4G模块

最近在研究imx6ull linux下4G模块驱动的移植&#xff0c;参考的移远ec20的移植方法&#xff0c;添加了GobiNet驱动&#xff0c;编译了quectel-CM工具&#xff0c;并且可以正常拨号&#xff0c;分配到ip&#xff0c;如下&#xff1a; ping外网也没有压力&#xff0c;如下…

会员运营常用的ChatGPT通用提示词模板

会员体系&#xff1a;如何建立和完善会员体系&#xff1f; 会员等级&#xff1a;如何设定会员等级及权益&#xff1f; 会员留存&#xff1a;如何提高会员留存率&#xff1f; 会员活跃度&#xff1a;如何提高会员活跃度&#xff1f; 会员招募&#xff1a;如何招募新会员&…

Mirrors and reflections for VR

专为虚拟现实而建,但也非常适合非虚拟现实桌面和移动项目 这是URP管道,从Unity2019.4.16一直测试到2023年。 完全工作场景预览,轻松修改着色器材质。着色器支持折射,可以制作很酷的效果。 镜子/反射可以互相反射,而不仅仅是2...想象一下一个电梯,3面镜子都互相反射,直到…

vue宝典之项目结构介绍

文章目录 &#x1f341;前言&#x1f341;Vue.js基本概念&#x1f341;Vue.js核心特性&#x1f341;Vue.js应用场景&#x1f341;Vue项目结构&#x1f341;Vue开发流程 目前在学习vue项目&#xff0c;之前只是学习vue中基本语法&#xff0c;当接触项目时发现vue项目结构之间配置…

关于uniapp X 的最新消息

uni-app x 是什么&#xff1f; uni-app x&#xff0c;是下一代 uni-app&#xff0c;是一个跨平台应用开发引擎。 uni-app x 没有使用js和webview&#xff0c;它基于 uts 语言。在App端&#xff0c;uts在iOS编译为swift、在Android编译为kotlin&#xff0c;完全达到了原生应用的…

域渗透之影子凭证 滥用密钥信任账户映射进行账户接管

关注公众号回复20231110获取最新网络安全以及内网渗透等资料。 什么是 PKINIT&#xff1f; 在 Kerberos 身份验证中&#xff0c;客户端必须在 KDC为其提供票证授予票证 (TGT) 之前执行“预验证”&#xff0c;该票证随后可用于获取服务票证。预认证的原因是&#xff0c;没有它&…

在Ubuntu K8s中创建vnc用于浏览器调试

拉取vnc镜像&#xff1a; ctr -n k8s.io image pull docker.io/dorowu/ubuntu-desktop-lxde-vnc:latest --platform:linux/amd64&#xff08;导出成镜像包&#xff09; ctr -n k8s.io image pull docker.io/dorowu/ubuntu-desktop-lxde-vnc:latest --platform:linux/amd64dep…