Methods, apparatus, devices, and media for rendering web application pages based on native applications.

Abstract

This application relates to a method, apparatus, device, and storage medium for rendering web application pages based on native applications. The method includes: in response to a page access operation of a native application, loading web application page data through a Flutter container of the native application to obtain a virtual DOM tree; the virtual DOM tree is used to indicate a plurality of web page elements and attributes of the web page elements in the web application page data; converting the virtual DOM tree into a Flutter rendering tree through the Flutter container; the Flutter rendering tree is used to indicate rendering object nodes corresponding to the web page elements and attributes of the rendering object nodes; rendering the Flutter rendering tree through the Flutter container to display the rendered web application page. This application embodiment uses a Flutter container of the native application to convert web application page data into a Flutter rendering tree for rendering. Since the Flutter container has its own Flutter rendering engine, it does not rely on the browser's rendering engine, thus improving the rendering efficiency of web application pages.

Description

Technical Field

[0001] This application relates to the field of computer application technology, and in particular to a method, apparatus, electronic device, and storage medium for rendering web application pages based on native applications. Background Technology

[0002] With the development of mobile terminal technologies such as smartphones and tablets, native applications have experienced unprecedented growth because they can run directly on mobile devices. Among related technologies, displaying web application pages within a native application requires either opening a browser or embedding a browser within the native application.

[0003] However, because native applications rely on browsers, and browser installation packages are large, the rendering efficiency of web application pages in native applications is low. Summary of the Invention

[0004] Therefore, the purpose of this application is to provide a method, apparatus, electronic device and storage medium for rendering web application pages based on native applications, which can improve the rendering efficiency of web application pages.

[0005] According to a first aspect of the embodiments of this application, a method for rendering web application pages based on native applications is provided, comprising the following steps:

[0006] In response to page access operations in the native application, web application page data is loaded from the Flutter container of the native application to obtain a virtual DOM tree; the virtual DOM tree is used to indicate several web page elements and their attributes in the web application page data.

[0007] The Flutter container transforms the virtual DOM tree into a Flutter rendering tree; the Flutter rendering tree is used to indicate the rendering object node corresponding to the web page element and the attributes of the rendering object node.

[0008] The Flutter rendering tree is rendered using a Flutter container, and the rendered web application page is displayed.

[0009] According to a second aspect of the embodiments of this application, a web application page rendering apparatus based on native applications is provided, comprising:

[0010] The page data loading module is used to respond to page access operations of the native application. It loads web application page data from the native application's Flutter container and obtains a virtual DOM tree. The virtual DOM tree is used to indicate several web page elements and their attributes in the web application page data.

[0011] The render tree acquisition module is used to convert the virtual DOM tree into a Flutter render tree through the Flutter container; the Flutter render tree is used to indicate the render object node corresponding to the web page element and the properties of the render object node;

[0012] The page display module is used to render the Flutter render tree through the Flutter container and display the rendered web application page.

[0013] According to a third aspect of the embodiments of this application, an electronic device is provided, comprising: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and executed as described in any of the preceding embodiments of the web application page rendering method based on native applications.

[0014] According to a fourth aspect of the embodiments of this application, a computer-readable storage medium is provided, on which a computer program is stored, which, when executed by a processor, implements the web application page rendering method based on native applications as described in any of the preceding claims.

[0015] This embodiment of the application, in response to a page access operation of a native application, loads web application page data into the native application's Flutter container to obtain a virtual DOM tree. The virtual DOM tree indicates several web page elements and their attributes within the web application page data. The Flutter container then transforms the virtual DOM tree into a Flutter rendering tree. This Flutter rendering tree indicates the rendering object nodes corresponding to the web page elements and their attributes. Finally, the Flutter container renders the Flutter rendering tree, displaying the rendered web application page. This embodiment of the application, by using the native application's Flutter container to transform web application page data into a Flutter rendering tree for rendering, improves the rendering efficiency of web application pages because the Flutter container has its own Flutter rendering engine, eliminating the need to rely on the browser's rendering engine.

[0016] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application.

