Interface rendering method, device, storage medium and electronic device

Abstract

The present application discloses an interface rendering method, device, storage medium and electronic device, which first obtains a virtual document object model tree to be rendered, then converts the virtual document object model tree into a rendering tree of Flutter, and creates a layout view tree corresponding to a preset layout library according to the rendering tree, and obtains the layout parameters of the corresponding layout view tree through the preset layout library, and finally draws the rendering tree through Flutter according to the layout parameters to obtain the corresponding interface of the virtual document object model tree. In this way, the present application introduces a third-party layout library, so that Flutter can complete the rendering of the virtual document object model tree, increases Flutter's rendering capabilities, and expands its scope of use, thereby supporting the JS application ecosystem.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to an interface rendering method, device, storage medium and electronic device. Background Art

[0002] Flutter is an open-source cross-platform UI framework from Google. It has its own rendering engine. After the interface is written using code that complies with the Flutter programming specification, it can be rendered using its own rendering engine. The feature of Flutter's own rendering engine gives it cross-platform capabilities. As long as you write one code, you can build Android applications, iOS applications, and web applications, and achieve the same user experience as native applications. However, as a new product, Flutter has limited support for existing technologies, which limits its scope of use. Summary of the invention

[0003] The present application provides a positioning tag and navigation method, which can enhance the rendering capability of Flutter and expand the scope of use of Flutter.

[0004] In a first aspect, the present application provides an interface rendering method, comprising:

[0005] Get the virtual document object model tree to be rendered;

[0006] Convert the virtual document object model tree into a rendering tree of Flutter;

[0007] Creating a layout view tree corresponding to a preset layout library according to the rendering tree, and obtaining layout parameters corresponding to the layout view tree through the preset layout library;

[0008] According to the layout parameters, the rendering tree is drawn by Flutter to obtain a corresponding interface of the virtual document object model tree.

[0009] In a second aspect, the present application also provides an interface rendering device, including:

[0010] An acquisition module, used to acquire a virtual document object model tree to be rendered;

[0011] A conversion module, used to convert the virtual document object model tree into a rendering tree of Flutter;

[0012] A layout module, used to create a layout view tree corresponding to a preset layout library according to the rendering tree, and obtain layout parameters corresponding to the layout view tree through the preset layout library;

[0013] A drawing module is used to draw the rendering tree through Flutter according to the layout parameters to obtain a corresponding interface of the virtual document object model tree.

[0014] In a third aspect, the present application further provides a storage medium on which a computer program is stored, and when the computer program is loaded by an electronic device, any interface rendering method provided in the present application is executed.

[0015] The fourth invention, the present application also provides an electronic device, including a processor and a memory, the memory stores a computer program, and the processor executes any interface rendering method provided in the present application by loading the computer program.

[0016] In this application, the virtual document object model tree to be rendered is first obtained, and then the virtual document object model tree is converted into a rendering tree of Flutter, and a layout view tree corresponding to the preset layout library is created according to the rendering tree, and the layout parameters of the corresponding layout view tree are obtained through the preset layout library, and finally, according to the layout parameters, the rendering tree is drawn by Flutter to obtain the corresponding interface of the virtual document object model tree. In this way, this application introduces a third-party layout library, so that Flutter can complete the rendering of the virtual document object model tree, increase Flutter's rendering capabilities, and expand its scope of use, thereby supporting the JS application ecosystem. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0018] Figure 1 It is a flow chart of the interface rendering method provided in an embodiment of the present application.

[0019] Figure 2 It is a structural diagram of the virtual document object model tree in an embodiment of the present application.

[0020] Figure 3 This is a schematic diagram of Flutter drawing the rendering tree.

[0021] Figure 4 It is a schematic diagram of converting a virtual document object model tree into a rendering tree in an embodiment of the present application.

[0022] Figure 5 This is another flowchart of the interface rendering method provided in an embodiment of the present application.

[0023] Figure 6 It is a structural diagram of the interface rendering device provided in an embodiment of the present application.

[0024] Figure 7 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0025] It should be noted that the terms "first", "second" and "third" in this application are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or modules is not limited to the listed steps or modules, but some embodiments also include steps or modules that are not listed, or some embodiments also include other steps or modules inherent to these processes, methods, products or devices.

