[d1n910]2020年，根据官方文件的使用和学习记录-API说明

正常操作，正常分析，你好，我是d1n910

以下内容基本上是手工制作的学习笔记，因此大部分内容都与

完全相同的

相同

其中会有不间断的自己理解～

建议直接去看  qiankun 官方文档✅

加油加油

【qiankun官方文档学习进度 2/3】

API说明（资深调用API机器人蛋糕兴奋起来了）

qiankun的 API 目前是分三种类型的

类型A：基于路由配置微应用要用到的 API；

  • registerMicroApps(app, lifeCycles?)

  • start(opts?)

  • setDefaultMountApp(appLink)

  • runAfterFirstMounted(effect)

类型B：手动加载微应用要用到的 API；

  • loadMicroApp(app, configuration?)

  • prefetchApps(app, importEntryOpts?)

类型C：全局（全部微应用）能够同时用到的API。

  • addErrorHandler/removeErrorHandler

  • addGlobalUncaoughtErrorHandler(handler)

  • removeGlobalUncaughtErrorHandler(handler)

  • initGlobalState(state)

基于路由配置

适用于 route-base 场景。

通过将微应用关联到一些 url 规则的方式，当浏览器url发生变化的时候，自动加载相应的微应用。

registerMicroApps(apps, lifeCycles?)

  • 参数（这里的类型主要用的是 TypeScript 的表示 —— 说起来，我之前学的 TypeScript 没有学完）

    apps – Array<RegistrableApp> – 必选，微应用的一些注册信息

    lifeCycles – LifeCycles- 可选，全局的微应用生命周期钩子

  • 类型

    RegistrableApp

    · name – string- 必选，微应用的名称，微应用之间必须确保唯一。（页面上一般也不会有两个重复的长得一模一样的内容嘛）

    · entry – string | { scripts?: string[]; styles?: string[]; html?: string } – 必选，微应用的入口

         >>> 配置为字符串时，表示微应用的访问地址。如果微应用部署在二级目录，则最后面的 /不可省略。例如，微应用的访问地址是：

        >>> 配置为对象时，html 的值是微应用的 html 内容字符串，而不是微应用的访问地址。微应用的 publicPath 将会被设置为 /。

    · container – string | HTMLElement – 必选，微应用的容器节点的选择器或者Element实例。如 container: ‘#root’ 或 container: doument.querySelector(‘#root’)。

    · activeRule – string | (location: Location) => boolean | Array<string | (location: Location) => boolean> – 必选，微应用的激活规则。

        >>> 支持直接配置字符串或字符串数组，如 activeRule: ‘/app1’ 或 activeRule:  [‘/app1’, ‘/app2’]，当配置为字符串时会直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活。

        >>> 支持配置一个 acrive function 函数或一组 active function。函数会传入当前location 作为参数，函数返回 true 时表明当前微应用会被激活。如 location => location.pathname.startsWith(‘/app1’)。

    规则示例

    ‘/app1’

  • ‘/users/:userId/profile’

  • ‘/pathname/#/hash’

  • [‘/pathname/#/hash’, ‘/app1’]

  • 浏览器 url 发生变化会调用 activeRule 里的规则， activeRule 任意一个返回 true 时表示该微应用需要被激活。

  • loader – (loading: boolean) => void – 可选，loading 状态发生变化时会调用的方法。

  • props – object – 可选，主应用需要传递给微应用的数据。

    LifeCycles

    全局的微应用生命周期钩子的类型

    type Lifecycle = (app: RegistrableApp) => Promise<any>;

  • beforeLoad – Lifecycle | Array<Lifecycle> – 可选

  • beforeMount – Lifecycle | Array<Lifecycle> – 可选

  • afterMount – Lifecycle | Array<Lifecycle> – 可选

  • beforeUnmount – Lifecycle | Array<Lifecycle> – 可选

  • afterUnmount – Lifecycle | Array<Lifecycle> – 可选

    用法

    注册微应用的基础配置信息。当浏览器url发生变化时，会自动检查每一个微应用注册的 activeRule 规则，符合规则的应用将会被自动激活。

    示例

    import { registerMicroApps } from ‘qiankun’;

    registerMicroApps(

        [

            {

                name: ‘app1’,

                entry: ‘//localhost:8080’,

                container: ‘#container’,

                activeRule: ‘/react’,

                props: {

                      name: ‘kuitos’,

                }

            }

       ],

      {

            beforeLoad: app => console.log(‘before load’, app.name),

            beforeMount: [

                    app => console.log(‘before mount’, app.name),

            ],

      },

    );

    • start(opts?)

    参数

    opts – Options （可选）

    类型

    Options

    • prefetch – boolean | ‘all’ | string[] | ((apps: RegistrableApp[])) => { criticalAppNames: string[]; minorAppsName: string[] } – 可选，是否开启预加载，默认为 true。

      配置为 true 则会在第一个微应用 mount 完成后开始预加载其他微应用的静态资源；

      配置为 ‘all’ 则主应用 start 之后即开始预加载所有微应用静态资源；

      配置为 string[] 则会在第一个微应用 mounted 后开始加载数组内的微应用资源；

      配置为 function 则可以完全自定义应用的资源加载时机（首屏应用及次屏应用）

      • sandbox – boolean | { strictStyleIsolation?: boolean, experimentalStyleIsolation?: boolean } – 可选，是否开启沙箱，默认为 true。

        当配置为 { strictStyleIslation: true } 表示开启严格的样式隔离模式。这种模式下qiankun会为每个微应用的容器包裹上一个 shadow dom（这个相当于浏览器自带的原生组件，能够保证样式等是独立出来的）节点，从而确保微应用的样式不会对全局造成影响。

        而除此以外，qiankun 还提供了一种实验性的方式来支持样式隔离，当 experimentalStyleIsolation 被设置为 true 时，qiankun 将会通过动态改写一个特殊的选择器约束来限制css的生效范围，应用的样式会按照如下模式改写：

        // 假设应用名是 react16

        .app-main {

            font-size: 14px;

        }

        div[data-qiankun-react16] .app-main {

            font-size: 14px;

        }

        注意：@keyframes, @font-face，@impprt, @page 将不被支持(i.e.不会被改写)P.S：在目前的阶段，该功能还不支持动态的、使用<link />标签来插入外联的样式，但考虑在未来支持这部分场景。

        singular – boolean | (app: RegistrableApp<any> => Promise<boolean>); – 可选，是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 true。

        fetch – Function – 可选，自定义的 fetch 方法

        getPublicPath – (entry: Entry) => string – 可选，参数是微应用的 entry 值。

        getTemplate – (tpl:string) => string – 可选。

        excludeAssetFilter – (assetUrl: string) => boolean – 可选，指定部分特殊的动态加载的微应用资源(css/js)不被 qiankun 挟持处理。

        用法

        启动 qiankun

        示例

        import { start } from ‘qiankun’;

        start();

      setDefaultMountApp(appLink)

      参数

      appLink – string – 必选

      用法

      设置主应用启动后默认进入的微应用。

      示例

      import { setDefaultMountApp } from ‘qiankun’;

      setDefaultMountApp(‘/homeApp’);

        runAfterFirstMounted(effect)

            参数

            effect – () => void – 必选

            用法

            第一个微应用 mount 后需要调用的方法，这里可以开启一些监控或者埋点脚本。

            示例

            import { runAfterFirstMounted } from ‘qiankun’;

            runAfterFirstMounted(() => startMonitor());

手动加载微应用

适用于需要手动 加载/卸载  一个微应用的场景。

通常这种场景下微应用是一个不带路由的可独立运行的业务组件。比如是表单等等。

微应用不宜拆分过细，建议按照业务域来做拆分。业务关联紧密的功能单元应该做成一个微应用，反之关联不紧密的可以考虑拆分成多个微应用。一个判断业务关联是否紧密的标准：看这个微应用与其他微应用是否有频繁的通信需求。如果有可能说明这两个微应用本身就是服务于同一个业务场景，合并成一个微应用可能会更合适。

loadMircoApp(app, configuration?)

手动直接加载微应用。

【app】实际上就是前面registerMicroApps(apps, lifeCycles?) 的 apps类型。不需要activeRule属性。

【configuration】这个和 registerMicroApps 的 configuration 的属性是一样的。

调用这个方法会返回 MicroApp – 微应用示例。

有以下的属性：

  • mount(): Promise<null>;

  • unmount(): Promise<null>;

  • update(customProps: object): Promise<any>;

  • getStatus(): | “NOT_LOASED” | “LOADING_SOURCE_CODE” | “NOT_BOOTStrapPED” | “BOOTStrapPING” | “NOT_MOUNTED” | “MOUNTING” | “MOUNTED” | “UPDATING” | “UNMOUNTING” | “SKIP_BECAUSE_BROKEN” | “LOAD_ERROR”;

  • loadPromise: Promise<null>;

  • bootstrapPromise: Promise<null>;

  • mountPromise: Promise<null>;

  • unmountPromise: Promise<null>;

用法

手动加载一个微应用。

如果需要能支持主应用手动 update 微应用，需要微应用 entry 再多导出一个 update 钩子：

export async function mount(props) {

    renderApp(props);

}

// 增加 update 钩子以便主应用手动更新微应用

export async function update(props) {

    renderPatch(props);

}

主应用示例

import { loadMicroApp } from ‘qiankun’;

import React from ‘react’;

class App extends  React.Component {

    containerRef = React.createRef();

    microApp = null;

    // 初始化挂载

    componentDidMount() {

        this.microApp = loadMicroApp(

            {

                name: ‘app1’,

                entry: ‘//localhost:1234’, 

                container: this.containerRef.current,

                props: {

                    name: ‘qiankun’

                }

             }

        )

    }

    

    // 卸载微应用

    componentWillUnmount() {

        this.microApp.unmount();

    }

    // 更新微应用

    componentDidUpdate() {

        this.microApp.update({

            name: ‘kuitos’

        });

    }

    // React 的渲染方法

    render() {

        return <div ref={this.containerRef}></div>

    }

}

prefetchApps(apps, importEntryOpts?)

用法：手动预加载指定的微应用静态资源。仅手动加载微应用场景需要，基于路由自动激活场景直接配置 prefetch 属性即可

参数

apps – AppMetadata[] – 必选 – 预加载的应用列表

importEntryOpts – 可选 – 加载配置。

去查了源代码以后知道了，importEntryOpts 默认值为一个空对象。

– 传入为函数类型的时候，直接作为 `fetch` 使用

– fetch – `(url: string) => promise` – 可选，自定义的 fetch 方法, 用于获取远端的脚本和样式文件内容。 –  默认：浏览器 `fetch`

– getPublicPath – `(url: string) => publicPath:string` – 可选，用于获取静态资源 `publicPath`，将模板中外部资源为相对路径的，转换为绝对路径。- 默认：当前 `location.href` 为 `publicPath`。

– getDomain – `(url: string) => publicPath:string` – 可选，同 `getPublicPath` 。如果没有提供 `getPublicPath` 参数，则使用 `getDomain` ，两者都没有提供的时候，使用默认 `getPublicPath`。- 默认：无。

– getTemplate – `(html: string) => html:string` – 可选，用于在模板解析前，做一次处理。 – 默认：无处理

类型

AppMetadata

name – string – 必选 – 应用名

entry – string |  { scripts?: string[]; styles?: string[]; html?: string } – 必选，微应用的 entry 地址

示例

import { prefetchApps } from ‘qiankun’;

prefetchApps([ { name: ‘app1’, entry: ‘//locahost: 7001’ }, { name: ‘app2’, entry: ‘//localhost:7002’ } ])

addErrorHandler/removeErrorHandler

addGobalUncaughtErrorHandler(handler)

参数

handler – (…args: any[]) => void – 必选

用法

添加全局的未捕获异常处理器。

示例

import { addGlobalUncaughtErrorHanlder } from ‘qiankun’;

addGlobalUncaughtErrorHandler(event => console.log(event));

removeGobalUncaughtErrorHandler(handler)

参数

handler – (…args: any[]) => void – 必选

用法

移除全局的未捕获异常处理器。

示例

import { removeGlobalUncaughtErrorHandler } from ‘qiankun’;

removeGlobalUncaughtErrorHandler(handler);

initGlobalState(handler)

参数

state – Record<string, any> – 必选

用法

定义全局状态，并返回通信方法，建议在主应用使用，微应用通过 props 获取通信方法。

返回

MicroAppStateActions

– onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void，在当前应用监听全局状态，有变更触发 callback。

设置 fireImmediately 为 true 可以初始化后立即触发 callback

– setGlobalState: (state: Record<string, any>) => boolean，按一级属性设置全局状态，微应用中只能修改已存在的一级属性

– offGlobalStateChange: () => boolean，移除当前应用的状态监听，微应用 umount 时会默认调用

示例

主应用：

imprort { initGlobalState, MicroAppStateActions } from ‘qiankun’;

// 初始化 state

const  actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {

    console.log(stave, prev);

})

actions.setGlobalState(state);

actions.offGlobalStateChange();

微应用:

// 从生命周期 mount 中获取通信方法，使用方式和 master 一致

export funciotn mount(props) {

    props.onGlobalStateChange((state, prev) => {

        console.log(state, prev);

    })

    props.setGlobalState(state);

}

本轮次的API说明文档阅读学习，基本上掌握了 qiankun 暴露出来的 api（考验记忆力）。看文档后，看到几个错别字，提了一个pr，还合并进去了，这里感觉非常好～大家要要多用用qiankun，然后多给开源项目共享～

资源下载：
下载地址： http://yemao.in/life?utm_source=sishubiji&utm_term=[d1n910]2020年，根据官方文件的使用和学习记录-API说明