A method, device, equipment and storage medium for developing micro-frontend applications

Abstract

The application provides a method and device for developing a micro-frontend application, equipment and a storage medium, which can be applied in the field of Internet of Vehicles or the field of intelligent transportation, and is used to solve the problem of low development reliability of the micro-frontend application. The method comprises the following steps: determining that the display mode of the micro-frontend application in the associated front-end storage node is a use mode, and presenting an online display interface of the micro-frontend application based on an online running environment of the micro-frontend application; in response to a mode switching operation triggered for the online display interface, switching the display mode of the micro-frontend application in the front-end storage node from the use mode to a development mode; and when it is determined that the switching is successful, switching the online display interface to a development display interface of the micro-frontend application based on the online running environment. The development display interface is also presented based on the online running environment, without the need to simulate the online running environment, thereby improving the development reliability.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, device and storage medium for developing micro-frontend applications. Background Technology

[0002] With the continuous development of technology, more and more devices can provide services for developing micro-frontend applications, so that browsers can use different micro-frontend applications to achieve different functions.

[0003] In related technologies, the method for developing micro-frontend applications involves first developing the micro-frontend application locally on the device, and then deploying the developed micro-frontend application online for testing. If issues are found during testing, further development and repair are carried out locally on the device until the micro-frontend application can perform its functions, at which point the development of the micro-frontend application is complete.

[0004] However, using micro-frontend applications online may require collaboration with other micro-frontend applications and the use of online environment variables. If issues are found to be unfixable in a micro-frontend application, fixing and developing it locally on the device becomes difficult because real data from other micro-frontend applications' online usage and the online environment variables are unavailable. Therefore, it's necessary to simulate the online usage data and environment variables of other micro-frontend applications to perform the fix. The simulated data cannot guarantee its authenticity, making accurate fixes and development impossible, resulting in lower stability of the developed micro-frontend application.

[0005] It is evident that, under the relevant technologies, the reliability of micro-frontend application development is relatively low. Summary of the Invention

[0006] This application provides a method, apparatus, computer device, and storage medium for developing micro-frontend applications, which addresses the problem of low reliability in the development of micro-frontend applications.

[0007] Firstly, a method for developing micro-frontend applications is provided, including:

[0008] When the display mode of the micro-frontend application in the associated frontend storage node is determined to be the usage mode, the online display interface of the micro-frontend application is presented based on the online running environment of the micro-frontend application, and the online usage operation triggered by the online display interface is continuously responded to and the corresponding online usage data is recorded.

[0009] In response to a mode switching operation triggered for the online display interface, the display mode of the micro-frontend application in the front-end storage node is switched from the usage mode to the development mode.

[0010] Upon successful switching, based on the online operating environment, the online display interface is switched to the development display interface of the micro-frontend application, and online development operations triggered by the development display interface are continuously responded to. Based on the recorded online usage data, online development of the micro-frontend application is carried out.

[0011] Secondly, an apparatus for developing micro-frontend applications is provided, comprising:

[0012] First processing module: When the display mode of the micro-frontend application in the associated frontend storage node is the usage mode, based on the online running environment of the micro-frontend application, it presents the online display interface of the micro-frontend application, continuously responds to online usage operations triggered by the online display interface, and records the corresponding online usage data.

[0013] The second processing module is used to switch the display mode of the micro-frontend applied in the frontend storage node from the usage mode to the development mode in response to the mode switching operation triggered for the online display interface.

[0014] The first processing module is further configured to: when the switch is confirmed to be successful, based on the online operating environment, switch the online display interface to the development display interface of the micro-frontend application, continuously respond to online development operations triggered by the development display interface, and perform online development of the micro-frontend application based on the recorded online usage data.

[0015] Optionally, the first processing module is further configured to:

[0016] Before presenting the online display interface of the micro-frontend application based on its online runtime environment when the display mode of the micro-frontend application in the associated frontend storage node is determined to be the development mode, the development display interface of the micro-frontend application is presented based on its online runtime environment, and online development operations triggered by the development display interface are continuously responded to to perform online development on the micro-frontend application in order to update the micro-frontend application.

[0017] The second processing module is specifically used for:

[0018] In response to a mode switching operation triggered for the development display interface, the display mode of the updated micro-frontend application in the frontend storage node is switched from the development mode to the usage mode.

[0019] Optionally, the first processing module is specifically used for:

[0020] Based on the online operating environment of the micro-frontend application, load the online display data of the micro-frontend application;

[0021] Obtain the display mode of the micro-frontend application in the associated frontend storage node;

[0022] When the display mode is determined to be the usage mode, the online display interface of the micro-frontend application is presented based on the online display data.

[0023] Optionally, the first processing module is specifically used for:

[0024] In response to the online launch operation of the micro-frontend application, when it is determined that the online running environment of the micro-frontend application is a private cloud environment, a display plugin and an injection plugin are loaded. The display plugin is used to render the online display interface of the micro-frontend application, and the injection plugin is used to inject a mode switching button into the rendered online display interface. The mode switching button is used to respond to the mode switching operation.

[0025] When the display mode of the micro-frontend application in the associated frontend storage node is determined to be the usage mode, the display plugin and the injection plugin are controlled to present the online display interface.

[0026] Optionally, the first processing module is specifically used for:

[0027] The display plugin is controlled to acquire the online display data of the micro-frontend application, and based on the acquired online display data, the initial display interface of the micro-frontend application is presented.

[0028] The display plugin controls the creation of a mode switching button for the micro-frontend application;

[0029] The injection plugin is controlled to present the mode switching button in the initial display interface with a preset display style, and a mode switching event is bound to the mode switching button to switch the initial display interface to the online display interface. The mode switching event is used to switch the display mode between the usage mode and the development mode when the mode switching operation is triggered.

[0030] Optionally, the first processing module is specifically used for:

[0031] Obtain the display mode of the micro-frontend application in the associated frontend storage node;

[0032] When the display mode of the micro-frontend application is determined to be the development mode, the local development data of the micro-frontend application is loaded.

[0033] Based on the online operating environment and local development data, the online display interface is switched to the development display interface of the micro-frontend application.

[0034] Optionally, the second processing module is further configured to:

[0035] After the micro-frontend application is developed online based on the recorded online usage data, in response to the mode switching operation triggered for the development display interface, the display mode of the micro-frontend application in the front-end storage node is switched from the development mode to the usage mode.

[0036] The first processing module is specifically used for:

[0037] Upon successful switching, the online display data of the micro-frontend application is loaded based on the online operating environment.

