Communication method and device based on micro-front-end architecture, terminal and storage medium

Abstract

The invention relates to a communication method and device based on a micro-front-end architecture, a terminal and a storage medium, and relates to the technical field of micro-front-ends, and the method comprises the steps: registering a child application in a parent application, and distributing a first observer function for the child application; the page of the parent application is displayed, when data in the page of the parent application changes, a first function is called through the parent application to trigger data updating, and a first updating message is sent to each first observer function through the first function; and under the condition that the first observer function receives the first update message, updating the page of the sub-application according to the first update message. According to the method and the device, the problem of low communication efficiency among the applications in the micro-front-end architecture in the prior art is solved.

Description

Technical Field

[0001] The present application relates to the field of micro-front-end technology, and in particular to a communication method, device, terminal and storage medium based on a micro-front-end architecture. Background Art

[0002] With the continuous development of front-end technology, the front-end applications of business systems are becoming more and more complex and large. Traditional monolithic applications often find it difficult to cope with the challenges of such complexity and scale. The micro-front-end architecture improves the maintainability and scalability of front-end applications by splitting the front-end application into independent small pieces, so that each small piece can be independently developed, deployed and expanded.

[0003] In the micro-frontend architecture, applications need to communicate with each other to achieve data sharing. In related technologies, a network socket (WebSocket) server provides an API for creating and managing WebSocket connections, as well as an API for sending and receiving data through the connection, thereby realizing a solution for different applications to communicate through server communication. This method of information interaction through a WebSocket server relies on server communication and has the problem of information delay.

[0004] In summary, the related technology has the problem of low communication efficiency between applications in the micro-frontend architecture. Summary of the invention

[0005] The embodiments of the present application provide a communication method, device, terminal and storage medium based on a micro-front-end architecture to solve the technical problem of low communication efficiency between applications in a micro-front-end architecture in the prior art.

[0006] To achieve the above objectives, the embodiments of the present application adopt the following technical solutions: In a first aspect, an embodiment of the present application provides a communication method based on a micro-frontend architecture, the method comprising: Register the child application in the parent application and assign an observer function to the child application; Displaying a page of the parent application, and when data in the page of the parent application changes, triggering data update by calling a first function through the parent application, and sending a first update message to each of the observer functions through the first function; When the first update message is obtained, the page of the sub-application is updated according to the first update message.

[0007] In combination with the first aspect, in a possible design manner, before displaying the page of the parent application, the method further includes: Configuring the sub-application in the parent application, wherein the configuration file for configuring the sub-application includes a cross-domain request header that supports accessing resources from non-same-domain addresses; After the parent application calls the first function to trigger the data update, the method further includes: In the case that the domain name of the parent application is different from the domain name of the child application, the child application obtains the first update message from the parent application through the cross-domain request header.

[0008] In combination with the first aspect, in a possible design manner, registering a child application in a parent application and assigning an observer function to the child application includes: Register multiple sub-applications in the parent application, assign an observer function to each of the sub-applications, and store each of the observer functions in an observer pool; The sending a first update message to each of the observer functions through the first function includes: Each of the observer functions in the observer pool is traversed through the first function, and the first update message is dispatched to each of the observer functions in the observer pool.

[0009] In combination with the first aspect, in a possible design manner, registering the child application in the parent application includes: Acquire registration information, wherein the registration information includes root routing configuration information and root directory information of the sub-application; The sub-application is registered in the parent application through the registration information.

[0010] In combination with the first aspect, in a possible design manner, updating the page of the sub-application according to the first update message includes: Whether the first update message meets the preset conditions is determined by the observer function corresponding to the sub-application. If the first update message meets the preset conditions, the page of the sub-application is updated according to the first update message, wherein the preset conditions include: the data item updated by the first update message is included in the page of the sub-application.

[0011] In combination with the first aspect, in a possible design manner, the configuration file further includes request credentials; The updating of the sub-application page according to the first update message includes: Accessing the first update message of the parent application through the request credential; Update the page of the sub-application according to the first update message.

[0012] In combination with the first aspect, in a possible design manner, after registering the sub-application in the parent application and assigning an observer function to the sub-application, the method further includes: Assigning an observer function to the parent application; Displaying a page of the sub-application, and when data in the page of the sub-application changes, triggering data update by calling a second function through the sub-application, and sending a second update message to each of the observer functions through the second function; When the second update message is obtained, the page of the parent application is updated according to the second update message.

