这是一个创建于 1211 天前的主题，其中的信息可能已经有所发展或是发生改变。
看到标题，大家首先想到的应该是 iframe，诚然 iframe 的确可以做到，但是我们今天要讲的并不是它，而是新推出的一款微前端框架micro-app。至于为什么不用 iframe，可以参考Why Not Iframe。
micro-app 是什么
micro-app 是一款基于类 WebComponent 进行渲染的微前端框架，它从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架，并且提供了 JS 沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。
micro-app 的基本实现思路和 single-spa 、qiankun 类似，但它借鉴了 WebComponent 的思想，使用 CustomElement 和自定义的 shadowDom，将微前端封装在一个类 WebComponent 组件中，从而简化了渲染步骤。
如何使用？
1 、安装依赖
yarn add @micro-zoe/micro-app
2 、引入 micro-app
// index.js
import microApp from '@micro-zoe/micro-app'
microApp.start()
3 、在页面中使用
<template>
<div id="app">
<!--micro-app 标签最终会渲染为一个微前端应用-->
<micro-app name='app1' url='http://localhost:3000/'></micro-app>
</div>
</template>
渲染效果
可以看出 micro-app 的使用方式和 iframe 一样简单，渲染后的 html 结构和 WebComponent 类似，那为什么不直接使用 WebComponent 呢？
主要是因为 WebComponent 的核心 API-ShadowDom 的兼容性太差，在 react 框架下无法正常运行。ShadowDom 主要提供两种功能：样式隔离和元素隔离，即子应用和基座应用可以拥有相同的 class 、id 而不会相互影响。
micro-app 模拟实现了 ShadowDom 的功能，使得子应用的样式和元素作用域固定在micro-app元素内部，micro-app元素就拥有了类似 ShadowDom 的能力。
细心的童鞋看到这里就会发现了，你这明明是三行代码，和标题不符，你这个标题党！
是的😂。微前端的使用场景非常复杂，如果子应用只有一个页面，只需要插入 micro-app 标签即可渲染，如果子应用是多页面应用，还需要修改路由配置。但修改路由配置非常简单，只需几行代码即可搞定，详情请参考这里。即便你从未接触过微前端，也可以在一个小时内搞定所有事情。
数据通信
除了微前端的渲染，数据通信是最麻烦的事情，所幸 micro-app 的数据通信非常简单，其传递方式和组件属性类似。
<template>
<div id="app">
<!--data 数据每次更新时都会发送给子应用-->
<micro-app name='app1' url='http://localhost:3000/' :data='mydata'></micro-app>
</div>
</template>
<script>
export default {
data() {
return {
mydata: {
type: '发送给子应用的数据'
},
}
},
}
</script>
子应用通过事件绑定获取数据
// 子应用
window.microApp?.addDataListener((data) => {
console.log("来自基座应用的数据", data)
})
总结
micro-app 的使用方式和 iframe 一样简单，但却规避了 iframe 存在的问题。除了这些，micro-app 还提供了丰富的功能，可以满足任何业务需求，同时可以适用于任何框架。
有兴趣的童鞋快来尝试吧！
相关地址
micro-app 代码地址: https://github.com/micro-zoe/micro-app
 |
1
felixin 2021-08-01 20:03:00 +08:00 via Android
|
Select Language