作者： Next

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

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

仅 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 中的相同。

字面量

支持字面量有以下几种。

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

对象字面量简写

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

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

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

支持的运算符列表

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

自动可选链化

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

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

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

函数调用限制

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

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

基础库 2.12.0 开始支持，低版本需做兼容处理。

如果想要知道 setData 等更新调用引发界面更新的开销，可以使用更新性能统计信息接口。它将返回每次更新中主要更新步骤发生的时间戳，可以用来大体上估计自定义组件（或页面）更新性能。例如：

export default Component({
  attached() { // 调用时机不能早于 attached
    this.setUpdatePerformanceListener({withDataPaths: true}, (res) => {
      console.log(res)
    })
  }
})

setUpdatePerformanceListener 方法接受一个 options 对象和回调函数 listener 作为参数。

其中， options 对象包含以下字段：

listeners 返回携带一个 res 对象，表示一次由 setData 引发的 更新过程 。根据 setData 调用时机的不同，更新过程大体可以分为三类：

1. 基本更新 ，它有一个唯一的 updateProcessId ；
2. 子更新 ，它是另一个基本更新的一个子步骤，也有唯一的 updateProcessId ，但还有一个 parentUpdateProcessId ；
3. 被合并更新 ，它被合并到了另一个基本更新或子更新过程中，无法被独立统计。

每次成功的 setData 调用都会产生一个更新过程，使得 listener 回调一次。不过 setData 究竟触发了哪类更新过程很难判断，更新性能好坏与其具体是哪类更新也没有必然联系，只是它们的返回值参数有所不同。

res 中包含以下字段：

说明：

• setUpdatePerformanceListener 只会激活当前组件或页面的统计， parentUpdateProcessId 有可能是其他组件或者页面的更新过程 ID 而未被统计回调，如果想要知道页面内所有的更新过程，需要在所有组件中都调用 setUpdatePerformanceListener ；
• 统计本身有一点点开销，如果想要禁用统计，调用 setUpdatePerformanceListener 时传入第二个参数 listener 为 null 即可。