开始

介绍

SJS是小程序一套自定义脚本语言，可以在SWAN中使用其辅助构建页面结构。 SJS代码可以编写在swan文件中的<import-sjs>标签内，或以sjs为后缀名的文件内，然后在SWAN模板中进行引用。

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> 标签引用。 代码示例 在开发者工具中打开 在开发者工具中打开 在 WEB IDE 中打开 -

  1. // 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// };

-

  1. <!-- 在 pages/index/index 页面中 --><!-- 引用SJS --><import-sjs src="../utils.sjs" module="utils" /><!-- 使用SJS --><view class="container">{{utils.bar(name)}}</view><view>{{utils.foo}}</view>

-

  1. swan-sjshello swan

import-sjs标签

import-sjs标签有两个作用，一个是通过 src 属性引用其它 sjs 模块，此时标签可以为自闭和标签；另一个是使用其容纳 sjs 代码。 1.引用 sjs 文件 相关属性 module 属性 module属性是当前<import-sjs>标签的模块名。在单个swan文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的sjs模块名不会相互覆盖。 module属性值的命名必须符合下面两个规则：

  • - src 属性 src属性可以用来引用其他的sjs文件模块。 引用的时候，要注意如下几点：
  • .sjs文件模块。
  • sjs模块均为单例，sjs模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个sjs模块对象。
  • sjs模块在定义之后，一直没有被引用，则该模块不会被解析与运行。 - 代码示例 在开发者工具中打开 在开发者工具中打开 在 WEB IDE 中打开
    1. <import-sjs src="../tools.sjs" module="tools"></import-sjs>
    1. // 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";
    1. 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);
    -
    1. tools.FOO hello worldtools.bar tools.sjstools.msg some msg
    2.作为 SJS 代码容器 import-sjs标签除了引用其它sjs模块，还可直接作为SJS代码的容器，使用module制定该模块名称，用法与上等同。 代码示例 在开发者工具中打开 在开发者工具中打开 在 WEB IDE 中打开 -
    1. <!-- 定义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>
    -
    1. swan-sjshello swan
    sjs 实际应用代码示例 在开发者工具中打开 在开发者工具中打开 在 WEB IDE 中打开 注意
  • .sjs文件后缀。
  • <import-sjs>标签引入。
  • -