Application processing method and apparatus, electronic device, and computer-readable storage medium

Abstract

Embodiments of the present application provide an application processing method and device, electronic equipment and computer readable storage medium, and relate to the technical field of cloud, front-end development and browser. The method is applied to a main application which is implemented based on micro front-end and integrates at least one sub-application, and includes: in response to a loading request of a target sub-application, obtaining to-be-loaded content, creating a corresponding inline frame in the main application, and generating a first component tree in the inline frame. The to-be-loaded content is executed in the inline frame, a to-be-displayed component is determined from the first component tree, an initial second component tree is generated by mapping the tree structure of the first component tree, the same component as the to-be-displayed component is added to the corresponding node position in the initial second component tree based on the node position of the to-be-displayed component in the first component tree, and the added component is displayed on the display interface of the main application. Isolation between each sub-application and component sharing between each sub-application and the main application are implemented.

Description

Technical Field

[0001] This application relates to the fields of cloud technology, front-end development and browser technology. Specifically, this application relates to an application processing method, apparatus, electronic device, computer-readable storage medium and computer program product. Background Technology

[0002] Micro-frontends are a front-end architecture similar to microservices, applying the microservice concept to the web browser. It's a solution for breaking down large projects into sub-projects to achieve project decomposition and management. Essentially, it transforms a single large front-end application (the main application) into an aggregation of multiple smaller front-end applications (sub-applications). Each sub-application can run, be developed, and deployed independently, meeting the needs of rapidly changing business requirements and distributed, multi-team parallel development. This eliminates the need for a central front-end team, but from the perspective of the application (main application) built on a micro-frontend, it still appears as a single application.

[0003] In applications implemented based on micro-frontends (i.e., the main application), the isolation of each sub-application in the main application is usually achieved by using snapshot sandboxes (sandboxes are independent execution environments that restrict program behavior according to security policies), JS-frame mode sandboxes, state machine sandboxes, etc. However, these methods usually have the problem of scope escape, which cannot achieve true isolation between sub-applications. The learning cost of the methods to achieve the isolation of each sub-application in related technologies is relatively high.

[0004] During the main application's operation, each sub-application runs independently, and its content is displayed within its respective display area. However, these display areas typically differ. For the same type of content, if it's implemented across different sub-applications, the differences in their display areas will cause it to appear in different areas of the same main application's interface. This creates confusion for users, making them feel that the displayed content originates from multiple applications rather than a single, cohesive unit, thus degrading the user experience and failing to meet their needs. Summary of the Invention

[0005] This application provides an application processing method, apparatus, electronic device, computer-readable storage medium, and computer program product, which can solve the technical problems in related technologies where the learning cost of implementing isolation between sub-applications is high, and where the same type of display content is displayed in different display areas of the same main application's display interface, causing display confusion for users. The specific technical solution is as follows:

[0006] According to one aspect of the embodiments of this application, an application processing method is provided, which is applied to a main application implemented based on a micro-frontend, the main application integrating at least one sub-application, including:

[0007] In response to a loading request for a target sub-application, retrieve the content to be loaded for the target sub-application and create the corresponding inline frame for the target sub-application in the main application;

[0008] Generate a first component tree in the inline framework. The first component tree includes at least two first nodes, one of which is a preset component of the target sub-application.

[0009] The content to be loaded is executed through an inline frame. The component to be displayed is determined from at least two first nodes. The tree structure corresponding to the first component tree is mapped to generate an initial second component tree. Based on the node position of the component to be displayed in the first component tree, the same component as the component to be displayed is added to the corresponding node position in the initial second component tree to update the initial second component tree.

[0010] The updated components from the second component tree are displayed on the main application's corresponding display interface.

[0011] According to another aspect of the embodiments of this application, an application processing apparatus is provided, which is applied to a main application implemented based on a micro-frontend, the main application integrating at least one sub-application, including:

[0012] The module for obtaining content to be loaded is used to obtain the content to be loaded corresponding to the target sub-application in response to a loading request for the target sub-application.

[0013] The inline frame creation module is used to create the corresponding inline frame for the target sub-application in the main application in response to a load request.

[0014] The first component tree generation module is used to generate a first component tree in an inline frame. The first component tree includes at least two first nodes, one of which is a preset component of the target sub-application.

[0015] The mapping module is used to execute the content to be loaded through the inline frame, determine the component to be displayed from at least two first nodes, map the tree structure corresponding to the first component tree to generate an initial second component tree, and add the same component as the component to be displayed to the corresponding node position in the initial second component tree based on the node position of the component to be displayed in the first component tree, so as to update the initial second component tree.

[0016] The display module is used to display the updated components in the second component tree on the display interface corresponding to the main application.

[0017] In one possible implementation, after displaying the updated components in the second component tree on the main application's corresponding display interface via the display module, the mapping module is further used for:

[0018] In response to a triggering operation on the display interface, determine the component to be updated corresponding to the triggering operation;

[0019] Based on the node position of the component to be updated in the second component tree, the first node at the corresponding node position in the first component tree is modified to be the component to be updated;

[0020] The aforementioned display module is also used to display the components to be updated on the display interface corresponding to the main application.

[0021] In one possible implementation, when the aforementioned display module displays the updated components from the second component tree on the display interface corresponding to the main application, it is specifically used for:

[0022] Hide the first component tree in the inline frame;

[0023] Generate the target display content based on the components in the updated second component tree;

[0024] Display the target content on the main application's corresponding display interface.

[0025] In one possible implementation, when the aforementioned first component tree generation module generates the first component tree in the inline frame, it is specifically used for:

[0026] Based on the loading request, an element selector corresponding to the target sub-application is generated. The element selector includes at least two preset components and the relationship between each pair of preset components.

[0027] The first component tree is generated in the inline frame based on at least two preset components and the relationships between each pair of preset components.

[0028] In one possible implementation, the loading request includes attributes of the main application, and the apparatus further includes a main application processing module for:

[0029] If the main application's property supports idle preloading, and the main application is idle, loading is performed based on the preloading requests in the preloading queue, which is generated based on historical preloading requests.

[0030] If the main application's attribute supports keep-alive operation, and it receives an uninstallation request for any sub-application, it retains the content to be loaded for the sub-application corresponding to the uninstallation request.

[0031] In one possible implementation, the mapping module described above, when executing the content to be loaded via an inline frame, is specifically used for:

[0032] Based on the time-slicing algorithm, the content to be loaded is divided into multiple sub-contents to be loaded;

[0033] Each sub-content to be loaded is executed sequentially using inline frames.

[0034] In one possible implementation, the loading request includes the target address corresponding to the target sub-application. When the module for obtaining the content to be loaded from the target sub-application, it specifically performs the following:

[0035] Based on the target address, generate the first retrieval request;

[0036] Based on the first acquisition request, obtain the target resource corresponding to the target address;

[0037] The target resource is parsed to obtain the parsing results corresponding to the target sub-application;

[0038] If the parsing result only includes the first content to be loaded, then the parsing result will be used as the above content to be loaded.

[0039] If the parsing result includes the first content to be loaded and the link corresponding to the second content to be loaded, a second retrieval request is generated based on the link corresponding to the second content to be loaded; based on the second retrieval request, the second content to be loaded is retrieved, and the first content to be loaded and the second content to be loaded are determined as the content to be loaded.

[0040] In one possible implementation, the content to be loaded includes cascading style sheets. After creating the inline frame corresponding to the target sub-application, the inline frame creation module can also be used for:

[0041] Set the properties of the target sub-application within the inline framework. The properties of the target sub-application include at least one of the following: preset relative address property, preset entry property, and reset style operation.

[0042] Wherein, if the target sub-application's attributes include a preset relative address attribute, the above-mentioned content to be loaded acquisition module, when generating the first acquisition request based on the target address, is specifically used for:

[0043] Determine the preset relative address based on the preset relative address attribute;

[0044] The target address is converted into a relative path relative to a preset relative address, and a first acquisition request is generated based on the converted relative path;

[0045] If the target sub-application's attributes include preset entry attributes, the above-mentioned content-to-be-loaded acquisition module, when generating the first acquisition request based on the address corresponding to the target sub-application, is specifically used for:

[0046] Based on the preset entry attribute, the address corresponding to the target sub-application is placed in the entry string corresponding to the preset entry attribute to obtain the first acquisition request;

[0047] If the target sub-application's properties include a reset style operation, the mapping module mentioned above is also used to execute the content to be loaded through an inline frame, setting the style of the Cascading Style Sheets in the content to be loaded to the corresponding style in the reset style operation;

[0048] When the aforementioned display module displays the updated components from the second component tree on the main application's corresponding display interface, it is specifically used for:

[0049] Based on the configured Cascading Style Sheets, the updated components from the second component tree are displayed on the main application's corresponding display interface.

[0050] According to another aspect of the embodiments of this application, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of the above-described method.

[0051] According to another aspect of the embodiments of this application, a computer-readable storage medium is provided, on which a computer program is stored, which, when executed by a processor, implements the steps of the above-described method.

[0052] According to another aspect of the embodiments of this application, a computer program product is provided, including a computer program that, when executed by a processor, implements the steps of the above-described method.

[0053] The beneficial effects of the technical solutions provided in this application are:

