微前端小记

步骤

将普通的项目改造成 qiankun 主应用基座,需要进行三步操作:

1. 创建微应用容器 - 用于承载微应用,渲染显示微应用;

	a. 设置路由route
	b.主应用的布局

微前端小记_第1张图片
包括:

  1. 主应用菜单,用于渲染菜单
  2. 主应用渲染区域,在触发主应用路由规则时候,$route.name, 将渲染主应用的组件
  3. 微应用渲染区。在未触发主应用路由规则时

2. 注册微应用 - 设置微应用激活条件,微应用地址等等;

在构建好了主框架后,我们需要使用 qiankun 的 registerMicroApps 方法注册微应用,代码实现如下:

3. 配置微应用

bootstrap
mount
unmount

  1. 启动 qiankun;

通信方式

第一种是 qiankun 官方提供的通信方式 - Actions 通信,适合业务划分清晰,比较简单的微前端应用,一般来说使用第一种方案就可以满足大部分的应用场景需求。
第二种是基于 redux 实现的通信方式 - Shared 通信,适合需要跟踪通信状态,子应用具备独立运行能力,较为复杂的微前端应用。

Actions 通信
原理

qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信,该实例有三个方法,分别是:

setGlobalState:设置 globalState - 设置新的值时,内部将执行 浅检查,如果检查到 globalState 发生改变则触发通知,通知到所有的 观察者 函数。
onGlobalStateChange:注册 观察者 函数 - 响应 globalState 变化,在 globalState 发生改变时触发该 观察者 函数。
offGlobalStateChange:取消 观察者 函数 - 该实例不再响应 globalState 变化。
微前端小记_第2张图片
观察者放到观察者池中
globalState 然后触发观察者函数,从而达到组件间通信的效果

我们在主应用中实现了登录功能,登录拿到 token 后存入 globalState 状态池中。在进入子应用时,我们使用 actions 获取 token,再使用 token 获取到用户信息,微前端小记_第3张图片
完成页面数据渲染!

你可能感兴趣的:(前端)