组件行为

切换条件式容器

用于实现不同子视图分支的无缝切换。

适用组件：条件式容器。

常用场景

• 标签页的无刷新切换。
• 多步骤表单的步骤跳转。
• 根据用户状态展示不同内容区块。

参数配置

运行结果与输出

无

运行机制

• 切换行为在前端执行，不会主动发起网络请求。
• 状态保留机制：新版组件系统默认开启了“切换时保持状态”功能。开启后，切换子容器并不会真正卸载子容器的 DOM 和状态（如输入框中未提交的数据、滚动位置、视频播放进度等），以便在来回切换时提供无缝的用户体验。若关闭，则切换时会彻底卸载旧的子容器并挂载新的子容器。

特殊说明

• 避免状态回弹：若条件式容器本身配置条件表达式，请尽量通过修改相关的变量或数据源字段来驱动切换，而不是直接调用本行为。直接调用「切换条件式容器」行为属于强行切换，当页面发生其他重渲染或数据刷新时，容器会瞬间自动回弹至条件表达式所指向的容器。

常见错误

• 组件未渲染：若目标条件式容器尚未渲染（如处于另一个未加载的条件式容器内），切换不会生效。
• 媒体未清理导致后台播放：若当前子容器内含有视频或音频组件，在切换至其他子容器前未控制动作将其停止播放，在“切换时保持状态”开启时会导致媒体继续后台播放。

用法举例

1. 切换登录与注册表单（Web 端）

• 需求： 用户在登录页点击去注册按钮时，当前区域的登录表单切换为注册表单，页面不发生跳转。

• 配置流程：

  1. 前置准备：
     • 创建「登录页」；
     • 在「登录页」中放置一个条件式容器，包含「登录」和「注册」子容器。
  2. 选择组件：在「登录页」画布上，选中「去注册按钮」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「切换条件式容器」。
     • 将条件式容器选择为当前页面的容器，切换至选择「注册分支」。
  5. 绑定参数传递：无。

• 运行结果： 用户点击按钮后，登录表单瞬间切换为注册表单，体验流畅无卡顿。

2. 按钮防重复点击（小程序/Web 端通用）

• 需求： 用户点击“立即购买”按钮时，瞬间将按钮切换为灰色不可点击的“处理中”状态，防止弱网环境下用户连续点击导致订单重复提交；待网络请求响应后再自动复原或跳转。

• 配置流程：

  1. 前置准备：
     • 在页面放置一个条件式容器，包含「未点击状态」和「已点击状态」两个子容器。
     • 在「未点击状态」子容器中，放置一个蓝色“立即购买”按钮。
     • 在「已点击状态」子容器中，放置一个灰色“正在处理…”按钮。
  2. 添加行为（提交与防抖切换）：
     • 选中「未点击状态」下的“立即购买”按钮，在其 「点击时」 事件下添加行为。
     • 第一步：添加 「切换条件式容器」，将目标容器切换到「已点击状态」。（瞬间锁定按钮不可再次点击）
     • 第二步：添加异步行为（例如 「添加数据」 或 「调用行为流」 以提交订单）。
     • 第三步：在异步行为的 「失败时」（或成功但不需要跳转的逻辑）分支下，添加 「切换条件式容器」，将目标容器还原切换到「未点击状态」以便用户重试。
  3. 绑定参数传递：无。

• 运行结果： 用户点击购买后，按钮切换为不可点击状态，可减少重复提交；请求失败时恢复为可点击状态。涉及订单等重要数据时，仍应在后端配置幂等或唯一性校验。

设置输入型组件值

直接修改输入框、数字输入、日期时间选择器、数据选择器、自定义选择器或开关的当前值，相当于替用户完成了一次输入操作。

适用组件：输入框、数字输入、日期时间选择器、数据选择器、自定义选择器和开关。

常用场景

• 点击按钮一键填入默认值。
• 清空搜索框内容。
• 根据其他选项联动改变当前输入框内容。

