微前端指南

快速配置

javascript

import { registerMicroApps, start, initGlobalState } from '@jianghuizhong/wasmux/micro';

registerMicroApps([{
  name: 'app1',
  entry: '//localhost:3001',
  container: '#micro-container',  // 独立于主壳，避免 update 时被替换
  activeRule: '/app1',
  props: { userId: 123 },
}]);

// 全局状态：子应用通过 props 获取
const actions = initGlobalState({ user: null, theme: 'light' });
actions.onGlobalStateChange((state, prev) => console.log('state', state));

start({ prefetch: true, sandbox: true });

initGlobalState 全局状态

initGlobalState 用于主应用与子应用间共享状态。子应用通过 props 接收。onGlobalStateChange 监听状态变化。

loadMicroApp 手动加载

适用于弹窗、抽屉等场景，需手动控制子应用加载与卸载：

javascript

import { loadMicroApp } from '@jianghuizhong/wasmux/micro';

// 手动加载（弹窗等）
const modal = await loadMicroApp({
  name: 'modal',
  entry: '//localhost:3002',
  container: '#modal-container',
});
// 关闭时卸载
await modal.unmount();

容器分离（重要）

子应用容器 #micro-container 必须与主壳 WasmUXApp 的 #app 分开，否则主壳 app.update() 会替换掉子应用挂载点。

HTML 结构示例：

html

<!-- 主壳：WasmUXApp 挂载 -->
<div id="app"></div>

<!-- 子应用：独立容器，与 #app 分开 -->
<div id="micro-container"></div>

Web Component

使用 <wasmux-micro-app> 前需先注册：

javascript

import { registerWasmuxMicroAppElement } from '@jianghuizhong/wasmux';
registerWasmuxMicroAppElement();

html

<wasmux-micro-app
  name="app1"
  entry="http://localhost:3001"
  container="#container"
  active-rule="/app1"
  :props='{"userId": 123}'
></wasmux-micro-app>

四层隔离

JS、样式、路由、Wasm 四层隔离，内置加密通信，子应用接入 ≤3 步。