CN113761412A

CN113761412A - Application page display method and device, electronic equipment, medium and application system

Info

Publication number: CN113761412A
Application number: CN202010982751.3A
Authority: CN
Inventors: 袁昌龙; 白圣培
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Priority date: 2020-09-17
Filing date: 2020-09-17
Publication date: 2021-12-07
Anticipated expiration: 2040-09-17
Also published as: CN113761412B

Abstract

The embodiment of the invention discloses a display method and device of an application page, electronic equipment, a medium and an application system. The method comprises the following steps: when the triggering operation of the sub application components in the main application page is detected, acquiring a first access path of a first sub application page corresponding to the sub application components; sending an access request containing a first access path to a server so that the server matches the first access path with a stored registration path, and acquiring a hypertext markup language (HTML) string fragment containing prerendering information of a first sub-application page according to the successfully matched registration path; the method comprises the steps of receiving an HTML string fragment sent by a server, determining a first sub-application page HTML file according to the HTML string fragment and a main application HTML file corresponding to a main application page, and rendering and displaying the first sub-application page based on the first sub-application page HTML file. The embodiment of the invention solves the problem that the sub-application can not be plugged in and pulled out dynamically, and reduces the integration difficulty of the sub-application.

Description

Application page display method and device, electronic equipment, medium and application system

Technical Field

The embodiment of the invention relates to the technical field of computer networks, in particular to a display method and device of an application page, electronic equipment, a medium and an application system.

Background

With the continuous increase of business requirements, codes of front-end engineering gradually expand, so that front-end applications gradually develop into 'megastone applications', and great challenges exist in the directions of application maintenance, application upgrading and the like. The micro front end is a structure similar to micro service, and applies the concept of micro service to a browser end, that is, web application is changed from single application to multiple small front end applications and is aggregated into one application. Each small front-end application can run independently, be developed independently and be deployed independently.

The most common micro front-end architecture at present is a Single-SPA architecture, which comprises a main application and a sub-application, and can realize the sub-application loading various technical frameworks in the main application without refreshing pages.

In the process of implementing the invention, the inventor finds that the prior art has at least the following technical problems:

the main application and the sub-application in the Single-SPA architecture are integrated in a front-end browser, the Single-SPA architecture defaults to register the sub-application in the main application in a hard coding mode, and the problem that the sub-application cannot be plugged in and pulled out dynamically exists.

Disclosure of Invention

The embodiment of the invention provides a display method, a display device, electronic equipment, a display medium and an application system of an application page, and aims to solve the problem that hard codes of sub-applications cannot be dynamically plugged in and out of a main application, so that the integration difficulty of the sub-applications is reduced.

In a first aspect, an embodiment of the present invention provides a method for displaying an application page, where the method includes:

when the triggering operation of a sub application component in a main application page is detected, acquiring a first access path of a first sub application page corresponding to the sub application component;

sending an access request containing the first access path to a server so that the server matches the first access path with a stored registration path, and acquiring a hypertext markup language (HTML) string fragment containing pre-rendering information of the first sub-application page according to the successfully matched registration path;

and receiving an HTML string fragment sent by the server, determining a first sub-application page HTML file according to the HTML string fragment and a main application HTML file corresponding to the main application page, and rendering and displaying the first sub-application page based on the first sub-application page HTML file.

In a second aspect, an embodiment of the present invention further provides a method for displaying an application page, where the method includes:

receiving an access request containing a first access path sent by a client; the first access path is a first access path of a first sub-application page corresponding to a sub-application component acquired by the client when the client detects a trigger operation on the sub-application component in a main application page;

matching the first access path with a stored registration path, and acquiring a hypertext markup language (HTML) character string fragment containing the pre-rendering information of the first sub-application page according to the successfully matched registration path;

and sending the HTML character string fragment to the client, so that the client determines a first sub-application page HTML file based on the HTML character string fragment and a main application HTML file corresponding to the main application page, and renders and displays the first sub-application page based on the first sub-application page HTML file.

In a third aspect, an embodiment of the present invention further provides a display device for an application page, where the device includes:

the first access path acquisition module is used for acquiring a first access path of a first sub application page corresponding to a sub application component when the trigger operation of the sub application component in a main application page is detected;

an access request sending module, configured to send an access request including the first access path to a server, so that the server matches the first access path with a stored registration path, and obtains a hypertext markup language HTML string fragment including pre-rendering information of the first sub-application page according to the registration path successfully matched;

and the first sub-application page rendering module is used for receiving the HTML string fragments sent by the server, determining a first sub-application page HTML file according to the HTML string fragments and a main application HTML file corresponding to the main application page, and rendering and displaying the first sub-application page based on the first sub-application page HTML file.

In a fourth aspect, an embodiment of the present invention further provides a display device for an application page, where the device includes:

the access request receiving module is used for receiving an access request which is sent by a client and contains a first access path; the first access path is a first access path of a first sub-application page corresponding to a sub-application component acquired by the client when the client detects a trigger operation on the sub-application component in a main application page;

an HTML character string segment obtaining module, configured to match the first access path with a stored registration path, and obtain an HTML character string segment containing pre-rendering information of the first sub-application page according to the successfully matched registration path;

and the HTML character string fragment sending module is used for sending the HTML character string fragment to the client, so that the client determines a first sub-application page HTML file based on the HTML character string fragment and a main application HTML file corresponding to the main application page, and renders and displays the first sub-application page based on the first sub-application page HTML file.

In a fifth aspect, an embodiment of the present invention further provides an electronic device, where the electronic device includes:

one or more processors;

a memory for storing one or more programs;

the one or more programs, when executed by the one or more processors, cause the one or more processors to implement any of the above-referenced display methods of an application page.

In a sixth aspect, the present invention further provides a storage medium containing computer-executable instructions, which when executed by a computer processor, are configured to perform the application page display method according to any one of the above-mentioned aspects.

In a seventh aspect, an embodiment of the present invention further provides an application system, where the application system includes: a user terminal and a server;

the user terminal is used for acquiring a first access path of a first sub application page corresponding to a sub application component when the triggering operation of the sub application component in a main application page is detected; sending an access request containing the first access path to a server; and receiving a hypertext markup language (HTML) string fragment sent by the server, determining a first sub-application page HTML file according to the HTML string fragment and a main application HTML file corresponding to the main application page, and rendering and displaying the first sub-application page based on the first sub-application page HTML file.

The server is used for receiving an access request containing a first access path sent by a client, matching the first access path with a stored registration path, and acquiring an HTML (hypertext markup language) character string fragment containing pre-rendering information of the first sub-application page according to the successfully matched registration path; and sending the HTML character string fragment to the client.

The embodiment of the invention has the following advantages or benefits:

by sending an access request containing a first access path of a first sub-application page to a server, and the server returns an HTML character string fragment containing the prerendering information of the first sub application page based on the first access path in the access request, and the HTML file of the first sub-application page is determined according to the HTML string fragment and the HTML file of the main application, so that the problem that the sub-application hard code in the prior art cannot be dynamically plugged and unplugged when being registered in the main application is solved, the embodiment of the invention transfers the management operation corresponding to the sub-application page to the server, by dynamically plugging or modifying the HTML string fragments corresponding to the sub application pages at the server side, the dynamic update of the sub application pages corresponding to the sub application components at the client side is realized, the strong coupling relation between the main application and the sub applications is reduced, and the integration difficulty of the sub applications is further reduced.

Drawings

Fig. 1 is a flowchart of a display method of an application page according to an embodiment of the present invention.

Fig. 2 is a flowchart of a display method of an application page according to a second embodiment of the present invention.

