程序员scholar
  • 小程序开发
  • 原生微信小程序
  • 模板与配置
scholar
2024-10-18
目录

WXML 模板语法

# WXML 模板语法

# 1. 数据绑定

# 1.1 数据绑定的基本原则

数据绑定是 WXML 模板语法的核心功能，用于将页面中的数据和 UI 组件动态连接起来。数据绑定的基本原则包括：

  1. 在 data 中定义数据：首先，必须在页面的 .js 文件中，通过 data 对象定义页面中的数据。
  2. 在 WXML 中使用数据：然后，通过 WXML 模板语法将这些数据绑定到页面中，动态渲染内容。

# 1.2 在 data 中定义页面的数据

在页面的 .js 文件中定义页面的数据，将数据放置到 data 对象中。data 中的数据可以是字符串、数字、数组、对象等。

例如，在页面的 .js 文件中定义如下数据：

Page({
  data: {
    message: "Hello, WeChat Mini Program!"
  }
})
1
2
3
4
5

这段代码定义了一个页面，页面的数据包含 message 字段，内容是字符串 “Hello, WeChat Mini Program!”。

如下图所示，在 .js 文件中定义数据：

image-20240202232852777

# 1.3 Mustache 语法的格式

在 WXML 中使用 Mustache 语法（双大括号 {{}}）来绑定和显示 data 中定义的数据。

例如：

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

这行代码使用 将 data 中的 message 数据绑定并渲染到页面上。最终，页面会显示 data 中的内容。

如下图所示，Mustache 语法格式：

image-20240202232929541

# 1.4 Mustache 语法的应用场景

Mustache 语法不仅用于绑定简单的数据，它还有许多应用场景：

  • 绑定内容：在页面中直接显示文字、数字等内容。
  • 绑定属性：将数据动态绑定到标签的属性上，例如 src、alt 等属性。
  • 运算：可以在 Mustache 语法中进行简单的算术运算和三元运算。

例如：

<view>{{ condition ? 'Yes' : 'No' }}</view>
1

这段代码会根据 condition 的值来动态显示 “Yes” 或 “No”。

<view>{{ number1 + number2 }}</view>
1

上面这段代码则会将两个数字相加，并显示结果。

# 1.5 动态绑定内容

页面数据：

Page({
  data: {
    message: "Welcome to Mini Program!"
  }
})
1
2
3
4
5

页面结构：

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

在这个例子中，data 中的 message 被动态绑定到页面中，页面会显示内容 "Welcome to Mini Program!"。

如下图展示了页面数据和结构绑定内容的效果：

image-20240202233030837

# 1.6 动态绑定属性

除了绑定文本内容，还可以将数据动态绑定到组件的属性上。例如，动态设置图片的 src 属性。

页面数据：

Page({
  data: {
    imgSrc: "/images/logo.png"
  }
})
1
2
3
4
5

页面结构：

<image src="{{ imgSrc }}"></image>
1

在这个例子中，data 中的 imgSrc 动态绑定到图片的 src 属性。最终页面会显示指定的图片。

如下图展示了动态绑定属性的效果：

image-20240202233127694

# 1.7 三元运算

在 WXML 中，可以使用三元运算符来实现条件判断。

页面数据：

Page({
  data: {
    condition: true
  }
})
1
2
3
4
5

页面结构：

<view>{{ condition ? 'Yes' : 'No' }}</view>
1

根据 condition 的值，页面会动态显示 "Yes" 或 "No"。如果 condition 为 true，则显示 “Yes”，否则显示 “No”。

如下图所示，三元运算的使用效果：

image-20240202233219713

# 1.8 算术运算

可以在 WXML 中直接进行简单的算术运算。

页面数据：

Page({
  data: {
    number1: 5,
    number2: 3
  }
})
1
2
3
4
5
6

页面结构：

<view>{{ number1 + number2 }}</view>
1

在页面上，number1 和 number2 的和将被计算并显示出来。这个例子中，页面会显示 8。

如下图展示了算术运算的效果：

image-20240202233301073

# 2. 事件绑定

# 2.1 什么是事件

事件是小程序中用来实现用户交互的机制。用户在页面上执行的操作（如点击、滑动、输入等），可以通过事件绑定的方式传递到逻辑层处理。

通过事件，用户的行为可以反馈到小程序的逻辑层，从而实现页面内容的更新或其他操作。例如，当用户点击按钮时，会触发点击事件，页面的显示内容可能会改变。

image-20240202233344639

# 2.2 小程序中常用的事件

小程序提供了多种事件处理方法，以下是一些常用的事件：

  • bindtap：处理点击事件，类似于 HTML 中的 onclick。
  • bindinput：处理用户在输入框中的输入。
  • bindsubmit：处理表单提交事件。

下图列出了常见的事件类型：

image-20240202233407224

# 2.3 事件对象的属性列表

当事件被触发时，事件处理函数会接收一个事件对象 event，该对象包含了关于事件的详细信息。常见的事件对象属性包括：

  • type：事件类型（如 tap）。
  • target：触发事件的组件。
  • currentTarget：绑定事件的组件。
  • detail：事件的详细信息，如点击位置、输入内容等。

下图列出了事件对象的常见属性：

image-20240202233438825

# 2.4 target 和 currentTarget 的区别

  • target：是事件的源组件，即用户实际点击或操作的那个组件。
  • currentTarget：是绑定了事件处理函数的组件。

举例：当点击按钮时，如果按钮嵌套在 view 中，点击按钮会同时触发 view 的点击事件。

<view bindtap="onViewTap">
  <button bindtap="onButtonTap">Click Me</button>
</view>
1
2
3

