微前端框架micro-app基础使用示例

感觉微前端一直在身边萦绕，但没有动过手去玩过，最近做的一个项目，它比较庞大，模块也多，但最后又要汇集在一起，这不妥妥微前端使用场景，然而，然而架构师大佬已经接手了，我这等小弟领不到这活，所以就一直躺着没自己上手领会过微前端。昨天掘金上看了看微前端的框架，都比较推qiankun和micro-app，然后说micro-app比较简单一点，那试试吧，反正摸鱼也是摸，那就玩一玩。

因为我开发得项目使用vue比较多，对vue更熟悉一点，所以我的这个示例中，主系统和子系统都是vue3+vite，但其实不限制框架的哈。

ok，开干了，一起走进micro-app的demo体验之旅。

相关的示例代码我放到github仓库啦，感兴趣的可以拉下来跑跑【地址：https://github.com/lishengqin/micro-app-front】。

1. 第一步，创建2个vue3+vite项目

创建【main-vue3-app】主系统，以及【child-vue3-app】子系统。

 然后就是安装 vue-router、sass依赖，里面代码敲敲敲，再把主、子系统跑起来。

ps：

主系统访问ip端口：http://127.0.0.1:1111/

子系统访问ip端口：http://127.0.0.1:2222/child-vue3/

                

                     

 好，第一步把这个基石打好了，那我们的预期，就是希望点击主系统中的左侧的【子系统路由】，然后右侧会出现子系统路由对应vue页面编写的内容。

那我们继续往下走。

2. 第二步，捣鼓捣鼓主应用

2.1 安装【@micro-zoe/micro-app】依赖

主系统开始要搞事情了，那首先我们就得安装【@micro-zoe/micro-app】这个依赖呀。

安装完这个依赖后，我们需要做以下操作：

1. 主系统中写一个页面，里面用【micro-app】组件来渲染子应用

2. 主系统中路由需要配置上面的页面，path后面记得加个/:page*，因为子系统有很多个路由呀，path都不同。

 好，我们点一下主系统中左侧的子系统菜单，看看右侧的内容展示啥子。

 哦豁哦豁哦豁，子系统的内容没有渲染出来呀！

欧欧欧，骚瑞骚瑞，主系统的main入口文件还有一波操作忘记搞了。

 好啦，改好了，我们再来点击主系统的路由，看看子系统内容渲染成功没。

 哦豁哦豁哦豁，我直接报警了，这怎么更惨呀，直接白屏报错，实例么得了。

【大腿一拍】艾玛，这一直搞主系统，忘记子系统了，子系统也得调整调整，怎么调整呢？创建vue项目，入口文件有个挂在实例记得吧，然后都是挂在#app这个dom上面，哎，问题来了。你想呀，主系统也是#app，子系统也是#app，甚至后面还有更多个子系统，你这都是#app，我分不出来呀，玩不动呀，所以，子系统的挂载dom修改一下id的名称，保证唯一性。

 

 一顿操作之后，白屏解决了，但是子系统的内容还是没有渲染出来，不过看dom节点，嘿嘿，子系统中的根节点“child-vue3-app”已经有了，很好很好，成功就在眼前。那现在的意思就是说，子系统已经渲染了，只是根据目前的这个访问地址，在子系统中找不到对应的路由来渲染它，所以空白。

对啊，当前的地址栏中的hash是“/vue3MicroApp/one”，但是我们子系统中的路由的path都是“/one”，“/two”，这可不就得匹配不上么，好，我火速修改一下子系统中的路由文件。

 ！！！兄弟姐妹们！出来了！子系统页面渲染出来了！！！鞭炮齐鸣，路鼓喧天，今天是个好日子！

最基本的雏形已经出来了。

咦？我切换子系统的one路由和two路由时候，地址栏的hash变了，但是页面内容没有变化。ok，我们开始第三步了

 

3. 第三步，主应用与子应用的互相数据通信

3.1. 主应用向子应用发送消息—— 通过EventCenterForMicroApp 

 首先主应用需要创建EventCenterForMicroApp对象

// @ts-ignore 因为vite子应用关闭了沙箱，我们需要为子应用appname-vite创建EventCenterForMicroApp对象来实现数据通信
// 这个name 就是 <micro-app :name="name" /> 上的name值
import {  EventCenterForMicroApp } from '@micro-zoe/micro-app';

window.eventCenterForAppNameVite = new EventCenterForMicroApp(name);

然后发送消息

import microZoeApp  from '@micro-zoe/micro-app';

// ！！！切记，只能传object信息
microZoeApp.setData(name, { path: route.path });

3.2. 子应用接收主应用消息——通过addDataListener

当主应用通过EventCenterForMicroApp 发送消息时，子应用可以增加事件监听，去监听主系统传来的消息

if (window.eventCenterForAppNameVite) {
    // 监听主系统下发的数据变化
    window.eventCenterForAppNameVite.addDataListener(data) => {
      console.log("子系统接受消息", data)
      router.replace({ path: data.path })
    })
  }

这样每次主系统路由从one变道two，我们都是可以知道的，这样内容也会更新。

3.3. 主应用向子应用发送消息—— 通过data属性

<micro-app :url="url" :name="name" :data="data" />

// ！！！这个data也只能是object数据
const data = ref({
      msg: '我是主系统通过data属性传给子系统的值',
})

3.4. 子应用接收主应用发送消息—— 通过getData

当主应用通过data属性向子应用传送信息时，主应用可以通过getData的方法去获取

 if (window.eventCenterForAppNameVite) {
    console.log(
      '子系统接收data属性传来的值',
      window.eventCenterForAppNameVite.getData('app-child-vue3')
    );
  }

 好，上面说了主系统向子系统传数据，子系统接收数据的方法过程，那子系统怎么给主系统传数据，主系统怎么接收呢？

3.5. 子应用向主应用发送消息—— 通过dispatch

window.eventCenterForAppNameVite.dispatch({
    from: '来自子系统的消息哦',
    msg: '子应用发送的数据',
  });

3.5. 主应用接收子应用消息—— 通过datachange

 <micro-app :url="url" :name="name" :data="data" @datachange="dataChange" />

const dataChange = v => {

  console.log(v);

};

好啦，micro-app基础使用示例的说明就说完啦，相关的示例代码我放到github仓库啦，感兴趣的可以拉下来跑跑【地址：https://github.com/lishengqin/micro-app-front】。