[0038] Based on the loaded online display data, the development display interface is switched to the online display interface of the micro-frontend application.

[0039] Optionally, both the online display interface and the development display interface display the application identifier and mode switching button of the micro-frontend application. The mode switching button is used to respond to the mode switching operation, and the display style of the application identifier and the mode switching button is associated with the display mode. The first processing module is further configured to:

[0040] The application identifier and the mode switching button are switched from the first display style associated with the usage mode to the second display style associated with the development mode.

[0041] Thirdly, a computer program product is provided, including a computer program that, when executed by a processor, implements the method described in the first aspect.

[0042] Fourthly, a computer device is provided, comprising:

[0043] Memory, used to store program instructions;

[0044] A processor is configured to invoke program instructions stored in the memory and execute the method described in the first aspect according to the obtained program instructions.

[0045] Fifthly, a computer-readable storage medium is provided, the computer-readable storage medium storing computer-executable instructions for causing a computer to perform the method as described in the first aspect.

[0046] In this embodiment, the micro-frontend application stores a display mode in the associated frontend storage node. The display mode can characterize whether the micro-frontend application is using a model or a development mode. Thus, the display mode can be used to directly determine whether the interface to be displayed by the micro-frontend application is an online display interface or a development display interface.

[0047] After presenting the online display interface of the micro-frontend application, it can continuously respond to online usage operations triggered by the online display interface and record the corresponding online usage data. In other words, when the display mode is in usage mode, online usage operations can be triggered on the micro-frontend application based on the online display interface. When responding to a mode switching operation triggered by the online display interface, the display mode will switch from usage mode to development mode, thus presenting the development display interface and continuously responding to online development operations triggered by the development display interface. Based on the recorded online usage data, online development of the micro-frontend application can be performed. Therefore, the online display interface and development display interface of the micro-frontend application can be switched with a single click, eliminating the need for a complex switching process between using the micro-frontend application online and developing it locally, thus improving the efficiency of micro-frontend application development.

[0048] Furthermore, upon successful switching, the development display interface is presented based on the online runtime environment, just like the online display interface. This allows online development operations triggered by the development display interface to directly utilize the online runtime environment, such as environment variables. Thus, without needing to replicate the online runtime environment, the development of micro-frontend applications can be carried out using the real online runtime environment, improving the reliability of micro-frontend application development.

[0049] Furthermore, when developing micro-frontend applications online, it is based on the online usage data of the micro-frontend applications. This means that the development process of micro-frontend applications does not need to imitate the online usage data of other micro-frontend applications. It can obtain real data from the online usage of other micro-frontend applications for development, which further improves the reliability of micro-frontend application development. Attached Figure Description

[0050] Figure 1A This is a schematic diagram illustrating the application field of the method for developing micro-frontend applications provided in the embodiments of this application;

[0051] Figure 1B This is one application scenario for the method of developing micro-frontend applications provided in the embodiments of this application;

[0052] Figure 2 A flowchart illustrating a method for developing micro-frontend applications provided in this application embodiment;

[0053] Figure 3AA schematic diagram illustrating the principle of a method for developing micro-frontend applications provided in this application embodiment;

[0054] Figure 3B A schematic diagram of the principle of a method for developing micro-frontend applications provided in this application embodiment. Figure 2 ;

[0055] Figure 4 A schematic diagram three illustrating the principle of a method for developing micro-frontend applications provided in this application embodiment;

[0056] Figure 5A A schematic diagram of the principle of a method for developing micro-frontend applications provided in this application embodiment. Figure 4 ;

[0057] Figure 5B A schematic diagram five illustrating the principle of a method for developing micro-frontend applications provided in this application embodiment;

[0058] Figure 6A A schematic diagram six illustrating the principle of a method for developing micro-frontend applications provided in this application embodiment;

[0059] Figure 6B A schematic diagram of the principle of a method for developing micro-frontend applications provided in this application embodiment. Figure 7 ;

[0060] Figure 7 An interactive schematic diagram illustrating a method for developing micro-frontend applications provided in an embodiment of this application;

[0061] Figure 8 A schematic diagram of a device for developing micro-frontend applications provided in an embodiment of this application;

[0062] Figure 9 A schematic diagram of the structure of the apparatus for developing micro-frontend applications provided in the embodiments of this application. Figure 2 . Detailed Implementation

[0063] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings.

[0064] The following explanations of some terms used in the embodiments of this application are provided to facilitate understanding by those skilled in the art.

[0065] (1) Micro-frontend applications:

[0066] Micro-frontend applications are decomposed based on functional modules. Different micro-frontend applications can be assembled according to business needs to form different applications, and these micro-frontend applications can communicate with each other. Micro-frontend applications can be deployed and run independently, and they are loosely coupled, allowing for gradual migration.

[0067] This application relates to the field of cloud computing and can be applied to fields such as smart transportation, smart agriculture, smart healthcare, or mapping.

[0068] Cloud computing refers to the delivery and usage model of IT infrastructure, meaning obtaining necessary resources in an on-demand and easily scalable manner through a network. In a broader sense, cloud computing refers to the delivery and usage model of services, meaning obtaining necessary services in an on-demand and easily scalable manner through a network. These services can be IT and software related, internet-related, or other services. Cloud computing is a product of the development and integration of traditional computer and network technologies such as grid computing, distributed computing, parallel computing, utility computing, network storage technologies, virtualization, and load balancing.

[0069] With the development of the internet, real-time data streams, and the diversification of connected devices, as well as the demands for search services, social networks, mobile commerce, and open collaboration, cloud computing has rapidly developed. Unlike previous parallel distributed computing, cloud computing will fundamentally revolutionize the entire internet model and enterprise management model.

[0070] Intelligent Vehicle Infrastructure Cooperative Systems (IVICS) are a development direction of Intelligent Transportation Systems (ITS). IVICS utilizes advanced wireless communication and next-generation Internet technologies to implement comprehensive, real-time dynamic information exchange between vehicles and infrastructure. Based on the collection and fusion of dynamic traffic information across all times and spaces, it conducts active vehicle safety control and cooperative road management, fully realizing effective collaboration between people, vehicles, and roads, ensuring traffic safety, improving traffic efficiency, and thus forming a safe, efficient, and environmentally friendly road traffic system.

[0071] Intelligent Traffic Systems (ITS), also known as Intelligent Transportation Systems, effectively integrate advanced science and technology (information technology, computer technology, data communication technology, sensor technology, electronic control technology, automatic control theory, operations research, artificial intelligence, etc.) into transportation, service control, and vehicle manufacturing. This strengthens the connection between vehicles, roads, and users, thereby forming a comprehensive transportation system that ensures safety, improves efficiency, enhances the environment, and saves energy.

