愚公搬代码头像
关注
【愚公系列】《微信小程序项目实战（AI编程+视频图解）》011-莫凡商城小程序项目条件和列表渲染封面图

【愚公系列】《微信小程序项目实战（AI编程+视频图解）》011-莫凡商城小程序项目条件和列表渲染

💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.NET/Java/Python/Go/Node…
◾ 移动生态：HarmonyOS/iOS/Android/小程序
◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发：Unity3D引擎深度解析

文章目录

🚀微信小程序条件渲染

在编写微信小程序时，经常需要进行条件判断，以确定是否需要渲染某代码块。

🔎1 使用 wx:if 判断单个组件

在微信小程序框架里，使用 wx:if="{{condition}}" 来进行条件判断，确定是否需要渲染该代码块。示例代码如下：

<view wx:if="{{condition}}">你好，欢迎学习微信小程序</view>

使用 wx:elif 和 wx:else 来添加一个 else 代码块。示例代码如下：

<view wx:if="{{length > 5}}">长度大于5</view>
<view wx:elif="{{length > 2}}">长度大于2</view>
<view wx:else>长度为3</view>

index.js

Page({
  data: {
    length: 8
  }
});

当 length = 8 时，输出结果为“长度大于5”，执行第一个判断条件。

补充说明：

  • wx:if 是控制属性，值为真时渲染该节点，为假时不渲染。
  • wx:elif 和 wx:else 必须紧跟在 wx:if 或 wx:elif 后面。
  • wx:if 是惰性的：如果初始条件为假，框架不会渲染该节点，也不会执行内部逻辑。
  • 与 hidden 的区别：hidden 只是控制显示与隐藏，节点始终存在；wx:if 为假时节点不存在。

🔎2 使用 wx:if 一次性判断多个组件

因为 wx:if 是一个控制属性，所以需要将它添加到组件上。如果想一次性判断多个组件，可以使用 <block/> 标签将多个组件包装起来，并使用 wx:if 控制属性。示例代码如下：

<block wx:if="{{true}}">
  <view>内容1</view>
  <view>内容2</view>
</block>

<block> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接收控制属性。

补充说明：

  • <block> 常用于 wx:if、wx:for 等控制属性，不会产生额外的 DOM 节点。
  • 如果多个组件需要同时显示或隐藏，使用 <block> 比逐个添加 wx:if 更简洁。
  • <block> 也可以配合 wx:for 使用。

🚀微信小程序列表渲染

在小程序中，经常需要将一些内容以列表的形式显示出来，这就要用到微信小程序的列表渲染。如果只是将数据以列表的形式显示出来，那么直接一行行显示就行。但如果数据的显示是动态的，用这种方式就不能解决问题了，可以用 wx:for 来解决这个问题。

🔎1 使用 wx:for 列表渲染单个组件

在组件上使用 wx:for 控制属性绑定一个数组，即可使用该数组中的各项数据重复渲染该组件。默认数组当前项的下标变量名为 index、数组当前项的变量名为 item。示例代码如下：

<view wx:for="{{array}}">
  {{index}}: {{item.name}}
</view>

index.js

Page({
  data: {
    array: [
      { name: 'tom' },
      { name: 'kevin' }
    ]
  }
});

使用 wx:for-item 可以指定数组当前项的变量名，使用 wx:for-index 可以指定数组当前项的下标变量名。示例代码如下：

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

补充说明：

  • wx:for 可以遍历数组，也可以遍历对象。
  • 默认 item 是当前项，index 是当前下标。
  • 使用 wx:for-item 和 wx:for-index 可以自定义变量名，避免嵌套循环时命名冲突。
  • 在嵌套 wx:for 中，建议使用不同的变量名，例如 wx:for-item="item" 和 wx:for-item="subItem"。

🔎2 使用 wx:for 一次性列表渲染多个组件

当想渲染一个包含多节点的结构块时，就需要将 wx:for 应用在 <block/> 标签中。示例代码如下：

<block wx:for="{{[1, 2, 3]}}">
  <view>{{index}}:</view>
  <view>{{item}}</view>
</block>

补充说明：

  • <block> 不会渲染成实际节点，只是包装元素。
  • 使用 <block> 可以同时渲染多个组件，避免在外层额外添加 view。
  • 如果列表项结构复杂，建议使用 <block> 包裹多个节点。

