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

news2024/12/23 10:20:24

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

  • 前言
  • 一、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.coloradmin.cn/o/1303365.html

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

相关文章

Linux系统vim,gcc,g++工具使用及环境配置,动静态库的概念及使用

Linux系统vim&#xff0c;gcc&#xff0c;g工具使用及环境配置&#xff0c;动静态库的概念及使用 1. Linux编辑器-vim的使用1.1 vim的基本概念1.2vim的基本操作1.3vim正常模式命令集1.4vim末端模式命令集1.5简单的vim配置 2.Linux编译器-gcc/g的使用2.1 准备阶段2.2gcc的使用2.…

DevEco Studio将编辑器整体文本改为简体中文

我们打开编辑器 随便进入一个项目 这里 我们左上角目录 选择 File下面菜单中的 Settings… 打开配置界面 然后在设置窗口左侧导航栏中 选择 Plugins 插件 然后上方导航栏中 选择 Installed 参考下图 然后 找到这个Chinese(Simplified) Chinese是什么应该不用我多说吧 我们把…

多合一iPhone 解锁工具:iMyFone LockWiper iOS

多合一iPhone 解锁工具 无需密码解锁 iPhone/iPad/iPod touch 上所有类型的屏幕锁定 在几分钟内解锁 iPhone Apple ID、Touch ID 和 Face ID 立即绕过 MDM 并删除 iPhone/iPad/iPod touch 上的 MDM 配置文件 支持所有 iOS 版本和设备&#xff0c;包括最新的 iOS 17 和 iPhone 1…

从零构建属于自己的GPT系列5:模型部署1(文本生成函数解读、模型本地化部署、文本生成文本网页展示、代码逐行解读)

&#x1f6a9;&#x1f6a9;&#x1f6a9;Hugging Face 实战系列 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在PyCharm中进行 本篇文章配套的代码资源已经上传 从零构建属于自己的GPT系列1&#xff1a;数据预处理 从零构建属于自己的GPT系列2&#xff1a;模型训…

Nginx的location和rewrite的使用

目录 常用的Nginx 正则表达式 location location 大致可以分为三类&#xff1a; 精准匹配&#xff1a;location / {...} 一般匹配&#xff1a;location / {...} 正则匹配&#xff1a;location ~ / {...} location 常用的匹配规则 location 优先级 location 示例说明…

day45-46-Vue+ElementUI实现学生管理

VueElementUI实现学生管理 代码&#xff1a; qiushiju/java2313_vue_elementui_crud (gitee.com) 一、思考 考虑需求&#xff08;登录&#xff0c;查询全部&#xff0c;基本增删改查&#xff0c;分页&#xff0c;搜索&#xff0c;批量&#xff09; 设计数据库搭建项目 后端…

【开源】基于Vue+SpringBoot的教学资源共享平台

文末获取源码&#xff0c;项目编号&#xff1a; S 068 。 \color{red}{文末获取源码&#xff0c;项目编号&#xff1a;S068。} 文末获取源码&#xff0c;项目编号&#xff1a;S068。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课…

算法:买卖股票的最佳时机(快慢指针和动态规划)

快慢指针 时间复杂度 O(n) 空间复杂度 O(1) /*** param {number[]} prices* return {number}*/ var maxProfit function (prices) {let l 0let r 1let temp 0while (r < prices.length - 1) {// 如果当前左值大于右值说明当前不是最佳买入时机// 所以将右指针赋值给左指…

2023年华为HCIA认证H12-811题库讲解

在VRP平台上&#xff0c;可以通过下面哪种方式返回到上一条历史命令&#xff1f;&#xff08; &#xff09; A、Ctr1U B、Ctr1P C、左光标 D、上光标 试题答案&#xff1a;BD 试题解析&#xff1a;在VRP系统中&#xff0c;ctrlU为自定义快捷键&#xff0c;ct…

六级高频词组2

目录 词组 参考链接 词组 51. arise from&#xff08;be caused by&#xff09; 由…引起。 52. arrange for sb.sth. to do sth. 安排…做… 53. arrive on 到达&#xff1b; arrive at 到达某地&#xff08;小地方&#xff09;&#xff1b;得出&#xff0c;作出&#x…

EasyExcel使用模板导出复杂Excel

1&#xff09;添加easyexlce的依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.0.0-beta1</version> </dependency>2&#xff09;添加excel模板文件 实现的效果&#xff1a;…

k8s一键部署uniswap

1、拉取uniswap源码 github地址 2、编写Dockerfile并打镜像 # Set the base image FROM node:18.10.0# WORKDIR /usr/src/app/ WORKDIR /home/gateway# Copy files COPY ./ /home/gateway/# Dockerfile author / maintainer LABEL maintainer"Michael Feng <mikehummi…

VSCode使用Remote-SSH连接服务器时报错:无法与“***”建立连接: XHR failed.

关于VSCode的报错问题&#xff1a;无法与“***”建立连接: XHR failed 问题描述问题理解解决方法手动在本地下载安装包&#xff0c;然后手动传到服务器端 问题描述 是的&#xff0c;我又踩坑了&#xff0c;而且这个弄了好久&#xff0c;也重新装了VSCode软件&#xff0c;好像结…

IDEA 2023.3 start failed 启动失败修复

发现是 RestfulToolkit 插件有冲突导致的&#xff0c;删除插件后成功启动 open ~/Library/Application\ Support/JetBrains/IntelliJIdea2023.3/plugins参考&#xff1a;https://youtrack.jetbrains.com/issue/IDEA-340080/Critical-startup-error-after-upgrading-to-Intelli…

Xxl-Job在Linux环境下安装部署

文章目录 Xxl-Job简介环境准备安装下载安装包解压安装包初始化数据库文件修改配置文件打包启动 访问 Xxl-Job简介 Xxl-Job是一个分布式任务调度平台&#xff0c;作者是美团的研发工程师许雪里&#xff0c;Xxl命名的由来盲猜是作者的名字首字母&#xff0c;Job为任务。 环境准…

深入理解模板引擎:解锁 Web 开发的新境界(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

服务器数据恢复—raid5少盘状态下新建raid5如何恢复原raid5数据?

服务器数据恢复环境&#xff1a; 一台服务器上搭建了一组由5块硬盘组建的raid5阵列&#xff0c;服务器上层存放单位重要数据&#xff0c;无备份文件。 服务器故障&分析&#xff1a; 服务器上raid5有一块硬盘掉线&#xff0c;外聘运维人员在没有了解服务器具体情况下&#x…

【C语言程序设计】顺序结构程序设计

目录 前言 一、程序阅读 二、程序改错 三、程序设计 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1f4da;。 &#x1f4e3;如需转…

简单的 u-popup 弹出框

uniapp中的popup组件可以用于弹出简单的提示框、操作框、菜单等。它可以通过position属性控制弹出框的位置&#xff0c;不同的position值会使得弹出框呈现不同的弹出形式 目录 一、实现思路 二、实现步骤 ①view部分展示 ②JavaScript 内容 ③css中样式展示 三、效果展示 …

计算机网络:网络层上(数据平面)

文章目录 前言一、概述1.网络服务模型2.连接建立 二、路由器组成路由器结构概况输入端口的功能交换结构输出端口 三、IP&#xff08;Internet Protocol&#xff09;IPV4IPV6 四、通用转发和SDN总结 前言 网络层分两部分讲解&#xff0c;本篇文章讲解数据平面的内容&#xff1a…