学习微信小程序开发框架之脚本语言WXS

WXS（WeiXin Script）是小程序的一套脚本语言。结合 WXML，可以构建出页面视图的结构和内容。一般使用WXS做过滤处理，或者计算处理。WXS其实就是对JavaScript脚本语言的上层做了一些封装和限制。

注意：WXS的运行环境和其他 javascript 代码是隔离的，WXS中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。WXS函数不能作为组件的事件回调。

WXS有以下特性：
模块、变量、注释、运算符、语句、数据类型、基础类库

WXS特性

模块 module

文档：模块 · 小程序
模块可以通过标签来声明，也可以通过一个文件来声明。WXS模块的变量都是有作用域的，每一个模块默认自己的变量都是私有的，对外是不可见的

通过标签来声明：

<!--index.wxml-->
<wxs module="m1">
    module.exports = {
        message: 'Hello,world!'
    }
</wxs>

<view>{
    
    {
    
    m1.message}}</view>

通过module.exports函数让m1模块的变量暴露出来供外部使用。

以文件方式来声明，需要将目标文件命名为以.wxs为后缀：

<!--index.wxml-->
<wxs src="./m2.wxs" module="m2"></wxs>
<view>{
    
    {
    
    m2.message}}</view>

//m2.wxs
module.exports = require('./m1.wxs')

//m1.wxs
module.exports = {
    message: "hello world!"
}

在WXS文件内也可以通过require来引用其他WXS文件。

变量 variate

文档：变量 · 小程序
小程序的变量和ES5的变量用法一致。

WXS 中的变量均为值的引用。
没有声明的变量直接赋值使用，会被定义为全局变量。
如果只声明变量而不赋值，则默认值为 undefined。
var表现与javascript一致，会有变量提升。
变量名首字符必须是：字母（a-zA-Z），下划线（），剩余字符可以是：字母（a-zA-Z），下划线（），数字（0-9）

注释 annotation

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

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

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

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

</wxs>

运算符 operator

文档：运算符 · 小程序WXS的运算符包括基本运算符、一元运算符、位运算符、比较运算符、等值运算符、赋值运算符和二元逻辑运算符。

基本运算符：

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

其中typeof运算符是返回变量的数据类型。

位运算符：

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

运算符的优先级参考文档。
WXS的语句和JavaScript里常用的语句基本是一致的，包括if...else，do...while，switch等等，区别在于WXS内不支持try...catch语句。

数据类型 data type

number ：数值。number 包括两种数值：整数，小数。
string ：字符串。string有两种用法，单引号和双引号。
boolean：布尔值。布尔值只有两个特定的值：true 和 false。
object：对象。object 是一种无序的键值对。
function：函数
array : 数组
date：日期。生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。
regexp：正则。生成 regexp 对象需要使用 getRegExp函数。

数据类型的具体的属性和方法，参考文档：数据类型 · 小程序和ES5标准。

基础类库 basic library

文档：基础类库 · 小程序
WXS共有6种基础类库：Math, JSON, Number, Date, console, Global。和ES5标准基本一致。
区别在于，WXS的console类库是只提供console.log这一个方法。Date类库只提供了ES5中Date构造函数的三个方法即Date.parse（解析字符串形式的日期时间，返回该日期时间的Unix时间戳），Date.now（返回当前日期时间的Unix时间戳），Date.UTC（返回指定时间的Unix时间戳）。