Getting Started with SJS

Introduction

SJS is a custom scripting language for Mini Programs that can be used to assist in building page structures within DLT.

SJS code can be written inside the <import-sjs> tags in a .dlt file or in separate .sjs files, and then referenced in DLT templates.

SJS is supported starting from Mini Program base library version 1.0.0.

Modules

Each .sjs file and <import-sjs> tag represents an individual module.

Every module has its own isolated scope. Variables and functions defined within a module are private by default and are not visible to other modules.

Usage

.sjs Files

Create .sjs files in your Mini Program project and write SJS scripts in them.

In the example below, SJS code is written in the /pages/utils.sjs file. This .sjs file can be referenced by other .sjs files or by using the <import-sjs> tag in DLT templates.

Example:

• Write SJS logic in /pages/utils.sjs:

// pages/utils.sjs

const bar = function (name) {
  return " dlt-" + name;
};

export default {
  bar: bar,
};

• Reference and call the SJS function:

<!-- In the pages/index/index page -->

<!-- Reference SJS -->
<import-sjs src="../utils.sjs" module="utils" />

<!-- Use SJS -->
<view class="container">{{utils.bar(name)}}</view>

• Page display result:

dlt-sjs

import-sjs Tag

The import-sjs tag serves two purposes: one is to reference other SJS modules using the src attribute, and the other is to contain SJS code.

1. Reference SJS Files

Attributes

Attribute	Type	Required	Description
module	String	Yes	The module name of the current <import-sjs> tag. This is a required field.
src	String	No	The path to the .sjs file to be referenced. This attribute is only effective when the tag is a self-closing tag or when the tag's content is empty. If used as an SJS code container tag, you don't need to fill in this attribute.

module Attribute

The module attribute is the module name of the current <import-sjs> tag. Within a single .dlt file, it's recommended to have unique module names. If there are duplicate module names, the later ones will overwrite the earlier ones. Module names between different files do not affect each other.

Module names must adhere to the following rules:

• The first character must be a letter (a-zA-Z) or an underscore (_).
• The remaining characters can be letters (a-zA-Z), underscores (_), or numbers (0-9).

src Attribute

The src attribute is used to reference other .sjs file modules.

When referencing .sjs files, keep the following in mind:

• You can only reference .sjs file modules.
• SJS modules are singletons. When an SJS module is first referenced, it's automatically initialized as a singleton object. Multiple pages, locations, or repeated references will all use the same SJS module object.
• If an SJS module is defined but never referenced, it will not be parsed or executed.

2. Use as an SJS Code Container

The import-sjs tag can also directly contain SJS code. Use the module attribute to specify the module name, which functions in the same way as the reference method.

Example:

• Define and use SJS in a DLT template:

<!-- Define SJS -->
<import-sjs module="utils">
  const bar = function(name) { return ' dlt-' + name; } export default { bar:
  bar };
</import-sjs>

<!-- Use SJS -->
<view class="container">{{utils.bar(name)}}</view>

• Page display result:

dlt-sjs

Note

• SJS file names should follow the format: moduleName.sjs.
• SJS modules are exposed to the outside using the export default pattern.
• Only function functions can be exported from SJS.
• SJS functions cannot be used as event callbacks for components.
• SJS can create independent modules or be used inline.
• SJS does not support global variables.
• Multiple import-sjs tags cannot have the same src attribute value. The module attribute value also acts as a unique identifier for modules.