[0013] In a second aspect, an embodiment of the present application provides an application communication device based on a micro-frontend architecture, including: A configuration module, used to register a sub-application in a parent application and assign an observer function to the sub-application; A communication module, used for displaying the page of the parent application, and when data in the page of the parent application changes, triggering data update by calling a first function through the parent application, and sending a first update message to each of the observer functions through the first function; An update module is used to update the page of the sub-application according to the first update message when the first update message is obtained.

[0014] In a third aspect, an embodiment of the present application provides a terminal, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute the method of the first aspect and possible design methods thereof.

[0015] In a fourth aspect, an embodiment of the present application provides a storage medium, in which a computer program is stored, wherein the computer program is configured to execute the method of the first aspect and its possible design manner when running.

[0016] Compared with the prior art, a communication method, device, terminal and storage medium based on a micro-frontend architecture are provided in an embodiment of the present application. By registering a sub-application in a parent application and assigning an observer function to the sub-application; displaying the page of the parent application, when the data in the page of the parent application changes, the parent application calls a first function to trigger data update, and sends a first update message to each observer function through the first function; when the first update message is obtained, the page of the sub-application is updated according to the first update message. The present application is based on the qiankun framework configuration to register a sub-application in a parent application, and configure an observer function for the sub-application to monitor the status changes of the parent application. After registration and configuration are completed, when the data in the page of the parent application changes, the parent application calls the first function to trigger data update, and sends a first update message to each observer function through the first function, thereby communicating with each sub-application. Since the parent application can communicate directly with the sub-application, the problem of communication delay is solved, and the communication efficiency between applications is improved.

[0017] Details of one or more embodiments of the present application are set forth in the following drawings and description to make other features, objects, and advantages of the present application more readily apparent. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings: Figure 1 A hardware structure block diagram of a terminal provided in an embodiment of the present application is shown; Figure 2 A flow chart of a communication method based on a micro-frontend architecture provided in an embodiment of the present application is shown; Figure 3 A schematic diagram of a communication method based on a micro-frontend architecture provided in an embodiment of the present application is shown; Figure 4 A structural block diagram of an application communication device based on a micro-front-end architecture provided in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0019] In order to more clearly understand the purpose, technical solutions and advantages of the present application, the present application is described and illustrated below in conjunction with the accompanying drawings and embodiments.

[0020] Unless otherwise defined, the technical terms or scientific terms involved in this application shall have the general meaning understood by people with general skills in the technical field to which this application belongs. The words "one", "a", "the", "these" and the like in this application do not indicate a quantitative limitation, and they may be singular or plural. The terms "include", "comprise", "have" and any variants thereof involved in this application are intended to cover non-exclusive inclusions; for example, a process, method and system, product or device comprising a series of steps or modules (units) is not limited to the listed steps or modules (units), but may include unlisted steps or modules (units), or may include other steps or modules (units) inherent to these processes, methods, products or devices. The words "connect", "connected", "coupled" and the like involved in this application are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. The "multiple" involved in this application refers to two or more. "And / or" describes the association relationship of associated objects, indicating that there may be three relationships, for example, "A and / or B" may mean: A exists alone, A and B exist at the same time, and B exists alone. Generally, the character " / " indicates that the objects associated with each other are in an "or" relationship. The terms "first", "second", "third", etc. in this application are only used to distinguish similar objects and do not represent a specific ordering of the objects.

[0021] With the continuous development of web front-end and the rise of emerging front-end applications, cross-platform web applications and subdivision areas are increasing, and growing faster and faster. It is becoming increasingly urgent to better maintain the status and operation of each page application. The communication between different applications is also particularly prominent. Different management backends need to log in through different management pages, and effective unified maintenance cannot be achieved. In the micro-front-end architecture, the sub-application is not a module, but an independent application. Dividing the sub-application by business can have better maintainability and decoupling. The sub-application has the ability to run independently, and the frequent communication between applications increases the complexity and coupling of the application. In summary, each sub-application should be divided from the perspective of the business, and the communication between applications should be reduced as much as possible, thereby simplifying the entire application and making the micro-front-end architecture more flexible and controllable. However, the various applications built around the business process may have different sources, which brings difficulties to the communication between applications. Exemplarily, in the related technology, an API for creating and managing WebSocket connections and an API for sending and receiving data through the connection are provided through WebSocket, so as to realize the communication between different applications through server communication. This way of information interaction through the WebSocket server depends on server communication, and there is a problem of information delay. In addition, local storage (localStorage) and browser cookies are native methods provided by the browser. They enable communication between applications by providing readable and writable arrays. However, their disadvantage is that they cannot communicate across IPs and ports and only support the same-origin policy. They cannot read and use each other under different domain names. Moreover, localStorage and cookies are both stored in the browser cache. If other programs clear the cache, the communication status between applications will be out of sync.