[0072] It should be noted that the embodiments of this application involve online usage data and other related data. When the above embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0073] The following is a brief introduction to the application areas of the method for developing micro-frontend applications provided in the embodiments of this application.

[0074] With the continuous development of technology, more and more devices can provide services for developing micro-frontend applications, so that browsers can use different micro-frontend applications to achieve different functions.

[0075] In related technologies, the method for developing micro-frontend applications involves first developing the micro-frontend application locally on the device, and then deploying the developed micro-frontend application online for testing. If issues are found during testing, further development and repair are carried out locally on the device until the micro-frontend application can perform its functions, at which point the development of the micro-frontend application is complete.

[0076] However, when using micro-frontend applications online, it may be necessary to collaborate with other micro-frontend applications. Please refer to [link / reference needed]. Figure 1A The first micro-frontend application can have functions A and B, the second micro-frontend application can have function C, and the third micro-frontend application can have functions D, E, and F. The first and second micro-frontend applications can be combined into one application, and the first and third micro-frontend applications can be combined into one application, etc., making the micro-frontend applications loosely coupled and allowing them to be freely combined into different applications. Taking the combination of the first and second micro-frontend applications into one application as an example, function A in the first micro-frontend application may need to obtain the execution result of function C in the second micro-frontend application before it can be executed, thus enabling the first and second micro-frontend applications to work collaboratively.

[0077] At the same time, when using micro-frontend applications online, some online environment variables in the online runtime environment of the micro-frontend application will also be used.

[0078] When developing micro-frontend applications locally on a device, and if issues are identified during testing, fixing these issues locally is challenging. Because real-world data from other micro-frontend applications running online is unavailable, and online environment variables are not accessible, it's necessary to simulate online usage data and environment variables from other micro-frontend applications to perform the fixes. However, the authenticity of this simulated data cannot be guaranteed, making accurate fixes impossible and resulting in lower stability of the developed micro-frontend application.

[0079] It is evident that, under the relevant technologies, the reliability of micro-frontend application development is relatively low.

[0080] To address the issue of low reliability in the development of micro-frontend applications, this application proposes a method for developing micro-frontend applications. In this method, when the display mode of the micro-frontend application in the associated frontend storage node is determined to be usage mode, an online display interface of the micro-frontend application is presented based on the online runtime environment of the micro-frontend application. The method continuously responds to online usage operations triggered by the online display interface and records the corresponding online usage data. In response to a mode switching operation triggered by the online display interface, the display mode of the micro-frontend application in the frontend storage node is switched from usage mode to development mode. Upon successful switching, based on the online runtime environment, the online display interface is switched to the development display interface of the micro-frontend application, and the method continuously responds to online development operations triggered by the development display interface. Based on the recorded online usage data, online development of the micro-frontend application is performed.

[0081] In this embodiment, the micro-frontend application stores a display mode in the associated frontend storage node. The display mode can characterize whether the micro-frontend application is using a model or a development mode. Thus, the display mode can be used to directly determine whether the interface to be displayed by the micro-frontend application is an online display interface or a development display interface.

[0082] After presenting the online display interface of the micro-frontend application, it can continuously respond to online usage operations triggered by the online display interface and record the corresponding online usage data. In other words, when the display mode is in usage mode, online usage operations can be triggered on the micro-frontend application based on the online display interface. When responding to a mode switching operation triggered by the online display interface, the display mode will switch from usage mode to development mode, thus presenting the development display interface and continuously responding to online development operations triggered by the development display interface. Based on the recorded online usage data, online development of the micro-frontend application can be performed. Therefore, the online display interface and development display interface of the micro-frontend application can be switched with a single click, eliminating the need for a complex switching process between using the micro-frontend application online and developing it locally, thus improving the efficiency of micro-frontend application development.

[0083] Furthermore, upon successful switching, the development display interface is presented based on the online runtime environment, just like the online display interface. This allows online development operations triggered by the development display interface to directly utilize the online runtime environment, such as environment variables. Thus, without needing to replicate the online runtime environment, the development of micro-frontend applications can be carried out using the real online runtime environment, improving the reliability of micro-frontend application development.

[0084] Furthermore, when developing micro-frontend applications online, it is based on the online usage data of the micro-frontend applications. This means that the development process of micro-frontend applications does not need to imitate the online usage data of other micro-frontend applications. It can obtain real data from the online usage of other micro-frontend applications for development, which further improves the reliability of micro-frontend application development.

[0085] The following describes the application scenarios of the method for developing micro-frontend applications provided in this application.

[0086] Please refer to Figure 1B This is a schematic diagram illustrating an application scenario of the method for developing micro-frontend applications provided in this application. The application scenario includes a client 101 and a server 102. The client 101 and the server 102 can communicate with each other. The communication method can be wired, such as through a network cable or serial cable; or wireless, such as through Bluetooth or Wi-Fi. No specific limitation is imposed.

[0087] Client 101 generally refers to devices capable of presenting a display interface, such as terminal devices, third-party applications accessible by the terminal devices, or web pages accessible by the terminal devices. Terminal devices include, but are not limited to, mobile phones, computers, smart medical devices, smart home appliances, vehicle terminals, or aircraft. Server 102 generally refers to devices that can provide data for client 101 to present the display interface, such as terminal devices or servers. Servers include, but are not limited to, cloud servers, local servers, or associated third-party servers. Both client 101 and server 102 can utilize cloud computing to reduce the consumption of local computing resources; similarly, they can also utilize cloud storage to reduce the consumption of local storage resources.

[0088] As one embodiment, the client 101 and the server 102 can be the same device, and there is no specific limitation. In this embodiment, the client 101 and the server 102 are described as different devices.

[0089] The following is based on Figure 1B This application provides a detailed description of the method for developing micro-frontend applications based on its embodiments. Please refer to [link / reference]. Figure 2 This is a flowchart illustrating a method for developing micro-frontend applications provided in an embodiment of this application.

[0090] S201, when it is determined that the display mode of the micro-frontend application in the associated frontend storage node is the usage mode, based on the online running environment of the micro-frontend application, the online display interface of the micro-frontend application is presented, and the online usage operations triggered for the online display interface are continuously responded to and the corresponding online usage data is recorded.

