百度智能小程序 開始

介紹

SJS 是小程序一套自定義腳本語言，可以在 SWAN 中使用其輔助構(gòu)建頁面結(jié)構(gòu)。

SJS 代碼可以編寫在swan文件中的 <import-sjs> 標(biāo)簽內(nèi)，或以 sjs 為后綴名的文件內(nèi)，然后在 SWAN 模板中進(jìn)行引用。

SJS 自小程序基礎(chǔ)庫版本3.105.17 、開發(fā)者工具正式版2.13.1開始支持。
低版本需要做兼容處理，在邏輯層可以使用 swan.canIUse('sjs') 判斷基礎(chǔ)庫是否支持 SJS 能力。其它兼容方式請參考 兼容性處理

模塊

每一個(gè) sjs 文件和 <import-sjs> 標(biāo)簽都是一個(gè)單獨(dú)的模塊。

每個(gè)模塊都有自己獨(dú)立的作用域。即在一個(gè)模塊里面定義的變量與函數(shù)，默認(rèn)為私有的，對其他模塊不可見。

一個(gè)模塊要想對外暴露其內(nèi)部的私有變量與函數(shù)，可以通過 export 或者 module.exports 實(shí)現(xiàn)，使用 import 或者 require 引用。 

使用方式

sjs 文件

在小程序項(xiàng)目中創(chuàng)建以 sjs 為后綴的文件，然后可以在其中編寫 sjs 腳本。

下述例子在 /pages/utils.sjs 的文件里面編寫了sjs代碼。該 .sjs 文件可以被其他的 .sjs 文件 或 SWAN 中的 <import-sjs> 標(biāo)簽引用。

代碼示例 

• 編寫 SJS 邏輯

// pages/utils.sjs中編寫SJS邏輯

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

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

// 或者使用CMD的形式導(dǎo)出
// module.exports = {
//     bar: bar,
//     foo: foo
// };

• 引用并調(diào)用 SJS

<!-- 在 pages/index/index 頁面中 -->

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

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

• 頁面顯示結(jié)果

swan-sjs
hello swan

import-sjs 標(biāo)簽

import-sjs 標(biāo)簽有兩個(gè)作用，一個(gè)是通過 src 屬性引用其它 sjs 模塊，此時(shí)標(biāo)簽可以為自閉和標(biāo)簽；另一個(gè)是使用其容納 sjs 代碼。

1.引用 sjs 文件

相關(guān)屬性

module 屬性

module 屬性是當(dāng)前 <import-sjs> 標(biāo)簽的模塊名。在單個(gè) swan 文件內(nèi)，建議其值唯一。有重復(fù)模塊名則按照先后順序覆蓋（后者覆蓋前者）。不同文件之間的sjs模塊名不會相互覆蓋。

module 屬性值的命名必須符合下面兩個(gè)規(guī)則：

• 首字符必須是：字母（a-zA-Z），下劃線（_）
• 剩余字符可以是：字母（a-zA-Z），下劃線（_）， 數(shù)字（0-9）

src 屬性

src 屬性可以用來引用其他的sjs文件模塊。

引用的時(shí)候，要注意如下幾點(diǎn)：

• 只能引用 .sjs 文件模塊。
• sjs模塊均為單例，sjs 模塊在第一次被引用時(shí)，會自動初始化為單例對象。多個(gè)頁面，多個(gè)地方，多次引用，使用的都是同一個(gè) sjs 模塊對象。
• 如果一個(gè) sjs 模塊在定義之后，一直沒有被引用，則該模塊不會被解析與運(yùn)行。
• 在 sjs 模塊中引用其他 sjs 文件模塊，可以使用 require 函數(shù)。

代碼示例 

<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);

• 頁面顯示結(jié)果

hello world
tools.sjs
some msg

2.作為 SJS 代碼容器

import-sjs 標(biāo)簽除了引用其它 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>

• 頁面顯示結(jié)果

swan-sjs
hello swan

sjs 實(shí)際應(yīng)用代碼示例 

注意

• 引用 sjs 模塊時(shí)務(wù)必使用.sjs文件后綴。
• sjs 只能定義在 .sjs 文件中，然后在 swan 文件中使用<import-sjs>標(biāo)簽引入。
• sjs 可以調(diào)用其他 sjs 文件中定義的函數(shù)。
• sjs 的運(yùn)行環(huán)境和其它 JavaScript 代碼是相互隔離的， 即 sjs 中不能調(diào)用其他 JavaScript 文件中定義的函數(shù)與 API。
• sjs 函數(shù)不能作為組件事件回調(diào)。