[0017] To better understand and implement this invention, the following detailed description is provided in conjunction with the accompanying drawings. Attached Figure Description

[0018] Figure 1 A flowchart illustrating a web application page rendering method based on native applications provided in one embodiment of this application;

[0019] Figure 2A structural block diagram of a web application page rendering apparatus based on native applications provided in one embodiment of this application;

[0020] Figure 3 This is a schematic block diagram of the structure of an electronic device provided in one embodiment of this application. Detailed Implementation

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

[0022] It should be understood that the described embodiments are merely some, not all, of the embodiments in this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.

[0023] The terminology used in the embodiments of this application is for the purpose of describing particular embodiments only and is not intended to limit the embodiments of this application. The singular forms “a,” “the,” and “the” used in the embodiments of this application and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any or all possible combinations of one or more of the associated listed items.

[0024] In the following description, when referring to the accompanying drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims. In the description of this application, it should be understood that the terms "first," "second," "third," etc., are used only to distinguish similar objects and are not necessarily used to describe a specific order or sequence, nor should they be construed as indicating or implying relative importance. Those skilled in the art can understand the specific meaning of the above terms in this application according to the specific circumstances.

[0025] Furthermore, in the description of this application, unless otherwise stated, "multiple" means two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0026] To better understand the technical solution of this application, we will first briefly introduce some technologies related to web application page rendering.

[0027] Displaying web application pages within a native application requires either opening a browser or embedding a browser within the native application. Because the native application needs to communicate with the browser, this communication is triggered every time a web application page is opened or switched. Furthermore, the browser installation package embedded in the native application is large, consuming significant memory and resulting in low rendering efficiency for web application pages within the native application.

[0028] Example 1

[0029] Please see Figure 1 This is a flowchart illustrating a web application page rendering method based on native applications provided in one embodiment of this application. The web application page rendering method based on native applications provided in this embodiment includes the following steps:

[0030] S10: In response to page access operations in the native application, load web application page data through the native application's Flutter container to obtain the virtual DOM tree.

[0031] A virtual DOM tree is used to indicate several web page elements and their attributes in web application page data.

[0032] Native applications refer to applications that run directly on the client side, which can be a smart terminal device such as a mobile phone, computer, or tablet.

[0033] Page access can be performed by the user entering the page access address in the native application, or by the user clicking the native application icon to open the native application, and then performing the page access operation in the native application by clicking, swiping icons or controls.

[0034] Flutter is an open-source, cross-platform UI framework from Google that helps developers efficiently build beautiful multi-platform applications using a single codebase, supporting mobile, web, desktop, and embedded platforms. The Flutter container refers to the JavaScript (JS) runtime environment used to provide web application pages within a native application.

[0035] Web application page data is in HTML files. An HTML file includes several web page elements and styles for each element. These elements have parent-child and sibling relationships. A parent-child relationship means that other web page elements are nested within a single `<body>` tag; the nested element is the "child," and the outer element is the "parent." A sibling relationship refers to multiple side-by-side web page elements within a single `<body>` tag; the relationship between these side-by-side elements is called a sibling relationship.

[0036] The Virtual DOM tree, or Virtual Document Model tree, uses JavaScript objects to describe several web page elements and their attributes within the web application's page data. By using the Virtual DOM tree, changes in the web application's page data are reflected in the Virtual DOM tree. When the Virtual DOM tree changes, the Flutter container dynamically transforms it into the Flutter rendering tree in real time, enabling dynamic updates to the web application page. Specifically, changes in web application page data can occur when a user triggers controls or buttons on the web application page, such as clicking the document upload control. Using the Virtual DOM tree, instead of directly manipulating the Flutter rendering tree, changes to the web application's page data are stored in a JavaScript object within the Virtual DOM tree. The Flutter rendering tree is then updated based on this JavaScript object, reducing redraws and reflows during the rendering process, increasing the reusability of the Flutter rendering tree, and thus improving the rendering efficiency of the web application page.

[0037] S20: Transform the virtual DOM tree into a Flutter rendering tree using a Flutter container; the Flutter rendering tree is used to indicate the rendering object node corresponding to the web page element and the attributes of the rendering object node.

