Sub-application page processing method, device and computer equipment

Abstract

The present application relates to a sub-application page processing method, device and computer equipment. The method includes: obtaining web page source code through a sub-application developer tool; compiling the web page source code into a sub-application page code according to a configured code conversion plug-in; the sub-application page code conforms to the sub-application page code structure and retains the web page code characteristics; calling the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; the adapter is installed in the logic layer of the sub-application; according to the custom components in the adapter, the document object model tree is mapped into a component tree, and the custom components in the component tree are rendered in the view layer of the sub-application to obtain the sub-application page. The use of this method can allow the page content to be fully run and rendered.

Description

Technical Field

[0001] The present application relates to the technical field of sub-application page processing, and in particular to a sub-application page processing method, apparatus and computer equipment. Background Art

[0002] With the rapid development of science and technology, page processing technology has also been developing continuously. From the original web-side page (i.e. web page) processing, it has gradually developed to other non-web-side page processing. For example, page processing in mini programs. The so-called mini program is a lightweight application that can be run and used in the parent application without downloading and installing. However, the underlying model of the mini program is different from the web side. If you want to directly move the page code of the web side to the mini program environment for execution, it is impossible.

[0003] In the traditional method, the web page code is directly converted into the mini program code through static template compilation. However, the template syntax of the web side and the template syntax of the mini program are not directly equivalent. Through static template compilation, the converted mini program code will lose some of the characteristics of the web side code, so that the content of the page cannot be fully run in the mini program, resulting in greater limitations. Summary of the invention

[0004] Based on this, it is necessary to provide a sub-application page processing method, device, computer equipment and storage medium that can enable the content of the page to run completely in response to the above technical problems.

[0005] A sub-application page processing method, the method comprising:

[0006] Obtain the source code of the web page through the sub-application developer tools;

[0007] According to the configured code conversion plug-in, the web page source code is compiled into the sub-application page code; the sub-application page code conforms to the page code structure of the sub-application and retains the characteristics of the web page code;

[0008] Call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; the adapter is installed in the logic layer of the sub-application;

[0009] According to the custom components in the adapter, the document object model tree is mapped to a component tree, and the custom components in the component tree are rendered in the view layer of the sub-application to obtain the sub-application page.

[0010] A sub-application page processing method, the method comprising:

[0011] Obtain the sub-application page code; the sub-application page code is obtained by compiling and converting the webpage source code through a code conversion plug-in; the sub-application page code conforms to the sub-application page code structure and retains the webpage code characteristics; the sub-application is a lightweight application running in the native parent application;

[0012] Call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; the adapter is installed in the logic layer of the sub-application;

[0013] According to the custom components in the adapter, the document object model tree is mapped to a component tree, and the custom components in the component tree are rendered in the view layer of the sub-application to obtain the sub-application page.

[0014] A sub-application page processing device, the device comprising:

[0015] The source code acquisition module is used to obtain the source code of the web page through the sub-application developer tool;

[0016] A compiling and conversion module is used to compile the web page source code into the sub-application page code according to the configured code conversion plug-in; the sub-application page code conforms to the page code structure of the sub-application and retains the characteristics of the web page code;

[0017] The abstract simulation module is used to call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; the adapter is installed in the logic layer of the sub-application;

[0018] The rendering module is used to map the document object model tree to a component tree according to the custom components in the adapter, and render the custom components in the component tree in the view layer of the sub-application to obtain the sub-application page.

[0019] In one embodiment, the rendering module is also used to divide the document object model nodes in the document object model tree to obtain subtrees; a subtree includes at least one document object model node; recursively self-reference the custom components in the adapter to create custom components corresponding to each subtree mapping to obtain a component tree; wherein the custom components in the component tree have a binding relationship with the document object model nodes in the corresponding mapped subtrees.

[0020] In one embodiment, the rendering module is also used to divide the document object model node in the document object model tree into a subtree when the document object model node needs to be rendered through a sub-application built-in component, or when the document object model node needs to be rendered through a user-configured custom component.

[0021] In one embodiment, the rendering module is further used to create a user-configured custom component when a document object model node needs to be rendered through a user-configured custom component, and map and bind the user-configured custom component to the document object model node.

[0022] In one embodiment, the rendering module is also used to merge the unique document object model node into the subtree of the parent component of the custom component when the subtree corresponding to the created custom component has only a unique document object model node and the unique document object model node is a leaf node of the document object model tree, and remove the corresponding custom component from the component tree.

[0023] In one embodiment, the rendering module is also used to obtain, for each custom component in the component tree, the root node identifier of the second subtree corresponding to the custom component from the first subtree corresponding to the parent component; the root node identifier is the leaf node identifier in the first subtree; in the document object model tree, obtain the subtree information corresponding to the custom component according to the root node identifier; transmit the subtree information to the view layer of the sub-application, and render the corresponding custom component in the view layer according to the subtree information.

[0024] In one embodiment, the apparatus further comprises:

[0025] An event processing module is used to register event handles on each custom component; when the event handle of the event source component is triggered by the monitored event, the event handle of the non-event source component triggered by the same event is discarded; in the document object model tree, the document object model node corresponding to the event source component is located, and the simulated web page event used to describe the event is triggered on the located document object model node; through the located document object model node, the simulated web page event is triggered in each document object model node of the document object model tree.

[0026] In one embodiment, the apparatus further comprises:

[0027] The update module is used to transmit the node update event to the logic layer when the custom component detects the node update event; in the logic layer, the data of the document object model node targeted by the node update event is modified accordingly.

[0028] In one embodiment, the update module is also used to merge multiple calls of the custom component to the data transmission function into a unified call when the custom component detects a sub-node list update event, and transmit the sub-node list update event to each document object model node corresponding to the custom component in the logical layer through the unified call to the data transmission function.

[0029] In one embodiment, the abstract simulation module is used to call the document object model interface provided by the adapter to abstract the document object in the sub-application page code into a document object model tree; call the browser object model interface provided by the adapter to virtualize the window object in the sub-application page code into a browser object; the browser object provides a browser operating environment for the sub-application page code.

[0030] In one embodiment, the apparatus further comprises:

[0031] The page isolation module is used to save the window object and document object corresponding to the sub-application page in the page instance corresponding to the sub-application page; the page instances of different sub-application pages are not connected to each other; when the sub-application page is loaded, the function that wraps the business code of the sub-application page is passed to the page instance to obtain the window object and document object corresponding to the sub-application page.

[0032] A sub-application page processing device, the device comprising:

[0033] The acquisition module is used to acquire the sub-application page code; the sub-application page code is obtained by compiling and converting the webpage source code through the code conversion plug-in; the sub-application page code conforms to the page code structure of the sub-application and retains the webpage code characteristics; the sub-application is a lightweight application running in the native mother application;

[0034] An abstract module, used to call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; the adapter is installed in the logic layer of the sub-application;

[0035] The rendering module is used to map the document object model tree into a component tree according to the custom components in the adapter, and render the custom components in the component tree in the view layer of the sub-application to obtain the sub-application page.

