首页 > 其他分享 >前端微应用框架(qiankun)调研

前端微应用框架(qiankun)调研

时间:2023-09-04 20:24:53浏览次数:34  
标签:console 框架 前端 qiankun window 应用 props app

一、安装

1、主应用安装qiankun(子应用只做代码配置,无需任何安装)

yarn add qiankun # 或者 npm i qiankun -S

 

二、关键参数介绍

1、主应用注册微应用

import { registerMicroApps, start, setDefaultMountApp,  loadMicroApp  } from 'qiankun';

registerMicroApps(apps, lifeCycles?) 是qiankun框架的一个方法,用于注册微前端应用,apps树数组,元素是对象,每个元素即为一个子应用的注册信息,lifeCycles是生命周期钩子
//apps元素属性介绍

name: 必选项,当前应用的名称,也就是微应用的名称。
entry: 必选项,微应用的入口,可以是URL链接,也可以是一个fetch函数,用于获取应用静态资源。
container: 必选项,微应用渲染的节点,也就是挂载点。
activeRule: 必选项,激活微应用的规则,可以是字符串、函数或者Array。如地址路径。
props: 非必选项,主应用传递给微应用的数据,也就是传递的参数。
loader: 自定义的加载函数,可以用来监听微应用的加载情况。
rewriteRule: Optional<Function> 当不需要微应用隔离(常见于微应用为同域的legacy系统、无法修改window路由等打开方式)时,可以借助此函数路由重写,规避 qiankun 改写 url 导致的路由处理问题。
singular: 非必选项,是否单例模式,默认为 true。
sandbox: 非必选项,为微应用配置沙箱。
mountElementId: 非必选项,确定唯一的 DOM 容器节点 id。
getTemplate: 非必选项,getTemplate 方法将在 initial 阶段调用,可用于改写 template。
render: 非必选项,更自由的 render 方法,用于自定义渲染行为。
history: 非必选项,设置微应用的 history 模式,可选browser、hash和memory。
lifeCycles: 指定微应用的生命周期钩子函数,包括 onl oad、onmount、onunmount。/

//lifeCycles介绍
  • beforeLoad: 可选项,微应用加载前的生命周期钩子,Promise。
  • beforeMount: 可选项,微应用装载前的生命周期钩子,Promise。
  • afterMount: 可选项,微应用装载后的生命周期钩子,Promise。
  • beforeUnmount: 可选项,微应用卸载前的生命周期钩子,Promise。
  • afterUnmount: 可选项,微应用卸载后的生命周期钩子,Promise。

start()启用qiankun

在js文件中可通过回调验证启用是否成功

// 启动qiankun
start().then(() => {
  console.log('qiankun启动成功');
}).catch(err => {
  console.error('qiankun启动失败', err);
});

setDefaultMountApp设置主应用启动后立即进入的微应用

import { setDefaultMountApp } from 'qiankun';
//入参为子应用的激活路由
setDefaultMountApp('/homeApp');

loadMicroApp  手动加载微应用,无需在registerMicroApps中注册

它可以在任何时候任何地方加载一个微应用。如果你需要在特定的时机启动并加载剩余的微应用 说明:不需要激活路由,loadMicroApp执行后会在当前路由立即加载子服务
// 导入loadMicroApp方法
import { loadMicroApp } from 'qiankun'

// 当你需要使用reactChild的时候,开始加载和启动它
const app = loadMicroApp(
  {
    name: 'reactChild', 
    entry: '//localhost:1111', 
    container: '#reactChild', 
  }
);

// 当你不再需要这个应用的时候,可以卸载它
app.unmount();

   

二、项目配置

1、主应用配置

main.js引入qiankun,注册子应用

import { registerMicroApps, start } from 'qiankun';
/ 微应用的信息
const apps = [
  {
    name: 'vueChild', //应用的名字
    entry: '//10.3.124.216:10200', // 应用的入口,即子应用的访问地址
    container: '#vueChild', // 容器名
    activeRule: '/vue-child', //激活的路径,即但URL成http://xxxx:'端口'/vue-child/#/时,触发加载子应用
  },
];
// 注册微应用 registerMicroApps第二个参数配置钩子函数
registerMicroApps(apps,{
  beforeLoad: [
    app => {
      console.log('beforeLoad')
      console.log(app)
    },
  ],
  beforeMount: [
    app => {
      console.log('beforeMount')
   },
  ],
  afterUnmount: [
    app => {
      console.log('afterUnmount')
    },
  ],
}); 

// 启动qiankun,也可传参,参考qiankun1——参数介绍
start()

2、设置子应用的容器

即在主应用页面提供一个插入子应用的dom节点,节点id与注册时的container值相同

<div id="app">
  <nav>
    <router-link to="/home" @click="type = ''">Home</router-link> |
    <router-link to="/vue-child/" @click="type = 'vue-child'">About</router-link>
  </nav>
  <!-- 子应用容器,子应用挂载之前要有,不然挂载失败。id值要与注册时属性container的值相同-->
  <div id="vueChild"></div>
  <!--    页面视口,用于显示主应用的内容,跟子应用没关系-->
  <router-view ></router-view>
</div>

3、子应用配置

1、在src 目录新增public-path.js
if (window.__POWERED_BY_QIANKUN__) {  
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}


2、main.js引入public-path.js


3、配置main.js
let instance = null
function render(props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')//为了避免根 id 
#app 与其他的 DOM 冲突,需要限制查找范围。
}// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap() {
  console.log('vue app bootstraped')
}
export async function mount(props) {
  render(props)
}
export async function unmount() {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
}

