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初步使用