Quankun framework-based cross-sub-application calling component implementation method, system and equipment and medium

Abstract

The invention provides an implementation method, system and device for a cross-sub-application calling component based on a qankun framework and a medium, and belongs to the technical field of software development. Multiple sub-applications are loaded based on the qankun framework; loading resources of the target sub-application B, and configuring sandbox environment isolation styles and resources; displaying a shared component through the page in combination with the query parameter, an identifier of the shared component corresponding to a value in the query parameter; detecting the currently mounted sub-application B, executing an unloading operation, releasing resources and resetting the state of a mounting container; when the sub-application A is uninstalled by the main application, the target sub-application B associated with the sub-application A is uninstalled, and the consistency of the states of the components called across the applications is ensured. According to the method, the sub-applications and the shared components are found in the modes of universal route matching, parameter setting and the like, and the pages and the shared components are loaded through universal routes and parameters, so that the function of opening the shared components or pages in the sub-applications in a cross-application manner is realized.

Description

Technical Field

[0001] The present invention belongs to the technical field of software development, and in particular relates to a method, system, device and medium for implementing cross-sub-application calling components based on the Qiankun framework. Background Art

[0002] As web applications become increasingly complex, monolithic front-end applications are increasingly unable to meet the demands of rapid iteration and team collaboration. This is where the micro-front-end architecture comes in. It allows front-end applications to be broken down into smaller, more manageable parts that can be developed and deployed independently, and ultimately combined to form a complete user experience.

[0003] Qiankun is a micro-frontend solution based on Single-SPA that supports seamless integration of applications across different technology stacks. It provides a simple and efficient way to load and unload sub-applications, while isolating each sub-application's runtime environment through a sandbox mechanism to prevent issues such as style conflicts and global variable pollution.

[0004] In front-end application development using related technologies, multiple functional modules are often tightly coupled within an application. When a functional module needs to be added or modified, it may affect the normal operation of other modules, resulting in a significant increase in the workload of development, testing, and maintenance. In a micro-front-end architecture, without a reasonable registration and loading mechanism, there may be confusion in dependencies between sub-applications, making independent development and deployment impossible. Calling components across applications usually requires hard-coding the component's calling path and related information in the code, making it difficult to dynamically adjust according to business needs. When it is necessary to call components from different sub-applications or modify the component calling relationship, a large amount of code needs to be modified, resulting in poor scalability and flexibility. In addition, there is no effective verification mechanism for parameter passing in cross-application component calls, making it easy for component loading failures to occur due to illegal calls or parameter errors. Summary of the Invention

[0005] The present invention provides an implementation method for calling components across sub-applications based on the qiankun framework. Sub-applications and shared components are found through general route matching and parameter setting, and sub-applications are loaded through the loadMicroApp method of the qiankun framework. The sub-application loads pages and shared components through general routes and parameters, thereby realizing the function of opening shared components or pages across applications in the sub-application.

[0006] Methods include: S101: Register and load multiple sub-applications in the main application based on the Qiankun framework, and configure the sub-application names, address entries, mount containers, and basic routing respectively; S102: In sub-application A, define a common routing path and pass the target sub-application name and shared component identifier through query parameters; S103: In the general routing page of sub-application A, load the resources of target sub-application B and configure the sandbox environment isolation style and resources; S104: configuring a page in the target sub-application B that matches the general route of the sub-application A, and displaying the shared component through the page in combination with the query parameter, wherein the identifier of the shared component corresponds to the value in the query parameter; S105: When the page of sub-application A is uninstalled or the route is switched, the currently mounted sub-application B is detected and uninstalled, resources are released, and the state of the mounted container is reset; S106: When the main application uninstalls the sub-application A, the target sub-application B associated with it is also uninstalled synchronously to ensure the consistency of component states across applications.

[0007] Preferably, in step S101, when registering a sub-application, the main application reads runtime parameters and generates an entry address of the sub-application; During the initialization phase, the main application reads the sub-application configuration through the Qiankun framework, including: sub-application routing, static resource address, resource mounting location, and sandbox mode.

[0008] Preferably, step S102 specifically includes: In sub-application A, a custom routing protocol is used to pass the target sub-application name, shared component identifier, and shared component version information through query parameters to ensure that different versions of shared components can be correctly identified and loaded; Encrypt query parameters; In the general routing page of sub-application A, add validation for query parameter validity, including verifying whether the target sub-application name is in the allowed list and whether the shared component identifier conforms to predefined rules. Only requests that pass the validation will proceed to the subsequent resource loading operation of sub-application B. A mapping relationship table between query parameters and shared components in sub-application B is also established. The mapping relationship table is stored in a specific configuration file of the main application. When sub-application A initiates a request, the corresponding shared component in sub-application B is quickly located by querying the mapping table.