[0038] The Flutter container comprises a Widget tree, an Element tree, and a Flutter Render Object tree. The Widget tree stores the rendered content. The Element tree serves as an intermediary between the Widget tree and the actual rendered objects, describing the corresponding Element properties. The Flutter Render Object tree handles the layout and drawing of the web application page, handling the actual rendering and storing information such as the size and layout of web page elements. Specifically, when a native application starts, the Flutter container iterates through and creates all Widgets to form the Widget tree. Simultaneously, corresponding to the Widget tree, it creates each Element object by calling the `createElement()` method on the Widget, forming the Element tree. Finally, it calls the `createRenderObject()` method of the Element to create each rendered object node, forming a Flutter Render Object tree.

[0039] In this embodiment, after obtaining the Virtual Document Object Model (VDOM) tree, the VDOM tree is converted into a Flutter rendering tree. The Flutter rendering tree includes several rendering object nodes and attributes for each rendering object node. A rendering object node refers to the node corresponding to a webpage element that needs to be rendered on the web application page, and the attributes of the rendering object node refer to the position, size, and color of the webpage element that needs to be rendered on the web application page.

[0040] S30: Render the Flutter render tree using the Flutter container and display the rendered web application page.

[0041] In this embodiment, the Flutter container calls the Flutter rendering engine to render the Flutter rendering tree and display the rendered web application page.

[0042] By applying the embodiments of this application, in response to a page access operation of a native application, web application page data is loaded into the Flutter container of the native application to obtain a virtual DOM tree. The virtual DOM tree is used to indicate several web page elements and their attributes in the web application page data. The Flutter container transforms the virtual DOM tree into a Flutter rendering tree. The Flutter rendering tree is used to indicate the rendering object nodes corresponding to the web page elements and their attributes. The Flutter container renders the Flutter rendering tree to display the rendered web application page. This embodiment of the application uses the Flutter container of the native application to transform web application page data into a Flutter rendering tree for rendering. Since the Flutter container has its own Flutter rendering engine, it does not rely on the browser's rendering engine, thus improving the rendering efficiency of the web application page.

[0043] In an optional embodiment, before step S10, steps S101 to S102 are included, as follows:

[0044] S101: Building a Flutter container;

[0045] S102: Embed the Flutter container within the native application.

[0046] In this embodiment, the Flutter container can be a Flutter activity. By embedding the Flutter container within the native application, the Flutter container does not need to be created when the native application is launched; it can be directly invoked, thus improving the rendering efficiency of subsequent web pages.

[0047] In an optional embodiment, step S10 includes steps S11 to S13, as follows:

[0048] S11: In response to page access operations of the native application, the Flutter container of the native application requests web application page data from the corresponding server according to the page access address preset by the page.

[0049] S12: The native application's Flutter container receives web application page data;

[0050] S13: The native application's Flutter container loads web application page data and obtains the virtual DOM tree.

[0051] In this embodiment, the page access address is bound to the Flutter container. Based on the page access address, the Flutter container can request web application page data from the corresponding server. By using a preset page access address, web application page data can be obtained automatically and quickly.

[0052] In an optional embodiment, step S10 includes step S14, which is as follows:

[0053] S14: In response to page access operations in the native application, load pre-stored web application page data through the native application's Flutter container to obtain the virtual DOM tree.

[0054] In this embodiment, web application page data can be pre-stored within the native application, and the Flutter container can directly load the web application page data, thereby improving the rendering efficiency of the web application page.

[0055] In an optional embodiment, the web application page data includes several web page elements and the attributes of each web page element. Step S10 includes steps S15 to S17, as follows:

[0056] S15: In response to page access operations of the native application, the native application's Flutter container traverses several web page elements and generates several virtual DOM nodes.

[0057] S16: The native application's Flutter container obtains the attributes of each virtual DOM node based on the attributes of each web page element;

[0058] S17: Obtain the virtual DOM tree based on several virtual DOM nodes and the attributes of each virtual DOM node.

