基于微前端qiankun的父子应用通信实战（番外篇）

作者：管理员 2022-08-30 15:34:14 分类：别出心裁-妙阅读（2961） 0

该章节是针对前面基于微前端qiankun的父子应用通信实战（下篇）文章进行补充，情景再现，1、假设有时候我们交互方式需求很简单，就是在进子应用时候把当前的主应用某些信息传递给子应用，再无其他操作，这个时候能不能有更简洁的处理方式？2、不同的框架项目该如何接入？

通过props简单父子通信

主应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# main.js
import { registerMicroApps, start } from 'qiankun' //新增部分，导入qiankun中的两个方法
const apps = [
{
name: 'vite2_vue3', //子应用的名称
entry: '//localhost:3000',//子应用的域名
container: '#vueContainer',//承载子应用的容器，在上面App.vue中定义
activeRule: '/vueChild', // 被激活的子应用的路由
props: {
msg: '往子应用传递msg'
}
}
]
registerMicroApps(apps);//注册子应用
start();//启动qiankun

子应用

1
2
3
4
5
6
7
8
9
10
11
12
13

# main.js
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
renderWithQiankun({
mount(props) {
console.log('接收主应用传来的msg', props);
},
bootstrap() {
// bootstrap没参数只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子
},
unmount(props: any) {
// 应用每次切出/卸载会调用的方法，通常在这里我们会卸载微应用的应用实例
},
});

如何接入vue2及其他类型子应用？

微应用分为有 webpack 构建和无 webpack 构建项目，有 webpack 的微应用（主要是指 Vue、React、Angular）需要做的事情有：

1、新增 public-path.js 文件，用于修改运行时的 publicPath。什么是运行时的 publicPath ？注意：运行时的 publicPath 和构建时的 publicPath 是不同的，两者不能等价替代。
2、微应用建议使用 history 模式的路由，需要设置路由 base，值和它的 activeRule 是一样的。
3、在入口文件最顶部引入 public-path.js，修改并导出三个生命周期函数。
4、修改 webpack 打包，允许开发环境跨域和 umd 打包。

主要的修改就是以上四个，可能会根据项目的不同情况而改变。例如，你的项目是 index.html 和其他的所有文件分开部署的，说明你们已经将构建时的 publicPath 设置为了完整路径，则不用修改运行时的 publicPath （第一步操作可省）。

无 webpack构建的微应用直接将 lifecycles 挂载到 window 上即可。

下面以vue2子应用接入为例

在src目录新增public-path.js，内容如下，直接复制

1
2
3

if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

修改子应用main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import './public-path'; // 重点，这里一定要在最上面引入
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
const { container } = props;
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
mode: 'history',
routes,
});

instance = new Vue({
router,
store,
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
}

export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
render(props);
}
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
router = null;
}

打包配置修改

下面这两项配置直接复制粘贴，除特殊情况基本不需要动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const { name } = require('./package'); // 引入当前子应用的package.json
module.exports = {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${name}`,
},
},
};

基于微前端qiankun的父子应用通信实战（番外篇）

通过props简单父子通信

主应用

子应用

如何接入vue2及其他类型子应用？

下面以vue2子应用接入为例

修改子应用main.js

打包配置修改

更多应用

相关推荐

共 0 条评论关于"基于微前端qiankun的父子应用通信实战（番外篇）"

点击取消