[0091] Before the first online display interface is presented each time, the client can obtain the display mode stored in the associated frontend storage node of the micro-frontend application. When the display mode is determined to be the usage mode, the client presents the online display interface of the micro-frontend application based on its online runtime environment. The online display interface generally refers to the interface used to respond to various online usage operations; it can refer to a single interface or multiple interfaces, etc., without specific limitations. Online usage operations can include operations related to the functions of the micro-frontend application, such as data display operations, data analysis and calculation operations, data sending operations, etc., without specific limitations.

[0092] After presenting the online display interface of the micro-frontend application, it can continuously respond to online usage operations triggered by the online display interface and record the corresponding online usage data.

[0093] As one example, the front-end storage node associated with a micro-frontend application can be the browser's localStorage. The server can provide a mode switching object globally, such as a devMode object. The browser's localStorage can then store the object name and value of the devMode object. The object value is used to indicate whether the display mode is in usage mode or development mode. For example, when the object value is "on", the display mode is development mode, and when the object value is "off", the display mode is usage mode.

[0094] Before the client first displays the online interface, the server can use methods registered in the `devMode` object, such as the `getStatus` method, to check the status of the globally maintained variable `status`. If the `status` variable is "on", the server returns "true" to the client, updating the display mode stored in the client's associated frontend storage node to development mode. If the `status` variable is "off", the server returns "false", updating the display mode stored in the client's associated frontend storage node to usage mode. Thus, the client can obtain the display mode stored in the associated frontend storage node to determine whether the display mode is usage mode.

[0095] As one example, when presenting the online display interface of a micro-frontend application in an online runtime environment, the client can first load the online display data of the micro-frontend application based on the online runtime environment. Then, by obtaining the display mode of the micro-frontend application in the associated frontend storage node, and determining that the display mode is the usage mode, the client presents the online display interface of the micro-frontend application based on the online display data.

[0096] As one example, when launching a micro-frontend application, the client responds to the online launch operation for the micro-frontend application. When it determines that the online running environment of the micro-frontend application is a private cloud environment, it loads a display plugin and an injection plugin. The display plugin is used to render the online display interface of the micro-frontend application, and the injection plugin is used to inject a mode switching button into the rendered online display interface. The mode switching button is used to respond to the mode switching operation.

[0097] The client can determine whether the online runtime environment of the micro-frontend application is a private cloud environment by checking whether the access address when starting the micro-frontend application meets the preset matching strategy. For example, if the access address meets "*: / / *.fsphere.cn / *", it means that the access address is a private cloud environment address, so it can be determined that the online runtime environment of the micro-frontend application is a private cloud environment; if the access address does not meet "*: / / *.fsphere.cn / *", it means that the access address is not a private cloud environment address, so it can be determined that the online runtime environment of the micro-frontend application is not a private cloud environment.

[0098] When the client determines that the display mode of the micro-frontend application in the associated frontend storage node is the usage mode, it controls the display plugin and injection plugin to present the online display interface.

[0099] As one embodiment, when controlling the display plugin and injection plugin to present the online display interface, the client can first control the display plugin to obtain the online display data of the micro-frontend application, and based on the obtained online display data, present the initial display interface of the micro-frontend application. Then, the client controls the display plugin to create a mode switching button for the micro-frontend application. The client controls the injection plugin to present the mode switching button in the initial display interface with a preset display style, and binds a mode switching event to the mode switching button to switch the initial display interface to the online display interface. The mode switching event is used to switch the display mode between the usage mode and the development mode when the mode switching operation is triggered.

[0100] The client can load display plugins and inject plugins through browser plugins. The browser plugins can call the mode switching object provided by the server to complete mode switching and present the development display interface and other functions.

[0101] The display plugin can be a lightweight, interpreted, or just-in-time compiled programming language (JavaScript, JS) file named "content_scripts.js" with a function-first approach. After the client loads the "content_scripts.js" file, the "content_scripts.js" file obtains a display file named "html / inject.html", which is the online display data. The content in the "html / inject.html" file is displayed in HTML format, thus presenting the initial display interface of the micro-frontend application.

[0102] The file "content_scripts.js" creates a "script" tag, and sets the "src" attribute of the "script" tag to the "js / inject.js" file to create the mode switching button.

[0103] The injected plugin can be a JS file named "inject.js". The "inject.js" file can retrieve the display mode of the micro-frontend application from the browser's localStorage and determine whether the display mode is usage mode or development mode. The "inject.js" file binds a mode switching event to the mode switching button. This event is used to: switch the display mode from usage mode to development mode when the micro-frontend application's display mode is in usage mode, and switch the display mode from development mode back to usage mode when the mode switching operation is triggered.

[0104] In the initial display interface, the "inject.js" file can use a Cascading Style Sheets (CSS) file named "content.css" to display the mode switch button with a preset style. The "content.css" file can also display the mode switch button with a preset style when the micro-frontend application is in the usage mode, for example, using white text on a gray background. Furthermore, the "content.css" file can also display the mode switch button with a secondary style when the micro-frontend application is in the development mode, for example, using yellow text on a gray background, and so on. The specific style is not limited.

[0105] As one example, before each first presentation of the online display interface or development display interface, the client can obtain the display mode of the micro-frontend application stored in the associated frontend storage node. When it is determined that the display mode of the micro-frontend application in the associated frontend storage node is development mode, the client presents the development display interface of the micro-frontend application based on the online runtime environment of the micro-frontend application, and continuously responds to online development operations triggered by the development display interface to perform online development of the micro-frontend application and update the micro-frontend application.

[0106] In response to a mode switching operation triggered by the development display interface, the display mode of the updated micro-frontend application in the frontend storage node is switched from development mode to usage mode. This allows for online development, eliminating the need for a series of development processes such as online deployment, local fixing, local integration, and online testing. Instead, the updated micro-frontend application can be developed and used directly online, significantly improving the efficiency of micro-frontend application development.

[0107] S202, in response to a mode switching operation triggered by the online display interface, switches the display mode of the micro-frontend application in the front-end storage node from usage mode to development mode.

[0108] After presenting the online interface of the micro-frontend application, in response to the mode switching operation triggered by the online interface, the display mode of the micro-frontend application in the frontend storage node is switched from usage mode to development mode. For example, a browser plugin can update the value of the object corresponding to the name of the devMode object storing the micro-frontend application in the browser's localStorage from "off" to "on", indicating that the display mode in the frontend storage node has switched from usage mode to development mode.

[0109] Browser plugins can call the server and, through the methods registered in the devMode object to enter development mode, such as devMode.enter(${application name of the micro-frontend application}), update the status of the globally maintained variable status from "off" to "on".