参数配置

运行结果与输出

无

运行机制

• 定位目标组件后，将新值写入其状态变量。
• 目标组件的“值变化时”事件若绑定了行为，且新值和旧值不相等，则会自动触发。

常见错误

• 死循环触发：在组件的“值变化时”事件中持续修改自身的值，可能形成循环触发，最终导致浏览器崩溃。
• 组件未渲染：找不到目标组件时，设置不会生效。

用法举例

1. 清空搜索框内容（小程序端/Web 端通用）

• 需求： 用户点击搜索框右侧的“X”图标时，清空搜索框内已输入的文本。

• 配置流程：

  1. 前置准备：
     • 在页面中放置一个搜索输入框和一个“X”清除图标。
  2. 选择组件：在画布上，选中“X”清除图标。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「设置输入型组件值」。
     • 组件选择「搜索输入框」。
  5. 绑定参数传递：
     • 值绑定空字符串。

• 运行结果： 点击“X”图标后，搜索框内容瞬间被清空。

重置输入型组件值

将输入框、数字输入、日期时间选择器、数据选择器、自定义选择器、开关、富文本编辑器、图片选择器或视频选择器的当前值重置为最初始的空值或默认值。

适用组件：输入框、数字输入、日期时间选择器、数据选择器、自定义选择器、开关、富文本编辑器、图片选择器和视频选择器。

常用场景

• 表单提交成功后清空所有输入项。
• 取消编辑时恢复默认状态。

参数配置

运行结果与输出

无

运行机制

特殊说明

• 组件的“值变化时”事件是否会被触发，要根据组件类型来确定：
  • 会触发的：日期时间选择器、富文本编辑器。只要重置就会触发，即使是重复重置。
  • 不会触发的：输入框、数字输入、数据选择器、自定义选择器、开关。

用法举例

1. 提交后清空评论框（Web 端）

• 需求： 用户发表评论成功后，自动清空富文本编辑器中的内容，以便进行下一次输入。

• 配置流程：

  1. 前置准备：
     • 创建「文章详情页」；
     • 在「文章详情页」中配置好一个富文本编辑器组件和发表按钮。
  2. 选择组件：在「文章详情页」画布上，选中「发表按钮」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「重置输入型组件值」。
     • 组件选择「富文本编辑器」。
  5. 绑定参数传递：无。

• 运行结果： 点击发表并完成后，富文本编辑器瞬间清空，恢复到初始空白状态。

2. 取消编辑时恢复默认状态（小程序端）

• 需求： 用户在个人信息编辑页修改了昵称和简介，点击“取消”按钮时，所有输入框恢复到修改前的初始状态。

• 配置流程：

  1. 前置准备：
     • 在编辑页放置昵称输入框、简介输入框和“取消”按钮。
  2. 选择组件：在画布上，选中“取消”按钮。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并添加两个 **「重置输入型组件值」**行为。
     • 组件依次选择「昵称输入框」和「简介输入框」。
  5. 绑定参数传递：无。

• 运行结果： 点击取消后，输入框内未保存的修改被清除，恢复为初始加载时的数据。

刷新数据源

为便于快速定位「刷新数据源」操作，该行为在菜单的多个位置均有展示，但实为同一项功能。详细介绍请参见：刷新数据源

刷新列表项

重新请求并更新列表中的指定列表项，无需刷新整个列表。

适用组件：使用数据库或 API 数据源的列表组件。

常用场景

• 点赞后仅刷新当前卡片的点赞数。
• 修改单条记录状态后局部更新。

参数配置

运行结果与输出

无

运行机制

系统根据列表项索引重新请求该项数据，并使用返回结果更新对应列表项。

特殊说明

• 只有数据源是数据库或者 API 数据时，才会执行刷新操作。如果列表数据源来自变量、自定义数组，则直接跳过该行为，继续执行后续行为。

常见错误

