🚀微信小程序视图层

完成小程序和页面的注册后，就可以开始构建小程序页面视图了。WXML 是视图层框架设计的标签语言，结合基础组件、事件系统，可以构建出页面的视图。

🔎1 WXML

在框架页面文件的 *.wxml 文件里，可以利用 WXML 来构建小程序页面视图。构建视图页面内容需要用到组件。例如，在页面中显示“你好，微信小程序”，代码如下：

<view>你好，微信小程序</view>

补充说明：

• WXML 类似 HTML，但标签和属性是微信小程序自定义的。
• 常用组件包括 view、text、image、button、input、scroll-view 等。
• WXML 负责页面结构，WXSS 负责页面样式，JS 负责页面逻辑。
• WXML 标签通常需要闭合，属性值建议使用双引号。

🔎2 动态绑定数据

在 *.wxml 文件里，可以使用 view 组件进行布局设计。在上一小节的示例中，页面中显示的内容是直接写在 view 组件中的，不是动态数据。那么如何动态地绑定数据呢？

*.wxml 文件中使用的动态数据都来自 *.js 文件中 Page() 函数的 data 对象。在 *.wxml 文件中，通过双大括号 {{}} 将在 *.js 文件中定义的变量括起来，放在 view 组件中，这样就可以实现数据动态绑定效果了。

示例代码如下：

index.wxml

<!--index.wxml--><view>{{message}}</view>

index.js

// index.jsPage({  data: {    message: '你好，微信小程序'  }});

说明：

• {{message}}
   会读取 Page 中 data.message 的值。
• 当 data 中的数据变化时，通过 this.setData() 更新，页面会自动刷新。
• 直接修改 this.data.message 不会触发页面更新。

🔎3 组件属性动态绑定数据

组件属性动态绑定数据就是将 *.js 文件中 data 对象里的数据绑定到小程序的组件上，示例代码如下：

index.wxml

<!--index.wxml--><viewid="{{id}}"></view>

index.js

// index.jsPage({  data: {    id: 0  }});

说明：

• id="{{id}}"
   表示把 data.id 的值绑定到 view 组件的 id 属性上。
• 属性绑定建议加引号，例如 id="{{id}}"，避免被解析为字符串。
• 除了 id，还可以绑定 class、style、src、disabled 等属性。

🔎4 控制属性动态绑定数据

控制属性动态绑定数据是通过条件判断语句 wx:if 来控制的。如果满足条件，则执行该语句；否则不执行。示例代码如下：

index.wxml

<!--index.wxml--><viewwx:if="{{flag}}"></view>

index.js

// index.jsPage({  data: {    flag: true  }});

说明：

• wx:if="{{flag}}"
   为真时渲染该节点，为假时不渲染。
• 可以配合 wx:elif、wx:else 使用。
• wx:if
   是条件渲染，不满足条件时节点不会生成。
• 如果需要节点始终存在，只是显示或隐藏，可以使用 hidden 属性。

🔎5 关键字动态绑定数据

关键字动态绑定数据是指为组件（如复选框组件）的一些关键字绑定数据。checked 关键字如果等于 true，则代表勾选了此复选框；若等于 false，则代表不勾选。示例代码如下：

<checkboxchecked="{{false}}"></checkbox>

注意：不要直接写成 checked="false"，否则其计算结果是一个字符串，转换成 boolean 类型后代表真值。

正确写法：

<checkboxchecked="{{false}}"></checkbox>

错误写法：

<checkboxchecked="false"></checkbox>

说明：

• 在 WXML 中，布尔值必须通过 {{}} 绑定。
• 字符串 "false" 转换为布尔值是 true。
• 类似关键字还有 disabled、hidden、selected 等。

🔎6 运算

可以在 {{}} 内进行简单的运算，小程序支持以下几种运算。

🦋1. 三元运算

示例代码如下：

<viewhidden="{{flag ? true : false}}">Hidden</view>

🦋2. 数学运算

示例代码如下：

index.wxml

<!--index.wxml--><view>{{a + b}} + {{c}} + d</view>

index.js

// index.jsPage({  data: {    a: 1,    b: 2,    c: 3  }});

view 组件中的内容为 3 + 3 + d。

🦋3. 逻辑判断

示例代码如下：

<viewwx:if="{{length > 5}}"></view>

🦋4. 字符串运算

示例代码如下：

index.wxml

<!--index.wxml--><view>{{"hello" + name}}</view>

index.js

// index.jsPage({  data: {    name: 'MINA'  }});

输出结果为 hello MINA。

🦋5. 数据路径运算

示例代码如下：

index.wxml

<!--index.wxml--><view>{{object.key}} {{array[0]}}</view>

index.js

// index.jsPage({  data: {    object: {      key: 'Hello '    },    array: ['MINA']  }});

输出结果为 Hello MINA。

运算补充说明：

• {{}}
   内可以写表达式，但不能写语句，例如 if、for、函数声明。
• 支持 +、-、*、/、% 等算术运算。
• 支持 >、<、>=、<=、==、===、!=、!== 等比较运算。
• 支持 &&、||、! 等逻辑运算。
• 支持三元运算、字符串拼接、数组下标、对象属性取值。
• 复杂逻辑建议在 JS 中处理，WXML 中只做简单绑定和展示。