[0110] The browser plugin can also store the application names of each micro-frontend application that has enabled development mode in the browser's localStorage. Thus, the browser plugin can add the application name of the current micro-frontend application to the browser's localStorage. For example, it can add an application name field to the browser's localStorage and set the value of the application name field to the application name of the current micro-frontend application.

[0111] S203, upon confirming a successful switch, based on the online operating environment, the online display interface is switched to the development display interface of the micro-frontend application, and online development of the micro-frontend application is carried out continuously in response to online development operations triggered by the development display interface, based on the recorded online usage data.

[0112] The client can obtain the display mode from the associated frontend storage node of the micro-frontend application. A successful switch indicates the display mode is set to development mode; a failed switch indicates the display mode is set to usage mode.

[0113] Upon successful switching, the client can switch the online display interface to the development display interface of the micro-frontend application, based on the online runtime environment. Since both the development and online displays are based on the online runtime environment, the micro-frontend application operates within the same online runtime environment for both online development operations triggered by the development interface and online usage operations triggered by the online interface. Therefore, the development and usage processes of the micro-frontend application can be based on the same and real online environment variables, eliminating the need to simulate the online runtime environment or its variables during development, thus improving the reliability of micro-frontend application development.

[0114] After the development interface of the micro-frontend application is displayed, the client can continuously respond to online development operations triggered by the development interface, and perform online development of the micro-frontend application based on the recorded online usage data. The online usage data is data generated during the use of the micro-frontend application, so online development of the micro-frontend application can be based on real data, without needing to imitate the data when using the micro-frontend application, further improving the development reliability of the micro-frontend application.

[0115] As one example, upon successful switching, based on the online runtime environment, when switching the online display interface to the development display interface of the micro-frontend application, the client can obtain the display mode of the micro-frontend application in the associated frontend storage node. When the display mode of the micro-frontend application is determined to be development mode, the local development data of the micro-frontend application is loaded. Based on the online runtime environment and local development data, the online display interface is switched to the development display interface of the micro-frontend application.

[0116] For example, when the display mode of the micro-frontend application is determined to be development mode, the local development data of the micro-frontend application is loaded, and the corresponding data in the online display data is replaced with the local development data. Based on the online running environment and the replaced online display data, the online display interface is switched to the development display interface of the micro-frontend application.

[0117] Continuing with the example of using the browser's localStorage as the front-end storage node, when the display mode of the micro-frontend application is determined to be development mode, the client can obtain the application name of the micro-frontend application currently in development mode from the browser's localStorage. Based on the application name of the micro-frontend application, a file named "http: / / wds.test / local / ${micro-frontend application name}.js" is dynamically loaded. This file replaces the "{micro-frontend application name}.js" file in the online display data, allowing the local development data to simulate the online display data. This enables development or debugging of the online display data.

[0118] The file "http: / / wds.test / local / ${the application name of the micro-frontend application}.js" can be proxied into the local JS file using proxy software. This loosely couples the "http: / / wds.test / local / ${the application name of the micro-frontend application}.js" file with other files in the local JS file, facilitating development and modification.

[0119] As one embodiment, after the development display interface is presented, the client can respond to a mode switching operation triggered by the development display interface, switching the display mode of the micro-frontend application in the frontend storage node from development mode to usage mode. Upon successful switching, the online display data of the micro-frontend application is loaded based on the online runtime environment. Based on the loaded online display data, the development display interface is switched to the online display interface of the micro-frontend application.

[0120] As one example, both the online display interface and the development display interface display an application identifier and a mode switching button for the micro-frontend application. The mode switching button is used to respond to mode switching operations, and the display style of the application identifier and the mode switching button is associated with the display mode.

[0121] When switching from the online display interface to the development display interface, the application icon and mode switch button can be changed from the first display style associated with the usage mode to the second display style associated with the development mode. The first display style can be white text on a gray background, and the second display style can be yellow text on a gray background, etc., with no specific restrictions. Please refer to [reference needed]. Figure 3A This is a schematic diagram illustrating the switching of the display style of the application identifier and mode switching button. The display style of the application identifier and mode switching button changes from the white text and light gray background associated with the usage mode to the yellow text and dark gray striped background associated with the development mode.

[0122] When switching from the development display interface to the online display interface, the application identifier and mode switch button can be changed from the second display style associated with development mode to the first display style associated with usage mode. This display style clearly indicates whether the current display interface is the online or development interface, improving display flexibility.

[0123] Please refer to Figure 3B This is a schematic diagram illustrating the switching of the display style of the application identifier and mode switching button. The display style of the application identifier and mode switching button changes from the yellow text and dark gray striped background associated with the development mode to the white text and light gray background associated with the usage mode.

[0124] The following is an example of the method for developing micro-frontend applications provided in the embodiments of this application.

[0125] Considering the relevant technologies, in the micro-frontend scenario, during the development of micro-frontend applications, the micro-frontend application needs to be developed independently of the frontend framework in the private cloud platform. The data used during development is fake data simulated by the frontend. After the corresponding functions are developed, the micro-frontend application is then integrated into the frontend framework in the private cloud platform, so that the micro-frontend application can run first and achieve the goal of using the micro-frontend application first.

[0126] However, without the front-end framework on a private cloud platform, micro-frontend applications cannot simulate a real online operating environment. Some environment variables in the online environment are unusable, often requiring the manual creation of fake data to complete development. Furthermore, the use of fake data during development can lead to instability in the resulting micro-frontend application versions. If issues remain to be fixed in a micro-frontend application integrated into the private cloud platform's front-end framework, a process of fixing, releasing, integrating, and testing is necessary. If issues persist, this process must be repeated multiple times, resulting in low efficiency in developing micro-frontend applications.

[0127] Therefore, in this application embodiment, a method for developing micro-frontend applications is proposed to solve the problem of low reliability in the development of micro-frontend applications caused by the falsification of fake data.

[0128] The front-end framework in the private cloud platform, also known as the micro-front-end foundation, can provide a devMode object to the global system. The devMode object can have four methods, and different functions can be implemented by calling different methods. The `devMode` object has four methods: an initialization method, `devMode.init`, which is executed the first time the online or development interface is rendered to refresh the page; it is not executed when navigating between online and development interfaces; an entry method, `devMode.enter`, executed when navigating from the online interface to the development interface to update the current display mode and refresh the page; an exit method, `devMode.exit`, executed when navigating from the development interface to the online interface to update the current display mode and refresh the page; and a status method, `devMode.getStatus`, which retrieves the value of `devMode` from the browser's `localStorage`. A value of "on" indicates that the micro-frontend application is in development mode, and a value of "off" indicates that the micro-frontend application is in usage mode.

