跳到主要内容

使用拓展组件 Extension

使用平台在线功能创建 Extension 组件​

图片文档​

  1. 拖拽一个 Extension 组件。编辑右侧的 “To create an extension component”

extension-1

  1. 在自动打开的浏览器标签页，等待资源加载，等待自动运行完成 npm install 和 npm run dev，全程不需要干预，直到出现应用的试运行界面。第一次打开会出现登陆，请登陆，用户名和密码就是应用试运行的用户名和密码。

extension-2

  1. 切换到 Code tab, 或者使用左侧的 AI 工具，修改代码，点击右上角的 “保存” 按钮，或者按快捷键 cmd + s(mac) ctrl + s(windows) 保存。

extension-3

  1. 等待几秒钟自动 build，切换到 Preview tab 查看代码改动是否生效

extension-4

  1. 修改完成代码过后，在控制台按 ctrl + c 停止开发模式。然后运行 npm run build 编译产品模式代码。等运行成功过后，点击右上角 Export 导出生成物到本地。

extension-5

  1. 最后，回到表单编辑器，将 Extension 组件的Extension Type改为 JS component(remote CETA hosted)，上传导出的 Extension 代码（解压 zip 文件，找到 dist 目录下的 bundls.js 和 bundle.css），保存。此时项目试运行地址已经可以使用。

extension-6

extension-7

视频文档​

下面视频为从零创建一个全新的 Extension 组件到 build 生产模式上传到应用的全过程。

本地自定义开发 Extension 组件​

本地开发文档查看这里