• 索引无效：若计算出的索引为空或非数值，系统会直接拦截退出，不发送网络请求，前端无报错提示，后续行为继续执行。

用法举例

1. 局部刷新点赞状态（小程序端）

• 需求： 用户在动态列表中点击某条动态的点赞按钮，仅刷新该条动态的点赞数和图标状态，不影响列表其他内容。

• 配置流程：

  1. 前置准备：
     • 创建「动态页」；
     • 在「动态页」中配置好一个动态列表组件，列表项内包含点赞按钮。
  2. 选择组件：在「动态页」画布上，选中列表项内的「点赞按钮」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「刷新列表项」。
     • 列表选择当前的「动态列表组件」。
  5. 绑定参数传递：
     • 点击列表项索引右侧的 「+」加号按钮，依次展开选择：列表项 -> 动态列表组件 -> 项索引。

• 运行结果： 点击点赞后，仅当前动态卡片的数据更新，列表不发生整体跳动。

加载更多

触发列表组件请求下一页数据并追加到现有列表尾部。

适用组件：开启数据限额的列表组件。

常用场景

• 手动点击查看更多按钮加载后续内容。

参数配置

运行结果与输出

无

运行机制

• 基于当前已渲染的数据量自动计算分页游标，向后端发起下一页请求。接收到新数据后，追加到列表尾部，驱动列表渲染新增的列表项。
• 加载更多数据后，列表不会自动滚动。可以配合滚动列表行为定位到指定位置。

常见错误

无

用法举例

1. 手动加载更多商品（Web 端）

• 需求： 在商品列表底部放置一个加载更多按钮，用户点击后在列表末尾追加展示下一页商品。

• 配置流程：

  1. 前置准备：
     • 创建「商品页」；
     • 在「商品页」中配置好一个商品列表组件，并在其下方放置一个加载更多按钮。
  2. 选择组件：在「商品页」画布上，选中「加载更多按钮」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「加载更多」。
     • 目标组件选择「商品列表组件」。
  5. 绑定参数传递：无。

• 运行结果： 点击按钮后，列表底部平滑追加新一页的商品卡片。

滚动列表

控制列表自动滚动到指定位置：顶部、底部、上一项、下一项或特定的某一行，实现快速定位。

适用组件：列表组件。

常用场景

• 聊天界面发送消息后自动滚到底部。
• 回到顶部按钮。
• 轮播图的上一张或下一张切换。

参数配置

运行结果与输出

无

运行机制

• 系统根据所选模式计算目标位置，并控制列表滚动到该位置。

特殊说明

• 下一项与上一项模式底层采用循环算法，可实现无缝首尾循环定位滚动。

常见错误

• 数据限额限制：若列表未开启数据限额，下一项和上一项模式会被自动禁用。

用法举例

1. 聊天列表自动滚到底部（小程序端）

• 需求： 用户在聊天页面发送新消息后，消息列表自动滚动到最底部，展示最新消息。

• 配置流程：

  1. 前置准备：
     • 创建「聊天页」；
     • 在「聊天页」中配置好一个消息列表组件和发送按钮。
  2. 选择组件：在「聊天页」画布上，选中「发送按钮」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「滚动列表」。
     • 列表选择「消息列表组件」，滚动至选择「列表底部」。
  5. 绑定参数传递：无。

• 运行结果： 发送消息后，列表平滑滚动至最底端，最新消息完整呈现。

2. 回到顶部按钮（小程序端/Web 端通用）

• 需求： 用户在长列表中向下滑动浏览后，点击右下角的悬浮“回到顶部”按钮，列表快速滚动回第一项。

• 配置流程：

  1. 前置准备：
     • 在页面中放置长列表组件和一个悬浮的“回到顶部”按钮。
  2. 选择组件：在画布上，选中“回到顶部”按钮。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「滚动列表」。
     • 列表选择「长列表组件」，滚动至选择「列表顶部」。
  5. 绑定参数传递：无。