[0129] For the `devMode` object provided by the micro-frontend platform, please refer to the following for the method calling process. Figure 4When the devMode.init method is called, the devMode object is initialized, and a status variable is maintained globally. When the status variable is "on", it means that the micro-frontend application is in development mode, and when the value is "off", it means that the micro-frontend application is in usage mode.

[0130] You can check the status of the status variable by calling the devMode.getStatus method. If the status variable is "on", it returns "true"; if the status variable is "off", it returns "false".

[0131] When "false" is returned, it indicates that the micro-frontend application is in usage mode. In this case, the online display interface can be presented based on the online display data, or the development display interface can be switched to the online display interface. Both the online and development display interfaces can have an application identifier for the micro-frontend application and a mode switching button. The application identifier identifies which micro-frontend application is currently being displayed, and the mode switching button is used to switch between the online and development display interfaces.

[0132] Therefore, when presenting the online display interface, the application identifier and mode switching button of the micro-frontend application can be displayed in the first display style associated with the usage mode. For example, please refer to... Figure 5A The micro-frontend application's icon and mode switching button are displayed in white text on a gray background. When switching from the development display interface to the online display interface, the display style of the micro-frontend application's icon and mode switching button can be changed from the second display style to the first display style associated with the usage mode. For example, please refer to... Figure 5B The interface changes from displaying the micro-frontend application's logo and mode switching button on a yellow background with striped text to displaying the same logo and mode switching button on a white background with gray text.

[0133] The browser's localStorage can also record the application name of the micro-frontend application currently in development mode. So, when it returns "true", it means that the display mode of the micro-frontend application is development mode. You can get the application name of the micro-frontend application currently in development mode from the browser's localStorage. For example, you can use the statement localStorage.getItem('appName') to get the application name of the micro-frontend application currently in development mode.

[0134] Based on the obtained application name, dynamically load local development data, such as loading local " http: / / wds.test / local / ${application name}.js This file replaces the "application name.js" file in the online data display, thus using a local JS file to simulate the online JS file, achieving the purpose of developing and debugging the online JS file. The local "..." http: / / wds.test / local / ${application name}.js "The file can be proxied to the local JS file through third-party proxy software. This allows the development display interface to be presented, or the online display interface to be switched to the development display interface."

[0135] When presenting the development display interface, the application identifier and mode switching button of the micro-frontend application can be displayed in the second display style associated with the development mode. For example, please refer to [reference needed]. Figure 6A The micro-frontend application's icon and mode switching button are displayed against a yellow striped background. When switching from the online display interface to the development display interface, the display style of the micro-frontend application's icon and mode switching button can be changed from the second display style to the first display style associated with the usage mode. For example, please refer to... Figure 6B The interface changes from displaying the micro-frontend application's logo and mode switching button on a yellow background with striped text to displaying the same logo and mode switching button on a white background with gray text.

[0136] When the devMode.enter method is called, for example devMode.enter(${appName}), it indicates that the micro-frontend application is about to enter the development display interface.

[0137] Set the globally maintained status variable to "on".

[0138] In the browser's localStorage, add the object name of the devMode object, with the corresponding value being "on", for example, localStorage.setItem('devMode', 'on').

[0139] In the browser's localStorage, add the application name of the micro-frontend application and set its value to "on", for example, localStorage.setItem('appName', 'on'), indicating that the micro-frontend application is currently in development mode. Refresh the micro-frontend application's display interface and call the devMode.init method to complete the rendering of the development display interface.

[0140] When the devMode.exit method is called, it indicates that the micro-frontend application is about to enter the online display interface, and the globally maintained status variable is set to "off".

[0141] In the browser's localStorage, delete the devMode object, for example, localStorage.removeItem('devMode', 'on'), or set the value corresponding to the object name of the devMode object to "off". In the browser's localStorage, delete the application name of the micro-frontend application, indicating that the micro-frontend application is not in development mode.

[0142] Refresh the display interface of the micro-frontend application and call the devMode.init method to complete the online display interface presentation.

[0143] To invoke the devMode object and respond to the execution of its methods in the browser, displaying the corresponding results, this can be achieved using a browser plugin. Please refer to [link / reference needed]. Figure 7 .

[0144] S701, in response to an online launch operation for a micro-frontend application, the browser plugin can first determine whether the access address of the micro-frontend application is a private cloud address via "*: / / *.fsphere.cn / *". If it is determined that it is not a private cloud address, then online development services will not be provided.

[0145] S702: When the browser plugin determines that the address is a private cloud address, it loads the corresponding JS file based on the access address, for example, loading the content_scripts.js file. The browser plugin then uses the loaded content_scripts.js file to obtain the content from "html / inject.html", and presents the obtained content in HTML format to render the online or development display interface.

[0146] In S703, the browser plugin creates a mode switching button by loading the content_scripts.js file. It creates a script tag in the JS file and sets the src attribute to the "js / inject.js" file, injecting the mode switching button into the online or development display interface.

[0147] S704, the browser plugin loads the corresponding CSS file based on the access address, for example, the "css / content.css" file.

[0148] The S705 features a mode switching button that displays different styles depending on the usage mode or development mode, via a CSS file.

[0149] In S706, the browser plugin binds a mode switching event to the injected mode switching button. When a mode switching operation is triggered by the mode switching button, the `devMode.enter` method is called to switch from the online display interface to the development display interface. The mode switching button changes from the first display style associated with the usage mode to the second display style associated with the development display mode. Alternatively, when a mode switching operation is triggered by the mode switching button, the `devMode.exit` method is called to switch from the development display mode to the online display mode. The mode switching button changes from the second display style associated with the development mode to the first display style associated with the online display mode.

[0150] Based on the same inventive concept, embodiments of this application provide an apparatus for developing micro-frontend applications, capable of realizing the functions corresponding to the aforementioned method for developing micro-frontend applications. Please refer to... Figure 8 The device includes a first processing module 801 and a second processing module 802, wherein:

[0151] First processing module 801: When it is determined that the display mode of the micro-frontend application in the associated frontend storage node is the usage mode, based on the online running environment of the micro-frontend application, it presents the online display interface of the micro-frontend application, continuously responds to online usage operations triggered by the online display interface, and records the corresponding online usage data.

[0152] The second processing module 802 is used to switch the display mode of the micro-frontend application in the front-end storage node from the usage mode to the development mode in response to the mode switching operation triggered for the online display interface.