[0009] Preferably, in step S103, a routing rule for sub-application B is dynamically generated according to the target sub-application name in the query parameter; When passing the target sub-application name and shared component identifier in the query parameters, configure the parameter verification mechanism to verify whether the target sub-application name is in the list of sub-applications pre-registered by the main application; Before loading the general routing page, obtain the configuration information of the target sub-application B through the global state management module of the main application to ensure that the loading parameters of sub-application B are consistent with the registration configuration of the main application; When the general routing page is initialized, the complete access path of sub-application B is dynamically spliced, and sub-application B is loaded through Qiankun's loadMicroApp interface. The path splicing rule is based on the combination of the target sub-application name and the shared component identifier, supporting multi-level nested calls across sub-applications.

[0010] Preferably, in step S104, in the matching page of the target sub-application B, a component version compatibility check process is configured to compare the current version of the shared component with the requested version using the passed component version number parameter. If they are inconsistent, a compatible version is automatically loaded or a version error prompt is returned; In the page parameter parsing logic of target sub-application B, the passed business context parameters are converted into the props attributes of the shared component to implement differentiated rendering of the component based on the calling context; A dynamic component registration center is established in the page of the target sub-application B, which supports dynamic registration of components based on the shared component identifier in the query parameters at runtime and caches registered components to avoid repeated loading.

[0011] Preferably, in step S105, when the page of sub-application A is uninstalled or the route is switched, the state management module of sub-application A queries the recorded hook of sub-application B, and uninstalls sub-application B and its pages and component resources.

[0012] When uninstalling sub-application B, the Qiankun unmount lifecycle hook is used to proactively clean up its dependent resources, and the status of the mounted container is reset through the main application's container management module. If the uninstallation of sub-application B fails during the uninstallation process, the rollback mechanism is triggered, the exception information is recorded through the log module of the main application, and an attempt is made to uninstall again or switch to the backup instance of sub-application B.

[0013] Preferably, in step S106, when the main application uninstalls the sub-application A, the current running status of the sub-application A and its associated sub-application B is captured, including component data and user interaction record information; When synchronously uninstalling sub-application B, based on the information in the state snapshot, proactively notify the server of sub-application B so that it can synchronously clean up the session data and service resources related to this call; Establish persistent storage for state snapshots, store the snapshot data in the local storage of the main application or on a remote server, and restore the historical states of sub-applications A and B according to the recovery instructions.

[0014] This application also provides a system for implementing a cross-sub-application calling component based on the Qiankun framework, the system comprising: The sub-application registration and loading module registers and loads multiple sub-applications in the main application based on the Qiankun framework, and configures the sub-application name, address entry, mount container and basic routing respectively; The cross-application routing parameter transfer module is used to define a common routing path in sub-application A and pass the target sub-application name and shared component identifier through query parameters; The sub-application resource loading and sandbox configuration module is used to load the resources of the target sub-application B in the general routing page of sub-application A and configure the sandbox environment isolation style and resources; A shared component matching and display module, configured to configure a page in target sub-application B that matches the general route of sub-application A, and to display the shared component through the page in combination with the query parameter, wherein the identifier of the shared component corresponds to the value in the query parameter; The sub-application dynamic unloading module is used to detect the currently mounted sub-application B and perform the unloading operation when the page of sub-application A is unloaded or the route is switched, thereby releasing resources and resetting the mounted container status; The master-slave sub-application collaborative uninstallation module is used to simultaneously uninstall the target sub-application B associated with the master application when the master application uninstalls the sub-application A, ensuring the consistency of component status across application calls.

[0015] According to another embodiment of the present application, an electronic device is provided, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein when the processor executes the program, the steps of the method for implementing the cross-sub-application calling component based on the qiankun framework are implemented.

[0016] According to another embodiment of the present application, a storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the implementation method of calling components across sub-applications based on the qiankun framework are implemented.

[0017] It can be seen from the above technical solutions that the present invention has the following advantages: The present application involves an implementation method for calling components across sub-applications based on the Qiankun framework. By registering and loading sub-applications based on the Qiankun framework in the main application and configuring relevant parameters, the main application and sub-applications, as well as sub-applications and sub-applications are decoupled, so that each sub-application can be independently developed, tested and deployed. Different teams can develop their respective sub-applications in parallel to improve development efficiency. Defining a common routing path and passing query parameters in sub-application A provides a flexible way to call components across sub-applications. Dynamically generating routing rules for sub-application B allows routing configurations to change flexibly according to the calling scenario and adapt to complex business logic and routing structure adjustments. Obtaining and comparing configuration information through the main application global state management module ensures that sub-application loading parameters are accurate and avoids loading failures caused by configuration errors. Configuring matching pages and displaying shared components in the target sub-application B enables sub-application B to reuse page logic to display different shared components, reducing development costs. When the main application uninstalls sub-application A, the associated sub-application B is also uninstalled, ensuring the consistency and integrity of system resources.

