开始

SJS代码可以编写在swan文件中的<import-sjs>标签内，或以sjs为后缀名的文件内，然后在SWAN模板中进行引用。

每一个sjs文件和<import-sjs>标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，可以通过export或者module.exports实现，使用import或者require引用。

在小程序项目中创建以sjs为后缀的文件，然后可以在其中编写sjs脚本。

下述例子在/pages/utils.sjs的文件里面编写了sjs代码。该.sjs文件可以被其他的.sjs文件或SWAN中的 <import-sjs> 标签引用。

代码示例

在开发者工具中打开

在 WEB IDE 中打开

编写 SJS 逻辑

引用并调用 SJS

<!-- 在 pages/index/index 页面中 -->
<!-- 引用SJS -->
<import-sjs src="../utils.sjs" module="utils" />
<!-- 使用SJS -->
<view>{{utils.foo}}</view>

页面显示结果

swan-sjs
hello swan

1.引用 sjs 文件

相关属性

module 属性

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

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

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

src 属性

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

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

只能引用.sjs文件模块。
如果一个sjs模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
在 sjs 模块中引用其他 sjs 文件模块，可以使用 require 函数。

代码示例

在开发者工具中打开

// pages/utils.sjs中编写SJS逻辑
var foo = "hello world";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};

var tools = require("./utils.sjs");
console.log('tools.FOO', tools.FOO);
console.log('tools.bar', tools.bar("tools.sjs"));
console.log('tools.msg', tools.msg);

页面显示结果

2.作为 SJS 代码容器

import-sjs标签除了引用其它sjs模块，还可直接作为SJS代码的容器，使用module制定该模块名称，用法与上等同。

代码示例

在开发者工具中打开

在 SWAN 模板中定义并使用 SJS

<!-- 定义SJS -->
const bar = function(name) {
    return 'swan-' + name;
}
const foo = 'hello swan';
export default {
    bar: bar,
    foo: foo
};
</import-sjs>
<!-- 使用SJS -->
<view class="container">{{utils.bar(name)}}</view>
<view>{{utils.foo}}</view>

页面显示结果

swan-sjs
hello swan

sjs 实际应用代码示例

在开发者工具中打开

在 WEB IDE 中打开

注意

引用 sjs 模块时务必使用.sjs文件后缀。
sjs 只能定义在 .sjs 文件中，然后在 swan 文件中使用<import-sjs>标签引入。
sjs 可以调用其他 sjs 文件中定义的函数。
sjs 的运行环境和其它 JavaScript 代码是相互隔离的，即 sjs 中不能调用其他 JavaScript 文件中定义的函数与 API。