• 运行结果： 点击按钮后，列表平滑滚动回最顶端。

3. 轮播图切换上一张/下一张（Web 端）

• 需求： 在自定义的轮播图组件两侧放置左右箭头，点击右箭头时滚动到下一张图片。

• 配置流程：

  1. 前置准备：
     • 在页面中放置横向滚动的列表组件（作为轮播图），并在两侧放置左右箭头图标。
  2. 选择组件：在画布上，选中“右箭头”图标。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「滚动列表」。
     • 列表选择「横向列表组件」，滚动至选择「下一项」。
  5. 绑定参数传递：无。

• 运行结果： 点击右箭头后，列表平滑向左滚动展示下一张图片，若已是最后一张则循环回第一张。

全屏图片

将单张或多张图片放大至全屏展示，提供沉浸式的画廊浏览体验。

适用组件：图片组件。

常用场景

• 点击商品主图查看高清大图。
• 朋友圈九宫格图片的全屏滑动浏览。

参数配置

Web 端下只支持全屏查看单张图片，因此没有参数配置；以下是小程序端的参数配置：

运行结果与输出

无

运行机制

• 多图模式下，会调用小程序的 wx.previewImage 原生接口，唤起多图画廊。

常见错误

• 索引越界降级：若传入的起始索引超出图片列表的索引范围，默认展示第一张图片。

用法举例

1. 浏览商品详情轮播图（小程序端）

• 需求： 用户在商品详情页点击轮播图，全屏沉浸式查看所有商品图片，并支持左右滑动。

• 配置流程：

  1. 前置准备：
     • 创建「商品详情页」；
     • 在「商品详情页」中配置好一个列表组件，并在其列表项中放置一个图片组件。
     • 在「商品详情页」中添加一个数据源商品，数据表和过滤条件和列表组件的一致。
  2. 选择组件：在「商品详情页」画布上，选中「图片组件」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「全屏图片」。
     • 模式选择「多图」。
  5. 绑定参数传递：
     • 图片列表绑定公式：ARRAY_MAPPING(商品数据源, 图片字段)，将商品数据源转为图片数组
     • 起始索引绑定公式：列表项 -> 图片组件 -> 当前项索引。

• 运行结果： 点击任意一张图片后，全屏弹出画廊，默认展示被点击的图片，左右滑动可查看同一商品的其他图片。

2. 查看单张高清营业执照（Web 端）

• 需求： 在商家资质展示页，用户点击缩略图营业执照，全屏查看高清大图以便看清文字细节。

• 配置流程：

  1. 前置准备：
     • 在页面中放置营业执照的缩略图组件。
  2. 选择组件：在画布上，选中“营业执照缩略图”。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「全屏图片」。
  5. 绑定参数传递：无。

• 运行结果： 点击缩略图后，图片在当前窗口全屏放大展示，点击空白处即可退出全屏。

导出表格

将表格中的数据一键打包为文件并触发浏览器下载，方便用户在本地进行数据分析。该行为仅支持 Web 端。

适用组件：表格组件。

常用场景

• 后台管理系统导出用户名单。
• 财务报表数据下载备份。

参数配置

运行结果与输出

无

运行机制

• 导出时，会移除表格组件的数据限额限制，强制拉取全量数据。
• 只支持导出为 CSV 文件。

特殊说明

• 仅支持文本、长整数、无限精度小数、日期时间、日期、时间、布尔值类型的字段的导出。图片、视频、文件、经纬度、JSON 类型的字段会被自动过滤，不会导出。

用法举例

1. 导出本月销售报表（Web 端）

• 需求： 运营人员在后台管理系统中，筛选出本月的销售数据后，点击导出按钮下载文件。

• 配置流程：

  1. 前置准备：
     • 创建「销售报表页」；
     • 在「销售报表页」中配置好一个表格组件，并关联好筛选条件。
  2. 选择组件：在「销售报表页」画布上，选中「导出按钮」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「导出表格」。
     • 表格选择「销售数据表格组件」。
  5. 绑定参数传递：无。

