javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 微信小程序WXS语法

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

作者：柯晓楠

WXS是小程序的一套脚本语言,结合 WXML,wxs类似js和js又不一样,好多js语法能在js使用不能在wxs使用可以构建出页面的结构,这篇文章主要给大家介绍了关于微信小程序实战教程之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模块

<!-- index.wxml -->
<wxs module="data">
    var str = "hello world";
    module.exports = {
        msg: str
    }
</wxs>
<view>data模块的值：{{ data.msg }}</view>

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

图1 wxs模块输出效果

在例1中声明了一个名字为data的模块，将模块中str字符串变量复制给data模块中的msg属性，并向外暴露，在当前页面可以使用data.msg获取模块中定义的值。

<wxs> 标签上还有另外一个src属性，值也是字符串类型，用于表示引入的.wxs文件的相对路径，只有在当前的<wxs>标签为单闭合标签或者标签的内容为空时有效。使用src属性引入其他.wxs文件时，需要注意以下几点：

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

图2 选择新建文件

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

【例2】WXS脚本文件代码

// tool.wxs
var str = "hello world from tool.wxs";
var sum =  function(a,b) {
    return a+b
}
module.exports = {
    msg: str,
    sum: sum
}

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

【例3】WXML中引入.wxs文件

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

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

图3 WXML中引入.wxs文件运行效果

.wxs文件还可以被其他的.wxs文件引用，引用时需要使用require函数。在引用.wxs文件时，需要注意以下几点：

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

【例4】

// tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

// logic.wxs
var tools = require("./tools.wxs");
console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

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

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

'hello world' from tools.wxs
logic.wxs
some msg

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

2.2 变量

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

【例5】WXS脚本声明变量

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

上面代码，分别声明了 foo、 bar、 i 三个变量。然后，foo 赋值为数值 1 ，bar 赋值为字符串 “hello world”。
在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脚本注释

<wxs module="sample">
// 方法一：单行注释

/*
方法二：多行注释
*/
</wxs>

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

【例7】结尾注释

<wxs module="sample">

