看到标题,大家首先想到的应该是iframe,诚然iframe的确可以做到,但是我们今天要讲的并不是它,而是新推出的一款微前端框架micro-app。至于为什么不用iframe,可以参考Why Not Iframe。
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/...
一、作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联...
Dreamweaver中如何使用Flash影片 1、首先需要我们准备的是一个Flash文件,其次最...
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和...
背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面...
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及,已经被广泛的应用到了各个...
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行...
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列...
在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。 首先,我们对C...
打开软件,我们按快捷键ctrl+n,建立一个新的文件。 点击常用,选择布局。 点击...
作者 / Krish Vitaldevara,Google Play 信任与安全产品管理总监 多年来,向数十...