[0022] As can be seen from the above, in the previous micro-frontend architecture, applications communicated with each other through WebSocket servers or through localStorage and browser cookies. The former relied on the server to transmit messages, which resulted in information delays, while the latter did not support cross-domain requests and communication was inconvenient. Therefore, the related technologies had the problem of low communication efficiency between applications in the micro-frontend architecture.

[0023] In view of this, an embodiment of the present application provides a communication method based on a micro-frontend architecture, which is used to improve the communication efficiency between applications in the micro-frontend architecture. Specifically, when the parent application in the micro-frontend architecture is waiting to transmit a message, the child application directly communicates with the parent application, and updates the page of the child application when the message is obtained, thereby realizing that the modified content of the page in the parent application can be directly synchronized to the page of the child application, so the communication efficiency is high. The method provided in the embodiment of the present application registers the child application in the parent application and assigns an observer function to the child application; displays the page of the parent application, and when the data in the page of the parent application changes, the parent application calls the first function to trigger the data update, and sends the first update message to each observer function through the first function; when the first update message is obtained, the page of the child application is updated according to the first update message. This application is based on the qiankun framework configuration to register the child application in the parent application, and configure the observer function for the child application to monitor the status changes of the parent application. After registration and configuration are completed, when the data in the page of the parent application changes, the parent application calls the first function to trigger the data update, and sends the first update message to each observer function through the first function, thereby communicating with each child application. Since the parent application can communicate directly with the child application, the problem of communication delay is solved, and the communication efficiency between applications is improved.

[0024] The method can be executed in a terminal, a computer or a similar system. Taking running on a terminal as an example, Figure 1 FIG. 1 shows a hardware structure block diagram of a terminal provided in an embodiment of the present application. Figure 1 As shown, the terminal may include one or more ( Figure 1 Only one is shown in the figure) processor 102, and memory 104 for storing data. Processor 102 may include but is not limited to a processing device such as a microprocessor MCU or a programmable logic device FPGA. Optionally, the terminal may also include a transmission device 106 for communication functions and an input / output device 108, wherein the input / output device 108 may be a display screen, and the display screen displays the page of the parent application or the page of the child application. It can be understood by those skilled in the art that Figure 1 The structure shown is for illustration only and does not limit the structure of the above terminal. Figure 1 More or fewer components as shown, or with Figure 1 Different configurations are shown.

[0025] The memory 104 can be used to store computer programs, for example, software programs and modules of application software. The processor 102 executes various functional applications and data processing by running the computer programs stored in the memory 104, that is, to implement the above method. The memory 104 can be used to store data. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include a memory remotely arranged relative to the processor 102, and these remote memories may be connected to the terminal via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0026] The transmission device 106 is used to receive or send data via a network. The specific example of the above network may include a wireless network provided by a communication provider of the terminal. In one example, the transmission device 106 includes a network adapter (Network Interface Controller, referred to as NIC), which can be connected to other network devices through a base station so as to communicate with the Internet. In one example, the transmission device 106 can be a radio frequency (Radio Frequency, referred to as RF) module, which is used to communicate with the Internet wirelessly.

[0027] The present application embodiment provides a communication method based on a micro front-end architecture. Figure 2 A flow chart of a communication method based on a micro front-end architecture provided in an embodiment of the present application is shown, such as Figure 2 As shown, the method includes steps S201 to S203.

[0028] Step S201: register a child application in a parent application and assign an observer function to the child application.

[0029] This step of registering the sub-application is implemented through the qiankun framework. Exemplarily, the configuration information is declared in the application to declare whether the application is a parent application or a sub-application. The parent application is qiankun: {master:{}}, and the sub-application is qiankun: {slave: {}}. Among them, registering a sub-application in a parent application refers to embedding one or more sub-applications into the parent application to implement a micro-frontend architecture. Specifically, qiankun, as a micro-frontend framework based on single-spa, allows multiple independently developed front-end applications to run in parallel on the same page, where the parent application is responsible for the overall routing and state management, while the sub-application can be independently developed and deployed. For example, the sub-application can be various business modules related to the business process, and different business modules can be compiled by different programming languages. Each sub-application is assigned an observer function to monitor the state changes of the parent application.

