微信小程序-wxs实现时间格式化过滤器（正则）

背景

正文

wxs

wxml

背景

最近开发小程序的过程中，发现需求中有大量需要转换时间的地方，而且每个地方转换的时间格式都不一样，于是就想，小程序中是否有Vue的过滤器一样的方式，直接在输出到html时进行时间格式化操作，这样可以节省很多的时间花在处理数据中的时间格式化上，毕竟大量的数据都是以数组的形式传给前端，如果在pageJs中处理需要大量的循环操作，性能低且繁琐！

正文

言归正传，小程序中到底有没有类似Vue的过滤器呢！答案是很明显的，小程序那么强大的东东，怎么可能不支持这玩意儿呢！在此处，我们需要使用到小程序中的一个wxs的文件辅助我们实现过滤器功能。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

wxs文件比较特殊，他不是单纯的javascript脚本语言，而是微信自己出的一套语言规范，其中有很多javascript种可以正常使用的功能，如new Date(),/\d*/gi等在这里都有另外一种使用方式。具体详见官方文档：

wxs微信官方解释文档

我们的过滤器就需要依赖这个wxs,废话不多说，咱直接贴代码吧。

wxs

首先，我们创建一个wxs文件，此处命名为：timeUtil.wxs


var formatNumber = function(n){n = n.toString()return n[1] ? n : '0' + n
}var regYear = getRegExp("(y+)", "i");var dateFormat = function(timestamp,format){if (!format) {format = "yyyy-MM-dd hh:mm:ss";}timestamp = parseInt(timestamp);var realDate = getDate(timestamp);function timeFormat(num) {return num < 10 ? '0' + num : num;}var date = [["M+", timeFormat(realDate.getMonth() + 1)],["d+", timeFormat(realDate.getDate())],["h+", timeFormat(realDate.getHours())],["m+", timeFormat(realDate.getMinutes())],["s+", timeFormat(realDate.getSeconds())],["q+", Math.floor((realDate.getMonth() + 3) / 3)],["S+", realDate.getMilliseconds()],];var reg1 = regYear.exec(format);// console.log(reg1[0]);if (reg1) {format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length));}for (var i=0;i<date.length;i++) {var k = date[i][0];var v = date[i][1];var reg2 = getRegExp("(" + k + ")").exec(format);if (reg2) {format = format.replace(reg2[1], reg2[1].length == 1? v : ("00" + v).substring(("" + v).length));}}return format;
}module.exports = {dateFormat: dateFormat
};

wxml

我们定义好了我们的过滤器之后，就需要在wxml中进行调用

<wxs module="dateUtil" src="../../wxs/timeUtil.wxs"></wxs>
<!--index.wxml-->
<view class="container"><view><!-- 不指定格式则默认输出：yyyy-MM-dd hh:mm:ss 格式 -->{{dateUtil.dateFormat('1537578367970')}}</view><view><!-- 第一个参数为当前时间戳，第二个参数为指定时间输出格式，如下 -->{{dateUtil.dateFormat('1537578367970','yyyy/MM/dd')}}</view></view>

好了，过滤器已经绑定好了，来看看输出结果是否是我们的预期：

完美！！！

微信小程序-wxs实现时间格式化过滤器（正则）相关推荐

微信小程序时间加法_微信小程序获取系统时间、时间戳、时间时间戳加减
微信小程序获取系统时间.时间戳.时间时间戳加减,微信小程序获取明天时间 //获取当前时间戳 var timestamp = Date.parse(new Date()); timestamp = ti ...
微信小程序账号长时间未登录冻结解封
微信小程序账号长时间未登录冻结解封 1.账号找回链接[官方]:http://mp.weixin.qq.com/acct/findacct?action=scan 2.按照官方指引的三个操作步骤进操作, ...
微信小程序渲染实时时间
微信小程序渲染实时时间 1.看看在框架目录中是否有util文件夹,它用来存放工具栏的JavaScript函数 2.在要获取时间的.js文件中加载util.js文件 3.在onload方法中,调用uti ...
关于微信小程序iOS端时间格式兼容问题
关于微信小程序iOS端时间格式兼容问题在自己开发中,当时间格式为 2020-06-29 08:00 ,需要将时间转为其他格式时,Android端转换成功,iOS端报错或是转为NaN. 解决方法: 1 ...
创建微信小程序日期和时间的组件
效果如下微信小程序 1.首先创建一个components,接着创建一个文件picker 2.在picker.wxml文件里写入: <picker mode="multiSelecto ...
微信小程序如何获取时间
微信小程序虽然还在内测,但是已经火的不行.赶紧看看.记录学习路上的点点滴滴. 获取时间直接用 Date.now() 得到一串数字.如下图: 获取格式化的时间用 util.formatTime(new ...
微信小程序wxs封装使用以及公共js组件封装
wxs封装 wxs可以直接写在wxml页面中,并且在对应的位置调用,比如在{{ xxx.xxx() }}调用wxs的函数 <view><view>第{{m1.getMax(1) ...
微信小程序 - 获取当前日期时间（函数封装）
效果图前言摘自微信小程序 demo 程序中 utils.js 方法. 普通 new Date() 出来的日期时间,并不是我们想要的格式,所以要进行格式整理. 解决方案打开 utils.js 文件 ...
微信小程序之日期时间筛选器实现（支持年月日时分）
开发微信小程序过程中,有个需求需要用到日期时间筛选器,查看微信官方文档后,发现官方文档的picker筛选器只能单独支持日期或者是时间,所以为了实现需求自己参考企业微信封装了个日期时间筛选器组件. 写在 ...
微信小程序 Canvas 自定义时间显示器数码管显示
微信小程序自定义时间显示器Demo 废话不多话,还是依旧上图再说,哈哈怎么样,效果还是不错的吧,因项目要求,要画出类似于数码管显示的时间样式,没办法,虽然不咋过好弄,但工作毕竟得做,于是乎,楼主,花 ...

微信小程序-wxs实现时间格式化过滤器（正则）

背景

正文

wxs

wxml

微信小程序-wxs实现时间格式化过滤器（正则）相关推荐

最新文章

热门文章