window.__POWERED_BY_QIANKUN__

简介: window.__POWERED_BY_QIANKUN__

这样一个问题,采用微前端基座模式下,基座去管理所有子应用。子应用必须在基座访问才可显示菜单,单独访问的情况下直接空白

如果是通过缓存状态判断肯定是不安全的

如此我们这里聊一下window.POWERED_BY_QIANKUN

qiankun其中一个注入的全局变量是 window.POWERED_BY_QIANKUN。这个变量是一个布尔类型的值,用于指示当前应用程序是否在 qiankun 容器中运行

const isPoweredByQiankun = window.__POWERED_BY_QIANKUN__;

if (isPoweredByQiankun) {
   
  // 在 Qiankun 容器中运行
  // 执行 Qiankun 提供的一些额外功能
} else {
   
  // 在普通的单独运行模式中
  // 执行应用程序自身的功能
}

子应用中通过运行 window.POWERED_BY_QIANKUN 来判断是否存在去做相关操作
为true的情况下则表示在基座容器中运行,为fasle的情况下则表示不在基座中运行

介绍
window.POWERED_BY_QIANKUN 变量是在应用程序运行时被 Qiankun 微前端框架动态注入到全局作用域中的。
在 Qiankun 框架中,主应用负责加载和启动所有微前端子应用程序。当子应用程序被加载时,Qiankun 框架会自动将 window.POWERED_BY_QIANKUN 变量注入到子应用程序的全局作用域中。这样,在子应用程序中就可以检测到当前应用程序是否在 Qiankun 容器内运行。
在主应用程序中,window.POWERED_BY_QIANKUN 变量是在主应用程序启动时由 Qiankun 框架动态注入到全局作用域中的。这个变量可以用来判断主应用程序是否运行在 Qiankun 容器中。
总之,window.POWERED_BY_QIANKUN 变量是在 Qiankun 微前端框架加载和运行过程中动态注入到全局作用域中的

如果在浏览器控制台中直接输入 window.POWERED_BY_QIANKUN,那么输出的结果应该是 undefined。因为在这种情况下,控制台只是简单地访问全局变量,而并没有执行任何代码来触发 Qiankun 微前端框架对变量的注入操作

如果要测试应用程序是否在 Qiankun 容器中运行,您可以在应用程序的代码中使用 console.log(window.POWERED_BY_QIANKUN) 来输出变量值,或者在控制台中输入 console.log(window.POWERED_BY_QIANKUN)。这样可以确保在应用程序运行时,变量已被正确注入到全局作用域中,并且输出结果也更易于理解和分析

相关文章
|
前端开发 JavaScript Java
基于qiankun的微前端最佳实践 -(同时加载多个微应用)
基于qiankun的微前端最佳实践 -(同时加载多个微应用)
4884 0
基于qiankun的微前端最佳实践 -(同时加载多个微应用)
|
9月前
乾坤子应用配置(vue3+vite)
乾坤子应用配置(vue3+vite)
673 0
|
6月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
164 0
|
JavaScript 前端开发 编译器
vue 代码高亮 prismjs 或 highlight.js插件的用法
vue 代码高亮 prismjs 或 highlight.js插件的用法
631 0
|
6月前
|
JavaScript 前端开发
在Vue3+ElementPlus项目中实现一个简单的新增/移除行记录的小组件
在Vue 3和Element Plus项目中创建一个支持新增和移除行记录的简单表格组件。
404 0
|
前端开发 JavaScript
微前端使用qiankun实现,react主应用同时兼顾react,vue3,umi子应用
微前端使用qiankun实现,react主应用同时兼顾react,vue3,umi子应用
798 0
|
JSON 运维 前端开发
分享 10个我常逛的国外技术社区,真的受益匪浅!
国内技术博客满足不了你?那来看看这些吧!
3623 0
分享 10个我常逛的国外技术社区,真的受益匪浅!
|
9月前
|
移动开发 JavaScript 小程序
uniapp中间加号点击弹窗怎么实现?完整教程
uniapp中间加号点击弹窗怎么实现?完整教程
668 1
|
缓存 资源调度 前端开发
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
1530 0
|
8月前
|
JavaScript 前端开发 搜索推荐
ECharts词云图(案例一)+配置项详解
ECharts,百度的JavaScript图表库,支持词云图(自5.0版起),借助`echarts-wordcloud`插件。配置词云图涉及`tooltip`(如显示、颜色、边框等)和`series`(类型、形状、大小范围等)。示例代码展示了如何在HTML中引入依赖并配置词云图,包括数据、形状、大小、颜色等。完整代码和依赖可下载。调整这些配置可创建个性化词云图。参阅官方文档获取不同版本详情。
1468 4
 ECharts词云图(案例一)+配置项详解

热门文章

最新文章