小白开发微信小程序06--WXS 脚本

1、简介

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、模块

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

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

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

module 对象

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

属性

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

2、示例操作

在cctv.wxml文件中添加以下代码，保存运行，可以看到效果

在pages目录下创建module目录，添加test.wxs文件，写入以下内容

继续在cctv.wxml文件中引用入test.wxs模块文件，运行后的效果：

require函数

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

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

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

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

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

示例如下：

保持上面test.wxs文件内容不变，在module中添加文件demo.wxs，写入以下内容：

cctv.wxml文件中添加以下代码，执行效果如下：

3、小结如下：

1. 模块可以写在wxml文件中，直接使用

2. 模块写在单独wxs文件中，然后在wxml文件中引入并使用

3. 模块写在单独wxs文件中，使用require函数引用别的wxs文件，最后在wxml文件中使用

3、变量

概念

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

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

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

var表现与 javascript 一致，会有变量提升。

var foo = 1;

var bar = "hello world";

var i; // i === undefined

上面代码，分别声明了 foo、 bar、 i 三个变量。然后，foo 赋值为数值 1 ，bar 赋值为字符串 "hello world"。

变量名

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

首字符必须是：字母（a-zA-Z），下划线（_）

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

保留标识符

以下标识符不能作为变量名：

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

示例代码，cctv.wxml文件中加入代码，<wxs src="/pages/module/day.wxs" module="myday"></wxs>

：然后在day.wxs中写入以下代码：

4、注释

示例代码：

<!-- wxml -->

<wxs module="sample">

// 方法一：单行注释

/*

方法二：多行注释

*/

/*

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

var a = 1;

var b = 2;

var c = "fake";

</wxs>

5 、运算符

基本运算符

示例代码：

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

加法运算（+）也可以用作字符串的拼接。

var a = '.w' , b = 'xs';

// 字符串拼接

console.log('.wxs' === a + b);

一元运算符

示例代码：

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" === typeofa);

位运算符

示例代码：

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

比较运算符

示例代码：

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

等值运算符

示例代码：

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

赋值运算符

示例代码：

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

a = 10; a |= 3;

console.log(11 === a);

二元逻辑运算符

示例代码：

var a = 10, b = 20;

// 逻辑与

console.log(20 === (a && b));

// 逻辑或

console.log(10 === (a || b));

其他运算符

示例代码：

var a = 10, b = 20;

//条件运算符

console.log(20 === (a >= 10 ? a + 10 : b+ 10));

//逗号运算符

console.log(20 === (a, b));

示例代码：

结果如下：

6、语句

if 语句

在 WXS 中，可以使用以下格式的 if 语句：

if (expression) statement ：当 expression 为 truthy 时，执行 statement。

if (expression) statement1 else statement2: 当 expression 为 truthy 时，执行 statement1。否则，执行 statement2

if ... else if ... else statementN 通过该句型，可以在 statement1 ~ statementN 之间选其中一个执行。

switch 语句

示例语法：

switch (表达式) {

case 变量:

语句;

case 数字:

语句;

break;

case 字符串:

语句;

default:

语句;

}

default 分支可以省略不写。

case 关键词后面只能使用：变量，数字，字符串。

for 语句

示例语法：

for (语句; 语句; 语句)

语句;

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

代码块;

}

支持使用 break，continue 关键词。

示例代码：

for (var i = 0; i < 3; ++i) {

console.log(i);

if(i >= 1) break;

}

输出：

0

1

while 语句

示例语法：

while (表达式)

语句;

while (表达式){

代码块;

}

do {

代码块;

} while (表达式)

当表达式为 true 时，循环执行语句或代码块。

支持使用 break，continue 关键词。

7、数据类型

具体使用请参考 ES5 标准

8、基础类库

有钱说什么都是硬道理，没钱说什么都是吹牛逼。