• 開始
  • 介紹
  • 模塊
  • 使用方式
    • sjs 文件
  • import-sjs標簽

開始

介紹

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

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：主機域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、禪城網(wǎng)站維護、網(wǎng)站推廣。

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

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

模塊

每一個sjs文件和標簽都是一個單獨的模塊。

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

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

使用方式

sjs 文件

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

下述例子在/pages/utils.sjs的文件里面編寫了sjs代碼。該.sjs文件可以被其他的.sjs文件 或SWAN中的 標簽引用。

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• 編寫 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
  
  
  
// };
 
 

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

 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
{{utils.bar(name)}}
  
  
  
{{utils.foo}}
 
 

• 頁面顯示結(jié)果

 
 
 
  
  
  
swan-sjs
  
  
  
hello swan
 
 

import-sjs標簽

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

1.引用 sjs 文件

相關(guān)屬性

屬性名	類型	必填	說明
module	String	是	當前標簽的模塊名。必填字段。
src	String	否	引用.sjs文件的路徑，僅當本標簽為單閉合標簽或標簽的內(nèi)容為空時有效； 如果當做 sjs 代碼容器標簽，則不必填寫。

module 屬性

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

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

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

src 屬性

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

引用的時候，要注意如下幾點：

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

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

 
 
 
  
  
  
// 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', tools.FOO);
  
  
  
console.log('tools.bar', tools.bar("tools.sjs"));
  
  
  
console.log('tools.msg', tools.msg);
 
 

• 頁面顯示結(jié)果

 
 
 
  
  
  
tools.FOO hello world
  
  
  
tools.bar tools.sjs
  
  
  
tools.msg some msg
 
 

2.作為 SJS 代碼容器

import-sjs標簽除了引用其它sjs模塊，還可直接作為SJS代碼的容器，使用module制定該模塊名稱，用法與上等同。

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• 在 SWAN 模板中定義并使用 SJS

 
 
 
  
  
  
  
  
  
  
  
  
const bar = function(name) {
  
  
  
 return 'swan-' + name;
  
  
  
}
  
  
  
const foo = 'hello swan';
  
  
  
  
  
  
export default {
  
  
  
 bar: bar,
  
  
  
 foo: foo
  
  
  
};
  
  
  
  
  
  
  
  
  
  
  
  
{{utils.bar(name)}}
  
  
  
{{utils.foo}}
 
 

• 頁面顯示結(jié)果

 
 
 
  
  
  
swan-sjs
  
  
  
hello swan
 
 

sjs 實際應用代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

注意

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

文章名稱：創(chuàng)新互聯(lián)百度小程序教程：開始
URL地址：http://uogjgqi.cn/article/cdeiiii.html