[0036] A computer device includes a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps in the sub-application page processing method described in each embodiment of the present application.

[0037] A computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the processor executes the steps in the sub-application page processing method described in each embodiment of the present application.

[0038] The above-mentioned sub-application page processing method, device, computer equipment and storage medium, the configured code conversion plug-in compiles the web page source code into the sub-application page code, which conforms to the page code structure of the sub-application and retains the characteristics of the web page code. That is, it can run in the sub-application and retain the characteristics of the web page code. An adapter is installed in the logic layer of the sub-application to provide a browser environment for the sub-application web page code. By calling the document object model interface provided by the installed adapter, the sub-application page code is abstracted into a document object model tree; according to the custom components in the adapter, the document object model tree is mapped into a component tree, and the custom components in the component tree are rendered in the view layer of the sub-application to obtain the sub-application page. Therefore, through the browser environment provided by the adapter, the sub-application page that retains the characteristics of the web page code can be rendered, that is, the page content can be rendered completely, avoiding the limitations of page operation. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 An application environment diagram of a method for processing a sub-application page in an embodiment;

[0040] Figure 2 A schematic diagram of a flow chart of a method for processing a sub-application page in an embodiment;

[0041] Figure 3 A schematic diagram of the use of an adapter in an embodiment;

[0042] Figure 4 A schematic diagram of component tree mapping in one embodiment;

[0043] Figure 5 A schematic diagram of a cache in an embodiment;

[0044] Figures 6 to 9 A schematic diagram illustrating a method for processing a sub-application page in an embodiment;

[0045] Fig.10 A schematic diagram of a flow chart of a method for processing a sub-application page in another embodiment;

[0046] Fig.11 It is a structural block diagram of a sub-application page processing device in one embodiment;

[0047] Fig.12 It is a structural block diagram of a sub-application page processing device in another embodiment;

[0048] Fig.13 It is a structural block diagram of a sub-application page processing device in another embodiment;

[0049] Fig.14 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0050] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0051] The sub-application page processing method provided in this application can be applied to Figure 1 In the application environment shown, the developer 102 can operate the terminal 104, and the terminal 104 and the server 106 communicate through the network. The terminal 104 can be, but is not limited to, various personal computers, laptops, smart phones, tablet computers, and portable wearable devices, and the server 106 can be implemented as an independent server or a server cluster composed of multiple servers.

[0052] The developer 102 can operate the terminal 104 to download the adapter data packet and the code conversion plug-in from the heterogeneous isomorphic tool of the server 106. The sub-application developer tool is running in the terminal 104. The developer 102 can configure the code conversion plug-in in the configuration directory corresponding to the sub-application developer tool. The developer 102 can also configure the web page source code in the source code directory corresponding to the sub-application developer tool. The developer 102 can operate the terminal 104 so that the terminal 104 can obtain the configured web page source code through the sub-application developer tool.

[0053] Terminal 104 can compile the webpage source code into sub-application page code through the sub-application developer tool according to the configured code conversion plug-in. In this way, the sub-application developer tool is equivalent to providing the sub-application with a parent application environment in the development stage, and can allow the sub-application to run in the sub-application developer tool through the compiled sub-application page code. Developer 102 can use terminal 104 to execute the operation of the sub-application using the npm process, and install the adapter in the sub-application directory in the developer tool, which is equivalent to installing the adapter in the logic layer of the sub-application. In this way, the adapter data package is installed in the directory of the sub-application. Among them, the adapter provides a document object model interface and a custom component. It can be understood that the adapter can also provide a browser object model interface. The adapter provides a browser environment for the sub-application webpage code through the provided document object model interface and browser object model interface, so that all interface calls related to the browser can be implemented in the sub-application.

[0054] After installing the adapter, the terminal 104 can call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree. The terminal 104 can map the document object model tree into a component tree based on the custom components in the adapter. After detecting the trigger operation on the rendering entry in the sub-application developer tool, the terminal 104 can render the custom components in the component tree in the view layer of the sub-application to obtain the sub-application page. In this way, the sub-application page can be rendered in the view interface in the sub-application developer tool. The developer can then perform development, debugging and other processing based on the rendered sub-application page.

[0055] In one embodiment, Figure 2 As shown, a sub-application page processing method is provided, and the method is applied to a computer device as an example for explanation. The computer device may be Figure 1 The method comprises the following steps:

[0056] S202, obtaining webpage source code through the sub-application developer tool.

[0057] Among them, web page source code is the source code of the web page. That is, web page source code is the source code with the format and syntax of the web page. Sub-application developer tools are developer tools for developing and debugging sub-applications. Developer tools (IDE, Integrated Development Environment) are a type of application software that assists in the development of computer programs. Sub-application developer tools can be used to provide a visual operation interface to help developers complete the research and development of sub-applications.

[0058] Sub-applications are applications that can be implemented in the environment provided by the parent application. The parent application is an application that hosts the sub-application and provides an environment for the implementation of the sub-application. The parent application is a native application. A native application is an application that can be directly run on the operating system. Sub-applications can be run based on the parent application without downloading, and are lightweight applications. During the development stage, the sub-application developer tool is equivalent to providing an environment for the sub-application to run on behalf of the parent application. For example, WeChat is a parent application, and WeChat mini-programs are sub-applications running in the native parent application WeChat.

[0059] In one embodiment, sub-applications may include sub-applications for various scenarios such as instant messaging sub-applications, mobile payment sub-applications, and game sub-applications. As long as they meet the characteristics of being lightweight applications that run based on the parent application and do not require downloading and installation, they can be called sub-applications.

[0060] Specifically, the developer can configure the web page source code, the sub-application entry, and the web end entry in the source code directory. It is understandable that when the web page code is to be developed, the web page source code can be obtained from the web end entry for operation and loading. In the embodiment of the present application, in order to develop the sub-application page code, the computer device can obtain the web page source code from the sub-application entry through the sub-application development tool.

[0061] It can be understood that there is no need to write a set of codes for each end. Instead, by configuring a web page source code shared by different ends (sub-application end and web end), page development and processing for different ends can be achieved.

[0062] S204, compile the web page source code into the sub-application page code according to the configured code conversion plug-in; the sub-application page code conforms to the page code structure of the sub-application and retains the web page code characteristics.

[0063] The code conversion plug-in is a plug-in that compiles web page source code into sub-application page code. The sub-application page code structure is the structure of the page code supported by the sub-application. In other words, only when the sub-application page code structure is met can it be supported by the sub-application, so that the page can be run on the sub-application. The web page code characteristics refer to the characteristics of the web page code (i.e., the web page code).

[0064] It is understandable that because the sub-application page code and the web page code are different in structure, the sub-application page code has its own fixed structure, so the web page source code can be compiled and converted into the sub-application page code that conforms to the sub-application page code structure through the code conversion plug-in. It should be noted that the code conversion plug-in only converts the structure, and does not change the web page code characteristics of the web page source code, so the compiled and converted sub-application page code still retains the web page code characteristics.

