CN116932126A

CN116932126A - Application embedding method, device, terminal, medium and program product

Info

Publication number: CN116932126A
Application number: CN202210346784.8A
Authority: CN
Inventors: 黄广民; 洪媛媛; 高福; 蔡心远
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2022-04-02
Filing date: 2022-04-02
Publication date: 2023-10-24

Abstract

The embodiment of the application discloses an application embedding method, an application embedding device, a terminal, a medium and a program product, wherein the method comprises the following steps: determining a plug-in container after detecting that the operation of embedding the second application exists in a first application page of the first application; constructing a second object model of a second application in the plug-in container; sharing a first object model of the first application to the second application in the plug-in container; calling a plug-in container to embed and display a second application page of the second application in the first application page according to a second object model of the second application; and when any functional component in the first application page is detected to be used for updating the display element in the second application page, calling the plugin container to update and display the second application page according to the first object model shared by the second application. By adopting the embodiment of the application, the object model can be shared between the first application and the second application, and the interaction between the first application and the second application is realized.

Description

Application embedding method, device, terminal, medium and program product

Technical Field

The present application relates to the field of computer technology, and in particular, to the field of artificial intelligence, and more particularly, to an application embedding method, an application embedding device, a terminal, a computer readable storage medium, and a computer program product.

Background

With the widespread use of application programs (or simply, applications), application functions provided by application programs are also becoming increasingly rich, and some application programs support application embedding functions. By application embedding functionality may be meant: the functionality of the second application (or called child application) is embedded in an application page provided by the first application (or called master application or parent application).

It has been found that application embedding functionality provided by an application program can be implemented through a container scheme. Common containers can be created by Iframe to enable application embedding, with Iframe having an environment isolation mechanism that makes the Iframe created container (or host environment) completely new and independent; that is, the first application and the second application carried by the container are independently operated, so that an application page (or called a child page) of the second application carried by the container serves as an independent area and is not affected by the operation of the parent page. However, this strong isolation may result in an inability to achieve interaction between the main application and the sub-application, such as the sub-application being unable to use some of the functionality in the main application, such that the sub-application cannot be used conveniently in the main application, limiting application extension capabilities.

Disclosure of Invention

The embodiment of the application provides an application embedding method, an application embedding device, a terminal, a medium and a program product, which can share an object model between a first application and a second application and realize interaction between the first application and the second application.

In one aspect, an embodiment of the present application provides an application embedding method, where the method includes:

determining a plug-in container for bearing a second application after detecting that the operation of embedding the second application exists in a first application page of the first application;

running script files of a second application in the plug-in container to construct a second object model of the second application; sharing a first object model of a first application to a second application in a plug-in container; the first object model comprises attribute values of component variables corresponding to each functional component in an application interface of the first application; the second object model comprises attribute values of component variables corresponding to each functional component in an application interface of the second application;

calling a plug-in container to embed and display a second application page of the second application in the first application page according to a second object model of the second application;

and when any functional component in the first application page is detected to be used for updating the display element in the second application page, calling the plugin container to update and display the second application page according to the first object model shared by the second application.

In another aspect, an embodiment of the present application provides an application embedding apparatus, including:

the processing unit is used for determining a plug-in container for bearing the second application after detecting that the operation of embedding the second application exists in the first application page of the first application;

the processing unit is also used for running script files of the second application in the plug-in container so as to construct a second object model of the second application; sharing a first object model of a first application to a second application in a plug-in container; the first object model comprises attribute values of component variables corresponding to each functional component in an application interface of the first application; the second object model comprises attribute values of component variables corresponding to each functional component in an application interface of the second application;

the calling unit is also used for calling the plug-in container to embed and display a second application page of the second application in the first application page according to a second object model of the second application;

and the calling unit is also used for calling the plug-in container to update and display the second application page according to the first object model shared by the second application when any functional component in the first application page is detected and used for updating the display element in the second application page.

In one implementation, the script file of the second application is used to construct a second object model of the second application through global variables of the second application; the global variable is located in a script file of the second application;

the processing unit is further used for:

and performing variable hijacking on global variables in the script file of the second application, and creating and obtaining a model scope.

In one implementation, a plug-in container includes a model scope therein; the processing unit is configured to, in the plug-in container, share the object model of the first application to the second application, and specifically configured to:

adding a first object model of a first application and a second object model of a second application to a model scope;

fusing the first object model and the second object model in the model scope according to the constraint relation so as to share the first object model to the second application; wherein the first object model and the second object model are fused into one object model stream.

In one implementation, the processing unit is further configured to:

creating a script action domain in the plug-in container through a sandbox in the plug-in container;

adding the script file of the first application and the script file of the second application to the script scope according to the constraint relation so as to share the script file of the first application to the second application; wherein, any script file includes: component variables corresponding to each functional component in an application page of the corresponding application;

The processing unit is used for, when the script file of the second application is run in the plug-in container, specifically:

the script file of the second application is run in the script scope in the plug-in container.

In one implementation manner, the processing unit is configured to, when detecting that any functional component in the first application page is used to update a display element in the second application page, call the plugin container to update and display the second application page according to the first object model shared by the second application, and specifically is configured to:

when any functional component in the first application page is detected to be used for updating the display element in the second application page, calling a plugin container to acquire a component variable corresponding to any functional component from a script file of the first application shared by the second application as a target variable;

calling a plug-in container to acquire an attribute value corresponding to a target variable from a first object model shared by a second application;

updating a second object model of the second application according to the attribute value corresponding to the target variable through a script file of the second application; and calling the plug-in container to update and display a second application page according to the updated second object model.

In one implementation, the processing unit is further configured to:

acquiring a variable dependency relationship corresponding to a script file of a first application, wherein the variable dependency relationship indicates: calling relations among various component variables in a script file of a first application;

and mounting the variable dependency relationship into a script action domain, so that when any functional component in the first application page is detected to be used for updating the display element in the second application page, calling the plug-in container to determine other component variables called by component variables corresponding to any functional component according to the variable dependency relationship, and taking the component variables corresponding to any functional component and the other component variables as target variables.

In one implementation, the first application has associated therewith at least one application, each of the at least one application being permitted to be embedded into a first application page, and network addresses of each of the at least one application being stored in the storage space; the processing unit is further used for:

after detecting that the operation of embedding the second application exists in the first application page of the first application, searching a network address of the second application from a storage space;

and after the network address of the second application is found, acquiring the script file of the second application based on the network address of the second application.

In one implementation, the processing unit is further configured to:

after detecting that there is an operation of embedding a second application in a first application page of a first application, determining size data of the second application, wherein the size data is used for indicating: interface size of a second application page of a second application;

and drawing a container area in the first application page according to the size data, wherein the container area is used for displaying a second application page of a second application.

In one implementation, the processing unit is further configured to:

activating the first business logic in the process of the life cycle of the second application in the activated state, and executing the target operation according to the activated first business logic; the first business logic comprises: either or both of the timed call logic and the callback logic;

when the input focus in the first application page is located in the second application page, the second application is in the life cycle of the active state.

In one implementation, the processing unit is further configured to:

caching the container information of the plug-in container and the application information of the second application in the process that the second application is in the life cycle of the unfolding state;

if the second application is detected to enter the snapshot mode, the plug-in container is called again to load a second application page of the second application according to the cached container information of the plug-in container and the application information of the second application;

Wherein the container information of the plug-in container includes: size data and coordinate information; the application information of the second application includes: script files of the second application and a second object model.

In one implementation, the processing unit is further configured to:

and in the process that the second application is in the deleted state life cycle, calling a plug-in container to delete the script file of the second application in the script action domain so as to hide the second application page of the second application in the first application page of the first application.

In another aspect, the present application provides a terminal comprising:

a processor for loading and executing the computer program;

a computer readable storage medium having stored therein a computer program which, when executed by a processor, implements the above-described application embedding method.

In another aspect, the present application provides a computer readable storage medium storing a computer program adapted to be loaded by a processor and to perform the above-described application embedding method.

In another aspect, the present application provides a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the terminal reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions so that the terminal executes the above-described application embedding method.

In the embodiment of the application, after the operation of embedding the second application in the first application page of the first application is detected, the first object model of the first application can be shared to the second application in the plug-in container, so that the second application can access the first object model of the first application. Further, when any functional component in the first application page is detected to be used for updating the display element in the second application page, the plug-in container can be called to update and display the second application page according to the first object model shared by the second application, so that the second application can use the function provided by the first application, interaction between the second application and the first application is realized, and application expansion capability of the second application can be improved to a certain extent.

