微信小程序wxs日期时间处理的实现示例

 更新时间:2021年7月22日 00:00  点击:2702

WXS(WeiXin Script)是小程序的一套脚本语言,wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。其中包括了很多日常使用的javascript函数,在wxs中都是不能同样使用的。最近在做一个列表的时候,涉及到时间格式化操作。就遇到了这个问题,以前写好了的格式化工具函数直接拷贝到小程序项目的wxs文件中,函数不能正常执行。其中包括了下面的几个错误

  • 正则表达式在字符串的replace函数中的使用方法不一样,不能直接使用var a = /[0-9]/这种方式声明使用。正确的方式为var reg = getRegExp("-", “g”);
  • 获取当前时间不能通过new Date()获取,而是通过getDate方法获取。
  • getDate(‘2018/12/12')可以获取对应日期的date类型的时间。

1、时间戳转日期

在wxs中处理日期需要使用getDate(time),而不能使用new Date()来处理日期

在wxs文件中

var filter = {
    formatNumber: function (n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      },
    parseTime: function (time, type) {
        if (time == null || type == '') {
          return ''
        }
        if (arguments.length === 0) {
          return null
        }
        var date = getDate(time);//在wxs中不能使用new Date()来处理日期
        console.log("date", date);
        var y = date.getFullYear();
        var m = filter.formatNumber(date.getMonth() + 1);
        var d = filter.formatNumber(date.getDate());
        var h = filter.formatNumber(date.getHours());
        var i = filter.formatNumber(date.getMinutes());
        var s = filter.formatNumber(date.getSeconds());
        var a = filter.formatNumber(date.getDay());
        var time_str = "";
        if (type == 'month') {
          time_str = y + '-' + m;
        } else if (type == 'date') {
          time_str = y + '-' + m + '-' + d;
        } else if (type == 'datetime') {
          time_str = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
        } else if (type == 'onlyMonth') {
          time_str = m;
        } else if (type == 'onlyYear') {
          time_str = y;
        }
        return time_str
      },
 }
module.exports = {
    parseTime: filter.parseTime,
}

在wxml中使用

<wxs module="filters" src="../../../filters/filter.wxs"></wxs>
<text>{{filters.parseTime(time,'date')}}</text>

2、UTC转北京时间

UTC时间比北京时间晚8小时,在苹果手机上需要去除"Z"后再处理时间

var filter = {
    formatNumber: function (n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      },
    parseTime: function (time, type) {
    if (time == null || time == '') {
      return ''
    }
    if (arguments.length === 0) {
      return null
    }
    var date;
    if (typeof time === 'object') {
      date = time
    } else {
      if (('' + time).length === 10) {
        time = parseInt(time) * 1000
      } else {
        time = time.replace("Z", " ").replace(getRegExp('-', 'g'), "/")//去除Z,兼容苹果手机
        var ts = time.split('T')
        var t1 = ts[0]
        var t2 = ts[1].split('.')[0]
        time = t1 + " " + t2
        time = getDate(time).getTime() + 8 * 3600000;//utc时间与北京时间相差8小时
      }
      date = getDate(time)//不能使用new Date()
    }
    var y = date.getFullYear();
    var m = filter.formatNumber(date.getMonth() + 1);
    var d = filter.formatNumber(date.getDate());
    var h = filter.formatNumber(date.getHours());
    var i = filter.formatNumber(date.getMinutes());
    var s = filter.formatNumber(date.getSeconds());
    var a = filter.formatNumber(date.getDay());
    var time_str = "";
    if (type == 'month') {
      time_str = y + '-' + m;
    } else if (type == 'date') {
      time_str = y + '-' + m + '-' + d;
    } else if (type == 'datetime') {
      time_str = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
    } else if (type == 'onlyMonth') {
      time_str = m;
    } else if (type == 'onlyYear') {
      time_str = y;
    }
    return time_str
  },
}
module.exports = {
    parseTime: filter.parseTime,
}

到此这篇关于微信小程序 wxs日期时间处理的实现示例的文章就介绍到这了,更多相关小程序 wxs日期时间内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

[!--infotagslink--]

相关文章

  • 在java中获取List集合中最大的日期时间操作

    这篇文章主要介绍了在java中获取List集合中最大的日期时间操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-15
  • 教你怎么用Java获取国家法定节假日

    这篇文章主要介绍了教你怎么用Java获取国家法定节假日,文中有非常详细的代码示例,对正在学习java的小伙伴们有非常好的帮助,需要的朋友可以参考下...2021-04-23
  • 微信小程序 页面传值详解

    这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
  • .NET/C# 使用Stopwatch测量运行时间

    这篇文章主要介绍了.NET/C# 使用Stopwatch测量运行时间,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
  • mysql中获取一天、一周、一月时间数据的各种sql语句写法

    创建表:复制代码 代码如下:create table if not exists t( id int, addTime datetime default '0000-00-00 00:00:00′)添加两条初始数据:insert t values(1, '2012-07-12 21:00:00′);insert t values(2, '2012-07...2014-05-31
  • JS日期加减,日期运算代码

    一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08
  • uniapp微信小程序:key失效的解决方法

    这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
  • php计算两个日期相差天数的方法

    本文实例讲述了php计算两个日期相差天数的方法。...2015-03-15
  • PHP常用的小程序代码段

    本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考,具体如下:1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24
  • PostgreSQL 字符串处理与日期处理操作

    这篇文章主要介绍了PostgreSQL 字符串处理与日期处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-01
  • 常用的日期时间正则表达式

    常用的日期时间正则表达式 下面收藏了大量的日期时间正则匹配函数,包括分钟,时间与秒都能达到。 正则表达式 (?n:^(?=d)((?<day>31(?!(.0?[2469]|11))|30(?!.0?2)|29(...2016-11-25
  • vue开发之moment的介绍与使用

    moment是一款多语言支持的日期处理类库, 在vue中如何使用呢?这篇文章主要给大家介绍了关于vue之moment使用的相关资料,需要的朋友可以参考下...2021-05-13
  • 微信小程序二维码生成工具 weapp-qrcode详解

    这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
  • 非常全面的php日期时间运算汇总

    实例讲解之前,先来介绍几个核心函数: mktime 函数 mktime() 函数返回一个日期的 Unix 时间戳。 参数总是表示 GMT 日期,因此 is_dst 对结果没有影响。 参数可以从右到左依次空着,空着的参数会被设为相应的当前 GMT 值。...2015-11-08
  • C#中动态显示当前系统时间的实例方法

    想在网页中动态地显示当前系统的时间,找了好多,不过都是一些停在那里不动的。。。不过皇天不负有心人,终于让我找到了...2020-06-25
  • 微信小程序 网络请求(GET请求)详解

    这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
  • 微信小程序自定义tabbar组件

    这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
  • 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
  • C#实现将字符串转换成日期格式的方法

    这篇文章主要介绍了C#实现将字符串转换成日期格式的方法,涉及C#操作时间及字符串的相关技巧,非常简单实用,需要的朋友可以参考下...2020-06-25
  • Python爬取微信小程序通用方法代码实例详解

    这篇文章主要介绍了Python爬取微信小程序通用方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-29