[0030] Step S202: display the page of the parent application. When the data in the page of the parent application changes, the parent application calls the first function to trigger data update, and sends a first update message to each observer function through the first function.

[0031] In this embodiment, the observer function monitors specific data changes in the first function, such as monitoring masterProps in the first function. When the data in the page of the parent application changes, the parent application will call the first function to inform each observer function that the data in its page has changed, so that the child application can update its own status and page according to the new data from the parent application to achieve dynamic response.

[0032] For this step, you can declare and export the useQiankunStateForSlave method in the parent application: export function useQiankunstateForslave(){ const [masterState,setMasterState] = usestate({ parentAppId:'oss'}) return { masterstate, setMasterstate, } } And listen in the sub-application: useEffect(()=>{ console.log(JsoN.stringify(masterProps)); if( masterProps 6& masterProps.masterstate 6& masterProps.masterstate.parentAppId ){ setIsshowLayout(false); } },[]); In this way, when the child application is loaded in the parent application, the child application will obtain the message passed by the parent application to the child application when it listens to masterProps, thereby realizing direct communication between the parent application and the child application. Since this kind of communication does not need to transfer information through an additional server, the information transmission delay is small and the communication efficiency is higher.

[0033] Step S203: When the first update message is obtained, update the page of the sub-application according to the first update message.

[0034] Specifically, when the child application is loaded in the parent application and the page of the parent application is modified, the child application can monitor the data changes and obtain the first update message. The first update message includes the updated data of the parent application's page. The child application can parse the first update message to obtain the updated data, and update its own status and page with the updated data to achieve dynamic response.

[0035] In this step, the updated data does not need to be stored in the cache, but is directly notified by the parent application to the child application. Therefore, the updated data can be transmitted to the child application in real time, and the communication status between the parent and child applications will not be out of sync due to the cache being cleared by other applications. Therefore, this communication method is more stable and less prone to status synchronization confusion.

[0036] In the embodiment recorded in the above steps S201 to S203, the child application is loaded in the parent application through the Qiankun framework, and the parent application and the child application communicate through the observer function to solve the problem of low communication efficiency between applications based on the micro front end. The low communication efficiency mainly comes from the following situations. One is that the parent application and the child application need to communicate with each other through the WebSocket server to exchange information synchronously, which increases the server overhead and the time for page request establishment. The parent application and the child application can use the observer function to enable the child application to directly obtain the first update message from the parent application when the data changes. This parent-child communication method does not require the help of a server, so the delay is lower and the efficiency is high. The second is that the parent application and the child application communicate through the same-origin solution based on localstorage and cookies. In this way, each application needs to be deployed under the same domain name and port. The applications cannot be decoupled, and cannot read and use each other under different domain names, and cannot meet the information communication problems under different domain names and ports. Based on this, the parent application and the child application establish communication through the qiankun framework. The child applications under different domain names and ports realize the parent-child communication function by registering under the parent application. This method supports child applications of different programming languages ​​to obtain the messages transmitted by the parent application and make updates, thereby achieving the purpose of accommodating and maintaining multiple child applications under the same domain name, which is convenient for users and improves the user experience.

[0037] In some of the embodiments, before displaying the page of the parent application, the method further includes: configuring the child application in the parent application, wherein the configuration file for configuring the child application includes a cross-domain request header that supports accessing resources from non-same-domain addresses; after triggering the data update by calling the first function through the parent application, the method further includes: when the domain name of the parent application is different from the domain name of the child application, the child application obtains a first update message from the parent application through the cross-domain request header.

[0038] Specifically, the cross-domain request header refers to some header information that the browser automatically adds when making a cross-domain request, which is used to handle security and permission issues related to cross-domain resource sharing (CORS). That is, through the cross-domain request header, you can control which sources can access their resources and how to access the resources, so as to increase the security and flexibility of the application. In this embodiment, the access policy restricted by the cross-domain request header is related to the domain name of the sub-application. For example, the domain names of each sub-application are different, and it can be set to allow clients of any domain name to access the resources in the parent application. Then, when the sub-application monitors the data changes of the parent application, it has the authority to obtain resources from the parent application to update its own page.

