All Products
Search
Document Center

SJS introduction

Last Updated: Feb 04, 2021

SJS (safe/subset javascript) is a set of custom scripting language for Mini Program and can be used in AXML to build page structure.

SJS is a subset of JavaScript language but different from JavaScript. Do not equate SJS with JavaScript, because their syntax are different.

Usage

Define SJS in .sjs file:

  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>

Output on the page:

  1. hello alipay
  2. hello taobao
Note:
  • SJS can only be defined in .sjs files. Use <import-sjs> tag in AXML to import SJS.
  • SJS can call functions defined in other .sjs files.
  • SJS is a subset of JavaScript language, do not equate SJS with JavaScript.
  • The SJS runtime environment is isolated from other JavaScript codes. Therefore, SJS cannot call functions defined in other JavaScript files nor APIs provided by Mini Program.
  • SJS functions cannot be used as component event callbacks.
  • SJS does not depend on the base library version and can run in Mini Program of all versions.

import-sjs tag

Attribute Type Mandatory Description
name String Yes The module name of the current <import-sjs> tag.
from String Yes The relative path of the imported .sjs file.
Note:
  • The name attribute specifies the module name of the current <import-sjs> tag. You are recommended to set a unique name value in an individual AXML file. If module names are identical, they are overwritten in sequence (the latter overwrites the former). The <import-sjs> module names in different AXML files do not overwrite each other.
  • The value of the name attribute can be a string to represent the default module name, or a {x} to represent the export of the named module.

Code sample:

  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. <! -- You can also use one closing tag.
  4. <import-sjs from="./index.sjs" name="test" />
  5. -->
  6. <! -- Call the bar function in the test module, and the argument is foo in the test module.
  7. <view> {{test.bar(test.foo)}} </view>
  8. <! -- Call the bar function in the test module, and the argument is msg in the page.js.
  9. <view> {{test.bar(msg)}} </view>
  10. <! -- Support named export -->
  11. <import-sjs from="./namedExport.sjs" name="{x, y: z}" />
  12. <view>{{x}}</view>
  13. <view>{{z}}</view>

Output on the page:

  1. foo
  2. hello alipay
  3. 3
  4. 4
Note:
  • Be sure to use .sjs file suffix when you import an .sjs file.
  • If an .sjs module is defined but not imported, the module will not be parsed or run.