[0018] This application realizes the independent development and collaborative work of sub-applications, improves development efficiency and code reusability; through multiple mechanisms, it ensures the accuracy, security and flexibility of component calls to meet complex business needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solution of the present invention, the following is a brief introduction to the drawings required for the description. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0020] Figure 1 This is a flowchart of the implementation method of calling components across sub-applications based on the Qiankun framework; Figure 2 This is a schematic diagram of the implementation system for calling components across sub-applications based on the Qiankun framework; Figure 3 Schematic diagram of an electronic device. DETAILED DESCRIPTION

[0021] The following describes in detail the implementation method of the cross-sub-application calling component based on the Qiankun framework involved in this application. For the purpose of illustration rather than limitation, specific details such as specific system structures and technologies are provided to facilitate a thorough understanding of the embodiments of this application. However, it should be clear to those skilled in the art that this application can also be implemented in other embodiments without these specific details.

[0022] It should be understood that when used in this specification, the term "comprising" indicates the presence of the described features, integers, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or their collections. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized.

[0023] The phrases "one embodiment" or "some embodiments" described in this application mean that the specific features, structures, or characteristics described in the embodiment are included in one or more embodiments of the application. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in other embodiments," etc. that appear in different places in this application do not necessarily refer to the same embodiment, but rather mean "one or more but not all embodiments," unless otherwise specifically emphasized.

[0024] In embodiments of the present invention, computer program code for performing the operations of the present disclosure may be written in one or more programming languages, or a combination thereof, including but not limited to object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or power server. In cases involving a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (exemplarily via the Internet using an Internet service provider).

[0025] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0026] See also Figure 1 The figure is a flowchart of a method for implementing a cross-sub-application calling component based on the Qiankun framework in a specific embodiment, the method comprising: S101: Register and load multiple sub-applications in the main application based on the Qiankun framework, and configure the sub-application names, address entries, mount containers, and basic routes respectively.

[0027] In some embodiments, Qiankun hijacks browser routing events and monitors URL changes. When the user's access path matches the sub-application's "activeRule," the main application retrieves the sub-application code based on the "entry" address, mounts it into a designated "container," and initializes the sub-application lifecycle, enabling dynamic application loading within a micro-frontend architecture. This decouples the main application from the sub-application and reduces system coupling.

[0028] In some specific embodiments, step S101 further includes the following method: When registering a sub-application, the main application reads the runtime parameters and generates the entry address of the sub-application.

[0029] This embodiment implements a dedicated parameter reading module during the main application startup and sub-application registration process. This module reads runtime parameters from system configuration files, environment variables, or user-defined input. These parameters include information such as the base domain name, port number, and path prefix for sub-application deployment. Based on different parameter combination rules, the entry address corresponding to each sub-application is dynamically spliced ​​and generated. This improves the system's flexibility and configurability. When a sub-application's deployment environment changes, simply modifying the runtime parameters allows for rapid adaptation to the new deployment address.

[0030] During the initialization phase, the main application loads the static resources of the target sub-application and caches the resources to the browser's local storage.

[0031] The main application of this embodiment includes a built-in historical access data recording module, which continuously records information such as the frequency and duration of user access to sub-applications during operation. During the initialization phase, the data processing module analyzes this historical access data and selects frequently accessed and recently accessed sub-applications. For these sub-applications, the main application pre-loads their static resources via network requests. After loading, these resources are cached using the browser's local storage API, with appropriate cache expiration dates and version identifiers.

[0032] During the sub-application registration process, the main application adds a technology stack detection module. This module identifies the technology stack used by the sub-application, such as Vue, React, Angular, etc., by analyzing the sub-application's code structure, dependency package information, etc. Based on the different technology stack characteristics and compatibility requirements, the main application selects the appropriate sandbox mode from the preset sandbox mode library. For example, for sub-applications based on the Vue technology stack, a sandbox mode with good compatibility with Vue components and instructions is selected; for sub-applications that require strict style isolation, a sandbox mode based on ShadowDOM is enabled and the corresponding parameters are configured. In this way, the main application matches the most suitable sandbox mode for the sub-application, creates an independent operating environment for the sub-application within the sandbox, implements style isolation, script isolation, and resource isolation, and ensures that the sub-applications do not interfere with each other and operate stably.

[0033] The main application provides a page layout function that can be configured visually or by code, allowing developers to divide the page into multiple independent areas according to business needs, such as the left navigation area, the right content area, and the top functional area. Each area corresponds to a sub-application mounting container. By setting the container's ID, size, position and other attributes, the sub-application's display position can be accurately located. Through reasonable page layout planning, each sub-application is allocated a dedicated display space to avoid layout conflicts of sub-applications on the page. By utilizing the asynchronous characteristics of Qiankun's loadMicroApp interface, sub-application loading tasks are initiated in parallel, making full use of the browser's multi-threaded resources and network bandwidth to improve the overall loading efficiency of sub-applications.

[0034] S102: In sub-application A, a general routing path is defined, and the target sub-application name and shared component identifier are passed through query parameters.

