唯品秀前端博客

该章节是针对前面基于微前端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}`,
    },
  },
};

更多应用

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(1) 打赏

上一篇:

下一篇:

相关推荐

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

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