[0153] The first processing module 801 is also used to: when the switch is confirmed to be successful, based on the online operating environment, switch the online display interface to the development display interface of the micro-frontend application, continuously respond to online development operations triggered for the development display interface, and perform online development of the micro-frontend application based on the recorded online usage data.

[0154] In one possible embodiment, the first processing module 801 is further configured to:

[0155] Before presenting the online display interface of the micro-frontend application based on its online runtime environment, if the display mode of the micro-frontend application in the associated frontend storage node is determined to be the development mode, the development display interface of the micro-frontend application is presented based on its online runtime environment, and online development operations triggered by the development display interface are continuously responded to to update the micro-frontend application.

[0156] The second processing module 802 is specifically used for:

[0157] In response to a mode switching operation triggered by the development display interface, the display mode of the updated micro-frontend application in the frontend storage node is switched from development mode to usage mode.

[0158] In one possible embodiment, the first processing module 801 is specifically used for:

[0159] Based on the online runtime environment of the micro-frontend application, load the online display data of the micro-frontend application;

[0160] Get the display mode of the micro-frontend application in the associated frontend storage node;

[0161] When the display mode is determined to be the usage mode, the online display interface of the micro-frontend application is presented based on the online display data.

[0162] In one possible embodiment, the first processing module 801 is specifically used for:

[0163] In response to the online startup operation for the micro-frontend application, when it is determined that the online running environment of the micro-frontend application is a private cloud environment, the display plugin and the injection plugin are loaded. The display plugin is used to render the online display interface of the micro-frontend application, and the injection plugin is used to inject a mode switching button into the rendered online display interface. The mode switching button is used to respond to the mode switching operation.

[0164] When the display mode of the micro-frontend application in the associated frontend storage node is determined to be the usage mode, the display plugin and injection plugin are controlled to present the online display interface.

[0165] In one possible embodiment, the first processing module 801 is specifically used for:

[0166] The control display plugin obtains the online display data of the micro-frontend application and presents the initial display interface of the micro-frontend application based on the obtained online display data.

[0167] The control display plugin provides a button for switching the creation mode of micro-frontend applications;

[0168] The control injection plugin displays the mode switching button in the initial display interface with a preset display style, and binds a mode switching event to the mode switching button to switch the initial display interface to the online display interface. The mode switching event is used to switch the display mode between the use mode and the development mode when the mode switching operation is triggered.

[0169] In one possible embodiment, the first processing module 801 is specifically used for:

[0170] Get the display mode of the micro-frontend application in the associated frontend storage node;

[0171] When the display mode of the micro-frontend application is set to development mode, load the local development data of the micro-frontend application.

[0172] Based on the online operating environment and local development data, the online display interface is switched to the development display interface of the micro-frontend application.

[0173] In one possible embodiment, the second processing module 802 is further configured to:

[0174] After developing the micro-frontend application online based on the recorded online usage data, in response to the mode switching operation triggered by the development display interface, the display mode of the micro-frontend application in the frontend storage node is switched from development mode to usage mode.

[0175] The first processing module 801 is specifically used for:

[0176] Once the switch is confirmed to be successful, the online display data of the micro-frontend application is loaded based on the online operating environment;

[0177] Based on the loaded online display data, the development display interface is switched to the online display interface of the micro-frontend application.

[0178] In one possible embodiment, both the online display interface and the development display interface display an application identifier and a mode switching button for the micro-frontend application. The mode switching button is used to respond to mode switching operations, and the display style of the application identifier and the mode switching button is associated with the display mode. The first processing module 801 is further configured to:

[0179] Switch the application identifier and mode switch button from the first display style associated with the usage mode to the second display style associated with the development mode.

[0180] Please refer to Figure 9 The aforementioned apparatus for developing micro-frontend applications can run on a computer device 900. The current and historical versions of the data storage program, as well as the application software corresponding to the data storage program, can be installed on the computer device 900, which includes a processor 980 and a memory 920. In some embodiments, the computer device 900 may include a display unit 940, which includes a display panel 941 for displaying a user-interactive interface, etc.

[0181] In one possible embodiment, the display panel 941 may be configured in the form of a liquid crystal display (LCD) or an organic light-emitting diode (OLED).

[0182] The processor 980 is used to read a computer program and then execute the methods defined by the computer program. For example, the processor 980 reads a data storage program or file, thereby running the data storage program on the computer device 900 and displaying the corresponding interface on the display unit 940. The processor 980 may include one or more general-purpose processors, and may also include one or more DSPs (Digital Signal Processors) for performing related operations to implement the technical solutions provided in the embodiments of this application.

[0183] The memory 920 generally includes main memory and secondary storage. Main memory can be random access memory (RAM), read-only memory (ROM), and cache, etc. Secondary storage can be a hard disk, optical disk, USB flash drive, floppy disk, or magnetic tape drive, etc. The memory 920 is used to store computer programs and other data. The computer programs include applications corresponding to each client, and other data may include data generated after the operating system or applications are run, including system data (e.g., operating system configuration parameters) and user data. In this embodiment, program instructions are stored in the memory 920, and the processor 980 executes the program instructions in the memory 920 to implement any of the methods described in the preceding figures.

[0184] The aforementioned display unit 940 is used to receive input digital information, character information, or contact touch operations / non-contact gestures, and to generate signal inputs related to user settings and function control of the computer device 900. Specifically, in this embodiment, the display unit 940 may include a display panel 941. The display panel 941, for example, is a touch screen, which can collect touch operations performed by the user on or near it (such as operations performed by the user using a finger, stylus, or any suitable object or accessory on or on the display panel 941), and drive corresponding connection devices according to a pre-set program.

[0185] In one possible embodiment, the display panel 941 may include two parts: a touch detection device and a touch controller. The touch detection device detects the player's touch position and the signal generated by the touch operation, and transmits the signal to the touch controller. The touch controller receives touch information from the touch detection device, converts it into touch point coordinates, and sends it to the processor 980. It can also receive and execute commands from the processor 980.

[0186] The display panel 941 can be implemented using various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the display unit 940, in some embodiments, the computer device 900 may also include an input unit 930. The input unit 930 may include an image input device 931 and other input devices 932, wherein the other input devices may include, but are not limited to, one or more of the following: a physical keyboard, function keys (such as volume control buttons, power buttons, etc.), a trackball, a mouse, and a joystick.