[0035] In some embodiments, when a user accesses the path to sub-application A, sub-application A's route resolver identifies parameters, locates the target sub-application address based on the "app" parameter, and determines the shared components to load based on the "page" parameter, providing the information foundation for subsequent cross-application component calls. This enables flexible cross-sub-application component calls without the need for pre-static binding of component dependencies; allows the same sub-application to reuse common routes to call components from different sub-applications, reducing code redundancy; and enables dynamic configuration of component calls through parameter passing, adapting to diverse business scenarios.

[0036] S103: In the general routing page of sub-application A, load the resources of the target sub-application B, and configure the sandbox environment isolation style and resources.

[0037] In some embodiments, after sub-application A's corresponding page is initialized, sub-application B is loaded using Qiankun's "loadMicroApp" method. Sub-application B's name, address, and mount container are specified, and sandbox parameters are configured to isolate sub-application B's styles and resources to avoid conflicts with sub-application A. Style isolation is achieved through ShadowDOM, preventing sub-application B's CSS styles from contaminating sub-application A. At the same time, JavaScript sandboxing limits sub-application B's access to global variables, ensuring resource independence and enabling secure cross-application resource loading.

[0038] S104: configuring a page in the target sub-application B that matches the general route of the sub-application A, and displaying the shared component through the page in combination with the query parameter, wherein the identifier of the shared component corresponds to the value in the query parameter.

[0039] In some embodiments, when sub-application B loads, the routing system matches the path and loads the CrossAppPage page. The page parses query parameters and uses the component registration mechanism to find and render the corresponding shared components, enabling dynamic display of cross-application components. Sub-application B can reuse the same page logic to display different shared components, reducing development costs. Component rendering can be controlled through parameters, enhancing component call flexibility. Wildcard routing supports complex path matching and adapts to diverse call scenarios.

[0040] S105: When the page of sub-application A is uninstalled or the route is switched, the currently mounted sub-application B is detected and an uninstall operation is performed to release resources and reset the mount container state.

[0041] In some embodiments, by monitoring sub-application A's lifecycle events or route changes, timely capturing page unloading or route switching signals, and proactively triggering the unloading process of sub-application B, resources are recycled, avoiding memory leaks and duplicate loading issues. This optimizes resource management and improves system performance.

[0042] S106: When the main application uninstalls the sub-application A, the target sub-application B associated with it is also uninstalled synchronously to ensure the consistency of component states across applications.

[0043] In some embodiments, in the logic of uninstalling sub-application A by the main application, it is detected whether sub-application A is associated with other sub-applications, such as sub-application B. If there is an association relationship, the uninstall method of sub-application B is called at the same time to ensure that the status of sub-applications A and B are consistent and avoid isolated resource residues.

[0044] In some specific embodiments, step S106 also involves introducing an inter-application state snapshot mechanism when the main application uninstalls sub-application A, capturing the current running status of sub-application A and its associated sub-application B, including key information such as component data and user interaction records.

[0045] The captured state snapshot is encrypted and a multi-layer encryption algorithm is used to ensure the security and integrity of the snapshot data during storage and transmission.

[0046] When sub-application B is synchronously uninstalled, the server of sub-application B is proactively notified based on the information in the state snapshot so that it can synchronously clean up the session data and service resources related to this call.

[0047] Establish a persistent storage mechanism for state snapshots and store the snapshot data in the local storage of the main application or on a remote server so that the historical states of sub-application A and sub-application B can be quickly restored when needed.

[0048] As can be seen, in step S106, when the main application uninstalls sub-application A, the state snapshot mechanism preserves the running status of sub-applications A and B, preventing state loss and resource leakage. The encryption of the snapshot data ensures data security and prevents unauthorized access. Sub-application B's server is proactively notified to clean up related data, enabling timely release of server resources and improving overall system resource utilization.

[0049] In this way, the main application maintains a list of sub-application dependencies and, during uninstallation, automatically identifies and triggers the uninstallation process for associated sub-applications. This unified management ensures that all related resources are fully released. This avoids memory leaks or state confusion caused by some sub-applications not being uninstalled, simplifies resource management, and improves system maintainability.

[0050] In an embodiment of the present invention, based on step S102, a possible embodiment will be given below to illustrate its specific implementation scheme in a non-limiting manner.

[0051] In step S102, sub-application A uses a custom routing protocol, which not only includes a general routing path but also transmits the target sub-application name, shared component identifier, and shared component version information through query parameters to ensure that different versions of shared components can be correctly identified and loaded.

[0052] Encrypt query parameters using a specific encryption algorithm to prevent them from being tampered with or stolen during transmission, thereby improving the security of cross-sub-application calls.

[0053] In the general routing page of sub-application A, add a verification mechanism for the legitimacy of query parameters, including verifying whether the target sub-application name is in the allowed list and whether the shared component identifier complies with predefined rules. Only requests that pass the verification will proceed with the subsequent sub-application B resource loading operation.