[0054] The application processing method provided in this application is applied to a main application implemented based on a micro-frontend. This main application integrates at least one sub-application. When a target sub-application (a new sub-application) needs to be integrated into the main application (a loading request for the target sub-application is received), the method obtains the content to be loaded for the target sub-application based on the loading request, creates an inline frame corresponding to the target sub-application in the main application, and executes the content to be loaded through the inline frame. This allows the target sub-application to be integrated into the main application. Since each sub-application corresponds to an inline frame, isolation between the target sub-application and other sub-applications in the main application can be achieved, enabling each sub-application to run, develop, and deploy independently. Compared to related technologies that achieve isolation between sub-applications based on snapshot sandboxes, JS-frame mode sandboxes, state machine sandboxes, etc., the solution provided in this application can be implemented based on the inherent isolation of inline frames, making it simple and easy to implement, and reducing the learning cost.

[0055] Furthermore, since all sub-applications execute their respective content to be loaded within their inline frameworks, no additional processing is required for the content to be loaded. This allows multiple sub-applications to be embedded into the main application, achieving the coexistence of different sub-applications' corresponding inline frameworks (new and old technology stacks), resulting in good compatibility.

[0056] Furthermore, by generating a first component tree within an inline framework based on preset components of the target sub-application, and during the loading of content through the inline framework, the component to be displayed is determined from at least two first nodes in the first component tree. In the main application, the tree structure corresponding to the first component tree is mapped to generate an initial second component tree. Based on the node position of the component to be displayed in the first component tree, the same component is added to the corresponding node position in the initial second component tree, thus mapping the component to be displayed as a mirror component (the component in the updated second component tree). This allows for document flow (i.e., the display content corresponding to the component to be displayed) sharing between the inner and outer sides of the target sub-application's inline framework (i.e., between the sub-application and the main application). Moreover, since the mirror component of the sub-application is displayed on the main application's display interface, regardless of which sub-application is integrated into the main application, it can be displayed using the main application's display method, improving the user experience. Attached Figure Description

[0057] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below.

[0058] Figure 1 A schematic diagram of a display interface provided in an embodiment of this application is shown;

[0059] Figure 2 A schematic diagram of another display interface provided in an embodiment of this application is shown;

[0060] Figure 3 A schematic diagram of yet another display interface provided in an embodiment of this application is shown;

[0061] Figure 4 An architecture diagram of the application processing system provided in an embodiment of this application is shown;

[0062] Figure 5 The diagram illustrates the signaling interaction of the application processing system provided in this embodiment.

[0063] Figure 6 A schematic diagram of the micro-frontend framework provided in an embodiment of this application is shown;

[0064] Figure 7 A schematic diagram of yet another display interface provided in an embodiment of this application is shown;

[0065] Figure 8 A schematic diagram of yet another display interface provided in an embodiment of this application is shown;

[0066] Figure 9 A flowchart of an application processing method provided in an embodiment of this application is shown;

[0067] Figure 10 A schematic diagram of an application processing device provided in an embodiment of this application is shown;

[0068] Figure 11 A schematic diagram of the structure of an electronic device to which this application embodiment applies is shown. Detailed Implementation

[0069] The embodiments of this application are described below with reference to the accompanying drawings. It should be understood that the embodiments described below with reference to the accompanying drawings are exemplary descriptions for explaining the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions of the embodiments of this application.

[0070] Those skilled in the art will understand that, unless specifically stated otherwise, the singular forms “a,” “an,” “the,” and “the” used herein may also include the plural forms. It should be further understood that the terms “comprising” and “including” as used in embodiments of this application mean that the corresponding feature can be implemented as the presented feature, information, data, step, operation, element, and / or component, but do not exclude implementation as other features, information, data, step, operation, element, component, and / or combinations thereof supported by the art. It should be understood that when we say that an element is “connected” or “coupled” to another element, the one element can be directly connected or coupled to the other element, or it can mean that the one element and the other element establish a connection relationship through an intermediate element. Furthermore, “connected” or “coupled” as used herein can include wireless connection or wireless coupling. The term “and / or” as used herein indicates at least one of the items defined by the term; for example, “A and / or B” can be implemented as “A,” or as “B,” or as “A and B.”

[0071] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0072] First, let's introduce and explain several terms used in this application:

[0073] HTML (Hypertext Markup Language): An application and specification of Standard Generalized Markup Language, using tags to mark the various parts of a webpage to be displayed. The structure of HTML includes a "head" section and a "body" section. The "head" section provides information about the webpage, while the "body" section provides the specific content of the webpage.

[0074] The Document Object Model (DOM) is a standard programming interface recommended by the W3C (World Wide Web Consortium) for processing Extensible Markup Language (XML). It allows access to and modification of a document's content and structure in a platform- and language-independent manner. In other words, the DOM is a common method for representing and manipulating HTML or XML documents and can be used with any programming language. The DOM is essentially a document model described in an object-oriented manner. It defines the objects needed to represent and modify a document, the behaviors and properties of these objects, and the relationships between them.

[0075] Native: Literally translated as "local", it can be understood as something that can be executed directly on a relative platform or environment without the assistance of other executable devices or software.

[0076] Inline frames: A method of embedding a child window within a window, thereby introducing an external page into the child window, which can be achieved using an iframe.

[0077] iframe: An HTML (Hypertext Markup Language) tag, its function is a document within a document, or a floating frame. Its element creates an inline frame (i.e., an inline frame) that contains another document. The properties of the iframe object can be accessed through the object model of the page containing the iframe object, but its content cannot be accessed.

[0078] Web Components technology is a set of technologies that allow the creation of reusable custom elements (whose functionality can be encapsulated outside the code of the current web application) and their use within the web application. Web Components technology includes three specifications: Custom Element, ShadowDOM, and HTML templates. These can be used together to create custom elements with encapsulated functionality, which can be reused anywhere without causing code conflicts.

[0079] Custom elements: A set of JavaScript APIs (JavaScript, an object- and event-driven client-side scripting language with relative security; API stands for application programming interface) that allow you to define custom elements and their behavior to be used in the user interface as needed.

[0080] Shadow DOM: A set of JavaScript APIs for attaching a wrapped "shadow" DOM ​​tree to elements (rendered separately from the main document DOM) and controlling their associated functionality. This keeps element functionality private, allowing it to be scripted and styled without conflicting with other parts of the document.

[0081] HTML templates: via <templete>Elements and <slot>Elements can be used to create markup templates that are not displayed on the rendered page, and can be reused multiple times as the basis for custom element structures.

[0082] `document.createElement()` creates an element within an existing element and is typically used in conjunction with either the `appendChild()` or `insertBefore()` method. `appendChild()` adds a new child node to the end of the node's list of child nodes. `insertBefore()` inserts a new node at any position in the node's list of child nodes.

[0083] Pop-up window: A window that automatically pops up when you open a webpage.

[0084] Time slicing: Time slicing is a widely used technique that essentially divides a long task into at least one task with a very short execution time, and then executes each of the shorter tasks in sequence.

[0085] As described in the background section, to improve data processing efficiency, an application is typically split into multiple sub-applications. Different teams develop and run each sub-application separately, and then the development results of each sub-application are aggregated to form the final application. Alternatively, multiple applications can be aggregated into a single aggregated application. Multiple teams develop and run each application separately, and then the development results of each application are aggregated to form the aggregated application. In either case, in this embodiment, the application before aggregation is referred to as a sub-application, and the aggregated application is referred to as the main application (i.e., the parent application of the sub-applications). It should be noted that although a main application can be developed, run, and maintained by multiple teams, the final application presented to the user is still a single application.

[0086] Normally, for each sub-application, the document flow corresponding to that sub-application (i.e., the content displayed to the user, such as pop-ups, document content, etc.) will only be displayed in the area corresponding to that sub-application. That is, from the perspective of the user of the main application, they will perceive that the currently displayed document flow comes from multiple applications, not from the current application that appears to be "one application", and perceive the page display as chaotic.

