【微信小程序实战教程】之微信小程序 WXS 语法详解

WXS语法

WXS是微信小程序的一套脚本语言，其特性包罗：模块、变量、解释、运算符、语句、数据范例、基础类库等。在本章我们主要介绍WXS语言的特性与基本用法，以及 WXS 与 JavaScript 之间的差别之处。
1 WXS介绍

在微信小程序中，除了逻辑层使用的 JavaScript 脚本语言之外，微信小程序还有一套自己的脚本语言WXS（全称 WeiXin Script）。在现实项目开辟中，WXS通常被用来做页面数据的过滤大概是使用WXS举行数据的盘算处置惩罚，然后联合WXML组件，可以构建小程序的页面布局。
在小程序页面中，WXS 的用法有点类似于HTML中的 <script> 标签，但是WXS与JavaScript又是两种差别的脚本语言。WXS 有自己的语法，但在某些语法方面又和 JavaScript 及其相似，所以很容易让开辟者误以为 WXS 就是微信小程序中的 JavaScript 脚本。
2 基础语法

2.1 WXS 模块

WXS 模块可以通过 WXML 文件中的 <wxs> 标签举行声明，大概是在WXML文件内引入 .wxs 后缀名的文件。每一个 .wxs 后缀名的文件和 <wxs> 标签都是一个单独的模块，而且每个模块都有自己独立的作用域，开辟者在模块中声明的变量和函数都是私有的，其他模块对该模块内的变量和函数是不可见的。假如要想把一个模块中的私有变量和私有函数对外暴露，必要使用 module.exports 语句实现。
WXML文件提供的 <wxs> 标签上有两个属性，分别是module和src。其中，module属性的值是字符串范例的，用来表示当前 <wxs> 标签的模块名，该属性是一个必填字段，在其他模块中也是通过模块名称来引入该模块中的私有属性与函数的。在单独是 WXML 文件中，<wxs> 的module属性值都是唯一的，假如有重复模块名称，则按照定义的先后次序举行引用，即后者会覆盖前者。在差别文件之间的WXS模块名不会相互覆盖，互不影响。
<wxs> 标签的module属性值的定名必须遵守以下两个规范：

• 模块名称只能由大小写字母、数字、下划线组成；
  
• 模块名的首字符必须为大小写字母或下划线，不能为数字。
  

module属性值就是当前模块的模块名称，其定名规范和常见的编程语言中标识符定名规则相似。在WXML文件中直接使用 <wxs> 标签订义module模块的代码如例1所示。
【例1】定义wxs模块

1. <!-- index.wxml -->
2. <wxs module="data">
3.     var str = "hello world";
4.     module.exports = {
5.         msg: str
6.     }
7. </wxs>
8. <view>data模块的值：{{ data.msg }}</view>

复制代码

上面代码运行后的效果如图1所示。

图1 wxs模块输出效果
在例1中声明白一个名字为data的模块，将模块中str字符串变量复制给data模块中的msg属性，并向外暴露，在当前页面可以使用data.msg获取模块中定义的值。
<wxs> 标签上还有另外一个src属性，值也是字符串范例，用于表示引入的.wxs文件的相对路径，只有在当前的<wxs>标签为单闭合标签大概标签的内容为空时有效。使用src属性引入其他.wxs文件时，必要注意以下几点：

• 只用引入.wxs文件模块，且必须使用相对路径；
  
• WXS模块均为单例，当WXS模块在第一次被引用时，会自动初始化为单例对象；假如在多个页面或多个地方被多次引用时，使用的都是同一个WXS模块对象；
  
• 假如一个WXS模块在定义后不停没有被引用，则该模块不会被剖析实行。
  

在微信开辟者工具中的index页面文件夹上点击鼠标右键，选择“新建文件”，效果如图2所示。

图2 选择新建文件
将新建文件定名为tool.wxs，该文件就是一个独立的WXS模块文件，在文件中可以直接编写WXS脚本，其代码如例2所示。
【例2】WXS脚本文件代码

