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