WXML 与数据绑定

WXML 描述页面结构。容器解析标签、属性与文本，把 {{}} 表达式求值后生成渲染节点， 再交给 Yoga 与 NanoVG。没有自定义组件与 <template> / <import>。

数据绑定

属性值与文本都可以使用 {{}}，表达式在页面数据作用域内求值：

<text>{{title}}</text>
<text>{{count + 1}}</text>
<text>{{user.name}}</text>
<image src="{{avatar}}" mode="aspectFit"/>
<view style="width: {{width}}rpx;"></view>

支持点路径、数组下标、.length、四则运算、比较、逻辑运算与三元表达式。 由于使用 JS 表达式求值，也可以调用 JSON.stringify 等全局函数。

条件渲染

wx:if、wx:elif、wx:else 按同级顺序组成条件链。 条件为假时不创建节点，也不参与布局。没有 hidden 属性。

<view wx:if="{{score >= 90}}">优秀</view>
<view wx:elif="{{score >= 70}}">良好</view>
<view wx:else>继续加油</view>

列表渲染

wx:for 遍历数组，默认变量名为 item、index， 可用 wx:for-item / wx:for-index 改名。 wx:key 可以写但当前不影响 diff —— 容器每次按数据重建节点树。

<view wx:for="{{items}}" wx:key="id" wx:for-item="row" wx:for-index="i">
  <text>{{i + 1}}. {{row.name}} — {{row.score}}</text>
</view>

事件绑定

data-* 会挂到事件对象的 dataset 上，属性名转为 camelCase： data-user-id → dataset.userId。 其中 data-overlay="true" 是容器的保留属性：视频全屏时该子树会绘制在画面之上（见组件文档的 video 一节）。

<view data-id="{{item.id}}" bindtap="onPick">选择</view>

onPick(e) {
  this.setData({ picked: e.currentTarget.dataset.id });
}

class 与 style

class 支持多个类名与 {{}} 插值，按 WXSS 选择器匹配； style 为内联声明，同样支持插值。内联样式优先级最高。

<view class="card {{active ? 'card-active' : ''}}" style="opacity: {{dim}};"></view>

未知标签

未在组件表中登记的标签会降级为 view，子节点照常渲染。 block 不生成节点，只展开子节点。