开始

# 介绍

SJS是小程序一套自定义脚本语言,可以在SWAN中使用其辅助构建页面结构。

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

SJS 自小程序基础库版本3.105.17 、开发者工具正式版2.13.1开始支持。
低版本需要做兼容处理,在逻辑层可以使用 swan.canIUse('sjs') 判断基础库是否支持 SJS 能力。其它兼容方式请参考 兼容性处理

# 模块

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

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

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

# 使用方式

# sjs 文件

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

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

代码示例

  • 编写 SJS 逻辑
// pages/utils.sjs中编写SJS逻辑

const bar = function(name) {
    return 'swan-' + name;
}
const foo = 'hello swan';

export default {
    bar: bar,
    foo: foo
};

// 或者使用CMD的形式导出
// module.exports = {
//     bar: bar,
//     foo: foo
// };
  • 引用并调用 SJS
<!-- 在 pages/index/index 页面中 -->

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

<!-- 使用SJS -->
<view class="container">{{utils.bar(name)}}</view>
<view>{{utils.foo}}</view>
  • 页面显示结果
swan-sjs
hello swan

# import-sjs标签

import-sjs标签有两个作用,一个是通过 src 属性引用其它 sjs 模块,此时标签可以为自闭和标签;另一个是使用其容纳 sjs 代码。

1.引用 sjs 文件

相关属性

属性名 类型 必填 说明
module String 当前<import-sjs>标签的模块名。必填字段。
src String 引用.sjs文件的路径,仅当本标签为单闭合标签或标签的内容为空时有效; 如果当做 sjs 代码容器标签,则不必填写。

module 属性

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

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

  • 首字符必须是:字母(a-zA-Z),下划线(_)
  • 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)

src 属性

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

引用的时候,要注意如下几点:

  • 只能引用.sjs文件模块。
  • sjs模块均为单例,sjs模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个sjs模块对象。
  • 如果一个sjs模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
  • 在 sjs 模块中引用其他 sjs 文件模块,可以使用 require 函数。

代码示例

<import-sjs src="./../tools.sjs" module="logic"></import-sjs>
// pages/utils.sjs中编写SJS逻辑

var foo = "hello world";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
var tools = require("utils.sjs");

console.log(tools.FOO);
console.log(tools.bar("tools.sjs"));
console.log(tools.msg);
  • 页面显示结果
hello world
tools.sjs
some msg

2.作为 SJS 代码容器

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

代码示例

  • 在 SWAN 模板中定义并使用 SJS
<!-- 定义SJS -->
<import-sjs module="utils">
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 实际应用代码示例

注意

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