Drawings

In order to more clearly illustrate the embodiments of the application or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, it being obvious that the drawings in the following description are only some embodiments of the application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a flow diagram of a design concept of a micro front end according to an exemplary embodiment of the present application;

FIG. 2 illustrates a schematic architecture of an application embedded system provided in accordance with an exemplary embodiment of the present application;

FIG. 3 illustrates a flowchart of an application embedding method according to an exemplary embodiment of the present application;

FIG. 4 illustrates a schematic diagram of embedding a second application in a first application page provided by an exemplary embodiment of the present application;

FIG. 5 illustrates a diagram of accessing memory variables of a first application for a second application as seen from a developer's view, provided by an exemplary embodiment of the present application;

FIG. 6 illustrates a schematic diagram of a fusion into a DOM stream between a first object model and a second object model as seen from a developer's view, provided by an exemplary embodiment of the present application;

FIG. 7 illustrates a schematic diagram of rendering a second application page displaying a second application in a first application page provided by an exemplary embodiment of the present application;

FIG. 8 illustrates a schematic diagram of functional components of a second application invoking a first application provided in accordance with an exemplary embodiment of the present application;

FIG. 9 is a flow chart illustrating an application embedding method according to an exemplary embodiment of the present application;

FIG. 10 illustrates a schematic diagram of an output hint window in a first application page provided by an exemplary embodiment of the present application;

FIG. 11 is a graph showing a comparison of reconstruction times for reconstructing a second application page in a first application page using a snapshot mode in accordance with an exemplary embodiment of the present application;

FIG. 12 is a schematic diagram illustrating a process flow for utility reuse provided in accordance with an exemplary embodiment of the present application;

FIG. 13 illustrates a schematic diagram of a lifecycle provided by an exemplary embodiment of the present application;

FIG. 14 illustrates a schematic diagram of a custom event provided by an exemplary embodiment of the present application;

FIG. 15 illustrates a schematic diagram of deleting a second application page from a first application page provided by an exemplary embodiment of the present application;

FIG. 16 is a schematic diagram illustrating an application embedded device according to an exemplary embodiment of the present application;

fig. 17 is a schematic diagram showing a structure of a terminal according to an exemplary embodiment of the present application.

Detailed Description

The following description of the embodiments of the present application will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present application, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.

The embodiment of the application relates to an application embedding scheme; the application embedding scheme supports embedding a second application in a first application, in particular embedding the second application in an application page of the first application. For convenience of description, a first application (or a first application program) supporting an embedded application is referred to as a main application, and a corresponding second application to be embedded in the main application is referred to as a sub-application, and these two designations are not distinguished in the following embodiments and are described herein. An application or application program may refer to a computer program that performs some particular task or tasks. Classifying the application programs according to different dimensions (such as running modes, functions and the like of the application programs), and obtaining types of the same application program under different dimensions, wherein: (1) the applications may include, but are not limited to, by way of their manner of operation: a client installed in a terminal, an applet that can be used without downloading an installation, a web application opened through a browser, and the like. (2) Applications may include, but are not limited to, by functional type of application: social applications, office applications, entertainment applications, etc.; among other things, the social class application may include: IM (Instant Messaging ) applications (e.g., internet-based instant messaging and social interaction applications), content interaction applications (e.g., applications capable of enabling content interactions), and the like; office-like applications may include: an online document application (or simply an online document, a document supporting multiple user object collaboration and stored in real time in the cloud), a normal document application (which does not support multiple user objects to collaboratively edit the same document, unlike an online document), a slide application, or the like.

Further, depending on the application type to which the main application belongs, the application type to which the sub-application supporting the embedded main application belongs may also be different. Taking an example of an application type to which the main application belongs as an online document application, sub-applications that can be embedded in the online document application may include: other applications (or referred to as third party applications) that are distinct from the online document application itself; for example: the sub-application and the main application are mutually independent clients installed in the same terminal. Alternatively, the sub-application may further include: a self-lapping application (or self-lapping function) of the online document application, which cannot be used apart from the online document application; for example: self-grinding applications for online documents may include applications with functionality to support building thought maps. For convenience of explanation, the main application is hereinafter referred to as an online document application, and the sub-application is referred to as a self-grinding application in the online document application, which is described herein.

At present, the technical scheme of embedding sub-applications in online document applications is mainly divided into two types: the method is a Micro front end technical scheme (or Micro front end for short), and a container scheme can be designed based on the design thought of the Micro front end, so that independent development, test and deployment of sub-applications can be realized. The micro front end uses the architecture concept of micro service to split a huge front end application into a plurality of independent flexible applications, each application can be independently developed, independently operated and independently deployed, and then the small applications are integrated into a complete application or a plurality of applications which are operated for a long time and are not associated are integrated into one application. Referring to fig. 1, a schematic flow diagram of a design concept of a micro front end may be shown in fig. 1, and a plurality of independent applications (e.g., a micro front end a, a micro front end B, and a micro front end C) may be integrated into a complete application by a controller. Currently, there are four typical micro front end implementations: routing distribution type micro front-end (i.e. different services are distributed to different independent front-end applications through routing), using iframe embedding (i.e. iframe creates a brand new and independent host environment so that main application and sub-application run independently of each other), web Components technology (i.e. packages Components in a non-tilting way, each component organizes its own structure without interfering with other codes on pages) and homemade framework (i.e. micro front-end is implemented through design loading and communication mechanisms). The other is a componentization technical scheme, namely, a sub-application is developed in a componentization mode, and the sub-application is generated in a compiling stage, so that the standardized development of the sub-application can be realized. The general principle of the componentization scheme includes: in the source code stage, the sub-application is packaged as a component by virtue of a development framework and is called by other modules so as to realize the embedding of the sub-application; the sub-application is used as a front-end component to be developed, so that the sub-application cannot be independently developed and tested to be deployed, and the sub-application has coupling with the main application, so that the sub-application has strong dependence on the main application.

The application embedding scheme provided by the embodiment of the application is a scheme for containerizing the application, is designed by adopting the design thought of the micro front end, and particularly belongs to one implementation in a self-grinding frame in the micro front end. Specifically, the application embedding scheme related to the embodiment of the application provides a novel plug-in container (or simply referred to as a container or a Hina container), through which a document object model (Document Object Model, DOM, or simply referred to as an object model) can be shared between a sub application (such as a second application) and a main application (such as a first application); the second application page and the first application page of the second application are integrated through sharing the document object model, so that not only is the independently running application (such as any sub-application) converted into the content in the main application (such as the online document application), but also the second application can call the function provided by the first application, the interaction between the first application and the second application is realized, and the application expansion capability is improved (such as the function provided by the main application can be called by the sub-application).

An architecture diagram of a second application container scheme provided by an embodiment of the present application may be referred to fig. 2, and fig. 2 shows an architecture diagram of an application embedded system provided by an exemplary embodiment of the present application. As shown in fig. 2, the application embedding system includes: a plug-in container, a first application, ark, and a plug-in system; the plug-in system comprises a plug-in popup window and a plug-in cloud function.

In an actual application embedding scenario, the general implementation process of executing the application embedding scheme by each part in the application embedding system may include: firstly, a developer can adopt a npm (Node Package Manager, nodeJS package management and distribution tool) tool to package a plugin container to obtain a npm package corresponding to the plugin container; and adds the npm package to a plug-in library of the first application to enable the npm package of plug-in containers to be provided to the class for installation and use, where the class may refer to the first application supporting the embedded plug-in containers. Secondly, when a user object using the first application has a requirement of embedding the second application in a first application page provided by the first application, the plug-in container can be inserted into the first application page provided by the first application in a plug-in popup form by calling a plug-in cloud function in a plug-in system. And then, a process of sharing the document object model between the second application and the first application is realized through the plug-in container, and a second application page of the second application is rendered and displayed through the plug-in container, so that the second application is embedded into an application interface provided by the first application, namely, the second application page is fused with the first application page. Further, when the user object has a requirement of using the function of the first application in the second application page of the second application, the plug-in container can realize data communication between the second application and the first application according to the ark framework in the first application, so that the second application can call the function of the first application. For example, the first application provides a font thickening function, and when the user object has a requirement of thickening a target character string (composed of one or more characters) in the second application page by using the font thickening function, in response to a thickening component (or a key, a button or a component) in the first application page being selected, the plug-in container can perform data interaction with the first application through the thickening component so as to achieve the effect that the target character string in the second application page is thickened.

