illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 micro-app 1.0（RC，1.0.0-rc.32／2026-06） · 核于 2026-07

速查 ​

  • 本页汇总七张表：标签属性 / 全局配置与 API / 双沙箱对比 / 生命周期事件 / 元素与样式隔离 / 数据通信 / 版本状态
  • 一句话定位：micro-app = 京东开源、<micro-app> CustomElement 容器、接入成本最低（一行标签）、默认 with 沙箱 + 可选 iframe 沙箱
  • 接入一句话：主应用 microApp.start() 一次 + <micro-app name url> 标签；子应用开 CORS + 配 webpack_public_path，基本零生命周期改造
  • 沙箱一句话：with（默认，Proxy+with 软隔离、轻）/ iframe（iframe 属性，物理隔离、强、有开销）
  • 隔离一句话：元素隔离（DOM 作用域、removeDomScope 逃逸）+ scopedcss 样式隔离（micro-app[name=x] 前缀、可 4 级关、shadowDOM 可选）；主应用样式仍下渗
  • 通信一句话：data/setData（下行）/ dispatch（上行）/ GlobalData（全局）/ EventCenterForMicroApp（关沙箱/UMD）
  • 路由一句话：虚拟路由系统，5 种 router-mode（search/native/native-scope/pure/state）+ microApp.router 编排
  • 版本一句话：1.0 长期 RC（1.0.0-rc.32／2026-06-25，持续发版、大致月度），京东背书、约 6.2k star

一、核心 <micro-app> 标签属性表 ​

属性作用默认
name子应用唯一标识，须字母开头必填
url子应用地址（指向 index.html）必填
baseroute子应用基础路由，注入为 MICRO_APP_BASE_ROUTE''
iframe开启 iframe 沙箱（默认 with 沙箱）false
keep-alive保活：卸载不销毁、推入后台false
ssrSSR 模式false
inline使用内联 script（便于调试）false
destroy卸载时删除缓存资源false
clear-data卸载时清空通信缓存数据false
default-page子应用初始渲染页面''
router-mode虚拟路由模式（见版本/路由说明）search
keep-router-state卸载时保留子应用路由状态false
disable-scopecss关闭样式隔离false
disable-sandbox关闭 JS 沙箱（不推荐）false
disable-memory-router关闭虚拟路由系统false
disable-patch-request关闭请求地址自动补全false
shadowDOM用真 Shadow DOM 做样式隔离（可选）false
fiberfiber 模式，异步执行 JSfalse
exclude / ignore命中元素被删除 / 放行不处理（如 JSONP）—

属性写在标签上（单应用）或传给 microApp.start({...})（全局默认，key 用小驼峰或连字符）。

二、全局配置与核心 API 表 ​

js
// 全局启动与配置（节选）
microApp.start({
  iframe: true, // 全局 iframe 沙箱
  iframeSrc: location.origin, // iframe 沙箱初始化空页面
  inline: true,
  destroy: true,
  ssr: true,
  disableScopecss: true, // 或 'disable-scopecss': true
  disableSandbox: true, // 或 'disable-sandbox': true
  "keep-alive": true,
  "disable-memory-router": true,
  "keep-router-state": true,
  "disable-patch-request": true,
  lifeCycles: {}, // 全局生命周期
  plugins: {}, // 插件系统
  fetch(url, options) {}, // 自定义 fetch（如加 credentials）
  globalAssets: { js: [], css: [] }, // 全局共享资源
});
API归属作用
microApp.start(options)主应用启动 micro-app、注册 <micro-app>、传全局配置
microApp.setData(name, data, cb) / forceSetData主应用向子应用下发数据（下行）
microApp.getData(name)主应用读取子应用数据
microApp.addDataListener(name, fn, autoTrigger)主应用订阅子应用上报数据
microApp.setGlobalData(data) / getGlobalData / addGlobalDataListener双端全局数据读写与订阅
microApp.clearData(name) / clearGlobalData主应用清理数据 / 全局数据
removeDomScope(bool)双端元素作用域解绑 / 恢复
EventCenterForMicroApp(name)主应用关沙箱/UMD 多实例的独立事件中心
microApp.router.push/replace/go/back/forward双端虚拟路由编排（导航）
microApp.router.beforeEach/afterEach主应用路由守卫
microApp.router.setDefaultPage/getDefaultPage主应用子应用默认页
microApp.router.attachToURL/attachAllToURL主应用手动把子应用路由同步到 URL
子应用 window.microApp.*子应用getData/addDataListener/dispatch/router/removeDomScope 等