• 运行结果： 点击按钮后，浏览器自动下载包含当前筛选条件下所有销售数据的文件。

2. 导出用户名单备份（Web 端）

• 需求： 管理员在用户管理页面，点击“导出名单”按钮，将当前系统内的所有用户数据下载为 CSV 文件备份。

• 配置流程：

  1. 前置准备：
     • 在页面中放置用户数据表格组件和“导出名单”按钮。
  2. 选择组件：在画布上，选中“导出名单”按钮。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「导出表格」。
     • 表格选择「用户数据表格组件」。
  5. 绑定参数传递：无。

• 运行结果： 点击按钮后，浏览器自动下载包含所有用户数据的表格文件。

视图转图片

将页面上的某个区域像截图一样保存为图片，并自动上传到对象存储中。配合「系统 > 文件操作 > 下载图片」行为，可以将生成的图片下载到本地。该行为仅支持 Web 端。

适用组件：自定义视图和布局容器组件。

常用场景

• 生成专属海报分享到朋友圈。
• 保存打卡记录长图。
• 生成电子凭证。

参数配置

运行结果与输出

• 结果：返回生成的图片。
• 成功时：图片保存到对象存储后触发。

运行机制

• 深度遍历视图中的所有节点，利用渲染引擎生成画布，转写为图片文件并上传至对象存储。

常见错误

• 播放中的视频不会被截取，展示为黑色矩形。

用法举例

1. 生成打卡分享海报（Web 端）

• 需求： 用户完成学习打卡后，点击生成海报按钮，系统将包含用户头像和打卡天数的区域生成图片并保存。

• 配置流程：

  1. 前置准备：
     • 创建「打卡页」；
     • 在「打卡页」中配置好一个包含头像和数据的自定义视图作为海报区域。
  2. 选择组件：在「打卡页」画布上，选中「生成海报按钮」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「视图转图片」。
     • 视图选择「海报区域视图」。
     • 在成功时添加「系统 > 文件操作 > 下载图片」行为，并将“图片”参数绑定为上一步的行为结果。

• 运行结果： 点击按钮后，海报区域被截取并下载到本地。

设置折叠模式

通过行为控制视图的展开与收起，实现手风琴式的折叠面板效果。该行为仅支持小程序端。

适用组件：已开启折叠属性的视图组件。

常用场景

• 常见问题解答列表的展开收起。
• 长篇详情页的局部内容折叠。

参数配置

运行结果与输出

无

运行机制

• 定位到视图组件，修改其状态，根据折叠模式重绘视图。

特殊说明

• 目标组件必须在设计面板中开启折叠属性，否则无法选择。

用法举例

1. 展开常见问题详情（小程序端）

• 需求： 用户点击常见问题列表中的某个问题标题时，下方隐藏的答案区域平滑展开。

• 配置流程：

  1. 前置准备：
     • 创建「帮助页」；
     • 在「帮助页」中配置好问题标题和开启了折叠属性的答案视图。
  2. 选择组件：在「帮助页」画布上，选中「问题标题」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「设置折叠模式」。
     • 视图选择「答案视图」，折叠模式选择「展开」。
  5. 绑定参数传递：无。

• 运行结果： 点击标题后，答案区域平滑向下展开展示完整内容。

视频控制

控制视频的播放、暂停或停止。

适用组件：视频组件。

常用场景

• 自定义视频播放器控制栏。
• 弹窗关闭时自动停止视频播放。

参数配置

运行结果与输出

无。

运行机制

• 行为会将所选操作发送给目标视频组件，组件随后更新播放状态。

常见错误

• 组件未渲染：若目标视频组件未在当前页面渲染，控制操作不会生效。

用法举例

1. 关闭弹窗时停止视频（小程序端）

• 需求： 用户在观看视频弹窗时点击关闭按钮，弹窗消失的同时视频必须停止播放，防止后台继续发声。