Based on the foregoing, it is an important innovation point of the embodiments of the present application to provide a new plugin container, through which a document object model can be shared by a first application and a second application; the above mainly provides an interaction process between the plug-in container and each external system, and the structure of the plug-in container provided by the embodiment of the application is described in more detail below; wherein:

with continued reference to fig. 2, the plug-in container (or Hina container) is largely divided into a plurality of hierarchies, which are respectively: a rendering layer, a logic layer, a network layer and a base layer. The functions of the independent hierarchies can be connected through the calling relationship so as to realize the functions of the plug-in container. The calling relation among the hierarchical structures in the plug-in container is as follows: the high layer calls the low layer; that is, the higher layer may call the lower layer to perform the corresponding operation. For example, the logic layer may invoke the network layer to perform a corresponding operation (e.g., a parsing operation); for another example, the rendering layer may invoke the logic layer to perform a corresponding operation (e.g., a rendering operation); etc. Wherein each hierarchy in the plug-in container may include one or more modules such that the hierarchy has functionality indicated by the corresponding module. The modules contained in each hierarchy in the plugin container will be briefly described in the order of hierarchy from below, wherein:

(1) The base layer may be used to implement the basic functions of the plug-in container according to the functions indicated by the modules it contains. The base layer may include, but is not limited to: log module, life cycle module, communication module. The log module may be configured to report a log, where the log may include: recording the data generated by the related operations (such as access operation, running operation or deleting operation, etc.) generated in the running process of the plug-in container. The life cycle module can be used for executing the business logic set for a certain life cycle in the certain life cycle so as to realize the corresponding function of the business logic in the certain life cycle. Wherein, the life cycle can refer to a process from start to end (or destruction) of an activity; for example, a process from start to uninstall of the plugin container may be referred to as a lifecycle, and for example, a configuration from when rendering and displaying the second application in the plugin container starts to when rendering and displaying the second application ends may be referred to as a lifecycle, which is not limited in the embodiment of the present application. The communication module can be used for realizing communication between the plug-in container and an external system; for example, the plug-in container may invoke a function or variable provided by the first application through the communication module; more specifically, the communication module, when having a need to invoke or use the functionality provided by the first application, may invoke the corresponding code module (or code segment) from the first application in dependence on the Ark framework provided by the first application to implement the corresponding functionality. It should be noted that the above modules included in the base layer are only exemplary, and the base layer may include other modules for implementing other functions in practical applications, which are not meant to be exhaustive.

(2) The network layer comprises: JS (JavaScript) loader, HTML (Hyper Text Markup L anguage, hypertext markup) loader, and CSS (Cascading Style Sheets, cascading style sheet) loader. Each loader may be used to load a file (or code) in a corresponding data format, e.g., the JS loader may initiate a request to the server to request the download of the JS file by invoking a communication module in the base layer, and the requested web address URL (Uniform Reso urce Locator ). Similarly, an HTML loader may be used to load HTML files. CSS may be used to load CSS files. The display and interaction of the application page (or simply called page) at the front end are realized by the JS file, the HTML file and the CSS file of the page together; the function of the JS file in the application page is to control each display element (or simply referred to as an element, such as a component) in the HTML so as to realize the dynamic change of the content in the application page, such as the dynamic process of adding a certain element in the application page after clicking a certain button in the application page, is realized by operating the HTML file by the JS file. The CSS file and the HTML file are matched to be used, so that the layout of the structure and the style (such as color) of the application page corresponding to the application page can be realized; for example, the layout of the application page structure of the application page may be implemented through the HTML file, such as the display position of the display element on the application page, and the step of style of each display element may be implemented through the CS S, such as making the font color in the application page brighter.

(3) The logic layer includes: JS parser, HTML parser, CSS quarantine, J S Sandbox module (Sandbox), and global hijack module. Wherein (1) a JS parser, an HTML parser, and a CSS parser can be used to parse a file in a corresponding data format. Taking a JS parser parsing a script file as an example, any script file of an application is called a JS file, where the script file includes: component variables (or code fragments) corresponding to each functional component in an application page of a respective application (i.e., the any application); when the script file of the application page is downloaded, the downloaded script file can be parsed by a JS parser and an HTML file is operated to create a document object module (DocumentObjectModel, DOM) of the application; the document object module may be simply referred to as an object module, where the object module of any application includes: the attribute and attribute value of the component variable corresponding to each functional component in the application interface of the corresponding application. The document object module may be structured as an object tree through which dynamic HTML may be created to update elements (or display elements) of an application page.

(2) The sandbox module and the global hijacking module are core modules in the plug-in container, and are key technical realizations for realizing the sharing of the document object model between the second application and the first application by the plug-in container created by the embodiment of the application. The sandbox module may be referred to as sandbox or sandbox, and is a virtual system program, and provides an independent execution environment (or referred to as sandbox environment) for limiting program behavior according to a security policy; in which a browser or application can be run without any impact on the outside world. In more detail, the JS sandbox related to the embodiment of the present application may be implemented based on proxy technology; by means of proxy technology, an access interceptor can be arranged to hijack the performance of the object, and the problem that the JS sandbox cannot access the global can be solved to a certain extent. The global hijacking module can be used for hijacking global variables in the script file, and particularly realizes the hijacking of the global variables in the script file by means of a Prototype method hijacking technology.

(4) The rendering layer is used for calling the document object model obtained through analysis in the logic layer so as to render the display page. Specifically, the rendering layer may include: an application component module (Web components) and an encapsulation module (Shadow DOM); the packaging module can realize style isolation of the application page through the packaging component, for example, each element in the application page is not affected mutually. In the rendering process, the rendering layer may render components in the application page according to the document object module to implement rendering display of the application page.

Based on the application embedding scheme, the application embedding system and the plug-in container described above, the embodiment of the present application proposes a more detailed application embedding method, where the application embedding method may be performed by a target terminal running a first application, and the target terminal may include, but is not limited to: smart devices such as smart phones (e.g., android phones, iOS phones, etc.), tablet computers, portable personal computers, mobile internet devices (Mobile Internet Devices, abbreviated as MID), smart televisions, or vehicle-mounted devices; the embodiment of the application does not limit the specific type of the target terminal.

The following describes the application embedding method according to the embodiment of the present application in detail with reference to fig. 3. FIG. 3 illustrates a flowchart of an application embedding method according to an exemplary embodiment of the present application; the application embedding method may include, but is not limited to, steps S301-S304:

S301: and determining a plug-in container for bearing the second application after detecting that the operation of embedding the second application exists in the first application page of the first application.

In a specific implementation, in a process that a user object uses a first application, a first application page of the first application can be triggered to be displayed, wherein the first application page can be any application page provided by the first application. For example, the first application is an online document application, and then the first application page of the first application may be a document page of any online document; for another example, when the first application is a slide application, or a slide function provided by an online document application, the first application page of the first application may be a page of a slide in any slide file. Then, when the user object has a need to embed another application (i.e., a second application) in the first application page, the user object may perform an embedding operation in the first application page to enable embedding of the second application in the first application page.

The embedding operation executed in the first application page is different according to the first application or the first application page. An exemplary schematic diagram of performing the embedding operation in the document page is given below with reference to fig. 4, taking the first application as an online document application, and taking the first application page as a document page of any online document as an example. As shown in fig. 4, when a user object uses an online document application through a target terminal, a document page 401 of any online document may be displayed in a terminal screen (or display screen, display screen) of the target terminal. Included in the document page 401 are a document content area 402 (or referred to as an edit section) and a toolbar 403 (or referred to as a resource section). Wherein the document content area 402 is used to display document content of a corresponding online document, e.g., the document content may include: text, images, links, animations, etc. The toolbar 403 carries one or more functional components provided by the online document application; depending on the application type of the first application, the functional components provided by the first application are not the same, as the functional components provided by the online document application may include, but are not limited to: a function component for setting a font size, a function component for setting a font style, a function component 4021 for thickening a font, a function component 4022 for inserting content (such as a picture, a sub-application, a table, etc.) in the document content area 402, or the like; when any of the functional components in the toolbar 403 is triggered, the online document application may perform the operation corresponding to the triggered functional component.

