Equipment panel loading method and system based on Qiankun framework and electronic equipment

Abstract

The invention discloses an equipment panel loading method and system based on a Qiankun framework and electronic equipment, the method is applied to an Internet of Things platform comprising a main application, the method comprises the following steps: S1, a registration step: based on an application container framework, the main application registers a plurality of sub-applications, and each sub-application corresponds to one piece of equipment; s2, a loading step: in response to an operation for a target device, dynamically acquiring and loading a corresponding registered sub-application by the main application according to the device identifier of the target device; s3, an isolation running step: creating an isolation environment for the loaded sub-application by the application container framework, and running the sub-application in the isolation environment to render a control panel interface of the target equipment, so that the system can ensure the independence of the control panel of each equipment, and the control panel interface of the target equipment can be rendered. The efficient utilization of resources and the effective isolation of operating environments are realized, and the maintainability, the expansibility and the operating stability of the Internet of Things platform are improved.

Description

Technical Field

[0001] This invention relates to the field of Internet of Things (IoT) technology, and in particular to a method, system, electronic device, and computer-readable storage medium for dynamically loading and managing device control panels based on a micro-frontend architecture in an IoT platform. Background Technology

[0002] In the field of IoT smart device control, traditional device control systems mostly adopt a monolithic front-end architecture. This architecture has significant drawbacks: control panels for different devices are usually forced to be developed using a unified technology stack (such as React, Vue, or Angular), making it difficult to adapt to the unique interaction needs of diverse devices. As the number of device types connected to the platform increases, fully loading all device control modules leads to slow application initialization and excessive memory consumption, severely impacting performance on low-configuration terminals. Furthermore, when multiple device control panels run in parallel, JavaScript global variable pollution and CSS style conflicts are highly likely to occur, resulting in page display errors or functional abnormalities.

[0003] As devices become increasingly intelligent, IoT platforms place higher demands on the dynamic scalability, security isolation, and technology stack flexibility of control systems. Existing technologies struggle to meet the requirements for independent development, deployment, on-demand loading, and secure isolation of device control panels while maintaining system integrity. Summary of the Invention

[0004] The technical problem to be solved by this invention is: how to build a highly scalable, easy-to-maintain IoT platform front-end architecture that can support heterogeneous technology stack device panels.

[0005] The technical problem of this invention is solved by the following technical solution: In a first aspect, the present invention provides a device panel loading method based on the Qiankun framework, applied to an IoT platform including a main application, the method comprising the following steps: S1. Registration steps: Based on the application container framework, the main application registers multiple sub-applications, where each sub-application corresponds to a device; S2. Loading step: In response to an operation on the target device, the main application dynamically obtains and loads the corresponding registered sub-application based on the device identifier of the target device; S3. Isolation Operation Steps: The application container framework creates an isolation environment for the loaded sub-application and runs the sub-application in the isolation environment to render the control panel interface of the target device.

[0006] In some embodiments, the following technical features are also included: It also includes the following steps: S4. Communication steps, including providing a communication interface defined by the main application for communication between the main application and the sub-application running in the isolated environment.

[0007] In some embodiments, the application container framework is a micro frontend framework, and the communication interface includes a message passing method for sending instructions to the device.

[0008] In some embodiments, step S2, "dynamically obtaining and loading the corresponding registered sub-application," specifically includes the following steps: S21. Based on the device identifier, match a sub-application registry and determine the entry address information of the target sub-application; S22. Obtain the resource files of the target sub-application based on the entry address information.

[0009] In some embodiments, step S22 specifically includes the following steps: The resource file is obtained from the remote server based on the entry address information, and remote updates and hot replacements of the resource file are supported.

[0010] In some embodiments, step S3, "creating an isolation environment," specifically includes the following steps: S31. Create a separate JavaScript execution context to isolate global variables; S32. Encapsulate the document object model operations of the sub-application to achieve style isolation.

[0011] In some embodiments, the application container framework performs proxy interception of access to global objects.

[0012] In some embodiments, the following steps are also included: S5. Sub-application lifecycle management steps: When the sub-application is loaded, mounted, and unloaded, its corresponding lifecycle function is triggered.

[0013] In some embodiments, when registering the sub-application in step S1, the activation rules of the sub-application are configured.