Fig. 3 is a flowchart of a specific example of a display method of an application page according to a second embodiment of the present invention.

Fig. 4 is a flowchart of a display method of an application page according to a third embodiment of the present invention.

Fig. 5 is a schematic diagram of a registration sub-application of a micro application registry according to a third embodiment of the present invention.

Fig. 6 is a flowchart of a display method of an application page according to a fourth embodiment of the present invention.

Fig. 7 is a flowchart of a display method of an application page according to a fifth embodiment of the present invention.

Fig. 8 is a schematic structural diagram of a target HTML segment according to a fifth embodiment of the present invention.

Fig. 9 is a flowchart of a method for generating an HTML string fragment according to a fifth embodiment of the present invention.

Fig. 10 is a schematic diagram of a display device for an application page according to a sixth embodiment of the present invention.

Fig. 11 is a schematic diagram of a display device for an application page according to a seventh embodiment of the present invention.

Fig. 12 is a schematic structural diagram of an electronic device according to an eighth embodiment of the present invention.

Fig. 13 is a schematic structural diagram of an application system provided in the tenth embodiment of the present invention.

Fig. 14 is a schematic diagram of a specific example of an application system provided in the tenth embodiment of the present invention.

Detailed Description

The present invention will be described in further detail with reference to the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting of the invention. It should be further noted that, for the convenience of description, only some of the structures related to the present invention are shown in the drawings, not all of the structures.

Example one

Fig. 1 is a flowchart of a method for displaying an application page according to an embodiment of the present invention, where the embodiment is applicable to a case where a sub-application page corresponding to a sub-application component is displayed in a client, and the method may be executed by a display apparatus of the application page, where the apparatus may be implemented in a software and/or hardware manner, and the apparatus may be configured in a terminal device. The method specifically comprises the following steps:

s110, when the triggering operation of the sub application components in the main application page is detected, a first access path of a first sub application page corresponding to the sub application components is obtained.

Illustratively, the home application page is a home page displayed in a client, wherein the client includes, but is not limited to, a browser, shopping software, financial software, chat software, and the like. Specifically, the main application page includes at least one sub-application component, and the sub-application component may be used to encapsulate a sub-application, and the sub-application may correspond to at least one first sub-application page. By way of example, the sub-application components may be abstract components, and may be adapted to different front-end frameworks, such as Vue framework, React framework, and Angular framework. Specifically, each sub-application component binds a first access path corresponding to a sub-application in advance, where, for example, a path type of the first access path may be a URL (Uniform Resource Locator) path.

S120, an access request containing the first access path is sent to the server.

For example, the access request may be an ajax request, and specifically, a path parameter in the ajax request is set as a first access path corresponding to the first sub-application page.

In this embodiment, the server matches the first access path with the stored registration path, and acquires a HTML string fragment containing the pre-rendering information of the first sub-application page according to the successfully matched registration path. The server prestores at least one version of HTML character string fragment corresponding to at least one first sub-application page and a registration path corresponding to each HTML character string fragment. For example, the first sub-application page corresponds to the HTML string segment of version 1 and the HTML string segment of version 2, and the server may be configured to obtain the HTML string segment of the preset version, where the preset version may be the latest version. In one embodiment, the HTML string fragments are optionally generated by the server based on the input sub-application registration information. Specifically, a prerender page is generated based on the input sub-application registration information, and an HTML character string fragment containing the prerender information of the first sub-application page is generated based on the prerender page.

Specifically, the first access path is matched with the stored registration path, if the first access path is the same as the registration path, the first access path is considered to be matched with the registration path, and the HTML string fragment containing the pre-rendering information of the first sub-application page is obtained according to the successfully matched registration path. And if the first access path is different from the registration path, the first access path is not matched with the registration path, and the matching error prompt message is sent to the client.

S130, receiving the HTML string fragments sent by the server, determining a first sub-application page HTML file according to the HTML string fragments and the main application HTML file corresponding to the main application page, and rendering and displaying the first sub-application page based on the first sub-application page HTML file.

In an embodiment, optionally, the HTML string segment is added to a child node corresponding to the child application component in the main application HTML file, so as to obtain a first child application page HTML file. In this embodiment, the HTML string fragment is an innerHTML string in an HTML fragment corresponding to the pre-rendered page, and the innerHTML can be used to extract HTML fragments in a start tag and an end tag in the HTML fragment. The main application page is provided with a main application HTML file corresponding to the main application page, and the main application HTML file comprises child nodes corresponding to all the child application components in the main application page. And taking the HTML character string fragment corresponding to the first sub application page as a sub node to mount the HTML character string fragment into the sub node corresponding to the sub application component in the main application HTML file, so as to obtain the complete HTML file of the first sub application page.

In one embodiment, optionally, rendering and displaying the first sub-application page based on the first sub-application page HTML file includes: downloading a dependent resource corresponding to the updated external link address from a server or a content distribution network based on the updated external link address in the HTML string fragment in the HTML file of the first sub-application page; wherein, the updated external link address comprises a server address or a content distribution network address; and rendering and displaying a first sub-application page corresponding to the sub-application component based on the dependent resource and the inline character string of the pre-rendering information contained in the HTML character string segment.

In one embodiment, the dependent resource optionally includes a third party resource or a public resource. Illustratively, the third-party resource refers to a resource that needs to be acquired from a third-party resource library, and specifically, a domain name corresponding to the third-party resource library is different from a domain name of the local resource library. The common resource refers to a resource that is loaded by each sub application page, and may be described as a shared resource of the main application. The updated external link address is obtained by updating the external link address in the external link character string according to the resource type corresponding to the external link character string in the page object of the pre-rendered page by the server. In the present embodiment, the update out-link address includes a server address or a content distribution network address. The internal string is obtained by the server performing internal conversion on the external chain string according to the resource type corresponding to the external chain string. Specifically, the resource code of the independent resource corresponding to the external chain character string is directly written into the inline character string, and the inline character string can be directly executed without initiating a request.

Specifically, the initial first sub-application page can be rendered based on the inline character string of the pre-rendering information contained in the HTML character string segment, and then the downloaded dependent resource is added to the initial first sub-application page, so that the complete first sub-application page can be rendered. The method has the advantages that the first sub-application page can be quickly rendered and displayed only by acquiring the HTML character string fragment containing the pre-rendering information of the first sub-application page and downloading the dependent resources. Compared with the micro front-end architecture in the prior art, when the client loads the sub application page, CSS (caching Style Sheets, Cascading Style Sheets), JS (javascript), view JS, dependent resources and the like need to be downloaded, and the technical scheme of the embodiment improves the loading performance of the sub application page.

On the basis of the above embodiment, optionally, the HTML file of the first sub-application page is stored in the memory of the client according to the version number corresponding to the HTML string segment of the first sub-application page. The advantage of such an arrangement is that when the same sub-application is loaded next time, only the sub-application needs to be obtained from the local memory, and the loading performance of the sub-application page is further improved.

On the basis of the above embodiment, optionally, the JS script running in the main application is captured for exception, and it is ensured that the processing exception of the sub-application is not propagated to the outside of the main application, thereby realizing error isolation.

In the technical solution of this embodiment, by sending an access request including a first access path of a first sub application page to a server, and the server returns an HTML character string fragment containing the prerendering information of the first sub application page based on the first access path in the access request, and the HTML file of the first sub-application page is determined according to the HTML string fragment and the HTML file of the main application, so that the problem that the sub-application hard code in the prior art cannot be dynamically plugged and unplugged when being registered in the main application is solved, the embodiment of the invention transfers the management operation corresponding to the sub-application page to the server, by dynamically plugging or modifying the HTML string fragments corresponding to the sub application pages at the server side, the dynamic update of the sub application pages corresponding to the sub application components at the client side is realized, the strong coupling relation between the main application and the sub applications is reduced, and the integration difficulty of the sub applications is further reduced.