Assuming that an embedded portal for triggering embedding of a second application in a document page is provided in the function component 4032, in response to a trigger (e.g., a click) for the function component 4032, a component window 40321 may be displayed, the component window 40321 including the embedded portal 404 therein, and the embedded portal 404 being displayed in the component window 40321 in the form of a function component. Then, in response to the trigger to the embedding portal 404, the target terminal determines that an operation of embedding the second application is detected to exist in the document page (i.e., the first application page). In this implementation, the embedding operation performed by the user object in the first application page may include: the functional component 4032 is triggered first and then the embedded entry 404 in the component window 40321 is triggered. It should be appreciated that the embedding operation performed by the user object in the first application page is not limited to only one implementation described above; for example, if the embedding portal is directly disposed in the toolbar, the embedding operation performed by the user object in the first application page may further include: triggering the operation of the embedded portal directly in the toolbar; the embodiment of the application does not limit the specific implementation process of the embedding operation.

Further, after detecting that there is an operation of embedding the second application in the first application page of the first application, indicating that the user object wants to insert the second application in the first application page, executing a step of determining a plug-in container for carrying the second application; by plug-in container for carrying a second application is meant: a second application page responsible for displaying the second application on top of the first application page, and a container responsible for interactions between the second application and the first application. As described previously, the plug-in container is provided for use by the first application in the form of a npm package, and then the first application (or target terminal) may create a plug-in container for the second application by parsing the npm package; then, after creating a plug-in container for the second application, the plug-in container may be inserted into the first application page of the first application, specifically, into the position where the cursor in the first application page is located, where the container area corresponding to the plug-in container may be displayed in the first application page.

With continued reference to FIG. 4, a schematic illustration of the insertion of a plug-in container in a first application page, assuming that the cursor 405 is displayed in the document page at a position as shown in FIG. 4 before the user object performs the embedding operation in the document page; then the user object, after performing the embedding operation, may embed the plug-in container at the display location where the cursor 405 was located prior to performing the embedding operation. The interface expression form of the plug-in container after being embedded into the first application page is as follows: a container region 406 (or simply region) is displayed at the cursor position.

It should be noted that embedding a plurality of second applications is supported in a first application page of a first application; in this implementation, each second application corresponds to a plug-in container, that is, each plug-in container is configured to carry a separate second application; although the first application page is inserted with a plurality of second applications, the data of the second applications are different, the logic of interaction between each second application and the main application is the same. For convenience of explanation, the following embodiments take embedding a second application in a first application page as an example, and describe the implementation process of embedding a sub-application in a main application.

S302: and running script files of the second application in the plug-in container to construct a second object model of the second application.

Based on the specific implementation process shown in step S301, the plug-in container may be inserted into the first application page of the first application; the retrieved script file of the second application may then be dynamically run through the plug-in container to facilitate building a second object model (or referred to as a second document object model, DOM) of a second application page of the second application. The plug-in container can render and display a second application page of the second application in a container area in the first application page based on the constructed second object model so as to realize fusion of the second application page of the second application in the first application page.

The process of running the script file of the second application through the plug-in container is realized in a script action domain in the plug-in container; in other words, a script scope is included in the plug-in container, and the script scope can be understood as a JS-level execution environment, so that the script file of the second application can be executed in the JS-level execution environment. In the specific implementation, after a plug-in container is inserted into a first application page of a first application, a script action domain can be created in the plug-in container through a JS sandbox in the plug-in container; then, adding the script file of the first application and the script file of the second application into the script action domain, so that the second application and the first application are integrated, and specifically, the JS code of the second application and the JS code of the second application are integrated; and further, the script file of the first application is shared to the script file of the second application. Then, the plug-in container can run a script file of the second application in the script scope to realize the creation of a second object model of the second application; in detail, the script file of the second application is used for constructing the second object model of the second application through the global variable (such as createElement, getElementById, etc.) of the second application, and the global variable of the second application is located in the script file of the second application, so that the second object model of the second application can be created through executing the script file of the second application.

Based on the above, the embodiment of the application supports the establishment of a script action domain in a plug-in container by adopting a sandbox technology, so that the script file of the first application and the script file of the second application can be placed in the same action domain, thereby realizing the sharing of the script file of the first application to the second application. It is noted that, considering that the script file of the first application and the script file of the second application in the embodiment of the present application are located in the same script action domain, this enables the embodiment of the present application to support setting a constraint relationship for the first application and the second application according to a service requirement. For example, an exemplary constraint relationship may include: the second application may access the memory variable of the first application, but the first application may not access the memory variable of the second application; then the script file of the second application needs to be mounted into the script file of the first application when the script file of the first application and the script file of the second application are added to the script scope. Compared with the prior art that the complete isolation of the first application and the second application leads to the need of two independent maintenance costs, the embodiment of the application can realize the maintenance cost of the control code by setting the constraint relation.

In summary, the embodiment of the present application can realize incomplete isolation of the context, and support the second application to access not only its own memory variable, but also a portion of the memory variables in the script file of the first application in the script action domain, such as accessing the memory variable window. The communication performance between the second application and the first application can be improved, and the data synchronization requirement and the management requirement of a developer are met. An exemplary diagram of a second application accessing a memory variable of a first application from a developer view can be seen in fig. 5.

In addition, it is understood that at least one code segment (or referred to as a component variable) may be included in the script file of the first application, each of the at least one code segment being operable to implement a different function. When executing the script file of the first application, there is an inter-call between the code segments; for example, code segment 2 is called during execution of code segment 1. Considering that the embodiment of the application can realize DOM structure sharing between the first application and the second application, the requirement that the second application calls the code segment of the first application can exist; therefore, the embodiment of the application supports the management of the variable dependency relationship (or called dependent module variable, called dependency for short) among the code segments in the script file of the first application, wherein the variable dependency relationship indicates the calling relationship among the component variables in the script file of the first application. When the plug-in container is inserted into the first application page, variable dependency relationships (such as reaction or weblog) can be injected into the plug-in container, and specifically, the variable dependency relationships are mounted into a script action domain created in the plug-in container; when the second application loads the resource, the variable dependency relationship can be transmitted to the second application through the plug-in container, so that the second application can directly call the corresponding code segment in the script file of the first application according to the variable dependency relationship, the resource loading of the second application is reduced, and the loading performance and the loading speed of the second resource are improved.

S303: in the plug-in container, a first object model of a first application is shared to a second application.

In a specific implementation, a model scope is included in the plug-in container, and the model scope can be understood as an execution environment of an HTML layer; the model scope may be created by hijacking global variables in a script file of the second application. Further, adding a first object model of a first application and a second object model of a second application to the model scope; and fusing the first object model and the second object model in the model action domain according to the constraint relation, so that the first object model can be shared with the second object model. In practical applications, the above-described fusion process of the first object model of the first application and the second object model of the second application can be understood as: the first object model and the second object model are fused into one object model stream, i.e. the first object model and the second object model are mounted into the object model stream to realize that the first application and the second application share the object model stream. It should be noted that the first object model of the first application is constructed by using a script file of the first application, and the plug-in container does not interfere with the running process of the script file of the first application. The first object model comprises attribute values of component variables corresponding to each functional component in an application interface of the first application; the second object model includes attribute values of component variables corresponding to each functional component in the application interface of the second application.

The embodiment of the application supports the establishment of a model acting domain in a plug-in container by adopting a global hijacking technology; specifically, after loading a script file of a second application, performing variable hijacking on global variables in the script file of the second application, and creating a specific HTML operation scope (namely a model scope); in this way, the first object model of the first application and the second object model of the second application may be placed into the HTML operational scope, thereby enabling the first object model of the first application and the second object model of the second application to be mounted into the object model stream. By fusing the first object model of the first application and the second object model of the second application in the model scope, a shared object model stream (or DOM structure) between the first application and the second application can be achieved, i.e. the object models of the second application of the first application are visible to each other, so that display element changes in the second application page of the second application can interact with the first application under controllable conditions. An exemplary diagram of a DOM stream between a first object model and a second object model as seen from a developer view can be seen in FIG. 6; as shown in fig. 6, tag attributes contained in the second object model are added to the object model stream to achieve fusion with the first object model.

It should be further noted that, similar to the constraint relationship described in step S302, in the process of adding the first object model and the second object model to the model scope, the second object model may be mounted to the first object model according to the constraint condition, so that the second object model becomes a part of the first object model; thereby achieving the purpose of maintaining the cost of the control code. The related content of the constraint relationship may be referred to the foregoing related description, and will not be described herein.

S304: and calling the plug-in container to embed and display a second application page of the second application in the first application page according to a second object model of the second application.

