前言
wxs模块一般用于数据处理,例如:时间格式化
。如发现其他用途欢迎留言讨论~
内容主要来源于官网 WXS语法参考 不感兴趣的小伙儿伴。可以点击跳过 时间格式化
WXS概述
WXS是小程序的一套脚本语言,结合WXML
,可以构建出页面的结构。WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
WXS 模块
WXS 代码可以编写在 wxml 文件中的 <wxs>
标签内,或以 .wxs
为后缀名的文件内。
模块
- 每一个
.wxs
文件和<wxs>
标签都是一个单独的模块。 - 每个模块都有自己
独立的作用域
。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。 - 一个模块要想对外暴露其内部的私有变量与函数,只能通过
module.exports
实现。
.wxs 文件
-
在微信开发者工具里面,右键可以直接创建
.wxs 文件
,在其中直接编写 WXS 脚本。 -
该
.wxs 文件
可以被其他的 .wxs 文件 或 WXML 中的 标签引用 -
每个 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>
模块。