纯 HTML / jQuery / 自维护框架

不采用 am_plugin 脚手架时，插件只要满足两条契约就能被基座加载：导出 qiankun 生命周期、消费 props.hostBridge。本节面向轻量 HTML 插件与 React/Angular/Svelte/自建 Vue 工程。

生命周期（全局变量写法）

HTML/原生 JS 插件直接在视图里把生命周期挂到 window[{name}]，{name} 必须等于 manifest.json 的 name：

<script>
  ((global) => {
    let bridge = null
    let offEvents = []

    const root = (props) => props.container || document
    const $q = (props, sel) => root(props).querySelector(sel)

    const invoke = async (method, params) => {
      if (!bridge?.invoke) throw new Error('hostBridge 不可用，请确认经基座 qiankun 打开')
      return bridge.invoke(method, params)
    }

    global.am_demo = {
      bootstrap: () => Promise.resolve(),
      mount: (props) => {
        bridge = props.hostBridge || props.amBridge
        const btn = $q(props, '#btn')
        const handler = () => invoke('ui.message', { type: 'success', message: '来自 HTML 插件' })
        btn?.addEventListener('click', handler)
        offEvents.push(() => btn?.removeEventListener('click', handler))
        return Promise.resolve()
      },
      unmount: () => {
        offEvents.forEach((off) => off())
        offEvents = []
        bridge = null
        return Promise.resolve()
      }
    }
  })(window)
</script>

视图页（app/view/app/index.html、manage.html）由后端 view() 渲染，双入口各一个 HTML 承载。

三条硬规矩

生命周期必须自清理

unmount 里清干净：事件监听、定时器、全局引用、Vue/框架实例、WebSocket。常驻引用不清会随反复打开累积泄漏。

• DOM 查询限定在 props.container 内：props.container.querySelector(...)，不要 document.querySelector，避免影响基座与其它插件。
• 不要直接依赖基座 localStorage key：登录态一律走 bridge.invoke('auth.getAccessToken') 等，基座存储结构以后会变。
• jQuery 事件用命名空间（如 .on('click.am_demo')），unmount 里 .off('.am_demo') 统一解绑。

自维护框架

React / Angular / Svelte / 自建 Vue 工程契约一致：mount(props) 里初始化并保存自己的应用实例、unmount 里销毁；props.hostBridge || props.amBridge 调能力。

自建 Vue + Vite 工程的关键配置：

// vite.config.ts
export default defineConfig({
  base: '/app/am_demo/vue/',          // 生产资源前缀
  build: {
    outDir: /* 回写到插件 public 静态目录 */,
    cssCodeSplit: false,
    rollupOptions: { output: { format: 'umd', name: 'am_demo' } }  // name 必须等于 manifest.name
  },
  server: { port: 3007, cors: true, headers: { 'Access-Control-Allow-Origin': '*' } }
})

建议把前端源码放独立工作区（勿内嵌插件目录），构建产物再回写 am-serve/plugin/{name}/，避免打包插件带上冗余源码与 node_modules。

入口地址（开发 vs 生产）

开发模式跨端口调试：manifest 临时改绝对 dev URL + is_dev:1（dev 模式基座跳过同域校验）：

{ "entry": "http://localhost:3007", "manage_entry": "http://localhost:3007", "open_mode": "micro", "is_dev": 1 }

生产改回相对静态目录（/app/am_demo/...）并在后端 static 映射对外暴露。

请求自己的接口

基座不代理。前台独立页无 Bridge 时按公开浏览降级；需要登录态时先取主 JWT：

const token = await bridge.invoke('auth.getAccessToken')
const res = await fetch('/app/am_demo/info', { headers: { Authorization: token } })

iframe 形态

open_mode:'iframe' 的插件不走 qiankun，没有生命周期与 Bridge，靠 URL 参数拿身份（见免登与会话）。轻量、无需与基座深度交互的页面可用它。