In a specific implementation, after obtaining the second object model (i.e., DOM Tree) of the second application, the plugin container may combine the DOM Tree of the second object model with the CSS Tree obtained by parsing the CSS file of the second application to generate a Rendering Tree. The rendering tree is then laid out within a container area in the first application page, such as determining the size, location, etc. of the individual display elements in the second application page of the second application to be drawn. The rendering tree is then drawn to effect drawing of pixel information of the second application page within the container region. And finally, combining the information obtained by laying out the rendering tree and the information obtained by drawing the rendering tree to realize the embedded display (or called rendering display) of the second application page of the second application in the container area in the first application page according to the rendering tree.

An exemplary schematic of rendering a second application page displaying a second application in a first application page can be seen in FIG. 7; as shown in fig. 7, a second application page displaying a second application may be rendered within a container region inserted in the first application page 701; the second application page of the second application may refer to any page (e.g., a main page) in the second application page, which is not limited in the embodiment of the present application. In addition, in the case that the second application page of the second application is rendered and displayed in the first application page, the second application is embedded in the first application; thus, the user object may perform an individual interaction in the second application, where the individual interaction may refer to a human-computer interaction between the user object and the second application only, that is, the user object may use a function of the second application in the first application interface, or perform an operation on a display element in the second application page (such as moving, deleting, or adding a display element). For example, the second application is a video class application, and the user object may play the video provided by the second application in the first application interface, i.e. in the container area in the first application interface.

S305: and when any functional component in the first application page is detected to be used for updating the display element in the second application page, calling the plugin container to update and display the second application page according to the first object model shared by the second application.

Based on the related description of the script action domain and the model action domain, the embodiment of the application creates the script action domain by adopting a sandbox technology in a plug-in container, so that the script file of the first application and the script file of the second application can be put into the same engine (or execution environment); and a model scope is created by adopting a global hijacking technology in the plug-in container, so that the first object model of the first application and the second object model of the second application can be mounted in the DOM stream, and the DOM structure can be shared by the first application and the second application. Based on the design, the context is not completely isolated, the sharing of the memory variables can be realized, and the embodiment of the application supports the second application to call or use the functional components provided by the first application.

Specifically, the specific implementation process of invoking the functional component provided by the first application by the second application may include: firstly, when a target terminal detects any functional component in a first application page and is used for updating a display element in a second application page, the corresponding function of the any functional component, which is provided by a first application, is indicated to be used by a user object, and at the moment, a plug-in container can be called to acquire a component variable corresponding to the any functional component from a script file of the first application shared by the second application in a script action domain as a target variable. And then, calling a plugin container to acquire an attribute corresponding to the target variable and an attribute value of the attribute from a first object model shared by a second application in the model acting domain or an object model flow shared by the second application, wherein the attribute can be used for defining the function of any selected functional component in the first application page. And then, updating the second object model of the second application through the script file of the second application according to the attribute value corresponding to the target variable to obtain an updated second object model. And finally, calling a plug-in container to update and display a second application page in a container area in the first application page according to the updated second object model.

Wherein the above-mentioned acquired target variables may include: component variables corresponding to the any functional component (e.g., code segments for implementing the corresponding function of the any functional component); and other component variables with variable dependency relationships between component variables corresponding to any functional component, for example, the other component variables may include component variables that need to be invoked by the component variable corresponding to any functional component in the operation process. The relevant description of the variable dependency relationship can be found in the foregoing description, and will not be described in detail herein. In a specific implementation, when any functional component in the first application page is detected to be used for updating a display element in the second application page, calling a plugin container to determine other component variables called by component variables corresponding to any functional component according to the variable dependency relationship, and taking the component variables corresponding to any functional component in the second application and the other component variables called by the component variables as target variables.

Based on the above description of the specific implementation process of the second application calling the functional component of the first application, an interface schematic diagram of the second application calling the functional component of the first application is given below in conjunction with fig. 8; as shown in fig. 8, a second application page 802 for displaying a second application is embedded in a first application page 801 of a first application, and the second application page 802 includes a character string "sub-application content"; if the user object wants to perform font thickening processing on a part of the content sub-applications in the character string sub-application content, the user object may select the sub-application to be processed in the second application page 802 first, and then select the functional component 803 having the font thickening function in the toolbar in the first application page 801. At this time, the target terminal determines that the functional component 803 in the first application page 801 is detected and is used to update the display element "sub-application" in the second application page 802, and may call the plug-in container to update and display the display element "sub-application" in the second application page 802 according to the first object model shared by the second application, where the updated display element "sub-application" in the second application page 802 appears as a thickening effect.

In the embodiment of the application, after the operation of embedding the second application in the first application page of the first application is detected, the first object model of the first application can be shared to the second application in the plug-in container, so that the second application can access the first object model of the first application. Further, when any functional component in the first application page is detected to be used for updating the display element in the second application page, the plug-in container can be called to access a target variable in a first script file of the first application from a script action domain, a corresponding attribute value is determined from a first object model in a model action domain according to the target variable, and then the attribute value is added to a second object model of the second application so as to add an attribute for the display element in the second application; thereby achieving the function corresponding to any functional component provided by the second application by using the first application.

The embodiment shown in fig. 3 above provides a main implementation procedure of the application embedding method provided by the embodiment of the present application, and in combination with each hierarchical structure of the plug-in container shown in fig. 2, a complete implementation procedure of the application embedding method is provided; referring to fig. 9, fig. 9 is a schematic flow chart of an application embedding method according to an exemplary embodiment of the present application; the application embedding method may be performed by the target terminal, and may include steps S901 to S909:

S901: and the first application acquires the application parameters when detecting that the operation of embedding the second application exists in the first application page.

It should be noted that, the specific implementation process of the operation (or the embedding operation) performed by the first application to detect whether the user object exists in the first application page for embedding the second application may refer to the description of the specific implementation process shown in step S301 in the embodiment shown in fig. 3, which is not described herein.

In the specific implementation, after a first application detects that a user object exists in a first application page to execute and embeds a second application, the first application acquires a plug-in container (in the form of npm package) from a plug-in side (or a plug-in library) and acquires application parameters of the second application to be embedded; and filling the application parameters of the second application into codes of the plug-in container, so that the plug-in container can conveniently bear the second application based on the application parameters of the second application, and the second application is embedded into a first application page of the first application. Wherein the application parameters of the second application may include, but are not limited to: network address (or uniform resource locator (Uniform Resource Locator, URL)), size data, etc. The network address of the second application is used to indicate: the IP address of the server hosting the resource of the second application (e.g., script file, style file, etc.). The size data of the second application is used to indicate: interface size of a second application page of a second application.

The following description will briefly describe a specific embodiment of a first application obtaining an application parameter of a second application, where:

embodiment one: supporting pre-storing, by a developer, application parameters of at least one application associated with a first application in a storage space of the first application; in this implementation manner, after detecting that there is an operation of embedding the second application in the first application page of the first application, the application parameter of the second application may be found from the storage space of the first application. In particular, a developer may implement storing at least one application associated with a first application into a memory space of the first application, which may be an application specified by the developer and each allowed to be embedded into a first application page.

Based on the foregoing description, the application parameters of the application may include various types of application parameters, such as network address and size data; thus, in storing the application parameters of the application in the storage space of the first application, the application parameters may be stored in a classified manner. For example, a network address of each of the at least one application associated with the first application is stored in one subspace of the storage space, and size data of each of the associated at least one application of the first application is stored in another subspace of the storage space. By storing the application parameters in a classified manner, the detection rate of the application parameters can be improved to a certain extent. Of course, embodiments of the present application are not limited to a particular storage format for application parameters, and the foregoing is merely an illustration of a storage format for application parameters.

Embodiment two: supporting the user object to input application parameters of a second application to be embedded into the first application page in the first application page; in this implementation manner, after detecting that the operation of embedding the second application in the first application page of the first application exists, a prompt window may be displayed in the first application page, where the prompt window is used to prompt that an application parameter of the second application needs to be input, so that the user object may input the application parameter of the second application in the prompt window. The manner of inputting the application parameters of the second application in the prompt window may include, but is not limited to: by pasting application parameters of the second application from the sticker into the prompt window; or, inputting application parameters of the second application through a virtual keyboard (or external input equipment of the target terminal) in the prompt window; etc. Then, the target terminal can execute related operations according to the application parameters of the second application input by the user object; if the application parameter is the network address of the second application, the target terminal pulls the resource of the second application from the server according to the network address.

