小程序脚本语言——SJS 语法参考

IoT砖家涂拉拉2024-02-04 1:07

SJS（safe/subset javascript） 是小程序的一套脚本语言，结合 tyml，可以构建出页面的结构。

注意事项

  1. SJS 的运行环境和其他 JavaScript 代码是隔离的，SJS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的 API。
  2. SJS 与 JavaScript 在语法上并不和 JavaScript 完全一致。

SJS 模块

SJS 代码可以编写在 tyml 文件中的 标签内，或以 .sjs 为后缀名的文件内，每一个 .sjs 文件和 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

模块导出

一个模块要想对外暴露其内部的私有变量与函数，可以通过模块化语法 module.exports export default exports 导出。

复制代码 
export const message = 'hello tuya';
export const getMsg = (x) => x;
 
// export default
export default {
  message,
  getMsg,
};
 
// module.exports
module.exports = {
  message,
  getMsg,
};
require 函数

在 .sjs 模块中引用其他 sjs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

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

示例代码

复制代码 
// /a.sjs
export const message = 'hello tuya';

// /b.sjs
var a = require('./a.sjs');
console.log(a.message);

<!-- /page/index/index.tyml -->
<sjs src="./b.sjs" module="b" />

控制台输出：

复制代码 
hello tuya
标签
属性名 类型 默认值 说明
module string 当前 标签的模块名。必填字段。
src string 引用 .sjs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。
module 属性

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

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

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

示例代码：

复制代码 
<!--tyml-->
 
<sjs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</sjs>
<view> {{foo.msg}} </view>

页面输出：

复制代码 
hello world

上面例子声明了一个名字为 foo 的模块，将 some_msg 变量暴露出来，供当前页面使用。

src 属性

src 属性可以用来引用其他的 sjs 文件模块。

引用的时候，要注意如下几点：

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

示例代码：

复制代码 
// /pages/index/index.js
 
Page({
  data: {
    msg: "'hello world' from js",
  },
});

<!-- /pages/index/index.tyml -->
 
<sjs src="./../comm.sjs" module="some_comms"></sjs>
<!-- 也可以直接使用单标签闭合的写法
<sjs src="./../comm.sjs" module="some_comms" />
-->
 
<!-- 调用 some_comms 模块里面的 bar 函数，且参数为 some_comms 模块里面的 foo -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
<!-- 调用 some_comms 模块里面的 bar 函数，且参数为 page/index/index.js 里面的 msg -->
<view> {{some_comms.bar(msg)}} </view>

页面输出：

复制代码 
'hello world' from comm.sjs
'hello world' from js

上述例子在文件 /page/index/index.tyml 中通过 标签引用了 /page/comm.sjs 模块。

注意事项

模块只能在定义模块的 tyml 文件中被访问到。使用 或 时， 模块不会被引入到对应的 tyml 文件中。