[0026] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0027] The embodiment of the present application provides an interface rendering method, an interface rendering device, a storage medium and an electronic device, wherein the execution subject of the interface rendering method can be the interface rendering device provided in the embodiment of the present application, or an electronic device integrated with the interface rendering device, wherein the interface rendering device can be implemented in hardware or software. The electronic device can be a smart phone, a tablet computer, a PDA, a laptop computer, or a desktop computer, etc., which is equipped with a processor and has data processing capabilities.

[0028] Please refer to Figure 1 , Figure 1 A flow chart of the interface rendering method provided in the embodiment of the present application is shown as follows: Figure 1 As shown, the process of the interface rendering method provided in the embodiment of the present application can be as follows:

[0029] In 110 , a virtual document object model tree to be rendered is obtained.

[0030] It should be noted that the real document object model tree is a standard interface specification established by the W3C (World Wide Web Consortium), and is a standard API for processing HTML (Hyper Text Markup Language) and XML (eXtensible Markup Language) files. The real document object model tree treats the document as a tree structure, and each node of the real document object model tree represents an HTML tag or a text item within a tag. The tree structure of the real document object model tree accurately describes the interrelationships between tags in an HTML document, and the processing of HTML documents can be achieved by operating the real document object model tree. The JavaScript (hereinafter referred to as JS) engine can provide a real document object model tree exposure interface for JS to call, to facilitate JS to operate the document object model tree. However, due to execution cost considerations, this application does not directly operate on the real document object model tree, but on the virtual document object model tree, so as to avoid a large amount of unnecessary calculations when directly operating the real document model object tree. Among them, the virtual document object model tree uses JS objects to simulate the nodes of the real document object model tree. For example, please refer to Figure 2 , multiple JS objects constitute a virtual document object model tree.

[0031] In an embodiment of the present application, a rendering instruction may be obtained from a JS engine, the rendering instruction carrying a virtual document object model tree to be rendered. For example, the JS engine may be a JSV8 engine designed to improve JS code execution performance.

[0032] In 120 , the virtual document object model tree is converted into a rendering tree of Flutter.

[0033] Flutter is an open source cross-platform UI framework developed by Google. It has its own rendering engine. After the interface is written using code that complies with the Flutter programming specifications, it can be rendered using its own rendering engine.

[0034] It should be noted that please refer to Figure 3 , Flutter's layout system is based on the render tree, and its rendering process is divided into two stages. In the first stage, Flutter recursively passes the boundary constraints to each node in the render tree from top to bottom. It provides a way for the parent node to adjust / control the size of the child node and update these constraints as needed. In other words, this is the stage responsible for propagating constraint information so that each node knows its maximum / minimum value.

[0035] After the bounds constraints are passed, the second phase begins. This time it is bottom-up, with each child node calculating its final size under the bounds constraints and passing the result back to the parent node. The parent collects the sizes of all children and then uses this information to correctly position each child in its own layout system. This phase is responsible for determining the layout parameters of each node, such as size and position.

[0036] Correspondingly, in an embodiment of the present application, after the virtual document object model tree to be rendered is obtained, the virtual document object model tree is converted into a rendering tree of Flutter, so as to be rendered using Flutter.

[0037] In 130 , a layout view tree corresponding to the preset layout library is created according to the rendering tree, and layout parameters of the corresponding layout view tree are obtained through the preset layout library.

[0038] It should be noted that the present application is to introduce a third-party layout library to expand the layout capabilities of Flutter, thereby expanding the scope of use of Flutter. There is no specific restriction on which layout library is used as the preset layout library, and it can be selected by those skilled in the art according to actual needs.

[0039] In the embodiment of the present application, since it is necessary to use a preset layout library for rendering, and the render tree suitable for Flutter cannot directly use the preset layout library to calculate layout parameters, therefore, in the present application, it is necessary to first create a layout view tree corresponding to the preset layout library according to the render tree, and then calculate the layout parameters of the corresponding layout view tree through the preset layout library, and use the layout parameters of the corresponding layout view tree as the layout parameters of the render tree.

[0040] In 140 , the rendering tree is drawn by Flutter according to the aforementioned layout parameters to obtain a corresponding interface of the virtual document object model tree.

[0041] As described above, after obtaining the layout parameters of the rendering tree, the rendering tree is drawn by Flutter according to the layout parameters, so as to obtain the corresponding interface of the virtual document object model tree. At this point, the rendering of the virtual document object model tree is completed by using Flutter.

