微信小程序入门学习教程，从入门到精通，WXML（WeiXin Markup Language）语法基础(8） - 详解

WXML（WeiXin Markup Language）语法基础

以下是对 WXML（WeiXin Markup Language）语法基础 的全面整理，涵盖所有列出的知识点，每个知识点均附有 详细说明 和 带注释的案例代码，最后还提供 综合性案例 供参考。

一、WXML 文件介绍

WXML 是微信小程序的结构描述语言，类似于 HTML，但专为小程序设计，配合 WXSS（样式）、JS（逻辑）和 JSON（配置）共同构建页面。

<!-- pages/index/index.wxml -->
    <view class="container">
  <text>Hello WXML!</text>
  </view>

注：WXML 文件必须放在 pages 目录下，并在 app.json 中注册。

二、数据绑定

1. 简单内容绑定

使用双大括号 {{}} 将 JS 中的 data 数据绑定到 WXML。

<!-- WXML -->
<view>{{ message }}</view>

// pages/index/index.js
Page({
data: {
message: "欢迎使用 WXML 数据绑定！"
}
})

注：{{}} 中可写简单表达式（如 {{ a + b }}），但不能写复杂语句。

2. 属性绑定

将动态值绑定到组件属性上，使用 {{}} 包裹。

<image src="{{ imageUrl }}" mode="aspectFit"></image>
<view class="{{ dynamicClass }}">动态样式类</view>

Page({
data: {
imageUrl: "/images/logo.png",
dynamicClass: "highlight"
}
})

注：属性值若为字符串常量，无需 {{}}；若为变量或表达式，必须用 {{}}。

三、模板运算

1. 简单表达式

支持三元运算、字符串拼接、数组/对象访问等。

<view>{{ flag ? '显示' : '隐藏' }}</view>
<view>{{ 'Hello, ' + name }}</view>
<view>{{ list[0].title }}</view>
<view>{{ a + b }}</view>

Page({
data: {
flag: true,
name: "小明",
list: [{ title: "第一条" }],
a: 10,
b: 20
}
})

注：不支持函数调用、new、this 等复杂操作。

四、标记的公共属性

所有组件都支持以下公共属性：

id：组件唯一标识
class：样式类
style：内联样式
hidden：是否隐藏（仍占位）
data-*：自定义数据（用于事件传递）

<view id="main" class="box" style="color: red;" hidden="{{ isHidden }}" data-user-id="123">
  公共属性示例
</view>

Page({
data: {
isHidden: false
}
})

五、条件渲染

1. 基础语法：`wx:if` / `wx:elif` / `wx:else`

根据条件决定是否渲染节点。

<view wx:if="{{ type === 1 }}">类型1</view>
<view wx:elif="{{ type === 2 }}">类型2</view>
<view wx:else>其他类型</view>

Page({
data: {
type: 2
}
})

注：wx:if 是“惰性渲染”，条件为 false 时不创建节点。

2. 条件渲染与 `hidden` 属性对比

wx:if：条件为 false 时不渲染节点（适合运行时条件变化少的场景）
hidden：始终渲染，仅视觉隐藏（适合频繁切换的场景）

<!-- 频繁切换用 hidden -->
<view hidden="{{ showTip }}">提示信息（频繁显示/隐藏）</view>
  <!-- 初次加载后很少变用 wx:if -->
  <view wx:if="{{ hasPermission }}">权限区域</view>

六、列表渲染

1. 基本语法：`wx:for`

遍历数组或对象。

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

Page({
data: {
items: [
{ id: 1, name: "苹果" },
{ id: 2, name: "香蕉" }
]
}
})

默认变量名：item（当前项）、index（索引）
可通过 wx:for-item 和 wx:for-index 自定义：

<view wx:for="{{ users }}" wx:for-item="user" wx:for-index="i" wx:key="userId">
  {{ i }} - {{ user.name }}
</view>

2. `key` 属性

用于提升列表渲染性能，建议使用唯一且稳定的字段（如 ID）。

<checkbox-group wx:for="{{ tasks }}" wx:key="taskId">
<checkbox value="{{ item.taskId }}">{{ item.title }}</checkbox>
</checkbox-group>

若无唯一 ID，可用 wx:key="*this"（仅当列表项为字符串或数字时）

七、模板与引用

1. WXML 模板（`<template>`）

定义可复用的代码块。

<!-- 定义模板 -->
    <template name="productCard">
      <view class="card">
    <text>{{ name }}</text>
    <text>¥{{ price }}</text>
    </view>
  </template>
  <!-- 使用模板 -->
  <template is="productCard" data="{{ ...product }}"></template>

Page({
data: {
product: { name: "手机", price: 2999 }
}
})

data="{{ ...obj }}" 表示将 obj 的所有属性展开传入模板。

2. WXML 引用（`<import>` / `<include>`）

import：引用模板（需配合 is 使用）
include：直接嵌入整个 WXML 文件内容

<!-- 引用模板文件 -->
  <import src="../templates/card.wxml" />
  <template is="productCard" data="{{ ...item }}" />

<!-- include 示例：嵌入 footer.wxml -->
  <include src="../common/footer.wxml" />

注意：import 有作用域，include 无作用域，直接合并代码。

八、事件处理

1. 什么是事件

用户操作（点击、滑动等）触发的响应机制。

2. 事件类型和事件对象

常见事件：

bindtap：点击
bindinput：输入框内容变化
bindchange：选择器值变化

事件对象 event 包含：

target：触发事件的组件
currentTarget：绑定事件的组件
detail：附加信息（如 input 的 value）

3. 事件绑定与冒泡/捕获

bind：冒泡阶段触发（常用）
catch：阻止冒泡
capture-bind / capture-catch：捕获阶段

<view bindtap="handleViewTap" data-id="100">
  点击我（会冒泡）
</view>
  <view catchtap="handleCatchTap">
  点击我（阻止冒泡）
</view>

Page({
handleViewTap(e) {
console.log("点击了", e.currentTarget.dataset.id); // 输出: 100
},
handleCatchTap(e) {
console.log("阻止冒泡的点击");
}
})

自定义数据通过 data-* 传递，JS 中通过 e.currentTarget.dataset 获取（自动转为驼峰）。

九、本章小结（核心要点）

WXML 使用 {{}} 进行数据绑定
条件渲染用 wx:if，频繁切换用 hidden
列表渲染必须加 wx:key 提升性能
模板用 <template> + <import> 复用
事件通过 bind/catch 绑定，可传参和阻止冒泡

十、综合性案例

场景：商品列表页（含条件渲染、列表渲染、事件、模板）

1. WXML（pages/product/product.wxml）

<!-- 引入商品卡片模板 -->
  <import src="../../templates/productCard.wxml" />
    <view class="container">
    <!-- 加载状态 -->
    <view wx:if="{{ loading }}">加载中...</view>
      <!-- 无数据提示 -->
      <view wx:elif="{{ products.length === 0 }}">暂无商品</view>
        <!-- 商品列表 -->
            <view wx:else>
              <block wx:for="{{ products }}" wx:key="id">
              <!-- 使用模板渲染商品 -->
                <template is="productCard" data="{{ ...item, onSale: item.price < 100 }}" />
              </block>
            </view>
            <!-- 刷新按钮 -->
            <button bindtap="refreshList" hidden="{{ loading }}">刷新</button>
            </view>

2. 模板文件（templates/productCard.wxml）

<template name="productCard">
    <view class="product-item" bindtap="onProductClick" data-product-id="{{ id }}">
  <text>{{ name }}</text>
  <text class="{{ onSale ? 'on-sale' : '' }}">¥{{ price }}</text>
  <text wx:if="{{ onSale }}" style="color: red;">特价！</text>
  </view>
</template>

3. JS 逻辑（pages/product/product.js）

Page({
data: {
loading: false,
products: []
},
onLoad() {
this.loadProducts();
},
loadProducts() {
this.setData({ loading: true });
// 模拟异步请求
setTimeout(() => {
this.setData({
products: [
{ id: 1, name: "牛奶", price: 80 },
{ id: 2, name: "面包", price: 120 },
{ id: 3, name: "鸡蛋", price: 60 }
],
loading: false
});
}, 1000);
},
refreshList() {
this.loadProducts();
},
onProductClick(e) {
const productId = e.currentTarget.dataset.productId;
wx.showToast({ title: `点击了商品 ${productId}` });
}
});

4. WXSS（简略）

.product-item {
padding: 20rpx;
border-bottom: 1px solid #eee;
}
.on-sale {
font-weight: bold;
}

✅ 此综合案例涵盖了：

数据绑定（{{}}）
条件渲染（wx:if / wx:elif / wx:else）
列表渲染（wx:for + wx:key）
模板定义与引用（<template> + <import>）
事件绑定与传参（bindtap + data-*）
属性动态绑定（class 条件样式）

如有需要，还可扩展 表单绑定、slot 插槽（在自定义组件中）等进阶内容。以上内容已覆盖 WXML 核心语法体系。

posted @ 2025-10-19 16:05 yxysuanfa 阅读(140) 评论(0) 收藏举报

刷新页面返回顶部

yxysuanfa