• 配置流程：

  1. 前置准备：
     • 创建「首页」；
     • 在「首页」中配置好一个包含视频组件的弹窗。
  2. 选择组件：在「视频弹窗」画布上，选中「关闭按钮」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「视频控制」。
     • 组件选择「弹窗内的视频组件」，操作选择「停止」。
  5. 绑定参数传递：无。

• 运行结果： 点击关闭按钮后，视频立刻停止播放并进度归零，随后弹窗关闭。

2. 自定义视频播放器控制栏（Web 端）

• 需求： 隐藏视频组件自带的控制条，使用自定义的播放/暂停图标来控制视频播放。

• 配置流程：

  1. 前置准备：
     • 在页面中放置视频组件（隐藏默认控制条），并在其下方放置自定义的播放图标。
  2. 选择组件：在画布上，选中“自定义播放图标”。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「视频控制」。
     • 组件选择「视频组件」，操作选择「播放」（可通过条件判断切换为暂停）。
  5. 绑定参数传递：无。

• 运行结果： 点击自定义图标后，视频开始播放，实现自定义播放器控制。

音频控制

在应用全局范围内播放或停止声音，不受页面切换影响，甚至支持微信切到后台继续听歌。

适用组件：无需选择目标组件；可在任意支持配置行为的组件事件中触发。

常用场景

• 播放背景音乐。
• 点击按钮的音效反馈。
• 打造简易音乐播放器。

参数配置

运行结果与输出

无

运行机制

• 音乐播放不会只在当前页面有效，而是像“全局播放器”一样，无论你跳到哪个页面，音乐都继续播放。
• Web 端会使用原生的音频标签在后台放歌；微信小程序里，如果你设置了“后台播放”，会用专门的系统音频功能保证切后台还能听，否则就是用普通的方式播放。

常见错误

• 音源解析为空：若音频链接为空，底层会触发解码失败，静默无声音且不阻塞后续动作。

用法举例

1. 点击按钮的音效反馈（小程序端/Web 端通用）

• 需求： 用户在游戏中点击“抽卡”按钮时，播放一段简短的抽卡音效，增强交互体验。

• 配置流程：

  1. 前置准备：
     • 在页面中放置“抽卡”按钮，准备好音效文件的网络链接。
  2. 选择组件：在画布上，选中“抽卡”按钮。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「音频控制」。
     • 操作选择「播放」，循环选择「否」，后台播放选择「否」。
  5. 绑定参数传递：
     • 在音频输入框填入抽卡音效的网络链接。

• 运行结果： 每次点击抽卡按钮，都会立刻播放一次清脆的抽卡音效。

2. 简易白噪音播放器（小程序端）

• 需求： 用户点击“助眠模式”卡片，开始播放海浪白噪音，并支持在微信后台持续播放。

• 配置流程：

  1. 前置准备：
     • 在页面中放置“助眠模式”卡片。
  2. 选择组件：在画布上，选中“助眠模式”卡片。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「音频控制」。
     • 操作选择「播放」，循环选择「是」，后台播放选择「是」，并配置相应的标题和封面。
  5. 绑定参数传递：
     • 音频绑定海浪声音链接，标题填入“海浪助眠”，封面绑定对应图片。

• 运行结果： 点击卡片后，海浪声开始循环播放，用户锁屏或切出微信后声音依然持续。

Lottie 动画控制

控制 Lottie 动画的播放、暂停、停止、播放片段或播放方向。

适用组件：Lottie 动画组件。

常用场景

• 点赞爱心爆开动画。
• 加载中状态展示。
• 复杂的交互式引导动画。

参数配置

运行结果与输出

无。

运行机制

• 定位到动画组件，修改其状态，根据操作重绘动画。

常见错误

• 组件未渲染：目标组件未在当前页面渲染时，控制操作不会生效。

用法举例

1. 触发点赞特效（小程序端）