[0187] In addition to the above, the computer device 900 may also include a power supply 990 for powering other modules, an audio circuit 960, a near-field communication module 970, and an RF circuit 910. The computer device 900 may also include one or more sensors 950, such as an accelerometer, a light sensor, and a pressure sensor. The audio circuit 960 specifically includes a speaker 961 and a microphone 962, for example, the computer device 900 can use the microphone 962 to collect the user's voice and perform corresponding operations.

[0188] As one embodiment, the number of processors 980 can be one or more, and the processors 980 and the memory 920 can be coupled together or relatively independent.

[0189] As one example, Figure 9 The processor 980 in the middle can be used to implement, for example Figure 8 The functions of the first processing module 801 and the second processing module 802 in the process.

[0190] As one example, Figure 9 The processor 980 in the text can be used to implement the functions of the server or terminal devices discussed above.

[0191] Those skilled in the art will understand that all or part of the steps of the above method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it performs the steps of the above method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as mobile storage devices, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0192] Alternatively, if the integrated units of this invention are implemented as software functional modules and sold or used as independent products, they can also be stored in a computer-readable storage medium. Based on this understanding, the technical solutions of the embodiments of this invention, or the parts that contribute to the prior art, can be embodied in the form of software products, for example, through a computer program product. This computer program product is stored in a storage medium and includes several instructions to cause a computer device to execute all or part of the methods described in the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as mobile storage devices, ROM, RAM, magnetic disks, or optical disks.

[0193] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A method for developing micro-frontend applications, characterized in that, include: The method for obtaining the display mode registered in the devMode object provided globally by the micro-frontend base is invoked. The object value of the persistent mode switching object in the frontend storage node associated with the micro-frontend application is read. When the display mode is determined to be the usage mode, the online display data of the micro-frontend application is loaded based on the online runtime environment of the micro-frontend application to present the online display interface of the micro-frontend application. The system continuously responds to online usage operations triggered by the online display interface and records the corresponding online usage data. The online display data includes an online JS file named after the application name of the micro-frontend application. In response to a mode switching operation triggered for the online display interface, the display mode of the micro-frontend application in the frontend storage node is switched from the usage mode to the development mode. The method for entering development mode registered in the devMode object is called. Upon successful switching, a local JS file named after the application is dynamically loaded using proxy software, replacing the online JS file named after the application in the online display data. Based on the online runtime environment and the replaced online display data, the online display interface is switched to the development display interface of the micro-frontend application. The system continuously responds to online development operations triggered by the development display interface and performs online development of the micro-frontend application based on the recorded online usage data.

2. The method according to claim 1, characterized in that, Before determining the display mode as the usage mode, the method further includes: When the display mode of the micro-frontend application in the associated frontend storage node is determined to be development mode, based on the online running environment of the micro-frontend application, the development display interface of the micro-frontend application is presented, and online development operations triggered by the development display interface are continuously responded to to update the micro-frontend application. In response to a mode switching operation triggered for the development display interface, the display mode of the updated micro-frontend application in the frontend storage node is switched from the development mode to the usage mode.

3. The method according to claim 1, characterized in that, When the display mode is determined to be the usage mode, based on the online operating environment of the micro-frontend application, the online display data of the micro-frontend application is loaded to present the online display interface of the micro-frontend application, including: In response to the online launch operation of the micro-frontend application, when it is determined that the online running environment of the micro-frontend application is a private cloud environment, a display plugin and an injection plugin are loaded. The display plugin is used to render the online display interface of the micro-frontend application, and the injection plugin is used to inject a mode switching button into the rendered online display interface. The mode switching button is used to respond to the mode switching operation. When the display mode is determined to be the usage mode, the display plugin and the injection plugin are controlled to present the online display interface.

4. The method according to claim 3, characterized in that, The control of the display plugin and the injection plugin, to present the online display interface, includes: The display plugin is controlled to acquire the online display data of the micro-frontend application, and based on the acquired online display data, the initial display interface of the micro-frontend application is presented; The display plugin controls the creation of a mode switching button for the micro-frontend application; The injection plugin is controlled to present the mode switching button in the initial display interface with a preset display style, and a mode switching event is bound to the mode switching button to switch the initial display interface to the online display interface. The mode switching event is used to switch the display mode between the usage mode and the development mode when the mode switching operation is triggered.

5. The method according to any one of claims 1 to 4, characterized in that, After developing the micro-frontend application online based on the recorded online usage data, the process further includes: In response to a mode switching operation triggered for the development display interface, the display mode of the micro-frontend application in the frontend storage node is switched from the development mode to the usage mode; Upon successful switching, the online display data of the micro-frontend application is loaded based on the online operating environment. Based on the loaded online display data, the development display interface is switched to the online display interface of the micro-frontend application.

6. The method according to any one of claims 1 to 4, characterized in that, Both the online display interface and the development display interface display the application identifier and mode switching button of the micro-frontend application. The mode switching button is used to respond to the mode switching operation. The display style of the application identifier and the mode switching button is associated with the display mode. After switching the online display interface to the development display interface of the micro-frontend application based on the online operating environment, the method further includes: The application identifier and the mode switching button are switched from the first display style associated with the usage mode to the second display style associated with the development mode.

7. An apparatus for developing micro-frontend applications, characterized in that, include: The first processing module is used to call the method for obtaining the display mode registered in the devMode object provided globally by the micro-frontend base, read the object value of the persistent mode switching object in the frontend storage node associated with the micro-frontend application, and when the display mode is determined to be the usage mode, load the online display data of the micro-frontend application based on the online runtime environment of the micro-frontend application to present the online display interface of the micro-frontend application, and continuously respond to online usage operations triggered by the online display interface, recording the corresponding online usage data; the online display data includes: an online JS file named after the application name of the micro-frontend application; The second processing module is used to switch the display mode of the micro-frontend applied in the frontend storage node from the usage mode to the development mode in response to the mode switching operation triggered for the online display interface. The first processing module is further configured to: call the method for entering development mode registered in the devMode object; upon successful switching, dynamically load a local JS file named after the application using proxy software to replace the online JS file named after the application in the online display data; and based on the online operating environment and the replaced online display data, switch the online display interface to the development display interface of the micro-frontend application, continuously respond to online development operations triggered by the development display interface, and perform online development of the micro-frontend application based on the recorded online usage data.

8. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the method as described in any one of claims 1 to 6.

9. A computer device, characterized in that, include: Memory, used to store program instructions; A processor is configured to invoke program instructions stored in the memory and execute the method as described in any one of claims 1 to 6 according to the obtained program instructions.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions for causing a computer to perform the method as described in any one of claims 1 to 6.

Images