Example two

Fig. 2 is a flowchart of a display method of an application page according to a second embodiment of the present invention, and a technical solution of the present embodiment is further detailed based on the above-described embodiment. Optionally, before sending the access request including the first access path to the server, the method further includes: matching the first access path with a second access path corresponding to a first sub-application page displayed in a client; and if the first access path is not matched with the second access path, removing an HTML character string fragment corresponding to the first sub application page in an HTML file of the first sub application page to obtain a main application HTML file corresponding to the main application page.

The specific implementation steps of the embodiment of the invention comprise:

s210, when the triggering operation of the sub-application components in the main application page is detected, a first access path of a first sub-application page corresponding to the sub-application components and a second access path corresponding to a second sub-application page displayed in the client are obtained.

In an embodiment, optionally, before obtaining the first access path of the first sub application page corresponding to the sub application component, the method further includes: and monitoring the change of the first access path by intercepting a preset routing event, and if the first access path is changed, acquiring the first access path of the first sub-application page corresponding to the sub-application component. Illustratively, the preset routing event includes a hash event or a post event. The hashchange event and the post event correspond to an API (Application Programming Interface) in the hypertext markup language 5(HTML 5). Specifically, the first access path corresponding to the hash event includes a "# hash", and when the hash changes, the first access path is considered to change. The popstate event supports forward and backward triggering operations. For example, the first access path example.com/page1 and the first access path example.com/page2 may both trigger a post event, and a hash in the first access path example.com/page1# hash is changed to trigger a hash event. Specifically, the hash event corresponds to a hash routing mode, and the pop event corresponds to a history routing mode.

And S220, whether the first access path and the second access path are matched or not is judged, if so, S260 is executed, and if not, S230 is executed.

When registering a sub-application at the server, a routing mode corresponding to the sub-application is usually set. In this embodiment, if the routing mode corresponding to the sub-application is the hash routing mode and the client monitors a pop event, the first access path is matched with the second access path, so that a situation that the first sub-application page is displayed incorrectly due to mismatching of the routing mode and the preset routing event can be avoided.

S230, removing the HTML character string fragment corresponding to the second sub application page in the HTML file of the second sub application page to obtain the HTML file of the main application corresponding to the main application page.

Specifically, the HTML file of the first sub-application page is a complete HTML segment corresponding to the first sub-application page, and the HTML segment includes an HTML string segment corresponding to the first sub-application page. Specifically, if the first access path is not matched with the second access path, the second sub-application page is unloaded, specifically, the HTML character string segment in the HTML file of the second sub-application page is removed, and the main application HTML file corresponding to the main application page is obtained.

S240, sending an access request containing the first access path to the server.

S250, receiving the HTML string fragments sent by the server, determining a first sub-application page HTML file according to the HTML string fragments and the main application HTML file corresponding to the main application page, and rendering and displaying the first sub-application page based on the first sub-application page HTML file.

And S260, ending.

Fig. 3 is a flowchart of a specific example of a display method of an application page according to a second embodiment of the present invention. As shown in fig. 3, if it is monitored that the first access path changes through an intercept hash event or a post event, the first access path of the first sub-application page corresponding to the sub-application component is acquired, the first access path is matched with the second access path corresponding to the first sub-application page displayed in the client, and if the first access path is matched with the second access path, the display process of the application page corresponding to the first access path is exited. And if not, uninstalling (Unmount) the sub-application, specifically, removing the HTML character string segment in the HTML file of the first sub-application page to obtain the HTML file of the main application. And setting the sub-application component to be in a Loading (Loading) state, simultaneously sending an ajax request containing a first access path to the server, and calling an externally exposed sub-application query API of a Node layer of the server to determine an HTML (hypertext markup language) character string fragment corresponding to the first access path. And if the HTML string segment which is sent by the server and corresponds to the first access path is not received, setting the sub-application component to be in a Load Failure (Load Failure) state and exiting. And if the HTML character string fragment which is sent by the server and corresponds to the first access path is received, mounting (Mount) the sub-application, specifically, adding the HTML character string fragment of the first sub-application page corresponding to the sub-application to a sub-node which corresponds to the sub-application component in the main application HTML file to obtain the HTML file of the first sub-application page, and rendering and displaying the first sub-application page based on the HTML file of the first sub-application page.

In the Single-SPA architecture in the prior art, the sub-application is required to expose some hook functions, such as a pre-loading function, a mounting function and an unloading function, so as to realize the control of the complete life cycle of the accessed sub-application. To implement a hook function derived by a primary application referencing a secondary application, a global variable is typically set between the secondary application and the primary application to reference the hook function to the global variable so that the primary application can obtain the lifecycle of the secondary application. But this way of setting global variables makes a very intrusive adaptation to sub-applications. According to the technical scheme of the embodiment, the HTML file of the main application page corresponding to the main application page is obtained by removing the HTML string fragment corresponding to the first sub-application page in the HTML file of the first sub-application page, the access request containing the first access path is sent to the server, the HTML file of the first sub-application page is determined according to the HTML string fragment and the HTML file of the main application corresponding to the main application page, and life cycle management such as unloading, loading and hanging of the sub-application is directly packaged in the sub-application component.

EXAMPLE III

Fig. 4 is a flowchart of a method for displaying an application page according to a third embodiment of the present invention, where the method is applicable to a case where a sub-application page corresponding to a sub-application component is displayed in a client, and the method may be executed by a display device of the application page, where the device may be implemented in a software and/or hardware manner, and the device may be configured in a server. The method specifically comprises the following steps:

s310, receiving an access request containing a first access path sent by a client.

In this embodiment, the first access path is a first access path of a first sub-application page corresponding to a sub-application component, which is acquired by the client when the client detects a trigger operation on the sub-application component in the main application page. For example, the path type of the first access path may be a URL path. The access request may be an ajax request, and specifically, a path parameter in the ajax request is set to be a first access path corresponding to the first sub application page.

S320, matching the first access path with the stored registration path, and acquiring a hypertext markup language (HTML) character string fragment containing the prerendering information of the first sub-application page according to the successfully matched registration path.

Specifically, the server prestores at least one version of HTML character string fragments containing prerendering information of the first sub-application page corresponding to at least one first sub-application page, and registration paths corresponding to the HTML character string fragments. For example, the first sub-application page corresponds to the HTML string segment of version 1 and the HTML string segment of version 2, and the server may be configured to obtain the HTML string segment of the preset version by default, where the preset version may be the latest version.

In one embodiment, the HTML string fragments are optionally generated by the server based on the input sub-application registration information. Specifically, a page is generated and prerendered based on the input sub-application registration information, and an HTML character string fragment containing prerendering information of the first sub-application page is generated based on the prerendered page. In an exemplary embodiment, a micro application registry is set in the server, and the micro application registry manages all sub applications in a unified manner, including registration, addition, version update, deletion, and switching of the sub applications. Specifically, when a new sub-application needs to be added to the main application page of the client, only the first access path corresponding to the new sub-application needs to be bound to the sub-application component in the main application page. When the version of the sub-application in the micro-application registration center is updated, only the corresponding sub-application is selected and new sub-application registration information is input aiming at the sub-application, and the HTML string fragment of the new version corresponding to the sub-application can be generated. When the latest version of the sub-application fails to operate, the first access path corresponding to the previous version of the sub-application can be automatically bound to the sub-application component of the client, so that the client renders and displays the first sub-application page corresponding to the previous version of the sub-application. Fig. 5 is a schematic diagram of a registration sub-application of a micro application registry according to a third embodiment of the present invention. As shown in fig. 5, the micro application registry of the server stores a plurality of sub applications and a plurality of versions corresponding to the plurality of sub applications.