[0054] A mapping table is established between query parameters and shared components in sub-application B. This table is stored in a specific configuration file of the main application. When sub-application A initiates a request, the corresponding shared component in sub-application B is quickly located by querying the mapping table, thereby improving the calling efficiency.

[0055] As can be seen, the custom routing protocol and encryption ensure secure and accurate information transmission across sub-applications. When sub-application A initiates a request, encrypted query parameters containing the target sub-application name, shared component identifier, and version information are generated according to the custom protocol. When the request reaches sub-application A's general routing page, the query parameters are first decrypted using a decryption algorithm. The decrypted parameters are then validated using a validation mechanism. Only valid requests proceed to load sub-application B's resources. Simultaneously, by matching the query parameters with the mapping table in the main application, the corresponding shared component in sub-application B is quickly located. In terms of implementation, the custom routing protocol can be flexibly defined based on project requirements, and the encryption algorithm can be either symmetric or asymmetric, appropriate to the project's security level. The query parameter validation mechanism can be implemented by writing appropriate validation rules, and the mapping table can be established and maintained by reading and writing the main application's configuration file.

[0056] In some specific embodiments, step S103 also dynamically generates routing rules for sub-application B according to the target sub-application name in the query parameter.

[0057] Specifically, a dedicated routing rule generation module is set up in the general routing processing logic of sub-application A. When receiving a query parameter containing the target sub-application name, the module dynamically generates a dedicated routing rule for sub-application B in the current call scenario based on the pre-set rules and the target sub-application name. For example, if the basic route registered by sub-application B in the main application is " / b", and the rule is set to add the " / cross-app / " prefix when calling across applications, the generated routing rule is " / b / cross-app / ” The generated routing rules are added to the routing table of sub-application A to accurately match subsequent requests from sub-application B. This ensures that sub-application B can be correctly located and accessed through specific routing rules in different cross-application call scenarios, and also provides a clear matching basis for routing processing within sub-application B.

[0058] In this embodiment, a parameter verification module is embedded in the process of sub-application A receiving and processing query parameters. When the query parameter passes the target sub-application name and shared component identifier, the verification module first obtains the pre-registered sub-application list from the main application, which contains all legal sub-application names. Then, the received target sub-application name is compared with the pre-registered list one by one to check whether it exists in the list. If the target sub-application name is not in the list, it is determined to be an illegal request, and the subsequent sub-application loading operation is rejected, and an error prompt message is returned to the user. This is achieved by verifying and comparing the target sub-application name in the query parameter with the main application pre-registered list to ensure that only registered and legal sub-applications can be called across applications, thereby ensuring the security and stability of the system.

[0059] This embodiment also retrieves the configuration information of target sub-application B through the main application's global state management module before loading the general routing page, ensuring that sub-application B's loading parameters are consistent with the main application's registered configuration. In other words, the main application's global state management module centrally stores the registration configuration information of all sub-applications. Before loading target sub-application B, sub-application A obtains and compares the configuration information to ensure that the loading operation is performed with the correct parameters. This prevents sub-application loading failures or abnormal behavior caused by configuration discrepancies, ensuring the normal operation of the sub-application.

[0060] In step S103, when the general routing page is initialized, the complete access path of sub-application B is dynamically spliced, and sub-application B is loaded through Qiankun's loadMicroApp interface. The path splicing rule is based on the combination of the target sub-application name and the shared component identifier, and supports multi-level nested calls across sub-applications.

[0061] Specifically, after the general routing page of sub-application A is initialized, the path splicing logic is started. This logic is based on the target sub-application name and shared component identifier in the query parameters, and performs path splicing according to specific rules. After the path is generated, Qiankun's loadMicroApp interface is called, and the spliced ​​path and other configuration parameters of sub-application B, such as mounting container, sandbox configuration, etc., are passed in to load sub-application B. At the same time, the path splicing rule is designed to support multi-level nested calls, that is, the shared component identifier can contain multi-level path information to meet the needs of complex business scenarios. It also supports the design of multi-level nested calls, which expands the depth and flexibility of cross-application calls and adapts to diverse business architectures.

[0062] In step S104 of this embodiment, in the matching page of the target sub-application B, the component version compatibility verification process is configured. The current version of the shared component is compared with the requested version through the passed component version number parameter to see if they are consistent. If they are inconsistent, the compatible version is automatically loaded or a version error prompt is returned.

[0063] In the page parameter parsing logic of the target sub-application B, a context data injection process is introduced to convert the passed business context parameters into the props attributes of the shared component, realizing differentiated rendering of the component based on the calling context.

[0064] A dynamic component registration center is established in the page of the target sub-application B, which supports dynamic registration of components based on the shared component identifier in the query parameters at runtime and caches registered components to avoid repeated loading.

[0065] Specifically, by building a dynamic component adaptation system and a cross-application state collaboration mechanism, we can solve the version compatibility, context awareness, and state consistency issues of shared components in different calling scenarios.

