微信小程序WXML格式：深入理解

WXML不是HTML#

初次接触微信小程序的前端开发者最容易踩的坑：把WXML当HTML来写。WXML虽然长得像HTML，标签名也有view、text、image这种表面友好的包装，但底层的解析引擎完全不是浏览器那一套。它不能直接用div和span，不能直接在标签上写onclick，不能用标准的DOM API去操作元素。WXML是小程序框架自身的一套标记语言，配合WXSS和JS端对端渲染。

数据绑定#

WXML的数据绑定用的是双大括号语法（Mustache模板风格），来自Page中data对象的值可以直接用插值表达式嵌入。和Vue的模板语法高度类似但不需要v-bind指令。双括号内支持简单的三元表达式和字符串与数字的运算处理。

属性绑定和布尔属性的处理要注意默认值的细节，避免语义预期和实际渲染结果的偏差。

条件渲染#

wx指令是真条件渲染——条件为假时整个DOM节点完全不创建不挂载，适合切換频率不高的大块视图区域。hidden属性只是视觉上display，DOM始终存在，适合高频率的显示隐藏切换场景尤其是tab栏这种反复点击的位置。

列表渲染#

wx循环直接对数据数组迭代输出子节点。wx是列表性能优化的关键——小程序和Vue、React类似依赖key来做子节点的增量更新优化，不设key的话列表任何变动都会触发全量重绘性能下降显著。

事件绑定#

bind事件可以冒泡传递给父容器，catch事件阻止冒泡。触发的事件回调拿到event对象的detail数据区。和HTML统一的事件模型相比，事件命名名称和绑定方式有较一致的双向映射。

WXS脚本和自定义组件#

WXS是在WXML层直接执行的轻量版JS用于做模板内的数据过滤和格式化，和JS逻辑层隔离运行。自定义组件用Component构造器独立封装可复用粒度的模板块，配置多插槽以适应复杂嵌套布局。

掌握WXML的框架特色后，写小程序的视图层逻辑会在数据驱动渲染、组件抽象和事件管理三个维度上都有明确的结构把控。