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

目录
  • 1、时间戳转日期
  • 2、UTC转北京时间

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

(0)

相关推荐

  • 微信小程序实现通过js操作wxml的wxss属性示例

    本文实例讲述了微信小程序实现通过js操作wxml的wxss属性.分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中操作wxss的属性. 实现思路: 通过利用数据绑定实现动态改变样式, 1.在wxxml标签内嵌css属性上绑定js的date值 2.通过js中绑定css属性的date值改变wxml标签内嵌的css属性

  • 微信小程序学习之wxs使用教程

    什么是wxs? wxs(WeiXin Script)是小程序的一套脚本语言, 结合WXML, 可以构建出页面结构. wxs标签 <wxs module="utils" src="../../wxs/test.wxs"></wxs> module属性: 当前标签的模块名, 建议该值唯一, 若存在同名的模块名,则按照先后顺序覆盖(后者会覆盖前者). src属性: a. 只能引用.wxs文件, 且必须是相对路径; b. wxs模块均为单例, wxs

  • 微信小程序中使用wxss加载图片并实现动画效果

    记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bW

  • 小程序使用wxs解决wxml保留2位小数问题

    1.出现溢出表现 从图中可以看到数字超出了很长长度.代码里面是如下这样的.为什么在0.35出现?或者一些相成的计算出现? 而 0.34却不会. 0.41 也会出现,好像是二进制运算出现结果. data: { price:0.01, num:35 }, wxml文件仅仅是处理一个相处的结果. <view> {{price*num}} </view> 2.在wxml文件加入一个约束2位小数操作 在wxml文件里面创建一个方法,调用的时候就可以直接使用保留2位小数的问题了.创建一个wxs

  • 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

  • 微信小程序 less文件编译成wxss文件实现办法

    less文件编译成微信小程序wxss文件 2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜. 在做demo小示例的过程中,我发现了一个极为让人为难的事儿:**如何让 less/sass 文件转成小程序的 wxss 文件**.</font> 对于基本不使用原生css,而习惯编写less的我,这个事儿让我的样式编写相当的吃力. 在尝试配置koala (一个可以编译less

  • 微信小程序 教程之WXSS

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML WXSS WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言,用于描述WXML的组件样式. WXSS用来决定WXML的组件应该怎么显示. 为了适应广大的前端开发者,我们的WXSS具有CSS大部分特性. 同时为了更适合开发微信小程序,我们对CSS进行

  • 微信小程序搜索组件wxSearch实例详解

    wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

  • 微信小程序wxs实现吸顶效果

    在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟), 所以使用wxs响应事件来实现吸顶效果.wxs响应事件基础库 2.4.4 开始支持,低版本需做兼容处理. 附上文档链接:wxs响应事件 吸顶效果 使用scroll-view组件实现滚动效果,页面和scroll-view组件的高度设成100%,当竖向滚动条大于等于导航到顶部距离时,导航变成固定定位,固定显示在

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

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

  • 微信小程序实现日期时间筛选器

    开发微信小程序过程中,有个需求需要用到日期时间筛选器,查看微信官方文档后,发现官方文档的picker筛选器只能单独支持日期或者是时间,所以为了实现需求自己参考企业微信封装了个日期时间筛选器组件. 原理 筛选器的实现,我参考的是小程序官方方式,通过半屏弹窗(mp-half-screen-dialog)结合picker_view进行日期.时间的选择,最终在选择时间后,通过事件触发返回一个change事件,其中参数值为毫秒级时间戳. 实现 1.弹窗的显隐: 在组件的 properties 中传入一个

  • 微信小程序 选择器(时间,日期,地区)实例详解

    微信小程序 选择器(时间,日期,地区) 微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti

  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 详解微信小程序获取当前时间及日期的方法

    获取当前时间 首先,在要获取时间的.js文件中加载util.js文件 然后在onload方法中,调用util.js中的formatTime方法获取当前时间 //获取当前时间 // 调用函数时,传入new Date()参数,返回值是日期和时间 var TIME = util.formatTime(new Date()); this.setData({ time: TIME, }); 这样就获取到了当前时间,但是我们发现在util.js中并没有获取当前日期的方法. 没事,别慌! 这个时候我们去看下u

  • 微信小程序  滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序实现日期格式化和倒计时

    本文实例为大家分享了微信小程序实现日期格式化和倒计时的具体代码,供大家参考,具体内容如下 首先看看日期怎么格式化 第一种: Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+&q

  • 微信小程序获取当前时间及星期几的实例代码

    效果图如下所示 实例代码如下: util.js function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() return [year, month, d

  • 微信小程序实现日期范围选择

    本文实例为大家分享了微信小程序实现日期范围选择的具体代码,供大家参考,具体内容如下 样式如下: 分别点击开始日期和结束日期选择时间(底部弹框): date.wxml:  <view class="range-style mar-top">                 <view class="picker-title">日期范围:</view>                 <!-- 时间段 -->      

  • 微信小程序的日期选择器的实例详解

    微信小程序的日期选择器的实例详解 前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码: <!---js---> const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,

随机推荐