微前端小记

步骤

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

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

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

在这里插入图片描述
包括:

  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 变化。
在这里插入图片描述
观察者放到观察者池中
globalState 然后触发观察者函数,从而达到组件间通信的效果

我们在主应用中实现了登录功能,登录拿到 token 后存入 globalState 状态池中。在进入子应用时,我们使用 actions 获取 token,再使用 token 获取到用户信息,在这里插入图片描述
完成页面数据渲染!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/638116.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu安装vm和Linux

1、下载Ubuntu Index of /releaseshttps://old-releases.ubuntu.com/releases/ 2、下载VMware 官方正版VMware下载(16 pro):https://www.aliyundrive.com/s/wF66w8kW9ac 下载Linux系统镜像(阿里云盘不限速)&#xff…

node.js如何将webp转jpg图片

在Node.js中,可以使用一些库来实现将WebP图像转换为JPEG。一个常用的库是sharp,它是一个快速、高效的图像处理库。以下是一个简单的Node.js脚本示例,演示如何使用sharp库将WebP转换为JPEG: 首先,确保已经安装了sharp库…

Access 中SQL的例题

SQL4-18:查找并显示教师表中所有的记录 SELECT * FROM 教师; SQL4-19:查找并显示教师表中姓名、学历和工作时间的记录 SELECT 姓名,学历,工作时间 FROM 教师; SQL4-20:查找并显示教师表中1990年参加工作的男教师, 并显示教师姓名、学历&#…

webpack 核心武器:loader 和 plugin 的使用指南(上)

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Twisted Circuit洛谷绿题题解

Twisted Circuit 题面翻译 读入四个整数 0 0 0 或者 1 1 1,作为如图所示的电路图的输入。请输出按照电路图运算后的结果。 感谢PC_DOS 提供的翻译 题目描述 输入格式 The input consists of four lines, each line containing a single digit 0 or 1. 输出格…

读书笔记之《万物起源》:宇宙与人类的极简史

《万物起源:从宇宙大爆炸到文明的兴起》讲述了从大爆炸直到今日,约140亿年间所有重大事物的起源,依次覆盖了量子力学,天体物理学,化学,行星科学,地质学,生物学和人类历史等等学科。 …

系统学英语 — 句法 — 常规句型

目录 文章目录 目录5 大基本句型复合句型主语从句宾语从句表语从句定语从句状语从句同位语从句补语从句 谓语句型 5 大基本句型 主谓:主语发出一个动作,例如:He cried.主谓宾:we study English.主系表:主语具有某些特…

08- OpenCV:形态学操作(膨胀与腐蚀 、提取水平与垂直线)

目录 前言 一、膨胀(Dilation)与 腐蚀(Erosion) 二、形态学操作 1、开操作(Opening) 2、闭操作(Closing) 3、形态学梯度(Morphological Gradient) 4、…

Spring成长之路—Spring MVC

在分享SpringMVC之前,我们先对MVC有个基本的了解。MVC(Model-View-Controller)指的是一种软件思想,它将软件分为三层:模型层、视图层、控制层 模型层即Model:负责处理具体的业务和封装实体类,我们所知的service层、poj…

5G_射频测试_参考规范(一)

参考规范: • Base Station (BS) conformance testing(重点limitation)Directory Listing /ftp/Specs/archive/38_series/38.104 (3gpp.org) • Conducted conformance testing(传导测试)3GPP 38.141-1 6.7 Tran…

跟着pink老师前端入门教程-day08

二十一、案例前期铺垫 21.1 CSS属性书写顺序(重点) 建议遵循以下顺序: 1. 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式&#xff…

UI -- React

React 模板 React UI package.json同级components/slButton/element.jsx import React from react;const el ({ text, onClick }) > {return (<button onClick{onClick}>{text}</button>); };export default el;components/function.js export const ceshi…

LLM之RAG实战(十九)| 利用LangChain、OpenAI、ChromaDB和Streamlit构建RAG

生成式人工智能以其创造与上下文相关内容的能力彻底改变了技术&#xff0c;开创了人工智能可能性的新时代。其核心是检索增强生成&#xff08;RAG&#xff09;&#xff0c;将信息检索与LLM相结合&#xff0c;从外部文档中产生智能、知情的响应。 本文将深入研究使用ChromaDB构建…

阿里云GPU服务器ECS实例规格详细说明

阿里云GPU服务器提供GPU加速计算能力&#xff0c;GPU卡支持A100、V100、T4、P4、P100、A10等&#xff0c;NVIDIA V100&#xff0c;GPU实例规格是什么意思&#xff1f;如搭载NVIDIA V100的ecs.gn6v-c8g1.2xlarge、A10卡ecs.gn7i-c32g1.8xlarge、T4卡ecs.gn6i-c4g1.xlarge、P4卡e…

AndroidStudio

一 安卓开发环境搭建 1.1 环境介绍 # 做安卓开发&#xff0c;需要会 Java 开发&#xff0c;需要安卓 SDK &#xff0c;需要一款编辑器&#xff0c;需要软件测试环境 ( 真机&#xff0c;虚拟机 ) # 早期开发安卓 app &#xff0c;需要使用 eclipse 安卓 SDK &#xff0c;自…

三.Winform使用Webview2加载本地HTML页面

Winform使用Webview2加载本地HTML页面 往期目录创建Demo2界面创建HTML页面在Demo2窗体上添加WebView2和按钮加载HTML查看效果 往期目录 往期相关文章目录 专栏目录 创建Demo2界面 经过前面两小节 一.Winform使用Webview2(Edge浏览器核心) 创建demo(Demo1)实现回车导航到指定…

三国游戏(第十四届蓝桥杯)

题目 小蓝正在玩一款游戏。游戏中魏蜀吴三个国家各自拥有一定数量的士兵 X,Y,Z&#xff08;一开始可以认为都为 0&#xff09;。 游戏有 n个可能会发生的事件&#xff0c;每个事件之间相互独立且最多只会发生一次&#xff0c;当第 i个事件发生时会分别让 X,Y,Z 增加 A i , B…

广和通AI解决方案“智”赋室外机器人迈向新天地!

大模型趋势下&#xff0c;行业机器人将具备更完善的交互与自主能力&#xff0c;逐步迈向AI 2.0时代&#xff0c;成为人工智能技术全面爆发的重要基础。随着行业智能化&#xff0c;更多机器人应用将从“室内”走向“室外”&#xff0c;承担更多高风险、高智能工作。复杂的室外环…

Java基本概念(新手入门)

目录 软件安装&#xff1a;Java初学者软件安装与idea快捷键-CSDN博客 第一节 1.java与C语言的区别 2.jdk&#xff0c;jre&#xff0c;jvm是什么&#xff0c;他们之间的关系 3. java的包package 4.Java的注释 5.第一个程序讲解与基础语法 6.一带而过 java入门第一节__…

方便又好用,必须吹爆这几个良心工具!

生成式人工智能已经彻底改变了各个行业。尽管使用的都是相同的大模型&#xff0c;但有的能让明星表演出“科目三”&#xff0c;而有的则能将真人变成动漫主角。 那么&#xff0c;让我们回到开发人员的视角来看&#xff0c;GenAI对日常工作会有哪些影响呢&#xff1f;虽然我们向…