Page code generation method and device, electronic equipment and storage medium

Abstract

The present disclosure provides a page code generation method and device, electronic equipment and storage medium, wherein the method comprises: determining a page design draft, wherein the page design draft comprises a plurality of view controls; in response to a configuration operation on the page design draft, a target configuration page comprising a to-be-configured item is displayed, and an editing operation on the to-be-configured item is received to determine configuration information of the corresponding to-be-configured item; the configuration data corresponding to the to-be-configured item is associated with rendering data of the page design draft; a plurality of rendering configuration files are generated based on the configuration information; wherein different rendering configuration files correspond to different types of to-be-configured items; a target Flutter code is generated based on the plurality of rendering configuration files, and the target Flutter code is sent to a Flutter engine for compilation to obtain at least one compilation result of the page design draft; wherein different compilation results are used for display on different system platforms.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more specifically, to a method, apparatus, electronic device, and storage medium for generating page code. Background Technology

[0002] In existing page-to-code technologies, one method involves manual code writing by professionals. However, manual code writing prolongs the application development process and reduces efficiency. To improve the development process and efficiency, artificial intelligence (AI) can be used to generate page code. However, AI-based code generation technology suffers from poor controllability and a low pass rate. Summary of the Invention

[0003] This disclosure provides at least one page code generation method, apparatus, electronic device, and storage medium.

[0004] In a first aspect, embodiments of this disclosure provide a page code generation method, comprising: determining a page design draft, wherein the page design draft includes multiple view controls; responding to a configuration operation on the page design draft, displaying a target configuration page containing items to be configured, and receiving an editing operation on the items to be configured to determine configuration information corresponding to the items to be configured; the configuration data corresponding to the items to be configured is associated with rendering data of the page design draft; generating multiple rendering configuration files based on the configuration information; wherein different rendering configuration files correspond to different types of items to be configured; generating target Flutter code based on the multiple rendering configuration files, and sending the target Flutter code to the Flutter engine for compilation to obtain at least one compilation result of the page design draft; wherein different compilation results are used for display on different system platforms.

[0005] In one optional implementation, determining the page design draft includes: creating a new page based on a received page creation instruction, and displaying the new page in the page display area of ​​the target editing page; in response to a drag operation on a control displayed in the control display area of ​​the target editing page, adding control information of a first view control dragged by the drag operation to the control layout information of the new page, and displaying the first view control; and after detecting an editing completion instruction for the new page, determining the page design draft based on the control layout information of the new page after editing.

[0006] In one optional implementation, the step of responding to a configuration operation on the page design draft by displaying a target configuration page containing items to be configured and receiving an editing operation on the items to be configured to determine the configuration information of the corresponding items to be configured includes: responding to a configuration operation on a first item to be configured on the page design draft by displaying an attribute configuration page containing the first item to be configured and receiving an editing operation on the first item to be configured to determine first configuration information of the first item to be configured; the first item to be configured is used to configure the control attributes of each view control in the page design draft; the step of generating multiple rendering configuration files based on the configuration information includes: generating a first rendering configuration file based on the first configuration information and the control layout information of each view control in the page design draft.

[0007] In one optional implementation, the method further includes: determining a plurality of second view controls; in response to a combination operation on the plurality of second view controls, combining the plurality of second view controls to obtain a target page component; and in response to an upload instruction for the target page component, updating the target page component to a page component library through a control plugin system, wherein the components in the page component library are used for display in the control display area.

[0008] In one optional implementation, the step of displaying a target configuration page containing the item to be configured in response to a configuration operation on the page design draft, and receiving an editing operation on the item to be configured to determine the configuration information of the corresponding item to be configured, includes: in response to a configuration operation on a second item to be configured in the page design draft, displaying an information configuration page associated with the second item to be configured; wherein the second item to be configured is used to configure at least one of the following information: page status information, page network request, page routing information, and custom function information; the page status information is data associated with the view control, and the page network request is used to indicate rendering data requested from the server.

[0009] In one optional implementation, after generating multiple rendering configuration files based on the configuration information, the method further includes: in response to an import operation for the page design draft, adding the page design draft and the multiple rendering configuration files to a page template library.

[0010] In one optional implementation, generating Flutter code based on the plurality of rendering configuration files includes: globally registering the control plugin and the plurality of rendering configuration files respectively to obtain registration record information; wherein, the control plugin is a plugin associated with the rendering of a view control; and recursively rendering the plurality of rendering configuration files based on the registration record information to obtain the Flutter code.

[0011] In one optional implementation, the step of recursively rendering the multiple rendering configuration files based on the registration record information to obtain the target Flutter code includes: obtaining the control hierarchy relationship of multiple view controls contained in the page design draft, and determining the rendering configuration file corresponding to each level of view control in the multiple rendering configuration files; taking the bottom-most view control among the multiple view controls as the current view control, determining the control type of the current view control, and parsing the rendering configuration file corresponding to the current view control according to the control type to obtain the sub-Flutter code corresponding to the current view control; passing the sub-Flutter code to the parent view control of the current view control; taking the parent view control containing the sub-Flutter code as the current view control, and returning to execute the steps of determining the control type of the current view control, and parsing the rendering configuration file corresponding to the current view control according to the control type to obtain the sub-Flutter code corresponding to the current view control, until the sub-Flutter code of the top-most view control among the multiple view controls is obtained, and determining the target Flutter code based on the sub-Flutter code of the top-most view control.

[0012] In one optional implementation, the step of parsing the rendering configuration file corresponding to the current view control according to the control type to obtain the sub-Flutter code corresponding to the current view control includes: reading the plugin information of registered control plugins, wherein the plugin information includes function templates and recursive rendering functions; when the control type of the current view control is a first type, performing rendering parsing on the rendering configuration files corresponding to the sub-view controls in the current view control based on the recursive rendering functions in the plugin information, until the parsing of the rendering configuration files corresponding to all sub-view controls in the current view control is completed, to obtain the corresponding sub-Flutter code; wherein the first type is used to indicate that the current view control contains corresponding sub-view controls; when the control type of the current view control is a second type, parsing the custom function corresponding to the current view control through the function template to obtain the corresponding sub-Flutter code; wherein the second type is used to indicate that the current view control contains corresponding custom functions.

[0013] In one optional implementation, before generating the target Flutter code based on the plurality of rendering configuration files, the method further includes: in response to a user's editing operation on the target plugin, obtaining the plugin editing information of the target plugin; processing the plugin compilation information based on the plugin editing rules corresponding to the target plugin to obtain a processing result corresponding to the target plugin; wherein, the target plugin includes at least one of the following: a control plugin, an event plugin, a response plugin, and a data type plugin, wherein the control plugin is a plugin associated with the rendering of a view control, the event plugin is a plugin associated with the triggering event of a view control, the response plugin is a plugin associated with the response event of a view control, and the data type plugin is a plugin associated with the type of rendering data corresponding to the view control.