[0065] Specifically, the developer can configure the code conversion plug-in in the configuration directory corresponding to the sub-application developer tool. The computer device can obtain and call the code conversion plug-in from the configuration directory to compile the webpage source code into the sub-application page code.

[0066] In one embodiment, the computer device can call the code conversion plug-in by executing the preset construction code, compile and convert the web page source code, generate the sub-application page code, and store it in the sub-application target code directory in the sub-application developer tool.

[0067] In one embodiment, the computer device can call the code conversion plug-in by executing a construction code such as "npm run mp" to compile and convert the webpage source code.

[0068] S206, calling the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree.

[0069] The document object model interface is the DOM (Document Object Model) interface, and the document object model tree is the DOM (Document Object Model) tree.

[0070] The sub-application includes a logic layer (App Service) and a view layer (Webview). The logic layer of the sub-application, where the transaction logic is processed, is a collection of all js script files. It can be understood that the logic layer of the sub-application is used to process the data and send it to the view layer, and receive event feedback from the view layer. The view layer of the sub-application is used to reflect the data sent by the logic layer into a view, and send the events of the view layer to the logic layer.

[0071] It is understandable that the sub-application itself does not have the Document Object Model interface (DOM interface) and the Browser Object Model (BOM) interface. The web page code needs to rely on the DOM / BOM interface, so the sub-application cannot run the web page code. By installing an adapter to provide the interface that the web page code needs to call, it is equivalent to simulating the browser environment, so that the sub-application web page code that maintains the characteristics of the web page code can be run and rendered normally based on the browser environment provided by the adapter.

[0072] Specifically, the computer device downloads the adapter data package from the server in advance, and installs and builds the adapter data package into the sub-application directory corresponding to the sub-application developer tool. This is equivalent to installing the adapter into the logic layer of the sub-application. In this way, the adapter data package is installed in the sub-application directory.

[0073] The adapter provides a document object model interface and a custom component. It is understood that the adapter can also provide a browser object model interface. The adapter provides a browser environment for the sub-application web page code through the provided document object model interface and browser object model interface, so that all browser-related interface calls can be implemented in the sub-application.

[0074] Figure 3 FIG. 1 is a schematic diagram of the use of an adapter in an embodiment. Figure 3, (a) is the underlying architecture of the sub-application in the traditional method, and the underlying implementation of the sub-application is closed. Rendering (responsible by the view layer) and logic (responsible by the logic layer) are completely separated, and the interaction between rendering and logic is driven by data and events. There is no dom / bom interface in the logic layer of the sub-application. However, the sub-application page code with the characteristics of web page code needs to call the dom / bom interface in some cases. Obviously, the underlying architecture of the penetrated sub-application lacks a browser environment. (b) is a schematic diagram of the improved underlying structure of the embodiment of the present application. Referring to (b), an adaptation layer is provided in the logic layer, and an adapter is installed in the adaptation layer. The adapter can be understood as simulating a browser environment in the logic layer (appService) of the sub-application, so that the sub-application page code can run directly on it. The basic principle of the adapter is to provide basic dom interfaces and bom interfaces in the logic layer. The interaction between the logic layer (appService) and the view layer (webview) is encapsulated in the adapter, and the sub-application page code does not need to care about how the communication is carried out. For it, it is the same as running in a browser environment. In this way, when the code with the retained web page code characteristics needs to call the DOM / BOM interface (for example, the Vue code is the retained code with the web page code characteristics, and the Vue code needs to call the DOM / BOM interface when it is running at runtime), it can call the DOM / BOM interface provided by the adapter, just like running in a browser environment, thereby achieving adaptation support for the sub-application page code with the web page code characteristics.

[0075] The computer device can call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree.

[0076] In one embodiment, the code conversion plug-in in step S204 is obtained from the configuration directory. The method also includes: obtaining the code conversion plug-in from the heterogeneous isomorphic tool, and configuring the code conversion plug-in in the configuration directory; obtaining the web page operation interface package and the custom component package included in the adapter from the heterogeneous isomorphic tool; the web page operation interface package is used to provide the interface required to be called for the web page operation; the interface includes a document object model interface; and installing the adapter by installing the web page operation interface package and the custom component package.

[0077] Here, the heterogeneous isomorphic tool refers to a tool that makes the code of one end applicable in another different end. It can be understood that through the code conversion plug-in and adapter provided by the heterogeneous isomorphic tool, the webpage source code of the webpage end can be applied to the sub-application end.

[0078] It can be understood that the adapter can include a web page operation interface package and a custom component package. The web page operation interface package is used to provide an interface required for web page operation, wherein the interface includes a document object model interface. The web page operation interface package can also provide a browser object model interface.

[0079] It can be understood that the web page operation interface package is equivalent to a js library that provides the dom / bom interface required for web page operation. The custom component package is used to provide custom components responsible for rendering. It can be understood that the web page operation interface package and the custom component package constitute an adapter, and the sub-application page code depends on two data packages, which provide a browser environment for the sub-application page code.

[0080] In addition, the heterodox isomorphic tool also provides a code conversion plug-in, which is used to compile the original web page source code into the sub-application page code so that the sub-application page code conforms to the page code structure of the sub-application.

[0081] Specifically, the adapter and the code conversion plug-in can be published in the server through the heterogeneous isomorphic tool, so that the computer device can download the code conversion plug-in, as well as the web page operation interface package and the custom component package included in the adapter. The computer device can configure the code conversion plug-in in the configuration directory of the sub-application developer tool. The computer device can build and install the web page operation interface package and the custom component package included in the adapter in the sub-application directory in the sub-application developer tool according to the user's operation, thereby realizing the installation of the adapter in the logic layer of the sub-application.

[0082] It is understandable that when the heterogeneous isomorphic tool needs to be upgraded later, the three data packages of the code conversion plug-in, the web page operation interface package and the custom component package can be directly upgraded.

[0083] S208, mapping the document object model tree to a component tree according to the custom components in the adapter, and rendering the custom components in the component tree in the view layer of the sub-application to obtain a sub-application page.

[0084] The component tree is a tree structure composed of custom components. That is, the component tree includes multiple custom components.

[0085] Specifically, the custom component of the sub-application supports using itself as its child node, that is, a component tree of any level and any number of nodes can be constructed by recursive reference. The document object model tree includes multiple document object model nodes, so the computer device can map one or more document object model nodes to a custom component, and can map a document object model tree to multiple custom components. Each custom component is equivalent to describing a part of the document object model tree. When multiple custom components are spliced ​​together, it becomes a component tree corresponding to the document object model tree mapping.

[0086] It can be understood that the sub-application is capable of rendering the custom components of the sub-application, so by rendering the custom components in the component tree in the view layer of the sub-application, the sub-application page can be rendered.

