小程序的四次元口袋：如何使用wxs在wxml文件对时间戳进行格式化

如何使用wxs在wxml文件对时间戳进行格式化

问题描述：

wxs中使用date创建实例报错
报错信息Uncaught SyntaxError: Invalid or unexpected token
 

问题代码：

filter.js文件

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
};

// 将时间进行格式化事件
const formatDate = date=>{
  // 将日期时间字符串转换成日期对象
  date = new Date(date);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  return year + "年" + month + "月" + day + "日";
};

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime,
  formatDate: formatDate
}

问题分析：

1. 在wxml不可导入js文件进行处理，应当将js文件转成wxs文件
2. wxs文件中补课使用js的定义函数和变量，也不可使用小程序API，它的运行环境和js不同，是单独的
3. wxs文件中不可使用es6的内容，不可使用const、let等定义变量，只可使用var
4. 在格式化事件戳的时候不可使用new Date()，只能使用getDate()

问题解决:

filter.wxs

// wxs中不可使用const let 等es6的内容，而应该使用es5的函数格式
var formatTime = function(date) {
    var date = getDate(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, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
};

// 将时间进行格式化事件
var formatDate = function(date) {
    // 将日期时间字符串转换成日期对象
    // wxs中不可以使用js的对象格式，而应该使用getDate()
    // var date = new Date(date);
    var date = getDate(date)
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();

    return year + "年" + month + "月" + day + "日";
};

var formatNumber =function(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
}

module.exports = {
    formatTime: formatTime,
    formatDate: formatDate
}

接下来在wxml文件中导入使用：

<!-- 导入时间转换模块 -->
<wxs src="../../utils/filter.wxs" module="filters"/>

<text class="forcast_time">{{filters.formatDate(item.updateAt)}}</text>

运行结果如下：

最后终于解决了这个BUG，有机会去解决下一个BUG了。