属性绑定前缀

WXML 的属性有很多不同的绑定前缀,用于组件框架提供各种各样的特性。

以下是支持的属性绑定前缀及其参考文档的列表。

属性绑定前缀 说明 附注
let: 用于定义临时变量 仅 glass-easel 组件框架支持
class: 框架属性中的样式类 仅 glass-easel 组件框架支持
style: 框架属性中的内联样式 仅 glass-easel 组件框架支持
bind: 用于事件绑定
catch: 用于事件绑定
mut-bind: 用于事件绑定
capture-bind: 用于事件绑定
capture-catch: 用于事件绑定
capture-mut-bind: 用于事件绑定
mark: 用于事件绑定中的 mark
data: 用于事件绑定中的 dataset
slot: 用于接收动态 slot 传递的值 仅 glass-easel 组件框架支持
generic: 用于自定义组件的抽象节点
change: 监听属性变化,用于 WXS 响应函数
worklet: 用于 Skyline 渲染引擎的 worklet

临时变量

仅 glass-easel 组件框架支持

有时,逻辑层提供的数据结构很复杂,而数据中的一部分又被反复使用。

这时可以用 let: 语法创建一个临时变量,例如:

<block let:student="{{ some.complex.student.data }}">
  <view>ID:{{ student.id }}</view>
  <view>名字:{{ student.name }}</view>
  <view>年龄:{{ student.age }}</view>
</block>

let: 创建的临时变量,其作用范围仅限于它所在的标签本身及其内部。

框架属性

框架内置了一些属性。这些属性对所有组件都有效。

id 属性

组件的标识符。

<view id="hello"> Hello world! </view>

slot 属性

用来表达这个节点应该被放入 multipleSlots 模式 自定义组件 中的哪个插槽。

class 样式类

样式类主要用于结合 WXSS 来指定组件的样式。

样式类有两种写法:属性写法和前缀写法。其中,前缀写法仅 glass-easel 组件框架支持。它们的基本用法如下:

<!-- 属性写法 -->
<view class="hello"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view class:hello> Hello world! </view>

需要应用多个 class 时,可以这样写:

<!-- 属性写法 -->
<view class="hello hello-big"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view class:hello class:hello-big> Hello world! </view>

属性写法像普通属性那样接受数据绑定。对于前缀写法,每个 class: 单独接受一个数据绑定表达式,只有表达式为真时,这个 class: 才会生效。例如:

<!-- 属性写法 -->
<view class="hello {{ big ? 'hello-big' : '' }}"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view class:hello class:hello-big="{{ big }}"> Hello world! </view>

注意:每个节点都可以选择用两种写法之一;但如果在一个节点上使用了前缀写法,就不能在同一个节点的 class 属性中使用数据绑定。

前缀写法仅 glass-easel 组件框架支持。在 glass-easel 组件框架中,前缀写法往往会更直观,因而优先推荐。

style 内联样式

内联样式可以用于指定组件的样式。

内联样式有两种写法:属性写法和前缀写法。其中,前缀写法仅 glass-easel 组件框架支持。它们的基本用法如下:

<!-- 属性写法 -->
<view style="font-size: 1.2em; color: blue;"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view style:font-size="1.2em" style:color="blue"> Hello world! </view>

使用数据绑定时:

<!-- 属性写法 -->
<view style="font-size: {{ size }}em; color: {{ colorName }};"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view style:font-size="{{ size }}em" style:color="{{ colorName }}"> Hello world! </view>

注意:每个节点都可以选择用两种写法之一;但如果在一个节点上使用了前缀写法,就不能在同一个节点的 style 属性中使用数据绑定。

前缀写法仅 glass-easel 组件框架支持。在 glass-easel 组件框架中,前缀写法往往会更直观,因而优先推荐。

在实践中,静态样式定义写在 WXSS 中更有利于代码可读性;只有需要动态改变的样式才应使用 style 指定。换句话说,如果 style 没有数据绑定,那就应该考虑写在 WXSS 中,以提升代码的可维护性。

框架标签

有些标签并不对应着组件,而是承担着特殊的框架语义。

虚拟块

