1.why micro-app
在micro-app之前,业内已经有一些开源的微前端框架,比较流行的有2个:single-spa和qiankun。
single-spa是通过监听 url change 事件,在路由变化时匹配到渲染的子应用并进行渲染,这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法:bootstrap、mount、unmount,分别对应初始化、渲染和卸载,这也导致子应用需要对入口文件进行修改。因为qiankun是基于single-spa进行封装,所以这些特点也被qiankun继承下来,并且需要对webpack配置进行一些修改。
micro-app并没有沿袭single-spa的思路,而是借鉴了WebComponent的思想,通过CustomElement结合自定义的ShadowDom,将微前端封装成一个类WebComponent组件,从而实现微前端的组件化渲染。并且由于自定义ShadowDom的隔离特性,micro-app不需要像single-spa和qiankun一样要求子应用修改渲染逻辑并暴露出方法,也不需要修改webpack配置,是目前市面上接入微前端成本最低的方案。
iframe:加载是另一个window窗口,页面缩放时内部窗口内部缩放不同步。另外发送消息时需要在onload监听事件处理,会出现发送额外的噪声消息的情况。
在使用时,qiankun方案遇到在加载子应用找不到对应容器的问题无法解决,而后换成的micro-app可以正常加载子应用。
2.micro-app 优势
(1)发送数据方式轻松
import microApp from ‘@micro-zoe/micro-app’
//方式1: 通过data属性发送数据
<template>
<micro-app
name='my-app'
url='xx'
:data='dataForChild' // data只接受对象类型,数据变化时会重新发送
/>
</template>
<script>
export default {
data () {
return {
dataForChild: {type: '发送给子应用的数据'}
}
}
}
</script>
//方式2: 手动发送数据
// 发送数据给子应用 my-app,setData第二个参数只接受对象类型
microApp.setData('my-app', {type: '新的数据'})