[0042] As can be seen from the above, in this application, the virtual document object model tree to be rendered is first obtained, and then the virtual document object model tree is converted into a rendering tree of Flutter, and a layout view tree corresponding to the preset layout library is created according to the rendering tree, and the layout parameters of the corresponding layout view tree are obtained through the preset layout library, and finally, according to the layout parameters, the rendering tree is drawn by Flutter to obtain the corresponding interface of the virtual document object model tree. In this way, this application introduces a third-party layout library, so that Flutter can complete the rendering of the virtual document object model tree, increase Flutter's rendering capabilities, and expand its scope of use, thereby supporting the JS application ecosystem.

[0043] Optionally, in one embodiment, converting the virtual document object model tree into a rendering tree of Flutter includes:

[0044] (1) Get the Flutter component corresponding to each JS object in the virtual document object model tree;

[0045] (2) Encapsulate each Flutter component as a rendering object corresponding to a preset layout library to obtain multiple rendering objects;

[0046] (3) Creating a rendering tree corresponding to the virtual document object model tree according to the multiple rendering objects.

[0047] As described above, in order to use Flutter to render the virtual document object model tree, it is necessary to convert the virtual document object model tree into a rendering tree suitable for Flutter. This embodiment further provides an optional conversion solution from the virtual document object model tree to the rendering tree.

[0048] It can be understood that in the embodiment of the present application, the virtual document object model tree is composed of multiple JS objects, and for each JS object, it is necessary to convert it into a corresponding Flutter component. Therefore, for each JS object in the virtual document object model tree, obtaining the Flutter component corresponding to the JS object is to obtain the Flutter component that implements the same function as the JS object. For example, if a JS object in the virtual document object model tree is to implement the text alignment function, it is necessary to obtain the Flutter component in Flutter that also implements the text alignment function.

[0049] As mentioned above, the same number of Flutter components will be obtained according to the number of JS objects in the virtual document object model tree. For example, if there are 9 JS objects in the virtual document object model tree, 9 Flutter components corresponding to the 9 JS objects will be obtained accordingly.

[0050] In addition, the present application aims to introduce a third-party preset layout library to expand the layout capabilities of Flutter. Therefore, after obtaining the Flutter component corresponding to each JS object in the virtual document model tree, the present application uses Flutter's custom layout capabilities to encapsulate each Flutter component into a custom rendering object corresponding to the preset layout library, that is, a rendering object that conforms to the specifications of the preset layout library, thereby obtaining multiple rendering objects.

[0051] As described above, after encapsulating multiple rendering objects, a rendering tree corresponding to the virtual document object model tree can be created according to the multiple rendering objects, that is, a rendering tree having the same structure as the virtual document object model tree is created according to the multiple rendering objects obtained by encapsulation.

[0052] For example, in the embodiment of the present application, the JS object includes JS components and CSS (Cascading Style Sheets) styles. For example, for the CSS style "width" that sets the width of an element, the corresponding Flutter components are "ConstrainedBox", "LimitedBox", etc.; for the CSS style "overflowauto" that sets the scrollable content of an element, the corresponding Flutter component is "SingleChildScrollView", etc.; for the JS component "text" of plain text content, the corresponding Flutter component is "text", and so on.

[0053] When the JS object includes CSS styles, the selected preset layout library needs to support the CSS layout standard. With this as a constraint, a person skilled in the art can select a suitable layout library as the preset layout library according to actual needs. For example, in the embodiment of the present application, the Yoga layout library is selected as the preset layout library. The Yoga layout library is a cross-platform layout library open sourced by Facebook that supports CSS styles and is under continuous maintenance and upgrades.

[0054] For example, assuming that the JS object includes JS components and CSS styles, and the preset layout library is the Yoga library, the encapsulated rendering object is recorded as the RY rendering object. Please refer to Figure 4 The obtained virtual document object model tree includes 9 nodes from top to bottom, namely (in order from top to bottom and from left to right): "div" container node, "text" leaf node, "stack" container node, "div" container node, "div" container node, "input" leaf node, "text" leaf node, "switch" leaf node, "image" leaf node and "text" leaf node.

