微信小程序過濾器之計算當前時間差

微信小程序過濾器之計算當前時間差

  • 前言
  • 一、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.pswp.cn/news/215280.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/215280.shtml
英文地址,請注明出處:http://en.pswp.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.問題來源 這次由于甲方一月一次的漏洞掃…

Mysql表的數據類型

數據類型 https://www.sjkjc.com/mysql/varchar/ MySQL 中的數據類型包括以下幾個大類&#xff1a; 字符串類型 數字類型 日期和時間類型 二進制類型 地理位置數據類型 JSON 數據類型 MySQL 字符串數據類型 VARCHAR&#xff1a;純文本字符串&#xff0c;字符串長度是可變的…

智能優化算法應用:基于陰陽對算法3D無線傳感器網絡(WSN)覆蓋優化 - 附代碼

智能優化算法應用&#xff1a;基于陰陽對算法3D無線傳感器網絡(WSN)覆蓋優化 - 附代碼 文章目錄 智能優化算法應用&#xff1a;基于陰陽對算法3D無線傳感器網絡(WSN)覆蓋優化 - 附代碼1.無線傳感網絡節點模型2.覆蓋數學模型及分析3.陰陽對算法4.實驗參數設定5.算法結果6.參考文…

云計算、邊緣計算、霧計算

目錄 云計算邊緣計算霧計算 云計算 云計算是基于互聯網的計算模式&#xff0c;允許用戶通過網絡獲取計算資源、存儲資源、數據庫等服務&#xff0c;無需了解和管理底層 云計算是分布式計算的一種&#xff0c;指的是通過網絡“云”將巨大的數據計算處理程序分解成無數個小程序…

Java - Mybatis的緩存機制、集成SpringBoot后緩存相關問題

mybaits提供一級緩存&#xff0c;和二級緩存 一級緩存&#xff08;默認開啟&#xff09; 一級緩存是SqlSession級別的緩存。在操作數據庫時需要構造 sqlSession對象&#xff0c;在對象中有一個(內存區域)數據結構&#xff08;HashMap&#xff09;用于存儲緩存數據。不同的sqlSe…

STM32F407-14.3.1-01 時基單元

時基單元 可編程高級控制定時器的主要模塊是一個 16 位計數器及其相關的自動重載寄存器。計數器可遞增計數、遞減計數或交替進行遞增和遞減計數。計數器的時鐘可通過預分頻器進行分頻。 計數器、自動重載寄存器和預分頻器寄存器可通過軟件進行讀寫。即使在計數器運行時也可執行…

Linux ln命令教程:如何創建符號鏈接(附案例詳解和注意事項)

Linux ln命令介紹 Linux ln命令&#xff08;全稱&#xff1a;link files&#xff09;是一個非常重要的命令&#xff0c;它的功能是為某一個文件在另外一個位置建立一個同步的鏈接。當我們需要在不同的目錄&#xff0c;用到相同的文件時&#xff0c;我們不需要在每一個需要的目…

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;不影響文件的內容。…

機器學習筆記 - 隨機樣本共識(RANSAC) 算法

一、什么是 RANSAC? RANSAC(隨機樣本共識)是一種用于機器學習和計算機視覺的算法,隨機樣本共識(RANSAC)是一種迭代方法,用于根據包含異常值的數據集估計數學模型。RANSAC 算法的工作原理是識別數據集中的異常值,并使用不包含異常值的數據來估計所需的模型。 …

在Go中定義結構體

引言 圍繞具體細節構建抽象是編程語言可以提供給開發人員的最好工具。結構體允許Go開發人員描述Go程序運行的世界。結構體允許我們討論Address,而不是描述Street、 City或PostalCode的字符串。它們是我們努力告訴未來開發人員(包括我們自己)哪些數據對我們的Go程序是重要的,…

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…

js中箭頭函數簡單介紹

1.箭頭函數是 ES6 中新增的一種函數定義方式&#xff0c; 簡單舉例為 var nameA function(a){return a} 可以用箭頭函數簡化為 var nameA a >a; 返回的是你輸入的值 比如 nameA(5) 返回的就是5 nameA(2) 返回的就是2 以上兩個表達的含義是一樣的。nameA為名字 2.…

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;…