/*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
var a = 1;
var b = 2;
var c = "fake";

</wxs>

在上面的例子中，所有的WXS代码均被注释掉了。

2.4 运算符

运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。WXS脚本中的运算符可以分为基本运算符、一元运算符、位运算符、比较运算符、等值运算符、赋值运算符、二元逻辑运算符等7种。

基本运算符主要用于四则运算，代码如例8所示。

【8】基本运算符

var a = 10, b = 20;

// 加法运算
console.log(30 === a + b);
// 减法运算
console.log(-10 === a - b);
// 乘法运算
console.log(200 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(10 === a % b);

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

【例9】一元运算符

var a = 10, b = 20;

// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);

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

【例10】位运算符

var a = 10, b = 20;

// 左移运算
console.log(80 === (a << 3));
// 带符号右移运算
console.log(2 === (a >> 2));
// 无符号右移运算
console.log(2 === (a >>> 2));
// 与运算
console.log(2 === (a & 3));
// 异或运算
console.log(9 === (a ^ 3));
// 或运算
console.log(11 === (a | 3));

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

【例11】比较运算符

var a = 10, b = 20;

// 小于
console.log(true === (a < b));
// 大于
console.log(false === (a > b));
// 小于等于
console.log(true === (a <= b));
// 大于等于
console.log(false === (a >= b));

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

【例12】等值运算符

var a = 10, b = 20;

// 等号
console.log(false === (a == b));
// 非等号
console.log(true === (a != b));
// 全等号
console.log(false === (a === b));
// 非全等号
console.log(true === (a !== b));

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

【例13】赋值运算符

var a = 10;

a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a <<= 10;
console.log(10240 === a);
a = 10; a >>= 2;
console.log(2 === a);
a = 10; a >>>= 2;
console.log(2 === a);
a = 10; a &= 3;
console.log(2 === a);
a = 10; a ^= 3;
console.log(9 === a);

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

【例14】二元逻辑运算符

var a = 10, b = 20;

// 逻辑与
console.log(20 === (a && b));
// 逻辑或
console.log(10 === (a || b));

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

2.5 语句

WXS脚本中主要包含了两类语句，一类是分支语句，包括if语句、switch语句；另一类是循环语句，包括for语句、while语句。

在WXS脚本中if的用法如例15所示。

【例15】if语句

if (表达式) {
  // 代码块
} else if (表达式) {
  // 代码块
} else {
  // 代码块
}

当大括号中的代码只有一行时，大括号“{}”可以省略，效果如例16所示。

【例16】if语句的简写方式

if (表达式) 语句;
else 语句;

// 或者是

if (表达式)
  语句;
else
  语句;

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

【例17】switch语法

switch (表达式) {
  case 变量:
    语句;
  case 数字:
    语句;
    break;
  case 字符串:
    语句;
  default:
    语句;
}

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

【例18】switch示例

var week = 1;

switch (week) {
case 1:
  console.log("周一");
  break;
case 2:
  console.log("周二");
  break;
case 3:
  console.log("周三");
  break;
case 4:
  console.log("周四");
  break;
case 5:
  console.log("周五");
  break;
case 6:
  console.log("周六");
  break;
case 7:
  console.log("周日");
  break;
default:
  console.log("请输入正确的周数");
}

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

周一

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

【例19】for循环语法

for (语句; 语句; 语句)
  语句;

// 或者是

for (语句; 语句; 语句) {
  代码块;
}

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

【例20】for循环示例

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

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

0
1

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

【例21】while语句语法

while (表达式)
  语句;

// 或者是

while (表达式){
  代码块;
}

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

do {
  代码块;
} while (表达式)

在使用while或do-while语句执行循环的代码时，一定要注意在合适的时机设置表达式的值为false，或者是合理设置跳出循环，否则将会出现死循环的情况。如果实际开发需求中需要使用到无限循环，可以不做跳出循环的操作。

3 数据类型

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

3.1 基本数据类型

在WXS脚本语言中，基本数据类型包括number（数值）、string（字符串）、boolean（布尔值）等。

number包括两种数值，分别是整数和小数，示例如下：

var a = 10;
var PI = 3.141592653589793;

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

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

3.2 引用数据类型

WXS脚本语言中的引用数据类型包括object（对象）、array（数组）、function（函数）、date（日期）等，这些引用数据类型与基本数据类型不同的是，基本数据类型是简单的数据段，被保存在栈内存中，而引用数据类型是有多个值构成的对象，被保存在堆内存中。

WXS脚本语言与其他语言不同的是，开发者不可以直接访问堆内存空间中的位置，也不能直接操作堆内存空间，只能操作对象在栈内存中的引用地址。所以，引用类型的数据在栈内存中保存的是对象在堆内存中的引用地址，通过这个引用地址可以快速查找到保存在堆内存中的对象。

（1）object对象

在WXS脚本中，object对象是一种无序的键值对，如果想要定义一个object对象，可以使用以下方法：

// 生成一个新的空对象
var o = {}
//生成一个新的非空对象
o = {
  str: '',
  i: 1,
  fn: function() {}
};

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

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

（2）function函数

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

// 普通函数
function fn () {}
// 或者是
var fn = function () {}

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

【例22】闭包

var a = function (x) {
  return function () { 
      return x;
  }
}
var b = a(100);
console.log( 100 === b() ); // true

（3）array数组

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

var a = [];

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

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

array对象上也定义了一系列操作数组的方法，例如数组转字符串的toString()、追加元素的push()、用于排序的sort()等方法，关于array对象的具体方法可以参考ES5标准。

（4）date日期

在WXS脚本中，想要生成一个date日期类型的对象，需要借助getDate()方法，该方法用于返回当前的日期对象。开发者也可以使用getDate()方法提供的多种重载方法，生成不同格式的日期对象，语法如下所示：

getDate()
getDate(milliseconds)
getDate(datestring)
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()方法，语法如下：

getRegExp(pattern[, flags])

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

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

【例23】

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

3.4 数据类型判断

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

【例24】constructor属性判断数据类型

var number = 10;
console.log( "Number" === number.constructor ); // true

var string = "str";
console.log( "String" === string.constructor ); // true

var boolean = true;
console.log( "Boolean" === boolean.constructor ); // true

var object = {};
console.log( "Object" === object.constructor ); // true

var func = function(){};
console.log( "Function" === func.constructor ); // true

var array = [];
console.log( "Array" === array.constructor ); // true

var date = getDate();
console.log( "Date" === date.constructor ); // true

var regexp = getRegExp();
console.log( "RegExp" === regexp.constructor ); // true

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

【例25】typeof区分数据类型

var number = 10;
var boolean = true;
var object = {};
var func = function(){};
var array = [];
var date = getDate();
var regexp = getRegExp();

console.log( 'number' === typeof number ); // true
console.log( 'boolean' === typeof boolean ); // true
console.log( 'object' === typeof object ); // true
console.log( 'function' === typeof func ); // true
console.log( 'object' === typeof array ); // true
console.log( 'object' === typeof date ); // true
console.log( 'object' === typeof regexp ); // true
console.log( 'undefined' === typeof undefined ); // true
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语法的区别。

到此这篇关于微信小程序实战教程之WXS语法详解的文章就介绍到这了,更多相关微信小程序WXS语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文