[0055] The converted rendering tree also includes 9 nodes from top to bottom, namely (in order from top to bottom and from left to right): RY container node, RY "text" leaf node, RY "stack" container node, RY container node, RY container node, RY container node, RY "button" leaf node, RY "text" leaf node, RY "switch" leaf node, RY "image" leaf node and RY "text" leaf node.

[0056] Optionally, in one embodiment, creating a layout view tree corresponding to a preset layout library according to the rendering tree includes:

[0057] A layout view tree corresponding to a preset layout library is created according to multiple rendering objects.

[0058] As mentioned above, this application is to use a third-party preset layout library for rendering, but the Flutter rendering tree cannot directly use the preset layout library for rendering. It is necessary to create a layout view tree of the corresponding preset layout library according to the rendering tree.

[0059] In the embodiment of the present application, since the encapsulated rendering object conforms to the preset layout library, the present application directly creates a layout view tree corresponding to the preset layout library based on the multiple rendering objects obtained by encapsulation.

[0060] For example, when the Yoga layout library is used as the preset layout library, the Flutter component corresponding to the JS object in the virtual document object model tree is encapsulated as an RY rendering object. In addition to creating a rendering tree based on the encapsulated RY rendering object, this application also creates a layout view tree, namely, a Yoga tree, based on the encapsulated RY rendering object.

[0061] Optionally, in one embodiment, obtaining layout parameters of a corresponding layout view tree through a preset layout library includes:

[0062] (1) Obtaining layout parameters of each rendering object in the layout view tree through the preset layout library;

[0063] According to the above layout parameters, the rendering tree is drawn by Flutter to obtain the corresponding interface of the virtual document object model tree, including:

[0064] (2) According to the layout parameters of each rendering object, the Flutter component encapsulated by each rendering object is drawn by Flutter, and the multiple Flutter components obtained by drawing constitute the corresponding interface of the virtual document object model tree.

[0065] As mentioned above, when creating a rendering tree, the present application is encapsulated by a rendering object that conforms to the specifications of the preset layout library. In the present application, for each rendering object, the layout function of the rendering object is called, and the layout function calls the preset layout library to calculate the layout parameters of the rendering object and returns them to the rendering object. In this way, the layout parameters of each rendering object in the layout view tree can be obtained through the preset layout library. Afterwards, according to the layout parameters of each rendering object, the Flutter component encapsulated by each rendering object is drawn by Flutter, so that the corresponding interface of the virtual document object model tree is obtained by drawing multiple Flutter components. At this point, the rendering of the virtual document object model tree is completed.

[0066] It should be noted that when the preset layout library and Flutter use different programming specifications, it is necessary to make a cross-language call to the preset layout library through the layout function. For example, Flutter is implemented in Dart language, and the preset layout library is written in C++ language. For a rendering object, the layout function of the rendering object needs to call the preset layout library through Dart cross-language calling C++.

[0067] Optionally, in one embodiment, the interface rendering method provided by the present application further includes:

[0068] Convert the preset layout library to the programming specification so that it complies with the Flutter programming specification.

[0069] In order to reduce the performance overhead of cross-language calls, this application pre-converts the preset layout library to the programming specification to improve the rendering efficiency of Flutter.

[0070] The preset layout library is converted into a programming specification so that the preset layout library complies with the programming specification of Flutter.

[0071] For example, suppose the Yoga layout library is selected as the preset layout library. Since the Yoga layout library adopts the C++ programming specification, and Flutter adopts the Dart programming specification, Flutter needs to make cross-language calls to the Yoga layout library. To reduce the performance overhead of cross-language calls, the Yoga layout library can be rewritten in Dart language to make it conform to the Flutter programming specification.

[0072] Please refer to Figure 5 , Figure 5 Another flowchart of the interface rendering method provided in the embodiment of the present application is shown in FIG. 1 . The present application embodiment is described using the Yoga layout library as the preset layout library. Figure 5 As shown, the interface rendering method may include:

[0073] In 210 , a rendering instruction is obtained from the JSV8 engine, where the rendering instruction carries a virtual document object model tree to be rendered.

