前端形态与加载
2026/10/26大约 2 分钟
前端形态与加载
基座用 qiankun 加载插件前端,不限定技术栈。无论用官方 Vue3 脚手架、纯 HTML,还是 React/Angular 自维护工程,只要满足两条契约就能被基座打开。
两条契约
- 导出生命周期:UMD 全局
window[{name}] = { bootstrap, mount, unmount },或 ES 模块具名导出{ bootstrap, mount, unmount }。{name}必须与manifest.json的name一致,否则 qiankun 找不到生命周期。 - 消费 props:在
mount(props)中接收基座注入,用props.hostBridge.invoke(method, params)调用基座能力,并把 DOM 挂载限定在props.container内。
基座注入了什么
基座 views/plugin/app 通过 loadMicroApp 加载子应用,向 props 注入:
| 字段 | 含义 |
|---|---|
props.hostBridge / props.amBridge | 基座能力桥接 API(同一对象,见 Bridge 协议) |
props.plugin | 插件运行时记录(am_plugin_app 一行) |
props.pluginName | 插件标识 |
props.entryType | 当前入口:'front'(前台)或 'manage'(管理) |
props.container | 子应用容器 DOM,挂载范围限定于此 |
样式隔离
基座开启 qiankun experimentalStyleIsolation,给子应用全局样式加容器前缀,防止插件注入的全局 Element Plus/框架样式泄漏、覆盖基座菜单。子应用深色模式与 Element Plus 主题变量由基座统一控制,两端共用同一 documentElement。
双入口
同一份产物通过 entry / manage_entry 提供两类打开方式:
| 入口 | URL | 形态 | 登录态 |
|---|---|---|---|
管理 manage | /app/{name}/manage | 基座后台菜单经 qiankun 打开 | 免登,Bridge 注入登录态 |
前台 front | /app/{name} | 任何人浏览器直访 | 不要求登录,能力可选增强(见免登与会话) |
前台独立打开时没有 Bridge、没有登录态是正常状态:公开内容直接浏览,需要登录的功能按 SDK 的门控/降级处理。
打开方式 open_mode
manifest.json 的 open_mode 决定基座怎么承载:
| 值 | 行为 |
|---|---|
micro | qiankun 微应用加载(本章契约即针对它,默认) |
iframe | 基座用 <iframe src=entry> 直接承载,不走 qiankun 生命周期 |
入口地址由 resolveEntryUrl 归一:http(s):// 开头的绝对地址原样使用,相对路径拼上基座 API 前缀(生产同域时即 /app/{name}/...)。
纯插件(无页面)
entry 与 manage_entry 都为空串的插件视为纯插件:只提供服务/接口,无前端页面。基座不生成入口、不建"管理入口"顶级菜单。详见安装、升级与卸载。
官方推荐脚手架
复杂 Vue3 业务插件推荐用 am_plugin 脚手架装配,qiankun 生命周期、UMD 构建、免登同步、双入口视图生成、产物落位全部封装成固定流程,见 Vue3 脚手架。