🔎3 使用 wx:key 指定唯一标识符

如果列表中项目的位置会动态改变，或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 组件中的输入内容，switch 组件的选中状态），就需要使用 wx:key 来指定列表中项目的唯一标识符。

wx:key 的值以下列两种形式提供：

  1. 字符串：代表在 for 循环的集合中值的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this：代表在 for 循环中的 item 本身，这种表示方法需要 item 本身是一个唯一的字符串或数字。

当数据改变触发渲染层重新渲染时，会校正带有 key 的组件，框架会确保它们被重新排序，而不是被重新创建，以确保组件保持自身的状态，并且提高列表渲染时的效率。

示例代码如下：

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;">
  {{item.id}}
</switch>

index.js

Page({
  data: {
    objectArray: [
      { id: 5, unique: 'unique_5' },
      { id: 4, unique: 'unique_4' },
      { id: 3, unique: 'unique_3' },
      { id: 2, unique: 'unique_2' },
      { id: 1, unique: 'unique_1' },
      { id: 0, unique: 'unique_0' }
    ]
  }
});

注意：

如不提供 wx:key，会出现一个 warning。如果明确知道该列表是静态的，或者不必关注其顺序，可以选择忽略该 warning。

补充说明：

  • wx:key 的值不要加 {{}}，直接写属性名即可，例如 wx:key="unique"。
  • 如果数组项是唯一的字符串或数字，可以使用 wx:key="*this"。
  • 使用 wx:key 可以提升列表渲染性能，避免组件状态丢失。
  • 在动态列表中，强烈建议始终提供 wx:key。

🚀补充：条件渲染与列表渲染的常见组合

🔎1. 列表渲染中嵌套条件渲染

<view wx:for="{{list}}" wx:key="id">
  <view wx:if="{{item.status === 1}}">已上架</view>
  <view wx:elif="{{item.status === 0}}">已下架</view>
  <view wx:else>未知状态</view>
</view>

🔎2. 条件渲染中嵌套列表渲染

<block wx:if="{{list.length > 0}}">
  <view wx:for="{{list}}" wx:key="id">
    {{item.name}}
  </view>
</block>
<view wx:else>暂无数据</view>

🔎3. 使用 block 同时控制多个节点

<block wx:if="{{isLogin}}">
  <view>欢迎回来</view>
  <view>{{userInfo.nickName}}</view>
</block>
<block wx:else>
  <view>请先登录</view>
</block>

🚀注意事项

  1. wx:if、wx:elif、wx:else 必须连续使用，中间不能插入其他节点。
  2. <block> 不会渲染成真实节点，只作为包装元素。
  3. wx:for 默认变量名为 item 和 index。
  4. 嵌套循环时，建议使用 wx:for-item 和 wx:for-index 自定义变量名。
  5. wx:key 的值不要加 {{}}，直接写属性名或 *this。
  6. 动态列表必须提供 wx:key，避免状态丢失和性能问题。
  7. wx:if 为假时节点不存在，hidden 为真时节点存在但隐藏。
  8. 使用 AI 生成代码后，需要人工检查条件判断和列表渲染逻辑是否正确。

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

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

🔎模板 1：让 AI 解释微信小程序条件渲染

提示词模板：

请详细解释微信小程序中的条件渲染。
要求：
1. 说明 wx:if、wx:elif、wx:else 的用法；
2. 说明 block 标签的作用；
3. 说明 wx:if 与 hidden 的区别；
4. 给出完整 WXML 和 JS 示例代码；
5. 说明注意事项。
请用分级标题和代码块输出，内容完整。

完整回答示例：

微信小程序条件渲染详解

🦋一、wx:if、wx:elif、wx:else

wx:if 用于条件判断，值为真时渲染节点，为假时不渲染。

<view wx:if="{{length > 5}}">长度大于5</view>
<view wx:elif="{{length > 2}}">长度大于2</view>
<view wx:else>长度为3</view>

Page({
  data: {
    length: 8
  }
});

当 length = 8 时，显示“长度大于5”。

🦋二、block 标签

<block> 是一个包装元素，不会渲染成真实节点，可以同时控制多个组件。

<block wx:if="{{true}}">
  <view>内容1</view>
  <view>内容2</view>
