小程序脚本语言WXS语法、渲染处理数据

在开发小程序的时候，拿到后台返回的数据前端不会进行处理直接渲染，如果需要前端处理数据，一般的处理方式就是拿到数据直接循环处理完成后再进行渲染，这样会多进行循环一次，在这里推荐一种方式，可以像vue一样在页面循环中进行处理，直接渲染

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

创建一个index.wxs文件，在这里简单以日期转换为列
index.wxs文件内容

var formatDate = function (date) {
  console.log(date)
  date = Number(date)
  var fmt = '';
  if (!date) return fmt;
  date = getDate(date);
  var obj = {
    year: date.getFullYear(),//年
    month: date.getMonth() + 1, // 月份
    day: date.getDate(), // 日
    hour: date.getHours(), // 小时
    minute: date.getMinutes(), // 分
    second: date.getSeconds(), // 秒
  }
  fmt =obj.year +'年' + obj.month +'月' + obj.day + '日 '+ obj.hour + ':' + obj.minute + ':' + obj.second
  return fmt

}
// 导出对外暴露的属性
module.exports = {
  formatDate: formatDate,
}

剩余方法的处理类似js，对于前段开发者来说很少会使用WXS语法，可以用来做简单的逻辑处理，主要使用还是js

index.wxml

<wxs src="../../static/js/api.wxs" module="tools" />
<view>
  <view style="margin-top:50px;" class="d_time fz12" wx:for="{{timeList}}">时间：{{ tools.formatDate(item.timeNum) }}</view>
</view> 

只能引用 .wxs 文件模块，且必须使用相对路径。
wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

index.js

const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    timeList:[
      {timeNum:'1615260054000'},
      {timeNum:'1615260054000'},
      {timeNum:'1615260054000'},
      {timeNum:'1615260054000'},
      {timeNum:'1615260054000'},
      {timeNum:'1615260054000'},
    ]
  },
})