1. // tool.wxs
2. var str = "hello world from tool.wxs";
3. var sum =  function(a,b) {
4.     return a+b
5. }
6. module.exports = {
7.     msg: str,
8.     sum: sum
9. }

复制代码

上面例子中的.wxs文件可以被其他的WXML文件或.wxs文件引用，假如在WXML文件中引用，其代码如例3所示。
【例3】WXML中引入.wxs文件

1. <!-- index.wxs -->
2. <wxs src="./tool.wxs"  module="data" />
3. <view>data模块的值：{{ data.msg }}</view>
4. <view>求和：1 + 2 = {{ data.sum(1,2) }}</view>

复制代码

上面代码运行后的效果如图3所示。

图3 WXML中引入.wxs文件运行效果
.wxs文件还可以被其他的.wxs文件引用，引用时必要使用require函数。在引用.wxs文件时，必要注意以下几点：

• 只能引用 .wxs 文件模块，且必须使用相对路径；
  
• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象；多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象；
  
• 假如一个 wxs 模块在定义之后，不停没有被引用，则该模块不会被剖析与运行。
  

.wxs文件引入其他WXS模块代码如例4所示。
【例4】

1. // tools.wxs
2. var foo = "'hello world' from tools.wxs";
3. var bar = function (d) {
4.   return d;
5. }
6. module.exports = {
7.   FOO: foo,
8.   bar: bar,
9. };
10. module.exports.msg = "some msg";
12. // logic.wxs
13. var tools = require("./tools.wxs");
14. console.log(tools.FOO);
15. console.log(tools.bar("logic.wxs"));
16. console.log(tools.msg);

复制代码

1. <!-- /page/index/index.wxml -->
2. <wxs src="./../logic.wxs" module="logic" />

复制代码

上面代码运行后，控制台输出效果如下：

1. 'hello world' from tools.wxs
2. logic.wxs
3. some msg

复制代码

在使用WXS模块时必要注意以下几点：

• <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中；
  
• <template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。
  

2.2 变量

WXS脚本的语法与JavaScript语法非常相似，但是二者又有着自己独特的语法规则，例如在WXS脚本中声明变量，必须使用 var 语句，不能使用const、let这些语句，这点和JavaScript是差别的。WXS中的变量均为值的引用，没有声明的变量直接赋值使用，会被定义为全局变量。假如只声明变量而不赋值的话，该变量会被默认赋值为undefined。WXS脚本声明变量的示例代码如例5所示。
【例5】WXS脚本声明变量

1. var foo = 1;
2. var bar = "hello world";
3. var i; // i === undefined

复制代码

上面代码，分别声明白 foo、 bar、 i 三个变量。然后，foo 赋值为数值 1 ，bar 赋值为字符串 “hello world”。
在WXS脚本中的变量名可以称为是标识符，变量定名时必要遵循以下规则：

• 变量名只能由大小写英文字母、数字、下划线组成；
  
• 首字符必须是大小写英文字母或下划线，不能为数字；
  
• 变量名不能使用WXS脚本保留的关键字。
  

WXS脚本保留的关键字为：delete、void、typeof、null、undefined、NaN、Infinity、var、if、else、true、false、require、this、function、arguments、return、for、while、do、break、continue、switch、case、default等25个标识符。
2.3 解释

WXS脚本中的解释与JavaScript中的解释一样，有两种常见的解释方法，分别是单行解释和多行解释。解释代码如例6所示。
【例6】WXS脚本解释

1. <wxs module="sample">
2. // 方法一：单行注释
4. /*
5. 方法二：多行注释
6. */
7. </wxs>

复制代码

