在上一篇章中，我们介绍了micro-app提供的一部分功能，接下来继续介绍提供的剩余功能。

预加载

通常来说，micro-app只有用户在访问对应的子应用时，才会加载渲染资源，并且子应用的资源通常都是较为庞大的，这样就导致首屏渲染时间长，用户体验较差。

micro-app提供了预加载功能，当浏览器空闲时，就可加载尚未渲染的应用资源并缓存，这样就可以降低首屏渲染时间，提升用户体验。

可通过 microApp.preFetch(Array<app>|Function=>Array<app>)实现，使用方式如下：

import microApp from '@micro-zoe/micro-app'

// 方式一
microApp.preFetch([
  { name: 'my-app', url: 'xxx' }
])

// 方式二
microApp.preFetch(() => [
  { name: 'my-app', url: 'xxx' }
])

// 方式三
microApp.start({
  preFetchApps: [
    { name: 'my-app', url: 'xxx' }
  ],
  // 函数类型
  // preFetchApps: () => [
  //   { name: 'my-app', url: 'xxx' }
  // ],
})

keep-alive

默认情况下，micro-app在切换应用时，会进行销毁。如果我们想要保留应用的状态以及提升重复渲染的性能，可以开启 keep-alive 达到这样的效果。

基本使用

具体使用如下所示：

<template>
  <div>
    <h1>子应用1</h1>
    <micro-app 
      name='app1'
      url='http://localhost:8081/'
      @unmount="unmountHandle"
      keep-alive
    />
  </div>
</template>

<script>

export default {
  name: 'AppOne',
  data() {
    return {
    }
  },
  methods: {
    unmountHandle() {
      console.log('app1 被销毁了');
    }
  }
}
</script>

<style lang="less">

</style>

可以看到，在切换应用时，控制台并没有输出app1 被销毁了。所以可以keep-alive的应用不会被真正卸载，也不会触发 unmount 事件。

micro-app为开启keep-alive的应用提供了三个新的生命周期函数，用来供用户回调。

<template>
  <div>
    <h1>子应用1</h1>
    <micro-app 
      name='app1'
      url='http://localhost:8081/'
      @afterhidden="afterhidden"
      @beforeshow="beforeshow"
      @aftershow="aftershow"
      keep-alive
    />
  </div>
</template>

<script>

export default {
  name: 'AppOne',
  data() {
    return {
    }
  },
  methods: {
    unmountHandle() {
      console.log('app1 被销毁了');
    },
    afterhidden() {
      console.log('已卸载');
    },
    beforeshow () {
      console.log('即将重新渲染，初始化时不执行');
    },
    aftershow () {
      console.log('已经重新渲染，初始化时不执行');
    },
  }
}
</script>

<style lang="less">

</style>

第一次渲染 app-1

切换应用，触发 afterhidden 函数

再次渲染 app-1

子应用

keep-alive模式下，在子应用卸载、重新渲染时，micro-app都会向子应用发送名为appstate-change的自定义事件，子应用可以通过监听该事件获取当前状态，状态值可以通过事件对象属性e.detail.appState获取。

// micro-app-1/main.js

// 监听keep-alive模式下的应用状态
window.addEventListener('appstate-change', function (e) {
  if (e.detail.appState === 'afterhidden') {
    console.log('app1 已卸载')
  } else if (e.detail.appState === 'beforeshow') {
    console.log('app1 即将重新渲染')
  } else if (e.detail.appState === 'aftershow') {
    console.log('app1 已经重新渲染')
  }
});

路由

路由配置

路由类型约束

1、基座是hash路由，子应用也必须是hash路由
2、基座是history路由，子应用可以是hash或history路由

基础路由

通常基座应用和子应用各有一套路由系统，为了防止冲突，基座需要分配一个路由给子应用，称之为基础路由，子应用可以在这个路由下渲染，但不能超出这个路由的范围，这就是基础路由的作用。

基座应用中通过设置 <micro-app>的baseroute属性下发，子应用通过window.__MICRO_APP_BASE_ROUTE__获取此值并设置基础路由。

可参考如下更多内容

应用跳转

每个应用的路由实例都是不同的，应用的路由实例只能控制自身，无法影响其它应用，包括基座应用无法通过控制自身路由影响到子应用。

倘若我们在 app1 中有如下的路由配置。

正常访问页面则是通过如下方式。

如果我们想在基座中通过侧边栏去访问的话，不管是通过编程式导航还是声明式，因为路由实例不同，所以是没办法实现跳转的。

为此，micro-app提供了如下方式来进行应用跳转。

// micro-app-base/App.vue
<template>
  <div id="app">
    <section class="aside">
      <p><router-link to="one">应用一</router-link></p>
      <p class="app-item"><a @click="jump('app1', 'pageOne')">页面1</a></p>
      <p class="app-item"><a @click="jump('app1', 'pageTwo')">页面2</a></p>
      <p><router-link to="two">应用二</router-link></p> 
    </section>
    <section class="main">
      <router-view></router-view>
    </section>
  </div>
</template>

<script>

import microApp from '@micro-zoe/micro-app'

export default {
  name: 'App',
  methods: {
    jump(appName, path) {
      microApp.setData(appName, { path });
    }
  }
}
</script>

// micro-app-1/main.js

// 监听基座下发的数据变化
window.microApp.addDataListener((data) => {
  console.log(data);
  // 当基座下发跳转指令时进行跳转
  if (data.path) {
    router.push(data.path)
  }
})

如此便完成了路由跳转功能。

总结

以上便是micro-app提供的常用功能，更多功能可参考官方文档。

下一篇文章我们将总结对比一下micro-app与iframe的异同。

micro-app 基本使用（三）

预加载