[0039] For example, you can configure cross-domain access for the parent application in the NGINX configuration file as follows: Add_header cache-control “no-cache”; Add_header'Access-Control-Allow-Origin'' '; Add_header'Access-Control-Allow-Credentials' 'true'; Add_header 'access-control-allow-methods' 'GET,POST,OPTIONS'; Add header'access-control-request-private-network' 'true'; Add_header 'access-control-allow-private-network' 'true'; In the NGINX configuration file, the first line of data verifies with the source server before using the cached content to ensure that the latest data can be obtained each time the parent application's page is accessed, rather than reading outdated content from the cache. The second line of data indicates that clients with any domain name (such as browsers) are allowed to access the resource, so that sub-applications with different domain names can access the parent application's resources. The third line of data configures that credentials can be carried during cross-domain requests. The fourth line of data lists the allowed HTTP request methods. The fifth line of data configures the server to allow cross-domain requests to access private network resources. The sixth line of data indicates that the server allows cross-domain requests to access private networks. The above configuration can circumvent the browser's homology policy and allow other websites to obtain the website's web page information to achieve the purpose of mutual communication under different domain names.

[0040] In some embodiments, the configuration file further includes request credentials. Updating the sub-application page according to the first update message includes: accessing the first update message of the parent application through the request credentials; and updating the sub-application page according to the first update message.

[0041] The request credentials include Cookies, tokens, etc., which are used to confirm the user's identity to ensure that only authenticated users can access the resources of the parent application.

[0042] In some embodiments, the above-mentioned registering a sub-application in a parent application and assigning an observer function to the sub-application includes: registering multiple sub-applications in the parent application, assigning an observer function to each sub-application, and storing each observer function in an observer pool. The above-mentioned sending a first update message to each observer function through the first function includes: traversing each observer function in the observer pool through the first function, and dispatching the first update message to each observer function in the observer pool.

[0043] Specifically, the observer functions corresponding to each sub-application are stored in the observer pool, which can be understood as a collection of functions, responsible for managing all functions in it and ensuring that these functions can receive notifications in a timely manner. Storing observer functions in the observer pool helps to add new sub-applications to the communication system later. This addition does not require additional modifications to the parent application, so the scalability of the system is improved.

[0044] In some embodiments, in order to facilitate subsequent route interception, the root route configuration and root directory configuration of the sub-application are provided when registering the sub-application. Specifically, the above-mentioned registration of the sub-application in the parent application includes: obtaining registration information, wherein the registration information includes the root route configuration information and root directory information of the sub-application; registering the sub-application in the parent application through the registration information.

[0045] In this embodiment, the root route configuration can clarify the access path of the sub-application so that there will be no conflict between different sub-applications. For example, sub-application A can be accessed through the / appA path, and sub-application B can be accessed through / appB. The root directory information helps the server or front-end framework locate the static resources (such as HTML, CSS, JavaScript files, etc.) required by the sub-application to ensure that these resources can be loaded correctly. With the above configuration, the parent application can effectively manage multiple sub-applications and ensure that they can be loaded and run correctly under the specified route. This can achieve a flexible micro-frontend architecture, allowing different sub-applications to work in parallel in the same parent application.

[0046] In some embodiments, the above-mentioned updating of the page of the sub-application according to the first update message includes: determining whether the first update message meets the preset conditions through the observer function corresponding to the sub-application; if the first update message meets the preset conditions, updating the page of the sub-application according to the first update message, wherein the preset conditions include: the data item used to update by the first update message is included in the page of the sub-application.

[0047] Specifically, if the parent application updates the data, the child application needs to determine whether it needs to be updated to ensure that it can work normally and keep consistent with the parent application. In this embodiment, by setting a preset adjustment to automatically determine the update, the user can obtain the latest information and functions without manually refreshing the page, thereby improving the overall user experience. And if the first update message does not meet the preset conditions, that is, the child application detects that there is no need to update, it is not necessary to update the page of the child application, which can avoid reloading resources, thereby improving performance and response speed.

[0048] In some of the embodiments, after registering a child application in a parent application and assigning an observer function to the child application, the method further includes: assigning an observer function to the parent application; displaying the page of the child application, and when data in the page of the child application changes, triggering a data update by calling a second function through the child application, and sending a second update message to each observer function through the second function; and updating the page of the parent application according to the second update message when the second update message is obtained.