Taking an example that the application parameters include network address and size data, an exemplary schematic diagram of outputting a prompt window in a first application page may be referred to as fig. 10, and as shown in fig. 10, after detecting that there is an operation of embedding a second application in the first application page of the first application, the prompt window 1001 may be output in the first application page; the prompt window 1001 includes a network address input field 1002 and a size data input field 1003, so that a user object can directly input corresponding parameters in the corresponding input fields, and thus, the target terminal can obtain application parameters of the second application.

It should be noted that the above is only given two exemplary implementation processes for acquiring the application parameters of the second application, and the embodiment of the present application is not limited to the specific implementation process for acquiring the application parameters of the second application by the first application.

S902: the first application determines a plug-in container for carrying the second application to enable plug-in containers to be inserted in the first application page.

When the first application inserts the plug-in container in the first application page, the first application is inserted according to the size data of the sub-application. Specifically, after the size data of the second application is obtained, a container area for rendering and displaying the second application page of the second application can be drawn in the first application page according to the size data, so that a plug-in container is inserted into the first application page. For example, after detecting that there is an operation of embedding the second application in the first application page of the first application, the acquired size data of the second application is "length 5 cm, width 5 cm", and the container area of the plug-in container embedded in the first application page appears as a square area of 5*5 cm. As described above, the size data of the second application may be preset by a developer or customized by a user object, and there may be a difference in size data of each of at least one application associated with the first application; and the display sizes of the container areas displayed when different applications are embedded into the first application page can be different, so that the embedding patterns of the second application embedded into the first application page can be enriched, and the user-defined requirement of the user object on the container areas embedded into the first application page can be met.

S903: a logical layer in the plug-in container initializes the sandboxes to create script scopes and hives global variables to create model scopes.

S904: the network layer in the plug-in container loads the script file, style file, and hypertext file of the second application.

In steps S903-S904, after the network address of the second application to be embedded in the first application page is obtained, for example, after the network address of the second application is found in the storage space of the first application; the plug-in container provided by the embodiment of the application can bear the second application in a url link (i.e. network address) manner. In particular implementations, the plugin container may obtain (or download, load) resources of the second application based on the network address of the second application, which may include files in various data formats for implementing page display, such as script files (JS files), style files (CSS files), and hypertext files (HTML files); and then, embedding the second application page for displaying the second application in a container area in the first application page by the plug-in container according to the downloaded resources of the second application.

It should be noted that, the loading process of the plug-in container for loading the resource of the second application according to the network address of the second application may be dynamic; for example, after loading the partial script file of the second application, the plug-in container may continue to download the remaining script files according to the loaded partial script file. Then during dynamic loading of the resources of the second application, initializing a sandbox in the logical layer of the plug-in container to create a script scope, and hijacking global variables to create a model scope is supported.

It should be further noted that, in the process that the plug-in container loads the resources of the second application, specifically, in the process that the plug-in container invokes the network layer to load the resources of the second application, the embodiment of the application further supports the use of a snapshot (or snapshot mode) to cache the loaded resources of the second application, so that in the case that the resources of the second application need to be acquired later, data recovery or restoration can be realized through the snapshot mode, and further, the time for optimizing the loading is improved. The snapshot mode refers to a data copying technology based on a time point, and aims to record and save data information (such as resources of a second application, such as script files) at a certain moment, and if a subsequent failure occurs and data recovery is needed, the data can be recovered to a state at a previous time point through snapshot, so as to realize initialization recovery of the data. For example, in the process of displaying the second application page in the first application page, the snapshot buffer may be used to cache the resources (such as script files) of the second application, so that in the case that the second application page needs to be redisplayed after being sliding hidden, the data recovery may be performed by quickly acquiring the resources of the second application according to the snapshot buffer. An exemplary reconstructed time contrast diagram for reconstructing a second application page in a first application page using snapshot mode can be seen in FIG. 11; as shown in fig. 11, the time required for the existing application reconstruction that does not support the snapshot mode is about 300 milliseconds (ms), and the time required for the application reconstruction using the snapshot mode provided by the embodiment of the present application is below 15 ms. Therefore, the step of re-downloading the resources of the second application from the server can be omitted by adopting the snapshot mode to perform resource caching, so that the resource loading performance is improved.

It should be further noted that, based on the foregoing description, it is known that the embodiment of the present application can implement sharing of DOM streams by the first application and the second application, so that the embodiment of the present application further supports multiplexing of public resources; the reuse of the public resource refers to the reuse of the public resource, and the public resource can comprise the script file and the file needing to be reused in the style file. In a specific implementation, a developer can determine resources to be reused in the application loading process as public resources; and setting the public resource as a global variable is cached, in particular setting a global attribute for the public resource, so as to realize setting the public resource as the global variable. In the process of loading any one or more second applications to be embedded into the first application, the public resources can be directly obtained from the cache for loading, and the resources which can be reused do not need to be downloaded from the server every time; the process of loading a common resource is referred to as preloading in embodiments of the present application and is described herein. The method not only can improve the loading performance of the second application, but also can realize resource sharing among a plurality of second applications; and the sharable public resources of the second application can be controlled by the second application, so that the flexibility of public resource determination is improved.

A schematic diagram of the flow of the utility multiplexing is given below in connection with fig. 12; as shown in fig. 12, in the process of loading the resources of the second application, if any resource to be loaded is detected to be set with global attribute, which indicates that any resource in the cache can be read preferentially, any resource is searched in the cache; if any resource is found in the cache, the reading of the any resource is realized. If any resource is not found in the cache, downloading the any resource according to the network address of the second application, and carrying out cache processing on the any resource after the downloading is completed, so that the downloading is not repeated when the any resource is accessed next time, but the any resource can be directly read from the cache, and the resource loading rate is improved.

S905: the logic layer in the plug-in container runs a script file of the second application to build a second object model of the second application.

S906: and the logic layer in the plug-in container carries out plug-in container mounting so as to realize sharing of the script file of the first application and the first object model to the second application.

S907: the rendering layer in the plug-in container invokes a second object model of a second application in the logical layer rendering a second application page displaying the second application within the container region in the first application page.

S908: and when any functional component in the first application page is detected and is used for updating the display element in the second application page, calling the plugin container to perform data communication with Ark in the first application so as to update and display the second application page according to the first object model shared by the second application.

It should be noted that, the specific implementation process shown in steps S905-S908 can be referred to the description of the specific implementation process shown in steps S302-S305 in the embodiment shown in fig. 3, and the description is omitted here.

In addition, the embodiment of the application also supports rich life cycles, so that a developer can develop or set specific business logic in each life cycle. In a specific implementation, the embodiment of the application supports setting one or more steps as a life cycle in the process that the second application is embedded into the first application page of the first application, so that a developer can insert business logic in any life cycle. Thus, after the second application page of the second application is successfully inserted into the first application page of the first application, corresponding business logic set by a developer can be responded in each life cycle. For example, for the second application, the lifecycle as shown in fig. 13 may be adopted according to the specific application scenario; as shown in fig. 13, the developer may embed one or more service logic in each lifecycle of the second application in the first application, so that the user object may activate the service logic to implement a corresponding operation when the second application enters the corresponding lifecycle during use of the second application.

Several exemplary lifecycles are given below, wherein:

(1) the second application is in the lifecycle of the active state "appDidBieccomeActive". During the lifecycle of the second application in the active state, some of the business logic required at runtime may be activated, such as activating a first business logic, which may include, but is not limited to: one or two of the timing call logic and the callback logic; then, the target operation is performed according to the activated first business logic. The target operation may refer to: invoking an operation performed when an objective function for implementing the first business logic; for example, the objective function for implementing the timing call logic may include a setInterval function, which may then be called to implement some function that triggers the second application at a timing; for another example, the objective function for implementing callback logic may include a requestAnimation function, which may be called to implement a function of re-callback pictures. Wherein the operation of implementing the second application in the active state may include: and (3) the cursor falls into any display position in a second application page of the second application.

(2) The second application is in the lifecycle of the inactive state "appDidBiecceInactive"; during the life cycle of the second application in the inactive state, the service logic (such as the first service logic mentioned above) that is not needed in the inactive state may be stopped to achieve the purpose of optimizing performance; specifically, stopping calling an objective function for realizing business logic; wherein the operation of implementing the second state to be inactive may include: the cursor falls into any display area of the first application page except the second application page.

