介绍

WXML 全称 WeiXin Markup Language（微信标记语言），是微信小程序专用的页面结构描述语言，对标网页里的 HTML，用来搭建页面骨架、布局元素、绑定数据与交互事件。

每个小程序页面都由 .wxml、.wxss、.js、.json 四类文件组成：

1. .wxml：页面结构（WXML）
2. .wxss：页面样式（类似 CSS）
3. .js：页面业务逻辑（JavaScript）
4. .json：页面配置（导航栏、窗口属性等）

WXML 和 HTML 的区别

1. 标签不通用
   不支持 HTML 标签（div/p/a/span 等全部失效），只能使用小程序内置组件：view、text、button、image、input 等。

2. 内置数据绑定语法
   HTML 无原生双向绑定，WXML 提供 {{ }} 插值语法，直接关联 js 文件 data 中的数据。

3. 原生支持渲染指令
   自带条件渲染 wx:if、列表循环 wx:for，不用手写 JS 拼接节点。

4. 事件体系独立
   不使用 onclick，统一 bindtap/catchtap 等小程序专属事件。

5. 模板复用机制
   提供 template、import、include 实现代码片段复用。

五大核心能力

• 数据绑定（{{ }} 插值语法）
• 条件渲染：控制组件是否渲染
• 列表渲染 wx:for 循环数组
• 事件绑定，实现页面交互
• 代码复用：template / import / include

常用内置基础组件

WXML 核心标签

1. 容器：<view>（块容器，替代 div）、<scroll-view>（滚动容器）、<block>（逻辑占位）
2. 文本：<text>（纯文本）、<rich-text>（渲染富文本）
3. 媒体：<image> 图片
4. 表单：input、textarea、button、radio、checkbox、switch、picker
5. 导航：<navigator> 页面跳转

总结

WXML 是小程序页面的骨架，承担三大核心职责：

1. 搭建页面布局结构，使用官方内置组件；
2. 绑定逻辑层（js）数据，自动更新视图；
3. 绑定用户交互事件，实现页面点击、输入等操作。

原文出处：/show_1GW3X1mhRSwd.html