新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：開始

開始
- 介紹
- 模塊
- 使用方式
  - sjs 文件
- import-sjs標(biāo)簽

開始

介紹

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

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

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

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

模塊

每一個sjs文件和標(biāo)簽都是一個單獨的模塊。

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

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

使用方式

sjs 文件

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

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

代碼示例

在開發(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的形式導(dǎo)出  
  
  // module.exports = {  
  
  // bar: bar,  
  
  // foo: foo  
  
  // };

引用并調(diào)用 SJS

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

頁面顯示結(jié)果

 
 
   
  
  swan-sjs  
  
  hello swan

`import-sjs`標(biāo)簽

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

1.引用 sjs 文件

相關(guān)屬性

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

module 屬性

module屬性是當(dāng)前標(biāo)簽的模塊名。在單個swan文件內(nèi)，建議其值唯一。有重復(fù)模塊名則按照先后順序覆蓋（后者覆蓋前者）。不同文件之間的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ā)者工具中打開

在 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標(biāo)簽除了引用其它sjs模塊，還可直接作為SJS代碼的容器，使用module制定該模塊名稱，用法與上等同。

代碼示例

在開發(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 實際應(yīng)用代碼示例

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

在 WEB IDE 中打開

注意

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

本文題目：創(chuàng)新互聯(lián)百度小程序教程：開始
標(biāo)題URL：http://fisionsoft.com.cn/article/cdeiiii.html

新聞中心

開始

介紹

模塊

使用方式

sjs 文件

import-sjs標(biāo)簽

其他資訊

`import-sjs`標(biāo)簽