• 需求： 用户点击点赞图标时，播放一段精美的烟花爆开动画。

• 配置流程：

  1. 前置准备：
     • 创建「详情页」；
     • 在「详情页」中配置好一个动画组件。
  2. 选择组件：在「详情页」画布上，选中「动画组件」。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「Lottie 动画控制」。
     • 组件选择当前的「动画组件」，操作选择「播放」。
  5. 绑定参数传递：无。

• 运行结果： 点击图标后，动画瞬间播放，呈现出流畅的烟花特效。

2. 加载中状态展示（Web 端）

• 需求： 在数据请求期间，页面中央循环播放一个精美的 Lottie 加载动画，数据返回后停止并隐藏。

• 配置流程：

  1. 前置准备：
     • 在页面中央放置一个 Lottie 动画组件（默认隐藏），配置好加载动画 JSON。
  2. 选择组件：在画布上，选中触发数据请求的“查询按钮”。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，直接在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 先显示动画组件，然后添加 「Lottie 动画控制」。
     • 组件选择「加载动画组件」，操作选择「播放」。
  5. 绑定参数传递：无。

• 运行结果： 点击查询后，加载动画开始循环播放；数据返回后可停止并隐藏动画。

打印组件

将页面上的某一块特定区域单独提取出来，生成干净无干扰的打印页面并唤起系统打印机。该行为仅支持 Web 端。

适用组件：当前页面中已渲染的组件。

常用场景

• 打印电子发票。
• 打印订单详情小票。
• 导出并打印生成的合同或报表。

参数配置

运行结果与输出

无

运行机制

• 元素隔离与样式保留：底层先克隆整个页面的 DOM 树（document.body），然后精准定位并提取目标组件，将该组件之外的一切无关节点、兄弟节点移除。同时克隆并保留页面的 <head> 样式块（自动排除 <script> 脚本，避免交互逻辑二次执行），使提取出的打印区域在保持原有排版及视觉样式的前提下，不受页面的其余冗余内容（如侧边栏、背景导航等）干扰。
• 拉起系统打印机：系统会通过创建一个临时的独立打印窗口（window.open），载入经过隔离和特定高度、外边距初始化重置（外边距设为 0、高度设为自适应）后的目标元素，并在加载完成后自动调用系统自带的 print() 接口拉起操作系统的打印机设置。打印完成或用户取消后，打印窗口会自动安全关闭。

特殊说明

• 平台限制：该功能依赖于浏览器的 window.open 与 window.print 原生接口，仅在 Web 端生效，微信小程序、移动原生端暂不适用。

常见错误

• 组件未在当前页面渲染：若目标组件尚未渲染在当前 DOM 树中（或处于未加载的条件式容器分支内），系统会提示“找不到组件”，打印不会执行。
• 浏览器拦截弹出窗口：在一些具有严格安全和隐私策略的浏览器/环境下，可能会发生 window.open 被拦截器拦截，导致无法顺利拉起打印窗口。

用法举例

1. 打印电子发票（Web 端）

• 需求： 用户在 Web 端后台管理系统中，点击“打印发票”按钮，将发票区域的卡片组件单独提取并打印。

• 配置流程：

  1. 前置准备：
     • 在页面中设计好一个发票详情卡片视图组件（例如「发票卡片」），并在其下方配置一个“打印发票”按钮。
  2. 选择组件：在页面画布上，选中「打印发票」按钮。
  3. 添加行为：在右侧配置面板中切换到 「行为」 标签页，在 「点击时」 事件下点击添加操作。
  4. 配置行为基础参数：
     • 在行为选择下拉框中，搜索并选中 「打印组件」。
     • 组件参数选择当前的「发票卡片」组件。
  5. 绑定参数传递：无。

• 运行结果： 用户点击按钮后，浏览器会瞬间打开一个新标签页加载干净的发票卡片，并自动拉起系统的打印机设置弹窗，打印或取消后该新窗口自动关闭。