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

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

  • 前言
  • 一、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.mzph.cn/news/215280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Error: Failed to resolve vue/compiler-sfc——vite项目启动报错——npm run serve

运行项目时&#xff0c;报错如下&#xff1a; Error: Failed to resolve vue/compiler-sfc 根据报错信息的提示&#xff1a;vue的版本必须大于3.2.25&#xff0c;经过查看package.json文件&#xff0c;可以看到vue的版本为3.2.36&#xff0c;是满足条件的。 因此考虑缓存问题&…

【OPNEGIS】Geoserver原地升级jetty,解决Apache HTTP/2拒绝服务漏洞 (CVE-2023-44487)

Geoserver是我们常用的地图服务器&#xff0c;在开源系统中的应用比较广泛。在实际环境中&#xff0c;我们可能会选用官方的二进制安装包进行部署&#xff0c;这样只要服务器上有java环境就可以运行&#xff0c;方便在现场进行部署。 1.问题来源 这次由于甲方一月一次的漏洞扫…

智能优化算法应用:基于阴阳对算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于阴阳对算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于阴阳对算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.阴阳对算法4.实验参数设定5.算法结果6.参考文…

Java - Mybatis的缓存机制、集成SpringBoot后缓存相关问题

mybaits提供一级缓存&#xff0c;和二级缓存 一级缓存&#xff08;默认开启&#xff09; 一级缓存是SqlSession级别的缓存。在操作数据库时需要构造 sqlSession对象&#xff0c;在对象中有一个(内存区域)数据结构&#xff08;HashMap&#xff09;用于存储缓存数据。不同的sqlSe…

STM32F407-14.3.1-01 时基单元

时基单元 可编程高级控制定时器的主要模块是一个 16 位计数器及其相关的自动重载寄存器。计数器可递增计数、递减计数或交替进行递增和递减计数。计数器的时钟可通过预分频器进行分频。 计数器、自动重载寄存器和预分频器寄存器可通过软件进行读写。即使在计数器运行时也可执行…

Python:核心知识点整理大全14-笔记

目录 ​编辑 7.2.2 让用户选择何时退出 parrot.py 7.2.3 使用标志 7.2.4 使用 break 退出循环 cities.py 7.2.5 在循环中使用 continue counting.py 7.2.6 避免无限循环 counting.py 7.3 使用 while 循环来处理列表和字典 7.3.1 在列表之间移动元素 confirmed_user…

数字图像处理(实践篇)二十二 使用opencv进行人脸、眼睛、嘴的检测

目录 1 xml文件 2 涉及的函数 3 实践 使用opencv进行人脸、眼睛、嘴的检测。 1 xml文件 方法① 下载 地址&#xff1a;https://github.com/opencv/opencv/tree/master/data/haarcascades 点击haarcascade_frontalface_default.xml文件 对着Raw右键&#xff0c;选择“链接…

【JVM从入门到实战】(二)字节码文件的组成

一、Java虚拟机的组成 二、字节码文件的组成 字节码文件的组成 – 应用场景 字节码文件的组成部分-Magic魔数 什么是魔数&#xff1f; Java字节码文件中的魔数 文件是无法通过文件扩展名来确定文件类型的&#xff0c;文件扩展名可以随意修改&#xff0c;不影响文件的内容。…

UE引擎 LandscapeGrass 实现机制分析(UE5.2)

前言 随着电脑和手机硬件性能越来越高&#xff0c;游戏越来越追求大世界&#xff0c;而大世界非常核心的一环是植被&#xff0c;目前UE5引擎提供给植被生成的主流两种方式为 手刷植被和LandscapeGrass(WeightMap程序化植被)。当然UE5.3推出新一代PCGFramework 节点程序化生成框…

MyBatis:缓存

MyBatis 缓存一级缓存二级缓存注 缓存 缓存&#xff0c;是数据交换的缓冲区&#xff08;临时保存数据的地方&#xff09;。即将数据&#xff08;数据一般为频繁查询且不易改变&#xff09;保存在计算机内存中&#xff0c;下次读取数据时直接从内存中获取&#xff0c;以避免频繁…