[0087] As an example, the main application is a web-based shopping application (i.e., a shopping application implemented in a browser), and the sub-application is a product details page within that web-based shopping application (including the product's specific model, price, etc.). For example... Figure 1 As shown, by searching for "shirt" in the main application, multiple product lists related to "shirt" can be displayed on the corresponding screen of the main application. Each product in the list corresponds to a specific entry point for that product. Triggering that entry point will display a pop-up window showing the product's details. Figure 2 As shown, by triggering the display area where "Shirt 1" is located, a pop-up window displaying the details of "Shirt 1" can be shown in the display area of ​​the product list corresponding to "Shirt 1" based on the entry address of "Shirt 1". For example... Figure 3 As shown, by triggering the display area where "Shirt 2" is located, a pop-up window displaying the details of "Shirt 2" can be displayed in the display area of ​​the product list corresponding to "Shirt 2" based on the entry address of "Shirt 2".

[0088] Based on the above Figure 2 and Figure 3 The description states that although the pop-up window corresponding to the details of shirt 1 is of the same type as the main application, it appears to be displayed in a different area of ​​the main application's display interface, which can cause display confusion for users, resulting in a poor user experience and failing to meet actual needs.

[0089] To address this, embodiments of this application provide an application processing method, apparatus, electronic device, computer-readable storage medium, and computer program product. This enables document flow sharing between a target sub-application and a main application. Furthermore, regardless of which sub-application is integrated into the main application, it can be displayed using the display method corresponding to the main application, rather than using the display method corresponding to each sub-application, thus improving the user experience.

[0090] Optionally, the application processing method provided in this application embodiment can be implemented based on cloud technology. Cloud technology refers to a hosting technology that unifies a series of resources such as hardware, software, and networks within a wide area network or local area network to realize data computing, storage, processing, and sharing. Cloud technology is a general term for network technology, information technology, integration technology, management platform technology, and application technology based on the cloud computing business model. It can form a resource pool, be used on demand, and is flexible and convenient. Cloud computing technology will become an important support. The backend services of technical network systems require a large amount of computing and storage resources, such as video websites, image websites, and more portal websites. With the rapid development and application of the Internet industry, in the future, every item may have its own identification mark, which will need to be transmitted to the backend system for logical processing. Data of different levels will be processed separately, and various industry data will all require strong system support, which can only be achieved through cloud computing.

[0091] Optionally, the application processing method provided in this application embodiment can also be implemented based on blockchain technology. Specifically, the content to be loaded used in this application processing method can be stored on the blockchain.

[0092] It should be noted that, in the optional embodiments of this application, the relevant data involved requires the permission or consent of the target entity when applied to specific products or technologies. Furthermore, the collection, use, and processing of the relevant data must comply with the relevant laws, regulations, and standards of the relevant countries and regions. In other words, if the embodiments of this application involve data related to the target entity, this data must be obtained with the target entity's authorization and consent, and in accordance with the relevant laws, regulations, and standards of the country and region.

[0093] The technical solutions of this application and their effects are described below through several exemplary embodiments. It should be noted that the following embodiments can be referenced, borrowed from, or combined with each other. Identical terms, similar features, and similar implementation steps in different embodiments will not be repeated.

[0094] Figure 4 An architecture diagram of the application processing system provided in an embodiment of this application is shown. Figure 4 As shown, the application processing system includes a development server 101, a terminal 102, and a resource acquisition server 103. The terminal 102 has a browser-based main application or a browser-based main application plugin installed, and can display the interface corresponding to the main application (hereinafter referred to as "main application"). A communication connection is established between the terminal 102 and the development server 101, and a communication connection is established between the terminal 102 and the resource acquisition server 103. The communication connections can be established via wired or wireless means; this embodiment does not impose any limitations on this.

[0095] Through the interaction between terminal 102 and development server 101, terminal 102 can receive a loading request for the target sub-application initiated by development server 101. Further, through the interaction between terminal 102 and resource acquisition server 103, it obtains the content to be loaded corresponding to the target sub-application. By executing this content on terminal 102, the target sub-application is loaded into the main application, and a document flow sharing mechanism is established between the main application and the target sub-application. Based on the triggering operation initiated by the user of the main application on the display interface, the interaction between terminal 102 and the display interface is realized. Furthermore, based on the triggering operation and the document flow sharing mechanism between the main application and the target sub-application, the running content of the sub-application is displayed on the display interface. The user is unaware of the process of loading the target sub-application into the main application and establishing the document flow sharing mechanism between the main application and the target sub-application. The operations performed by terminal 102 can be implemented through a browser.

[0096] In this application embodiment, the server can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The terminal (also referred to as a user terminal or user equipment (UE)) can be a smartphone, tablet, laptop, desktop computer, intelligent voice interaction device (e.g., smart speaker), wearable electronic device (e.g., smartwatch), in-vehicle terminal, smart home appliance (e.g., smart TV), AR (Augmented Reality) / VR (Virtual Reality) device, etc.

[0097] Those skilled in the art should understand that the above-described terminals and servers are merely examples, and other existing or future terminals or servers that are applicable to this application should also be included within the scope of protection of this application, and are hereby incorporated by reference.

[0098] Figure 5 The diagram illustrates the signaling interaction of the application processing system provided in this embodiment. Figure 5 The signaling interaction diagram shown is for the purpose of clearly illustrating the application processing method. Taking the application processing method provided in the embodiments of this application as an example of applying the above-mentioned web-based shopping application, the signaling interaction diagram is made in conjunction with the application processing method provided in the embodiments of this application.

[0099] like Figure 5 As shown, the main application is a shopping web application, and the target sub-application is the details page of a specific product (shirt 1 mentioned above) within that shopping web application. Specifically:

[0100] Step 1: In response to the control operation of the development object, the development server 101 sends a loading request for the target sub-application to the terminal 102. For example... Figure 6 As shown, the URL corresponding to the main application is: http: / / rame.com, and the loading request for the target sub-application (APP1, Shirt1) can be:<rame-app src="app1.html” / > .

[0101] Step 2: As Figure 6 As shown, terminal 102 calls the browser API to create an empty iframe for the target sub-application within the same domain as the main application using document.createElement(). This allows setting the content of the src attribute to be empty (src="", where a space indicates an empty src attribute), and setting attributes for this empty iframe (i.e., attributes of the target sub-application). The attributes set for the empty iframe include `base` (preset relative address attribute), `srcdoc` (preset entry attribute), and style reset operations.

[0102] Step 3: Terminal 102 interacts with resource acquisition server 103 through the following steps to obtain the content to be loaded from the target sub-application. It should be noted that this content to be loaded supports cross-domain access.

[0103] ① Parse the loading request to obtain the attributes declared by the main application (i.e., the attributes of the main application) and the HTML address of the target sub-application (i.e., app1.html). Among them, the attributes declared by the main application include support for preloading during idle time and keeping the sub-application alive.

[0104] ② Based on app1.html, convert app1.html into a relative path based on the preset relative address set in the `base` attribute, and put the converted app1.html into srcdoc, for example: srcdoc = converted app1.html, to obtain the first fetch request (i.e., the first acquisition request, fetch request represents a data request method), and send the first acquisition request to the resource acquisition server 103. Based on the response of the resource acquisition server 103 to the first acquisition request, obtain the HTML resource returned by the resource acquisition server 103.

[0105] ③ Parse the HTML resource to obtain the corresponding CSS links, JS links, inline CSS code (i.e., CSS content, CSS stands for Cascading Style Sheets) and inline JS code (i.e., JS content, JS stands for JavaScript, which represents an object-based and event-driven client-side scripting language with relatively high security).

[0106] ④ Based on the CSS and JS links, convert the CSS and JS links into relative paths based on the preset relative addresses set in the `base` attribute. Place the converted CSS and JS links into the srcdoc to obtain a second fetch request (i.e., a second retrieval request). Send the second retrieval request to the resource retrieval server 103. Based on the response of the resource retrieval server 103 to the second retrieval request, retrieve the inline CSS corresponding to the CSS link and the JS code corresponding to the JS link returned by the resource retrieval server 103. Use the inline CSS and JS code retrieved twice as the content to be loaded.

[0107] After obtaining the resource to be loaded, modify the styles in the CSS of the resource to the reset styles you set.

[0108] like Figure 6 As shown, this main application also needs to load another sub-application (APP2, the corresponding declaration is...).<rame-app src="app2.html” / > If, during the idle time of obtaining the content to be loaded for the target sub-application, the terminal 102 obtains the content to be loaded for APP2 and stores the corresponding content to be loaded in the cache of the web-based shopping application, so that when an activation request for APP2 is received, the content to be loaded for APP2 can be directly retrieved from the cache, which can improve the activation speed of APP2.

[0109] Step 4: Terminal 102 creates a raw DOM node inside the iframe (i.e., in the target sub-application) and a shadow DOM node outside the iframe (i.e., in the main application). It adds the inline CSS style (which has been reset) from the content to be loaded to this shadow DOM node and then hides it. The raw DOM node inside the iframe corresponds to the shadow DOM node outside the iframe.

[0110] Step 5: Terminal 102 determines a preset element selector based on the loading request of the target sub-application. The preset element selector includes the preset components corresponding to APP1 and the relationship between each preset component. Based on the preset element selector, an original DOM tree is created in the original DOM node, and the corresponding preset components are added to each node position in the original DOM tree.

[0111] like Figure 6 As shown, the preset components in the preset element selector corresponding to APP1 include div1 (i.e. <div1>`div`, meaning separation, represents a block tag, equivalent to a line break, that can divide a document into independent, distinct parts, each occupying one line. All elements within a `div` refer to a small area; any tag can be placed inside a `div`, including the `div` itself. `div2` (i.e.,...) <div2>), p (i.e.) Paragraph (representing a paragraph in a document), span (i.e.) The inline tag (span, which can contain text, images, forms, etc.) and the a (i.e., ...) tag. This is used to define an anchor, which can specify the target of the link. By using... <href>Attributes that create links (or hyperlinks) pointing to another document; by using... <name>or <id>The attribute creates a bookmark within the document (meaning it can create a link to a document fragment). It's important to note that the "1" and "2" in div1 and div2 are merely serial numbers to distinguish different components; they are essentially still divs.

[0112] Here, div1 is the root node in the first component tree. div1's child nodes include div2 and p, and p's child nodes include span and a. The parent-child relationships between the first nodes represent the associations between the preset DOM elements. Based on these parent-child relationships, the original DOM tree corresponding to the original DOM nodes inside the iframe can be generated, and the corresponding preset components can be added to each node position in this original DOM tree.

[0113] Step 6: Terminal 102 creates a change observer (e.g., using MutationObserver technology) to detect changes in DOM elements within the original DOM nodes.< / id> < / name> < / href> Figure 6 The MutationObserver shown is between the original DOM node and the shadow DOM node. This change observer is in JSON format.

[0114] Step 7: Terminal 102 uses document.createElement to create a script tag for the sub-application, puts the JS content, change observer and detector in the content to be loaded into the script tag to form a script script, appends the script script to the iframe, executes the script script in the iframe using the time-slicing algorithm, and sets the elements in the original DOM node to a hidden state.

[0115] During the execution of this script within the iframe, based on the tree structure of the first component tree in the original DOM nodes, a second component tree is generated by mapping the shadow DOM nodes. Then, based on the node positions of the original DOM elements related to the JS content in the original DOM nodes within the first component tree, DOM elements identical to the original DOM elements are added to the corresponding positions in the second component tree (e.g., ...). Figure 6 As shown, the change observer passes the changed DOM elements in the original DOM node through to the second component tree of the shadow DOM node. The target display content is generated based on the components in the shadow DOM node and displayed on the corresponding display interface of the main application.

[0116] like Figure 6 As shown, the mirrored components are exactly the same as the original DOM elements. Each mirrored component corresponds to one original DOM element, and the node position of each mirrored component in the second component tree is the same as the node position of the corresponding original DOM element in the first component tree.

[0117] In this process, while generating the mirror component, a doubly linked list is created between the original DOM element and the mirror component based on the name of the DOM element, its node position in its respective DOM tree, and the relationship between the DOM element and other nodes in the DOM tree.

[0118] By executing JavaScript content within the content to be loaded inside an iframe, a target sub-application can be embedded into the main application. The target sub-application can be viewed as a sandbox within the same domain as the main application. For example... Figure 4 As shown, when a search for "shirt" is triggered in the search bar of the main application's display interface based on the user, the entry address of shirt 1 corresponding to the target sub-application (APP1) can be displayed in the shirt list.

[0119] Step 8: Terminal 102 creates an event detector (e.g., using MutationObserver technology) to detect DOM elements in the shadow DOM node. Figure 6 The example shown is an addEventListener that points from the shadow DOM node to the original DOM node, used to detect whether elements in the shadow DOM node have changed when the object is used to perform a triggering operation on the display interface.

[0120] Step 9: Terminal 102 adds the event detector to the aforementioned script tag, forming a new script, which is then appended to the iframe for execution. If the event detector detects a change in an element within the shadow DOM node, it modifies the corresponding element in the original DOM node according to the doubly linked list (e.g., ...). Figure 6 As shown, the event detector dispatches events to the first component tree of the original DOM node for DOM elements that have changed in the shadow DOM node, so as to change the element at the corresponding position in the original DOM node, and updates the doubly linked list.

[0121] As other sub-applications also run during the main application's operation, the chain reaction will cause changes to the DOM elements (i.e., the original DOM elements) in the current target sub-application. Therefore, if the change detector detects a change in the DOM element corresponding to the first node in the original DOM node, it will map and generate the same mirror component at the same node position in the second component tree and update the doubly linked list.

[0122] Through the above operations, document flow sharing between the inside and outside of the iframe can be achieved. Since the mirror component of the sub-application is displayed on the display interface corresponding to the main application, it can be displayed in the same way as the main application, regardless of which sub-application is integrated into the main application, thus improving the user experience.

[0123] It can be displayed in full screen on the main application's display interface, or it can be displayed in a portion of the main application's display interface.

[0124] For example, when using object pairs Figure 4 The trigger operation in the area where "Shirt 1" is located on the displayed interface can modify the mirror component of the shadow DOM node and the corresponding component of the original DOM node, generate the target display content based on the mirror component, and display it in the main application's display interface. For example... Figure 7 As shown, the details pop-up window for shirt 1 can be displayed full-screen on the main application's display interface. For example... Figure 8 As shown, a details pop-up window for shirt 1 can be displayed in a specified area on the main application's display interface.

[0125] Step 10: When terminal 103 receives the uninstallation request for the target sub-application initiated by development server 101, since the main application's declared attributes obtained in step 3 include the operation of keeping the sub-application alive, the iframe corresponding to the target sub-application can be hidden, and the script corresponding to the target sub-application can be retained. This way, when the next activation operation for the target sub-application initiated by development server is received, the hidden script for the target sub-application can be directly retrieved, thus speeding up the activation of the target sub-application.

[0126] Figure 9 A flowchart illustrating an application processing method provided in an embodiment of this application is shown. Figure 9 As shown, this method is applied to a main application implemented based on a micro-frontend, which integrates at least one sub-application. This method can be implemented using a browser-based micro-frontend framework. Specifically, it includes steps S901 to S904.

[0127] Step S901: In response to the loading request for the target sub-application, obtain the content to be loaded corresponding to the target sub-application, and create the inline frame corresponding to the target sub-application in the main application.

[0128] The loading request can be a declarative operation for the target sub-application generated by the main application's development object based on development requirements.

[0129] In one possible implementation, for a main application, the corresponding micro-frontend framework can be based on custom elements in webcomponent technology, setting a custom name... <rame-app / > The tag allows for the declaration of sub-applications by adding the addresses of the sub-applications to be embedded in the main application. The address of the sub-application can include its identifier, allowing the system to resolve the address and determine which sub-application the current address belongs to. For a single sub-application, the identifier can be a numeric identifier, an alphanumeric identifier, or a combination of both, and can be determined according to actual needs; this embodiment does not impose any restrictions on this.

[0130] As an example, such as Figure 6 As shown, the declaration of APP1 can be:<rame-app src="app1.html” / > The declaration for APP2 can be:<rame-app src="app2.html” / > The target address corresponding to APP1 or APP2 is the HTML address. Within the target address for APP1, the identifier for APP1 is app1.

[0131] A loading request can be used to obtain the target address of the content to be loaded in the target sub-application corresponding to the loading request. The target address of the content to be loaded may include, but is not limited to, an HTML address or a JS entry address, etc., and this application embodiment does not impose any restrictions on this. Thus, the content to be loaded corresponding to the target sub-application can be further obtained through the loading request.

[0132] When the main application receives a loading request for a target sub-application, it can set the lifecycle of that target sub-application in response to the loading request. The lifecycle of a target sub-application can be the process of handling the loading request. For example, it might first obtain the content to be loaded from the target sub-application, then create a corresponding inline frame, and while running the content to be loaded within the inline frame, map and generate a second component tree and a corresponding mirror component, displaying the mirror component on the main application's display interface. Finally, based on an uninstallation request for the target sub-application, it can perform an uninstallation operation on the target sub-application.

[0133] For a main application, the corresponding micro-frontend framework can call the API of the browser corresponding to the main application to create an inline frame corresponding to the target sub-application in the same domain as the main application using document.createElement(). Based on further operations on this inline frame, a sandbox corresponding to the target sub-application is formed. The inline frame can be implemented using an iframe, and the specific inline frame can include, but is not limited to, technology stacks, frameworks, Vue, React, AngularJS, jQuery, etc. This application embodiment does not impose any restrictions on this.

[0134] When creating an inline frame (that is, before executing the content to be loaded through the inline frame), the content in the inline frame can be empty (src="", the content in src is identified by a space, which means the content in src is empty) or the content in src can be an inline frame with a pseudo-protocol.

[0135] In one possible implementation, the content to be loaded for the target sub-application can be obtained in the following way:

[0136] The loading request mentioned above includes the target address corresponding to the target sub-application, and obtaining the content to be loaded corresponding to the target sub-application may include:

[0137] Based on the target address, generate the first retrieval request;

[0138] Based on the first acquisition request, obtain the target resource corresponding to the target address;

[0139] The target resource is parsed to obtain the parsing results corresponding to the target sub-application;

[0140] If the parsing result only includes the first content to be loaded, then the parsing result will be used as the above content to be loaded.

[0141] If the parsing result includes the first content to be loaded and the link corresponding to the second content to be loaded, a second retrieval request is generated based on the link corresponding to the second content to be loaded; based on the second retrieval request, the second content to be loaded is retrieved, and the first content to be loaded and the second content to be loaded are determined as the content to be loaded.

[0142] Upon receiving a loading request, the micro-frontend framework (i.e., the micro-frontend framework corresponding to the main application) can parse the loading request to obtain the target address corresponding to the target sub-application. In one possible implementation, the loading request may also include attributes declared by the main application, etc., which is not limited in this embodiment. The attributes declared by the main application may include, but are not limited to, supporting idle-time preloading and keeping the sub-application alive, which can be determined according to the actual situation.

[0143] The target address corresponding to the target sub-application may include, but is not limited to, the HTML address or JS entry address of the target sub-application, which can be determined according to actual needs. This application embodiment does not impose any restrictions on this.

[0144] The target address corresponding to the target sub-application may or may not support cross-domain access, and this embodiment does not impose any restrictions on this. If the target address supports cross-domain access, the micro-frontend framework can remotely load the corresponding content to be loaded from the target address via a server. If the target address does not support cross-domain access, the content to be loaded can be obtained from the local storage space of the terminal where the main application is installed. Considering that the main application is primarily a browser-based application, i.e., a web application, this embodiment uses the example of a target address supporting cross-domain access for illustration. Correspondingly, the process of obtaining the content to be loaded across domains can also be called remote resource loading.

[0145] The first and second fetch requests mentioned above can be implemented using methods including, but not limited to, browser-based fetch requests, XMLHttpRequest, and WebSockets. In this embodiment, a browser-based fetch request is used as an example for illustration.

[0146] By sending a browser-based fetch request to the resource fetch server using this micro-frontend framework, the corresponding resources can be obtained. That is, the first fetch request can be a browser-based first fetch request, and the second fetch request can be a browser-based second fetch request.

[0147] The first fetch request can retrieve the target resource corresponding to the target address, i.e., the HTML content.

[0148] In one possible implementation, regular expression matching can be used to parse the target resource. The parsed results include, but are not limited to, CSS links, JS links, inline CSS content, and inline JS content. Of course, other methods can also be used to parse the target resource, and this application embodiment does not limit this.

[0149] Inline CSS and inline JS content can be executed directly without reloading resources. That is, if the parsing result only includes the first content to be loaded (inline CSS and inline JS content), the first content to be loaded can be directly used as the aforementioned content to be loaded. CSS and JS links cannot be executed directly and require reloading resources until executable CSS or JS content is obtained. Specifically, if the parsing result includes the first content to be loaded and the link corresponding to the second content to be loaded, a second request is generated based on the link corresponding to the second content to be loaded; based on the second request, the second content to be loaded is obtained, and the first and second content to be loaded are then determined as the content to be loaded.

[0150] Using the methods described above, the content to be loaded for the target sub-application can be obtained based on the loading request.

[0151] Step S902: Generate a first component tree in the inline frame. The first component tree includes at least two first nodes, one of which is a preset component of the target sub-application.

[0152] The first component tree can be generated based on the target sub-application and at least two pre-defined components corresponding to the adaptation requirements of that target sub-application. The first component tree can be generated through the following optional implementation methods.

[0153] In one possible implementation, generating the first component tree in the inline framework as described above may include:

[0154] Based on the loading request, an element selector corresponding to the target sub-application is generated. The element selector includes at least two preset components and the relationship between each pair of preset components.

[0155] The first component tree is generated in the inline frame based on at least two preset components and the relationships between each pair of preset components.

[0156] The element selector can be a preset element selector, specifically, it can be determined based on the loading request of the target sub-application. The preset element selector can be determined based on factors including, but not limited to, the type of the target sub-application and its custom requirements (display content, etc.). In one possible implementation, for a web application, the document flow displayed in the web application (including but not limited to documents formed by text, images, forms, etc.) can be represented by DOM elements; in this embodiment, the component is a DOM element.

[0157] For example, when the target sub-application needs to display a document containing text and images, the corresponding element selector can include components. and components The preset element selector can include preset components and the relationships between them (i.e., the relationships between pairs of preset components). The relationships between preset components can be parent-child relationships.

[0158] For example, the preset DOM elements may include, but are not limited to, ， ， , The parameters, etc., can be determined according to the actual situation, and the embodiments of this application do not impose any restrictions on them.

[0159] The process of generating the first component tree within an inline frame involves applying the element selector corresponding to the target sub-application within the iframe. Specifically, based on the pre-defined components with relationships in the element selector, these pre-defined components are connected sequentially to generate the first component tree within the inline frame. Then, corresponding pre-defined DOM elements are added to each node position in this first component tree, with each node position corresponding to a first node, i.e., a pre-defined DOM element.

[0160] Using the above method, a first component tree can be generated within the inline frame corresponding to the target sub-application, based on the element selector corresponding to the target sub-application.

[0161] Step S903: Execute the content to be loaded through inline frames, determine the component to be displayed from at least two first nodes, map the tree structure corresponding to the first component tree to generate an initial second component tree, and add the same component as the component to be displayed to the corresponding node position in the initial second component tree based on the node position of the component to be displayed in the first component tree, so as to update the initial second component tree.

[0162] In this implementation, a `<script>` tag can be created using `document.createElement`, the content to be loaded can be added to this `<script>` tag to form a script, and then the script can be appended to the inline frame. The content to be loaded is then executed through the inline frame. By declaring the sub-application using tags and directly placing the content to be loaded into the `<script>` tag, the corresponding script can be executed directly through the inline frame, achieving pure iframe execution with good compatibility. Furthermore, this method does not require exposing the lifecycle of the target sub-application, resulting in lower integration costs for the target sub-application.

[0163] Since the JavaScript content in the content to be loaded is truly relevant to the target sub-application, and the DOM elements of the original DOM nodes are obtained based on the preset element selectors, only the DOM elements in the original DOM nodes that are relevant to the target sub-application will be executed during the execution of the JavaScript content in the content to be loaded, meaning they will be modified. By executing the JavaScript content in the content to be loaded, the components (i.e., the components to be displayed) relevant to the target sub-application in the preset element selectors (i.e., at least two first nodes) can be identified.

[0164] During the execution of the script inside the iframe, if the change detector detects a change in the DOM element corresponding to the first node in the original DOM node, the tree structure of the original DOM element is mapped to the shadow DOM node to form the second component tree. Based on the node position of the changed DOM element in the original DOM tree, the same DOM element is mapped to the same node position in the second component tree (that is, the same component as the component to be displayed is added to the corresponding node position in the initial second component tree to update the initial second component tree).

[0165] Since the tree structure of the second component tree is the same as that of the first component tree, the second component tree can also be called a mirrored DOM tree. Because the components in the second component tree are the same as the components at corresponding positions in the first component tree, the components in the second component tree can be called mirrored components.

[0166] In this implementation, while generating the mirror component, a doubly linked list can be created between the original DOM element and the mirror component based on the names of the DOM elements, their node positions in their respective DOM trees, and the association between the DOM element and other nodes in the DOM tree. This ensures the association query between the iframe (target sub-application) and the iframe (main application).

[0167] like Figure 6 As shown, in one possible implementation, a change observer (MutationObserver) can be created using the MutationObserver technique to detect each first node in the first component tree. This change observer is then used as content to be loaded and executed through an inline frame. During the execution of the target sub-application's corresponding JS content via the inline frame, the component to be displayed is determined from at least two first nodes based on the change observer, thus delegating the iframe operation to `window.parent.document` (the main application). Alternatively, methods such as `objectdefineProperty` and `newProxy` can be used to determine the component to be displayed from at least two first nodes.

[0168] In this implementation, before mapping the tree structure corresponding to the first component tree to generate the initial second component tree, the method may also include creating a shadow DOM node in the main application, which can be used to store the second component tree and the nodes on the second component tree.

[0169] The initial second component tree includes the tree structure corresponding to the first component tree; that is, it is an "empty" component tree containing only the relationships between the various first nodes. After adding the same component as the component to be displayed to the corresponding node position in the initial second component tree, the DOM element at the corresponding node position in the updated second component tree is the mirror component. Other node positions still do not contain DOM elements. In other words, the components in the updated second component tree are mirror components.

[0170] Step S904: Display the updated components in the second component tree on the display interface corresponding to the main application.

[0171] Since the sub-application and the main application can be developed and run independently, meaning that the DOM elements in the original DOM node and the DOM elements in the shadow DOM node inside the iframe can both be displayed, and the DOM elements in the original DOM node that are exactly the same as the DOM elements in the shadow DOM node can be hidden to avoid display confusion, and the mirror component can be displayed on the corresponding display interface of the main application.

[0172] It should be noted that the application processing method provided in this application embodiment can be applied not only to loading a corresponding sub-application through a main application to embed the sub-application into the main application, but also to the mutual nesting of sub-applications. For example, when a new sub-application is embedded into a sub-application corresponding to a main application, the new sub-application is a sub-application of the sub-application corresponding to the main application.

[0173] The application processing method provided in this application embodiment can achieve isolation between the target sub-application and other sub-applications in the main application, enabling each sub-application to run, develop, and deploy independently. It is simple and easy to implement and can reduce the learning cost.

[0174] Since all sub-applications execute their respective content within the inline framework of that sub-application, no additional processing is required for the content to be loaded. This allows multiple sub-applications to be embedded into the main application, achieving the effect of coexistence of different sub-applications' corresponding inline frameworks (new and old technology stacks), resulting in good compatibility.

[0175] Furthermore, during the process of loading content through the inline framework, the components to be displayed are determined from at least two first nodes in the first component tree. In the main application, the tree structure corresponding to the first component tree is mapped to generate an initial second component tree, and the components to be displayed are mapped to their corresponding node positions in the initial second component tree. This allows for document flow sharing between the inner and outer parts of the target sub-application's inline framework (i.e., between the sub-application and the main application). Moreover, since the mirrored components of the sub-application are displayed on the main application's display interface, regardless of which sub-application is integrated into the main application, it can be displayed using the main application's display method, improving the user experience.

[0176] Considering that the components in each element are related to the specific display content, and not the display content itself, this application also provides the following optional implementation methods:

[0177] The components in the updated second component tree that are displayed on the main application's display interface include:

[0178] Hide the first component tree in the inline frame;

[0179] Generate the target display content based on the components in the updated second component tree;

[0180] Display the target content on the main application's corresponding display interface.

[0181] Specifically, the target display content can be determined by parsing the components in the updated second component tree, obtaining the display content corresponding to each mirror component, and then combining the display content corresponding to all mirror components. The target display content can be displayed in the form of pop-ups, etc., and the specific display content can include, but is not limited to, images, text, trigger controls, etc.

[0182] Taking the target sub-application described above, which needs to display a document containing text and images, as an example, the corresponding mirror components include the component... and components For components You can first test this component. The component was analyzed and identified. The corresponding text and images, combined with components and components Relationships between components, for example, in components Located in the component In the subsequent cases, the corresponding target display content will be in this component. Paragraph marks follow the corresponding text and images.

[0183] Based on this method, the target content can be displayed accurately.

[0184] In one possible implementation, after displaying the updated components from the second component tree on the main application's display interface, the above method may further include:

[0185] In response to a triggering operation on the display interface, determine the component to be updated corresponding to the triggering operation;

[0186] Based on the node position of the component to be updated in the second component tree, the first node at the corresponding node position in the first component tree is modified to be the component to be updated;

[0187] Display the components to be updated on the main application's corresponding display interface.

[0188] In this implementation, the triggering operation for the display interface may include, but is not limited to, the triggering operation for the displayed trigger control related to the target sub-application, and may include the triggering operation for the display interface unrelated to the target sub-application. This application embodiment does not limit this.

[0189] Triggering operations on controls related to the target sub-application will directly affect the component corresponding to the currently displayed content (i.e., the mirror component in the shadow DOM node). Since the sub-applications within the main application are isolated from each other, but their combined operation constitutes the main application, triggering operations on the display interface unrelated to the target sub-application may cause a chain reaction. This chain reaction may include, but is not limited to, indirectly affecting the mirror component corresponding to the currently displayed content and impacting the running process of the target sub-application.

[0190] In this implementation, an event detector (addEventListener) can be created using the MutationObserver technology to detect DOM elements in the shadow DOM node. This allows for the detection of events generated by triggering operations on the display interface, and based on these events, the component corresponding to the triggering operation in the component corresponding to the current target display content that needs to be updated can be determined.

[0191] Since the component corresponding to the current target display content is mapped from the component to be displayed corresponding to the original DOM node in the target sub-application, changing the component corresponding to the current target display content should essentially be changing the original component in the original DOM node within the target sub-application. When a component to be updated appears in the component corresponding to the current target display content, the component at the corresponding node position in the first component tree can be modified to be the component to be updated, based on the node position of the component to be updated in the second component tree.

[0192] Furthermore, based on the updated component corresponding to the shadow DOM node, the new target display content is determined and displayed on the display interface.

[0193] As described above, the chain reaction can include affecting the running process of the target sub-application. In this implementation, new components to be displayed can be identified from at least two first nodes based on the change observer, and these new components can be continuously added to the corresponding node positions in the second component tree. This enables dynamic sharing between nodes in the first and second component trees, i.e., document flow sharing between the target sub-application and the main application.

[0194] In one possible implementation, the above-mentioned execution of the content to be loaded via an inline frame includes:

[0195] Based on the time-slicing algorithm, the content to be loaded is divided into multiple sub-contents to be loaded;

[0196] Each sub-content to be loaded is executed sequentially using inline frames.

[0197] By dividing the content to be loaded into multiple sub-contents with shorter processing times, and then executing each sub-content sequentially, the performance of displaying the updated components in the second component tree on the display interface is optimized. This results in zero-delay loading of the corresponding display page, allowing for a clearer and smoother display of the updated components in the second component tree without the user being aware of the loading process. This avoids page stuttering (i.e., the main application's display interface is constantly in a "refresh" state, displaying a "loading" indicator, etc.), thus improving the user experience.

[0198] In one possible implementation, the content to be loaded includes cascading style sheets. After creating the inline frame corresponding to the target sub-application, the method may further include:

[0199] Set the properties of the target sub-application within the inline framework. The properties of the target sub-application include at least one of the following: preset relative address property, preset entry property, and reset style operation.

[0200] Wherein, if the target sub-application's attributes include a preset relative address attribute, the above-mentioned generation of a first acquisition request based on the target address includes:

[0201] Determine the preset relative address based on the preset relative address attribute;

[0202] The target address is converted into a relative path relative to a preset relative address, and a first acquisition request is generated based on the converted relative path;

[0203] If the target sub-application's attributes include preset entry attributes, a first retrieval request is generated based on the target address, including:

[0204] Based on the preset entry attribute, the target address is placed in the entry string corresponding to the preset entry attribute to obtain the first acquisition request;

[0205] If the target sub-application's properties include style reset operations, the above methods also include:

[0206] The loading content is executed through an inline frame, and the styles of the cascading style sheets in the loading content are set to the corresponding styles in the reset style operation;

[0207] The components in the updated second component tree that are displayed on the main application's display interface include:

[0208] Based on the configured Cascading Style Sheets, the updated components from the second component tree are displayed on the main application's corresponding display interface.

[0209] In this implementation, by converting the target address into a relative path relative to a preset relative address, and generating a first acquisition request based on the converted relative path, and then acquiring the target resource corresponding to the target address based on the first acquisition request, the correctness of resource loading can be improved, ensuring that the target resource can be loaded correctly.

[0210] In one possible implementation, during the process of further obtaining the content to be loaded, the link corresponding to the second content to be loaded can be converted into a relative path relative to the preset relative address based on a preset relative attribute, and a second acquisition request can be generated based on the converted relative path to further obtain the second content to be loaded, thereby improving the correctness of the obtained second content to be loaded and ensuring that the second content to be loaded can be loaded correctly.

[0211] By placing the target address within the entry string corresponding to the preset entry attribute to generate the first retrieval request, the target resource can be retrieved more securely, further enhancing the security of resource retrieval. Similarly, the link corresponding to the second content to be loaded can be placed within the entry string corresponding to the preset entry attribute to generate the second retrieval request, which can also securely retrieve the second content to be loaded, further improving the security of retrieval of the second content to be loaded.

[0212] Cascading Style Sheets (CSS) are the CSS elements in the content to be loaded. The styles involved in resetting styles may include, but are not limited to, displaying the updated components from the second component tree in the preset display position on the main application's interface, and the background color corresponding to the displayed content (e.g., ...). Figure 7 , Figure 8 The background color of the displayed pop-up window is gray, etc. The preset display position can be the entire display interface corresponding to the main application (e.g., ...). Figure 7 The location of the pop-up window can be either the location of the pop-up window itself or a portion of the display interface (e.g., ...). Figure 8 The location of the pop-up window is not limited in this embodiment.

[0213] By setting the styles of the Cascading Style Sheets (CSS) in the content to be loaded to the styles corresponding to those in the style reset operation, the consistency of the basic CSS styles of each target sub-application can be guaranteed, ensuring that the CSS styles are not affected by the browser.

[0214] Furthermore, by mapping the Cascading Style Sheets in the content to be loaded with modified styles to the shadow DOM node of the main application, the updated components in the second component tree can be displayed on the main application's display interface by resetting the styles corresponding to the style operation. This allows any sub-application in the main application to be displayed by resetting the styles corresponding to the style operation, thus improving the user experience.

[0215] In one possible implementation, the loading request includes properties of the main application, and the method may further include:

[0216] If the main application's property supports idle preloading, and the main application is idle, loading is performed based on the preloading requests in the preloading queue, which is generated based on historical preloading requests.

[0217] If the main application's attribute supports keep-alive operation, and it receives an uninstallation request for any sub-application, it retains the content to be loaded for the sub-application corresponding to the uninstallation request.

[0218] It supports idle-time preloading, which means that during idle periods, loading tasks unrelated to the currently executing task are performed.

[0219] In this implementation, by loading based on preload requests in the preload queue, the loaded content obtained from the preload requests can be stored in a preset location based on the identifier of the sub-application corresponding to each preload request. This preset location may include, but is not limited to, the cache corresponding to the main application.

[0220] For example, the requestIdleCallback API (where request means request; Idle means idle time; Callback means retrieval operation) can be used to retrieve the content to be loaded from other sub-applications that need to be loaded during the idle time when terminal 102 is retrieving the content to be loaded from the target sub-application.

[0221] By loading the content to be loaded for other sub-applications during the idle time when the main application is processing the target sub-application, the processing efficiency and utilization of the main application are greatly improved. While not affecting the processing operation of the current target sub-application, it can also ensure that when an activation request for other sub-applications is received, the corresponding content to be loaded that has been loaded is executed based on the inline framework of the other sub-application, thereby improving the activation speed of other sub-applications.

[0222] Perform a keep-alive operation on a sub-application, which means that when an uninstallation request for the sub-application is received, the inline framework corresponding to the sub-application is destroyed, but the content to be loaded for the sub-application is retained.

[0223] If the main application's attribute supports keep-alive operations, upon receiving an uninstallation request for any sub-application, it can uninstall the inline frame corresponding to that sub-application while retaining the sub-application's content to be loaded. Thus, when the sub-application needs to be reactivated, the inline frame corresponding to that sub-application can be created, and the retained content to be loaded from that sub-application can be executed within that inline frame, thereby speeding up the activation of the sub-application.

[0224] If the main application's declared properties do not include keep-alive operations for sub-applications, upon receiving an uninstallation request for any sub-application, the iframe corresponding to the target sub-application will be uninstalled, and the script corresponding to the target sub-application will be deleted.

[0225] Based on the same principle as the application processing method provided in the embodiments of this application, an application processing device is also provided in the embodiments of this application. Figure 10 A schematic diagram of an application processing apparatus provided in an embodiment of this application is shown. Figure 10 As shown, the application processing device 100 is applied to a main application implemented based on a micro-frontend, the main application integrating at least one sub-application, including:

[0226] The content to be loaded module 110 is used to obtain the content to be loaded corresponding to the target sub-application in response to the loading request for the target sub-application.

[0227] Inline frame creation module 120 is used to create the inline frame corresponding to the target sub-application in the main application in response to a load request;

[0228] The first component tree generation module 130 is used to generate a first component tree in an inline frame. The first component tree includes at least two first nodes, one of which is a preset component of the target sub-application.

[0229] The mapping module 140 is used to execute the content to be loaded through the inline frame, determine the component to be displayed from at least two first nodes, map the tree structure corresponding to the first component tree to generate an initial second component tree, and add the same component as the component to be displayed to the corresponding node position in the initial second component tree based on the node position of the component to be displayed in the first component tree, so as to update the initial second component tree.

[0230] Display module 150 is used to display the updated components in the second component tree on the display interface corresponding to the main application.

[0231] In one possible implementation, after displaying the updated components in the second component tree on the display interface corresponding to the main application via the display module, the mapping module 140 is further configured to:

[0232] In response to a triggering operation on the display interface, determine the component to be updated corresponding to the triggering operation;

[0233] Based on the node position of the component to be updated in the second component tree, the first node at the corresponding node position in the first component tree is modified to be the component to be updated;

[0234] The aforementioned display module is also used to display the components to be updated on the display interface corresponding to the main application.

[0235] In one possible implementation, when the display module 150 displays the updated components in the second component tree on the display interface corresponding to the main application, it is specifically used for:

[0236] Hide the first component tree in the inline frame;

[0237] Generate the target display content based on the components in the updated second component tree;

[0238] Display the target content on the main application's corresponding display interface.

[0239] In one possible implementation, when the first component tree generation module 130 generates the first component tree in the inline frame, it is specifically used for:

[0240] Based on the loading request, an element selector corresponding to the target sub-application is generated. The element selector includes at least two preset components and the relationship between each pair of preset components.

[0241] The first component tree is generated in the inline frame based on at least two preset components and the relationships between each pair of preset components.

[0242] In one possible implementation, the loading request includes attributes of the main application, and the device 100 further includes a main application processing module for:

[0243] If the main application's property supports idle preloading, and the main application is idle, loading is performed based on the preloading requests in the preloading queue, which is generated based on historical preloading requests.

[0244] If the main application's attribute supports keep-alive operation, and it receives an uninstallation request for any sub-application, it retains the content to be loaded for the sub-application corresponding to the uninstallation request.

[0245] In one possible implementation, the mapping module 140 described above, when executing the content to be loaded via an inline frame, is specifically used for:

[0246] Based on the time-slicing algorithm, the content to be loaded is divided into multiple sub-contents to be loaded;

[0247] Each sub-content to be loaded is executed sequentially using inline frames.

[0248] In one possible implementation, the loading request includes the target address corresponding to the target sub-application. When the content to be loaded module 110 obtains the content to be loaded corresponding to the target sub-application, it is specifically used for:

[0249] Based on the target address, generate the first retrieval request;

[0250] Based on the first acquisition request, obtain the target resource corresponding to the target address;

[0251] The target resource is parsed to obtain the parsing results corresponding to the target sub-application;

[0252] If the parsing result only includes the first content to be loaded, then the parsing result will be used as the above content to be loaded.

[0253] If the parsing result includes the first content to be loaded and the link corresponding to the second content to be loaded, a second retrieval request is generated based on the link corresponding to the second content to be loaded; based on the second retrieval request, the second content to be loaded is retrieved, and the first content to be loaded and the second content to be loaded are determined as the content to be loaded.

[0254] In one possible implementation, the content to be loaded includes cascading style sheets. After creating the inline frame corresponding to the target sub-application, the inline frame creation module 120 can also be used for:

[0255] Set the properties of the target sub-application within the inline framework. The properties of the target sub-application include at least one of the following: preset relative address property, preset entry property, and reset style operation.

[0256] Wherein, if the target sub-application's attributes include a preset relative address attribute, the aforementioned content acquisition module 110, when generating a first acquisition request based on the target address, is specifically used for:

[0257] Determine the preset relative address based on the preset relative address attribute;

[0258] The target address is converted into a relative path relative to a preset relative address, and a first acquisition request is generated based on the converted relative path;

[0259] If the target sub-application's attributes include a preset entry attribute, the aforementioned content acquisition module 110, when generating a first acquisition request based on the address corresponding to the target sub-application, is specifically used for:

[0260] Based on the preset entry attribute, the address corresponding to the target sub-application is placed in the entry string corresponding to the preset entry attribute to obtain the first acquisition request;

[0261] If the target sub-application's properties include a reset style operation, the mapping module mentioned above is also used to execute the content to be loaded through an inline frame, setting the style of the Cascading Style Sheets in the content to be loaded to the corresponding style in the reset style operation;

[0262] When the aforementioned display module displays the updated components from the second component tree on the main application's corresponding display interface, it is specifically used for:

[0263] Based on the configured Cascading Style Sheets, the updated components from the second component tree are displayed on the main application's corresponding display interface.

[0264] The apparatus in this application embodiment can execute the method provided in this application embodiment, and the implementation principle is similar. The actions performed by each module in the apparatus of each embodiment of this application correspond to the steps in the method of each embodiment of this application. For detailed functional descriptions of each module of the apparatus, please refer to the descriptions in the corresponding methods shown above, which will not be repeated here.

[0265] Based on the same principles as the application processing methods and apparatus provided in the embodiments of this application, the embodiments of this application also provide an electronic device (such as a server), which may include a memory, a processor, and a computer program stored in the memory. The processor executes the computer program to implement the steps of the method provided in any optional embodiment of this application.

[0266] In one possible implementation, Figure 11 A schematic diagram of the structure of an electronic device to which this application embodiment applies is shown, such as... Figure 11 As shown, Figure 11 The illustrated electronic device 4000 includes a processor 4001 and a memory 4003. The processor 4001 and the memory 4003 are connected, for example, via a bus 4002. In one possible implementation, the electronic device 4000 may further include a transceiver 4004, which can be used for data interaction between the electronic device and other electronic devices, such as sending and / or receiving data. It should be noted that in practical applications, the transceiver 4004 is not limited to one type, and the structure of the electronic device 4000 does not constitute a limitation on the embodiments of this application.

[0267] Processor 4001 may be a CPU (Central Processing Unit), a general-purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. It can implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of this application. Processor 4001 may also be a combination that implements computational functions, such as including one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

[0268] Bus 4002 may include a pathway for transmitting information between the aforementioned components. Bus 4002 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. Bus 4002 can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 11 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0269] The memory 4003 may be ROM (Read Only Memory) or other types of static storage devices capable of storing static information and instructions, RAM (Random Access Memory) or other types of dynamic storage devices capable of storing information and instructions, or EEPROM (Electrically Erasable Programmable Read Only Memory), CD-ROM (Compact Disc Read Only Memory) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media, other magnetic storage devices, or any other medium capable of carrying or storing computer programs and capable of being read by a computer, without limitation herein.

[0270] The memory 4003 stores computer programs that execute embodiments of this application, and its execution is controlled by the processor 4001. The processor 4001 executes the computer programs stored in the memory 4003 to implement the steps shown in the foregoing method embodiments.

[0271] This application provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it can implement the steps and corresponding content of the aforementioned method embodiments.

[0272] This application also provides a computer program product, including a computer program that, when executed by a processor, can implement the steps and corresponding content of the aforementioned method embodiments.

[0273] The terms "first," "second," "third," "fourth," "1," "2," etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in a sequence other than that shown in the figures or text.

[0274] It should be understood that although arrows indicate various operation steps in the flowcharts of this application's embodiments, the order in which these steps are implemented is not limited to the order indicated by the arrows. Unless explicitly stated herein, in some implementation scenarios of this application's embodiments, the implementation steps in each flowchart can be executed in other orders as required. Furthermore, some or all steps in each flowchart, based on the actual implementation scenario, may include multiple sub-steps or multiple stages. Some or all of these sub-steps or stages can be executed at the same time, and each sub-step or stage can also be executed at different times. In scenarios where execution times differ, the execution order of these sub-steps or stages can be flexibly configured according to requirements, and this application's embodiments do not limit this.

[0275] The above description is only an optional implementation method for some implementation scenarios of this application. It should be noted that for those skilled in the art, other similar implementation methods based on the technical concept of this application without departing from the technical concept of this application also fall within the protection scope of the embodiments of this application. < / slot> < / templete>

Claims

1. An application processing method, characterized in that, The method is applied to a main application implemented based on a micro-frontend, wherein the main application integrates at least one sub-application, including: In response to a loading request for a target sub-application, the content to be loaded for the target sub-application is obtained, and an inline frame for the target sub-application is created in the main application. A first component tree is generated in the inline framework. The first component tree includes at least two first nodes, and one of the first nodes is a preset component of the target sub-application. The content to be loaded is executed through the inline framework, the component to be displayed is determined from the at least two first nodes, an initial second component tree with the same tree structure as the first component tree is generated based on the mapping of the first component tree, and a mirror component with the same structure as the component to be displayed is added to the corresponding node position in the initial second component tree based on the node position of the component to be displayed in the first component tree, so as to update the initial second component tree; Hide the first component tree of the inline frame; parse each mirror component in the updated second component tree to obtain the display content corresponding to each mirror component in the updated second component tree; and determine the target display content based on the display content corresponding to all mirror components in the updated second component tree. The target content is displayed on the display interface corresponding to the main application.

2. The method according to claim 1, characterized in that, After displaying the updated components in the second component tree on the display interface corresponding to the main application, the method further includes: In response to a trigger operation on the display interface, determine the component to be updated corresponding to the trigger operation; Based on the node position of the component to be updated in the second component tree, the first node at the corresponding node position in the first component tree is modified to be the component to be updated; The component to be updated is displayed on the display interface corresponding to the main application.

3. The method according to claim 1, characterized in that, The process of generating the first component tree in the inline framework includes: Based on the loading request, an element selector corresponding to the target sub-application is generated. The element selector includes at least two preset components and the association between each pair of preset components. Based on the at least two preset components and the relationships between each pair of preset components, the first component tree is generated in the inline framework.

4. The method according to claim 1, characterized in that, The loading request includes attributes of the main application, and the method further includes: If the main application's attribute supports idle-time preloading, and the main application is in an idle state, loading is performed based on the preloading requests in the preloading queue, which is generated based on historical preloading requests; If the main application's attribute supports keep-alive operation, and it receives an uninstallation request for any sub-application, it retains the content to be loaded for the sub-application corresponding to the uninstallation request.

5. The method according to claim 1, characterized in that, The execution of the content to be loaded via the inline framework includes: Based on the time-slicing algorithm, the content to be loaded is divided into multiple sub-contents to be loaded; Each of the sub-contents to be loaded is executed sequentially through the inline framework.

6. The method according to claim 1, characterized in that, The loading request includes the target address corresponding to the target sub-application, and obtaining the content to be loaded corresponding to the target sub-application includes: Based on the target address, a first acquisition request is generated; Based on the first acquisition request, the target resource corresponding to the target address is acquired; The target resource is parsed to obtain the parsing result corresponding to the target sub-application; If the parsing result only includes the first content to be loaded, then the parsing result shall be used as the content to be loaded. If the parsing result includes a link corresponding to a first content to be loaded and a second content to be loaded, a second acquisition request is generated based on the link corresponding to the second content to be loaded; the second content to be loaded is acquired based on the second acquisition request; and the first content to be loaded and the second content to be loaded are determined as the content to be loaded.

7. The method according to claim 6, characterized in that, The content to be loaded includes cascading style sheets. After creating the inline frame corresponding to the target sub-application, the method further includes: The properties of the target sub-application are set within the inline framework. The properties of the target sub-application include at least one of the following: a preset relative address property, a preset entry property, and a reset style operation. Wherein, if the attribute of the target sub-application includes the preset relative address attribute, generating the first acquisition request based on the target address includes: Based on the preset relative address attribute, determine the preset relative address; The target address is converted into a relative path relative to the preset relative address, and the first acquisition request is generated based on the converted relative path; If the target sub-application's attributes include the preset entry attribute, generating a first acquisition request based on the target address includes: Based on the preset entry attribute, the target address is placed in the entry string corresponding to the preset entry attribute to obtain the first acquisition request; If the target sub-application's attributes include a style reset operation, the method further includes: The content to be loaded is executed through the inline frame, and the style of the Cascading Style Sheet in the content to be loaded is set to the style corresponding to the style in the reset style operation; The components in the updated second component tree displayed on the display interface corresponding to the main application include: Based on the configured cascading stylesheet, the updated components from the second component tree are displayed on the display interface corresponding to the main application.

8. An application processing device, characterized in that, The application processing device is applied to a main application implemented based on a micro-frontend, the main application integrating at least one sub-application, including: The content to be loaded module is used to obtain the content to be loaded corresponding to the target sub-application in response to a loading request for the target sub-application. An inline frame creation module is used to create an inline frame corresponding to the target sub-application in the main application in response to the loading request. The first component tree generation module is used to generate a first component tree in the inline framework. The first component tree includes at least two first nodes, and one of the first nodes is a preset component of the target sub-application. The mapping module is used to execute the content to be loaded through the inline framework, determine the component to be displayed from the at least two first nodes, generate an initial second component tree with the same tree structure as the first component tree based on the mapping of the first component tree, and add a mirror component with the same structure as the component to be displayed to the corresponding node position in the initial second component tree based on the node position of the component to be displayed in the first component tree, so as to update the initial second component tree; The display module is used to hide the first component tree of the inline frame; parse each mirror component in the updated second component tree to obtain the display content corresponding to each mirror component in the updated second component tree; determine the target display content based on the display content corresponding to all mirror components in the updated second component tree; and display the target display content on the display interface corresponding to the main application.

9. The apparatus according to claim 8, characterized in that, After displaying the updated components in the second component tree on the display interface corresponding to the main application via the display module, the mapping module is further configured to: In response to a trigger operation on the display interface, determine the component to be updated corresponding to the trigger operation; Based on the node position of the component to be updated in the second component tree, the first node at the corresponding node position in the first component tree is modified to be the component to be updated; The component to be updated is displayed on the display interface corresponding to the main application.

10. The apparatus according to claim 8, characterized in that, When the first component tree generation module generates the first component tree in the inline frame, it is specifically used for: Based on the loading request, an element selector corresponding to the target sub-application is generated. The element selector includes at least two preset components and the association between each pair of preset components. Based on the at least two preset components and the relationships between each pair of preset components, the first component tree is generated in the inline framework.

11. The apparatus according to claim 8, characterized in that, The loading request includes attributes of the main application, and the device further includes a main application processing module for: If the main application's attribute supports idle-time preloading, and the main application is in an idle state, loading is performed based on the preloading requests in the preloading queue, which is generated based on historical preloading requests; If the main application's attribute supports keep-alive operation, and it receives an uninstallation request for any sub-application, it retains the content to be loaded for the sub-application corresponding to the uninstallation request.

12. The apparatus according to claim 8, characterized in that, When the mapping module executes the content to be loaded through the inline framework, it is specifically used for: Based on the time-slicing algorithm, the content to be loaded is divided into multiple sub-contents to be loaded; Each of the sub-contents to be loaded is executed sequentially through the inline framework.

13. The apparatus according to claim 8, characterized in that, The loading request includes the target address corresponding to the target sub-application. When the content to be loaded module obtains the content to be loaded corresponding to the target sub-application, it is specifically used for: Based on the target address, a first acquisition request is generated; Based on the first acquisition request, the target resource corresponding to the target address is acquired; The target resource is parsed to obtain the parsing result corresponding to the target sub-application; If the parsing result only includes the first content to be loaded, then the parsing result shall be used as the content to be loaded. If the parsing result includes a first content to be loaded and a link corresponding to a second content to be loaded, a second acquisition request is generated based on the link corresponding to the second content to be loaded. Based on the second acquisition request, obtain the second content to be loaded; The first content to be loaded and the second content to be loaded are determined as the content to be loaded.

14. The apparatus according to claim 13, characterized in that, The content to be loaded includes cascading style sheets. After creating the inline frame corresponding to the target sub-application, the inline frame creation module is further used for: The properties of the target sub-application are set within the inline framework. The properties of the target sub-application include at least one of the following: a preset relative address property, a preset entry property, and a reset style operation. Wherein, if the attribute of the target sub-application includes the preset relative address attribute, the content to be loaded acquisition module, when generating the first acquisition request based on the target address, is specifically used for: Based on the preset relative address attribute, determine the preset relative address; The target address is converted into a relative path relative to the preset relative address, and the first acquisition request is generated based on the converted relative path; If the target sub-application's attributes include the preset entry attribute, the content to be loaded acquisition module, when generating a first acquisition request based on the target address, is specifically used for: Based on the preset entry attribute, the target address is placed in the entry string corresponding to the preset entry attribute to obtain the first acquisition request; If the target sub-application's attributes include a style reset operation, the mapping module is further configured to: The content to be loaded is executed through the inline frame, and the style of the Cascading Style Sheet in the content to be loaded is set to the style corresponding to the style in the reset style operation; When the display module displays the updated components in the second component tree on the display interface corresponding to the main application, it is specifically used for: Based on the configured cascading stylesheet, the updated components from the second component tree are displayed on the display interface corresponding to the main application.

15. An electronic device comprising a memory, a processor, and a computer program stored in the memory, characterized in that, The processor executes the computer program to implement the steps of the method according to any one of claims 1-7.

16. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1-7.

17. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1-7.

Images