虚拟块 <block> 自身没有语义,也不对应于任何组件,但可以在它标签体中放入属性。它支持很多属性:

  • 框架属性 中的 id slot 和 slot 变量引用;
  • 临时变量 let:
  • 条件渲染 wx:if
  • 列表渲染 wx:for wx:for-item wx:for-index wx:key

简单来说,除了 WXSS 样式相关的属性不能使用之外,其他常用属性都能使用。

插槽节点

插槽节点 <slot> 用于在 自定义组件 中表达承载父组件提供的子树的结构。

数据绑定表达式

数据绑定 {{ ... }} 内部的表达式,可以使用大部分 JS 运算符。

一个复杂表达式的例子:

<view>{{ a !== 0 ? 'Number: ' + a : 'Zero' }}</view>

关键字

部分标识符被视为关键字,它们不被视为数据字段。这些关键字的含义和 JS 中的相同。

关键字
undefined
null
false
true

字面量

支持字面量有以下几种。

字面量类型 示例
字符串 "示例字符串" '示例字符串'
数值 2017 1.9
数组字面量 [ 1, 2, 34 ]
对象字面量 { a: 1, b, c: 3 + 4 }

数组字面量、对象字面量内可以使用 ... 展开其他数组、对象。

对象字面量简写

glass-easel 组件框架完全支持对象字面量简写;对于 exparser 组件框架,只有 template data 可以使用对象字面量简写。

如果数据绑定表达式完全就是一个对象字面量,那可以省略对象字面量的花括号 { }

<view mark:ab="{{ a: 1, b }}" />
<!-- 等价于 -->
<view mark:ab="{{ { a: 1, b } }}" />

支持的运算符列表

以下是支持的运算符列表。各个运算符语义与 JS 中的相同。

分类 运算符 示例 附注
成员访问和函数调用 . obj.field
[...] obj[field]
(...) func(arg1, arg2) 请参考 函数调用限制
一元运算 ! !cond
~ ~int
+ +num
- -num
typeof typeof value 仅 glass-easel 组件框架支持
void void value 仅 glass-easel 组件框架支持
乘除 * a * b
/ a / b
% a % b
加减 + a + b
- a - b
移位运算 << int << 2
>> int >> 2
>>> int >>> 2
大小比较 < a < b
> a > b
<= a <= b
>= a >= b
instanceof value instanceof type 仅 glass-easel 组件框架支持
相等判断 == a == b
!= a != b
=== a === b
!== a !== b
按位与 & int1 & int2
按位异或 ^ int1 ^ int2
按位或 \| int1 \| int2
逻辑与 && a && b
逻辑或和空值合并 \|\| a \|\| b
?? a ?? b 仅 glass-easel 组件框架支持
条件运算 ? ... : a ? b : c

自动可选链化

成员访问和函数调用运算符,会自动转换成他们的可选链版本。

  • . 被自动视为 ?.
  • [...] 被自动视为 ?.[...]
  • (...) 被自动视为 ?.(...)

因此不需要写可选链运算符 ?.。若访问 undefinednull 的成员,表达式结果为 undefined

函数调用限制

可以使用 (...) 来进行函数调用。但函数调用有一定的限制和注意事项。

  • 组件框架执行模板中函数的时机是不确定的,可能在运行期间的任何时候调用函数,也可能会跳过函数调用。
  • 在 exparser 组件框架中,只有 WXS 中定义的函数能被调用。
  • 参数列表中不能使用 ...

基础类库

console

console.log 方法用于在 console 窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出。

Math

属性

  • E
  • LN10
  • LN2
  • LOG2E
  • LOG10E
  • PI
  • SQRT1_2
  • SQRT2

以上属性的具体使用请参考 ES5 标准。

方法

  • abs
  • acos
  • asin
  • atan
  • atan2
  • ceil
  • cos
  • exp
  • floor
  • log
  • max
  • min
  • pow
  • random
  • round
  • sin
  • sqrt
  • tan

以上方法的具体使用请参考 ES5 标准。

JSON

方法

  • stringify(object): 将 object 对象转换为 JSON 字符串,并返回该字符串。
  • parse(string): 将 JSON 字符串转化成对象,并返回该对象。

示例代码:


console.log(undefined === JSON.stringify());
console.log(undefined === JSON.stringify(undefined));
console.log("null"===JSON.stringify(null));