[0014] Secondly, embodiments of this disclosure provide a page code generation apparatus, comprising: a determining unit, configured to determine a page design draft, wherein the page design draft includes multiple view controls; a display unit, configured to display a target configuration page containing configurable items in response to a configuration operation on the page design draft; a receiving unit, configured to receive an editing operation on the configurable items to determine configuration information corresponding to the configurable items; the configuration data corresponding to the configurable items is associated with rendering data of the page design draft; a first generation unit, configured to generate multiple rendering configuration files based on the configuration information; wherein different rendering configuration files correspond to different types of configurable items; a second generation unit, configured to generate target Flutter code based on the multiple rendering configuration files; and a sending unit, configured to send the target Flutter code to a Flutter engine for compilation to obtain at least one compilation result of the page design draft; wherein different compilation results are used for display on different system platforms.

[0015] Thirdly, embodiments of this disclosure also provide an electronic device, including: a processor, a memory, and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the electronic device is running, the processor communicates with the memory via the bus, and when the machine-readable instructions are executed by the processor, the steps of the first aspect above, or any possible implementation of the first aspect, are performed.

[0016] Fourthly, embodiments of this disclosure also provide a computer-readable storage medium storing a computer program that, when executed by a processor, performs the steps of the first aspect or any possible implementation of the first aspect.

[0017] This application proposes a page code generation method. In this method, after obtaining the page design draft to be processed, the configuration information of each configuration item corresponding to the page design draft can be configured in the editing engine, thereby obtaining multiple target configuration information. By generating corresponding Flutter code through multiple target configuration information, and then determining the corresponding page compilation result based on the Flutter code, the pass rate of the generated code can be improved. Furthermore, by configuring the target configuration information on the target configuration page, the configuration information of each configuration item can be displayed more intuitively, thereby improving the efficiency of page-to-code conversion.

[0018] To make the above-mentioned objects, features and advantages of this disclosure more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0019] To more clearly illustrate the technical solutions of the embodiments of this disclosure, the accompanying drawings used in the embodiments will be briefly described below. These drawings are incorporated in and constitute a part of this specification. They illustrate embodiments conforming to this disclosure and, together with the specification, serve to explain the technical solutions of this disclosure. It should be understood that the following drawings only show some embodiments of this disclosure and should not be considered as limiting the scope. Those skilled in the art can obtain other related drawings based on these drawings without creative effort.

[0020] Figure 1 A flowchart of a page code generation method provided by an embodiment of this disclosure is shown;

[0021] Figure 2 A schematic diagram of the interface effect of a selection interface for selecting page design drafts in an editing engine provided by an embodiment of the present disclosure is shown.

[0022] Figure 3 This illustration shows a schematic diagram of the interface effect of a target editing page in an editing engine provided by an embodiment of the present disclosure;

[0023] Figure 4 This illustration shows a partial configuration diagram of a second configurable item provided in an embodiment of the present disclosure.

[0024] Figure 5 This illustration shows a flowchart of a process for saving a page design draft to a page template library according to an embodiment of the present disclosure;

[0025] Figure 6 This diagram illustrates a data structure analysis of a rendering engine provided in an embodiment of the present disclosure.

[0026] Figure 7A schematic diagram of the recursive rendering process of a rendering engine provided in an embodiment of this disclosure is shown.

[0027] Figure 8 A flowchart of another page code generation method provided by an embodiment of this disclosure is shown;

[0028] Figure 9 A flowchart of yet another page code generation method provided by an embodiment of this disclosure is shown;

[0029] Figure 10 A schematic diagram of a page code generation apparatus provided in an embodiment of this disclosure is shown;

[0030] Figure 11 A schematic diagram of an electronic device provided in an embodiment of the present disclosure is shown. Detailed Implementation

[0031] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this disclosure, and not all of them. The components of the embodiments of this disclosure described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of the claimed disclosure, but merely represents selected embodiments of this disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without inventive effort are within the scope of protection of this disclosure.

[0032] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0033] In this document, the term "and / or" merely describes a relationship, indicating that three relationships can exist. For example, A and / or B can represent three cases: A alone, A and B simultaneously, and B alone. Furthermore, the term "at least one" in this document means any combination of at least two of any one or more elements. For example, including at least one of A, B, and C can mean including any one or more elements selected from the set consisting of A, B, and C.

[0034] Research has found that among existing page-to-code technologies, one method involves manual code writing by professionals. However, manually writing code prolongs the application development process and reduces efficiency. To improve the development process and efficiency, artificial intelligence (AI) can be used to generate page code. However, AI-based code generation technology suffers from poor controllability and a low pass rate.

[0035] Based on the above research, this disclosure provides a method for generating page code. In the embodiments of this disclosure, after obtaining the page design draft to be processed, the configuration information of each configuration item corresponding to the page design draft can be configured in the editing engine to obtain multiple target configuration information. By generating corresponding Flutter code through multiple target configuration information, and then determining the corresponding page compilation result based on the Flutter code, the pass rate of the generated code can be improved. At the same time, by configuring target configuration information on the target configuration page, the configuration information of each configuration item can be displayed more intuitively, thereby improving the efficiency of page-to-code conversion.

[0036] To facilitate understanding of this embodiment, a page code generation method disclosed in this disclosure will first be described in detail. The execution subject of the page code generation method provided in this disclosure is generally an electronic device with certain computing power. The editing engine and rendering engine of the target software capable of generating page design drafts are pre-installed in the electronic device.

[0037] See Figure 1 The diagram shows a flowchart of a page code generation method provided in an embodiment of this disclosure. The method includes steps S101 to S107, wherein:

[0038] S101: Determine the page design draft, wherein the page design draft contains multiple view controls.

[0039] In the embodiments of this disclosure, the page design draft can be determined in the target code software. For example, a new design draft can be created using the editing engine of the target software as the page design draft. Alternatively, a page template can be selected in the editing engine of the target software as the page design draft. This disclosure does not specifically limit this, but only to what can be implemented.

[0040] S103: In response to the configuration operation for the page design draft, display the target configuration page containing the items to be configured, and receive the editing operation for the items to be configured to determine the configuration information of the corresponding items to be configured; the configuration data corresponding to the items to be configured is associated with the rendering data of the page design draft.

[0041] Here, the configuration items are used to configure at least one of the following information: control properties of each view control in the page design draft, page state information, page network requests, page routing information, page jump path, and custom function information; page state information is data associated with the view control, and page network requests are used to indicate the rendering data requested from the server.

[0042] In this embodiment of the disclosure, after the user determines the page design draft in the editing engine of the target software, the user can configure the aforementioned information of the page design draft through the editing engine of the target software. After detecting the user's configuration operation on the page design draft, the editing engine of the target software responds to the configuration operation by displaying a target configuration page containing the items to be configured on the target page.