[0014] In some embodiments, the device identifier is used to map and match the route of the sub-application to determine the sub-application to be loaded and its corresponding control panel interface.

[0015] In a second aspect, the present invention provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described above.

[0016] Thirdly, the present invention provides a computer-readable storage medium having a computer program / instructions stored thereon, which, when executed by a processor, implements the above-described method.

[0017] Fourthly, the present invention provides an Internet of Things (IoT) platform system, comprising: The registration management module is used to register and manage multiple control panel sub-applications corresponding to different device types based on the application container framework; The dynamic loading module is used to dynamically obtain and load the corresponding sub-application resource files based on the device identifier when it is necessary to control or configure the target device. A sandbox execution module is used to run the sub-application in a sandbox environment created by the application container framework to render the device control panel interface; The device communication module provides a unified command communication interface, processes device control commands issued by sub-applications, and forwards them to the platform backend.

[0018] In some embodiments, the sandbox execution module includes: JavaScript sandbox units are used to create independent JavaScript execution contexts for each sub-application to isolate global variables; The style sandbox unit is used to encapsulate and proxy the document object model operations of sub-applications to achieve style isolation.

[0019] The beneficial effects of this invention compared to the prior art include: The device panel loading method provided by this invention achieves independent development, dynamic loading, and secure isolation of device control panels through a registration, dynamic loading, and isolated operation mechanism based on an application container framework. Through the registration step, the main application can uniformly manage multiple sub-applications corresponding to different devices, laying the foundation for subsequent dynamic loading. Through the loading step, the system can acquire and load sub-application resources on demand based on device identifiers, avoiding the excessive memory consumption problem caused by loading all resources at once in traditional solutions. Through the isolated operation step, the application container framework creates an independent runtime environment for each sub-application, effectively preventing global variable pollution and style conflicts.

[0020] Unified management through the registration process provides a basis for dynamic loading; dynamic loading, based on registration information and performed on demand, directly solves the 'bloat' problem and achieves efficient resource utilization; isolated operation ensures that the loaded sub-applications work independently and stably, resolving 'coupling' and conflict issues. All three are indispensable and work together to support the realization of the beneficial effects at the top level.

[0021] The synergistic effect of these technical features enables the system to achieve efficient resource utilization and effective isolation of the operating environment while ensuring the independence of each device's control panel. Intermediate local benefits include: reduced memory usage, improved system response speed, avoidance of global pollution, and prevention of style conflicts. These intermediate effects work together to ultimately achieve the top-level benefits of improving the maintainability, scalability, and operational stability of the IoT platform.

[0022] In addition, some embodiments also have the following beneficial effects: By setting up communication steps and providing a communication interface defined by the main application, standardized data exchange between the main application and sub-applications is achieved, simplifying communication logic and improving system maintainability.

[0023] By specifying the dynamic loading steps for matching the registry and obtaining resource files, a clear and reliable mechanism for locating and loading sub-applications is provided, ensuring the accuracy and efficiency of dynamic loading.

[0024] By supporting remote updates and hot replacement of resource files, independent deployment and updates of sub-applications are achieved. The device control panel can be updated without restarting the main application, which greatly improves the maintainability and update flexibility of the system.

[0025] By specifying the steps for creating an isolated environment, an effective runtime isolation mechanism is provided for creating independent JavaScript execution contexts and encapsulating DOM operations, ensuring that sub-applications run completely independently.

[0026] By proxying and intercepting access to global objects, the isolation effect is further strengthened, the pollution of the global environment is prevented, and the security and stability of the system are improved.

[0027] By setting sub-application lifecycle management steps, it provides fine-grained management of sub-application resources, enabling the initialization and cleanup of resources at appropriate times, thereby optimizing memory usage and performance.

[0028] By configuring the activation rules for sub-applications, a flexible sub-application triggering mechanism is provided, which can activate the corresponding sub-applications based on different conditions (such as routing), thereby enhancing the intelligence level of the system.

[0029] By mapping and matching device identifiers with sub-application routes, an accurate association between devices and control panels is established, ensuring that user operations can correctly trigger the corresponding device panel interface.

[0030] By providing an IoT platform system that includes modules for registration management, dynamic loading, sandbox execution, and device communication, a complete technical solution has been built, enabling the effective implementation of this method in an IoT platform.

