美文网首页微信小程序开发入门
微信小程序开发入门:2.4.2 WXS

微信小程序开发入门:2.4.2 WXS

作者: wangbu2 | 来源:发表于2018-04-20 13:29 被阅读0次

2.4.2 WXS

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

注意

  1. wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。

  2. wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。

  3. wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。

  4. wxs 函数不能作为组件的事件回调。

  5. 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

2.4.2.1 WXS 模块

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。

2.4.2.1.1 模块

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

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

一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

2.4.2.1.2 .wxs 文件

在微信开发者工具里面,右键可以直接创建 .wxs 文件,在其中直接编写 WXS 脚本。

示例代码:

// /pages/comm.wxs

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};

上述例子在 /pages/comm.wxs 的文件里面编写了 WXS 代码。该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。

2.4.2.1.3 module 对象

每个 wxs 模块均有一个内置的 module 对象。

1、属性

exports: 通过该属性,可以对外共享本模块的私有变量与函数。

2.4.2.1.4 require 函数

.wxs 模块中引用其他 wxs 文件模块,可以使用 require 函数。

引用的时候,要注意如下几点:

1、只能引用 .wxs 文件模块,且必须使用相对路径。

2、wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。

3、如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

src 对应wxml 对wxs 模块的引用;require 满足其他wxs 文件对wxs 文件模块的引用。

2.4.2.1.5 <wxs> 标签

<wxs> 标签属性

1、module 属性

module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。

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

  • 首字符必须是:字母(a-zA-Z),下划线(_)
  • 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)

2、src 属性

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

引用的时候,要注意如下几点:

  • 只能引用 .wxs 文件模块,且必须使用相对路径。

  • wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。

  • 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

3、注意

  • <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include><import> 时,<wxs> 模块不会被引入到对应的 WXML 文件中。如需引用,则需要将 <wxs> 模块的代码放在单独的 .wxs 文件模块,然后使用使用 src 引用。

  • <template> 标签中,只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

2.4.2.2 变量

2.4.2.2.1 概念

1、WXS 中的变量均为值的引用。

2、没有声明的变量直接赋值使用,会被定义为全局变量。

3、如果只声明变量而不赋值,则默认值为 undefined。

4、var表现与javascript一致,会有变量提升。

2.4.2.2.2 变量名

变量命名必须符合下面两个规则:

  • 首字符必须是:字母(a-zA-Z),下划线(_)
  • 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)

2.4.2.3 注释

WXS 主要有 3 种注释的方法。

示例代码:

<!-- wxml -->
<wxs module="sample">
// 方法一:单行注释

/*
方法二:多行注释
*/

/*
方法三:结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

var a = 1;
var b = 2;
var c = "fake";

</wxs>

上述例子中,所有 WXS 代码均被注释掉了。

方法三 和 方法二 的唯一区别是,没有 */ 结束符。

2.4.2.4 运算符

  1. 基本运算符
  2. 一元运算符
  3. 位运算符
  4. 比较运算符
  5. 等值运算符
  6. 赋值运算符
  7. 二元逻辑运算符
  8. 其他运算符

参考:运算符介绍及优先级

2.4.2.5 语句

  1. if 语句
  2. switch 语句
  3. for 语句
  4. while 语句

参考:语句

2.4.2.6 数据类型

WXS 语言目前共有以下几种数据类型:

  1. number : 数值
  2. string :字符串
  3. boolean:布尔值
  4. object:对象
  5. function:函数
  6. array : 数组
  7. date:日期
  8. regexp:正则

参考:数据类型

2.4.2.7 基础类库

参考:基础类库


参考资料:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

相关文章

网友评论

    本文标题:微信小程序开发入门:2.4.2 WXS

    本文链接:https://www.haomeiwen.com/subject/junwkftx.html