MicroApp初步使用

JavaScript
字数统计: 1.4k   |   阅读时长≈ 6 分钟

MicroApp 借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染

基应用修改

安装插件

1
npm install @micro-zoe/micro-app --save

引入依赖

1
2
3
import microApp from '@micro-zoe/micro-app'
// 可以传入一个对象进行全局配置
microApp.start()

添加组件

1
2
3
4
5
6
7
8
<template>
  <div>
    <micro-app 
    	name='child' 
        url='http://localhost:3000/' 
        baseroute='/my-page'></micro-app>
  </div>
</template>

  • name 应用名称，每个应用的值全局唯一；必传

  • url 应用地址，可以在地址栏访问到；必传

  • baseroute 子应用的基础路由

    地址拼接方法

    1
    2
    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

1
__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ || '/'

项目入口文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 方法设置

1
2
3
4
5
6
7
8
9
10
/** 子应用列表 */
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 属性设置全局共享资源，子应用加载相同地址的资源时，会直接从缓存中读取数据

    1
    2
    3
    4
    /** 静态资源列表 */
    const assets = { js: ['/static/js/vendor.dll.js'], css: [] }

    microApp.start({ globalAssets: assets })

    通过在打包后的 link、script 标签上设置 global 属性，micro-app 会在第一次加载该文件后放入公共缓存，其他应用加载相同地址的资源时，会直接从缓存中读取数据

    1
    2
    <link rel="stylesheet" href="xx.css" global>
    <script src="xx.js" global></script>

  • 资源过滤 exclude

    通过在打包后的 link、script、style 标签上设置 exclude 属性过滤这些资源加载，micro-app 会删除带有 exclude 属性的元素；和资源共享搭配使用提升子应用的渲染速度

    1
    2
    3
    <link rel="stylesheet" href="xx.css" exclude>
    <script src="xx.js" exclude></script>
    <style exclude></style>

组件通信

基应用向子应用传递

基应用通过 data 属性向子应用传递数据，子应用通过 window.microApp.addDataListener 添加数据监听方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!--基应用文件-->
<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 事件接收子应用抛出的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--基应用文件-->
<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 五个生命周期函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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 两个生命周期函数

1
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() 后有效

  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！

扫一扫，分享到微信

微信分享二维码

~