[0066] The received business context parameters are used as initialization parameters for the shared component, triggering context-based business logic through the component's lifecycle hook. The target sub-application B's page creates a component registration cache pool during initialization. Upon receiving the component identifier, it first checks whether the cache pool already contains the registered component. If so, it renders the component directly. Otherwise, it dynamically imports the component code and registers it in the cache pool, reducing duplicate network requests.

[0067] It can be seen that when a shared component is uninstalled, a state clearing event is sent through the cross-application communication interface provided by the main application. After receiving the event, sub-application A clears the temporary state associated with the component to avoid invalid state residue.

[0068] The context data processing of this embodiment is to define a general context processor in the page of the target sub-application B, parse the context data in the query parameters into JSON format, filter out invalid fields, and finally pass the valid data to the shared component through the v-bind instruction.

[0069] The dynamic component registration process uses Vue's asynchronous component process combined with a cache pool to implement lazy loading and caching of components. When a component is uninstalled, the cache is retained but marked as "recyclable". When memory is low, the cache of components that have not been used for a long time is automatically cleared.

[0070] The configured cross-application state synchronization process establishes a global event bus in the main application, providing an event publishing and subscription interface. Sub-applications A and B synchronize their states through the main application's event bus, and events carry unique cross-application identifiers to prevent event confusion.

[0071] In some specific embodiments, step S105 queries the recorded sub-application B through the state management module of sub-application A, and uninstalls sub-application B and its pages and component resources.

[0072] As can be seen, the centralized data storage capabilities of the main application's global state management module enable unified management of the sub-application's operational status data. When sub-application A triggers a page unload or route switch event, routing monitoring facilitates switching between applications and resource management. This design avoids direct coupling between sub-applications, allowing data exchange to proceed through the main application as an intermediary.

[0073] Furthermore, when sub-application B is uninstalled, its dependent resources are actively cleaned up through Qiankun's unmount lifecycle hook, and the status of the mounted container is reset through the container management module of the main application.

[0074] If the uninstallation of sub-application B fails during the uninstallation process, the rollback mechanism is triggered, the exception information is recorded through the log module of the main application, and an attempt is made to uninstall again or switch to the backup instance of sub-application B.

[0075] As can be seen, the Qiankun framework's lifecycle management mechanism enforces the cleanup of dependent resources during the sub-application uninstallation phase, ensuring complete resource recycling. The main application's container management module is responsible for centrally maintaining the state of mounted containers, eliminating residual effects from sub-application B through reset operations, ensuring container reusability and preventing interference with subsequent applications. When uninstalling sub-application B, sub-application A implements an error-handling mechanism to monitor for exceptions during the execution of the unmount hook function. If the uninstallation fails, a rollback mechanism is immediately triggered: first, the main application's logging module is invoked to record detailed exception information for subsequent troubleshooting. Second, the uninstallation operation is retried up to three times. If this fails, an available replica of sub-application B is searched for in the main application's backup instance pool and switched to the backup instance to ensure business continuity. If no backup instance is available, an error message is displayed to the user. This improves system robustness and reliability, preventing the entire application process from being interrupted due to a single uninstallation failure.

[0076] It should be understood that the order of execution of the steps in the above embodiments does not necessarily mean the order of execution. The order of execution of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0077] The following is an embodiment of the implementation system of the cross-sub-application calling component based on the qiankun framework provided by the embodiments of the present disclosure. This system and the implementation method of the cross-sub-application calling component based on the qiankun framework in the above-mentioned embodiments belong to the same inventive concept. For details not fully described in the embodiment of the implementation system of the cross-sub-application calling component based on the qiankun framework, please refer to the embodiment of the implementation method of the cross-sub-application calling component based on the qiankun framework.

[0078] like Figure 2 As shown, the system includes: a sub-application registration and loading module, which registers and loads multiple sub-applications in the main application based on the Qiankun framework, and configures the sub-application name, address entry, mounting container and basic routing respectively.

[0079] The cross-application routing parameter transfer module is used to define a common routing path in sub-application A and pass the target sub-application name and shared component identifier through query parameters.

[0080] The sub-application resource loading and sandbox configuration module is used to load the resources of the target sub-application B in the general routing page of sub-application A and configure the sandbox environment isolation style and resources.

[0081] The shared component matching and display module is used to configure a page that matches the general route of sub-application A in the target sub-application B, and display the shared component through the page in combination with the query parameter, wherein the identifier of the shared component corresponds to the value in the query parameter.

[0082] The sub-application dynamic unloading module is used to detect the currently mounted sub-application B and perform the unloading operation when the page of sub-application A is unloaded or the route is switched, thereby releasing resources and resetting the mounted container status.

[0083] The master-slave sub-application collaborative uninstallation module is used to simultaneously uninstall the target sub-application B associated with the master application when the master application uninstalls the sub-application A, ensuring the consistency of component status across application calls.