S330, the HTML character string fragment is sent to the client.

In this embodiment, the client determines the first sub-application page HTML file based on the HTML string fragment and the main application HTML file corresponding to the main application page, and renders and displays the first sub-application page based on the first sub-application page HTML file.

In this embodiment, the HTML string fragment is an innerHTML string in an HTML fragment corresponding to the pre-rendered page, and the innerHTML can be used to extract HTML fragments in a start tag and an end tag in the target HTML fragment. The main application page is provided with a main application HTML file corresponding to the main application page, and the main application HTML file comprises child nodes corresponding to all the child application components in the main application page. And adding the HTML character string fragment corresponding to the first sub application page as a child node into a child node corresponding to the sub application component in the main application HTML file to obtain a complete HTML file of the first sub application page.

According to the technical scheme of the embodiment, the access request containing the first access path and sent by the client is received, the acquired HTML string segment containing the pre-rendering information of the first sub-application page is sent to the client according to the first access path, the problem that dynamic plugging and unplugging cannot be achieved in the main application due to hard coding registration of the sub-application in the prior art is solved, dynamic plugging and unplugging and dynamic updating of the sub-application of the client can be achieved by dynamically modifying the HTML string segment in the micro-application registration center of the server, the strong coupling relation between the main application and the sub-application is reduced, and further the integration difficulty of the sub-application is reduced. Furthermore, the management operation of the sub-application is transferred to the server, so that the conditions of resource occupation, loading, abnormal operation and the like of the sub-application can be monitored in real time at the server side, and further data support is provided for the subsequent management of the sub-application at the server side.

Example four

Fig. 6 is a flowchart of a display method of an application page according to a fourth embodiment of the present invention, and a technical solution of the present embodiment is further detailed based on the foregoing embodiments. Optionally, before receiving an access request including the first access path sent by the client, the method further includes: generating an HTML (hypertext markup language) character string fragment containing pre-rendering information of a first sub-application page and a registration path corresponding to the HTML character string fragment based on input sub-application registration information; the sub-application registration information comprises at least one of a git code address corresponding to a git source code of a first sub-application page in a git source code library, a construction compression package of a rendering resource containing the first sub-application page and a deployment access path corresponding to the first sub-application page which is deployed and completed by a client.

The specific implementation steps of this embodiment include:

s410, based on the input sub-application registration information, generating an HTML character string fragment containing the pre-rendering information of the first sub-application page and a registration path of the corresponding HTML character string fragment.

In this embodiment, the sub-application registration information includes at least one of a git code address corresponding to a git source code of a first sub-application page in the git source code library, a build compression package of a rendering resource including the first sub-application page, and a deployment access path corresponding to the first sub-application page that has been deployed by the client.

Illustratively, the git source code library may be a GitHub library or a GitLab library, among others. The git source code in the git source code library matching with the git code address can be obtained through the git code address. The rendering resources include, but are not limited to, pictures, texts, public resources, third-party resources, and the like, and the compression package includes the rendering resources. Specifically, after the first sub application page is deployed on the client, a deployment access path corresponding to the first sub application page is generated, and the HTML file corresponding to the first sub application page can be acquired through the deployment access path. The deployment method of the deployed first sub-application page may be based on any existing micro-front-end architecture method, and for example, the micro-front-end architecture method may be a template combination method. And rendering the HTML file acquired based on the deployment access path to obtain a first sub application page. In an embodiment, a specific path format of a deployment access path corresponding to a deployed first sub-application page may be different from a path format of a first access path obtained according to a trigger operation provided in the embodiment of the present invention, for example, the path format of the first access path provided in the embodiment of the present invention includes "sub-application name + version number", and the deployment access path corresponding to a deployed first sub-application page of a client includes "sub-application domain name". When an access path of a sub-application is generated by an existing micro front-end architecture, a domain name is generally applied for the sub-application, and the registered sub-application is deployed on line at the front end, so that resource waste is caused. The generation of the first access path provided by the embodiment does not need domain name application and does not need to be deployed on the front end, so that the waste of resources is effectively reduced.

In one embodiment, optionally, generating an HTML string fragment containing prerendering information of the first sub-application page based on the input sub-application registration information includes: when the sub-application registration information comprises a git code address, acquiring a git source code of a first sub-application page corresponding to the git code address in a git source code library, and performing construction processing based on the git source code to obtain a construction compression packet containing a rendering resource of the first sub-application page; executing the pre-rendering operation of the first sub application page based on the constructed compression packet to obtain a pre-rendering page, and acquiring a page object corresponding to the pre-rendering page; an HTML string fragment containing prerendering information of the first sub-application page is determined based on the page object.

Specifically, for the resource information provided by the git source code, the rendering resources involved in the git source code are downloaded and classified, and the classified resources are respectively packaged to generate a construction compression package. The method comprises the steps of executing a pre-rendering operation of a first sub application page based on a constructed compression packet to obtain a pre-rendering page, specifically, decompressing the constructed compression packet, and executing the pre-rendering operation of the first sub application page on a virtual client based on rendering resources obtained after decompression to obtain the pre-rendering page. The rendering resource is a loading resource during page rendering, and may be, for example, a picture resource, a text resource, a view resource, and the like.

Illustratively, the Puppeteer service is started to acquire a page (document) object corresponding to the pre-rendered page, and specifically, the page object may be used to access all HTML elements in the pre-rendered page.

In another embodiment, optionally, when the sub-application registration information is a constructed compressed packet, directly decompressing the constructed compressed packet, performing a pre-rendering operation of a first sub-application page on the virtual client based on rendering resources obtained after decompression to obtain a pre-rendered page, and obtaining a page object corresponding to the pre-rendered page; an HTML string fragment containing prerendering information of the first sub-application page is determined based on the page object. In another embodiment, optionally, when the sub-application registration information is a first access path corresponding to a first sub-application page deployed by the client, sending an access request including the first access path to a terminal storing deployment information of the first sub-application page, acquiring a first sub-application page HTML file corresponding to the first sub-application page returned by the terminal, executing a pre-rendering operation of the first sub-application page based on the first sub-application page HTML file to obtain a pre-rendered page corresponding to the first sub-application page deployed, and acquiring a page object corresponding to the pre-rendered page; an HTML string fragment containing prerendering information of the first sub-application page is determined based on the page object.

On the basis of the foregoing embodiment, optionally, the sub-application registration information further includes at least one of a user name, a password, a name of the sub-application, a page route of a first sub-application page corresponding to the sub-application, a route mode corresponding to the sub-application, and a registration update path; the registration updating path comprises the identity number and the version number of the sub-application.

In the example, the sub-application registration information input by the user is obtained on the interactive interface of the micro-application registration center. The user name and the password can be used for binding the user with the registered sub-application, and authority management of the sub-application is achieved. Wherein the name of the sub-application can be used to distinguish different registered sub-applications. Specifically, the sub-application includes at least one first sub-application page, and a page route (viewRouter) of the first sub-application page may be used to distinguish which first sub-application page corresponds to the sub-application registration information, and for example, the sub-application 1 includes a page a, a page B, and a page C, where the page a is a top page of the sub-application. If the page route is "child application 1: if "/", the default is page a, if the page route is "child application 1: and B', the page corresponds to the page B. Specifically, the routing mode (routeMode) includes a hash mode and a history mode, and corresponds to a hash event and a post event, respectively. The registration update path (activePath) may be used to describe a version number of the sub-application corresponding to the current sub-application registration information, and may be, for example, "/app/: id/: version", where app represents a name of the sub-application, id represents an identification number of the sub-application, and version represents a version number of the sub-application. Specifically, after the sub-application is registered, a new version number corresponding to the sub-application is automatically generated.