[0087] It can be understood that since the sub-application page code is run in the environment provided by the sub-application developer tool, the sub-application page is also rendered in the view area of ​​the sub-application developer tool. The sub-application developer tool also includes a code editing and debugging area, and the developer can edit and debug the sub-application page code in the code editing and debugging area based on the rendered sub-application page.

[0088] The above-mentioned sub-application page processing method, the configured code conversion plug-in compiles the web page source code into the sub-application page code, which conforms to the page code structure of the sub-application and retains the web page code characteristics. That is, it can run in the sub-application and retain the web page code characteristics. An adapter is installed in the logic layer of the sub-application to provide a browser environment for the sub-application web page code. By calling the document object model interface provided by the installed adapter, the sub-application page code is abstracted into a document object model tree; according to the custom components in the adapter, the document object model tree is mapped into a component tree, and the custom components in the component tree are rendered in the view layer of the sub-application to obtain the sub-application page. Therefore, through the browser environment provided by the adapter, the sub-application page that retains the characteristics of the web page code can be rendered, that is, the page content can be rendered completely, avoiding the limitations of page operation.

[0089] In addition, developers only need to configure the code conversion plug-in and the web page source code to render and debug the sub-application page code based on the original web page source code, without having to rewrite a new set of sub-application page code, thus realizing the operation and development of a set of web page source code on the web page and the sub-application side. This improves the sub-application code development efficiency and saves system resources.

[0090] In one embodiment, step S208 maps the document object model tree to a component tree according to the custom components in the adapter, including: dividing the document object model nodes in the document object model tree to obtain subtrees; a subtree includes at least one document object model node; recursively self-referencing the custom components in the adapter to create custom components corresponding to each subtree mapping to obtain a component tree; wherein the custom components in the component tree have a binding relationship with the document object model nodes in the mapped corresponding subtrees.

[0091] Specifically, the computer device may divide the document object model nodes in the document object model tree to obtain subtrees; a subtree includes at least one document object model node. It can be understood that the computer device can determine the subtree division strategy of the document object model tree according to the structure of the document object model tree. The subtree division strategy may include the number of subtrees divided. The subtree division strategy may also include the document object model nodes specifically included in a subtree. That is, according to the structure of the document object model tree, it can be determined how many subtrees the document object model tree is to be divided into.

[0092] In one embodiment, the computer device may determine the number of layers of each subtree according to a pre-configuration, for example, the number of layers of each subtree may be pre-configured not to exceed a preset layer threshold, or each subtree may be pre-configured to have a fixed number of layers.

[0093] The computer device can recursively self-reference the custom components in the adapter to create custom components corresponding to each subtree mapping to obtain a component tree; wherein the custom components in the component tree have a binding relationship with the document object model nodes in the corresponding subtrees mapped. That is, one custom component corresponds to one subtree, and then the custom component has a binding relationship with the document object model nodes in the subtree.

[0094] Recursive self-reference means that a custom component supports using itself as its child node. It is understandable that since the document object model tree itself has no fixed pattern to follow, its hierarchy and the number of document object model nodes are not fixed, and there is no way to describe it with a fixed tag language, so the self-reference feature of the mini-program custom component is used here. Through the recursive self-reference of custom components, multiple custom components can be created, each custom component corresponds to a subtree, so that the component tree formed by splicing the created custom components together can describe an entire document object model tree.

[0095] For ease of understanding, now combined Figure 4 See Figure 4The dotted box divides a document object model tree (dom tree) P into five subtrees c1 to c5, and each subtree has no more than three layers. Each document object model node in the dotted box constitutes a subtree. A subtree can be rendered with a custom component (that is, the mapping corresponds to a custom component), and each custom component renders a subtree with no more than three layers. Then splicing these custom components together is equivalent to rendering a complete document object model tree. It is equivalent to mapping the document object model tree P into a component tree with 5 custom components.

[0096] In one embodiment, the document object model nodes in the document object model tree are divided to obtain subtrees, including: when the document object model nodes in the document object model tree need to be rendered by a sub-application built-in component, or when the document object model nodes need to be rendered by a user-configured custom component, the document object model nodes are divided into a subtree separately.

[0097] Sub-application built-in components are components set inside the sub-application. It is understood that sub-application built-in components are different from custom components. User-configured custom components refer to custom components configured by developers based on their own sub-application development requirements. User-configured custom components are different from the sub-application's own custom components.

[0098] It can be understood that in the process of subtree division, some special document object model nodes need to be specially processed.

[0099] In one embodiment, when some DOM nodes in the DOM tree need to be simulated using the built-in component nodes of the mini-program, they need to be rendered separately as a custom component, and cannot be merged into the same subtree with other DOM nodes. Therefore, when the DOM nodes in the DOM tree need to be rendered by the built-in component of the sub-application, the DOM nodes are divided into a subtree separately.

[0100] In one embodiment, there are DOM nodes in the DOM tree that need to be rendered by a user-configured custom component. In this case, it is also necessary to render it separately as a custom component, and cannot be merged with other DOM nodes into the same subtree. Therefore, when a DOM node needs to be rendered by a user-configured custom component, the DOM node is divided into a subtree separately.

[0101] In one embodiment, recursive self-reference is performed through the custom components in the adapter to create custom components corresponding to each subtree mapping, and the component tree obtained includes: when the document object model node needs to be rendered through the user-configured custom component, the user-configured custom component is created, and the user-configured custom component is mapped and bound to the document object model node.

[0102] It can be understood that when a document object model node needs to be rendered through a user-configured custom component, it is necessary to add a special custom component generated according to the user configuration, that is, to create a user-configured custom component. The user-configured custom component is mapped and bound to the document object model node, and then the user-configured custom component processes the user-defined properties and events on the document object model node, and at the same time uses the abstract node characteristics of the user-configured custom component to achieve backward compatibility.

[0103] In one embodiment, the method also includes: when the subtree corresponding to the created custom component has only a unique document object model node, and the unique document object model node is a leaf node of the document object model tree, the unique document object model node is merged into the subtree of the parent component of the custom component, and the corresponding custom component is removed from the component tree.

[0104] It can be understood that the number of custom components can be reduced by merging nodes, thereby reducing custom component instances and optimizing performance.

[0105] Specifically, when the subtree corresponding to the created custom component has only a unique document object model node, and the unique document object model node is a leaf node of the document object model tree, the unique document object model node is merged into the subtree of the parent component of the custom component, and the corresponding custom component is removed from the component tree.

[0106] by Figure 4 For example, there is only one document object model node in subtree c4, and this document object model node is the leaf node of the entire document object model tree. The parent component of the custom component corresponding to subtree c4 corresponds to subtree c1, so the document object model node in subtree c4 can be merged into subtree c1. Then the custom component corresponding to subtree c4 is removed from the component tree, thereby reducing the number of custom component instances.