WXS脚本中还有一种独特的解释方法，即末端解释。直接在要解释的代码前面使用 /* 的方式将代码解释，从 /* 开始以后所有的WXS代码都会被解释，其代码如例7所示。
【例7】末端解释

1. <wxs module="sample">
3. /*
4. 方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
5. var a = 1;
6. var b = 2;
7. var c = "fake";
9. </wxs>

复制代码

在上面的例子中，所有的WXS代码均被解释掉了。
2.4 运算符

运算符用于实行程序代码运算，会针对一个以上操作数项目来举行运算。WXS脚本中的运算符可以分为基本运算符、一元运算符、位运算符、比较运算符、等值运算符、赋值运算符、二元逻辑运算符等7种。
基本运算符主要用于四则运算，代码如例8所示。
【8】基本运算符

1. var a = 10, b = 20;
3. // 加法运算
4. console.log(30 === a + b);
5. // 减法运算
6. console.log(-10 === a - b);
7. // 乘法运算
8. console.log(200 === a * b);
9. // 除法运算
10. console.log(0.5 === a / b);
11. // 取余运算
12. console.log(10 === a % b);

复制代码

一元运算符主要用于变量的自增、自减等简单运算，代码如例9所示。
【例9】一元运算符

1. var a = 10, b = 20;
3. // 自增运算
4. console.log(10 === a++);
5. console.log(12 === ++a);
6. // 自减运算
7. console.log(12 === a--);
8. console.log(10 === --a);
9. // 正值运算
10. console.log(10 === +a);
11. // 负值运算
12. console.log(0-10 === -a);
13. // 否运算
14. console.log(-11 === ~a);
15. // 取反运算
16. console.log(false === !a);
17. // delete 运算
18. console.log(true === delete a.fake);
19. // void 运算
20. console.log(undefined === void a);
21. // typeof 运算
22. console.log("number" === typeof a);

复制代码

WXS脚本中也可以使用二进制的位运算，代码如例10所示。
【例10】位运算符

1. var a = 10, b = 20;
3. // 左移运算
4. console.log(80 === (a << 3));
5. // 带符号右移运算
6. console.log(2 === (a >> 2));
7. // 无符号右移运算
8. console.log(2 === (a >>> 2));
9. // 与运算
10. console.log(2 === (a & 3));
11. // 异或运算
12. console.log(9 === (a ^ 3));
13. // 或运算
14. console.log(11 === (a | 3));

复制代码

比较运算也是常见的逻辑运算中的一种，代码如例11所示。
【例11】比较运算符

1. var a = 10, b = 20;
3. // 小于
4. console.log(true === (a < b));
5. // 大于
6. console.log(false === (a > b));
7. // 小于等于
8. console.log(true === (a <= b));
9. // 大于等于
10. console.log(false === (a >= b));

复制代码

等值运算符主要是判断两个变量的值是否相等，代码如例12所示。
【例12】等值运算符

1. var a = 10, b = 20;
3. // 等号
4. console.log(false === (a == b));
5. // 非等号
6. console.log(true === (a != b));
7. // 全等号
8. console.log(false === (a === b));
9. // 非全等号
10. console.log(true === (a !== b));

复制代码

赋值运算符也是最常见的一种运算符，用于为变量赋值，代码如例13所示。
【例13】赋值运算符

1. var a = 10;
3. a = 10; a *= 10;
4. console.log(100 === a);
5. a = 10; a /= 5;
6. console.log(2 === a);
7. a = 10; a %= 7;
8. console.log(3 === a);
9. a = 10; a += 5;
10. console.log(15 === a);
11. a = 10; a -= 11;
12. console.log(-1 === a);
13. a = 10; a <<= 10;
14. console.log(10240 === a);
15. a = 10; a >>= 2;
16. console.log(2 === a);
17. a = 10; a >>>= 2;
18. console.log(2 === a);
19. a = 10; a &= 3;
20. console.log(2 === a);
21. a = 10; a ^= 3;
22. console.log(9 === a);

复制代码

二元逻辑运算符就是用于逻辑与、逻辑或的运算符，代码如例14所示。
【例14】二元逻辑运算符

1. var a = 10, b = 20;
3. // 逻辑与
4. console.log(20 === (a && b));
5. // 逻辑或
6. console.log(10 === (a || b));

复制代码

在WXS脚本中的运算符之间存在优先级关系，运算符的优先级决定了表达式中运算实行的先后次序。优先级从上到下依次递减，最上面具有最高的优先级，逗号操作符具有最低的优先级。表达式的联合次序取决于表达式中各种运算符的优先级。优先级高的运算符先联合，优先级低的运算符后联合，同一行中的运算符的优先级相同。在WXS脚本中，括号“()”的优先级最高，逗号“,”的优先级最低。
2.5 语句

WXS脚本中主要包含了两类语句，一类是分支语句，包罗if语句、switch语句；另一类是循环语句，包罗for语句、while语句。
在WXS脚本中if的用法如例15所示。
【例15】if语句

1. if (表达式) {
2.   // 代码块
3. } else if (表达式) {
4.   // 代码块
5. } else {
6.   // 代码块
7. }

复制代码

当大括号中的代码只有一行时，大括号“{}”可以省略，效果如例16所示。
【例16】if语句的简写方式

1. if (表达式) 语句;
2. else 语句;
4. // 或者是
6. if (表达式)
7.   语句;
8. else
9.   语句;

复制代码

switch语句必要用到case关键字举行分支，case关键字后面只能使用变量、数字、字符串，最后都不满足的条件使用default关键字分支。switch语句的语法如例17所示。
【例17】switch语法

1. switch (表达式) {
2.   case 变量:
3.     语句;
4.   case 数字:
5.     语句;
6.     break;
7.   case 字符串:
8.     语句;
9.   default:
10.     语句;
11. }

复制代码

switch语句的用法与if差别，但是都可以用于分支，其最终实行的效果是类似的。if语句的条件是表达式，而switch语句的条件是满足表达式的值。switch语句的示例代码如例18所示。
【例18】switch示例

1. var week = 1;
3. switch (week) {
4. case 1:
5.   console.log("周一
6. ");
7.   break;
8. case 2:
9.   console.log("周二");
10.   break;
11. case 3:
12.   console.log("周三");
13.   break;
14. case 4:
15.   console.log("周四");
16.   break;
17. case 5:
18.   console.log("周五");
19.   break;
20. case 6:
21.   console.log("周六");
22.   break;
23. case 7:
24.   console.log("周日");
25.   break;
26. default:
27.   console.log("请输入正确的周数");
28. }

复制代码

上面示例代码运行后，在控制台输出效果如下：

1. 周一

复制代码

假如有过JavaScript语言或其他编程语言的学习履历的话，肯定对循环并不陌生，特殊是for循环。WXS脚本的for循环语法与JavaScript语言的for循环语法是一样的，具体代码如例19所示。
【例19】for循环语法

1. for (语句; 语句; 语句)
2.   语句;
4. // 或者是
6. for (语句; 语句; 语句) {
7.   代码块;
8. }

复制代码

for循环的示例代码如例20所示。
【例20】for循环示例

1. for (var i = 0; i < 3; ++i) {
2.   console.log(i);
3.   if( i >= 1) break;
4. }

复制代码

上面示例代码运行后，在控制台输出的效果如下：

1. 0
2. 1

复制代码

while也是用于循环的语句，当表达式的值为true时，循环实行语句或代码块，在代码块中也支持break、continue关键词来跳过循环，其语法代码如例21所示。
【例21】while语句语法

1. while (表达式)
2.   语句;
4. // 或者是
6. while (表达式){
7.   代码块;
8. }

复制代码

我们还可以使用do-while语句来实行循环，其语法如例22所示。

1. do {
2.   代码块;
3. } while (表达式)

复制代码

在使用while或do-while语句实行循环的代码时，一定要注意在合适的时机设置表达式的值为false，大概是公道设置跳出循环，否则将会出现死循环的环境。假如现实开辟需求中必要使用到无限循环，可以不做跳出循环的操作。
3 数据范例

WXS脚本语言中的变量可以生存多种数据范例，包罗数值、字符串、布尔值、对象、函数、数组等。WXS脚本语言中的数据范例分为基本数据范例和引用数据范例，基本数据范例是指简单的数据段，引用数据范例是指有多个值构成的对象。当我们把一个值赋值给一个变量时，剖析器首先要确认这个值是基本数据范例照旧引用数据范例，以此来判断该值存储的内存位置与大小。
3.1 基本数据范例

在WXS脚本语言中，基本数据范例包罗number（数值）、string（字符串）、boolean（布尔值）等。
number包罗两种数值，分别是整数和小数，示例如下：

1. var a = 10;
2. var PI = 3.141592653589793;

复制代码

number也可以作为对象范例，其方法可以参考ECMAScript5标准，常见的方法有：

• toString()
  
• toLocaleString()
  
• valueOf()
  
• toFixed()
  
• toExponential()
  
• toPrecision()
  

WXS的其他几种基本数据范例的属性与方法都可以参考ES5标准。其中，string字符串的值可以使用单引号和双引号两种写法，boolean范例只有两个特定的值，分别是true和false。
3.2 引用数据范例

WXS脚本语言中的引用数据范例包罗object（对象）、array（数组）、function（函数）、date（日期）等，这些引用数据范例与基本数据范例差别的是，基本数据范例是简单的数据段，被生存在栈内存中，而引用数据范例是有多个值构成的对象，被生存在堆内存中。
WXS脚本语言与其他语言差别的是，开辟者不可以直接访问堆内存空间中的位置，也不能直接操作堆内存空间，只能操尴尬刁难象在栈内存中的引用地点。所以，引用范例的数据在栈内存中生存的是对象在堆内存中的引用地点，通过这个引用地点可以快速查找到生存在堆内存中的对象。
（1）object对象
在WXS脚本中，object对象是一种无序的键值对，假如想要定义一个object对象，可以使用以下方法：

1. // 生成一个新的空对象
2. var o = {}
3. //生成一个新的非空对象
4. o = {
5.   str: '',
6.   i: 1,
7.   fn: function() {}
8. };

复制代码

调用对象中的属性时，可以使用“对象.属性”的语法获取对应属性的值，示例代码如下：

1. // 读取对象属性
2. console.log(o.str)

复制代码

（2）function函数
WXS脚本语言中有三种函数的用法，分别是平凡函数、匿名函数和闭包函数。平凡函数可以直接使用function关键字声明，也可以将一个匿名函数赋值给某个变量，示例代码如下：

1. // 普通函数
2. function fn () {}
3. // 或者是
4. var fn = function () {}

复制代码

闭包就是能够读取其他函数内部变量的函数，WXS脚本语言中也可以像JavaScript语言那样使用闭包，示例代码如例22所示。
【例22】闭包

1. var a = function (x) {
2.   return function () {
3.       return x;
4.   }
5. }
6. var b = a(100);
7. console.log( 100 === b() ); // true

复制代码

（3）array数组
array支持两种定义数组的方式，一种是天生一个新的空数组，语法如下：

1. var a = [];

复制代码

另一种是天生一个新的非空数组，数组中的元素可以是任意范例，语法如下：

1. var a = [1,"a",{},function(){}];

复制代码

array对象上也定义了一系列操作数组的方法，例如数组转字符串的toString()、追加元素的push()、用于排序的sort()等方法，关于array对象的具体方法可以参考ES5标准。
（4）date日期
在WXS脚本中，想要天生一个date日期范例的对象，必要借助getDate()方法，该方法用于返回当前的日期对象。开辟者也可以使用getDate()方法提供的多种重载方法，天生差别格式的日期对象，语法如下所示：

1. getDate()
2. getDate(milliseconds)
3. getDate(datestring)
4. getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])

复制代码

在上面getDate()重载方法的参数中，milliseconds是指从1970年1月1日零点开始盘算到指定日期时间之间的毫秒数；datestring是指日期字符串，格式为：month day, year hours:minutes:seconds。
3.3 正则表达式

正则表达式（英文全称 Regular Expression，简写 regex、regexp或RE）是使用单个字符串来形貌、匹配一系列符合某个句法规则的字符串搜刮模式，可以用于文本搜刮和文本替换等操作中。正则表达式不属于某个编程语言，而是一种由一个字符序列形成的搜刮模式。正则表达式可以是一个简单的字符，大概是一个更复杂的模式，当开辟者在文本中搜刮数据时，可以用搜刮模式来形貌要查询的内容。
在WXS脚本中，天生正则表达式对象必要使用getRegExp()方法，语法如下：

1. getRegExp(pattern[, flags])

复制代码

getRegExp()方法的参数pattern表示正则表达式的内容；参数flags表示修饰符，该字段只能包含以下字符：

• g：表示global，实行全局匹配（查找所有匹配而非在找到第一个匹配后制止）。
  
• i：表示ignoreCase，实行对大小写不敏感的匹配。
  
• m：表示multiline，实行多行匹配。
  

正则表达式的示例代码如例23所示。
【例23】

1. var a = getRegExp("x", "img");
2. console.log("x" === a.source); // true
3. console.log(true === a.global); // true
4. console.log(true === a.ignoreCase); // true
5. console.log(true === a.multiline); // true

复制代码

3.4 数据范例判断

在WXS脚本中，可以借助每个对象的constructor属性来判断数据范例，示例代码如例24所示。
【例24】constructor属性判断数据范例

1. var number = 10;
2. console.log( "Number" === number.constructor ); // true
4. var string = "str";
5. console.log( "String" === string.constructor ); // true
7. var boolean = true;
8. console.log( "Boolean" === boolean.constructor ); // true
10. var object = {};
11. console.log( "Object" === object.constructor ); // true
13. var func = function(){};
14. console.log( "Function" === func.constructor ); // true
16. var array = [];
17. console.log( "Array" === array.constructor ); // true
19. var date = getDate();
20. console.log( "Date" === date.constructor ); // true
22. var regexp = getRegExp();
23. console.log( "RegExp" === regexp.constructor ); // true

复制代码

也可以使用typeof来区分部分数据范例，示例代码如例25所示。
【例25】typeof区分数据范例

1. var number = 10;
2. var boolean = true;
3. var object = {};
4. var func = function(){};
5. var array = [];
6. var date = getDate();
7. var regexp = getRegExp();
9. console.log( 'number' === typeof number ); // true
10. console.log( 'boolean' === typeof boolean ); // true
11. console.log( 'object' === typeof object ); // true
12. console.log( 'function' === typeof func ); // true
13. console.log( 'object' === typeof array ); // true
14. console.log( 'object' === typeof date ); // true
15. console.log( 'object' === typeof regexp ); // true
16. console.log( 'undefined' === typeof undefined ); // true
17. console.log( 'object' === typeof null ); // true

复制代码

4 基础类库

WXS的数据范例一共有八种，这与JavaScript的六中数据范例不太同等。在WXS脚本语言中，基本数据范例包罗number、string、boolean、object、array、function、date、regexp等八种。在WXS脚本中的八种数据范例与JavaScript的数据范例有所差别，例如天生date对象时必要使用getDate()函数，天生 regexp 对象必要使用 getRegExp函数，这些对象都不能使用new关键字直接天生。WXS脚本基于这八种数据范例，派生出六种基础类库，分别是console、Math、JSON、Number、Date和Global。
WXS脚本语言的基础类库与JavaScript语言的ES5标准是基本是一样的，区别在于WXS中的console基础类库只提供了console.log()函数。其他的基础类库中对象的数据和函数，可以参考ES5标准文档。
5 本章小结

本章我们学习了WXS的一些语法特性，其实WXS语法和JavaScript的语法基本上是同等的，只是对JavaScript脚本语言的上层做了一些封装和限定。二者相同的地方非常多，例如if-else、switch、for等用于分支和循环的常用语法，还包罗一些基础的类库。但是二者也有一些区别，例如在WXS模块中不支持try-catch语句。WXS脚本可以方便开辟者在WXML中快速定义私有变量和函数，在使用WXS语言时可以参考ES5标准，但是还要注意WXS语法与JavaScript语法的区别。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。