[0043] At this point, the user can edit the configuration items through the target configuration page. The target software's editing engine responds to the user's editing operation on the configuration items and determines the configuration information entered by the user.

[0044] Here, for different types of configurable items, different target configuration pages can be displayed on the editing engine of the target software. This disclosure does not specifically limit the page format of the target configuration page for each type of configurable item, but only what can be achieved.

[0045] S105: Generate multiple rendering configuration files based on the configuration information; wherein, different rendering configuration files correspond to different types of configuration items.

[0046] In this embodiment of the disclosure, after obtaining the configuration information of each item to be configured, a corresponding rendering configuration file can be generated based on the configuration information of different types of items to be configured. Here, each rendering configuration file can be a JSON file, or other file formats. This disclosure does not make specific limitations on this, but only on what can be implemented.

[0047] S107: Generate target Flutter code based on the multiple rendering configuration files, and send the target Flutter code to the Flutter engine for compilation to obtain at least one compilation result of the page design draft; wherein, different compilation results are used for display on different system platforms.

[0048] In this embodiment of the disclosure, after obtaining multiple rendering configuration files, the code for the page design draft can be generated based on the rendering engine of the target software, thereby obtaining the target Flutter code. After obtaining the target Flutter code, it can be sent to the Flutter engine for compilation through the rendering engine of the target software to obtain at least one compilation result.

[0049] Here, at least one compilation result can be an App application that can be deployed on a terminal device, or a web page.

[0050] In existing page-to-code conversion technologies, the compiled code typically results in a webpage. Therefore, generating code for page design drafts using existing page-to-code conversion technologies suffers from a narrow range of applicable scenarios. In this embodiment, by compiling the target Flutter code using the Flutter engine, compiled results that can be displayed on different system platforms can be obtained, thereby expanding the applicable scenarios of the target Flutter code.

[0051] In this embodiment, after obtaining the page design draft to be processed, the configuration information of each configuration item corresponding to the page design draft can be configured in the editing engine to obtain multiple target configuration information. By generating corresponding Flutter code through multiple target configuration information, and then determining the corresponding page compilation result based on the Flutter code, the pass rate of the generated code can be improved. Furthermore, by configuring target configuration information on the target configuration page, the configuration information of each configuration item can be displayed more intuitively, thereby improving the efficiency of page-to-code conversion.

[0052] In an optional implementation, step S101 above, determining the page design draft, specifically includes the following steps:

[0053] Step S1011: Create a new page based on the received page creation instruction, and display the new page in the page display area of ​​the target editing page;

[0054] Step S1012: In response to a drag operation on a control displayed in the control display area of ​​the target editing page, add the control information of the first view control dragged by the drag operation to the control layout information of the new page, and display the first view control.

[0055] Step S1013: After detecting the completion instruction for editing the new page, determine the page design draft based on the control layout information of the new page after editing.

[0056] In this embodiment of the disclosure, after the user opens the editing engine of the target software, they can enter a state such as... Figure 2 In the interface shown. Among them, as... Figure 2 The page shown is the confirmation interface used to finalize the page design.

[0057] Users can create new design drafts using the target software's editing engine as the page design draft; alternatively, users can select a page template within the target software's editing engine as the page design draft. For example... Figure 2 As shown, users can click on the empty page displayed below "Create an empty page" and then click on the following... Figure 2 The "Create Page" button shown indicates that the target software's editing engine receives a page creation instruction, creates a new page, and displays the new page in the page display area of ​​the target editing page. For example, it can be used in... Figure 3 The new page is displayed in the target editing page shown.

[0058] like Figure 3 As shown, the target editing page includes a control display area and a page editing area. The control display area is used to display at least one different type of view control, and the page editing area is used to display the new page created by the page creation command and to edit the new page.

[0059] When editing a new page, this allows dragging and dropping of view controls displayed in the control display area. Upon detecting this drag operation, the target software's editing engine, in response, after detecting the release of the dragged first view control, adds the control information of that first view control to the control layout information of the new page and displays it at the corresponding location on the new page.

[0060] In the embodiments of this disclosure, the view control displayed in the control display area can be a single view control or a combination of multiple view controls, and this disclosure does not specifically limit it in this way.

[0061] Here, the view controls displayed in the control display area are registered controls. Controls not registered in the target software's editing engine will not be displayed in this area. Registered controls can be provided by the control plugin system. In addition, the control plugin system needs to declare the properties that the control needs to be configured. The values ​​of these properties can be displayed in a way that... Figure 3 The properties of the control are displayed in the property editing area, where users can configure its properties.

[0062] After detecting the completion instruction for the new page, the page design draft can be determined based on the control layout information of the new page after the editing is completed.

[0063] In the above embodiments, editing a newly created page by manually dragging and dropping within the target editing page provides a more intuitive demonstration of the page editing process for UI designers and UI developers. Furthermore, manual drag-and-drop editing improves page editing efficiency.

[0064] In an optional implementation, step S103 above: in response to a configuration operation on the page design draft, displaying a target configuration page containing the items to be configured, and receiving an editing operation on the items to be configured to determine the configuration information of the corresponding items to be configured, includes:

[0065] Step S1031: In response to the configuration operation for the first configurable item of the page design draft, display the attribute configuration page containing the first configurable item, and receive the editing operation for the first configurable item to determine the first configuration information of the first configurable item; the first configurable item is used to configure the control attributes of each view control in the page design draft.

[0066] In an optional implementation, step S105 above: generating multiple rendering configuration files based on the configuration information includes:

[0067] Step S1051: Generate a first rendering configuration file based on the first configuration information and the control layout information of each view control in the page design draft.

[0068] In this embodiment of the disclosure, after obtaining the page design draft, the control properties of each view control in the page design draft can be configured through the editing engine of the target software.

[0069] In practice, users can trigger the configuration operation of the first configurable item in the page design draft through the target software's editing engine, displaying the attribute configuration page on the target software's editing engine's display interface. For example, it can be done in... Figure 3 The target editing page shown displays the attribute configuration area, and this attribute configuration area is designated as the attribute configuration page. Next, the user can then... Figure 3 The attribute configuration area shown allows editing of the first item to be configured. After detecting the user's editing operation on the first item to be configured, the target software's editing engine can determine the first configuration information of the first item to be configured.

[0070] After obtaining the first configuration information, the first rendering configuration file (i.e., the page layout configuration JSON) can be generated based on the first configuration information and the control layout information of each view control in the page design draft.

[0071] In the above embodiments, configuring the control properties of each view control in the page design draft through the property configuration page can more intuitively demonstrate the configuration process of control properties and improve the configuration efficiency of control properties.