三、双沙箱对比表 ​

维度with 沙箱（默认）iframe 沙箱（iframe 属性）
机制with(proxyWindow) + Proxy 拦截同域 iframe 原生上下文
隔离性质软隔离（防意外不防恶意）物理隔离
window/document/location/history代理/部分共享各自独立、原生
顶层变量挂 window❌ 不挂（经典坑）✅ 接近原生
性能/开销好、无 iframe 开销有 iframe 创建/常驻开销
兼容性广（除 IE，须 Proxy）同域约束 + 部分 API 差异
取真实对象window.rawWindow / rawDocument—
注入变量MICRO_APP_ENVIRONMENT / MICRO_APP_NAME / MICRO_APP_PUBLIC_PATH / MICRO_APP_BASE_ROUTE / MICRO_APP_BASE_APPLICATION同左
初始化坑顶层变量不挂 window误载主应用资源（iframeSrc 空页 / window.stop()）

详见 with 沙箱 与 iframe 沙箱模式。

四、生命周期事件表 ​

事件触发时机说明
created元素初始化后、加载资源前打点、loading
beforemount资源加载完、渲染前注入初始数据
mounted子应用渲染结束隐藏 loading、通知就绪
unmount子应用卸载时清理主应用副作用
error加载/渲染出错（仅渲染终止型）兜底 UI、上报
beforeshow（keep-alive）保活应用回前台前子应用 appstate-change 监听
aftershow（keep-alive）保活应用已展示同上
afterhidden（keep-alive）保活应用入后台同上

监听：元素上 addEventListener('mounted', …) / 框架 @mounted；或全局 microApp.start({ lifeCycles: { mounted(e, appName){} } })。子应用保活状态：window.addEventListener('appstate-change', e => e.detail.appState)。详见 CustomElement 容器。

五、元素与样式隔离表 ​

隔离机制关闭 / 调整
元素隔离代理子应用 DOM 查询，圈进 <micro-app> 边界（主可访子、子不可访主）removeDomScope(true/false) 临时解绑/恢复
样式隔离（scopedcss，默认开）选择器加前缀 micro-app[name=x] .test{}全局 disableScopecss / 属性 disable-scopecss
·文件级关/*! scopecss-disable */ … /*! scopecss-enable */注释须 /*! 开头（躲压缩）
·选择器级关/*! scopecss-disable .a, .b */—
·行级关/*! scopecss-disable-next-line */—
shadowDOM（可选）用真 Shadow DOM 承载、样式强封闭有第三方弹窗逃逸等代价，非默认
主应用样式下渗scopedcss 管不到主应用 → 主应用全局样式仍影响子应用主应用样式收敛 + 子应用 CSS Modules

详见 元素与样式隔离。

六、数据通信表 ​

方向主应用侧子应用侧
父 → 子（下行）<micro-app :data> / microApp.setData(name, data, cb) / forceSetDatawindow.microApp.getData() / addDataListener(fn, autoTrigger)
子 → 父（上行）元素 datachange 事件 / microApp.addDataListener(name, fn) / getData(name)window.microApp.dispatch(data, cb) / forceDispatch
全局广播microApp.setGlobalData / getGlobalData / addGlobalDataListenerwindow.microApp.setGlobalData / getGlobalData / addGlobalDataListener
独立事件中心（关沙箱/UMD）new EventCenterForMicroApp(name) → window.eventCenterForAppxxwindow.eventCenterForAppxx.getData() / dispatch() / addDataListener()
清理microApp.clearData(name) / removeDataListener / clearDataListenerwindow.microApp.clearData() / removeDataListener

分工：传值用通信 API，导航用 microApp.router。详见 数据通信。

七、版本状态表 ​

项现状
最新版本1.0.0-rc.32（2026-06-25）
版本形态1.0 长期 RC——2021-06 建库至今未发正式 1.0
发版节奏rc.x 持续发版，大致月度（有时一月两版、有时隔数月）
出品方京东开源 jd-opensource（前身 micro-zoe）
热度约 6.2k star、600+ fork，京东内部大规模在用
包名@micro-zoe/micro-app
浏览器除 IE 外全支持；须 CustomElements（可 polyfill）+ Proxy（须原生）；iOS 10+ / Android 5+
近期增强iframe 沙箱增强、Worker 代理、file://（Electron）、CSS :root 变量、Tailwind CSS 4 兼容

详见 1.0 RC 与现状。

权威链接 ​

相关页 ​