Skip to content

API

Jump to bottom
ambit-tsai edited this page Apr 15, 2021 · 4 revisions

全局 API

  1. setAppOption(id: string, option: MicroAppOption, merge = true): void

设置应用的相关参数

import { setAppOption } from '@ambit_tsai/m-app';

或者

<script src="path/to/m-app.js"></script>
<script>
    MicroApp.setAppOption(/* ... */);
</script>

MicroAppOption

interface MicroAppOption {
    entry: string;
    route?: string;
    shadowMode?: "closed" | "open";
    runtimePath?: string;
    fetchOption?: object;
    beforeReady?: (win: Window) => void;
    initialUrl?: string;
    initialState?: any;
}
  1. entry：入口 URL
  2. route：分配给应用的路由，默认为加载应用时的 location.pathname，只需填基础部分 /app/，无需 /app/:pathMatch(.*)*
  3. shadowMode：方法 attachShadow({ mode: ShadowMode }) 的配置参数，默认为 "closed"
  4. runtimePath：同源 <iframe> 的加载页面，默认为 /js-runtime.html
  5. fetchOption：加载入口页面时，方法 fetch 使用的参数
  6. beforeReady：在事件“MicroAppReady”派发前调用，可用于对 <iframe> 环境做自定义处理
  7. initialUrl: 微应用初始化时所处的 URL，默认为基座应用的 URL
  8. initialState: 微应用初始化时 URL 相关的状态数据，默认与基座应用一样

元素 <m-app>

  1. 属性会被解析为应用初始化的参数
  2. 事件 "load"：在入口文件加载结束后触发

JS 运行环境 <iframe> 中

  1. 事件 "MicroAppReady"：在应用初始化完成后触发
  2. "window.mRoot"：指向 ShadowRoot
  3. "window.mRoot.documentElement"：指向 ShadowRoot 下的元素 <html>
  4. "window.mRoot.head"：指向 ShadowRoot 下的元素 <head>
  5. "window.mRoot.body"：指向 ShadowRoot 下的元素 <body>

Clone this wiki locally