微组件

微组件用于在页面中加载由任意前端技术栈开发的外部微应用（不限制框架与语言，Vue、React、Angular 均可），当平台内置组件无法满足需求时，可自行开发并挂载到页面中。

概述

微组件基于微前端（qiankun）加载外部应用，通过选择微应用标识与内部路由将微应用嵌入到页面中。

微应用需托管到平台可访问的 web 服务；使用 Chameleon 官方脚手架托管时可直接复用。
平台在加载微组件时，会把部分主站与组件上下文参数传递给微应用，微应用可直接调用 API 请求数据。
若填写的微应用标识不在平台已配置的托管列表中，组件会显示配置错误。

配置项

配置项	说明
微应用	选择要加载的微应用标识，取自平台已配置的托管应用列表，必填
路径	微应用内部路由地址，以 `/` 开头，默认 `/`，必填

运行行为

微组件在编辑态与用户态均渲染同一微应用，实际加载地址为 https://主站域名/{微应用标识}{路径}，同时把组件上下文参数传入微应用：

编辑态传入组件 id、微应用标识与内部路由。
用户态在编辑态基础上额外传入页面上下文参数（当前数据 ID、页面 ID 等），供微应用读取。

未配置「微应用」时，编辑态展示「请先完成设置」占位，用户态展示骨架屏；「微应用」不在托管列表中时展示配置错误。

开发自定义组件

可通过任意前端技术栈按业务需求开发组件，并将组件托管到 web 服务。未使用平台提供的微应用托管时，需要由平台按自托管 web 服务进行适配。

微应用预览地址：https://主站域名/微应用标识/微应用内部路由，示例：https://demo.chameleon.cn/chameleon-web-system/home。

微组件获取主站参数

在微组件中通过 useModel('@@qiankunStateFromMaster') 获取主站传递的参数：

import React from 'react';
import { useModel } from '@umijs/max';

const MyComponent: React.FC = () => {
    const { masterState, chamaleonParams } = useModel('@@qiankunStateFromMaster');

    return null;
};

参数分两部分：

分组	参数	说明
masterState	token / tenant	当前登录用户 token / 当前租户 ID
chamaleonParams	cmpId	当前组件 ID
chamaleonParams	pageUrl	当前组件所在页面 URL
chamaleonParams	appId / metaPageId	当前应用 ID / 当前所在页面 ID
chamaleonParams	dataId / currentData / parentData	当前数据 ID / 当前列表行数据 / 父级数据
chamaleonParams	workflowDataId	当前数据审批流实例 ID
chamaleonParams	formState	当前表单状态
chamaleonParams	metaViewId / metaObjectId	当前视图列表 ID / 所属对象 ID
chamaleonParams	detailMetaObjectId	详情页所属对象 ID
chamaleonParams	inTemporaryPage	是否在临时页面（推屏、弹窗等）
chamaleonParams	closeContainer	关闭容器页回调，仅在弹窗 / 推屏中有效

示例：关闭容器页

import React from 'react';
import { Button, Space } from 'antd';
import { useModel } from '@umijs/max';

const CloseModalOrDrawerControl: React.FC = () => {
    const { chamaleonParams } = useModel('@@qiankunStateFromMaster');
    const { closeContainer } = chamaleonParams;

    return (
        <Space>
            <Button type="primary" onClick={() => closeContainer?.()}>关闭弹窗/推屏</Button>
        </Space>
    );
};

开发工具

平台已完成与官方脚手架的对接，可直接将脚手架项目集成到平台中：

脚手架地址：https://gitee.com/seventiny/ChameleonDeveloper/tree/main/web-microapp
脚手架语言：React、TypeScript

使用建议

优先评估平台内置组件是否可满足；仅当需要专用交互或第三方系统嵌入时才使用微组件。
自托管微应用需要与平台进行适配后方可加载。

下一步

自定义HTML - 内嵌 HTML 代码
评论 - 评论互动组件
页面 - 返回平台页面总览

属性明细

以下内容面向技术实现与 AI 检索。组件的全部配置项均存放在节点的 meta 中，且所有 meta 值统一以字符串形式存储。

组件属性（meta）

属性名	类型	含义	取值/存储值
`AppName`	string	微应用标识，必填	取自 `CHAMELEON_EMBEDDING_APP_HOST` 配置的托管应用列表，如 `chameleon-web-demo`
`Path`	string	微应用内部路由，必填	默认 `/`，如 `/home`

存储示例

以下为一个完整的 WidgetItem 节点，其中 uid 为该组件在侧边栏中的固定 GUID：

{
  "id": "b1f7e2c4-3d5a-4e6b-9f01-2a3b4c5d6e7f",
  "uid": "d5f2c6f8-a8ba-4682-b795-bcde207a577e",
  "dragType": "Widget",
  "originalType": "Widget",
  "widgetType": "EmbeddingApp",
  "widgetTypeName": "微组件",
  "meta": {
    "AppName": "chameleon-web-demo",
    "Path": "/home"
  },
  "children": []
}

概述​

配置项​

运行行为​

开发自定义组件​

微组件获取主站参数​

示例：关闭容器页​

开发工具​

使用建议​

下一步​

属性明细​

组件属性（meta）​

存储示例​

概述

配置项