[0072] In this embodiment of the disclosure, based on the technical solution described in step S101 above, the method further includes the following steps:

[0073] (1) Identify multiple second view controls;

[0074] (2) In response to the combination operation of the plurality of second view controls, the plurality of second view controls are combined to obtain the target page component;

[0075] (3) In response to the upload instruction for the target page component, the target page component is updated to the page component library through the control plugin system, wherein the components in the page component library are used to be displayed in the control display area.

[0076] In this embodiment of the disclosure, a plurality of second view controls can first be determined, specifically in the following manner.

[0077] Method 1: In response to the creation command of the view control, multiple new view controls are created in the control display area, resulting in multiple second view controls. The creation process of the new view controls can be described as follows:

[0078] The system retrieves new code submitted by the user to the target software's editing engine, which then generates corresponding new view controls based on this new code.

[0079] The control plugin system on the editing engine side can provide users with rules for writing the rendering function of the new view control, the definition rules for the interface corresponding to the new view control, and the definition rules for the template corresponding to the new view control. Then, the user can provide the pre-defined rendering function, interface, and template, and upload the aforementioned data to the control plugin system of the editing engine. After obtaining the above information, the control plugin system allows the user to use the new view control.

[0080] Here, the template determines the final Flutter code structure of the control, the interface provides variable parameter options for the control and can be configured in the view layer of the editing engine, and the rendering function ultimately determines how the rendering function of the control is executed in the rendering engine.

[0081] Method 2: In response to a selection instruction for a control displayed in the control display area, a plurality of second view controls are determined based on the view control selected by the selection instruction.

[0082] Method 3: In response to a selection instruction for a control displayed in the page editing area, determine a plurality of second view controls based on the view control selected by the selection instruction.

[0083] After identifying multiple second-view controls as described above, these controls can be combined to obtain the target page component. The user can then upload the combined target page component to the page component library. Upon detecting the upload command for the target page component, the target software's editing engine can upload the target page component to the page component library for saving.

[0084] Next, you can register the target page component using the control plugin properties, and also declare the properties that the target page component needs to be configured using the control plugin properties. Afterwards, the target page component can be displayed in the control display area and edited and used by the user.

[0085] In the above embodiments, updating the target page components to the page component library through the control plugin system can improve the flexibility of the editing engine of the target software, thereby meeting various development needs of users.

[0086] In an optional implementation, step S103 above: in response to a configuration operation on the page design draft, displaying a target configuration page containing the items to be configured, and receiving an editing operation on the items to be configured to determine the configuration information of the corresponding items to be configured, specifically includes the following steps:

[0087] Step S11: In response to the configuration operation for the second configurable item in the page design draft, display the information configuration page associated with the second configurable item;

[0088] The second configurable item is used to configure at least one of the following information: page status information, page network request, page routing information, and custom function information; the page status information is data associated with the view control, and the page network request is used to indicate the rendering data requested from the server.

[0089] In this embodiment of the disclosure, page state information is used to characterize the mapping from view to data in the page design draft; alternatively, page state information can be understood as data associated with view controls. Part of the information content of the page state information may be as follows: Figure 4 The content shown.

[0090] For example, if a page design draft contains N tab views, the tab view that is open in the page design draft can be understood as a page state information. Another example is if the page design draft contains user avatars; for instance, user A's avatar URL is A, and user B's avatar URL is B. In this case, URLs A and B can also be considered page state information. Furthermore, the aforementioned page state information can also include the data that each view control needs to display; the type, color, and display status of this data are equal to the data associated with the view control.

[0091] Page routing information is used to represent the navigation path of a corresponding page. It's a way for front-end devices and servers to interact; different routing information allows requests for different resources. Some aspects of page routing information may include, for example: Figure 4 The content shown.

[0092] Custom function information can be configured to execute when the corresponding view control meets the corresponding triggering condition. The function content within the custom function information can be as follows: Figure 4 The content shown.

[0093] In this embodiment, a custom function can be set via a pop-up window. Specifically, after opening the pop-up window, the user can enter the custom function and name it. Furthermore, the user can set the triggering conditions for the custom function through the editing engine; for example, the custom function can be triggered during page initialization. After the custom function is triggered, it can be run. This method allows for more flexible configuration of the page design information, thereby meeting the diverse design needs of users.

[0094] For example, you can set a click event for a button control, meaning that when the user clicks the button control, the corresponding event will be triggered. For instance, you can... Figure 3 The property editing area shown displays a drop-down menu for the button control. This drop-down menu contains all the events that the button can trigger. Users can then add custom functions through this drop-down menu, which will then become an item in the drop-down menu. The trigger conditions for these custom functions can then be set.

[0095] The page network request contains the request link for the rendering data that needs to be requested from the server in the rendering data of the page design draft. Part of the request content can be as follows: Figure 4 The content shown.

[0096] For example, the page design could be a search engine webpage, which could contain multiple news items. In this case, the news links for these multiple news items could be the request links included in the aforementioned web request for the page.

[0097] In the above embodiments, the above processing method can more intuitively display the configuration process of control properties and improve the configuration efficiency of control properties; it can also more flexibly configure the information of the page design draft, thereby meeting the diverse design needs of users.

[0098] In an optional implementation, after generating multiple rendering configuration files based on the configuration information, the method further includes the following steps:

[0099] Step S106: In response to the storage operation for the page design draft, add the page design draft and the multiple rendering configuration files to the page template library.

[0100] In this embodiment of the disclosure, after determining the page design draft as described above and configuring the configurable items of the page design draft as described above, the user can save the page design draft, thereby saving the page design draft and multiple rendering configuration files as templates to the page template library. This allows the page design draft to be quickly reused by the user or other users when creating a new page, achieving the effect of producing a similar new page with minor adjustments.

[0101] In specific implementation, such as Figure 5 As shown, user A can create a new page and edit controls on it to obtain a page design draft, i.e., page A. Then, user A can configure the configuration information of the items to be configured on page A as described above, thereby generating multiple rendering configuration files based on the configuration information of the items to be configured. Afterwards, page A and its multiple rendering configuration files can be saved as template A. Then, users B, C, D, and E can call template A from the page template library, modify template A to generate pages B, C, D, and E, and save B, C, D, and E to the page template library for other users to call and modify.

[0102] In the above implementation, by adding user-generated pages to the page template library, other users can quickly create similar pages by simply setting up the pages in the page template library, thereby improving the efficiency of user page creation.

[0103] In this embodiment of the disclosure, after the configuration information is obtained in accordance with the above-described manner, multiple rendering configuration files can be generated based on the above configuration information. For example, the multiple rendering configuration files may include the following configuration files: user-defined component file (Components JSON), page state file (State JSON), page layout and control property file (Widget JSON, i.e., the above-mentioned first rendering configuration file), and custom event (Custom Event JSON), page route file (Route JSON), and page network request file (Network JSON).