[0031] By refining the sandbox execution module into JavaScript sandbox units and style sandbox units, specialized isolation processing units are provided, further optimizing the isolation effect and system performance.

[0032] Other beneficial effects of the embodiments of the present invention will be further described below. Attached Figure Description

[0033] Figure 1 This is a flowchart of a device panel loading method according to an embodiment of the present invention.

[0034] Figure 2 This is a flowchart of a device panel loading method according to another embodiment of the present invention.

[0035] Figure 3 This is a schematic diagram of the framework between QianKun and its sub-applications in an embodiment of the present invention.

[0036] Figure 4 This is a schematic diagram illustrating the loading of sub-applications and routing matching rules in an embodiment of the present invention. Detailed Implementation

[0037] The present invention will be further described below with reference to the accompanying drawings and preferred embodiments. It should be noted that, unless otherwise specified, the embodiments and features described in this application can be combined with each other.

[0038] It should be noted that the directional terms such as left, right, up, down, top, and bottom used in this embodiment are only relative concepts or are based on the normal use of the product, and should not be considered as restrictive.

[0039] Implementation concept: The core concept of this invention is to build the main application of an IoT platform based on an application container framework (such as the Qiankun framework), and develop and deploy the control panel of each device as an independent sub-application. The main application is responsible for registering, managing, and loading these sub-applications. When a user needs to operate a specific device, the corresponding sub-application resources are dynamically loaded according to the device identifier, and the sub-application is run in a sandbox isolation environment to render the device control interface. In this way, independent development, technology stack independence, on-demand loading, runtime isolation, and unified communication of the device control panel are achieved, solving various drawbacks of traditional monolithic architectures.

[0040] Example 1: This embodiment provides a device panel loading method based on the Qiankun framework, applied to an Internet of Things (IoT) platform, such as... Figure 1 As shown, the method includes the following steps: S1. Registration Steps: Based on the application container framework, the main application registers multiple sub-applications, each of which corresponds to a device (specifically, a device type or a device model). When registering a sub-application, the activation rules of the sub-application are configured. In this embodiment, a sub-application (such as a smart air conditioner control panel) represents the control logic and interface of a device type, which can be shared by all device instances of that type on the platform.

[0041] S2. Loading Step: In response to an operation on the target device, the main application dynamically obtains and loads the corresponding registered sub-application based on the device identifier of the target device; the device identifier is used to map and match the route of the sub-application to determine the sub-application to be loaded and its corresponding control panel interface.

[0042] S3. Isolation Execution Steps: The application container framework creates an isolation environment for the loaded sub-applications and runs the sub-applications in this isolation environment to render the control panel interface of the target device.

[0043] In this embodiment, the application container framework is a micro-frontend framework, which can be the Qiankun framework. The main application is built on the Qiankun framework and is responsible for the registration, lifecycle management, dynamic loading, and sandbox isolation of sub-applications.

[0044] In step S1, the specific implementation is as follows: During the main application startup phase, the registration information of all known device types' sub-applications is loaded via an HTTP interface call to the configuration center or by reading a local configuration file. The registration information includes: device identifier, sub-application entry address, and mount container selector. The device identifier is a unique string uniformly issued by the platform server during the device production phase, and its format is an English string composed of "{company}{device model}{random characters}". The main application obtains this identifier through an API call. The main application calls Qiankun's registerMicroApps method to complete the sub-application registration.

