基座API

该基座API主要是提供给子应用去集成使用。

1. 安装和使用

$ pnpm add @mfejs/mfapp-bay

初始化和子应用挂载(Vue2 为例)

import Vue from 'vue';
import Bay from '@mfejs/mfapp-bay';

import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

Vue.use(Bay); // 注册插件

let instance: Vue;

Bay.createMicroApp({
  /**
   * 启动时被调用。全局只会调用一次。
   */
  async bootstrap(props) {
    console.log('bootstrap', props);
  },

  /**
   * 挂载, 会调用多次。
   */
  async mount(container, props) {
    console.log('mount', props);

    instance = new Vue({
      router,
      store,
      render: h => h(App),
    });

    instance.$mount(container?.querySelector('#app') || '#app');
  },

  /**
   *  卸载
   */
  async unmount(props: any) {
    console.log('unmount', props);

    if (instance) {
      instance.$destroy();
    }
  },

  /**
   * props 更新，可选
   */
  async update(props: any) {
    console.log('update', props);
  },
});

2. 组件

3. API

eventBus

基座暴露了 eventBus 对象，可以用于子应用之间的通信。

import bay from '@mfejs/mfapp-bay';

bay.eventBus.on('some-event', () => {
  // 事件处理
});

基座

• createMicroApp(options): void 创建子应用

export interface MicroAppOptions<Props = {}> {
  /**
   * 应用启动逻辑
   */
  bootstrap?: (props: Props) => Promise<void>;

  /**
   * 应用挂载
   */
  mount: (container: HTMLElement | undefined, props: Props) => Promise<void>;

  /**
   * 应用更新
   */
  update?: (props: Props) => Promise<void>;

  /**
   * 应用卸载
   */
  unmount: (props: Props) => Promise<void>;
}

• isMicroApp: boolean 是否为微前端模式。如果你的应用需要支持在微前端基座之外对渲染，可以用这个变量进行判断
• getMicroApp(): MicroApp | undefined 获取子应用描述信息
• getBayBaseUrl(): string | undefined 获取基座的 baseUrl
• getActiveRule(): string | string[] | undefined 获取当前子应用的 activeRule
• addExcludeAssetFilter(filter: string | Regexp | ((src: string) => boolean) ): void 指定部分资源绕过 qiankun 的沙箱，直接在基座加载。
• addGlobalVariable(name: string, value: any): void; 添加变量到真实的 window 对象上，绕开沙箱，注意：只能在必要的场景使用，后果自负
• deleteGlobalVariable(name: string): void 删除真实的 window 对象上的变量，绕开沙箱，注意：只能在必要的场景使用，后果自负