(3) The second application is in a lifecycle of the presentation state (appdieppear). In the process that the second application is in the life cycle of the display state, the container information of the plug-in container and the application information of the second application can be cached, so that initialization and restoration in a snapshot mode can be conveniently carried out later; the initialization restore in the snapshot mode may be: if the second application is detected to enter the snapshot mode, the plug-in container can be called again to load a second application page of the second application according to the cached container information of the plug-in container and the application information of the second application; wherein the container information of the plug-in container includes: size data, coordinate information, and the like; the application information of the second application includes: script files of a second application, a second object model, and the like.

(4) The second application is in a deleted state (appwilldisable) lifecycle; during the life cycle of the second application in the deleted state, the service logic set for the second application may include a cache resource; before deleting the container area in the first application page, the size data, the coordinate information and the like of the plug-in container are cached, so that preparation is made for initialization and restoration in a snapshot mode. Or in the process that the second application is in the deleted state life cycle, the plug-in container can be also called to delete the script file of the second application in the script action domain so as to hide the second application page of the second application from the first application page of the first application. Wherein the operation of the second application entering the delete state may include: and in the process of scrolling and displaying the first application page, hiding the second application page so as to make the second application page invisible. (5) A lifecycle of the second application in an uninstalled state (appwillunaunt); during the lifecycle of the second application in the uninstalled state, the business logic set for the second application may include: clearing resources, caches and the like of the second application, such as deleting the second application instance; if the first application deletes the network address of the second application, determining to delete the container area on the first application page so as to completely delete the second application in the first application.

In the following, in conjunction with fig. 14, and with the lifecycle of the second application in the exhibition state, the custom event (or business logic) set by the developer for the second application is: the second application page is downloaded and stored as an icon, and a schematic diagram of a custom event for the second application and the first application to jointly perfect the second application is given as an example; as shown in fig. 14, in the case where the second application has a custom event "download save picture", a download button 1402 may be displayed in response to a trigger to any display position in the second application page 1401; when the download button 1402 is triggered (e.g., clicked), indicating that the user object wants to download and save the second application page as a picture, the second application page may be set to a picture format to enable the second application page to be downloaded and saved as a picture. Therefore, the embodiment of the application supports communication data communication between the first application and the second application based on the event (such as the custom event of the second application), so that communication management is clearer and communication cost is lower.

It will be appreciated that the foregoing is a few exemplary lifecycles, and corresponding business logic, presented by embodiments of the present application. In practical application, the life cycle and the corresponding business logic of the life cycle can be changed; for example, the embodiment of the application also supports the business logic of setting style isolation (such as dynamically prefixing a style file or isolating by using a packaging module (shadow dom) in a rendering layer) when the second application is in a display state, so that overlapping or staggered display of display elements in the second application page and display elements in the first application page can be avoided, and the purpose of beautifying page styles is achieved.

S909: plug-in containers are offloaded to enable deletion of container regions in the first application page.

By plug-in container unloading may be meant: uninstalling or deleting the plug-in container in the first application; since the plug-in container is used to carry the second application, after the plug-in container is deleted in the first application, the second application page is also deleted in the first application page of the first application. The first application in the embodiment of the present application may implement the removal of the mount of the plug-in container by forcibly removing the network address of the second application, or changing the network address of the second application, which is not described in detail herein. An exemplary implementation of deleting a second application page in a first application page can be seen in fig. 15.

The foregoing details of the method of the present application and, in order to facilitate better practice of the method of the present application, a device of the present application is provided below.

Fig. 16 is a schematic structural view of an application embedding apparatus according to an exemplary embodiment of the present application, which may be a computer program (including program code) running on a target terminal; the application embedding device may be used to perform some or all of the steps in the method embodiments shown in fig. 3 and 9; the device comprises the following units:

a processing unit 1601, configured to determine a plug-in container for carrying a second application after detecting that there is an operation of embedding the second application in a first application page of the first application;

the processing unit 1601 is further configured to run a script file of the second application in the plug-in container, so as to construct a second object model of the second application; sharing a first object model of a first application to a second application in a plug-in container; the first object model comprises attribute values of component variables corresponding to each functional component in an application interface of the first application; the second object model comprises attribute values of component variables corresponding to each functional component in an application interface of the second application;

The calling unit 1602 is further configured to call the plug-in container to embed a second application page for displaying the second application in the first application page according to a second object model of the second application;

the calling unit 1602 is further configured to, when any functional component in the first application page is detected and is used to update a display element in the second application page, call the plugin container to update and display the second application page according to the first object model shared by the second application.

the processing unit 1601 is further configured to:

In one implementation, a plug-in container includes a model scope therein; the processing unit 1601 is configured to, in the plug-in container, share the object model of the first application to the second application, specifically:

In one implementation, the processing unit 1601 is further configured to:

the processing unit 1601 is configured to, when running a script file of the second application in the plug-in container, specifically:

In one implementation, the processing unit 1601 is configured to, when detecting that any functional component in the first application page is used to update a display element in the second application page, call the plugin container to update and display the second application page according to the first object model shared by the second application, and specifically is configured to:

In one implementation, the processing unit 1601 is further configured to:

In one implementation, the first application has associated therewith at least one application, each of the at least one application being permitted to be embedded into a first application page, and network addresses of each of the at least one application being stored in the storage space; the processing unit 1601 is further configured to:

In one implementation, the processing unit 1601 is further configured to:

According to an embodiment of the present application, each unit in the application embedding apparatus shown in fig. 16 may be separately or completely combined into one or several additional units, or some unit(s) thereof may be further split into a plurality of units with smaller functions, which may achieve the same operation without affecting the implementation of the technical effects of the embodiment of the present application. The above units are divided based on logic functions, and in practical applications, the functions of one unit may be implemented by a plurality of units, or the functions of a plurality of units may be implemented by one unit. In other embodiments of the present application, the application embedding device may also include other units, and in practical applications, these functions may also be implemented with assistance from other units, and may be implemented by cooperation of a plurality of units. According to another embodiment of the present application, an application embedding apparatus as shown in fig. 16 may be constructed by running a computer program (including program code) capable of executing the steps involved in the respective methods as shown in fig. 3 and 9 on a general-purpose computing device such as a computer including a processing element such as a Central Processing Unit (CPU), a random access storage medium (RAM), a read only storage medium (ROM), and the like, and a storage element, and the application embedding method of the embodiment of the present application is implemented. The computer program may be recorded on, for example, a computer-readable recording medium, and loaded into and run in the above-described computing device through the computer-readable recording medium.

In the embodiment of the present application, after detecting that there is an operation of embedding the second application in the first application page of the first application, the processing unit 1601 may share the first object model of the first application to the second application in the plugin container, so that the second application can access the first object model of the first application. Further, when any functional component in the first application page is detected to be used for updating the display element in the second application page, the plug-in container can be called to update and display the second application page according to the first object model shared by the second application, so that the second application can use the function provided by the first application, interaction between the second application and the first application is realized, and application expansion capability of the second application can be improved to a certain extent.

Fig. 17 is a schematic diagram showing a structure of a terminal according to an exemplary embodiment of the present application; the terminal is the target terminal mentioned in the foregoing embodiment. Referring to fig. 17, the terminal includes a processor 1701, a communication interface 1702, and a computer-readable storage medium 1703. Wherein the processor 1701, the communication interface 1702, and the computer-readable storage medium 1703 may be connected by a bus or other means. Wherein the communication interface 1702 is used to receive and transmit data. The computer-readable storage medium 1703 may be stored in a memory of the terminal, the computer-readable storage medium 1703 storing a computer program comprising program instructions, and the processor 1701 executing the program instructions stored in the computer-readable storage medium 1703. The processor 1701 (or CPU (Central Processing Unit, central processing unit)) is a computing core and a control core of the terminal, which are adapted to implement one or more instructions, in particular to load and execute one or more instructions to implement a corresponding method flow or a corresponding function.

The embodiment of the application also provides a computer readable storage medium (Memory), which is a Memory device in the terminal and is used for storing programs and data. It will be appreciated that the computer readable storage medium herein may include both a built-in storage medium in the terminal and an extended storage medium supported by the terminal. The computer readable storage medium provides a storage space that stores a processing system of the terminal. Also stored in this memory space are one or more instructions, which may be one or more computer programs (including program code), adapted to be loaded and executed by the processor 1701. Note that the computer readable storage medium can be either a high-speed RAM memory or a non-volatile memory (non-volatile memory), such as at least one magnetic disk memory; alternatively, it may be at least one computer-readable storage medium located remotely from the aforementioned processor.

