One post tagged with "qiankun"

/**
 * 乾坤配置 加载微应用数据
 * @returns 
 */
export function qiankun() {
  const config: QiankunConfigType & { master: { prefetch: boolean } } = {
    master: {
      apps: [],
      prefetch: false,//这里实际是有用的
    },
  }

  fetchAppData().then((res) => {
    if (res.data) {
      const microData = res.data;
      microData.map((item: AppAPI.AppItemType) => {
        config.master.apps.push({
          name: item.number,
          entry: item.url || '',
        })
      })
    }
  })

  return config;
}

/**
 * const { micro,kp } = useModel('@@qiankunStateForSlave');
 * 父子应用通信 该函数的返回值将传递给子应用
 * @returns 
 */
export function useQiankunStateForSlave() {
  //API函数
  const [api, setApi] = useState({
    ...microUtil
  })

  //响应式API
  const [respApi, setRespApi] = useState({})

  //响应式数据
  const [state, doSetState]: UseStateType<MicroGlobalStateType> = useState({
    callback: {}
  })

  //回调函数
  kpSetCallback({ useEffect, state });

  // 实际给子应用调用修改state的方法  
  // 传参和实现可以自定义，子应用直接调用setState是不生效的，所以才需要这个额外的方法，这是一个坑  
  const setState = (state: any) => {
    doSetState(state)
  }

  return {
    micro: { api, respApi, state, setState },
    kp: { setApi, setRespApi, doSetState }
  }
}

const element = React.useMemo(() => {
    let cachedElement = getCachedElement(url);

    if (cachedElement) {
      return cachedElement;
    }

    cachedElement = <MicroApp
      settings={settings}
      wrapperClassName={cns('microContainer')}
      name={name}
      url={url}
      autoCaptureError
      autoSetLoading
      loader={loaderHadler}
      errorBoundary={ErrorComponent}
      {...microData}
      loadingState
      base={base}
      pageContext={pageContext}
    />
    saveElement(url, cachedElement);

    return cachedElement;
  }, [name, url, microData.data.userLayout.component]);

const microList = [
  {
    name: 'app1',
    entry: '//localhost:5556',
  },
];

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

//qiankun  fun state
  const { kp } = useModel('@@qiankunStateForSlave');
  //set函数
  const { doSetState, setRespApi } = kp;

  //简单数据
  const microData = kpGetMicroData(initialState!, name, component);
  //响应式函数
  const respApi = kpGetMicroRespApi(setInitialState);

  useEffect(() => {
    //追加响应式数据
    kpSetMicroState({ doSetState, initialState, antdToken });

    //追加响应式函数
    setRespApi((pre: any) => ({
      ...pre,
      ...respApi,
    }))
  }, [initialState!.currentUser!, antdToken])

/**
 * 加载
 */
export async function mount(props) {
    //1.存储props为全局方便其他地方使用
    await store.dispatch('micro/setMicroProps', props);

    //事件
    const onSettingsChange = (settings) => {
        console.log('onSettingsChange settings', settings)
    }

    const onCurrentUserChange = (currentUser) => {
        console.log('onCurrentUserChange currentUser', currentUser)
    }

    const onAntdTokenChange = (antdToken) => {
        console.log('onAntdTokenChange antdToken', antdToken)
    }

    //2.设置回调函数
    props.micro.setState((pre) => ({
        ...pre,
        callback: {
            onSettingsChange,
            onCurrentUserChange,
            onAntdTokenChange,
        }
    }))

    //3.渲染目标页面
    render(props);

    //4.关闭加载动画
    props.setLoading(false)
}

function render(props = {}) {
    if (window.__POWERED_BY_QIANKUN__ && props.data.userLayout.component) {
        const component = props.data.userLayout.component;
        let path = component.replace('@/', './');
        import(path + '/index.vue').then((module) => {
            const container = module.default;
            instance = createApp(MicroLayout);

            instance
                .use(store)
                .use(Antd)
                .use(Print)
                .mount(props.container ? props.container.querySelector('#root') : '#root');
        }).catch((error) => {
            console.error('Failed to load component:', error);
        });
    } else {
        instance = createApp(App);
        instance
            .use(store)
            .use(router)
            .use(Antd)
            .use(Print)
            .mount(props.container ? props.container.querySelector('#root') : '#root');
    }
}

 <a-drawer :get-container="$el" 
    :title="title"
    :width="720"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >...<a-drawer/>