当点击按钮时：

  • e.target 是按钮，因为这是用户点击的组件。
  • e.currentTarget 是 view，因为点击事件绑定在了 view 上。

下图展示了 target 和 currentTarget 的区别：

target 和 currentTarget

# 2.5 bindtap 的语法格式

在小程序中，bindtap 用于绑定 tap 事件，处理用户点击操作。

语法格式：

<view bindtap="onTap">Tap me</view>
1

在 .js 文件中定义事件处理函数：

Page({
  onTap: function(event) {
    console.log(event)
  }
})
1
2
3
4
5

如下图展示了 bindtap 的语法格式和使用效果：

bindtap

# 2.6 在事件处理函数中为 data 中的数据赋值

事件处理函数不仅可以处理用户操作，还可以通过 this.setData() 更新页面数据，从而动态更新页面显示内容。

例如，点击按钮后更新 data 中的 count 值：

Page

({
  data: {
    count: 0
  },
  increaseCount: function() {
    this.setData({
      count: this.data.count + 1
    });
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

点击按钮时，页面上的 count 值会随着点击次数增加：

setData

# 2.7 事件传参

在小程序中，不能直接在 bindtap 中传递参数。要为事件处理函数传递参数，通常通过 data-* 自定义属性传递。

例如：

<view bindtap="btnHandler" data-id="123">Click me</view>
1

在 .js 文件中，通过 event.target.dataset 获取参数：

Page({
  btnHandler: function(event) {
    console.log(event.target.dataset.id); // 输出 123
  }
})
1
2
3
4
5

如下图展示了事件传参的方式：

事件传参

# 2.8 bindinput 的语法格式

bindinput 用于处理用户在输入框中的输入事件，捕获输入内容。

语法格式：

<input bindinput="onInputChange" />
1

事件处理函数：

Page({
  onInputChange: function(event) {
    console.log(event.detail.value); // 获取输入内容
  }
})
1
2
3
4
5

如下图展示了 bindinput 的基本用法：

bindinput

# 2.9 实现文本框和 data 之间的数据同步

在小程序中，数据与页面的同步可以通过 bindinput 实现。当用户输入内容时，数据会动态更新，并且页面会根据输入内容更新显示。

步骤：

  1. 定义数据：在 .js 文件中定义页面数据。
  2. 渲染结构：在 .wxml 中定义输入框结构。
  3. 美化样式：通过 .wxss 文件设置页面样式。
  4. 绑定事件处理函数：在 .js 文件中定义 bindinput 的事件处理函数。

定义数据：

Page({
  data: {
    inputValue: ''
  }
})
1
2
3
4
5

渲染结构：

<input bindinput="onInputChange" value="{{ inputValue }}" />
1

美化样式：

input {
  border: 1px solid #ccc;
  padding: 5px;
}
1
2
3
4

绑定事件处理函数：

Page({
  onInputChange: function(event) {
    this.setData({
      inputValue: event.detail.value
    });
  }
})
1
2
3
4
5
6
7

如下图展示了输入框和 data 之间的数据同步效果：

数据同步

# 3. 条件渲染

# 3.1 wx:if

通过 wx:if="" 控制某个元素是否渲染到页面中，类似于 JavaScript 中的 if 判断。

<view wx:if="{{isVisible}}">Hello, World!</view>
1

当 isVisible 为 true 时，view 元素会渲染在页面上；当 isVisible 为 false 时，view 元素不会显示。

wx:if

# 3.2 结合 <block> 使用 wx:if

<block> 标签可以将多个元素包裹在一起，并使用 wx:if 控制多个元素的显示和隐藏。

<block wx:if="{{isVisible}}">
  <view>Content 1</view>
  <view>Content 2</view>
</block>
1
2
3
4

<block> 标签不会渲染到页面，只作为逻辑层的容器使用。

block

# 3.3 hidden

通过 hidden="" 也可以控制元素的显示和隐藏，类似于 CSS 中的 display: none。

<view hidden="{{!isVisible}}">Hidden Content</view>
1

当 isVisible 为 false 时，元素被隐藏。

hidden

# 3.4 wx:if 与 hidden 的对比

  1. 运行方式不同：

    • wx:if 通过动态创建和销毁元素来控制显示与隐藏。
    • hidden 通过样式控制（display: none/block）来切换显示和隐藏。

  2. 使用建议：

    • 对于频繁切换的场景，建议使用 hidden。
    • 对于需要复杂条件控制的场景，建议使用 wx:if 搭配 wx:elif 和 wx:else。

# 4. 列表渲染

# 4.1 wx:for

通过 wx:for 可以根据数据数组，循环渲染相同的元素结构。

<view wx:for="{{list}}" wx:for-item="item">{{item.name}}</view>
1

item 表示当前循环的元素，list 是数据源。

wx:for

# 4.2 手动指定索引和当前项的变量名

使用 wx:for-index 和 wx:for-item 可以手动指定循环中的索引和当前项的变量名。

<view wx:for="{{list}}" wx:for-index="idx" wx:for-item="item">{{idx}}: {{item.name}}</view>
1

这样可以更灵活地使用索引和当前项的名字。

wx:for-index

# 4.3 wx:key 的使用

为了提高渲染效率，建议在列表渲染时为每个项提供唯一的 key 值，类似于 Vue 中的 :key。

<view wx:for="{{list}}" wx:key="id">{{item.name}}</view>
1

wx:key 可以帮助小程序更有效地跟踪元素的变化，提升渲染效率。

wx:key

编辑此页 (opens new window)
上次更新: 2025/01/31, 00:08:39
小程序的宿主环境
WXSS 模板语法

← WXSS 模板语法→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar