在国内做网站网站代理,angularjs做网站案例,学校网站建设建议,WordPress生成海报插件步骤
将普通的项目改造成 qiankun 主应用基座#xff0c;需要进行三步操作#xff1a;
1. 创建微应用容器 - 用于承载微应用#xff0c;渲染显示微应用#xff1b; a. 设置路由routeb.主应用的布局包括#xff1a;
主应用菜单#xff0c;用于渲染菜单主应用渲染区域需要进行三步操作
1. 创建微应用容器 - 用于承载微应用渲染显示微应用 a. 设置路由routeb.主应用的布局包括
主应用菜单用于渲染菜单主应用渲染区域在触发主应用路由规则时候$route.name, 将渲染主应用的组件微应用渲染区。在未触发主应用路由规则时
2. 注册微应用 - 设置微应用激活条件微应用地址等等
在构建好了主框架后我们需要使用 qiankun 的 registerMicroApps 方法注册微应用代码实现如下
3. 配置微应用
bootstrap mount unmount
启动 qiankun
通信方式
第一种是 qiankun 官方提供的通信方式 - Actions 通信适合业务划分清晰比较简单的微前端应用一般来说使用第一种方案就可以满足大部分的应用场景需求。 第二种是基于 redux 实现的通信方式 - Shared 通信适合需要跟踪通信状态子应用具备独立运行能力较为复杂的微前端应用。
Actions 通信 原理
qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信该实例有三个方法分别是
setGlobalState设置 globalState - 设置新的值时内部将执行 浅检查如果检查到 globalState 发生改变则触发通知通知到所有的 观察者 函数。 onGlobalStateChange注册 观察者 函数 - 响应 globalState 变化在 globalState 发生改变时触发该 观察者 函数。 offGlobalStateChange取消 观察者 函数 - 该实例不再响应 globalState 变化。 观察者放到观察者池中 globalState 然后触发观察者函数从而达到组件间通信的效果
我们在主应用中实现了登录功能登录拿到 token 后存入 globalState 状态池中。在进入子应用时我们使用 actions 获取 token再使用 token 获取到用户信息 完成页面数据渲染