[0104] In an optional implementation, step S107 above, generating Flutter code based on the multiple rendering configuration files, specifically includes the following steps:

[0105] Step S1071: Globally register the control plugin and the multiple rendering configuration files respectively to obtain registration record information; wherein, the control plugin is a plugin associated with the rendering of the view control;

[0106] Step S1072: Recursively render the multiple rendering configuration files based on the registration record information to obtain the Flutter code.

[0107] In the embodiments disclosed herein, such as Figure 6 As shown, firstly, it is necessary to configure the control plugin and multiple rendering configuration files (i.e., ... Figure 6 The project file shown is registered globally. Afterwards, based on the registration records of the control plugins and multiple rendering configuration files, multiple rendering configuration files can be recursively rendered to obtain the Flutter code. The specific rendering process can be described as follows:

[0108] (1) Obtain the control hierarchy of multiple view controls contained in the page design draft, and determine the rendering configuration file corresponding to each level of view control in the multiple rendering configuration files.

[0109] First, load multiple rendering configuration files and obtain the control hierarchy of multiple view controls contained in the page design draft, and then retrieve the rendering configuration file corresponding to the view controls at each level from the multiple rendering configuration files.

[0110] (2) Take the bottommost view control among the multiple view controls as the current view control, determine the control type of the current view control, and parse the rendering configuration file corresponding to the current view control according to the control type to obtain the sub-Flutter code corresponding to the current view control.

[0111] Starting with the lowest-level view control among multiple view controls, the Flutter code is obtained by recursively rendering multiple rendering configuration files.

[0112] First, the bottom-most view control is identified as the current view control, and the control type of the current view control is determined. The control type includes a first type and a second type. The first type is used to indicate that the current view control contains corresponding subview controls, and the second type is used to indicate that the current view control contains corresponding custom functions.

[0113] Once the control type is determined, the rendering configuration file corresponding to the current view control can be parsed based on the control type to obtain the sub-Flutter code corresponding to the current view control.

[0114] (3) Pass the sub-Flutter code to the parent view control of the current view control.

[0115] After obtaining the child Flutter code of the current view control, the child Flutter code can be passed to the parent view control of the current view control for continued recursive processing.

[0116] (4) Take the parent view control containing the sub-Flutter code as the current view control, and return to execute the steps of determining the control type of the current view control, and parsing the rendering configuration file corresponding to the current view control according to the control type to obtain the sub-Flutter code corresponding to the current view control, until the sub-Flutter code of the top-level view control among the multiple view controls is obtained, and the target Flutter code is determined based on the sub-Flutter code of the top-level view control.

[0117] In this step, the parent view control is set as the current view control, and steps (2) and (3) above are executed again. The specific process is described as follows:

[0118] Determine the control type of the parent view control, and based on the control type, parse the rendering configuration file corresponding to the parent view control and the sub-Flutter code obtained in step (3) to obtain the sub-Flutter code corresponding to the Flutter code.

[0119] The above steps allow for recursive processing of multiple view controls contained in the page design draft, thereby obtaining the sub-Flutter code of the top-level view control in the page design draft, and then determining the sub-Flutter code of the top-level view control as the target Flutter code.

[0120] As described above, during the regression phase of rendering, all view controls and functions are parsed into executable Flutter code strings and returned to the parent view control. Ultimately, the process returns to the top-level view control. At this point, multiple rendering configuration files have been completely converted into Flutter executable code (i.e., the target Flutter code), and the rendering engine has finished its work.

[0121] In an optional implementation, the above step of parsing the rendering configuration file corresponding to the current view control according to the control type to obtain the sub-Flutter code corresponding to the current view control specifically includes the following steps:

[0122] First, read the plugin information of the registered control plugins, whereby the plugin information includes function templates and recursive rendering functions;

[0123] Secondly, when the control type of the current view control is the first type, the rendering configuration files corresponding to the subview controls in the current view control are rendered and parsed based on the recursive rendering function in the plugin information until the rendering configuration files corresponding to all subview controls in the current view control are parsed, and the corresponding sub-Flutter code is obtained; wherein, the first type is used to indicate that the current view control contains the corresponding subview controls;

[0124] Finally, if the control type of the current view control is the second type, the custom function corresponding to the current view control is parsed through the function template to obtain the corresponding sub-Flutter code; wherein, the second type is used to indicate that the current view control contains the corresponding custom function.

[0125] In this embodiment of the disclosure, if the control type of the current view control is the first type, that is, if the current view control contains corresponding subview controls, the rendering configuration file can be parsed based on the control template in the plugin information to obtain the corresponding sub-Flutter code. For example, the rendering configuration file corresponding to the subview controls in the current view control can be parsed based on the recursive rendering function in the plugin information until all subview controls have been parsed to obtain the corresponding sub-Flutter code.

[0126] If the current view control is of type 2, meaning that the current view control contains a corresponding custom function, then the corresponding function template that has been registered globally can be read, and the parameters of the custom function can be filled into the function template to obtain the corresponding sub-Flutter code.

[0127] In the above implementation, saving all edited configurations in a JSON project file and obtaining runnable Flutter code by recursively rendering the JSON file and the plugin information of registered control plugins can improve the pass rate of the generated code. At the same time, configuring target configuration information on the target configuration page can more intuitively display the configuration information of each configuration item, thereby improving the efficiency of page to code conversion.

[0128] In this embodiment of the disclosure, before generating the target Flutter code based on the plurality of rendering configuration files, the method further includes the following steps:

[0129] (1) In response to the user's editing operation on the target plugin, obtain the plugin editing information of the target plugin;

[0130] (2) Based on the plugin editing rules corresponding to the target plugin, the plugin compilation information is processed to obtain the processing result corresponding to the target plugin;

[0131] The target plugin includes at least one of the following: a control plugin, an event plugin, a response plugin, and a data type plugin. The control plugin is a plugin associated with the rendering of a view control. The event plugin is a plugin associated with the triggering event of a view control. The response plugin is a plugin associated with the response event of a view control. The data type plugin is a plugin associated with the type of rendering data corresponding to the view control.

[0132] In this embodiment, a plugin registration mechanism can be used on the rendering engine side to ensure the extensibility of controls, events, types, and responses. Taking view controls as an example, the final rendering of the JSON for each page ultimately rests on a specific control plugin. The control plugin provides the control's Ejs template and interface, as well as rendering functions. The template determines the final Flutter code structure of the view control, the interface provides variable parameter options for the view control and can be configured in the view layer of the editing engine, and the rendering function ultimately determines how the view control is rendered in the rendering engine. This set of mechanisms determines how a minimal unit of JSON is rendered into a piece of Flutter code.

[0133] The plugin mechanism can output multiple such collections, and there is almost no coupling between each collection, which greatly improves the scalability of this solution. Based on this, in this embodiment of the disclosure, controls, events, responses, and data types can be extended through plugins.

[0134] In practice, users can input plugin editing information of the target plugin through the editing engine. After obtaining the plugin editing information, the editing engine can process the plugin compilation information based on the plugin editing rules corresponding to the target plugin to obtain the processing result corresponding to the target plugin.

[0135] For example, the target software includes three default events: click, long press, and double-tap. If a user wants to add a scroll event, they can edit the event plugin to obtain its editing information. For instance, this editing information might specify editing scroll event information. Then, the scroll event can be used in the target software based on this editing information.

[0136] In the above implementation, the plug-in mechanism allows for the flexible and configurable insertion of different components, events, data types, and response methods, thereby improving the flexibility and scalability of the target software and enabling it to meet the diverse design needs of users.

[0137] The following will combine Figure 7 The process of generating target Flutter code based on multiple rendering configuration files is described below:

[0138] The system registers plugins, which include control plugins, event plugins, response plugins, and data type plugins; it also retrieves project files, namely multiple rendering configuration files, including: page state files (State JSON), page layout and control property files (Widget JSON, i.e., ... Figure 7 User pages and user components in the system) and custom events (CustomEvent JSON), page route files (Route JSON, Figure 7 Routing in the page, and the page's network request file (NetworkJSON). Figure 7 (Network requests in the process), and globally register the project files.

[0139] The program reads page state information from multiple rendering configuration files, analyzes the page state information, and renders the page state information to a base template file based on the analysis results. This base template file is used to represent the final Flutter code structure of the page design.

[0140] First, obtain the JSON file, which contains multiple rendering configuration files.

[0141] Secondly, determine whether the view control in the current layer is a custom component; if so, read the custom component's rendering configuration file from multiple rendering configuration files. Then, decompose the custom component's rendering configuration file into rendering configuration files for multiple renderable child controls.

[0142] Next, starting with the view controls at the bottom layer of the page design draft, determine the control types.

[0143] Next, obtain the control type and fill it into the basic template file.

[0144] If the control type is a subview control (i.e., the first type mentioned above), the rendering configuration file corresponding to the subview control is rendered and parsed based on the recursive rendering function in the plugin information until the rendering configuration file corresponding to all subview controls is parsed, and the corresponding sub-Flutter code is obtained.

[0145] If the control type is a custom function (i.e., the second type mentioned above), the custom function corresponding to the current view control is parsed through the function template to obtain the corresponding sub-Flutter code.

[0146] After processing the view controls at each level in the above manner, the custom function corresponding to the current view control can be parsed using the function template to obtain the corresponding sub-Flutter code.

[0147] The following will combine Figure 8 The method for generating the above page code is described below:

[0148] First, create the page routing information; then, finalize the page design. This can be done by creating an empty page or selecting a template page.

[0149] For a created empty page, you can determine the rendering configuration file for the page design draft through methods such as "configure state management", "drag and drop layout and configure UI style", and "configure network request".

[0150] For the selected template page, the rendering configuration file of the page design can be determined by "modifying state management", "modifying UI and related events, animations, and data", and "modifying network requests".

[0151] After receiving the page design draft, users can preview it. Then, they can download the initial Flutter code for the page design draft and edit or add additional features to obtain the target Flutter code. The target Flutter code can then be compiled to obtain at least one compiled result of the page design draft; different compiled results are used for display on different system platforms.

[0152] The following will combine Figure 9 The method for generating the above page code is described below:

[0153] The methods provided in this disclosure can be applied to both the editing engine and the rendering engine.

[0154] For the editing engine, the specific editing process is described as follows: Users can create an empty page or select a template page to define the page design. For the created empty page, users can drag and drop controls displayed in the control display area. In response to the user's dragging operation, the editing engine adds the control information of the dragged first view control to the control layout information of the new page and displays the first view control. After detecting a completion instruction for editing the new page, the editing engine determines the page design based on the control layout information of the new page after editing.

[0155] Next, the user can configure the information of the configuration items through the editing engine. At this time, the editing engine responds to the configuration operation of the page design draft, displays the target configuration page containing the configuration items, and receives the editing operation of the configuration items to determine the configuration information of the corresponding configuration items. Based on the configuration information, multiple rendering configuration files are generated, including: page state file (State JSON), page layout and control property file (Widget JSON, that is, the first rendering configuration file mentioned above), custom event file (Custom Event JSON), page route file (RouteJSON), and page network request file (Network JSON).

[0156] Then, the rendering engine can recursively render multiple rendering configuration files based on the multiple rendering configuration files and the plugin system to obtain the Flutter code. Finally, the target Flutter code can be sent to the Flutter engine for compilation to obtain at least one compilation result of the page design draft; different compilation results are used for display on different system platforms.

[0157] Those skilled in the art will understand that, in the above-described method of the specific implementation, the order in which each step is written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined by its function and possible internal logic.

[0158] Based on the same inventive concept, this disclosure also provides a page code generation device corresponding to the page code generation method. Since the principle of the device in this disclosure for solving the problem is similar to the page code generation method described above in this disclosure, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0159] Reference Figure 10 The diagram shown is a schematic of a page code generation device provided in an embodiment of this disclosure. The device includes: a determining unit 10, an information configuration unit 20, a first generation unit 30, a second generation unit 40, and a sending unit 50; wherein,

[0160] The determining unit 10 is used to determine the page design draft, wherein the page design draft contains multiple view controls;

[0161] The information configuration unit 20 is used to respond to the configuration operation for the page design draft, display a target configuration page containing the items to be configured; and receive the editing operation for the items to be configured to determine the configuration information of the corresponding items to be configured; the configuration data corresponding to the items to be configured is associated with the rendering data of the page design draft;

[0162] The first generation unit 40 is used to generate multiple rendering configuration files based on the configuration information; wherein, different rendering configuration files correspond to different types of configuration items.

[0163] The second generation unit 50 is used to generate target Flutter code based on the plurality of rendering configuration files;

[0164] The sending unit 60 is used to send the target Flutter code to the Flutter engine for compilation, and obtain at least one compilation result of the page design draft; wherein, different compilation results are used for display on different system platforms.

[0165] In one possible implementation, the determining unit 10 is further configured to: create a new page based on a received page creation instruction, and display the new page in the page display area of ​​the target editing page; in response to a drag operation on a control displayed in the control display area of ​​the target editing page, add control information of a first view control dragged by the drag operation to the control layout information of the new page, and display the first view control; and after detecting an editing completion instruction for the new page, determine the page design draft based on the control layout information of the new page after editing.

[0166] In one possible implementation, the information configuration unit 20 is further configured to: in response to a configuration operation on a first configurable item in the page design draft, display an attribute configuration page containing the first configurable item, receive an editing operation on the first configurable item, and determine first configuration information of the first configurable item; the first configurable item is used to configure the control attributes of each view control in the page design draft; the first generation unit 40 is further configured to: generate a first rendering configuration file based on the first configuration information and the control layout information of each view control in the page design draft.

[0167] In one possible implementation, the device is further configured to: determine a plurality of second view controls; in response to a combination operation of the plurality of second view controls, combine the plurality of second view controls to obtain a target page component; and in response to an upload instruction for the target page component, update the target page component to a page component library via a control plugin system, wherein the components in the page component library are used for display in the control display area.

[0168] In one possible implementation, the information configuration unit 20 is further configured to: display an information configuration page associated with the second configurable item in response to a configuration operation for the second configurable item in the page design draft; wherein the second configurable item is configured to configure at least one of the following information: page status information, page network request, page routing information, and custom function information; the page status information is data associated with the view control, and the page network request is used to indicate rendering data requested from the server.

[0169] In one possible implementation, the device is further configured to: after generating multiple rendering configuration files based on the configuration information, in response to an import operation for the page design draft, add the page design draft and the multiple rendering configuration files to the page template library.

[0170] In one possible implementation, the second generation unit 50 is further configured to: globally register the control plugin and the plurality of rendering configuration files respectively to obtain registration record information; wherein the control plugin is a plugin associated with the rendering of the view control; and recursively render the plurality of rendering configuration files based on the registration record information to obtain the Flutter code.

[0171] In one possible implementation, the second generation unit 50 is further configured to: obtain the control hierarchy of multiple view controls included in the page design draft, and determine the rendering configuration file corresponding to each level of view control in the multiple rendering configuration files; take the bottom-most view control among the multiple view controls as the current view control, determine the control type of the current view control, and parse the rendering configuration file corresponding to the current view control according to the control type to obtain the sub-Flutter code corresponding to the current view control; pass the sub-Flutter code to the view control at the next higher level of the current view control; take the view control at the next higher level containing the sub-Flutter code as the current view control, and return to execute the steps of determining the control type of the current view control, and parsing the rendering configuration file corresponding to the current view control according to the control type to obtain the sub-Flutter code corresponding to the current view control, until the sub-Flutter code of the top-most view control among the multiple view controls is obtained, and determine the target Flutter code based on the sub-Flutter code of the top-most view control.

[0172] In one possible implementation, the second generation unit 50 is further configured to: read the plugin information of a registered control plugin, wherein the plugin information includes function templates and recursive rendering functions; when the control type of the current view control is a first type, perform rendering parsing on the rendering configuration files corresponding to the sub-view controls in the current view control based on the recursive rendering functions in the plugin information, until the parsing of the rendering configuration files corresponding to all sub-view controls in the current view control is completed, to obtain the corresponding sub-Flutter code; wherein the first type is used to indicate that the current view control contains the corresponding sub-view controls; when the control type of the current view control is a second type, parse the custom function corresponding to the current view control through the function template to obtain the corresponding sub-Flutter code; wherein the second type is used to indicate that the current view control contains the corresponding custom function.

[0173] In one possible implementation, the device is further configured to: before generating target Flutter code based on the plurality of rendering configuration files, in response to a user's editing operation on the target plugin, obtain plugin editing information of the target plugin; process the plugin compilation information based on the plugin editing rules corresponding to the target plugin to obtain a processing result corresponding to the target plugin; wherein the target plugin includes at least one of the following: a control plugin, an event plugin, a response plugin, and a data type plugin, wherein the control plugin is a plugin associated with the rendering of a view control, the event plugin is a plugin associated with the triggering event of a view control, the response plugin is a plugin associated with the response event of a view control, and the data type plugin is a plugin associated with the type of rendering data corresponding to the view control.

[0174] The processing flow of each module in the device and the interaction flow between each module can be referred to the relevant descriptions in the above method embodiments, and will not be detailed here.

[0175] Corresponding to Figure 1 In addition to the page code generation method in this disclosure, this embodiment also provides an electronic device 1100, such as... Figure 11 The diagram shown is a structural schematic of the electronic device 1100 provided in this embodiment of the present disclosure, including:

[0176] The system includes a processor 111, a memory 112, and a bus 113. The memory 112 stores execution instructions and includes main memory 1121 and external memory 1122. The main memory 1121, also called internal memory, temporarily stores the computational data in the processor 111, as well as data exchanged with external memory such as a hard disk. The processor 111 exchanges data with the external memory 1122 through the main memory 1121. When the electronic device 1100 is running, the processor 111 communicates with the memory 112 through the bus 113, causing the processor 111 to execute the following instructions:

[0177] A page design draft is finalized, wherein the page design draft contains multiple view controls;

[0178] In response to a configuration operation on the page design draft, a target configuration page containing the items to be configured is displayed, and an editing operation on the items to be configured is received to determine the configuration information of the corresponding items; the configuration data corresponding to the items to be configured is associated with the rendering data of the page design draft;

[0179] Multiple rendering configuration files are generated based on the configuration information; wherein, different rendering configuration files correspond to different types of configuration items;

[0180] Target Flutter code is generated based on the multiple rendering configuration files, and the target Flutter code is sent to the Flutter engine for compilation to obtain at least one compilation result of the page design draft; wherein, different compilation results are used for display on different system platforms.

[0181] This disclosure also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the page code generation method described in the above method embodiments. The storage medium can be a volatile or non-volatile computer-readable storage medium.

[0182] This disclosure also provides a computer program product carrying program code. The program code includes instructions that can be used to execute the steps of the page code generation method described in the above method embodiments. For details, please refer to the above method embodiments, which will not be repeated here.

[0183] The aforementioned computer program product can be implemented through hardware, software, or a combination thereof. In one optional embodiment, the computer program product is specifically embodied in a computer storage medium; in another optional embodiment, the computer program product is specifically embodied in a software product, such as a software development kit (SDK), etc.

[0184] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. In the several embodiments provided in this disclosure, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division; in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection may be through some communication interfaces; the indirect coupling or communication connection of devices or units may be electrical, mechanical, or other forms.

[0185] The units described as separate components may or may not be physically separate. 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 units can be selected to achieve the purpose of this embodiment according to actual needs.

[0186] In addition, the functional units in the various embodiments of this disclosure can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0187] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause an electronic device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0188] Finally, it should be noted that the above-described embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A method for generating page code, characterized in that, include: A page design draft is finalized, wherein the page design draft contains multiple view controls; In response to a configuration operation on the page design draft, a target configuration page containing the items to be configured is displayed, and an editing operation on the items to be configured is received to determine the configuration information of the corresponding items; the configuration data corresponding to the items to be configured is associated with the rendering data of the page design draft; Multiple rendering configuration files are generated based on the configuration information; wherein, different rendering configuration files correspond to different types of configuration items; and Target Flutter code is generated based on the multiple rendering configuration files, and the target Flutter code is sent to the Flutter engine for compilation to obtain at least one compilation result of the page design draft; wherein, different compilation results are used for display on different system platforms; The step of generating Flutter code based on the multiple rendering configuration files includes: Based on the registration record information, the multiple rendering configuration files are recursively rendered to obtain the Flutter code. In this process, the hierarchical relationship of multiple view controls contained in the page design draft is obtained, and the rendering configuration file corresponding to each level of view control is determined in the multiple rendering configuration files, so as to recursively render the multiple rendering configuration files.