[0107] In one embodiment, according to the custom components in the adapter, the document object model tree is mapped to a component tree, and the custom components in the component tree are rendered in the view layer of the sub-application, and the sub-application page is obtained, including: for each custom component in the component tree, from the first sub-tree corresponding to the parent component, the root node identifier of the second sub-tree corresponding to the custom component is obtained; the root node identifier is the leaf node identifier in the first sub-tree; in the document object model tree, the sub-tree information corresponding to the custom component is obtained according to the root node identifier; the sub-tree information is transmitted to the view layer of the sub-application, and the corresponding custom component is rendered in the view layer according to the sub-tree information.

[0108] It can be understood that each custom component is responsible for a subtree, and the complete information of this subtree can be obtained on the document object model tree. Therefore, the custom component only needs to obtain the root node of this subtree to obtain the entire subtree and then render it on the page.

[0109] Specifically, in the sub-application, a page is assembled by custom components. The page itself is a special root custom component. We can map this root custom component to the root node in the document object model tree, and then take out the child node identifier of the root node as the root node identifier of the child component of this root custom component, and pass this root node identifier by calling the setdata function. Then, when the child component calls the attached function through the adapter, it can get this root node identifier, so that the root node can be located in the document object model tree according to the root node identifier, and the complete subtree information corresponding to the child component can be obtained from the document object model tree. Then, by calling the setdata function, the complete subtree information is passed to the view layer, and the child component is rendered in the view layer according to the subtree information. Then, this child component can be equivalent to the parent component, and the leaf node identifier in the parent component can be used as the root node identifier of its child component. The subtree information corresponding to the child component is also obtained through the root node identifier, and the child component is rendered in the view layer according to the subtree information. And so on, until the rendering of the entire component tree is completed, the final child application page is obtained.

[0110] In other words, all descendant components obtain the root node identifier from the parent component, and then obtain the complete subtree information, call the setData function, and complete the page rendering in the view layer.

[0111] In one embodiment, the method further includes: registering an event handler on each custom component; when the event handler of the event source component is triggered by a monitored event, discarding the event handler of the non-event source component triggered by the same event; locating the document object model node corresponding to the event source component in the document object model tree, and triggering a simulated web page event for describing the event on the located document object model node; and triggering the simulated web page event in each document object model node of the document object model tree through the located document object model node.

[0112] Among them, the simulated web page event refers to the web page event simulated by the event of the sub-application, which is used to capture and bubble on the abstract simulated document object model tree. The event source component is the component directly triggered by the event.

[0113] It is understandable that on the Web side, when users operate on the rendered page, these actions need to be notified to the user code. Usually, the user code will call the DOM interface (document object model interface) to monitor specific behavior events on specific DOM nodes (document object model nodes), and execute the corresponding event handler when the event is triggered.

[0114] There are also events in the sub-application, but there are the following problems: 1. Some web page events (i.e. Web events) have no corresponding events to replace in the sub-application event system (such as the change event of the input tag); 2. The performance of some replaceable sub-application events is inconsistent with the corresponding web page events. 3. Due to the isolation mechanism of the sub-application custom components, when a bubbling event triggered by a non-current node is detected, the specific component that triggered the event may not be obtained.

[0115] Therefore, the computer device can register an event handle on each custom component. Then when an event is triggered, the event handle of the event source component will definitely be triggered. The computer device can record the event timestamp of the event. According to the event timestamp, the event handle of the non-event source component triggered by the same event is discarded. Then, the computer device can locate the document object model node corresponding to the event source component in the document object model tree, and trigger the simulated web page event used to describe the event on the located document object model node. The computer device can trigger the simulated web page event in each document object model node of the document object model tree through the located document object model node, thereby triggering the capture and bubbling stages.

[0116] In this way, for events with inconsistent performance, they can be directly compatible in the simulated web page event system so that they can be triggered through the document object model tree. For some web page events that do not have alternatives, they can be simulated in the simulated web page event system based on existing events. As for some document object model nodes that need special responses for some events, such as the a tag may jump to the page after clicking, these can all be implemented in the simulated web page event system. The simulated web page event system is an event system that simulates the entire event system on the web side. It can be understood that the simulated web page event is triggered in the simulated web page event system, which means capturing bubbles on the abstract simulated document object model tree.

[0117] In one embodiment, the method further includes: when the custom component detects a node update event, transmitting the node update event to the logic layer; and modifying the data of the document object model node targeted by the node update event accordingly in the logic layer.

[0118] Among them, the node update event is an event used to update the document object model node.

[0119] In one embodiment, the node update event may include at least one of a node attribute update event and a child node list update event.

[0120] In one embodiment, when a custom component detects a node attribute update event, it can pass the node attribute update event to the logic layer by calling the setData (data transmission) function after performing a difference comparison on the data. The event processing function corresponding to the node attribute update event in the logic layer can modify the attribute of the document object model node targeted by the node attribute update event.

[0121] In one embodiment, when a custom component detects a node update event, the node update event is transmitted to the logic layer, including: when the custom component detects a sub-node list update event, multiple calls to the data transmission function by the custom component are merged into a unified call, and the sub-node list update event is transmitted to each document object model node corresponding to the custom component in the logic layer through the unified call to the data transmission function.

[0122] The unified call means calling the data transmission function uniformly and once.

[0123] It can be understood that when a sub-node list update event is detected, in addition to the need to differentiate the data and call the data transmission function (setData function) for transmission, it is also necessary to recursively trigger the update event of the descendant document object model node. Therefore, this may induce the situation where the data transmission function is repeatedly called in the same custom component, which will cause multiple calls to the communication, thereby wasting system resources. Therefore, when the custom component detects a sub-node list update event, the multiple calls of the custom component to the data transmission function are merged into a unified call, and the sub-node list update event is transmitted to each document object model node corresponding to the custom component in the logic layer through the unified call of the data transmission function. This is equivalent to merging multiple calls into one call, thereby avoiding multiple calls to the communication and saving system resources.

[0124] In one embodiment, the method further includes: when the sub-application page is closed, the document object type node corresponding to the sub-application page is cached; when the sub-application page is loaded again, the document object type node corresponding to the sub-application page is read from the cache to create a corresponding document object model tree, and step S208 is executed, that is, according to the custom components in the adapter, the document object model tree is mapped to a component tree, and the custom components in the component tree are rendered in the view layer of the sub-application to obtain the sub-application page.

[0125] Specifically, when the sub-application page enters the onUnload phase, that is, when it is closed, the document object type node corresponding to the sub-application page is reclaimed and cached. Afterwards, when the sub-application page needs to be loaded again, the document object type node corresponding to the sub-application page can be read from the cache first to create the corresponding document object model tree. There is no need to abstract the sub-application page code again, thereby improving processing efficiency and reducing performance loss.

[0126] In one embodiment, calling the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree includes: calling the document object model interface provided by the adapter to abstract the document object in the sub-application page code into a document object model tree. The method also includes: calling the browser object model interface provided by the adapter to virtualize the window object in the sub-application page code into a browser object; the browser object provides a browser operating environment for the sub-application page code.

