微信小程序過濾器之計算當前時間差
- 前言
- 一、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>
結果對比