微信小程序WXS语法-时间格式化

前言

wxs模块一般用于数据处理，例如：时间格式化。如发现其他用途欢迎留言讨论～

内容主要来源于官网 WXS语法参考 不感兴趣的小伙儿伴。可以点击跳过 时间格式化

WXS概述

WXS是小程序的一套脚本语言，结合WXML，可以构建出页面的结构。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

WXS 模块

WXS 代码可以编写在 wxml 文件中的 <wxs>标签内，或以 .wxs为后缀名的文件内。

模块

1. 每一个 .wxs文件和 <wxs>标签都是一个单独的模块。
2. 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
3. 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

.wxs 文件

1. 在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。

2. 该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 标签引用

3. 每个 wxs 模块均有一个内置的 module 对象。通过exports属性，可以对外共享本模块的私有变量与函数

require函数

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。引用的时候，要注意如下几点：

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

<wxs> 标签

module 属性

module 属性是当前 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。

module 属性值的命名必须符合下面两个规则：

• 首字符必须是：字母（a-zA-Z），下划线（_）
• 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9）

src 属性

src 属性可以用来引用其他的 wxs 文件模块。引用的时候，要注意如下几点：

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

示例代码：

首先：在utils文件夹下新建time.wxs文件。

注意事项

• 在wxs文件中，生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。
• 避免使用ES6语法：如 let、const、箭头函数等

function getTime(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(':')
  }
  
  function formatNumber(n){
    n = n.toString()
    return n[1] ? n : '0'+n
  }
  
  module.exports = {
    getTime: getTime
  }
  

接着在.wxml页面中，通过wxs标签导入该文件，设置time初始值 Date.parse(new Date())

<wxs src="../../utils/time.wxs" module="tools"></wxs>

 <view>{{tools.getTime(time)}}</view>

时间展示格式如：2022/03/16 22:51:29，如需要其他时间显示格式，自行微调即可。

注意事项

• <wxs>模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或<import>时，<wxs> 模块不会被引入到对应的 WXML 文件中。
• <template>标签中，只能使用定义该 <template>的 WXML 文件中定义的 <wxs>模块。