脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序wxs日期时间

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

 更新时间：2021年07月21日 16:56:01   作者：不知道起什么名字比较有文化  
最近在做一个列表的时候，涉及到时间格式化操作。本文主要介绍了微信小程序wxs日期时间处理的实现示例，分享给大家，感兴趣的可以了解一下

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日期时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 页面中js执行顺序

    页面中js执行顺序

    页面中js的执行顺序：在页面的head标签中添加一段js代码，在页面的尾部也就是</body>之前添加一段代码，然后在body的onload事件中引用一个函数，此三者的执行顺序如何?
    2009-11-11
  • JavaScript中双符号的运算详解

    JavaScript中双符号的运算详解

    这篇文章主要给大家介绍了JavaScript中双符号的运算，其中包括双波浪号和双感叹号的运算，文中给出了详细的示例代码，需要的朋友们可以参考借鉴，下面来一起看看吧。
    2017-03-03
  • ES6中新增的Object.assign()方法详解

    ES6中新增的Object.assign()方法详解

    Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ），下面这篇文章主要给大家介绍了关于ES6中新增的Object.assign()方法的相关资料，需要的朋友可以参考下。
    2017-09-09
  • JavaScript获取URL参数的方法分享

    JavaScript获取URL参数的方法分享

    这篇文章主要介绍了JavaScript获取URL参数的方法分享，主要包括字符串 split 方法、 URLSearchParams 方法、正则匹配方法等，具有一定的参考价值需要的小伙伴可以参考一下
    2022-04-04
  • javascript 限制输入脚本大全

    javascript 限制输入脚本大全

    javascript限制输入脚本大全 ,方便网页设计的朋友经常能用的到，建议收藏下。代码有点慢，大家慢慢看啊。
    2009-11-11
  • 浅谈javascript获取元素transform参数

    浅谈javascript获取元素transform参数

    本文主要给大家简单介绍了javascript获取元素的transform参数的方法以及个人的理解，记录下来分享给大家。
    2015-07-07
  • js实现三级联动效果（简单易懂）

    js实现三级联动效果（简单易懂）

    本文主要介绍了js实现三级联动效果的示例代码，简单易懂。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码

    一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码

    兼容IE、Firefox、Opera前几天在网上找了许多资料，看了不少兄弟的源码，一直找不到合适的，要不就是拖动有问题，要不就是不兼容Firefox，所以自已写了一个，下面是代码：
    2008-04-04
  • 判断某个字符在一个字符串中是否存在的js代码

    判断某个字符在一个字符串中是否存在的js代码

    这篇文章主要介绍了判断某个字符在一个字符串中是否存在的方法,需要的朋友可以参考下
    2014-02-02
  • js显示动态时间的方法详解

    js显示动态时间的方法详解

    这篇文章主要介绍了js显示动态时间的方法,较为详细的分析了javascript中Date对象的常用方法及功能,并结合实例形式分析了JS时间显示功能,需要的朋友可以参考下
    2016-08-08

最新评论