2. The method according to claim 1, characterized in that, The process of determining the page design draft includes: A new page is created based on the received page creation instructions, and the new page is displayed in the page display area of ​​the target editing page; In response to a drag operation on a control displayed in the control display area of ​​the target editing page, the control information of the first view control dragged by the drag operation is added to the control layout information of the new page, and the first view control is displayed. After detecting the completion instruction for editing the new page, the page design draft is determined based on the control layout information of the new page after editing.

3. The method according to claim 2, characterized in that, The step of responding to a configuration operation on the page design draft, displaying a target configuration page containing items to be configured, and receiving an editing operation on the items to be configured to determine the configuration information of the corresponding items to be configured, includes: responding to a configuration operation on a first item to be configured on the page design draft, displaying an attribute configuration page containing the first item to be configured, and receiving an editing operation on the first item to be configured to determine the first configuration information of the first item to be configured; the first item to be configured is used to configure the control attributes of each view control in the page design draft; The step of generating multiple rendering configuration files based on the configuration information includes: generating a first rendering configuration file based on the first configuration information and the control layout information of each view control in the page design draft.

4. The method according to claim 2, characterized in that, The method further includes: Identify multiple second-view controls; In response to the combination operation of the plurality of second view controls, the plurality of second view controls are combined to obtain the target page component; In response to the upload command for the target page component, the target page component is updated to the page component library through the control plugin system, wherein the components in the page component library are used to be displayed in the control display area.

