qiankun 实现父子应用通信

崽崽的谷雨

已于 2024-05-29 15:29:20 修改

阅读量473

点赞数 3

分类专栏：前端文章标签：前端微前端

于 2024-05-17 11:22:14 首次发布

本文链接：https://blog.csdn.net/weixin_44058725/article/details/138998513

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

前言：

最近有一个项目在实现微前端，把几个独立的项目集成一个项目里，选择了qiankun技术栈。
qinakun 官网使用指南

使用时遇到了主应用（父），子应用之间需要传递消息。特此记录一下。

实现过程：

我找了一下，实现通信的方式挺多的 props、第三方库比如 vuex\redux等等、官方提供的 initGlobalState 、本地存储（sessionStorage\localStorage）。其他通信方式可参考:
微前端：qiankun的五种通信方式
如果简单的通信可以用本地存储实现这个很快。

我选择了官方提供的 initGlobalStat API，原因是我需要接入 4个子系统，不能每个都用第三方库。实际上 initGlobalState 也是借助了 props实现。

initGlobalState 文档

在主应用里的入口文件或者注册微应用的文件里写上：

import { initGlobalState } from 'qiankun';

let state={
  message:"123"
}
// 初始化 state
const actions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);
//actions.offGlobalStateChange();

需要注意的是把 actions.offGlobalStateChange(); 这行注释掉。否则无法完成通信。

子应用里需要从生命周期 mount 中获取通信方法。这个生命周期需要写在入口文件（一般是 app.js\main.js\index.js等等）。

因为我的子应用里没有入口文件所以需要在src下新建一个 app.js。然后写上：

export const qiankun = {

  // 应用加载之前
  async bootstrap(props) {
    console.log('子应用初始化1', props);
  },

  // 应用 render 之前触发
  async mount(props) {
    if(props){ //把 qiankun 的props 挂载到全局变量
      window.qiankunProps=props;
    }
  },

  // 应用卸载之后触发
  async unmount(props) {
    console.log('子应用已卸载1', props);
  },
};

在这里插入图片描述

umi qiankun 子应用配置生命周期钩子
上面的写法是 umi框架的写法，因为我的项目基于umi所以用的是上面这种写法。

其他框架就可以按照官方文档写：

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  if(props){ //把 qiankun 的props 挂载到全局变量
      window.qiankunProps=props;
    }
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
 
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

具体参考：qiankun微应用导出相应的生命周期钩子

qiankunProps需要全局使用，我选择挂载到window上，如果你是vue的话可以直接挂载到 vue实例上。Vue.$qinakun=xxx。

然后在其他页面就可以使用window?.qiankunProps?.setGlobalState发送消息：

 window?.qiankunProps?.setGlobalState({
   message:"子应用发送的消息"
 })

如果你有入口文件，则可以直接在入口文件里写上声明周期方法，不需要新建文件了。不过新建一个文件在入口文件引入执行也可以（分模块看起来更清晰）。

如何验证是否通信成功了?

只需要看控制台主应用里 onGlobalStateChange 里打印的结果即可默认会打印一下默认值。触发setGlobalState 后会再次打印，打印的值是传入的值，即通信成功。
在这里插入图片描述

遇到的问题：

本地启动子应用可以，通信，生命周期都走了。但子应用一打包生命周期就不运行了。

需要子应用打包时的webpack配置一下：
webpack:
webpack v5:



const packageName = require('./package.json').name;

module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    chunkLoadingGlobal: `webpackJsonp_${packageName}`,
  },
};

webpack v4:

const packageName = require('./package.json').name;

module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
};