console.log("111"===JSON.stringify(111));
console.log('"111"'===JSON.stringify("111"));
console.log("true"===JSON.stringify(true));
console.log(undefined===JSON.stringify(function(){}));

console.log(undefined===JSON.parse(JSON.stringify()));
console.log(undefined===JSON.parse(JSON.stringify(undefined)));
console.log(null===JSON.parse(JSON.stringify(null)));

console.log(111===JSON.parse(JSON.stringify(111)));
console.log("111"===JSON.parse(JSON.stringify("111")));
console.log(true===JSON.parse(JSON.stringify(true)));

console.log(undefined===JSON.parse(JSON.stringify(function(){})));

Number

属性

  • MAX_VALUE
  • MIN_VALUE
  • NEGATIVE_INFINITY
  • POSITIVE_INFINITY

以上属性的具体使用请参考 ES5 标准。

Date

属性

  • parse
  • UTC
  • now

以上属性的具体使用请参考 ES5 标准。

Global

属性

  • NaN
  • Infinity
  • undefined

以上属性的具体使用请参考 ES5 标准。

方法

  • parseInt
  • parseFloat
  • isNaN
  • isFinite
  • decodeURI
  • decodeURIComponent
  • encodeURI
  • encodeURIComponent

以上方法的具体使用请参考 ES5 标准。

数据类型

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

  • number : 数值
  • string :字符串
  • boolean:布尔值
  • object:对象
  • function:函数
  • array : 数组
  • date:日期
  • regexp:正则

number

语法

number 包括两种数值:整数,小数。

var a = 10;
var PI = 3.141592653589793;

属性

  • constructor:返回字符串 "Number"

方法

  • toString
  • toLocaleString
  • valueOf
  • toFixed
  • toExponential
  • toPrecision

以上方法的具体使用请参考 ES5 标准。

string

语法

string 有两种写法:

'hello world';
"hello world";

属性

  • constructor:返回字符串 "String"
  • length

除constructor外属性的具体含义请参考 ES5 标准。

方法

  • toString
  • valueOf
  • charAt
  • charCodeAt
  • concat
  • indexOf
  • lastIndexOf
  • localeCompare
  • match
  • replace
  • search
  • slice
  • split
  • substring
  • toLowerCase
  • toLocaleLowerCase
  • toUpperCase
  • toLocaleUpperCase
  • trim

以上方法的具体使用请参考 ES5 标准。

boolean

语法

布尔值只有两个特定的值:truefalse

属性

  • constructor:返回字符串 "Boolean"

方法

  • toString
  • valueOf

以上方法的具体使用请参考 ES5 标准。

object

语法

object 是一种无序的键值对。使用方法如下所示:

var o = {} //生成一个新的空对象

//生成一个新的非空对象
o = {
  'string'  : 1,  //object 的 key 可以是字符串
  const_var : 2,  //object 的 key 也可以是符合变量定义规则的标识符
  func      : {}, //object 的 value 可以是任何类型
};

//对象属性的读操作
console.log(1 === o['string']);
console.log(2 === o.const_var);

//对象属性的写操作
o['string']++;
o['string'] += 10;
o.const_var++;
o.const_var += 10;

//对象属性的读操作
console.log(12 === o['string']);
console.log(13 === o.const_var);

属性

  • constructor:返回字符串 "Object"
console.log("Object" === {k:"1",v:"2"}.constructor)

方法

  • toString:返回字符串 "[object Object]"

function

语法

function 支持以下的定义方式:

//方法 1
function a (x) {
  return x;
}

//方法 2
var b = function (x) {
  return x;
}

function 同时也支持以下的语法(匿名函数,闭包等):

var a = function (x) {
  return function () { return x;}
}

var b = a(100);
console.log( 100 === b() );

arguments

function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性:

  • length: 传递给函数的参数个数。
  • [index]: 通过 index 下标可以遍历传递给函数的每个参数。

示例代码:

var a = function(){
  console.log(3 === arguments.length);
  console.log(100 === arguments[0]);
  console.log(200 === arguments[1]);
  console.log(300 === arguments[2]);
};
a(100,200,300);

属性

  • constructor:返回字符串 "Function"
  • length:返回函数的形参个数。

方法

  • toString:返回字符串 "[function Function]"