In one embodiment, the computer-readable storage medium has one or more instructions stored therein; one or more instructions stored in a computer-readable storage medium are loaded and executed by the processor 1701 to implement the corresponding steps in the application embedding method embodiments described above. One or more instructions in the computer-readable storage medium are loaded by the processor 1701 and perform the steps of:

One or more instructions in the computer-readable storage medium are loaded by the processor 1701 and further perform the steps of:

In one implementation, a plug-in container includes a model scope therein; one or more instructions in the computer-readable storage medium are loaded by the processor 1701 and, when executed in the plug-in container, share the object model of the first application to the second application, specifically perform the steps of:

In one implementation, one or more instructions in the computer-readable storage medium are loaded by the processor 1701 and further perform the steps of:

The one or more instructions in the computer-readable storage medium are loaded by the processor 1701 and, when executed, perform the script file of the second application running in the plug-in container, specifically perform the steps of:

In one implementation, one or more instructions in the computer-readable storage medium are loaded by the processor 1701 and when executed to invoke the plugin container to update the display element in the second application page upon detecting any functional component in the first application page being used to update the display element in the second application page, the second application page is displayed in accordance with a first object model shared by the second application, specifically performs the steps of:

In one implementation, the first application has associated therewith at least one application, each of the at least one application being permitted to be embedded into a first application page, and network addresses of each of the at least one application being stored in the storage space; one or more instructions in the computer-readable storage medium are loaded by the processor 1701 and further perform the steps of:

Based on the same inventive concept, the principle and beneficial effects of solving the problem of the blockchain node device provided in the embodiment of the present application are similar to those of the data compression method and the block synchronization method based on the blockchain network in the embodiment of the present application, and can be referred to the principle and beneficial effects of implementing the method, which are not described herein for brevity.

Embodiments of the present application also provide a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the blockchain node device reads the computer instructions from the computer readable storage medium, and the processor executes the computer instructions, so that the blockchain node device executes the data compression method and the block synchronization method based on the blockchain network.

Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.

In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions described in accordance with embodiments of the present application are produced in whole or in part. The computer may be a general purpose computer, a special purpose computer, a network of computers, or other programmable devices. The computer instructions may be stored in or transmitted across a computer-readable storage medium. The computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center by a wired (e.g., coaxial cable, fiber optic, digital line (DSL)), or wireless (e.g., infrared, wireless, microwave, etc.). Computer readable storage media can be any available media that can be accessed by a computer or data processing device, such as a server, data center, or the like, that contains an integration of one or more of the available media. The usable medium may be a magnetic medium (e.g., a floppy Disk, a hard Disk, a magnetic tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a Solid State Disk (SSD)), or the like.

The foregoing is merely illustrative of the present application, and the present application is not limited thereto, and any person skilled in the art will readily appreciate variations or alternatives within the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. An application embedding method, comprising:

after detecting that an operation of embedding a second application exists in a first application page of a first application, determining a plug-in container for bearing the second application;

running script files of the second application in the plug-in container to construct a second object model of the second application; sharing a first object model of the first application to the second application in the plug-in container; the first object model comprises attribute values of component variables corresponding to functional components in an application interface of the first application; the second object model comprises attribute values of component variables corresponding to each functional component in an application interface of the second application;

calling the plug-in container to embed and display a second application page of the second application in the first application page according to a second object model of the second application;

And when any functional component in the first application page is detected to be used for updating the display element in the second application page, calling the plug-in container to update and display the second application page according to the first object model shared by the second application.

2. The method of claim 1, wherein the script file of the second application is structured by global variables of the second application to construct a second object model of the second application; wherein the global variable is located in a script file of the second application;

before the script file of the second application is run in the plug-in container, the method further comprises:

and performing variable hijacking on the global variable in the script file of the second application, and creating and obtaining a model acting domain.

3. The method of claim 2, wherein the sharing, in the plug-in container, the object model of the first application to the second application comprises:

adding a first object model of the first application and a second object model of the second application to the model scope;

fusing the first object model and the second object model in the model scope according to a constraint relation to share the first object model to the second application; wherein the first object model and the second object model are fused into one object model stream.

4. The method of claim 1, wherein prior to running the script file of the second application in the plug-in container, further comprising:

creating a script scope in the plug-in container through a sandbox in the plug-in container;

adding the script files of the first application and the script files of the second application to the script scope according to the constraint relation so as to share the script files of the first application to the second application; wherein, any script file includes: component variables corresponding to each functional component in an application page of the corresponding application;

the script file for running the second application in the plug-in container comprises:

and running the script file of the second application in the script action domain in the plug-in container.

5. The method of claim 4, wherein the invoking the plug-in container to update display of the second application page according to the first object model shared by the second application upon detecting that any of the functional components in the first application page is used to update display elements in the second application page comprises:

when any functional component in the first application page is detected to be used for updating a display element in a second application page, calling the plug-in container to acquire a component variable corresponding to any functional component from a script file of a first application shared by the second application as a target variable;

Calling the plug-in container to acquire an attribute value corresponding to the target variable from a first object model shared by the second application;

updating a second object model of the second application according to the attribute value corresponding to the target variable through the script file of the second application; and calling the plug-in container to update and display the second application page according to the updated second object model.

6. The method of claim 5, wherein the method further comprises:

acquiring a variable dependency relationship corresponding to a script file of the first application, wherein the variable dependency relationship indicates: calling relations among all component variables in a script file of the first application;

and mounting the variable dependency relationship into the script action domain, so that when any functional component in the first application page is detected to be used for updating the display element in the second application page, calling the plug-in container, determining other component variables called by component variables corresponding to any functional component according to the variable dependency relationship, and taking the component variables corresponding to any functional component and the other component variables as target variables.

7. The method of any of claims 1-6, wherein the first application has associated therewith at least one application, each of the at least one application being permitted to be embedded into the first application page, and wherein a network address of each of the at least one application is stored in a memory space; the method further comprises the steps of:

after detecting that the operation of embedding a second application exists in a first application page of a first application, searching a network address of the second application from the storage space;

and after the network address of the second application is searched, acquiring the script file of the second application based on the network address of the second application.

8. The method of claim 1, wherein the method further comprises:

after detecting that there is an operation of embedding a second application in a first application page of a first application, determining size data of the second application, where the size data is used to indicate: the interface size of a second application page of the second application;

and drawing a container area in the first application page according to the size data, wherein the container area is used for displaying a second application page of the second application.

9. The method of claim 1, wherein the method further comprises:

activating a first business logic in the process of the life cycle of the second application in an activated state, and executing a target operation according to the activated first business logic; the first business logic comprises: either or both of the timed call logic and the callback logic;

and when the input focus in the first application page is positioned in the second application page, the second application is in the life cycle of the activation state.

10. The method of claim 1, wherein the method further comprises:

if the second application is detected to enter a snapshot mode, the second application page of the second application is recalled by the plug-in container according to the cached container information of the plug-in container and the application information of the second application;

wherein the container information of the plug-in container includes: size data and coordinate information; the application information of the second application includes: and the script file of the second application and the second object model.

11. The method of claim 1, wherein the method further comprises:

and in the process that the second application is in the deleted state life cycle, calling the plug-in container to delete the script file of the second application in the script action domain so as to hide the second application page of the second application in the first application page of the first application.

12. An application embedding device, comprising:

the processing unit is used for determining a plug-in container for bearing the second application after detecting that the operation of embedding the second application exists in a first application page of the first application;

the processing unit is further configured to run a script file of the second application in the plug-in container, so as to construct a second object model of the second application; sharing a first object model of the first application to the second application in the plug-in container; the first object model comprises attribute values of component variables corresponding to functional components in an application interface of the first application; the second object model comprises attribute values of component variables corresponding to each functional component in an application interface of the second application;

The calling unit is used for calling the plug-in container to embed and display a second application page of the second application in the first application page according to a second object model of the second application;

13. A terminal, comprising:

a processor adapted to execute a computer program;

a computer readable storage medium having stored therein a computer program which, when executed by the processor, implements the application embedding method according to any of claims 1-11.

14. A computer readable storage medium, characterized in that the computer readable storage medium stores a computer program adapted to be loaded by a processor and to perform the application embedding method according to any of claims 1-11.

15. A computer program product comprising computer instructions which, when executed by a processor, implement the application embedding method of any of claims 1-11.