[0059] In this system, a webpage element corresponds to a virtual DOM node, and the attributes of a webpage element correspond to the attributes of a virtual DOM node. The attributes of a webpage element are used to describe its size, position, color, and other properties when displayed on the page.

[0060] In this embodiment, the virtual DOM tree includes multiple nodes, forming a tree-like data structure. Specifically, the tree-like data structure includes a root virtual DOM node and several child virtual DOM nodes from top to bottom. The Flutter container assigns values ​​to the attribute names and attributes of each virtual DOM node in the virtual DOM tree based on the web page elements and their attributes, thereby automatically and quickly obtaining the virtual DOM tree.

[0061] In an optional embodiment, the virtual DOM tree includes virtual DOM nodes for indicating a plurality of web page elements and attributes of the virtual DOM nodes for indicating attributes of a plurality of web page elements; step S20 includes steps S21 to S22, specifically as follows:

[0062] S21: Traverse each virtual DOM node of the virtual DOM tree through the Flutter container and convert each virtual DOM node into a rendering object node of the Flutter rendering tree;

[0063] S22: Convert the properties of each virtual DOM node into properties of the rendering object node to obtain the Flutter rendering tree.

[0064] In this embodiment, the Flutter rendering tree includes multiple rendering object nodes, which form a tree-like data structure. Specifically, the tree-like data structure includes a root rendering object node and several child rendering object nodes from top to bottom. The Flutter container assigns values ​​to the attribute names and attributes of each Flutter rendering object node in the Flutter rendering tree based on the virtual DOM nodes and their attributes in the virtual DOM tree, thereby automatically and quickly obtaining the Flutter rendering tree.

[0065] Example 2

[0066] The following are embodiments of the apparatus of this application, which can be used to execute the method described in Embodiment 1 of this application. For details not disclosed in the apparatus embodiments of this application, please refer to the method described in Embodiment 1 of this application.

[0067] Please see Figure 2 This illustration shows a structural diagram of a web application page rendering device based on native applications provided in an embodiment of this application. The web application page rendering device 4 based on native applications provided in this embodiment includes:

[0068] The page data loading module 41 is used to respond to page access operations of the native application, load web application page data through the native application's Flutter container, and obtain a virtual DOM tree; the virtual DOM tree is used to indicate several web page elements and attributes of several web page elements in the web application page data.

[0069] The rendering tree acquisition module 42 is used to convert the virtual DOM tree into a Flutter rendering tree through the Flutter container; the Flutter rendering tree is used to indicate the rendering object node corresponding to the web page element and the attributes of the rendering object node;

[0070] Page display module 43 is used to render the Flutter rendering tree through the Flutter container and display the rendered web application page.

[0071] By applying the embodiments of this application, in response to a page access operation of a native application, web application page data is loaded through the native application's Flutter container to obtain a virtual DOM tree. The virtual DOM tree indicates several web page elements and their attributes within the web application page data. The Flutter container then transforms the virtual DOM tree into a Flutter rendering tree. The Flutter rendering tree indicates the rendering object nodes corresponding to the web page elements and their attributes. Finally, the Flutter container renders the Flutter rendering tree, displaying the rendered web application page. This embodiment of the application uses the native application's Flutter container to transform web application page data into a Flutter rendering tree for rendering. Since the Flutter container has its own Flutter rendering engine, it does not rely on the browser's rendering engine, thus improving the rendering efficiency of the web application page.

[0072] Optional, the page data loading module includes:

[0073] The page data request unit is used to respond to page access operations of the native application. Based on the page access address preset by the page, the Flutter container of the native application requests web application page data from the corresponding server.

[0074] The page data receiving unit is used by the Flutter container of the native application to receive web application page data;

[0075] The page data loading unit is used by the Flutter container of the native application to load web application page data and obtain the virtual DOM tree.

[0076] Optional, the page data loading module includes:

[0077] The page data loading unit is used to respond to page access operations of the native application. The native application's Flutter container loads pre-stored web application page data and obtains the virtual DOM tree.

[0078] Optional, the page data loading module includes:

[0079] The node generation unit is used to respond to page access operations of the native application. It traverses several web page elements within the Flutter container of the native application and generates several virtual DOM nodes.

[0080] The node attribute acquisition unit is used by the Flutter container of native applications to obtain the attributes of each virtual DOM node based on the attributes of each web page element.

[0081] The Virtual DOM Tree Acquisition Unit is used to obtain the virtual DOM tree based on several virtual DOM nodes and the attributes of each virtual DOM node.

[0082] Optional, the render tree acquisition module includes:

[0083] The virtual DOM node transformation unit is used to traverse each virtual DOM node in the virtual DOM tree through the Flutter container and transform each virtual DOM node into a rendering object node in the Flutter rendering tree; virtual DOM nodes are used to indicate web page elements;

[0084] The Flutter render tree acquisition unit is used to convert the properties of each virtual DOM node into the properties of the render object node, thereby obtaining the Flutter render tree.

[0085] Example 3

[0086] The following are embodiments of the device described in this application, which can be used to execute the method described in Embodiment 1 of this application. For details not disclosed in the embodiments of the device described in this application, please refer to the method described in Embodiment 1 of this application.

[0087] Please see Figure 3 This application also provides an electronic device 300, which may specifically be a computer, a mobile phone, a tablet computer, etc. In an exemplary embodiment of this application, the electronic device 300 is a mobile phone, which may include: at least one processor 301, at least one memory 302, at least one display, at least one network interface 303, a user interface 304, and at least one communication bus 305.

[0088] The user interface 304 is primarily used to provide an input interface for the user and to acquire user input data. Optionally, the user interface may also include a standard wired interface or a wireless interface.

[0089] The network interface 303 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface).

[0090] The communication bus 305 is used to enable communication between these components.

[0091] The processor 301 may include one or more processing cores. The processor connects to various parts of the electronic device using various interfaces and lines, and performs various functions and processes data by running or executing instructions, programs, code sets, or instruction sets stored in memory, and by calling data stored in memory. Optionally, the processor may be implemented using at least one hardware form of Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), or Programmable Logic Array (PLA). The processor may integrate one or a combination of several of the following: Central Processing Unit (CPU), Graphics Processing Unit (GPU), and modem. The CPU primarily handles the operating system, user interface, and applications; the GPU is responsible for rendering and drawing the content required for display; and the modem handles wireless communication. It is understood that the modem may also be implemented as a separate chip without being integrated into the processor.

[0092] The memory 302 may include random access memory (RAM) or read-only memory. Optionally, the memory may include a non-transitory computer-readable storage medium. The memory can be used to store instructions, programs, code, code sets, or instruction sets. The memory may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as touch function, sound playback function, image playback function, etc.), instructions for implementing the above-described method embodiments, etc.; the data storage area may store data involved in the above-described method embodiments, etc. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor. As a computer storage medium, the memory may include an operating system, a network communication module, a user interface module, and operating applications.

[0093] The processor can be used to call the application stored in memory for rendering web application pages based on native applications, and specifically execute the method steps of Embodiment 1 shown above. For the specific execution process, please refer to the detailed description shown in Embodiment 1, which will not be repeated here.

[0094] Example 4

[0095] This application also provides a computer-readable storage medium storing a computer program thereon, the instructions of which are adapted to be loaded by a processor and executed by the method steps of Embodiment 1 shown above. The specific execution process can be found in the detailed description of the embodiments, and will not be repeated here. The device containing the storage medium can be an electronic device such as a personal computer, laptop computer, smartphone, or tablet computer.

[0096] For the device embodiments, since they basically correspond to the method embodiments, the relevant parts can be referred to in the description of the method embodiments. The device embodiments described above are merely illustrative, wherein the components described as separate parts may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this application according to actual needs. Those skilled in the art can understand and implement this without creative effort.

[0097] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0098] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1The computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function selected in one or more boxes.

[0099] These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable apparatus for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function selected in one or more boxes.

[0100] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0101] Memory may include non-persistent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0102] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0103] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0104] The above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

Claims