5. The method according to claim 1, characterized in that, The response to the configuration operation on the page design draft, displaying the target configuration page containing the items to be configured, and receiving the editing operation on the items to be configured to determine the configuration information of the corresponding items, includes: In response to a configuration operation on the second configurable item in the page design draft, an information configuration page associated with the second configurable item is displayed; The second configurable item is used to configure at least one of the following information: page status information, page network request, page routing information, and custom function information; the page status information is data associated with the view control, and the page network request is used to indicate the rendering data requested from the server.

6. The method according to claim 1, characterized in that, After generating multiple rendering configuration files based on the configuration information, the method further includes: In response to the storage operation for the page design draft, the page design draft and the multiple rendering configuration files are added to the page template library.

7. The method according to claim 1, characterized in that, The process of generating Flutter code based on the multiple rendering configuration files also includes: Global registration is performed on the control plugins and the multiple rendering configuration files respectively to obtain the registration record information; wherein, the control plugins are plugins associated with the rendering of view controls.

8. The method according to claim 7, characterized in that, The step of recursively rendering the multiple rendering configuration files based on the registration record information to obtain the target Flutter code further includes: The bottommost view control among the multiple view controls is taken as the current view control. The control type of the current view control is determined, and the rendering configuration file corresponding to the current view control is parsed according to the control type to obtain the sub-Flutter code corresponding to the current view control. Pass the sub-Flutter code to the parent view control of the current view control; The parent view control containing the sub-Flutter code is taken as the current view control, and the process returns to determine the control type of the current view control. The rendering configuration file corresponding to the current view control is parsed according to the control type to obtain the sub-Flutter code corresponding to the current view control. This process continues until the sub-Flutter code of the top-level view control among the multiple view controls is obtained. The target Flutter code is then determined based on the sub-Flutter code of the top-level view control.