[0074] It should be noted that the real document object model tree is a standard interface specification established by W3C and a standard API for processing HTML and XML files. The real document object model tree treats the document as a tree structure, and each node of the real document object model tree represents an HTML tag or a text item within a tag. The tree structure of the real document object model tree accurately describes the interrelationships between tags in HTML documents, and the processing of HTML documents can be achieved by operating the real document object model tree. The JavaScript (hereinafter referred to as JS) engine can provide a real document object model tree exposure interface for JS to call, to facilitate JS to operate the document object model tree. However, due to execution cost considerations, this application does not directly operate on the real document object model tree, but on the virtual document object model tree, so as to avoid a large amount of unnecessary calculations when directly operating the real document model object tree. Among them, the virtual document object model tree uses JS objects to simulate the nodes of the real document object model tree. For example, please refer to Figure 2 , multiple JS objects constitute a virtual document object model tree.

[0075] In the embodiment of the present application, the JS engine sends a rendering instruction to Flutter, and the rendering instruction carries a virtual document object model tree to be rendered. Among them, the JS engine is a JSV8 engine designed to improve the JS code execution performance.

[0076] In 220 , the virtual document object model tree is converted into a rendering tree of Flutter.

[0077] Flutter is an open source cross-platform UI framework developed by Google. It has its own rendering engine. After the interface is written using code that complies with the Flutter programming specifications, it can be rendered using its own rendering engine.

[0078] It should be noted that please refer to Figure 3 , Flutter's layout system is based on the render tree, and its rendering process is divided into two stages. In the first stage, Flutter recursively passes the boundary constraints to each node in the render tree from top to bottom. It provides a way for the parent node to adjust / control the size of the child node and update these constraints as needed. In other words, this is the stage responsible for propagating constraint information so that each node knows its maximum / minimum value.

[0079] After the bounds constraints are passed, the second phase begins. This time it is bottom-up, with each child node calculating its final size under the bounds constraints and passing the result back to the parent node. The parent collects the sizes of all children and then uses this information to correctly position each child in its own layout system. This phase is responsible for determining the layout parameters of each node, including size and position.

[0080] Correspondingly, in an embodiment of the present application, after the virtual document object model tree to be rendered is obtained, the virtual document object model tree is converted into a rendering tree of Flutter, so as to be rendered using Flutter.

[0081] As described above, in order to render the virtual document object model tree using Flutter, the virtual document object model tree needs to be converted into a rendering tree suitable for Flutter.

[0082] It can be understood that in the embodiment of the present application, the virtual document object model tree is composed of multiple JS objects, and for each JS object, it is necessary to convert it into a corresponding Flutter component. Therefore, for each JS object in the virtual document object model tree, obtaining the Flutter component corresponding to the JS object is to obtain the Flutter component that implements the same function as the JS object. For example, if a JS object in the virtual document object model tree is to implement the text alignment function, it is necessary to obtain the Flutter component in Flutter that also implements the text alignment function.

[0083] As mentioned above, the same number of Flutter components will be obtained according to the number of JS objects in the virtual document object model tree. For example, if there are 9 JS objects in the virtual document object model tree, 9 Flutter components corresponding to the 9 JS objects will be obtained accordingly.

[0084] In addition, the present application aims to introduce a third-party preset layout library to expand the layout capabilities of Flutter. Therefore, after obtaining the Flutter component corresponding to each JS object in the virtual document model tree, the present application uses Flutter's custom layout capabilities to encapsulate each Flutter component into a custom rendering object corresponding to the preset layout library, that is, a rendering object that conforms to the specifications of the preset layout library, thereby obtaining multiple rendering objects.

[0085] As described above, after encapsulating multiple rendering objects, a rendering tree corresponding to the virtual document object model tree can be created according to the multiple rendering objects, that is, a rendering tree having the same structure as the virtual document object model tree is created according to the multiple rendering objects obtained by encapsulation.

[0086] For example, in the embodiment of the present application, the JS object includes JS components and CSS (Cascading Style Sheets) styles. For example, for the CSS style "width" that sets the width of an element, the corresponding Flutter components are "ConstrainedBox", "LimitedBox", etc.; for the CSS style "overflowauto" that sets the scrollable content of an element, the corresponding Flutter component is "SingleChildScrollView", etc.; for the JS component "text" of plain text content, the corresponding Flutter component is "text", and so on.

[0087] When the JS object includes CSS styles, the selected preset layout library needs to support the CSS layout standard. With this as a constraint, a person skilled in the art can select a suitable layout library as the preset layout library according to actual needs. For example, in the embodiment of the present application, the Yoga layout library is selected as the preset layout library. The Yoga layout library is a cross-platform layout library open sourced by Facebook that supports CSS styles and is under continuous maintenance and upgrades.

