自定义代码

1. 组件概述

自定义代码是一个高级功能组件，允许用户通过编写 HTML 和 JavaScript 代码来实现完全自定义的渲染效果和交互逻辑。当平台提供的标准组件无法满足特定需求时，可以使用此组件来实现个性化功能。该组件适合有一定编程基础的用户，用于集成第三方库、实现特殊动画效果或创建独特的交互体验。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：集成数学可视化工具。在数学教学应用中，需要展示动态几何图形或函数曲线。可以在”将显示的 HTML 内容”中创建一个容器元素，然后在”挂载事件响应”中初始化第三方图形库（如 GeoGebra 或 Desmos），实现交互式数学演示。
• 场景二：创建自定义动画效果。在知识闯关游戏中，需要展示答题正确后的庆祝动画。可以在”将显示的 HTML 内容”中编写动画的 HTML 结构，在”挂载事件响应”中编写动画触发逻辑，当工作流返回答题结果后，通过”页面更新事件响应”检测数据变化并播放相应动画。

加载中...

查看 JSON

复制 JSON

3. 功能配置

配置

渲染折叠组

配置项	说明
将显示的 HTML 内容	组件渲染时显示的 HTML 代码。可以编写任意合法的 HTML 结构，包括 div、span、canvas 等元素。这些 HTML 会直接渲染到页面上，作为组件的基础结构。例如可以创建一个容器用于后续在 JavaScript 中操作，或直接编写静态展示内容。

事件折叠组

配置项	说明
挂载事件响应（onMount）	组件首次加载到页面时执行的 JavaScript 代码。这是初始化自定义功能的主要位置。代码中可以使用以下变量：dom 表示组件的 DOM 元素，可以对其进行操作；value 表示组件当前的值；onChange 是一个函数，调用它可以修改组件的值（例如 onChange('新值')）；props 包含组件的所有属性和数据。常见用途包括：初始化第三方库、绑定事件监听器、创建动态元素等。
页面更新事件响应（onUpdate）	当页面数据发生变化时执行的 JavaScript 代码。每当组件接收到新数据（例如工作流返回了新的变量值），此代码就会被触发。代码中可以使用以下变量：dom 表示组件的 DOM 元素；data 表示当前最新的数据；prevData 表示更新前的数据；props 包含组件的所有属性。通过比较 data 和 prevData 可以判断哪些数据发生了变化，从而执行相应的更新逻辑。
取消挂载事件响应（onUnmount）	组件从页面移除时执行的 JavaScript 代码。用于清理资源，防止内存泄漏。代码中可以使用 props 变量访问组件属性。常见用途包括：移除事件监听器、销毁第三方库实例、清除定时器等。如果在挂载事件中创建了需要手动清理的资源，务必在此处进行清理。