S420, receiving an access request containing a first access path sent by the client.

S430, matching the first access path with the stored registration path, and acquiring an HTML character string fragment containing the prerendering information of the first sub-application page according to the successfully matched registration path.

And S440, sending the HTML character string fragments to the client.

According to the technical scheme, the HTML string fragment containing the pre-rendering information of the first sub-application page and the registration path corresponding to the HTML string fragment are generated based on the input sub-application registration information, the problem that the registration process is complex due to the fact that the sub-application is statically registered to the main application in the prior art is solved, the HTML string fragment corresponding to the sub-application can be registered and generated only by inputting the sub-application registration information, meanwhile, dynamic updating of sub-application versions and authority management of the sub-application can be achieved, and the usability of the micro front-end architecture is improved.

EXAMPLE five

Fig. 7 is a flowchart of a display method of an application page according to a fifth embodiment of the present invention, and a technical solution of the present embodiment is further detailed based on the foregoing embodiment. Optionally, the determining, based on the page object, an HTML string fragment containing prerendering information of the first sub-application page includes: creating a virtual HTML fragment containing child node information of the virtual node component; wherein the virtual node component corresponds to the sub-application component; determining an adding character string according to a tag type corresponding to an element tag in the page object, and adding the adding character string to a child node corresponding to a child application component in the virtual HTML fragment to obtain a target HTML fragment; and extracting the character string fragments corresponding to the sub-application components in the target HTML fragments to obtain HTML character string fragments.

The specific implementation steps of this embodiment include:

s510, generating a prerender page based on the input sub-application registration information, and acquiring a page object corresponding to the prerender page.

S520, creating a virtual HTML fragment containing the child node information of the virtual node component.

Illustratively, a virtual HTML fragment is created by the DOM API createDocumentFragment method. In this embodiment, the virtual node component sub-application components correspond to each other, and specifically, the sub-node information of the virtual node component corresponds to the sub-node information of the corresponding sub-application component in the HTML file of the main application.

S530, determining an adding character string according to the label type corresponding to the element label in the page object, and adding the adding character string to a child node corresponding to the child application component in the virtual HTML fragment to obtain a target HTML fragment.

In an embodiment, optionally, determining to add a character string according to a tag type corresponding to an element tag in the page object includes: if the element tag is a non-outer-link tag, taking a character string corresponding to the non-outer-link tag in the page object as an added character string; and if the element tag is an external link tag, downloading an external link character string corresponding to the external link tag in the page object to a server, and determining an addition character string according to a resource type corresponding to the external link character string.

Illustratively, among them, the element tags include the < head > element tag and the < body > element tag in the page object. Specifically, the out-link tag means that rendering resources corresponding to the tag need to be acquired from other memories. Illustratively, the out-link tags may be a link tag, a style tag, and a script tag. For example, the style code corresponding to the style resource is written in a separate style file, and the style file is linked to the HTML segment through a link tag. Specifically, if the element tag is a non-outer-link tag, a character string corresponding to the non-outer-link tag in the page object is used as an addition character string, and the addition character string is added to a child node corresponding to the child application component in the virtual HTML segment. Illustratively, an apendchild addition approach may be employed.

Specifically, the outer chain character strings corresponding to the outer chain labels in the page objects are downloaded to the server according to the sequence. For example, the precedence order may be downloading the style string first and then the script string. The reason for this is that there may be some dependency between the outer chain strings. Specifically, the download can be performed using the SystemJS loading tool. Further, determining an adding character string according to the resource type corresponding to the external link character string.

In an embodiment, optionally, the adding the character string includes updating an external link address or an internal link character string, and accordingly, determining the adding character string according to a resource type corresponding to the external link character string includes: if the resource type corresponding to the external link character string is dependent resource, storing the dependent resource corresponding to the external link character string in a memory of a server, and using the generated server address as an updated external link address, or uploading the dependent resource corresponding to the external link character string to a content distribution network, and using a content distribution network address fed back by the content distribution network as an updated external link address; the dependent resources are public resources or third-party resources; and if the resource type corresponding to the external chain character string is independent resource, performing inline conversion processing on the external chain character string to obtain an inline character string.

In the example, when the outer chain character string is a style character string, the style code corresponding to the style character string is written in a double quotation mark in style ═ b ". And when the outer chain character string is a script character string, writing a script code corresponding to the script character string in a double quotation mark in the script ═ in'. Wherein, style ═ and script ═ are respectively the style character string of the outer chain and the inline character string corresponding to the sample character string. The advantage of the arrangement is that the conversion of the external chain character string into the internal character string can be immediately executed without triggering the request, thereby improving the loading performance of the sub application page. On the other hand, in the embodiment, the style string of the external link is written and added to the HTML segment in the format of the inline style string, and when the client uninstalls the first sub-application page, the inline style string is deleted from the HTML file of the first sub-application page, so that CSS isolation can be well achieved.

S540, extracting the character string fragments corresponding to the sub-application components in the target HTML fragments to obtain the HTML character string fragments, and generating the registration paths corresponding to the HTML character string fragments.

Specifically, an innerHTML method is adopted to extract a character string segment corresponding to the sub-application component in the target HTML segment, and the obtained HTML character string segment is stored in a database of the server as an HTML Fragment. Specifically, after the storage is completed, the server automatically generates the sub-application ID and the version number corresponding to the HTML string segment. Illustratively, this version number is consistent with the version number in package json by default. Json is a description file of the Node module.

Fig. 8 is a schematic structural diagram of a target HTML segment according to a fifth embodiment of the present invention. The micro application in fig. 8 represents the sub application mentioned in the embodiment of the present invention, and "HTML Fragment" in fig. 8 represents an HTML string Fragment, and specifically, the HTML string Fragment includes HTML, a Cascading Style Sheet (CSS), a portal JS (javascript), and each view JS. Fonts and pictures in fig. 8 represent public resources in the dependent resources, and the public resources and third-party resources corresponding to the target HTML fragments are uploaded to a Cloud content distribution network (Cloud CDN) as the dependent resources.

Fig. 9 is a flowchart of a method for generating an HTML string fragment according to a fifth embodiment of the present invention. As shown in fig. 9, after the sub-application is constructed, the Node server and the Puppeteer service are respectively started, the Puppeteer service initiates a request for obtaining a pre-rendering page to the Node server, and the Node server processes the request and returns the pre-rendering page. The Puppeteeer service acquires a page object corresponding to the pre-rendered page and puts through a virtual HTML fragment. Elements in the page object are traversed, where the elements include, by way of example, a < head > element and a < body > element. Illustratively, whether the tag type of an element tag in the < head > element is an out-link tag is judged, if not, a character string corresponding to the non-out-link tag is added to a child node of the virtual HTML fragment, and if so, an out-link character string corresponding to the out-link tag is downloaded. Judging whether the resource type corresponding to the external chain character string is a dependent resource, if so, uploading the external chain character string to a Content Delivery Network (CDN), taking a returned CDN address as an updated external chain address, adding the updated external chain address to a child node of the virtual HTML fragment, and if not, converting the external chain character string into an inline character string and then adding the inline character string to the child node of the virtual HTML fragment. And if all elements of the page object are scanned completely, extracting an innerHTML fragment, namely an HTML character string fragment, corresponding to the first sub-application page from the obtained target HTML fragment, and storing the HTML character string fragment in a database.