[0088] For example, assuming that the JS object includes JS components and CSS styles, and the preset layout library is the Yoga library, the encapsulated rendering object is recorded as the RY rendering object. Please refer to Figure 4 The obtained virtual document object model tree includes 9 nodes from top to bottom, namely (in order from top to bottom and from left to right): "div" container node, "text" leaf node, "stack" container node, "div" container node, "div" container node, "input" leaf node, "text" leaf node, "switch" leaf node, "image" leaf node and "text" leaf node.

[0089] The converted rendering tree also includes 9 nodes from top to bottom, namely (in order from top to bottom and from left to right): RY container node, RY "text" leaf node, RY "stack" container node, RY container node, RY container node, RY container node, RY "button" leaf node, RY "text" leaf node, RY "switch" leaf node, RY "image" leaf node and RY "text" leaf node.

[0090] In 230 , a Yoga tree corresponding to the Yoga layout library is created according to the rendering tree.

[0091] It should be noted that this application aims to introduce a third-party layout library to expand the layout capabilities of Flutter, thereby expanding the scope of use of Flutter. In this application, the Yoga layout library is selected to expand the layout capabilities of Flutter. The Yoga layout library is a cross-platform layout library open sourced by Facebook that supports CSS styles and is under continuous maintenance and upgrades.

[0092] In the embodiment of the present application, since the Yoga layout library needs to be used for rendering, and the rendering tree suitable for Flutter cannot directly use the Yoga layout library to calculate layout parameters, therefore, in the present application, it is necessary to first create a Yoga tree corresponding to the Yoga layout library according to the rendering tree.

[0093] In 240, layout parameters of the Yoga tree are calculated by the Yoga layout library.

[0094] In 250, the layout parameters calculated by the Yoga layout library are returned to Flutter.

[0095] Among them, the layout parameters of the corresponding Yoga tree are calculated through the Yoga layout library, and the layout parameters of the corresponding layout view tree are used as the layout parameters of the rendering tree and returned to Flutter.

[0096] In 260, according to the layout parameters returned by the Yoga layout library, the rendering tree is drawn by Flutter to obtain a corresponding interface of the virtual document object model tree.

[0097] After obtaining the layout parameters returned by the Yoga layout library, Flutter draws the rendering tree according to the layout parameters to obtain the corresponding interface of the virtual document object model tree. At this point, Flutter is used to complete the rendering of the virtual document object model tree.

[0098] In one embodiment, an interface rendering device is also provided. Figure 6 , Figure 6 The schematic diagram of the structure of the interface rendering device 300 provided in the embodiment of the present application. The interface rendering device 300 is applied to an electronic device, and the interface rendering device includes an acquisition module 310, a conversion module 320, a layout module 330 and a drawing module 340, as follows:

[0099] An acquisition module 310 is used to acquire a virtual document object model tree to be rendered;

[0100] A conversion module 320 is used to convert the virtual document object model tree into a rendering tree of Flutter;

[0101] A layout module 330, configured to create a layout view tree corresponding to a preset layout library according to the rendering tree, and obtain layout parameters of the corresponding layout view tree through the preset layout library;

[0102] The drawing module 340 is used to draw the rendering tree through Flutter according to the aforementioned layout parameters to obtain a corresponding interface of the virtual document object model tree.

[0103] Optionally, in one embodiment, when converting the virtual document object model tree into a rendering tree of Flutter, the conversion module 320 is used to:

[0104] Get the Flutter component corresponding to each JS object in the virtual document object model tree;

[0105] Encapsulate each Flutter component as a rendering object corresponding to the preset layout library to obtain multiple rendering objects;

[0106] A rendering tree corresponding to a virtual document object model tree is created according to the plurality of rendering objects.

[0107] Optionally, in one embodiment, when creating a layout view tree corresponding to a preset layout library according to the rendering tree, the layout module 330 is used to:

[0108] A layout view tree corresponding to a preset layout library is created according to multiple rendering objects.

[0109] Optionally, in one embodiment, when obtaining layout parameters of a corresponding layout view tree through a preset layout library, the layout module 330:

[0110] Obtain layout parameters of each rendering object in the layout view tree through the preset layout library;