[0049] In this embodiment, the parent application and the sub-application establish communication through the qiankun framework. When the sub-application is updated, the parent application obtains a second update message through communication with the sub-application, thereby accessing the resources of the sub-application and updating the parent application page with the resources of the sub-application.

[0050] The following describes and illustrates the communication method based on the micro-front-end architecture provided in the embodiment of the present application through specific examples. Figure 3 A schematic diagram of a communication method based on a micro-frontend architecture provided by an embodiment of the present application is shown. In the system, parent application A, child application B, and child application C are respectively registered with observer function A, observer function B, and observer function C, and are stored in the observer pool. When the parent / child application is updated, the global state pool will be updated, and the global state pool will notify the observer pool to trigger all observer functions. Then observer function A, observer function B, and observer function C will receive a message. Each application determines whether the page needs to be updated based on the message and preset conditions. If it is confirmed that the page needs to be updated, its own page will be updated with the content updated by the parent / child application. Since different application sets are within the framework of the parent application, each application does not need to re-jump or open its page to update its own page, but completes the update of its own page on the page displayed by the parent / child application, so that the user experience is better.

[0051] The present application also provides an application communication device based on a micro-front-end architecture in an embodiment, which is used to implement the above embodiments and preferred implementations, and will not be repeated for those that have been described. The terms "module", "unit", "sub-unit", etc. used below can implement a combination of software and / or hardware for a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceived.

[0052] Figure 4 A structural block diagram of an application communication device based on a micro front-end architecture provided in an embodiment of the present application is shown. Figure 4 As shown, the device comprises: The configuration module 41 is used to register the sub-application in the parent application and assign an observer function to the sub-application.

[0053] The communication module 42 is used to display the page of the parent application. When the data in the page of the parent application changes, the parent application calls the first function to trigger data update, and sends a first update message to each observer function through the first function.

[0054] The updating module 43 is used to update the page of the sub-application according to the first updating message when the first updating message is obtained.

[0055] In some embodiments, the configuration module 41 is further used to register multiple sub-applications in the parent application, assign an observer function to each sub-application, and store each observer function in an observer pool. The communication module 42 is further used to traverse each observer function in the observer pool through the first function, and dispatch the first update message to each observer function in the observer pool.

[0056] In some of the embodiments, the configuration module 41 is further used to obtain registration information, wherein the registration information includes the root routing configuration information and root directory information of the sub-application; and register the sub-application in the parent application through the registration information.

[0057] In some embodiments, the update module 43 is also used to determine whether the first update message meets the preset conditions through the observer function corresponding to the sub-application. If the first update message meets the preset conditions, the page of the sub-application is updated according to the first update message, wherein the preset conditions include: the data item updated by the first update message is included in the page of the sub-application.

[0058] In some of the embodiments, the update module 43 is further configured to access a first update message of the parent application by requesting credentials; and update a page of the child application according to the first update message.

[0059] It should be noted that the above modules can be functional modules or program modules, and can be implemented by software or hardware. For modules implemented by hardware, the above modules can be located in the same processor; or the above modules can be located in different processors in any combination.

[0060] In this embodiment, an electronic device is further provided, including a memory and a processor, wherein a computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.

[0061] Optionally, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor, and the input / output device is connected to the processor.

[0062] Optionally, in this embodiment, the processor may be configured to execute the following steps S1 to S3 through a computer program.

[0063] S1. Register the sub-application in the parent application and assign an observer function to the sub-application.

[0064] S2. Display the page of the parent application. When the data in the page of the parent application changes, the parent application calls the first function to trigger data update, and sends a first update message to each observer function through the first function.

[0065] S3. When the first update message is obtained, update the page of the sub-application according to the first update message.

[0066] It should be noted that the specific examples in this embodiment can refer to the examples described in the above embodiments and optional implementation modes, and will not be repeated in this embodiment.

[0067] In addition, in combination with the method provided in the above embodiment, a storage medium may be provided in this embodiment to implement the method. The storage medium stores a computer program; when the computer program is executed by the processor, any one of the communication methods based on the micro-frontend architecture in the above embodiment is implemented.

[0068] The embodiment of the present application also provides a computer program product. When the computer program product is run on a computer, the computer executes each function or step executed by the processor in the above method embodiment.

[0069] It should be understood that the specific embodiments described herein are only used to explain the application, rather than to limit it. Based on the embodiments provided in this application, all other embodiments obtained by ordinary technicians in this field without creative work are within the protection scope of this application.