[0045] In step S2, the specific implementation is as follows: When the user selects a target device on the main interface (e.g., clicks "Air Conditioner A"), the main application matches the registered sub-applications based on the device identifier field of that device and triggers the route activation mechanism. Specifically, this includes: matching the sub-application registry based on the device identifier to determine the entry address information of the target sub-application; and obtaining the resource files of the target sub-application based on the entry address information. The method of obtaining these files is to asynchronously load the static resources of the sub-application via HTTP requests (using the browser's fetch method by default, and Xhr method for browser compatibility), and implementing a resource caching mechanism and an error retry strategy. If resource loading fails, three retries are performed with a 3-second interval. If a retry fails, the main application captures the error and displays a message on the interface.

[0046] In step S3, the specific implementation is as follows: The Qiankun framework automatically creates a JavaScript sandbox and a style sandbox when the sub-application loads. The JavaScript sandbox proxies the global object through a proxy, records global variables added or modified during the sub-application's runtime, and restores the original state when the sub-application is uninstalled, preventing global variable pollution between different sub-applications. The style sandbox ensures that CSS styles only apply to their own containers by wrapping each sub-application's DOM node with a Shadow DOM or using a CSS Module scheme (the main application uses the CSS Module scheme, but the scheme used by the sub-applications is not limited), avoiding style conflicts. The sub-application renders its control panel UI independently within the sandbox.

[0047] In this embodiment, the sub-application can be developed using any front-end technology stack (such as React, Vue, Angular, etc., only needing to expose the bootstrap, mount, and unmount lifecycle hooks), exposing lifecycle functions such as bootstrap, mount, and unmount through the standard access protocol provided by Qiankun. The sub-application needs to be packaged into UMD format using build tools such as Webpack (V4, V5), with the following configuration parameters: V4 module.exports = { output: { library: `${packageName}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${packageName}`, }, }; V5 module.exports = { output: { library: `${packageName}-[name]`, libraryTarget: 'umd', chunkLoadingGlobal: `webpackJsonp_${packageName}`, }, }; Example 2: The difference between this embodiment and embodiment 1 is that it also includes a communication step S4: providing a communication interface defined by the main application for communication between the main application and the sub-application running in an isolated environment.

[0048] Specifically, the communication interface includes a message passing method for sending instructions to the device. The main application provides a unified device instruction communication layer. When a sub-application needs to send control or configuration instructions to the target device, it sends the instructions to the communication layer. The communication layer (which listens for events via an event bus, processes the parameters upon receiving an event message, and then forwards it to the backend service by calling the HTTP backend service interface) processes the instructions and forwards them to the IoT platform backend service.

[0049] The communication interface provides the `sendMessage` method (message passing method). Sub-applications can call this method to send commands to the specified device. The method parameter is a standard protocol communication data object, containing information such as the device ID, command type, and command parameters. The communication data object is in Juapps format, specifically: { from: '', msgType: '', rsl: '', dataType: '', data: '', } Example 3: The difference between this embodiment and embodiment 1 is that the specific implementation method of "dynamically obtaining and loading the corresponding registered sub-application" in step S2 is different.

[0050] In this embodiment, step S2 specifically includes: S21, matching the sub-application registry according to the device identifier to determine the entry address information of the target sub-application; S22, obtaining the resource files of the target sub-application from the remote server according to the entry address information, and supporting remote updates and hot replacements of the resource files.

[0051] To support remote updates and hot swapping, sub-applications are deployed on independent CDN or microservice nodes, and their entry addresses can be dynamically assigned by the configuration center. The main application periodically polls or listens for configuration change events and updates the sub-application registration list in real time.

[0052] In addition, Qiankun supports a preloading strategy, which preloads sub-application resources before the user may perform any actions, thereby improving response speed.

[0053] Example 4: This embodiment provides a device panel loading method based on the Qiankun framework, applied to an Internet of Things (IoT) platform, such as... Figure 2As shown, the main application is built on the Qiankun framework and is responsible for the registration, lifecycle management, dynamic loading, and sandbox isolation of sub-applications. Sub-applications can be developed using any front-end technology stack (such as React, Vue, Angular, etc.) and expose lifecycle functions such as mount / unmount through the standard access protocol provided by Qiankun. This method includes the following steps: G1, Registration Step: The main application registers and manages multiple Panel sub-applications corresponding to different devices based on the Qiankun framework, realizing technology stack-independent micro-application integration. It provides a unified device control panel management interface, the sendMessage(deviceCommandObject, timeout) method. Sub-applications can call this method to send commands to the specified device, which is then processed and forwarded to the backend by the main application. Step G1 specifically includes the following steps: The system entry point provides a registration management interface, which configures the entry address of sub-applications, the mounted container ID, and activates routing rules. The specific routing rule implementation first constructs a corresponding mapping table based on the mapping relationship between device type and routing rules.

[0054] Implement a route matching algorithm based on path prefixes. The matching logic compares data according to field rules to complete the matching mode of main routes and sub-routes, avoiding route conflicts. The management interface provides standard interfaces such as device registration, deregistration, and query, and supports the dynamic addition and deletion of route rules to achieve priority ordering of route rules. Define the mapping relationship between the device's unique identifier and the corresponding control panel. When the device control panel sub-application is loaded, the application can be launched (loaded and mounted) to achieve panel mounting.

[0055] G2. Loading Steps: When it is necessary to control or configure the target device, after the main platform application is correctly loaded, it calls the loadMicroApp function of the Qiankun framework according to the device identifier to dynamically obtain and load the corresponding sub-application file and display it dynamically. This realizes on-demand loading and resource optimization of the control panel, supports remote updates and hot replacement of the control panel, and reduces resource consumption. If resource loading fails, it will retry three times with a retry interval of 3 seconds. If the retry fails, the error will be captured in the main application and displayed on the interface. G3. Isolation Operation Steps: Run the sub-application in the sandbox environment created by the Qiankun framework to render the interface of the device control panel, achieving style isolation and global variable isolation, enabling independent operation and secure isolation of multiple device control panels; The micro-frontend framework is an optimized Qiankun framework. The getTemplate() and fetch() functions in the Qiankun framework are overridden. The overridden functions are for compatibility handling when loading local sub-application resource files in the Android application webview environment. When the main application starts, it provides a global appSDK communication object, which provides methods such as sendMessage for communicating with the main application device backend. When the main application dynamically registers a sub-application, it configures the runtime entry address of the sub-application, and the main application dynamically activates the corresponding sub-application based on the routing status.

[0056] The step G2 of dynamically acquiring and loading the corresponding sub-application file specifically includes: matching the sub-application registry according to the device identifier to determine the unique identifier and entry address information of the target sub-application; and acquiring the resource file of the target sub-application from a remote server or local cache according to the entry address information.

[0057] The dynamic loading mechanism mentioned in step G2 enables on-demand loading and resource optimization of the control panel, supports remote updates and hot-swap of the control panel, and specifically includes the following steps: When the main application dynamically obtains sub-application configuration information based on the device identifier, it can asynchronously load the sub-application's static resources via HTTP (Hypertext Transfer Protocol) requests, implementing a resource caching mechanism and an error retry strategy. The core of this dynamic sub-application loading mechanism is to intelligently match and load the corresponding sub-application file using the device identifier, constructing a dynamic loader element (dynamic script loading mechanism). This is achieved through the ES6 `import()` function, enabling runtime on-demand loading, thereby achieving dynamic loading and memory optimization of class files (modules or application packages). The dynamic loading layer handles runtime component loading and unloading, reducing memory consumption and improving overall system efficiency. When hot updates are needed, the corresponding sub-application file is directly updated via a corresponding HTTP request, eliminating the need for a global update, achieving asynchronous loading and resource compression, and reducing bandwidth consumption.

[0058] Step G3 implements style isolation and global variable isolation, enabling independent operation and security isolation of control panels across multiple devices. This includes the following steps: First, each sub-application is encapsulated within an independent DOM, and its style scope is limited to its own scope to avoid global style pollution and conflicts. Second, an independent execution context is created for each sub-application to intercept and rewrite global object access, preventing variable leaks and overwriting. The entire system utilizes a multi-sandbox environment parallel execution architecture, employs global variable access interception and proxy techniques, and automatically detects and cleans up memory leaks.

[0059] Running in a sandbox environment specifically includes: creating an independent JavaScript execution context for each sub-application to isolate global variables; and encapsulating the DOM (Document Object Model) operations of the sub-applications to achieve style isolation.

[0060] The sub-application communicates with the main application of the platform through custom events or global states.

[0061] The method further includes: the platform's main application providing a unified device command communication layer; When the sub-application needs to send control or configuration commands to the target device, it sends the commands to the communication layer, which processes them and then forwards them to the IoT platform backend service.

[0062] The communication layer also includes a custom event method sendMessage, whose parameter is a standard protocol communication data object.

[0063] The method also includes a sub-application lifecycle management step: before the sub-application is loaded, after it is mounted, and when it is unmounted, its preset bootstrap (startup / initialization), mount (mounting), and unmount (unmounting) lifecycle functions are triggered respectively, and resource management is performed.

[0064] This invention proposes a device panel loading method and system based on the Qiankun framework. By encapsulating all panel sub-applications and dynamically matching and loading corresponding sub-applications based on device identifiers, it avoids loading all resources at once, thus improving overall system performance. It supports the coexistence of different technology stacks (React (a JavaScript library) / Vue (a JavaScript framework) / Angular (a front-end framework)), achieving technology stack independence. Each sub-application can be developed and deployed independently, improving team collaboration efficiency. Style isolation and a sandbox environment prevent global variable pollution, ensuring that each sub-application runs in a completely independent environment.

[0065] Example 5: This invention provides an IoT platform system that uses the Qiankun micro-frontend framework to decouple the main application from multiple device-specific sub-applications (Panels), enabling on-demand loading and runtime isolation. Specifically, it includes: The registration management module is used to register and manage multiple control panel sub-applications corresponding to different device types based on the micro-frontend framework; The dynamic loading module is used to dynamically obtain and load the corresponding sub-application resource files based on the device identifier when it is necessary to control or configure the target device. A sandbox execution module is used to run the sub-application in a sandbox environment created by the micro-frontend framework to render the device control panel interface; The device communication module provides a unified command communication interface, processes device control commands issued by sub-applications, and forwards them to the platform backend. The sandbox execution module specifically includes: JavaScript sandbox units are used to create independent JavaScript execution contexts for each sub-application to isolate global variables; The style sandbox unit is used to encapsulate and proxy the document object model operations of sub-applications to achieve style isolation.

[0066] refer to Figure 3 The system in this embodiment of the invention consists of a main application, multiple sub-applications, and a platform backend service. The main application acts as a container, registering sub-applications through the `loadMicroApp` method of the Qiankun framework. When a user selects a device, the device ID is passed to the main application. The main application obtains the device identifier through an API interface, dynamically loads the corresponding sub-application file using the device identifier, and passes the currently loaded route parameters. The sub-application dynamically matches the interface based on the current route and renders the matched route interface. Simultaneously, the main application provides a global event bus mechanism and a unified device communication interface to enable communication between sub-applications and real devices. The specific process includes user selection, underlying route matching, message bus communication, sub-application loader, frontend module, sub-application modules 1-3, and finally services 1-3.

[0067] Step T1, Reference Figure 3 and Figure 4 Sub-application registration and management: During the main application startup phase, the registration information of all known device types' sub-applications is loaded through the configuration center or local configuration file, including: Equipment identification Sub-application entry address Mount Container Selector The device identifier is a unique string uniformly issued by the platform server. Its format is an English string composed of {company}_{device model}_{random characters}. The main application obtains this identifier through API calls.

[0068] The main application calls the Qiankun method to complete the registration of sub-applications. Through the route matching mechanism, the main application achieves unified registration and management of multiple device control panel sub-applications, and the technology stacks of each sub-application are independent, which facilitates parallel development and maintenance by multiple teams. Sub-applications need to be packaged into UMD (Universal Module Definition) format using build tools such as Webpack, and expose three lifecycle hook functions, bootstrap, mount, and unmount, for the main application to call.

[0069] Step T2: On-demand dynamic loading and remote updates. When the user selects the target device on the main interface (e.g., click "Air Conditioner A"), the main application matches the registered sub-applications based on the fields of the device and triggers the route activation mechanism to automatically load the static resources of the corresponding sub-applications.

[0070] To support remote updates and hot replacements, sub-applications are deployed on microservice nodes, and their entry addresses can be dynamically distributed by the configuration center, such as... Figure 4 The main application consists of sub-application modules 1 to 1. The main application periodically polls or listens for configuration change events and updates the sub-application registration list in real time, allowing new device panels or updates to existing panel logic to be launched without redeploying the main application.

[0071] In addition, Qiankun supports a preloading strategy, which preloads sub-application resources before the user may perform any operation, thereby improving response speed; at the same time, inactive sub-applications do not load any resources, significantly reducing memory and bandwidth usage.

[0072] Step T3: Sandbox Environment and Runtime Isolation. The Qiankun framework automatically creates a JavaScript sandbox and a style sandbox when the sub-application loads. A proxy is used to record global variables added or modified during the sub-application's runtime, and the original state is restored when the sub-application is unloaded, preventing global variable pollution between different sub-applications. Both the sandbox environment and the proxy are implemented internally within the Qiankun framework. Enabling style isolation wraps each sub-application's DOM node with a Shadow DOM, ensuring that CSS (Cascading Style Sheets) styles only apply to their own container, avoiding style conflicts. It's worth noting that strict style isolation may cause some third-party style components to malfunction. To address this, CSS Modules are used in sub-applications as a supplement to the CSS isolation solution. The sub-application renders its control panel UI (User Interface) independently in the sandbox. When the user interacts (such as adjusting the temperature or turning the device on or off), the sub-application sends an event through window.appSDK.sendMessage({deviceId:1, ...}). The main application listens for this event and then sends the command to the target device through the device communication module.

[0073] The core innovation of this invention lies in combining the "application isolation" and "dynamic loading" characteristics of the micro-frontend architecture with the "device management" requirements of the Internet of Things platform. By using the "device identifier" as the key, independent device control panel sub-applications are dynamically obtained and loaded, thereby enabling independent development, deployment, and resource isolation of the panel without being dependent on the technology stack.

[0074] Example 6: Taking a downlight control panel developed in Vue.js as an example, when the main application obtains information such as the device identifier, entry address, and container selector to be mounted by the sub-application through the API interface, it starts loading the sub-application. When the sub-application is loaded, it first obtains the container selector and route parameters passed by the main application through the exposed mount() method. When creating the Vue application, it passes the container and route parameters. In the mounted() of the root component of the sub-application, it jumps to the corresponding route through the route method to achieve route matching and complete the process of rendering the downlight control panel to the flow controller. After rendering, the sub-application and the platform backend service can exchange data through a unified device communication interface to realize device control.

[0075] The above description, in conjunction with specific preferred embodiments, provides a further detailed explanation of the present invention. It should not be construed that the specific implementation of the present invention is limited to these descriptions. For those skilled in the art, several equivalent substitutions or obvious modifications can be made without departing from the concept of the present invention, and all such modifications, achieving the same performance or purpose, should be considered within the scope of protection of the present invention.

Claims

1. A device panel loading method based on the Qiankun framework, applied to an IoT platform including a main application, characterized in that, The method includes the following steps: S1. Registration steps: Based on the application container framework, the main application registers multiple sub-applications, where each sub-application corresponds to a device; S2. Loading step: In response to an operation on the target device, the main application dynamically obtains and loads the corresponding registered sub-application based on the device identifier of the target device; S3. Isolation Operation Steps: The application container framework creates an isolation environment for the loaded sub-application and runs the sub-application in the isolation environment to render the control panel interface of the target device.

2. The method according to claim 1, characterized in that, In step S1, when registering a sub-application, the activation rules for the sub-application are configured; the application container framework is a micro-frontend framework.

3. The method according to claim 1, characterized in that, In step S2, the corresponding registered sub-applications are dynamically obtained and loaded, specifically including the following steps: S21. Based on the device identifier, match a sub-application registry and determine the entry address information of the target sub-application; S22. Obtain the resource files of the target sub-application based on the entry address information.

4. The method according to claim 1, characterized in that, Step S3 involves creating an isolated environment, specifically including the following steps: S31. Create a separate JavaScript execution context to isolate global variables; S32. Encapsulate the document object model operations of the sub-application to achieve style isolation.

5. The method according to claim 1, characterized in that, In step S1, the application container framework performs proxy interception on access to global objects.

6. The method according to claim 1, characterized in that, It also includes the following steps: S4. Communication Step: Provide a communication interface defined by the main application for communication between the main application and the sub-application running in the isolated environment; the communication interface includes a message passing method for sending instructions to the device; S5. Sub-application lifecycle management steps: When the sub-application is loaded, mounted, and unloaded, its corresponding lifecycle function is triggered.

7. The method according to claim 1, characterized in that, In step S2, the device identifier is used to map and match the route of the sub-application to determine the sub-application to be loaded and its corresponding control panel interface.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the method as described in any one of claims 1 to 7.

9. A computer-readable storage medium having a computer program / instructions stored thereon, characterized in that, When the computer program / instruction is executed by the processor, it implements the method as described in any one of claims 1 to 7.

10. An Internet of Things (IoT) platform system, characterized in that, include: The registration management module is used to register and manage multiple control panel sub-applications corresponding to different device types based on the application container framework; The dynamic loading module is used to dynamically obtain and load the corresponding sub-application resource files based on the device identifier when it is necessary to control or configure the target device. A sandbox execution module is used to run the sub-application in a sandbox environment created by the application container framework to render the device control panel interface; The device communication module provides a unified command communication interface, processes device control commands issued by sub-applications, and forwards them to the platform backend.

Images