示例代码:

var func = function (a,b,c) { }

console.log("Function" === func.constructor);
console.log(3 === func.length);
console.log("[function Function]" === func.toString());

array

语法

array 支持以下的定义方式:

var a = [];      //生成一个新的空数组

a = [1,"2",{},function(){}];  //生成一个新的非空数组,数组元素可以是任何类型

属性

  • constructor:返回字符串 "Array"
  • length

除constructor外属性的具体含义请参考 ES5 标准。

方法

  • toString
  • concat
  • join
  • pop
  • push
  • reverse
  • shift
  • slice
  • sort
  • splice
  • unshift
  • indexOf
  • lastIndexOf
  • every
  • some
  • forEach
  • map
  • filter
  • reduce
  • reduceRight

以上方法的具体使用请参考 ES5 标准。

date

语法

生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。

getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
  • 参数
    • milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数
    • datestring: 日期字符串,其格式为:”month day, year hours:minutes:seconds”

语句

if 语句

微信小程序 WXS 中,可以使用以下格式的 if 语句 :

  • if (expression) statement : 当 expression 为真值时,执行 statement

  • if (expression) statement1 else statement2 : 当 expression 为真值时,执行 statement1。 否则,执行 statement2

  • if ... else if ... else statementN 通过该句型,可以在 statement1statementN 之间选择其中一个执行。

示例语法:

// if ...

if (表达式) 语句;

if (表达式)
  语句;

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

// if ... else

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

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

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

// if ... else if ... else ...

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

switch 语句

示例语法:

switch (表达式) {
  case 变量:
    语句;
  case 数字:
    语句;
    break;
  case 字符串:
    语句;
  default:
    语句;
}
  • default 分支可以省略不写。
  • case 关键词后面只能使用:变量数字字符串

示例代码:

var exp = 10;

switch ( exp ) {
case "10":
  console.log("string 10");
  break;
case 10:
  console.log("number 10");
  break;
case exp:
  console.log("var exp");
  break;
default:
  console.log("default");
}

输出:

number 10

for 语句

示例语法:

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

for (语句; 语句; 语句) {
  代码块;
}
  • 支持使用 breakcontinue 关键词。

示例代码:

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

输出:

0
1

while 语句

示例语法:

while (表达式)
  语句;

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

do {
  代码块;
} while (表达式)
  • 表达式为 true 时,循环执行语句代码块
  • 支持使用 breakcontinue 关键词。

运算符

基本运算符

示例代码:

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

位运算符

示例代码:

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

运算符优先级

优先级 运算符 说明 结合性
20 () 括号 n/a
19 . 成员访问 从左到右
[] 成员访问 从左到右
() 函数调用 从左到右
17 ++ 后置递增 n/a
-- 后置递减 n/a
16 ! 逻辑非 从右到左
~ 按位非 从右到左
+ 一元加法 从右到左
- 一元减法 从右到左
++ 前置递增 从右到左
-- 前置递减 从右到左
typeof typeof 从右到左
void void 从右到左
delete delete 从右到左
14 * 乘法 从左到右
/ 除法 从左到右
% 取模 从左到右
13 + 加法 从左到右
- 减法 从左到右
12 << 按位左移 从左到右
>> 按位右移 从左到右
>>> 无符号右移 从左到右
11 < 小于 从左到右
<= 小于等于 从左到右
> 大于 从左到右
>= 大于等于 从左到右
10 == 等号 从左到右
!= 非等号 从左到右
=== 全等号 从左到右
!== 非全等号 从左到右
9 & 按位与 从左到右
8 ^ 按位异或 从左到右
7 按位或 从左到右
6 && 逻辑与 从左到右
5 || 逻辑或 从左到右
4 ?: 条件运算符 从右到左
3 = 赋值 从右到左
+= 赋值 从右到左
-= 赋值 从右到左
*= 赋值 从右到左
/= 赋值 从右到左
%= 赋值 从右到左
<<= 赋值 从右到左
>>= 赋值 从右到左
>>>= 赋值 从右到左
&= 赋值 从右到左
^= 赋值 从右到左
|= 赋值 从右到左
0 , 逗号 从左到右

注释

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

示例代码:

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

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

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

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

</wxs>

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

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