扣子自定义前端组件与自定义渲染界面指南-人工智能-PHP中文网

必须启用自定义代码并上传index.js等资源，通过自定义html组件+renderui钩子+scoped css实现高度可控、逻辑可复用的交互效果。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

扣子自定义前端组件与自定义渲染界面指南

要在扣子平台中实现界面高度可控、逻辑可复用的交互效果，必须脱离纯拖拽式组件堆砌，进入自定义前端组件与渲染层介入阶段。

在扣子中接入自定义前端组件

第一步：进入「工作空间 → 项目开发 → 已创建的应用 → 用户界面」，点击右上角「代码模式」切换按钮，确认弹窗中选择「启用自定义代码」并保存。

第二步：在左侧资源面板展开「前端资源」→「JS/CSS/HTML」，点击「+ 添加资源」，上传已打包的组件构建产物（如 dist 目录下的 index.js + style.css）；【文件名必须为 index.js，否则无法被识别为入口】。

第三步：回到「用户界面」画布，拖入「自定义 HTML 组件」，在右侧属性面板的「HTML 内容」栏中填入基础容器标签，例如：<div id="my-custom-button"></div>。

第四步：在「JS 脚本」区域（非 HTML 内容框）粘贴初始化逻辑，确保 DOM 就绪后再挂载组件：
document.addEventListener('DOMContentLoaded', () => {
  if (window.MyButtonComponent) {
    new window.MyButtonComponent('#my-custom-button');
  }
});

使用 render props 实现动态界面渲染

扣子原生支持通过 props 注入运行时上下文，从而驱动自定义 UI 渲染逻辑。核心是利用 props.renderUI 函数作为渲染钩子。

方法一：基础 renderUI 调用
在自定义 HTML 组件的 JS 脚本区写入：
const render = props.renderUI || ((data) => `

默认内容：${JSON.stringify(data)}

`);
document.getElementById('render-root').innerHTML = render({ user: '张三', status: 'active' });

方法二：绑定交互响应
在 renderUI 返回的 DOM 中嵌入事件监听器，但注意必须用委托方式绑定到根容器，因为扣子会高频重绘子节点：
const container = document.getElementById('render-root');
container.innerHTML = render({ onToggle: () => console.log('触发了外部 toggle') });
container.addEventListener('click', e => {
  if (e.target.dataset.action === 'toggle') {
    props.onToggle && props.onToggle();
  }
});

【props.onToggle 是扣子注入的函数，不可自行声明同名变量覆盖】

扣子Coze CLI工具

与 Coze CLI (@coze/cli) 交互——创建/部署 Coze 项目、管理空间和组织、向项目发送消息、生成图像/音频/视频等功能

下载

覆盖默认样式并注入 scoped CSS

第一步：在「前端资源」中上传一个 CSS 文件，命名为 custom-scope.css，内容需带唯一命名空间前缀，例如：
.coze-ns-button { padding: 8px 16px; border-radius: 4px; }
.coze-ns-button:hover { opacity: 0.9; }

第二步：在自定义 HTML 组件的「HTML 内容」中，给根元素添加对应 class：
<div class="coze-ns-button" data-action="toggle">点击我</div>

第三步：确保该 CSS 文件已在「JS/CSS/HTML」资源列表中启用——勾选左侧资源项后的开关按钮，未启用则样式不会加载。

这一步操作起来很简单，直接把文件拖进去就行。但若跳过命名空间前缀，CSS 极易污染扣子全局样式，导致标签栏、输入框等原生组件错位或变色。