全部产品
云市场

SJS 介绍

更新时间:2019-09-09 14:06:36

SJS(safe/subset javascript)是小程序一套自定义脚本语言,可以在 AXML 中使用其构建页面结构。

SJS 是 JavaScript 语言的子集,与 JavaScript 是不同的语言,故二者语法并不一致,请勿将其等同于 JavaScript。

使用方式

.sjs 文件中定义 SJS:

  1. // pages/index/index.sjs
  2. const message = 'hello alipay';
  3. const getMsg = x => x;
  4. export default {
  5. message,
  6. getMsg,
  7. };
  1. // pages/index/index.js
  2. Page({
  3. data: {
  4. msg: 'hello taobao',
  5. },
  6. });
  1. <!-- pages/index/index.axml -->
  2. <import-sjs name="m1" from="./index.sjs"/>
  3. <view>{{m1.message}}</view>
  4. <view>{{m1.getMsg(msg)}}</view>

页面输出:

  1. hello alipay
  2. hello taobao
说明
  • SJS 只能定义在 .sjs 文件中。然后在 AXML 中使用 <import-sjs> 标签引入。
  • SJS 可以调用其他 .sjs 文件中定义的函数。
  • SJS 是 JavaScript 语言的子集,请勿将其等同于 JavaScript。
  • SJS 的运行环境和其他 JavaScript 代码是隔离的, SJS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的 API。
  • SJS 函数不能作为组件事件回调。
  • SJS 不依赖于基础库版本,可以在所有版本小程序中运行。

import-sjs 标签

属性 类型 是否必填 说明
name String 当前 <import-sjs> 标签的模块名。
from String 引用 .sjs 文件的相对路径。
说明
  • name 属性指定当前 <import-sjs> 标签的模块名。在单个 AXML 文件内,建议将 name 值设为唯一。若有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同 AXML 文件之间的 <import-sjs> 模块名不会相互覆盖。
  • name 属性可使用一个字符串表示默认模块名,也可使用 {x} 表示命名模块的导出。

示例代码:

  1. // pages/index/index.js
  2. Page({
  3. data: {
  4. msg: 'hello alipay',
  5. },
  6. });
  1. // pages/index/index.sjs
  2. function bar(prefix) {
  3. return prefix;
  4. }
  5. export default {
  6. foo: 'foo',
  7. bar: bar,
  8. };
  1. // pages/index/namedExport.sjs
  2. export const x = 3;
  3. export const y = 4;
  1. <!-- pages/index/index.axml -->
  2. <import-sjs from="./index.sjs" name="test"></import-sjs>
  3. <!-- 也可以直接使用单标签闭合的写法
  4. <import-sjs from="./index.sjs" name="test" />
  5. -->
  6. <!-- 调用 test 模块里面的 bar 函数,且参数为 test 模块里面的 foo -->
  7. <view> {{test.bar(test.foo)}} </view>
  8. <!-- 调用 test 模块里面的 bar 函数,且参数为 page.js 里面的 msg -->
  9. <view> {{test.bar(msg)}} </view>
  10. <!-- 支持命名导出(named export) -->
  11. <import-sjs from="./namedExport.sjs" name="{x, y: z}" />
  12. <view>{{x}}</view>
  13. <view>{{z}}</view>

页面输出:

  1. foo
  2. hello alipay
  3. 3
  4. 4
说明
  • 引用时务必使用 .sjs 文件后缀。
  • 若定义了一个 .sjs 模块,但从未引用,则该模块不会被解析与运行。