[0084] It can be seen that other sub-applications are loaded through loadMicroApp in the sub-application.

[0085] Add a common route to the calling sub-application A and set the route to {path: / compage,component:CommenPage}. When configuring the page route address, add the identifiers of the sub-application and shared component to be loaded, such as / compage?app=b&page=ShareComponent. / compage is used to match the calling sub-application's own CommenPage page. The app=b parameter identifies the sub-application to load, and page=ShareComponent tells the called sub-application which shared component to load.

[0086] Add a CommenPage in the calling sub-application A to parse the routing parameters, find the application address of the called sub-application B according to the sub-application configuration information, load sub-application B through loadMicroApp, and record the returned handle of sub-application B.

[0087] In the routing guard settings of the calling sub-application A, unload sub-application B using the handle returned when loading the sub-application.

[0088] In the uninstall callback method of the calling sub-application A, uninstall sub-application B using the handle returned when loading the sub-application.

[0089] Add a common route in the called sub-application B, including the path: * / compage, component:CrossAppPage. The key is to add an asterisk (*) before the common route to match multiple paths. * / compage is used by the called sub-application to match its own page CrossAppPage. In the CrossAppPage page, the path parameter page=ShareComponent is used to identify the shared component to be loaded, and the shared component is loaded through <component>Load shared components.

[0090] The above system enables the sharing of components across sub-applications. By adding a universal routing handler to the sub-application providing the shared component, the shared page is loaded and the specific shared component is located using path parameters. In the calling sub-application, a relevant universal route is added, which identifies the sub-application providing the shared component using parameters and loads the sub-application. This solution reduces the time and cost of maintaining a common component library and saves the caller the time of repackaging and redeploying the library after modifications.

[0091] like Figure 3 As shown, the present application also provides an electronic device, including a display module 103, a memory 102, a processor 101, and a computer program stored in the memory and executable on the processor 101, wherein the processor 101 implements the steps of a method for implementing a cross-sub-application calling component based on the qiankun framework when executing the program.

[0092] In the embodiments of the present invention, electronic devices include, but are not limited to, laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. Electronic devices may also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the embodiments of the present application described and / or claimed herein.

[0093] In the embodiment of the present application, the processor 101 can be implemented by using at least one of a special purpose integrated circuit, a programmable logic device, a field programmable gate array, a processor, a controller, a microcontroller, a microprocessor, and an electronic unit designed to perform the functions described herein. In some cases, such an embodiment can be implemented in a controller. For software implementation, an embodiment such as a process or function can be implemented with a separate software module that allows the execution of at least one function or operation. The software code can be implemented by a software application (or program) written in any appropriate programming language, and the software code can be stored in a memory and executed by a controller.

[0094] The display module 103 is used to display information input by the user or information provided to the user. The display module 103 may include a display panel, which may be configured in the form of a liquid crystal display, an organic light emitting diode, etc.

[0095] The memory 102 can be used to store software programs and various data. The memory 102 can include high-speed random access memory and non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0096] The present application also provides a storage medium on which a computer program is stored. When the computer program is executed by a processor, the steps of the implementation method of calling components across sub-applications based on the qiankun framework are implemented.

[0097] The storage medium can be any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or component, or any combination thereof. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof.

[0098] In the context of storage media, a readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable signal medium may also be any readable medium other than a readable storage medium that can transmit, propagate, or transfer a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0099] The above description of the disclosed embodiments is intended to enable one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be readily apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention is not limited to the embodiments shown herein but is intended to conform to the widest scope consistent with the principles and novel features disclosed herein.< / component>

Claims

1. A method for implementing a cross-sub-application calling component based on the Qiankun framework, characterized in that: Methods include: S101: Register and load multiple sub-applications in the main application based on the Qiankun framework, and configure the sub-application names, address entries, mount containers, and basic routing respectively; S102: In sub-application A, define a common routing path and pass the target sub-application name and shared component identifier through query parameters; S103: In the general routing page of sub-application A, load the resources of target sub-application B and configure the sandbox environment isolation style and resources; S104: configuring a page in the target sub-application B that matches the general route of the sub-application A, and displaying the shared component through the page in combination with the query parameter, wherein the identifier of the shared component corresponds to the value in the query parameter; S105: When the page of sub-application A is uninstalled or the route is switched, the currently mounted sub-application B is detected and uninstalled, resources are released, and the state of the mounted container is reset; S106: When the main application uninstalls the sub-application A, the target sub-application B associated with it is also uninstalled synchronously to ensure the consistency of component states across applications.

2. The implementation method of calling components across sub-applications based on the qiankun framework according to claim 1 is characterized in that: In step S101, when registering a sub-application, the main application reads the runtime parameters and generates the entry address of the sub-application; During the initialization phase, the main application reads the sub-application configuration through the Qiankun framework, including: sub-application routing, static resource address, resource mounting location, and sandbox mode.