[0070] Obviously, the drawings are only some examples or embodiments of the present application. For ordinary technicians in the field, the present application can also be applied to other similar situations based on these drawings without creative work. In addition, it is understandable that although the work done in this development process may be complicated and lengthy, for ordinary technicians in the field, certain changes in design, manufacturing or production based on the technical content disclosed in this application are only conventional technical means and should not be regarded as insufficient content disclosed in this application.

[0071] The term "embodiment" in this application refers to a specific feature, structure or characteristic described in conjunction with the embodiment that can be included in at least one embodiment of the present application. The appearance of this phrase in various locations in the specification does not necessarily mean the same embodiment, nor does it mean that it is mutually exclusive with other embodiments and is independent or optional. It is clearly or implicitly understood by those of ordinary skill in the art that the embodiments described in this application can be combined with other embodiments without conflict.

[0072] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of patent protection. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the scope of protection of the present application. Therefore, the scope of protection of the present application shall be subject to the attached claims.

Claims

1. A communication method based on a micro front-end architecture, characterized in that: The method comprises: Register the child application in the parent application and assign an observer function to the child application; Displaying a page of the parent application, and when data in the page of the parent application changes, triggering data update by calling a first function through the parent application, and sending a first update message to each of the observer functions through the first function; When the first update message is obtained, the page of the sub-application is updated according to the first update message.

2. The communication method based on micro front-end architecture according to claim 1, characterized in that: Before displaying the page of the parent application, the method further includes: Configuring the sub-application in the parent application, wherein the configuration file for configuring the sub-application includes a cross-domain request header that supports accessing resources from non-same-domain addresses; After the parent application calls the first function to trigger the data update, the method further includes: In the case that the domain name of the parent application is different from the domain name of the child application, the child application obtains the first update message from the parent application through the cross-domain request header.

3. The communication method based on micro front-end architecture according to claim 1, characterized in that: The step of registering a sub-application in a parent application and assigning an observer function to the sub-application includes: Register multiple sub-applications in the parent application, assign an observer function to each of the sub-applications, and store each of the observer functions in an observer pool; The sending a first update message to each of the observer functions through the first function includes: Each of the observer functions in the observer pool is traversed through the first function, and the first update message is dispatched to each of the observer functions in the observer pool.

4. The communication method based on micro front-end architecture according to claim 1, characterized in that: Registering a sub-application in a parent application includes: Acquire registration information, wherein the registration information includes root routing configuration information and root directory information of the sub-application; The sub-application is registered in the parent application through the registration information.

5. The communication method based on micro front-end architecture according to claim 1, characterized in that: The updating of the sub-application page according to the first update message includes: Whether the first update message meets the preset conditions is determined by the observer function corresponding to the sub-application. If the first update message meets the preset conditions, the page of the sub-application is updated according to the first update message, wherein the preset conditions include: the data item updated by the first update message is included in the page of the sub-application.

6. The communication method based on micro front-end architecture according to claim 2, characterized in that: The configuration file also includes request credentials; The updating of the sub-application page according to the first update message includes: Accessing the first update message of the parent application through the request credential; Update the page of the sub-application according to the first update message.

7. The communication method based on micro-frontend architecture according to any one of claims 1 to 6, characterized in that: After registering the child application in the parent application and assigning an observer function to the child application, the method further includes: Assigning an observer function to the parent application; Displaying a page of the sub-application, and when data in the page of the sub-application changes, triggering data update by calling a second function through the sub-application, and sending a second update message to each of the observer functions through the second function; When the second update message is obtained, the page of the parent application is updated according to the second update message.

8. An application communication device based on a micro-frontend architecture, characterized in that: include: A configuration module, used to register a sub-application in a parent application and assign an observer function to the sub-application; A communication module, used for displaying the page of the parent application, and when data in the page of the parent application changes, triggering data update by calling a first function through the parent application, and sending a first update message to each of the observer functions through the first function; An update module is used to update the page of the sub-application according to the first update message when the first update message is obtained.

9. A terminal comprising a memory and a processor, characterized in that: A computer program is stored in the memory, and the processor is configured to run the computer program to execute the communication method based on the micro-frontend architecture according to any one of claims 1 to 7.

10. A storage medium, characterized in that: The storage medium stores a computer program, wherein the computer program is configured to execute the communication method based on the micro-frontend architecture according to any one of claims 1 to 7 when running.

Images