[0127] It can be understood that the document object is the document object. The window object is the window object. The adapter provides a document object model interface and a browser object model interface. The computer device can abstract the document object in the sub-application page code into a document object model tree by calling the document object model interface provided by the adapter. The computer device can virtualize the window object in the sub-application page code into a browser object by calling the browser object model interface provided by the adapter.

[0128] Then, when the sub-application page is closed, each document object model node in the document object model tree abstracted from the document object can be cached, and each node of the browser object virtualized from the window object (ie, Bom node) can be cached.

[0129] Figure 5 FIG. 1 is a schematic diagram of a cache in an embodiment. Figure 5 When generating a page, according to the configuration, the document object in the page is abstracted into a document object model tree, and the window object in the page is virtualized into a browser object model. Then, when the page is closed, the document object model node in the document object model tree and the browser object are mapped to the page and cached. In this way, when the page is loaded again, it can be read directly from the cache.

[0130] In one embodiment, before calling the document object model interface provided by the adapter to abstract the document object in the sub-application page code into a document object model tree, the method also includes: saving the window object and document object corresponding to the sub-application page in the page instance corresponding to the sub-application page; the page instances of different sub-application pages are not interconnected; when loading the sub-application page, passing the function that wraps the business code of the sub-application page into the page instance to obtain the window object and document object corresponding to the sub-application page.

[0131] It can be understood that considering the isolation of multiple pages on the Web side, multiple pages in the sub-application also need to be isolated. Each page will create a document object and a window object instance during the loading phase (i.e., the onload phase) and save them in the corresponding page instance. The window objects and document objects between different pages are not interoperable. That is, the page instances of different sub-application pages are not interoperable. The business code of each sub-application page is wrapped by a function, which is also called during the page loading phase and passed to the page instance where the window object and document object are saved. Therefore, the window object and document object obtained by the business code of each page belong to the current page, and will not be obtained from other pages, thus realizing the isolation of multiple pages. In addition, because of the function wrapping, all variables / functions written in the global scope will be declared in the function scope, further ensuring the isolation of the page.

[0132] For ease of understanding, now combined Figures 6 to 9 , taking the WeChat applet as an example, and taking the todo page (to-do list page) as an example, the sub-application page processing method in the embodiment of the present application is illustrated. Figure 6 After downloading the sample of the heterodox isomorphism tool, you can press Figure 6 The root directory structure shown in the figure includes: src is the source directory, build is the configuration directory, and dist is the target code directory. Then enter the src / index directory, such as Figure 7 As shown in the figure, the main entrance for the Web side is separate from the main entrance for the WeChat applet side, and the code for the todo page is shared. In this way, we only need to write one copy of the web page source code (i.e. the web side source code) for the page. Figure 8 As shown, the configuration directory build also distinguishes between the web side and the mini program side. In addition, the mini program side is also configured with a mp-webpack-plugin plug-in, that is, a code conversion plug-in, which is used to compile the vue component in the web page source code into the mini program code. After the web page source code and configuration are written, the developer only needs to operate the computer device to execute the corresponding build code of each end, and the target code will be generated in the target code directory corresponding to each end, that is, the dist directory. For example, for the web side, execute the "npm run build" build code to compile and generate executable web page code to the target code directory of the web side, that is, the dist / web directory. For the mini program side, execute the "npm run mp" build code to call the code conversion plug-in mp-webpack-plugin to compile the web page source code into executable mini program page code to the target code directory of the mini program side, that is, the dist / mp directory. For the mini program side, developers need to enter the dist / mp directory and execute npminstall to install dependencies, that is, install the web page running interface package (miniprogram-render) and custom component package (miniprogram-element) included in the adapter, as well as other data that provides basic dependencies. Developers can use the WeChat mini program developer tool to import the dist / mp directory as a mini program project to install the adapter and the basic dependency environment. Developers can click the rendering trigger entry of Build npm under the toolbar of the WeChat mini program developer tool to trigger the page rendering of the compiled and converted mini program page code through the adapter, so that the rendering effect of the todo page can be previewed in the view area of ​​the WeChat mini program developer tool. Reference Fig. 9 , the left side is the effect of running on the WeChat applet. Fig. 9 The right side shows the effect of running on the Web side. Fig. 9 It can be seen that the page rendered on the mini program side is basically the same as the page on the web side. Therefore, through the method in the embodiment of the present application, the characteristics of the web page code can be well supported on the mini program side.

[0133] like Fig.10 As shown, in one embodiment, a sub-application page processing method is provided, which can be applied to a terminal using a sub-application, and specifically includes the following steps:

[0134] S1002, obtaining the sub-application page code; the sub-application page code is obtained by compiling and converting the web page source code through a code conversion plug-in; the sub-application page code conforms to the page code structure of the sub-application and retains the web page code characteristics.

[0135] It can be understood that the above article explains that the sub-application developer tool can be used to compile and convert the web page source code into the sub-application page code, and provide a browser environment through an adapter so that the compiled sub-application page code can run normally in the sub-application, thereby retaining the web page code characteristics. In this way, the sub-application page code can be developed and debugged in the sub-application developer tool.

[0136] Then, after the sub-application page code is developed and debugged, the sub-application page code can be released so that the terminal using the sub-application can use the developed sub-application page.

[0137] Therefore, the terminal can download the developed sub-application page code from the server. The sub-application page code is obtained by compiling and converting the webpage source code through the code conversion plug-in; the sub-application page code conforms to the page code structure of the sub-application and retains the webpage code characteristics.

[0138] S1004, calling the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree.

[0139] The terminal can download and install the adapter data package from the server, thereby installing the adapter in the logic layer of the sub-application. In this way, the terminal can call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree. It can be understood that the specific processing can refer to the description in the above embodiment.

[0140] S1006, mapping the document object model tree to a component tree according to the custom components in the adapter, and rendering the custom components in the component tree in the view layer of the sub-application to obtain a sub-application page.

[0141] Similarly, the specific processing refers to the description in the above embodiment. In this way, the user side using the sub-application can realize the operation processing of the sub-application page code with the characteristics of the web page code by installing the adapter.

[0142] The above-mentioned sub-application page processing method, the configured code conversion plug-in compiles the web page source code into the sub-application page code, which conforms to the page code structure of the sub-application and retains the web page code characteristics. That is, it can run in the sub-application and retain the web page code characteristics. An adapter is installed in the logic layer of the sub-application to provide a browser environment for the sub-application web page code. By calling the document object model interface provided by the installed adapter, the sub-application page code is abstracted into a document object model tree; according to the custom components in the adapter, the document object model tree is mapped into a component tree, and the custom components in the component tree are rendered in the view layer of the sub-application to obtain the sub-application page. Therefore, through the browser environment provided by the adapter, the sub-application page that retains the characteristics of the web page code can be rendered, that is, the page content can be rendered completely, avoiding the limitations of page operation.

