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 (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:
// pages/index/index.sjs
const message = 'hello alipay';
const getMsg = x => x;
export default {
message,
getMsg,
};
// pages/index/index.js
Page({
data: {
msg: 'hello taobao',
},
});
<!-- pages/index/index.axml -->
<import-sjs name="m1" from="./index.sjs"/>
<view>{{m1.message}}</view>
<view>{{m1.getMsg(msg)}}</view>
Output on the page:
hello alipay
hello taobao
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 |
from | String | Yes | The relative path of the imported .sjs file. |
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:
// pages/index/index.js
Page({
data: {
msg: 'hello alipay',
},
});
// pages/index/index.sjs
function bar(prefix) {
return prefix;
}
export default {
foo: 'foo',
bar: bar,
};
// pages/index/namedExport.sjs
export const x = 3;
export const y = 4;
<!-- pages/index/index.axml -->
<import-sjs from="./index.sjs" name="test"></import-sjs>
<! -- You can also use one closing tag.
<import-sjs from="./index.sjs" name="test" />
-->
<! -- Call the bar function in the test module, and the argument is foo in the test module.
<view> {{test.bar(test.foo)}} </view>
<! -- Call the bar function in the test module, and the argument is msg in the page/index/index.js
.
<view> {{test.bar(msg)}} </view>
<! -- Support named export -->
<import-sjs from="./namedExport.sjs" name="{x, y: z}" />
<view>{{x}}</view>
<view>{{z}}</view>
Output on the page:
foo
hello alipay
3
4
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.