9. The method according to claim 8, characterized in that, The step of parsing the rendering configuration file corresponding to the current view control according to the control type to obtain the sub-Flutter code corresponding to the current view control includes: Read the plugin information of the registered control plugins, wherein the plugin information includes function templates and recursive rendering functions; When the control type of the current view control is the first type, the rendering configuration files corresponding to the subview controls in the current view control are rendered and parsed based on the recursive rendering function in the plugin information until the rendering configuration files corresponding to all subview controls in the current view control are parsed, and the corresponding sub-Flutter code is obtained; wherein, the first type is used to indicate that the current view control contains the corresponding subview controls; When the control type of the current view control is the second type, the custom function corresponding to the current view control is parsed through the function template to obtain the corresponding sub-Flutter code; wherein, the second type is used to indicate that the current view control contains the corresponding custom function.

10. The method according to claim 1, characterized in that, Before generating the target Flutter code based on the multiple rendering configuration files, the method further includes: In response to a user's editing operation on a target plugin, obtain the plugin editing information of the target plugin; Based on the plugin editing rules corresponding to the target plugin, the plugin editing information is processed to obtain the processing result corresponding to the target plugin; The target plugin includes at least one of the following: a control plugin, an event plugin, a response plugin, and a data type plugin. The control plugin is a plugin associated with the rendering of a view control. The event plugin is a plugin associated with the triggering event of a view control. The response plugin is a plugin associated with the response event of a view control. The data type plugin is a plugin associated with the type of rendering data corresponding to the view control.

11. A page code generation device, characterized in that, include: A determining unit is used to determine a page design draft, wherein the page design draft contains multiple view controls; The information configuration unit is used to respond to the configuration operation for the page design draft, display the target configuration page containing the items to be configured, and receive the editing operation for the items to be configured to determine the configuration information of the corresponding items to be configured; the configuration data corresponding to the items to be configured is associated with the rendering data of the page design draft; The first generation unit is used to generate multiple rendering configuration files based on the configuration information; wherein, different rendering configuration files correspond to different types of configuration items. The second generation unit is used to generate target Flutter code based on the multiple rendering configuration files; and The sending unit is used to send the target Flutter code to the Flutter engine for compilation, and obtain at least one compilation result of the page design draft; wherein, different compilation results are used for display on different system platforms; The step of generating Flutter code based on the multiple rendering configuration files includes: Based on the registration record information, the multiple rendering configuration files are recursively rendered to obtain the Flutter code. In this process, the hierarchical relationship of multiple view controls contained in the page design draft is obtained, and the rendering configuration file corresponding to each level of view control is determined in the multiple rendering configuration files, so as to recursively render the multiple rendering configuration files.

12. An electronic device, characterized in that, include: The device includes a processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the electronic device is running, the processor communicates with the memory via the bus. When the machine-readable instructions are executed by the processor, the steps of the page code generation method as described in any one of claims 1 to 10 are performed.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the page code generation method as described in any one of claims 1 to 10.

Images