[0143] It should be understood that, although the steps in each flowchart are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear description in this article, the execution of these steps is not strictly limited in order, and these steps can be executed in other orders. Moreover, at least a part of the steps in each flowchart may include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0144] In one embodiment, Fig.11 As shown, a sub-application page processing device 1100 is provided. The device can adopt a software module or a hardware module, or a combination of the two to become a part of a computer device. The device specifically includes: a source code acquisition module 1102, a compilation and conversion module 1104, an abstract simulation module 1106, and a rendering module 1108, wherein:

[0145] The source code acquisition module 1102 is used to acquire the webpage source code through the sub-application developer tool.

[0146] The compiling and converting module 1104 is used to compile the web page source code into the sub-application page code according to the configured code conversion plug-in; the sub-application page code conforms to the page code structure of the sub-application and retains the web page code characteristics.

[0147] The abstract simulation module 1106 is used to call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; the adapter is installed in the logic layer of the sub-application.

[0148] The rendering module 1108 is used to map the document object model tree to a component tree according to the custom components in the adapter, and render the custom components in the component tree in the view layer of the sub-application to obtain the sub-application page.

[0149] In one embodiment, the rendering module 1108 is also used to divide the document object model nodes in the document object model tree to obtain subtrees; a subtree includes at least one document object model node; recursively self-reference the custom components in the adapter to create custom components corresponding to each subtree mapping to obtain a component tree; wherein the custom components in the component tree have a binding relationship with the document object model nodes in the corresponding mapped subtrees.

[0150] In one embodiment, the rendering module 1108 is also used to divide the document object model node in the document object model tree into a subtree when the document object model node needs to be rendered through a sub-application built-in component, or when the document object model node needs to be rendered through a user-configured custom component.

[0151] In one embodiment, the rendering module 1108 is further configured to create a user-configured custom component and map and bind the user-configured custom component to the document object model node when the document object model node needs to be rendered through a user-configured custom component.

[0152] In one embodiment, the rendering module 1108 is also used to merge the unique document object model node into the subtree of the parent component of the custom component and remove the corresponding custom component from the component tree when the subtree corresponding to the created custom component has only a unique document object model node and the unique document object model node is a leaf node of the document object model tree.

[0153] In one embodiment, the rendering module 1108 is also used to obtain, for each custom component in the component tree, the root node identifier of the second subtree corresponding to the custom component from the first subtree corresponding to the parent component; the root node identifier is the leaf node identifier in the first subtree; in the document object model tree, obtain the subtree information corresponding to the custom component according to the root node identifier; transmit the subtree information to the view layer of the sub-application, and render the corresponding custom component in the view layer according to the subtree information.

[0154] In one embodiment, the apparatus further comprises:

[0155] Event processing module 1110 is used to register event handlers on each custom component; when the event handler of the event source component is triggered by the monitored event, the event handler of the non-event source component triggered by the same event is discarded; in the document object model tree, the document object model node corresponding to the event source component is located, and the simulated web page event used to describe the event is triggered on the located document object model node; through the located document object model node, the simulated web page event is triggered in each document object model node of the document object model tree.

[0156] In one embodiment, the apparatus further comprises:

[0157] The updating module 1112 is used to transmit the node updating event to the logic layer when the custom component detects the node updating event; and modify the data of the document object model node targeted by the node updating event accordingly in the logic layer.

[0158] In one embodiment, the update module is also used to merge multiple calls of the custom component to the data transmission function into a unified call when the custom component detects a sub-node list update event, and transmit the sub-node list update event to each document object model node corresponding to the custom component in the logical layer through the unified call to the data transmission function.

[0159] In one embodiment, the abstract simulation module 1106 is used to call the document object model interface provided by the adapter to abstract the document object in the sub-application page code into a document object model tree; call the browser object model interface provided by the adapter to virtualize the window object in the sub-application page code into a browser object; the browser object provides a browser operating environment for the sub-application page code.

[0160] like Fig.12 As shown, in one embodiment, the apparatus further includes: an event processing module 1110, an update module 1112, and a page isolation module 1114;

[0161] The page isolation module 1114 is used to save the window object and document object corresponding to the sub-application page in the page instance corresponding to the sub-application page; the page instances of different sub-application pages are not interconnected; when the sub-application page is loaded, the function that wraps the business code of the sub-application page is passed into the page instance to obtain the window object and document object corresponding to the sub-application page.

[0162] like Fig.13 As shown, a sub-application page processing device 1300 is provided. The device can adopt a software module or a hardware module, or a combination of the two to become a part of the terminal. The device specifically includes: an acquisition module 1302, an abstraction module 1304 and a page rendering module 1306, wherein:

[0163] Acquisition module 1302 is used to obtain the sub-application page code; the sub-application page code is obtained by compiling and converting the web page source code through a code conversion plug-in; the sub-application page code conforms to the page code structure of the sub-application and retains the web page code characteristics; the sub-application is a lightweight application running in the native parent application.

[0164] The abstraction module 1304 is used to call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; the adapter is installed in the logic layer of the sub-application.

[0165] The page rendering module 1306 is used to map the document object model tree to a component tree according to the custom components in the adapter, and render the custom components in the component tree in the view layer of the sub-application to obtain the sub-application page.

[0166] For the specific definition of the sub-application page processing device, please refer to the definition of the sub-application page processing method above, which will not be repeated here. Each module in the above-mentioned sub-application page processing device can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0167] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Fig.14 As shown. The computer device includes a processor, a memory, a communication interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be achieved through WIFI, an operator network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a sub-application page processing method is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, or a button, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0168] Those skilled in the art will understand that Fig.14The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0169] In one embodiment, a computer device is further provided, including a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the steps in the above method embodiments when executing the computer program.

[0170] In one embodiment, a computer-readable storage medium is provided, storing a computer program, which implements the steps in the above method embodiments when executed by a processor.

[0171] Those of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory may include read-only memory (ROM), magnetic tape, floppy disk, flash memory or optical memory, etc. Volatile memory may include random access memory (Ran Document Object Model Access Memory, RAM) or external cache memory. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (Static Ran Document Object Model Access Memory, SRAM) or dynamic random access memory (Dynamic Ran Document Object Model Access Memory, DRAM), etc.

[0172] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

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

Claims

1. A sub-application page processing method, applied to a terminal, the method comprising: Publish adapters and transcoding plugins in the server; Download the code conversion plug-in, and configure the code conversion plug-in in the configuration directory of the sub-application developer tool; Obtaining webpage source code from the sub-application portal through the sub-application developer tool; Obtaining and calling the code conversion plug-in from the configuration directory, compiling the webpage source code into the sub-application page code according to the configured code conversion plug-in, the sub-application developer tool provides the sub-application with a parent application environment in the development stage, and allows the sub-application to run in the sub-application developer tool through the compiled sub-application page code; the sub-application page code conforms to the page code structure of the sub-application and retains the webpage code characteristics; Calling the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; The adapter is installed in the logic layer of the sub-application, and the adapter data packet is downloaded from the server in advance, and the adapter data packet is installed and constructed into the sub-application directory corresponding to the sub-application developer tool; According to the custom components in the adapter, the document object model tree is mapped to a component tree. After detecting the trigger operation of the rendering entry in the sub-application developer tool, the custom components in the component tree are rendered in the view layer of the sub-application to obtain the sub-application page. The adapter provides a browser environment for the sub-application web page code through the provided document object model interface and browser object model interface, so that the interface call related to the browser is implemented in the sub-application; The sub-application page is rendered in the view area of ​​the sub-application developer tool. The sub-application developer tool also includes a code editing and debugging area. Based on the rendered sub-application page, the sub-application page code is edited and debugged in the code editing and debugging area.

