做小程序开发时,不少新手看到
block到底是个啥？和普通组件有啥不一样？
要搞懂
举个简单例子：你想循环渲染5个
block最核心的两个用法：循环&条件渲染
循环渲染（配合wx:for）
当你需要重复渲染一组组件时,
看代码对比：
<block wx:for="{{goodsList}}" wx:key="id">
<view class="goods-name">{{item.name}}</view>
<view class="goods-price">¥{{item.price}}</view>
<image src="{{item.imgUrl}}" mode="widthFix" />
</block> <view wx:for="{{goodsList}}" wx:key="id">
<view class="goods-name">{{item.name}}</view>
<view class="goods-price">¥{{item.price}}</view>
<image src="{{item.imgUrl}}" mode="widthFix" />
</view>用，没有额外的父节点，样式想怎么调就怎么调，不用担心层级嵌套的坑。
条件渲染（配合wx:if / wx:elif / wx:else）
场景更常见：登录后显示个人信息，未登录显示登录按钮”，如果用
看实际案例：
<block wx:if="{{isLogin}}">
<view>昵称：{{nickname}}</view>
<view>积分：{{score}}</view>
<button bindtap="goLogout">退出登录</button>
</block>
<block wx:else>
<button bindtap="goLogin">立即登录</button>
</block>不管是显示个人信息还是登录按钮,页面里都没有
block容易踩的“坑”和避坑技巧
虽然
不能单独用，必须绑定指令
给block加样式？没用！
有人想给
反例（无效）：
<block class="title-box" wx:if="{{show}}">
<text>标题</text>
</block>正例（有效）：
<block wx:if="{{show}}">
<view class="title-box">
<text>标题</text>
</view>
</block>循环里的wx:key必须写对
用
错误示例（缺wx:key，控制台警告）：
<block wx:for="{{list}}" >...</block>正确示例：
<block wx:for="{{list}}" wx:key="id" >...</block>
<block wx:for="{{numList}}" wx:key="*this" >...</block>block在复杂场景下的实战价值
只学基础用法还不够,真正厉害的是
多组件组合渲染，结构更整洁
比如做一个“商品卡片”，包含图片、标题、标签、价格、按钮，还要循环渲染，用
假设产品经理突然说“卡片要加hover效果”，你改内部
配合模板（template）实现模块化
小程序里可以用
<block wx:for="{{commentList}}" wx:key="cid">
<template is="commentItem" data="{{...item}}" />
</block>这样既实现了循环,又通过template复用组件，
条件+循环混合场景，逻辑分层更清晰
已购课程列表”：有课程就循环显示，没课程显示“暂无课程”，这时候用
<block wx:if="{{courseList.length > 0}}">
<block wx:for="{{courseList}}" wx:key="cid">
<view>{{item.name}}</view>
<view>{{item.teacher}}</view>
</block>
</block>
<block wx:else>
<view>暂无已购课程~快去选课吧！</view>
</block>外层
和其他框架的“类似概念”有啥区别？
用过Vue、React的同学，可能会联想到Vue的、React的Fragment——它们和小程序
Vue的：也用于逻辑包裹，不生成节点，还能结合Vue的响应式、指令（v-for/v-if）使用。
React的Fragment：是<></>或，作用是“分组元素但不添加额外节点”，还能结合JSX、hooks等特性。
小程序
性能优化：block怎么帮页面“减负”？
页面渲染性能是小程序的命门,
因为
特别是列表页、长页面（比如电商首页、订单列表），大量循环渲染时，用
新手必看：block的代码规范和最佳实践
会用还不够,得写得“漂亮”——代码规范和最佳实践能让你和团队少踩坑、效率高。
命名和缩进，让结构一目了然
写
<block wx:for="{{list}}" wx:key="id">
<view>{{item.title}}</view>
<text>{{item.desc}}</text>
</block>别把wx:for和wx:key写得乱糟糟，不然团队协作时，别人看你代码像看天书（甚至你自己隔几天也看不懂）。
避免过度嵌套，保持逻辑扁平
虽然
反例（没必要的嵌套）：
<block wx:if="{{show}}">
<block wx:for="{{list}}" wx:key="id">
...
</block>
</block>正例（合并逻辑，更简洁）：
<block wx:if="{{show}}" wx:for="{{list}}" wx:key="id">
...
</block>只要逻辑上允许（比如show为true时才循环），合并后代码少一层嵌套，维护起来更轻松。
结合开发者工具调试，少走弯路
写
比如你写了console.log(hasData)，看看条件是否真的为true；再去Wxml面板看有没有对应的节点，一步步排查，比瞎猜高效多了。
网友评论文明上网理性发言 已有0人参与
发表评论: