### Micro Application Configuration Example Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/app.md This example demonstrates how to configure and use a micro application within the BK-WeWeb framework. ```APIDOC ## BK-WeWeb Micro Application Configuration ### Description This section details the configuration options for integrating a micro application using the `` component. ### Method N/A (Component Configuration) ### Endpoint N/A (Component Configuration) ### Parameters #### Component Attributes - **id** (string) - Required - Globally unique identifier for the micro application. If reused across pages, it ensures only one instance is loaded. - **mode** (string) - Optional - Specifies the type of application. Defaults to 'app' (micro application mode). Other options include 'js' (micro module mode). - **url** (string) - Required - The entry point URL for loading the sub-application. Can include hash and query parameters, which are managed by `scopeLocation` if enabled. - **showSourceCode** (boolean) - Optional - If true, displays the CSS and JavaScript resources as inline elements in the HTML. - **scopeLocation** (boolean) - Optional - If true, isolates the sub-application's routing from the main application by providing independent Location and History instances. Useful for preventing route conflicts in complex multi-application scenarios. - **setShodowDom** (boolean) - Optional - If true, enables Shadow DOM rendering for the web component. If enabled, `scopeCss` will be ineffective due to Shadow DOM's native style isolation. - **scopeJs** (boolean) - Optional - If true, isolates the JavaScript execution context of the sub-application. - **scopeCss** (boolean) - Optional - If true, isolates the sub-application's CSS, preventing it from affecting the main application's DOM styles. This is overridden if `setShodowDom` is true. - **keepAlive** (boolean) - Optional - If true, caches the sub-application, similar to Vue's `keep-alive` functionality. - **data** (string) - Optional - Custom data passed from the main application to the sub-application, injected into `window.__BK_WEWEB_DATA__`. Complex data types must be stringified. Note that reference equality may differ unless using BK-WeWeb hooks. ### Request Example ```html ``` ### Response N/A (Component renders UI elements) #### Success Response (N/A) N/A #### Response Example (N/A) N/A ### Error Handling - **id**: Missing or non-unique ID may lead to unexpected behavior or multiple instances. - **url**: Invalid or inaccessible URL will prevent the micro application from loading. - **data**: Incorrect stringification of complex data types might cause issues when accessing data in the sub-application. ``` -------------------------------- ### Install Bk-Weweb via npm Source: https://github.com/tencentblueking/bk-weweb/blob/main/readme.md Installs the Bk-Weweb package using npm. This is the first step to using the framework in your project. ```bash $ npm install @blueking/bk-weweb ``` -------------------------------- ### Configure bk-weweb Global Properties Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/global.md Demonstrates how to start bk-weweb with custom global property configurations, such as defining a custom fetchSource function, a webcomponent tag, and whether to collect base source. ```javascript import bkWeWeb from '@bluking/bk-weweb' bkWeWeb.start({ fetchSource: (url, options) => window.fetch(url), webcomponentTag: 'bk-weweb', collectBaseSource: false }) ``` -------------------------------- ### Vue 3 Custom Micro-Module Container with bk-weweb Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md Illustrates the creation of a custom micro-frontend module container using Vue 3 and bk-weweb's loadInstance, activated, and deactivated functions. This example focuses on loading a micro-module, activating it within a container, and deactivating it. It requires Vue 3 and '@blueking/bk-weweb'. ```javascript ``` -------------------------------- ### Basic Usage of Bk-Weweb Source: https://github.com/tencentblueking/bk-weweb/blob/main/readme.md Demonstrates the basic usage of Bk-Weweb for micro-applications and micro-modules. It shows how to import the library and render micro applications or modules using the bk-weweb component. ```javascript import '@blueking/bk-weweb' // 微应用 // 微模块 ``` -------------------------------- ### LoadInstance Hook Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md The loadInstance hook is used to load a micro-module. It accepts parameters for URL, isolation, and data passing. ```APIDOC ## LoadInstance Hook ### Description Loads a micro-module. It accepts parameters for URL, isolation, and data passing. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters #### Request Body - **url** (string) - Required - The URL of the micro-module. - **isPreLoad** (boolean) - Optional - Indicates if the loading is a pre-load. - **id** (string | null) - Optional - A unique identifier for the loaded module. - **container** (HTMLElement | ShadowRoot | null) - Optional - The container for the micro-module. - **scopeJs** (boolean) - Optional - Enables JavaScript sandbox isolation (defaults to not isolated). - **scopeCss** (boolean) - Optional - Enables CSS style isolation (defaults to isolated). - **keepAlive** (boolean) - Optional - Caches the DOM of the module (defaults to false). - **showSourceCode** (boolean) - Optional - Displays the source code in the DOM (defaults to displayed). - **data** (Record) - Optional - Data passed to the instance's render method (defaults to saved). - **initSource** (SourceType) - Optional - Initial sources like `['http://www.hostname.com/a.js', 'http://www.hostname.com/b.css']` or a function returning them. ### Request Example ```json { "url": "http://example.com/my-module", "scopeJs": false, "data": {"config": "default"} } ``` ### Response Not applicable (Hook) ``` -------------------------------- ### Mount Hook Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md The mount hook is used to mount a sub-application or sub-module. It executes after the load hook. ```APIDOC ## Mount Hook ### Description Mounts a sub-application or sub-module. It executes after the load hook. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters #### Path Parameters - **appKey** (string) - Required - The ID of the sub-application or sub-module. #### Request Body - **container** (HTMLElement | ShadowRoot) - Optional - The container to mount the sub-application or sub-module into. - **callback** ((instance: M, exportInstance?: T) => void) - Optional - A callback function executed after mounting. ### Request Example ```javascript mount('my-app', document.getElementById('app-container'), (instance, exports) => { console.log('App mounted:', instance, exports); }); ``` ### Response Not applicable (Hook) ``` -------------------------------- ### LoadApp Hook Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md The loadApp hook is used to load a sub-application. It accepts similar parameters to the load hook. ```APIDOC ## LoadApp Hook ### Description Loads a sub-application. It accepts similar parameters to the load hook. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters #### Request Body - **url** (string) - Required - The URL of the sub-application. - **isPreLoad** (boolean) - Optional - Indicates if the loading is a pre-load. - **id** (string | null) - Optional - A unique identifier for the loaded application. - **container** (HTMLElement | ShadowRoot | null) - Optional - The DOM element or shadow root to mount the application into. - **scopeCss** (boolean) - Optional - Enables CSS style isolation (defaults to isolated). - **scopeJs** (boolean) - Optional - Enables JavaScript sandbox isolation (defaults to isolated). - **keepAlive** (boolean) - Optional - Caches the DOM of the application (defaults to false). - **showSourceCode** (boolean) - Optional - Displays the source code in the DOM (defaults to not displayed, executed in memory). - **scopeLocation** (boolean) - Optional - Shares the main application's routing (defaults to false). - **setShodowDom** (boolean) - Optional - Uses Shadow DOM for isolation (defaults to false). - **data** (Record) - Optional - Data passed to the sub-application (defaults to saved). - **initSource** (SourceType) - Optional - Initial sources like `['http://www.hostname.com/a.js', 'http://www.hostname.com/b.css']` or a function returning them. ### Request Example ```json { "url": "http://example.com/my-app", "keepAlive": true, "data": {"theme": "dark"} } ``` ### Response Not applicable (Hook) ``` -------------------------------- ### Custom Micro Application Container with Vue Source: https://github.com/tencentblueking/bk-weweb/blob/main/readme.md Shows how to create a custom container for a micro-application using Vue.js. It utilizes `loadApp`, `mount`, and `unmount` functions from `@blueking/bk-weweb` to manage the micro-application lifecycle within a specified DOM element. ```typescript ``` -------------------------------- ### Activated Hook Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md The activated hook is used to re-use an already loaded application or module. If it's the first load, it's equivalent to the mount hook. ```APIDOC ## Activated Hook ### Description Re-uses an already loaded application or module. If it's the first load, it's equivalent to the mount hook. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters #### Path Parameters - **appKey** (string) - Required - The ID of the application or module to activate. #### Request Body - **container** (HTMLElement | ShadowRoot) - Required - The container to activate the application or module into. - **callback** ((instance: M, exportInstance?: T) => void) - Optional - A callback function executed after activation. ### Request Example ```javascript activated('my-app', document.getElementById('app-container'), (instance, exports) => { console.log('App activated:', instance, exports); }); ``` ### Response Not applicable (Hook) ``` -------------------------------- ### Load Hook Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md The load hook is used to load a sub-application or sub-module. The parameters are consistent with the parameters required for the two modes described previously. ```APIDOC ## Load Hook ### Description Loads a sub-application or sub-module. The parameters are consistent with the parameters required for the two modes described previously. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters #### Request Body - **mode** (WewebMode) - Optional - Specifies the entry mode (js | config | html, defaults to html). - **url** (string) - Required - The URL of the sub-application or module. - **isPreLoad** (boolean) - Optional - Indicates if the loading is a pre-load. - **id** (string | null) - Optional - A unique identifier for the loaded application/module. - **container** (HTMLElement | ShadowRoot | null) - Optional - The DOM element or shadow root to mount the application/module into. - **scopeCss** (boolean) - Optional - Enables CSS style isolation (defaults to isolated). - **scopeJs** (boolean) - Optional - Enables JavaScript sandbox isolation (defaults to isolated). - **keepAlive** (boolean) - Optional - Caches the DOM of the application/module (defaults to false). - **showSourceCode** (boolean) - Optional - Displays the source code in the DOM (defaults to not displayed, executed in memory). - **scopeLocation** (boolean) - Optional - Shares the main application's routing (defaults to false). - **setShodowDom** (boolean) - Optional - Uses Shadow DOM for isolation (defaults to false). - **data** (Record) - Optional - Data passed to the sub-application/module (defaults to saved). - **initSource** (SourceType) - Optional - Initial sources like `['http://www.hostname.com/a.js', 'http://www.hostname.com/b.css']` or a function returning them. ### Request Example ```json { "url": "http://example.com/app", "mode": "html", "scopeCss": true, "data": {"userId": 123} } ``` ### Response Not applicable (Hook) ``` -------------------------------- ### Mount hook function signature Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md Provides the function signature for the 'mount' hook, which is executed after the load hook. It takes an application key, an optional container element, and a callback function. ```typescript export declare function mount( appKey: string, // 子应用和子模块的id container?: HTMLElement | ShadowRoot, // 子应用和子模块需要挂载的容器 callback?: (instance: M, exportInstance?: T) => void // 挂载之后触发的回调 ): void; ``` -------------------------------- ### Define loadInstance hook interface for micro-module Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md Defines the interface for the 'loadInstance' hook, used to load a micro-module. It includes parameters for URL, isolation, caching, and passing data to the module's render method. ```typescript interface IAppModleProps { // url 必选 [ObserveAttrs.url]: string; // 是否是预加载 isPreLoad?: boolean; id?: string | null; // 容器 container?: HTMLElement | ShadowRoot | null; // 是否使用沙盒隔离 默认不隔离 scopeJs?: boolean; // 是否启用样式隔离 默认隔离 scopeCss?: boolean; // 是否缓存dom keepAlive?: boolean; // 是否在dom上显示源码 默认显示 [ObserveAttrs.showSourceCode]?: boolean; // 传递给实例render方法的数据 [ObserveAttrs.data]?: Record; // 初始化source 如 ['http://www.hostname.com/a.js', 'http://www.hostname.com/b.css'] initSource?: SourceType } export type SourceFuncType = () => Promise; export type SourceType = string[] | SourceFuncType; ``` -------------------------------- ### bk-weweb 微应用模式配置示例 Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/app.md 该示例展示了如何在 bk-weweb 中配置微应用模式。通过 `` 标签,可以指定应用的唯一标识 (`id`)、工作模式 (`mode`)、加载地址 (`url`) 以及是否显示源码 (`showSourceCode`)、隔离路由 (`scopeLocation`)、开启 Shadow DOM (`setShodowDom`)、隔离 JavaScript (`scopeJs`)、隔离 CSS (`scopeCss`)、启用缓存 (`keepAlive`) 和传递自定义数据 (`data`)。 ```javascript import '@bluking/bk-weweb' ``` -------------------------------- ### Custom Micro Module Container with Vue Source: https://github.com/tencentblueking/bk-weweb/blob/main/readme.md Demonstrates creating a custom container for a micro-module using Vue.js. It leverages `loadInstance`, `activated`, and `deactivated` from `@blueking/bk-weweb` to manage the micro-module's lifecycle within a designated DOM element. ```typescript ``` -------------------------------- ### Unmount Hook Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md The unmount hook is used to unmount and exit a sub-application or sub-module. ```APIDOC ## Unmount Hook ### Description Unmounts and exits a sub-application or sub-module. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters #### Path Parameters - **appKey** (string) - Required - The ID of the sub-application or sub-module to unmount. ### Request Example ```javascript unmount('my-app'); ``` ### Response Not applicable (Hook) ``` -------------------------------- ### Define loadApp hook interface for sub-application Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md Defines the interface for the 'loadApp' hook, specifically for loading sub-applications. It shares many properties with the 'load' hook but is tailored for application-level loading. ```typescript interface IAppModleProps { // url 必选 [ObserveAttrs.url]: string; // 是否是预加载 isPreLoad?: boolean; id?: string | null; container?: HTMLElement | ShadowRoot | null; // 是否启用样式隔离 默认隔离 [ObserveAttrs.scopeCss]?: boolean; // 是否使用沙盒隔离 默认隔离 [ObserveAttrs.scopeJs]?: boolean; // 是否缓存dom [ObserveAttrs.keepAlive]?: boolean; // 是否在dom上显示源码 默认不显示 内存执行 [ObserveAttrs.showSourceCode]?: boolean; // 是否共享主应用路由 [ObserveAttrs.scopeLocation]?: boolean; // 是否使用shadowDom [ObserveAttrs.setShodowDom]?: boolean; // 传递给子应用的数据 默认保存 [ObserveAttrs.data]?: Record; // 初始化source 如 ['http://www.hostname.com/a.js', 'http://www.hostname.com/b.css'] initSource?: SourceType } export type SourceFuncType = () => Promise; export type SourceType = string[] | SourceFuncType; ``` -------------------------------- ### Activated hook function signature Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md Defines the signature for the 'activated' hook, used to re-use a previously loaded application or module. If it's the first load, it functions similarly to 'mount'. It requires the application key and container. ```typescript import { BaseModel } from '../typings'; export declare function activated(appKey: string, container: HTMLElement | ShadowRoot, callback?: (instance: M, exportInstance?: T) => void): void; ``` -------------------------------- ### Define load hook interface for sub-application or module Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md Defines the interface for the 'load' hook, used to load sub-applications or sub-modules. It specifies various properties for controlling loading behavior, isolation, and data passing. ```typescript interface IModleProps { // entry mode js | config | html 默认 html [ObserveAttrs.mode]?: WewebMode; // url 必选 [ObserveAttrs.url]: string; // 是否是预加载 isPreLoad?: boolean; id?: string | null; container?: HTMLElement | ShadowRoot | null; // 是否启用样式隔离 默认隔离 [ObserveAttrs.scopeCss]?: boolean; // 是否使用沙盒隔离 默认隔离 [ObserveAttrs.scopeJs]?: boolean; // 是否缓存dom [ObserveAttrs.keepAlive]?: boolean; // 是否在dom上显示源码 默认不显示 内存执行 [ObserveAttrs.showSourceCode]?: boolean; // 是否共享主应用路由 [ObserveAttrs.scopeLocation]?: boolean; // 是否使用shadowDom [ObserveAttrs.setShodowDom]?: boolean; // 传递给子应用的数据 默认保存 [ObserveAttrs.data]?: Record; // 初始化source 如 ['http://www.hostname.com/a.js', 'http://www.hostname.com/b.css'] initSource?: SourceType } export type SourceFuncType = () => Promise; export type SourceType = string[] | SourceFuncType; ``` -------------------------------- ### Unmount hook function signature Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md Defines the signature for the 'unmount' hook, used to remove or exit a sub-application or module. It requires the application key of the module to be unmounted. ```typescript export declare function unmount(appKey: string): void; ``` -------------------------------- ### Unload Hook Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md The unload hook is used to delete cached resources for a corresponding sub-application or sub-module from the system. ```APIDOC ## Unload Hook ### Description Deletes cached resources for a corresponding sub-application or sub-module from the system. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters #### Path Parameters - **url** (string) - Required - The URL of the sub-application or sub-module whose resources should be unloaded. ### Request Example ```javascript unload('http://example.com/app'); ``` ### Response Not applicable (Hook) ``` -------------------------------- ### Unload hook function signature Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md Provides the function signature for the 'unload' hook, which is used to remove cached resources for a specific sub-application or module. It requires the URL of the resource to unload. ```typescript export declare function unload(url: string): void; ``` -------------------------------- ### Deactivated hook function signature Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md Provides the function signature for the 'deactivated' hook, which clears the resources of a loaded application or module. It requires the application key and does not clear cached resources. ```typescript export declare function deactivated(appKey: string): void; ``` -------------------------------- ### Deactivated Hook Source: https://github.com/tencentblueking/bk-weweb/blob/main/docs/docs/intro/hooks.md The deactivated hook is used to clear the cached resources of a corresponding loaded application or module. It does not clear the existing cached resources. ```APIDOC ## Deactivated Hook ### Description Clears the cached resources of a corresponding loaded application or module. It does not clear the existing cached resources. ### Method Not applicable (Hook) ### Endpoint Not applicable (Hook) ### Parameters #### Path Parameters - **appKey** (string) - Required - The ID of the application or module to deactivate. ### Request Example ```javascript deactivated('my-app'); ``` ### Response Not applicable (Hook) ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.