MicroApp初步使用
MicroApp 借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染
基应用修改
安装插件
npm install @micro-zoe/micro-app --save
引入依赖
import microApp from '@micro-zoe/micro-app'
// 可以传入一个对象进行全局配置
microApp.start()
添加组件
<template>
<div>
<micro-app
name='child'
url='http://localhost:3000/'
baseroute='/my-page'></micro-app>
</div>
</template>
-
name应用名称，每个应用的值全局唯一；必传 -
url应用地址，可以在地址栏访问到；必传 -
baseroute子应用的基础路由地址拼接方法
let href = window.location.href, hrefs = href.split(baseroute) let realUrl = `${url}${baseroute}${hrefs.length === 2 ? hrefs[1] : ''}`例：地址栏值为 http://localhost:80/my-page/home 时，该子应用访问的地址为 http://localhost:3000/home
-
destory卸载时是否强制删除缓存资源，子应用在卸载后会清空缓存资源，再次渲染时重新请求数据
子应用修改
静态资源路径
设置 webpack 的公共路径 publicPath
__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ || '/'
项目入口文件
let app
/** 挂载函数 */
function mount () {
app = new Vue({
el: '#app',
template: '<App/>',
components: { App },
})
}
/** 卸载函数 */
function unmount () {
app.$destroy()
app.$el.innerHTML = ''
app = null
}
// 微前端环境下，注册mount和unmount方法
if (window.__MICRO_APP_ENVIRONMENT__)
window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
else
mount()
预加载
子应用
通过 microApp.start 配置项的 preFetchApps 属性设置子应用的预加载，或者通过 microApp.preFetch 方法设置
/** 子应用列表 */
const apps = [{ name: 'child', url: 'http://localhost:3000' }]
// 方式一
microApp.start({ preFetchApps: apps })
// microApp.start({ preFetchApps: () => apps })
// 方式二
microApp.preFetch(apps)
// microApp.preFetch(() => apps)
静态资源
-
资源共享
通过
microApp.start配置项的globalAssets属性设置全局共享资源，子应用加载相同地址的资源时，会直接从缓存中读取数据/** 静态资源列表 */ const assets = { js: ['/static/js/vendor.dll.js'], css: [] } microApp.start({ globalAssets: assets })通过在打包后的
link、script标签上设置global属性，micro-app 会在第一次加载该文件后放入公共缓存，其他应用加载相同地址的资源时，会直接从缓存中读取数据<link rel="stylesheet" href="xx.css" global> <script src="xx.js" global></script> -
资源过滤
exclude通过在打包后的
link、script、style标签上设置exclude属性过滤这些资源加载，micro-app 会删除带有exclude属性的元素；和资源共享搭配使用提升子应用的渲染速度<link rel="stylesheet" href="xx.css" exclude> <script src="xx.js" exclude></script> <style exclude></style>
组件通信
基应用向子应用传递
基应用通过 data 属性向子应用传递数据，子应用通过 window.microApp.addDataListener 添加数据监听方法
<!--基应用文件-->
<template>
<micro-app :data="micro.data"></micro-app>
</template>
<script>
export default {
data() {
return {
micro: {
data: { name: '' }
}
}
}
}
</script>
<!--子应用文件-->
<template>
...
</template>
<script>
export default {
methods: {
dataListener(data) {
console.log(data)
}
}
, created () {
/** 绑定数据监听事件 */
window.microApp && window.microApp.addDataListener(this.dataListener)
}
, destroyed () {
/** 移除数据监听事件 */
window.microApp && window.microApp.removeDataListener(this.dataListener)
}
}
</script>
子应用向基应用传递
子应用通过 window.microApp.dispatch 向外抛出一个数据，基应用通过 datachange 事件接收子应用抛出的数据
<!--基应用文件-->
<template>
<micro-app @datachange='handleDataChange'></micro-app>
</template>
<script>
export default {
methods: {
handleDataChange(event) {
console.log(event.detail.data)
}
}
}
</script>
<!--子应用文件-->
<template>
<div>
<button @click="send">向基应用发送数据</button>
</div>
</template>
<script>
export default {
methods: {
send() {
window.microApp && window.microApp.dispatch({ message: '子应用发送' })
}
}
}
</script>
生命周期函数
基应用定义
基应用可以定义 created、beforemount、mounted、unmount、error 五个生命周期函数
<template>
<micro-app
@created='created'
@beforemount='beforemount'
@mounted='mounted'
@unmount='unmount'
@error='error'
></micro-app>
</template>
<script>
export default {
methods: {
created () {
/**标签初始化后，加载资源前触发 */
console.log(`created`)
}
, beforemount () {
/**加载资源完成后，开始渲染之前触发 */
console.log(`beforemount`)
}
, mounted () {
/**子应用渲染结束后触发 */
console.log(`mounted`)
}
, unmount () {
/**子应用卸载时触发 */
console.log(`unmount`)
}
, error () {
/**子应用渲染出错时触发，只有会导致渲染终止的错误才会触发此生命周期 */
console.log(`error`)
}
}
}
</script>
子应用定义
子应用可以定义 mount，unmount 两个生命周期函数
window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
执行顺序
-
组件加载
created、beforemount、mount(child)、mounted -
组件卸载
unmount(child)、unmount -
组件异常
error
环境变量
-
window.__MICRO_APP_BASE_ROUTE__由基应用下发的路由前缀，即
<micro-app>标签的 baseroute 值，用于区分子路由 -
window.__MICRO_APP_PUBLIC_PATH__在子应用中通过获取应用地址，即
<micro-app>标签的 url 值 -
window.__MICRO_APP_NAME__在子应用中通过获取应用的 name 值，即
<micro-app>标签的name值。 -
window.__MICRO_APP_ENVIRONMENT__判断子应用是否在微前端环境中
-
window.__MICRO_APP_BASE_APPLICATION__判断应用是否为基应用，在
microApp.start()后有效
原文链接：MicroApp初步使用
