创新互联百度小程序教程：开始

开始
- 介绍
- 模块
- 使用方式
  - sjs 文件
- import-sjs标签

开始

介绍

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

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、网页空间、营销软件、网站建设、禅城网站维护、网站推广。

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

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

模块

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

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

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

使用方式

sjs 文件

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

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

代码示例

在开发者工具中打开

在 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  
  
  // };

引用并调用 SJS

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

页面显示结果

 
 
   
  
  swan-sjs  
  
  hello swan

`import-sjs`标签

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

1.引用 sjs 文件

相关属性

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

module 属性

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

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

首字符必须是：字母（a-zA-Z），下划线（_）
剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9）

src 属性

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

引用的时候，要注意如下几点：

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

代码示例

在开发者工具中打开

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

页面显示结果

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

2.作为 SJS 代码容器

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

代码示例

在开发者工具中打开

在 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}}

页面显示结果

 
 
   
  
  swan-sjs  
  
  hello swan

sjs 实际应用代码示例

在开发者工具中打开

在 WEB IDE 中打开

注意

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

网站名称：创新互联百度小程序教程：开始
文章地址：http://www.mswzjz.com/qtweb/news1/176701.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容

创新互联百度小程序教程：开始

开始

介绍

模块

使用方式

sjs 文件

import-sjs标签

`import-sjs`标签