[0111] When the rendering tree is drawn by Flutter according to the aforementioned layout parameters to generate a corresponding interface of the virtual document object model tree, the drawing module 340 is used to:

[0112] According to the layout parameters of each rendering object, the Flutter component encapsulated by each rendering object is drawn by Flutter, and the multiple Flutter components obtained by drawing constitute the corresponding interface of the virtual document object model tree.

[0113] Optionally, in one embodiment, the JS object includes a JS component and a CSS style.

[0114] Optionally, in one embodiment, the preset layout library includes a Yoga layout library.

[0115] Optionally, in one embodiment, the interface rendering device provided by the present application further includes a specification module for converting the programming specification of the preset layout library so that the preset layout library complies with the programming specification of Flutter.

[0116] In specific implementation, the above modules can be implemented as independent entities, or can be arbitrarily combined and implemented as the same or several entities. The specific implementation of the above units can refer to the previous embodiments and will not be repeated here.

[0117] In one embodiment, an electronic device is also provided. Figure 7 , the electronic device 400 includes a processor 410 and a memory 420. The processor 410 is electrically connected to the memory 420.

[0118] The processor 410 is the control center of the electronic device 400. It uses various interfaces and lines to connect various parts of the entire electronic device, executes various functions of the electronic device 400 and processes data by running or loading computer programs stored in the memory 420 and calling data stored in the memory 420.

[0119] The memory 420 can be used to store software programs and modules. The processor 410 executes various functional applications and data processing by running the computer programs and modules stored in the memory 420. The memory 420 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, a computer program required for at least one function (such as a sound playback function, a communication playback function, etc.), etc.; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 420 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory 420 may also include a memory controller to provide the processor 410 with access to the memory 420.

[0120] In the embodiment of the present application, the processor 410 in the electronic device 400 will load instructions corresponding to the processes of one or more computer programs into the memory 420 according to the following steps, and the processor 410 will run the computer program stored in the memory 420 to implement various functions, as follows:

[0121] Get the virtual document object model tree to be rendered;

[0122] Convert the virtual document object model tree to Flutter's rendering tree;

[0123] Create a layout view tree corresponding to the preset layout library according to the rendering tree, and obtain layout parameters of the corresponding layout view tree through the preset layout library;

[0124] According to the aforementioned layout parameters, the rendering tree is drawn by Flutter to obtain the corresponding interface of the virtual document object model tree.

[0125] Optionally, in one embodiment, when converting the virtual document object model tree into a rendering tree of Flutter, the processor 410 is configured to execute:

[0126] Get the Flutter component corresponding to each JS object in the virtual document object model tree;

[0127] Encapsulate each Flutter component as a rendering object corresponding to the preset layout library to obtain multiple rendering objects;

[0128] A rendering tree corresponding to a virtual document object model tree is created according to the plurality of rendering objects.

[0129] Optionally, in one embodiment, when creating a layout view tree corresponding to a preset layout library according to the rendering tree, the processor 410 is configured to execute:

[0130] A layout view tree corresponding to a preset layout library is created according to multiple rendering objects.

[0131] Optionally, in one embodiment, when obtaining the layout parameters of the corresponding layout view tree through the preset layout library, the processor 410 is configured to execute:

[0132] Obtain layout parameters of each rendering object in the layout view tree through the preset layout library;

[0133] When the rendering tree is drawn by Flutter according to the aforementioned layout parameters to generate a corresponding interface of the virtual document object model tree, the processor 410 is used to execute:

[0134] According to the layout parameters of each rendering object, the Flutter component encapsulated by each rendering object is drawn by Flutter, and the multiple Flutter components obtained by drawing constitute the corresponding interface of the virtual document object model tree.

[0135] Optionally, in one embodiment, the JS object includes a JS component and a CSS style.

[0136] Optionally, in one embodiment, the preset layout library includes a Yoga layout library.

[0137] Optionally, in one embodiment, the processor 410 is configured to execute:

[0138] Convert the preset layout library to the programming specification so that it complies with the Flutter programming specification.

[0139] It should be noted that the electronic device 400 provided in the embodiment of the present application and the interface rendering method in the above embodiment belong to the same concept, and its specific implementation process is detailed in the above related embodiments and will not be repeated here.