1. A method for rendering web application pages based on native applications, characterized in that, Includes the following steps: In response to a page access operation of a native application, web application page data is loaded through the Flutter container of the native application to obtain a virtual DOM tree; the virtual DOM tree is used to indicate several web page elements and several attributes of the web page elements in the web application page data; The virtual DOM tree is transformed into a Flutter rendering tree through the Flutter container; the Flutter rendering tree is used to indicate the rendering object node corresponding to the web page element and the attributes of the rendering object node; The Flutter rendering tree is rendered using the Flutter container, and the rendered web application page is displayed. The virtual DOM tree includes virtual DOM nodes for indicating the plurality of web page elements and attributes of the virtual DOM nodes for indicating the attributes of the plurality of web page elements. The step of converting the virtual DOM tree into a Flutter rendering tree using the Flutter container includes: The Flutter container traverses each virtual DOM node of the virtual DOM tree, transforming each virtual DOM node into a rendering object node of the Flutter rendering tree; The attributes of each virtual DOM node are converted into the attributes of the rendering object node to obtain the Flutter rendering tree.

2. The web application page rendering method based on native applications according to claim 1, characterized in that: The step of loading web application page data through the Flutter container of the native application to obtain a virtual DOM tree in response to a page access operation of the native application includes: In response to a page access operation of the native application, the Flutter container of the native application requests web application page data from the corresponding server according to the preset page access address of the page. The Flutter container of the native application receives the web application page data; The native application's Flutter container loads the web application's page data to obtain a virtual DOM tree.

3. The web application page rendering method based on native applications according to claim 1, characterized in that: The step of loading web application page data through the Flutter container of the native application to obtain a virtual DOM tree in response to a page access operation of the native application includes: In response to a page access operation of the native application, pre-stored web application page data is loaded through the Flutter container of the native application to obtain a virtual DOM tree.

4. The web application page rendering method based on native applications according to claim 1, characterized in that: The web application page data includes several web page elements and the attributes of each web page element; The step of loading web application page data through the Flutter container of the native application to obtain a virtual DOM tree in response to a page access operation of the native application includes: In response to a page access operation of the native application, the Flutter container of the native application traverses several web page elements and generates several virtual DOM nodes. The native application's Flutter container obtains the attributes of each virtual DOM node based on the attributes of each web page element; A virtual DOM tree is obtained based on the aforementioned virtual DOM nodes and the attributes of each virtual DOM node.

5. The web application page rendering method based on native applications according to any one of claims 1 to 4, characterized in that: Before the step of loading web application page data through the Flutter container of the native application to obtain the virtual DOM tree in response to a page access operation of the native application, the method further includes: Build a Flutter container; The Flutter container is embedded within the native application.

6. A web application page rendering device based on native applications, characterized in that, include: The page data loading module is used to respond to page access operations of the native application by loading web application page data through the Flutter container of the native application to obtain a virtual DOM tree; the virtual DOM tree is used to indicate several web page elements and several attributes of the web page elements in the web application page data; the virtual DOM tree includes virtual DOM nodes for indicating the several web page elements and attributes of virtual DOM nodes for indicating the attributes of the several web page elements. A rendering tree acquisition module is used to convert the virtual DOM tree into a Flutter rendering tree through the Flutter container; the Flutter rendering tree is used to indicate the rendering object node corresponding to the web page element and the attributes of the rendering object node; The page display module is used to render the Flutter rendering tree through the Flutter container and display the rendered web application page; The rendering tree acquisition module includes: The virtual DOM node conversion unit is used to traverse each virtual DOM node of the virtual DOM tree through the Flutter container and convert each virtual DOM node into a rendering object node of the Flutter rendering tree; The Flutter rendering tree acquisition unit is used to convert the attributes of each virtual DOM node into the attributes of the rendering object node, thereby obtaining the Flutter rendering tree.

7. An electronic device, comprising: A processor, a memory, and a computer program stored in the memory and executable on the processor, characterized in that the processor, when executing the computer program, implements the steps of the method as claimed in any one of claims 1 to 5.

8. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method as described in any one of claims 1 to 5.

Images