OpenAI接口调用示例

最近为公司做了一个ChatGPT工具&#xff0c;这里展示一下OpenAI接口的调用 前提条件 访问OpenAI官网&#xff08;国内需要翻墙&#xff09;的账号&#xff0c;需要sk 地址&#xff1a;https://platform.openai.com 依赖 使用开源工具调用OpenAI接口&#xff0c;依赖如下&am…

Vue3封装一个轮播图组件

先看效果 编写组件代码 CarouselChart.vue <template><div classimg-box><el-button clickpreviousImages v-ifprops.showBtn>←</el-button><div classimg><div styledisplay: flex;gap: 20px idmove><imgclassimg-item v-for(item…

centos7部署docker

文章目录 &#xff08;1&#xff09;安装前准备&#xff08;2&#xff09;卸载旧版Docker&#xff08;3&#xff09;安装docker&#xff08;4&#xff09;配置镜像加速 &#xff08;1&#xff09;安装前准备 在开始安装之前&#xff0c;首先需要检查内核版本。使用 uname -r 命…

nodejs微信小程序+python+PHP个性化服装搭配系统APP-计算机毕业设计推荐 android

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

redis(设置密码)配置文件详细

1.设置账号密码端口 config set requirepass 123456 设置密码为123456 config get requirepass 查看账号密码 auth 123456 登入的时候输入这个确定账号密码 1. 首先连接到Redis服务器: redis-cli 2. 然后使用CONFIG SET命令设置requirepass参数并指定密码: CONFIG SET requi…

【PyTorch】现代卷积神经网络

文章目录 1. 理论介绍1.1. 深度卷积神经网络&#xff08;AlexNet&#xff09;1.1.1. 概述1.1.2. 模型设计 1.2. 使用块的网络&#xff08;VGG&#xff09;1.3. 网络中的网络&#xff08;NiN&#xff09;1.4. 含并行连结的网络&#xff08;GoogLeNet&#xff09; 2. 实例解析2.1…

家具制造ERP软件包含哪些功能?家具制造业ERP系统哪个好

不同的家具有不同的用料、品质、制造工时、营销渠道等&#xff0c;而有些家具制造企业采用传统的管理方式在处理物料BOM、生产实际成本核算、库存盘点、供应商选择、班组计件核对、生产领用以及物料追溯等方面存在不少提升空间。 与此同时也有很多的皮具制造企业借助ERP软件优…

Linux16 ftp文件服务区、vsftpd文件系统服务安装、lftp客户端安装、NFS远程共享存储

目录 一、FTP基础ftp主动模式ftp被动模式 二、vsftpd配置共享目录编辑配置文件使用windows 访问 三、客户端安装 &#xff08;lftp&#xff09;匿名用户的一些操作&#xff08;lftp {ip}&#xff09;ftp配置本地用户登录配置本地用户ftp配置文件 lftp操作 NFS远程共享存储安装n…

新的侧通道攻击可泄露处理器的 Root 密码

阿姆斯特丹自由大学的一组科学家开发了一种名为 SLAM&#xff08;Spectre Linear Address Masking&#xff09;的侧信道攻击。 该攻击利用旨在提高新型Intel、AMD 和 Arm 处理器安全性的硬件功能&#xff0c;从内核内存中提取根密码哈希。 重现 SLAM 攻击所需的代码和所有数据…

dockerfile:创建镜像的方式,船舰自定义的镜像

dockerfile&#xff1a;创建镜像的方式&#xff0c;船舰自定义的镜像 包括配置文件&#xff0c;挂载点&#xff0c;对外暴露的端口&#xff0c;设置环境变量 docker创建镜像的方式 1、基于已有镜像进行创建。 根据官方提供的镜像源&#xff0c;创建镜像&#xff0c;然后拉起…