2. The method according to claim 1, characterized in that Mapping the document object model tree to a component tree according to the custom component in the adapter includes: Dividing the document object model nodes in the document object model tree to obtain subtrees; each subtree includes at least one document object model node; Recursively self-reference the custom components in the adapter to create custom components corresponding to each of the subtree mappings to obtain a component tree; The custom component in the component tree has a binding relationship with the document object model node in the mapped corresponding subtree.

3. The method according to claim 2, characterized in that The dividing of the document object model nodes in the document object model tree to obtain subtrees includes: When a document object model node in the document object model tree needs to be rendered by a sub-application built-in component, or when the document object model node needs to be rendered by a user-configured custom component, the document object model node is separately divided into a subtree.

4. The method according to claim 3, characterized in that The custom components in the adapter are recursively self-referenced to create custom components corresponding to each subtree mapping, and the component tree obtained includes: When the document object model node needs to be rendered by a user-configured custom component, A user-configured custom component is created, and the user-configured custom component is mapped and bound to the document object model node.

5. The method according to claim 2, characterized in that: The method further comprises: When the subtree corresponding to the created custom component has only one document object model node, and the only document object model node is a leaf node of the document object model tree, then The unique document object model node is merged into the subtree of the parent component of the custom component, and the corresponding custom component is removed from the component tree.

6. The method according to claim 1, characterized in that The step of mapping the document object model tree to a component tree according to the custom component in the adapter, and rendering the custom component in the component tree in the view layer of the sub-application to obtain the sub-application page includes: For each custom component in the component tree, obtain the root node identifier of the second subtree corresponding to the custom component from the first subtree corresponding to the parent component; the root node identifier is the leaf node identifier in the first subtree; In the document object model tree, obtaining subtree information corresponding to the custom component according to the root node identifier; The subtree information is transmitted to the view layer of the sub-application, and the corresponding custom component is rendered in the view layer according to the subtree information.

7. The method according to claim 1, characterized in that The method further comprises: Registering event handlers on each of the custom components; When the event handler of the event source component is triggered by the monitored event, the event handler of the non-event source component triggered by the same event is discarded; In the document object model tree, locate the document object model node corresponding to the event source component, and trigger a simulated web page event for describing the event on the located document object model node; By locating the document object model node, the simulated web page event is triggered in each document object model node in the document object model tree.

8. The method according to claim 1, characterized in that The method further comprises: When the custom component detects a node update event, Transmitting the node update event to the logic layer; In the logic layer, the data of the document object model node targeted by the node update event is modified accordingly.

9. The method according to claim 8, characterized in that When the custom component detects a node update event, transmitting the node update event to the logic layer includes: When the custom component detects a child node list update event, The multiple calls of the custom component to the data transmission function are combined into a unified call, and the sub-node list update event is transmitted to each document object model node corresponding to the custom component in the logic layer through the unified call of the data transmission function.

10. The method according to any one of claims 1 to 9, characterized in that The calling of the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree comprises: Calling the document object model interface provided by the adapter to abstract the document object in the sub-application page code into a document object model tree; The method further comprises: The browser object model interface provided by the adapter is called to virtualize the window object in the sub-application page code into a browser object; the browser object provides a browser operating environment for the sub-application page code.

11. The method according to claim 10, characterized in that Before the document object model interface provided by the calling adapter is abstracted into a document object model tree from the document object in the sub-application page code, the method further includes: The window object and the document object corresponding to the sub-application page are stored in the page instance corresponding to the sub-application page; the page instances of different sub-application pages are not interconnected; When the sub-application page is loaded, the function wrapping the business code of the sub-application page is passed into the page instance to obtain the window object and document object corresponding to the sub-application page.

12. A sub-application page processing method, the method comprising: Get the sub-application page code; The sub-application page code is a sub-application page code released after the sub-application page code is developed and debugged by the sub-application page processing method according to any one of claims 1 to 11; the sub-application is a lightweight application running in a native parent application; Calling the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; The adapter is installed in the logic layer of the sub-application; According to the custom components in the adapter, the document object model tree is mapped to a component tree, and the custom components in the component tree are rendered in the view layer of the sub-application to obtain a sub-application page.

13. A sub-application page processing device, characterized in that: Applied to a terminal, the device comprises: A source code acquisition module is used to publish the adapter and the code conversion plug-in in the server; download the code conversion plug-in, configure the code conversion plug-in in the configuration directory of the sub-application developer tool, and obtain the webpage source code from the sub-application entrance through the sub-application developer tool; A compiling and converting module is used to obtain and call the code conversion plug-in from the configuration directory, and compile the webpage source code into the sub-application page code according to the configured code conversion plug-in. The sub-application developer tool provides the sub-application with a parent application environment in the development stage, and the sub-application is run in the sub-application developer tool through the compiled sub-application page code; the sub-application page code conforms to the page code structure of the sub-application and retains the characteristics of the webpage code; The abstract simulation module is used to call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; the adapter is installed in the logic layer of the sub-application, the adapter data package is downloaded from the server in advance, and the adapter data package is installed and constructed into the sub-application directory corresponding to the sub-application developer tool; The rendering module is used to map the document object model tree to a component tree according to the custom components in the adapter. After detecting the trigger operation on the rendering entry in the sub-application developer tool, the custom components in the component tree are rendered in the view layer of the sub-application to obtain the sub-application page. The adapter provides a browser environment for the sub-application web page code through the provided document object model interface and browser object model interface, so that the interface calls related to the browser are implemented in the sub-application. The sub-application page is rendered in the view area of ​​the sub-application developer tool. The sub-application developer tool also includes a code editing and debugging area. According to the rendered sub-application page, the sub-application page code is edited and debugged in the code editing and debugging area.

14. A sub-application page processing device, the device comprising: Acquisition module, used to obtain the sub-application page code; The sub-application page code is a sub-application page code released by the sub-application page processing device according to claim 13 after the sub-application page code is developed and debugged; the sub-application is a lightweight application running in the native parent application; An abstract module, used to call the document object model interface provided by the adapter to abstract the sub-application page code into a document object model tree; The adapter is installed in the logic layer of the sub-application; The rendering module is used to map the document object model tree into a component tree according to the custom components in the adapter, and render the custom components in the component tree in the view layer of the sub-application to obtain the sub-application page.

15. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 12 are implemented.

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

Images