3. The implementation method of calling components across sub-applications based on the qiankun framework according to claim 1 is characterized in that: Step S102 specifically includes: In sub-application A, a custom routing protocol is used to pass the target sub-application name, shared component identifier, and shared component version information through query parameters to ensure that different versions of shared components can be correctly identified and loaded. Encrypt query parameters; In the general routing page of sub-application A, add validation for query parameter validity, including verifying whether the target sub-application name is in the allowed list and whether the shared component identifier conforms to predefined rules. Only requests that pass the validation will proceed to the subsequent resource loading operation of sub-application B. A mapping relationship table between query parameters and shared components in sub-application B is also established. The mapping relationship table is stored in a specific configuration file of the main application. When sub-application A initiates a request, the corresponding shared component in sub-application B is quickly located by querying the mapping table.

4. The implementation method of calling components across sub-applications based on the qiankun framework according to claim 1 is characterized in that: In step S103, the routing rules of sub-application B are dynamically generated according to the target sub-application name in the query parameter; When passing the target sub-application name and shared component identifier in the query parameters, configure the parameter verification mechanism to verify whether the target sub-application name is in the list of sub-applications pre-registered by the main application; Before loading the general routing page, obtain the configuration information of the target sub-application B through the global state management module of the main application to ensure that the loading parameters of sub-application B are consistent with the registration configuration of the main application; When the general routing page is initialized, the complete access path of sub-application B is dynamically spliced, and sub-application B is loaded through Qiankun's loadMicroApp interface. The path splicing rule is based on the combination of the target sub-application name and the shared component identifier, supporting multi-level nested calls across sub-applications.

5. The implementation method of calling components across sub-applications based on the qiankun framework according to claim 1 is characterized in that: In step S104, on the matching page of the target sub-application B, a component version compatibility check process is configured to compare the current version of the shared component with the requested version using the passed component version number parameter. If they are inconsistent, a compatible version is automatically loaded or a version error prompt is returned; In the page parameter parsing logic of target sub-application B, the passed business context parameters are converted into the props attributes of the shared component to implement differentiated rendering of the component based on the calling context; A dynamic component registration center is established in the page of the target sub-application B, which supports dynamic registration of components based on the shared component identifier in the query parameters at runtime and caches registered components to avoid repeated loading.

6. The method for implementing a cross-sub-application calling component based on the qiankun framework according to claim 1 is characterized in that: In step S105, when the page of sub-application A is uninstalled or the route is switched, the state management module of sub-application A queries the recorded hook of sub-application B, and uninstalls sub-application B and its pages and component resources; When uninstalling sub-application B, the Qiankun unmount lifecycle hook is used to proactively clean up its dependent resources, and the status of the mounted container is reset through the main application's container management module. If the uninstallation of sub-application B fails during the uninstallation process, the rollback mechanism is triggered, the exception information is recorded through the log module of the main application, and an attempt is made to uninstall again or switch to the backup instance of sub-application B.

7. The implementation method of calling components across sub-applications based on the qiankun framework according to claim 1 is characterized in that: In step S106, when the main application uninstalls sub-application A, the current running status of sub-application A and its associated sub-application B is captured, including component data and user interaction record information; When synchronously uninstalling sub-application B, based on the information in the state snapshot, proactively notify the server of sub-application B so that it can synchronously clean up the session data and service resources related to this call; Establish persistent storage for state snapshots, store the snapshot data in the local storage of the main application or on a remote server, and restore the historical states of sub-applications A and B according to the recovery instructions.

8. A system for implementing cross-sub-application calling components based on the Qiankun framework, characterized in that: The system is used to implement the implementation method of the cross-sub-application calling component based on the Qiankun framework as described in any one of claims 1 to 7; the system includes: The sub-application registration and loading module registers and loads multiple sub-applications in the main application based on the Qiankun framework, and configures the sub-application name, address entry, mount container and basic routing respectively; The cross-application routing parameter transfer module is used to define a common routing path in sub-application A and pass the target sub-application name and shared component identifier through query parameters; The sub-application resource loading and sandbox configuration module is used to load the resources of the target sub-application B in the general routing page of sub-application A and configure the sandbox environment isolation style and resources; A shared component matching and display module, configured to configure a page in target sub-application B that matches the general route of sub-application A, and to display the shared component through the page in combination with the query parameter, wherein the identifier of the shared component corresponds to the value in the query parameter; The sub-application dynamic unloading module is used to detect the currently mounted sub-application B and perform the unloading operation when the page of sub-application A is unloaded or the route is switched, thereby releasing resources and resetting the mounted container status; The master-slave sub-application collaborative uninstallation module is used to simultaneously uninstall the target sub-application B associated with the master application when the master application uninstalls the sub-application A, ensuring the consistency of component status across application calls.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the implementation method of the cross-sub-application calling component based on the qiankun framework as described in any one of claims 1 to 7 are implemented.

10. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for implementing a cross-sub-application calling component based on the qiankun framework are implemented as described in any one of claims 1 to 7.

Images