And S550, receiving an access request containing the first access path sent by the client.

And S560, matching the first access path with the stored registration path, and acquiring an HTML character string fragment containing the prerendering information of the first sub-application page according to the successfully matched registration path.

And S570, sending the HTML character string fragment to the client.

According to the technical scheme, the pre-rendering page is generated based on the input sub-application registration information, the page object corresponding to the pre-rendering page is obtained, the HTML string fragment containing the pre-rendering information of the first sub-application page is determined based on the tag type of the element in the page object and the resource type of the external chain string, the problem that the sub-application loading performance is poor in the prior art is solved, in the sub-application registration process, almost complete HTML fragments are provided through the technical means that the pre-rendering and the external chain string are converted into the inline string and the like, then the HTML fragments are added into the main application HTML file, the first sub-application page can be quickly rendered and obtained only by obtaining the downloading dependent resources, and the sub-application loading performance is greatly improved.

EXAMPLE six

Fig. 10 is a schematic diagram of a display device for an application page according to a sixth embodiment of the present invention. The present embodiment is applicable to a case where a sub-application page corresponding to a sub-application component is displayed in a client, and the apparatus may be implemented in a software and/or hardware manner, and may be configured in a terminal device. The display device of the application page comprises: a first access path acquisition module 610, an access request transmission module 620 and a first sub-application page rendering module 630.

The first access path obtaining module 610 is configured to, when a trigger operation of a sub application component in a main application page is detected, obtain a first access path of a first sub application page corresponding to the sub application component;

an access request sending module 620, configured to send an access request including a first access path to a server, so that the server matches the first access path with a stored registration path, and obtains a hypertext markup language HTML string fragment including pre-rendering information of a first sub-application page according to the registration path successfully matched;

the first sub-application page rendering module 630 is configured to receive the HTML string fragment sent by the server, determine an HTML file of a first sub-application page according to the HTML string fragment and a main application HTML file corresponding to the main application page, and render and display the first sub-application page based on the HTML file of the first sub-application page.

According to the technical scheme of the embodiment, by sending the access request of the first access path containing the first sub application page to the server, and the server returns an HTML character string fragment containing the prerendering information of the first sub application page based on the first access path in the access request, and the HTML file of the first sub-application page is determined according to the HTML string fragment and the HTML file of the main application, so that the problem that the sub-application hard code in the prior art cannot be dynamically plugged and unplugged when being registered in the main application is solved, the embodiment of the invention transfers the management operation corresponding to the sub-application page to the server, by dynamically plugging or modifying the HTML string fragments corresponding to the sub application pages at the server side, the dynamic update of the sub application pages corresponding to the sub application components at the client side is realized, the strong coupling relation between the main application and the sub applications is reduced, and the integration difficulty of the sub applications is further reduced.

On the basis of the foregoing technical solution, optionally, the first sub-application page rendering module 630 is specifically configured to:

and adding the HTML character string fragments to child nodes corresponding to the child application components in the main application HTML file to obtain a first child application page HTML file.

On the basis of the above technical solution, optionally, the apparatus further includes:

the first access path matching module is used for matching the first access path with a second access path corresponding to a second sub-application page displayed in the client;

and the main application HTML file determining module is used for clearing the HTML character string fragment corresponding to the second sub application page in the second sub application page HTML file to obtain the main application HTML file corresponding to the main application page if the first access path is not matched with the second access path.

downloading a dependent resource corresponding to the updated external link address from a server or a content distribution network based on the updated external link address in the HTML string fragment in the HTML file of the first sub-application page; wherein, the updated external link address comprises a server address or a content distribution network address; and rendering and displaying a first sub-application page corresponding to the sub-application component based on the dependent resource and the inline character string of the pre-rendering information contained in the HTML character string segment.

The display device of the application page provided by the embodiment of the invention can be used for executing the display method of the application page provided by the embodiment of the invention, and has corresponding functions and beneficial effects of the execution method.

It should be noted that, in the embodiment of the display device for application pages, the units and modules included in the embodiment are only divided according to functional logic, but are not limited to the above division as long as the corresponding functions can be implemented; in addition, specific names of the functional units are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present invention.

EXAMPLE seven

Fig. 11 is a schematic diagram of a display device for an application page according to a seventh embodiment of the present invention. The present embodiment may be applicable to a case where a sub-application page corresponding to a sub-application component is displayed in a client, and the apparatus may be implemented in a software and/or hardware manner, and may be configured in a server. The display device of the application page comprises: an access request receiving module 710, an HTML string fragment acquiring module 720, and an HTML string fragment transmitting module 730.

The access request receiving module 710 is configured to receive an access request that includes a first access path and is sent by a client; the first access path is a first access path of a first sub-application page corresponding to a sub-application component acquired by a client when the client detects a trigger operation on the sub-application component in a main application page;

the HTML string segment obtaining module 720 is configured to match the first access path with the stored registration path, and obtain a hypertext markup language HTML string segment containing the pre-rendering information of the first sub-application page according to the successfully matched registration path;

the HTML string fragment sending module 730 is configured to send the HTML string fragment to the client, so that the client determines the first sub-application page HTML file based on the HTML string fragment and the main application HTML file corresponding to the main application page, and renders and displays the first sub-application page based on the first sub-application page HTML file.

the HTML character string segment generating module is used for generating an HTML character string segment containing the pre-rendering information of the first sub-application page and a registration path of the corresponding HTML character string segment based on the input sub-application registration information; the sub-application registration information comprises at least one of a git code address corresponding to a git source code of a first sub-application page in a git source code library, a construction compression package containing rendering resources of the first sub-application page and a deployment access path corresponding to the first sub-application page which is deployed and completed by the client.

On the basis of the above technical solution, optionally, the sub-application registration information further includes at least one of a user name, a password, a name of the sub-application, a page route of a first sub-application page corresponding to the sub-application, a route mode corresponding to the sub-application, and a registration update path; the registration updating path comprises the identity number and the version number of the sub-application.

On the basis of the above technical solution, optionally, the HTML string fragment generating module includes:

the constructing and compressing packet generating unit is used for acquiring the git source code of the first sub application page corresponding to the git code address in the git source code library when the sub application registration information comprises the git code address, and performing constructing processing based on the git source code to obtain a constructing and compressing packet containing the rendering resource of the first sub application page;

the page object acquisition unit is used for executing the pre-rendering operation of the first sub-application page based on the constructed compression packet to obtain a pre-rendering page and acquiring a page object corresponding to the pre-rendering page;

an HTML string fragment determination unit for determining an HTML string fragment containing the prerender information of the first sub application page based on the page object.

On the basis of the above technical solution, optionally, the HTML string segment determining unit includes:

the virtual HTML fragment creating subunit is used for creating a virtual HTML fragment containing the child node information of the virtual node component; wherein the virtual node component corresponds to the sub-application component;

the target HTML fragment determining subunit is used for determining an adding character string according to the label type corresponding to the element label in the page object, and adding the adding character string to a child node corresponding to the child application component in the virtual HTML fragment to obtain a target HTML fragment;

and the HTML character string segment extracting subunit is used for extracting the character string segment corresponding to the sub-application component in the target HTML segment to obtain the HTML character string segment.

On the basis of the above technical solution, optionally, the target HTML fragment determining subunit is specifically configured to:

if the element tag is a non-outer-link tag, taking a character string corresponding to the non-outer-link tag in the page object as an added character string;

and if the element tag is an external link tag, downloading an external link character string corresponding to the external link tag in the page object to a server, and determining an addition character string according to a resource type corresponding to the external link character string.

On the basis of the above technical solution, optionally, adding the character string includes updating an external link address or an internal character string, and the target HTML fragment determining subunit is specifically configured to:

if the resource type corresponding to the external link character string is dependent resource, storing the dependent resource corresponding to the external link character string in a memory of a server, and using the generated server address as an updated external link address, or uploading the dependent resource corresponding to the external link character string to a content distribution network, and using a content distribution network address fed back by the content distribution network as an updated external link address; the dependent resources are public resources or third-party resources;

and if the resource type corresponding to the external chain character string is independent resource, performing inline conversion processing on the external chain character string to obtain an inline character string.

Example eight

Fig. 12 is a schematic structural diagram of an electronic device according to an eighth embodiment of the present invention, where the embodiment of the present invention provides a service for implementing the display method of the application page provided in the first to second embodiments of the present invention or the display method of the application page provided in the third to fifth embodiments of the present invention, and the display device of the application page in the sixth embodiment or the seventh embodiment may be configured. FIG. 12 illustrates a block diagram of an exemplary electronic device 12 suitable for use in implementing embodiments of the present invention. The electronic device 12 shown in fig. 12 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiment of the present invention.

As shown in FIG. 12, electronic device 12 is embodied in the form of a general purpose computing device. The components of electronic device 12 may include, but are not limited to: one or more processors or processing units 16, a system memory 28, and a bus 18 that couples various system components including the system memory 28 and the processing unit 16.

Bus 18 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, and a processor or local bus using any of a variety of bus architectures. By way of example, such architectures include, but are not limited to, Industry Standard Architecture (ISA) bus, micro-channel architecture (MAC) bus, enhanced ISA bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus.

Electronic device 12 typically includes a variety of computer system readable media. Such media may be any available media that is accessible by electronic device 12 and includes both volatile and nonvolatile media, removable and non-removable media.

The system memory 28 may include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM)30 and/or cache memory 32. The electronic device 12 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 34 may be used to read from and write to non-removable, nonvolatile magnetic media (not shown in FIG. 12, and commonly referred to as a "hard drive"). Although not shown in FIG. 12, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 by one or more data media interfaces. Memory 28 may include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the invention.

A program/utility 40 having a set (at least one) of program modules 42 may be stored, for example, in memory 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which examples or some combination thereof may comprise an implementation of a network environment. Program modules 42 generally carry out the functions and/or methodologies of the described embodiments of the invention.

Electronic device 12 may also communicate with one or more external devices 14 (e.g., keyboard, pointing device, display 24, etc.), with one or more devices that enable a user to interact with electronic device 12, and/or with any devices (e.g., network card, modem, etc.) that enable electronic device 12 to communicate with one or more other computing devices. Such communication may be through an input/output (I/O) interface 22. Also, the electronic device 12 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the Internet) via the network adapter 20. As shown in FIG. 12, the network adapter 20 communicates with the other modules of the electronic device 12 via the bus 18. It should be understood that although not shown in the figures, other hardware and/or software modules may be used in conjunction with electronic device 12, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.

The processing unit 16 executes various functional applications and data processing by running the program stored in the system memory 28, for example, to implement the display method of the application page provided in the first to second embodiments of the present invention or the display method of the application page provided in the third to fifth embodiments of the present invention.

By the electronic equipment, the problem that hard coding of the sub-application in the prior art causes dynamic plugging and unplugging in the main application is solved, the management operation corresponding to the sub-application page is transferred to the server, and the HTML string segment corresponding to the sub-application page is dynamically plugged and unplugged or modified at the server, so that dynamic updating of the sub-application page corresponding to the sub-application component in the client is realized, the strong coupling relation between the main application and the sub-application is reduced, and the integration difficulty of the sub-application is further reduced.

Example nine

An embodiment ninth of the present invention further provides a storage medium containing computer-executable instructions, where the computer-executable instructions are used to execute a display method applied to an application page in a terminal device, provided in the first to second embodiments, or a display method applied to an application page in a server, provided in the third to fifth embodiments.

The display method of the application page applied to the terminal equipment comprises the following steps:

when the triggering operation of the sub application components in the main application page is detected, acquiring a first access path of a first sub application page corresponding to the sub application components;

sending an access request containing a first access path to a server so that the server matches the first access path with a stored registration path, and acquiring a hypertext markup language (HTML) string fragment containing prerendering information of a first sub-application page according to the successfully matched registration path;

the method comprises the steps of receiving an HTML string fragment sent by a server, determining a first sub-application page HTML file according to the HTML string fragment and a main application HTML file corresponding to a main application page, and rendering and displaying the first sub-application page based on the first sub-application page HTML file.

The display method of the application page applied to the server comprises the following steps:

receiving an access request containing a first access path sent by a client; the first access path is a first access path of a first sub-application page corresponding to a sub-application component acquired by a client when the client detects a trigger operation on the sub-application component in a main application page;

matching the first access path with the stored registration path, and acquiring a hypertext markup language (HTML) character string fragment containing the pre-rendering information of the first sub-application page according to the successfully matched registration path;

and sending the HTML character string fragments to the client, so that the client determines a first sub-application page HTML file based on the HTML character string fragments and the main application HTML file corresponding to the main application page, and renders and displays the first sub-application page based on the first sub-application page HTML file.

Computer storage media for embodiments of the invention may employ any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.

Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + +, or the like, as well as conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).

Of course, the storage medium provided in the embodiment of the present invention includes computer-executable instructions, and the computer-executable instructions are not limited to the above method operations, and may also perform related operations of the display method of the application page provided in the first embodiment to the second embodiment of the present invention or related operations of the display method of the application page provided in the third embodiment to the fifth embodiment of the present invention.

Example ten

Fig. 13 is a schematic structural diagram of an application system according to a tenth embodiment of the present invention, where the system includes a terminal device 1010 and a server 1020; the terminal device 1010 may be configured to implement the display method of the application page provided in the first to second embodiments of the present invention, and is provided with the application page display apparatus provided in the sixth embodiment of the present invention. The server 1020 may be configured to implement the display method of the application page provided in the third to fifth embodiments of the present invention, and is provided with the application page display apparatus provided in the seventh embodiment of the present invention.

The terminal device 1010 is configured to, when a trigger operation of a sub-application component in a main application page is detected, obtain a first access path of a first sub-application page corresponding to the sub-application component; sending an access request including the first access path to the server 1020; receiving HTML character string fragments sent by the server 1020, determining a first sub-application page HTML file according to the HTML character string fragments and a main application HTML file corresponding to the main application page, and rendering and displaying the first sub-application page based on the first sub-application page HTML file.

The server 1020 is configured to receive an access request including a first access path sent by a client in the terminal device 1010, match the first access path with a stored registration path, and obtain an HTML string fragment including pre-rendering information of a first sub-application page according to the successfully matched registration path; and sending the HTML character string fragments to the client.