</block>

🦋三、wx:if 与 hidden 的区别

对比项wx:ifhidden
渲染方式条件为假时不渲染节点节点始终渲染，仅控制显示隐藏
初始渲染惰性，条件为假时不渲染始终渲染
切换开销较高较低
适用场景条件不常变化频繁切换显示隐藏

🦋四、注意事项

  1. wx:elif 和 wx:else 必须紧跟 wx:if。
  2. <block> 不会渲染成真实节点。
  3. wx:if 为假时节点不存在。
  4. 频繁切换显示隐藏建议使用 hidden。

🔎模板 2：让 AI 生成列表渲染代码

提示词模板：

请使用微信小程序原生框架，生成一个商品列表页面。
要求：
1. 使用 wx:for 渲染商品列表；
2. 使用 wx:key 指定唯一标识；
3. 包含商品图片、名称、价格；
4. 如果列表为空，显示“暂无商品”；
5. 给出完整 WXML、WXSS、JS 代码，并解释关键逻辑。

完整回答示例：

index.wxml

<view class="page">
  <block wx:if="{{list.length > 0}}">
    <view class="goods-item" wx:for="{{list}}" wx:key="id">
      <image class="goods-img" src="{{item.cover}}" mode="aspectFill"></image>
      <view class="goods-info">
        <text class="goods-name">{{item.name}}</text>
        <text class="goods-price">￥{{item.price}}</text>
      </view>
    </view>
  </block>
  <view wx:else class="empty">暂无商品</view>
</view>

index.wxss

.page {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.goods-item {
  display: flex;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 10rpx;
}

.goods-img {
  width: 160rpx;
  height: 200rpx;
  border-radius: 8rpx;
  background: #eee;
}

.goods-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
}

.goods-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.goods-price {
  margin-top: 20rpx;
  font-size: 32rpx;
  color: #e54d42;
}

.empty {
  text-align: center;
  color: #999;
  margin-top: 100rpx;
  font-size: 30rpx;
}

index.js

Page({
  data: {
    list: [
      { id: 1, name: '微信小程序开发实战', price: 59.8, cover: '/images/book1.png' },
      { id: 2, name: 'JavaScript高级程序设计', price: 89.0, cover: '/images/book2.png' }
    ]
  }
});

关键逻辑说明：

  1. 使用 wx:for 遍历 list。
  2. 使用 wx:key="id" 指定唯一标识。
  3. 使用 block wx:if 判断列表是否为空。
  4. 列表为空时显示“暂无商品”。
  5. 图片使用 mode="aspectFill" 保持比例。

🔎模板 3：让 AI 修复 wx:key 警告

提示词模板：

我在微信小程序中使用 wx:for 渲染列表时，控制台出现 warning：
“Now you can provide attr `wx:key` for a `wx:for` to improve performance.”

相关代码：
<view wx:for="{{list}}">
  {{item.name}}
</view>

请帮我修复，并解释 wx:key 的作用和正确用法。

完整回答示例：

修复后的代码：

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

wx:key 的作用：

  1. 指定列表中项目的唯一标识符。
  2. 当数据变化时，框架会校正带有 key 的组件，确保它们被重新排序而不是重新创建。
  3. 保持组件状态，例如 input 输入内容、switch 选中状态。
  4. 提高列表渲染性能。

正确用法：

  • 如果数组项是对象，且对象中有唯一属性，使用 wx:key="属性名"。
  • 如果数组项是唯一的字符串或数字，使用 wx:key="*this"。
  • 不要写成 wx:key="{{item.id}}"，直接写 wx:key="id"。

示例：

<!-- 对象数组 -->
<view wx:for="{{list}}" wx:key="id">{{item.name}}</view>

<!-- 字符串数组 -->
<view wx:for="{{['a', 'b', 'c']}}" wx:key="*this">{{item}}</view>

注意事项：

  1. 动态列表必须提供 wx:key。
  2. 静态列表可以忽略 warning。
  3. wx:key 的值不要加 {{}}。
  4. wx:key 的值必须是唯一的，且不能动态改变。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/aa2528877987/article/details/167077194

文章来源转载

评论

赞0

评论列表

微信小程序
QQ小程序

关于作者

点赞数：0
关注数：0
粉丝：0
文章：0
关注标签：0
加入于：--