[0140] The present application also provides a storage medium, wherein the storage medium stores a computer program. When the computer program is executed on an electronic device, the electronic device executes the interface rendering method in any of the above embodiments, such as:

[0141] Get the virtual document object model tree to be rendered;

[0142] Convert the virtual document object model tree to Flutter's rendering tree;

[0143] Create a layout view tree corresponding to the preset layout library according to the rendering tree, and obtain layout parameters of the corresponding layout view tree through the preset layout library;

[0144] According to the aforementioned layout parameters, the rendering tree is drawn by Flutter to obtain the corresponding interface of the virtual document object model tree.

[0145] In the embodiment of the present application, the storage medium may be a disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM), etc. It should be noted that for the interface rendering method of the embodiment of the present application, ordinary testers in the field can understand that all or part of the process of implementing the interface rendering method of the embodiment of the present application can be completed by controlling the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium, such as stored in the memory of an electronic device, and executed by at least one processor in the electronic device, and the execution process may include the process of the embodiment of the interface rendering method. Among them, the storage medium may be a disk, an optical disk, a read-only memory, a random access memory, etc.

[0146] For the interface rendering device of the embodiment of the present application, each functional module can be integrated into a processing chip, or each module can exist physically separately, or two or more modules can be integrated into one module. The above-mentioned integrated module can be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium, such as a read-only memory, a disk or an optical disk.

[0147] The above is a detailed introduction to an interface rendering method, device, storage medium and electronic device provided in the embodiments of the present application. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for technical personnel in this field, according to the ideas of the present application, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. An interface rendering method, characterized in that: include: Get the virtual document object model tree to be rendered; Get the Flutter component corresponding to each JS object in the virtual document object model tree; Encapsulate each Flutter component as a rendering object corresponding to the preset layout library to obtain multiple rendering objects; Creating a rendering tree corresponding to the virtual document object model tree according to the multiple rendering objects; Creating a layout view tree corresponding to the preset layout library according to the rendering tree, and acquiring layout parameters corresponding to the layout view tree through the preset layout library; According to the layout parameters, the rendering tree is drawn by Flutter to obtain a corresponding interface of the virtual document object model tree.

2. The interface rendering method according to claim 1, characterized in that: Creating a layout view tree corresponding to a preset layout library according to the rendering tree includes: The layout view tree corresponding to the preset layout library is created according to the multiple rendering objects.

3. The interface rendering method according to claim 2, characterized in that: Acquiring layout parameters corresponding to the layout view tree through the preset layout library includes: Acquire layout parameters of each rendering object in the layout view tree through the preset layout library; According to the layout parameters, the rendering tree is drawn by Flutter to generate a corresponding interface of the virtual document object model tree, including: According to the layout parameters of each rendering object, the Flutter component encapsulated by each rendering object is drawn by Flutter, and the multiple Flutter components obtained by drawing constitute the corresponding interface of the virtual document object model tree.

4. The interface rendering method according to any one of claims 1 to 3, characterized in that: The JS object includes JS components and CSS styles.

5. The interface rendering method according to any one of claims 1 to 3, characterized in that: The preset layout library includes a Yoga layout library.

6. The interface rendering method according to any one of claims 1 to 3, characterized in that: Also includes: The preset layout library is converted into a programming specification so that the preset layout library complies with the programming specification of Flutter.

7. An interface rendering device, characterized in that: include: An acquisition module, used to acquire a virtual document object model tree to be rendered; A conversion module, used to obtain the Flutter component corresponding to each JS object in the virtual document object model tree; Encapsulating each Flutter component as a rendering object corresponding to a preset layout library to obtain a plurality of rendering objects; and creating a rendering tree corresponding to the virtual document object model tree according to the plurality of rendering objects; A layout module, used to create a layout view tree corresponding to the preset layout library according to the rendering tree, and obtain layout parameters corresponding to the layout view tree through the preset layout library; A drawing module is used to draw the rendering tree through Flutter according to the layout parameters to obtain a corresponding interface of the virtual document object model tree.

8. A storage medium having a computer program stored thereon, characterized in that: When the computer program is loaded into an electronic device, the interface rendering method as described in any one of claims 1 to 6 is executed.

9. An electronic device comprising a processor and a memory, wherein the memory stores a computer program, characterized in that: The processor executes the interface rendering method as described in any one of claims 1-6 by loading the computer program.

Images