API

Jump to bottom

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

全局 API

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;
}

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

元素 <m-app>

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

JS 运行环境 <iframe> 中

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