小程序中格式化日期是个让人头疼的问题,设计给的很多日期格式。一般处理方式是在后台返回数据后,对数据进行再处理,处理成前端想要的格式,就可以。但是有一个 问题就是后台返回来的数据格式复杂的话,处理起来就很麻烦。在vue中就有filter管道来处理数据格式。如果能在小程序中实现类vue的写法那就很好了。

1.建立文件

在`根`目录下新建一个filter文件,filter文件用来处理需要格式的类型,在`filter`文件夹中新建一个`dateFr.wxs`文件,目录如
/
|
|-filter
   |--dateFr.wxs

2.编写dateFr.wxs内容

//时间格式化

function timeUtil(dat){

	if('' == dat || !dat) return '';
  
	var _date = getDate(dat); 
	
    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();

  //将小于9的字符串前缀补零
  function formatNumber(n){
    n = n.toString();
    return n[1] ? n : '0' + n;
  }
  //将时间对象转换 YYYY/MM/DD hh:mm:ss
  function timeYMDHMS(){
    return [year,month,day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');
  }
  //将时间对象转换YYYY-MM-DD hh:mm:ss
  function timeYMDHMS1(){
    return [year,month,day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':');
  }
  //将时间对象转换MM-DD hh:mm
  function timeMDhs(){
    return [month, day].map(formatNumber).join('-') + ' ' + [hour, minute].map(formatNumber).join(':');
  }
  //将时间对象转换YYYY.MM.DD
  function timeYMD(){
    return [year, month, day].map(formatNumber).join('.');
  }
  //将时间对象转换YYYY-MM-DD
  function timeYMD1(){
    return [year, month, day].map(formatNumber).join('-');
  }
  //将时间对象转换YYYY/MM/DD
  function timeYMD2(){
    return [year, month, day].map(formatNumber).join('/');
  }
  //将时间对象转换 hh:mm:ss
  function timeHMS(){
    return [hour, minute, second].map(formatNumber).join(':');
  }
  
  return {
	  timeYMDHMS:timeYMDHMS,
	  timeYMDHMS1:timeYMDHMS1,
	  timeMDhs:timeMDhs,
	  timeYMD:timeYMD,
	  timeYMD1:timeYMD1,
	  timeYMD2:timeYMD2,
	  timeHMS:timeHMS
  }
}


var DateFr = {

  timeYMDHMS: function (time) {
    return timeUtil(time).timeYMDHMS();
  },
  timeYMDHMS1: function(time){
	return timeUtil(time).timeYMDHMS1();
  },
  timeMDhs: function(time){
	return timeUtil(time).timeMDhs();  
  },
  timeYMD: function(time){
	return timeUtil(time).timeYMD();  
  },
  timeYMD1: function(time){
	return timeUtil(time).timeYMD1();  
  },
  timeYMD2: function(time){
	return timeUtil(time).timeYMD2();  
  },
  timeHMS:function(time){
	return timeUtil(time).timeHMS();  
  }
  
}

module.exports = {
  timeYMDHMS: DateFr.timeYMDHMS,
  timeYMDHMS1: DateFr.timeYMDHMS1,
  timeMDhs: DateFr.timeMDhs,
  timeYMD: DateFr.timeYMD,
  timeYMD1: DateFr.timeYMD1,
  timeYMD2: DateFr.timeYMD2,
  timeHMS: DateFr.timeHMS  
}

3.使用dateFr.wxs

在需要的wxml文件中引入

<wxs module="DateFr" src="路径/filter/dateFr.wxs"></wxs>

在需要使用的地方

	
{{ DateFr.timeYMDHMS('Mon Dec 03 2018 18:24:08 GMT+0800') }}

到这里就结束了,这样的写法就会很简单,很友好。当我们需要其他日期格式,就在timeUtil方法里面添加,然后在导出去就可以了。当我们需要处理其他类型的格式,我们可以在新建一个文件,写法和这个文件一样,把同一类型的处理都放在一起,就省事了。