Fig. 14 is a schematic diagram of a specific example of an application system provided in the tenth embodiment of the present invention. The micro application registry in fig. 14 represents a server-side interaction page. The host application in fig. 14 represents a host application in a client in the terminal device, and in this embodiment, the client is a browser. Wherein the micro-application view container in the master application represents a sub-application component in the master application. The "JS" icon in fig. 14 represents the server side. The diamond shaped icons in FIG. 14 represent the git source code library. The hexagonal icon in fig. 14 represents a content distribution network. As shown in fig. 14, the specific implementation flow of this embodiment includes: inputting sub-application registration information through an interactive interface of a server, when the sub-application registration information is a git code address, pulling a git source code corresponding to the git code address in a git source code library, executing prerendering operation based on the git source code to generate an HTML character string fragment, storing the HTML character string fragment in a database, and uploading the extracted dependent character string to a content distribution network. The method comprises the steps that a main application of a client in terminal equipment initiates an ajax request containing a first access path to a server, reads sub-application registration information matched with the first access path in a database, specifically, the registration information comprises HTML character string fragments, returns the sub-application registration information, mounts the HTML character string fragments in the sub-application registration information into an HTML file of the main application, generates a first sub-application page HTML file, and caches a first sub-application page obtained after rendering based on dependent resources in a content distribution network in the terminal equipment when the first sub-application page is loaded for the first time so as to improve loading performance when the first sub-application page is loaded again.

In the technical scheme of this embodiment, an access request including a first access path of a first sub-application page is sent to a server through a terminal device, a server returns an HTML string fragment including pre-rendering information of the first sub-application page based on the first access path in the access request, and a client in the terminal device determines an HTML file of the first sub-application page according to the HTML string fragment and a main application HTML file, so as to solve the problem that in the prior art, hard coding of sub-applications is registered in main applications, which causes the problem of incapability of dynamic plugging and unplugging, in the embodiment of the present invention, management operations corresponding to sub-application pages are transferred to the server, dynamic update of the sub-application pages corresponding to sub-application components in the client is realized by dynamically plugging and unplugging or modifying the HTML string fragments corresponding to the sub-application pages at the server, and a strong coupling relationship between the main applications and the sub-applications is reduced, thereby reducing the integration difficulty of sub-applications.

It is to be noted that the foregoing is only illustrative of the preferred embodiments of the present invention and the technical principles employed. It will be understood by those skilled in the art that the present invention is not limited to the particular embodiments illustrated herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the invention. Therefore, although the present invention has been described in greater detail by the above embodiments, the present invention is not limited to the above embodiments, and may include other equivalent embodiments without departing from the spirit of the present invention, and the scope of the present invention is determined by the scope of the appended claims.

Claims

1. A display method of an application page is characterized by comprising the following steps:

2. The method of claim 1, wherein determining a first sub-application page HTML file from the HTML string segment and a main application HTML file corresponding to the main application page comprises:

and adding the HTML character string segment to a child node corresponding to the child application component in the main application HTML file to obtain a first child application page HTML file.

3. The method of claim 2, wherein prior to sending an access request containing the first access path to a server, the method further comprises:

matching the first access path with a second access path corresponding to a second sub-application page displayed in the client;

and if the first access path is not matched with the second access path, removing an HTML character string fragment corresponding to a second sub application page in an HTML file of the second sub application page to obtain a main application HTML file corresponding to the main application page.

4. The method of claim 2, wherein the rendering and displaying the first sub-application page based on the first sub-application page HTML file comprises:

downloading a dependent resource corresponding to an updated external link address from a server or a content distribution network based on the updated external link address in an HTML string fragment in the first sub-application page HTML file; wherein the update out-link address comprises a server address or a content delivery network address;

rendering and displaying a first sub-application page corresponding to the sub-application component based on the dependent resource and the inline string of the pre-rendering information contained in the HTML string segment.

5. A display method of an application page is characterized by comprising the following steps:

6. The method of claim 5, wherein prior to receiving the access request including the first access path sent by the client, the method further comprises:

generating an HTML (hypertext markup language) character string fragment containing pre-rendering information of a first sub-application page and a registration path corresponding to the HTML character string fragment based on input sub-application registration information; the sub-application registration information comprises at least one of a git code address corresponding to a git source code of a first sub-application page in a git source code library, a construction compression package of a rendering resource containing the first sub-application page and a deployment access path corresponding to the first sub-application page which is deployed and completed by a client.

7. The method of claim 6, wherein the sub-application registration information further comprises at least one of a user name, a password, a name of a sub-application, a page route of a first sub-application page corresponding to the sub-application, a route pattern corresponding to the sub-application, and a registration update path; and the registration updating path comprises the identity identification number and the version number of the sub-application.

8. The method of claim 6, wherein generating an HTML string fragment containing prerendering information for a first sub-application page based on input sub-application registration information comprises:

when the sub-application registration information comprises a git code address, acquiring a git source code of a first sub-application page corresponding to the git code address in a git source code library, and performing construction processing based on the git source code to obtain a construction compression packet containing rendering resources of the first sub-application page;

executing the prerender operation of the first sub application page based on the constructed compression packet to obtain a prerender page, and acquiring a page object corresponding to the prerender page;

determining an HTML string fragment containing prerender information for the first sub-application page based on the page object.

9. The method of claim 8, wherein determining, based on the page object, an HTML string fragment containing prerendering information for a first sub-application page comprises:

creating a virtual HTML fragment containing child node information of the virtual node component; wherein the virtual node component corresponds to the sub-application component;

determining an adding character string according to a tag type corresponding to an element tag in the page object, and adding the adding character string to a child node corresponding to a child application component in the virtual HTML fragment to obtain a target HTML fragment;

and extracting the character string fragments corresponding to the sub-application components in the target HTML fragments to obtain HTML character string fragments.

10. The method according to claim 9, wherein the determining to add a character string according to the tag type corresponding to the element tag in the page object comprises:

if the element tag is a non-outlink tag, taking a character string corresponding to the non-outlink tag in the page object as an added character string;

11. The method according to claim 10, wherein the adding the character string includes updating an external link address or an internal link character string, and accordingly, the determining the adding the character string according to the resource type corresponding to the external link character string includes:

if the resource type corresponding to the external link character string is dependent resource, storing the dependent resource corresponding to the external link character string in a memory of a server, and using the generated server address as an updated external link address, or uploading the dependent resource corresponding to the external link character string to a content distribution network, and using a content distribution network address fed back by the content distribution network as an updated external link address; wherein the dependent resource is a public resource or a third-party resource;

and if the resource type corresponding to the external chain character string is independent resource, carrying out inline conversion processing on the external chain character string to obtain an inline character string.

12. An apparatus for displaying an application page, the apparatus comprising:

13. An apparatus for displaying an application page, the apparatus comprising:

14. An electronic device, characterized in that the device comprises:

one or more processors;

a memory for storing one or more programs;

when executed by the one or more processors, cause the one or more processors to implement a method of displaying an application page as claimed in any one of claims 1 to 4 or a method of displaying an application page as claimed in any one of claims 5 to 11.

15. A storage medium containing computer-executable instructions for performing a method of displaying an application page as claimed in any one of claims 1 to 4 or a method of displaying an application page as claimed in any one of claims 5 to 11 when executed by a computer processor.

16. An application system, comprising: a terminal device and a server;

the terminal device is used for acquiring a first access path of a first sub application page corresponding to a sub application component when the triggering operation of the sub application component in a main application page is detected; sending an access request containing the first access path to a server; and receiving a hypertext markup language (HTML) string fragment sent by the server, determining a first sub-application page HTML file according to the HTML string fragment and a main application HTML file corresponding to the main application page, and rendering and displaying the first sub-application page based on the first sub-application page HTML file.

The server is used for receiving an access request containing a first access path sent by a client in the terminal equipment, matching the first access path with a stored registration path, and acquiring an HTML (hypertext markup language) character string fragment containing pre-rendering information of the first sub-application page according to the successfully matched registration path; and sending the HTML character string fragment to the client.