🔎7 补充：事件绑定与数据更新

WXML 还可以通过事件系统与 JS 交互。常用事件绑定方式包括 bindtap、catchtap 等。

示例代码如下：

index.wxml

<view>{{message}}</view><buttonbindtap="onTap">点击更新</button>

index.js

Page({  data: {    message: '你好，微信小程序'  },  onTap() {    this.setData({      message: '数据已更新'    });  }});

说明：

• bindtap
   绑定点击事件。
• 事件处理函数定义在 Page() 中。
• 通过 this.setData() 更新数据，页面自动刷新。
• catchtap
   可以阻止事件冒泡。

🔎注意事项

1. {{}}
    是 WXML 的数据绑定语法，不能省略。
2. checked="false"
    会被当作字符串，必须写成 checked="{{false}}"。
3. wx:if
    是条件渲染，hidden 是显示隐藏，二者适用场景不同。
4. {{}}
    内只支持表达式，不支持语句。
5. 复杂逻辑应放在 JS 中处理，WXML 保持简洁。
6. 属性绑定建议加引号，例如 id="{{id}}"。
7. 数据更新必须使用 this.setData()。
8. 使用 AI 生成 WXML 代码后，需要人工检查布尔值、属性绑定和条件渲染是否正确。

🚀附：AI 提示词模板与完整回答示例

原文未包含 AI 提示词模板和回答。以下为便于学习和开发补充的完整模板与完整回答，可直接复制使用。

🔎模板 1：让 AI 解释 WXML 数据绑定与运算

提示词模板：

请详细解释微信小程序 WXML 中的数据绑定和运算。要求：1. 说明 WXML 的作用；2. 说明数据来自 Page 的 data；3. 说明 {{}} 的用法；4. 分别举例：动态文本、组件属性、控制属性、关键字、三元、数学、逻辑、字符串、数据路径；5. 给出完整 WXML 和 JS 代码；6. 说明注意事项。请用分级标题和代码块输出，内容完整。

完整回答示例：

微信小程序 WXML 数据绑定与运算详解

🦋一、WXML 的作用

WXML 是微信小程序的视图层标签语言，用于描述页面结构。它结合基础组件和事件系统，构建页面视图。

🦋二、数据来源

WXML 中的动态数据来自 Page() 函数中的 data 对象。

Page({  data: {    message: '你好，微信小程序'  }});

🦋三、{{}} 的用法

在 WXML 中使用双大括号 {{}} 绑定数据。

<view>{{message}}</view>

🦋四、完整示例

index.wxml

<view>{{message}}</view><viewid="{{id}}">组件属性绑定</view><viewwx:if="{{flag}}">条件渲染显示</view><checkboxchecked="{{checked}}"></checkbox><viewhidden="{{flag ? true : false}}">三元运算</view><view>{{a + b}} + {{c}} + d</view><viewwx:if="{{length > 5}}">逻辑判断</view><view>{{"hello" + name}}</view><view>{{object.key}} {{array[0]}}</view><buttonbindtap="onTap">点击更新</button>

index.js

Page({  data: {    message: '你好，微信小程序',    id: 0,    flag: true,    checked: false,    a: 1,    b: 2,    c: 3,    length: 10,    name: 'MINA',    object: {      key: 'Hello '    },    array: ['MINA']  },  onTap() {    this.setData({      message: '数据已更新'    });  }});

🦋五、注意事项

1. {{}}
    不能省略。
2. checked="false"
    是字符串，必须写成 checked="{{false}}"。
3. wx:if
    为假时节点不渲染。
4. {{}}
    内不能写语句。
5. 数据更新使用 this.setData()。
6. 复杂逻辑放在 JS 中处理。

🔎模板 2：让 AI 修复 WXML 代码错误

提示词模板：

我在微信小程序 WXML 中遇到以下代码问题，请帮我修复，并解释修改点。错误代码：<view> ({ message }) </view><viewwx:if="((flag))"></view><checkboxchecked="false"></checkbox><viewhidden="([flag ? true : false))">Hidden</view><view>[(object.keyl) ((array[0]l)</view>相关 JS：Page({  data: {    message: '你好',    flag: true,    object: { key: 'Hello ' },    array: ['MINA']  }})

完整回答示例：

修复后的 WXML：

<view>{{message}}</view><viewwx:if="{{flag}}"></view><checkboxchecked="{{false}}"></checkbox><viewhidden="{{flag ? true : false}}">Hidden</view><view>{{object.key}} {{array[0]}}</view>

相关 JS：

Page({  data: {    message: '你好',    flag: true,    object: {      key: 'Hello '    },    array: ['MINA']  }});

修改点说明：

1. ({ message })
    改为 {{message}}，正确使用双大括号。
2. wx:if="((flag))"
    改为 wx:if="{{flag}}"。
3. checked="false"
    改为 checked="{{false}}"，否则 "false" 是字符串，布尔值为真。
4. hidden="([flag ? true : false))"
    改为 hidden="{{flag ? true : false}}"。
5. [(object.keyl) ((array[0]l)
    改为 {{object.key}} {{array[0]}}。
6. 所有数据绑定都必须使用正确的 {{}} 语法。
7. 布尔值、条件、属性绑定都要通过 {{}} 处理。