4、修改webpack的打包配置
//1、处理跨域
devServer: {
  // 监听端口
  port: 10200,
  // 配置跨域请求头,解决开发环境的跨域问题
  headers: {
    "Access-Control-Allow-Origin": "*",
  },
},
chainWebpack: (config) => {
    //配置打包
  config.output.library('vueChild').libraryTarget('umd')
},

  

三、子父应用通信

1、初始加载时通信
//主应用
//注册子应用时,参数通过props传递,可传递参数和回调函数
const apps = [
  {
    name: 'vueChild', //应用的名字
    entry: '//localhost:10200', // 应用的入口
    container: '#vueChild', // 容器名
    activeRule: '/vue-child', //激活的路径,即但URL成http://xxxx:'端口'/vue-child/#/时,触发加载子应用
    props: {
      message: 'Hello from main app!',
      callback: (data) => {
        console.log('Data received from subApp-1:', data);
      },
    },
  },
  
  //子应用
  //在钩子函数中接收
  export async function mount(props) {
      console.log('child',props)
      render(props)
      props.callback('Hello from subApp-1.');
  }

2、加载后的自定义事件传参

//使用浏览器的CustomEvent、dispatchEvent、addEventListener API进行监听
// 主应用
window.addEventListener('subAppEvent', (event) => {
  console.log('Received event from subApp:', event.detail);
});

// 子应用
const event = new CustomEvent('subAppEvent', { detail: 'Hello from subApp!' });
window.dispatchEvent(event);

3、卸载时传参

使用自定义传参方式将参数从子组件传递给父组件,只需在相应的应用钩子中触发。 4、子应用与子应用间通信  
//1、基于事件的方式进行通信
// 子应用A发送事件
window.dispatchEvent(new CustomEvent('eventName', { detail: 'payload' }))

// 子应用B监听事件
window.addEventListener('eventName', (event) => { console.log(event.detail) })


//2、利用全局变量/函数方式进行通信
//在主应用中定义全局的变量或者函数作为 "通信管道",然后在子应用中调用这些全局的变量或者函数来进行通信
// 主应用
window.globalVar = { /* 全局变量 */ }
window.globalFunc = function() { /* 全局函数 */ }

// 子应用
console.log(window.globalVar)
window.globalFunc()

//3、使用Redux、Vuex状态管理库
//4、使用缓存如:localStorage

  

 

 

 

标签:console,框架,前端,qiankun,window,应用,props,app
From: https://www.cnblogs.com/weichen913/p/17677981.html

相关文章

  • 总结流媒体服务前端的一个产品要点
    总结流媒体服务前端的一个产品要点    a.超时重连机制,当到达一定次数的时候,显示视频走丢了,请手动重试    b.视频比例的问题,当16:9的时候大于小于这个数值时会出现一定的问题    c.视频播放完毕的时候自动跳转页面    d.自动播放的问题,程......
  • avue表单组件后台拖拉拽框架avue-form-design在移动端vant框架与uniapp框架下的动态渲
    avue表单组件后台拖拉拽框架avue-form-design:https://github.com/sscfaith/avue-form-designavue表单组件后台拖拉拽框架avue-form-design在移动端vant框架与uniapp框架下的动态渲染转换适配待补充......
  • 如何让Android平台像网络摄像机一样实现GB28181前端设备接入?
    技术背景好多开发者在做国标对接的时候,首先想到的是IPC(网络摄像头),通过参数化配置,接入到国标平台,实现媒体数据的按需查看等操作。像执法记录仪等智能终端,跑在Android平台,对接GB28181平台的需求也非常大,网上相关demo也不少,但真正设计符合相关协议规范、功能完善、长时间稳定运行的并......
  • 从壹开始前后端开发【.Net6+Vue3】(二)前端框架
    项目名称:KeepGoing(继续前进)介绍工作后,学习的脚步一直停停走走,希望可以以此项目为基础,可以不断的迫使自己不断的学习以及成长将以Girvs框架为基础,从壹开始二次开发一个前后端管理框架在这过程中一步步去学习使用到的技术点,也同时会将在此过程中遇到的问题进行分享项目地址......
  • 前端小白Step2-package.json文件详解
    前文已讲过 package.json-------npm的配置文件,主要用于确定当前项目直接依赖的包版本的范围(例如:^1.0.0表示的是大于等于1.0.0小于2.0.0)只依赖package.json管理包会有两个缺点:    *.同一份package.json安装的依赖版本可能不同,如果依赖包有小版本更新并且引入了bug会导致......
  • 【校招VIP】前端JavaScript语言之跨域
    考点介绍:什么是跨域?浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。跨域是前端校招的一个重要考点,在面试过程中经常遇到,需要着重掌握。本期分享的前端算法考点之大数据相关,分为试题、文章以及视频三部分。答案详情解析和文章内容可点击下方......
  • 前端歌谣的刷题之路-第十一题-伪类选择器
     目录前言题目 核心代码总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网......
  • 前端歌谣的刷题之路-第十二题-伪元素
     目录前言题目核心代码总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网......
  • 前端面试题(文本与语音播放mpv3),上传喜马拉雅,便于随身听
    喜马拉雅播放地址(简介可看相关文字):https://www.ximalaya.com/album/77822188线上可下载文本与MP3文件:https://gitee.com/yoonaLin/FE_Interview_questions......
  • 权限框架之jcasbin讲解
    目录1jcasbin1.1前言1.2工作原理1.2.1PERM模型1.2.2Model语法1.2.2.1Request定义1.2.2.2Policy定义1.2.2.3Policyeffect定义1.2.2.4角色定义1.2.2.5匹配器1.2.2.6完整model.conf1.2.3policy.csv1.3准备1.3.1mavan依赖1.3.2配置文件1.2.3读取权限信息进行初始化1.......