MicroApp
yuhuo2024-02-29开发库框架库
参考链接
一. 基座
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>基座应用</title>
<script type="importmap">
{
"imports": {
"@micro-zoe/micro-app": "../../node_modules/@micro-zoe/micro-app/lib/index.esm.js"
}
}
</script>
</head>
<body>
<h2>基座应用</h2>
<micro-app id="son" name="son" url="http://127.0.0.1:5500/topic/micro_app/son.html"></micro-app>
<script type="module">
// 初始化基座应用
import microApp from "@micro-zoe/micro-app";
window.process = {
env: "production",
};
microApp.start();
// 子应用生命周期：created、beforemount、mounted、unmount、error
let sonApp = document.getElementById("son");
sonApp.addEventListener("mounted", () => {
console.log("mounted事件");
});
// 环境变量
console.log("是否是基座应用：" + window.__MICRO_APP_BASE_APPLICATION__);
// 向子应用发送数据
microApp.setData("son", { message: "来自基座应用的数据" });
// 监听来自子应用的数据
microApp.addDataListener(
"son",
(data) => {
console.log("基座应用中监听：", data);
},
true
);
// 监听全局数据
microApp.addGlobalDataListener((data) => {
console.log("基座应用中监听：", data);
}, true);
// 发送全局数据
microApp.setGlobalData({ message: "全局数据1" });
</script>
</body>
</html>
二. 子应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>子应用</title>
<style>
body {
width: 500px;
padding: 0 10px;
overflow: hidden;
outline: 1px solid red;
}
</style>
</head>
<body>
<h3>子应用</h3>
<p>内容内容内容内容内容内容内容</p>
<button id="button">切换路由</button>
<p>hash：<span id="hash"></span></p>
<script>
// 切换路由
let $button = document.getElementById("button");
let $hash = document.getElementById("hash");
$hash.innerText = location.hash;
let num = 0;
$button.onclick = function () {
location.hash = location.hash + num++;
$hash.innerText = location.hash;
};
// 环境变量
console.log("是否是子应用：" + window.__MICRO_APP_ENVIRONMENT__);
console.log("子应用名称：" + window.__MICRO_APP_NAME__);
// JS沙箱
console.log("默认window被Proxy代理：", window);
console.log("真实window：", rawWindow);
// 向基座应用发送数据
microApp.dispatch({ message: "来自子应用的数据" });
// 监听来自基座应用的数据
microApp.addDataListener((data) => {
console.log("子应用中监听：", data);
}, true);
// 监听全局数据
microApp.addGlobalDataListener((data) => {
console.log("子应用中监听：", data);
}, true);
// 发送全局数据
microApp.setGlobalData({ message: "全局数据2" });
</script>
</body>
</html>