A page generation method, an electronic device, and a computer-readable storage medium

Abstract

The present application discloses a page generation method, an electronic device, and a computer-readable storage medium. The method includes: obtaining page frame data sent by a prototype design platform, where the page frame data is generated by the prototype design platform based on an initial page frame, and the initial page frame is generated by the prototype design platform in response to a received design operation; performing parsing processing on the page frame data to obtain sub-frame data of different categories; performing page data reconstruction processing on the corresponding sub-frame data according to the data conversion method corresponding to the target structure class data in each sub-frame data to obtain corresponding target page design sub-data; and performing running processing on each target page design sub-data to obtain a target page. Thereby, the efficiency of page generation is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer science and technology, and in particular, to a page generation method, an electronic device, and a computer-readable storage medium. Background Art

[0002] Application development generally includes processes such as requirement import, requirement analysis, software design, code development, test release, installation and deployment, on-site debugging, and delivery for use. Prototype design belongs to the software design stage. In order to convert the prototype into an operable actual interface, developers need to develop code based on the prototype to generate an operable target page.

[0003] To save development time, prototype designers will complete the design of the prototype on a professional prototype design platform, and the prototype design platform will automatically generate corresponding page framework data. However, this page framework data belongs to static web pages and cannot be directly used. Developers need to spend a lot of time writing the prototype into an operable display page, resulting in a decrease in application development efficiency. Summary of the Invention

[0004] The main technical problem to be solved by this application is to provide a page generation method, an electronic device, and a computer-readable storage medium, which can improve the efficiency of page generation.

[0005] To solve the above technical problem, a technical solution adopted by this application is: to provide a page generation method, which includes: obtaining page framework data sent by a prototype design platform, where the page framework data is generated by the prototype design platform based on an initial page framework, and the initial page framework is generated by the prototype design platform in response to a received design operation; performing parsing processing on the page framework data to obtain sub-framework data of different categories; performing page data reconstruction processing on the corresponding sub-framework data according to the data conversion method corresponding to the target structure type data in each sub-framework data to obtain corresponding target page design sub-data; performing running processing on each target page design sub-data to obtain the target page.

[0006] In some embodiments, the sub-framework data includes structural data. The step of performing page data reconstruction processing on the corresponding sub-framework data according to the data conversion method corresponding to the target structural data in each sub-framework data to obtain the corresponding target page design sub-data includes: in response to detecting that the sub-framework data includes structural data, taking the detected structural data as the target structural data; determining the target data conversion template of the object type from a preset mapping relationship library according to the object type in the target structural data, where the preset mapping relationship library includes the corresponding relationship between the object type and the data conversion template; performing data conversion processing on the target structural data corresponding to the object type according to the target data conversion template to obtain the corresponding target page design sub-data.

[0007] In some embodiments, the step of performing data conversion processing on the target structural data corresponding to the object type according to the target data conversion template to obtain the corresponding target page design sub-data includes: obtaining the statement information of the target structural data corresponding to each object type in the sub-framework data; writing each statement information into the corresponding target data template to obtain the corresponding target page design sub-data.

[0008] In some embodiments, the statement information includes interaction statement information. The step of writing each statement information into the corresponding target data template to obtain the corresponding target page design sub-data includes: obtaining the interaction statement information in the target structural data; writing the interaction statement information in the target structural data into the interaction statement of the target data template.

[0009] In some embodiments, the sub-framework data includes style data and structural data. The step of performing page data reconstruction processing on the corresponding sub-framework data according to the data conversion method corresponding to the target structural data in each sub-framework data to obtain the corresponding target page design sub-data includes: in response to detecting that the sub-framework data includes structural data and style data, converting the style data into the structural data to obtain the target structural data; performing data conversion processing on the target structural data corresponding to each object type according to the target data conversion template of the object type in the target structural data to obtain the corresponding target page design sub-data.

[0010] In some embodiments, the style class data includes the style data of at least one object, and one structure class data corresponds to one object. The step of converting the style class data into the structure class data to obtain the target structure class data in response to detecting that the sub-frame data includes the structure class data and the style class data includes: obtaining the style data of each object in the style class data; writing the style data of each object in the style class data into the structure class data of the corresponding object to obtain the target structure class data.

[0011] In some embodiments, the sub-frame data includes the object data of at least one object. Before the step of performing page data reconstruction processing on the corresponding sub-frame data according to the data conversion method corresponding to the target structure class data in each sub-frame data to obtain the corresponding target page design sub-data, the method further includes: traversing each sub-frame data to obtain the object data of each object in the sub-frame data; in response to the object data of the object indicating that the target structure class data of the object in the sub-frame data is complete, performing page data reconstruction processing on the corresponding sub-frame data according to the data conversion method corresponding to the target structure class data in each sub-frame data to obtain the corresponding target page design sub-data.

[0012] In some embodiments, after the step of performing running processing on each target page design sub-data to obtain the target page, the method further includes: in response to receiving a page update operation, obtaining the updated page frame data; comparing the updated page frame data with the page frame data before the update to obtain the incremental sub-frame data and the changed sub-frame data; performing page data reconstruction processing on the incremental sub-frame data according to the data conversion method of the incremental sub-frame data to obtain the page design sub-data corresponding to the incremental sub-frame data; performing page data reconstruction processing on the changed sub-frame data according to the data conversion method of the changed sub-frame data to obtain the page design sub-data corresponding to the changed sub-frame data; updating each target page design sub-data based on the page design sub-data corresponding to the incremental sub-frame data and the page design sub-data corresponding to the changed sub-frame data to obtain the updated target page design sub-data; performing running processing on the updated target page design sub-data to obtain the updated target page.

[0013] To solve the above technical problems, another technical solution adopted by this application is: providing an electronic device, including a memory and a processor, where the memory stores program instructions, and the processor retrieves the program instructions from the memory to execute the above page generation method.

[0014] To solve the above technical problems, another technical solution adopted by this application is: to provide a computer-readable storage medium including program data stored therein, and when the program data is executed by a processor, it is used to implement the above-mentioned page generation method.

[0015] In the above solution, compared with the problem of too low efficiency in page generation caused by manually adapting prototype diagrams in the traditional way, this application proposes a page generation method, which includes: obtaining page frame data sent by a prototype diagram design platform, where the page frame data is generated by the prototype diagram design platform based on an initial page frame, and the initial page frame is generated by the prototype diagram design platform in response to received design operations; parsing and processing the page frame data to obtain sub-frame data of different categories; performing page data reconstruction processing on the corresponding sub-frame data according to the data conversion method corresponding to the target structure class data in each sub-frame data to obtain corresponding target page design sub-data; performing running processing on each target page design sub-data to obtain a target page. Thus, the page frame data generated by the prototype diagram design platform is reconstructed in page data according to the data conversion method of the page generation platform, and the target page is developed and run by the page generation platform, shortening the communication time and code writing time, and improving the efficiency of page generation. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required to be used in the embodiments. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings, where:

[0017] Figure 1 is a schematic flowchart of an exemplary embodiment of the page generation method shown in the present application;

[0018] Figure 2 is Figure 1 a schematic flowchart of an exemplary embodiment of step S130 in the page generation method shown;

[0019] Figure 3 is Figure 1 a schematic flowchart of an exemplary embodiment of the page update operation shown;

[0020] Figure 4 is a schematic framework diagram of an exemplary embodiment of the page generation method shown in the present application;

[0021] Figure 5 is a schematic structural diagram of an exemplary embodiment of the page generation device shown in the present application;

[0022] Figure 6It is a schematic structural diagram of an embodiment of an electronic device provided by this application;

[0023] Figure 7 It is a schematic structural diagram of an embodiment of a computer-readable storage medium provided by this application. Detailed implementation manners

[0024] Next, the technical solutions in the embodiments of this application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of this application. It can be understood that the specific embodiments described herein are only used to explain this application, rather than limiting this application. Additionally, it should be noted that for the convenience of description, only parts related to this application rather than all structures are shown in the accompanying drawings. Based on the embodiments in this application, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the scope of protection of this application.

[0025] First of all, it should be noted that the development process of traditional application software generally needs to go through the following steps, such as requirement import, requirement analysis, software design, code development, test release, installation and deployment, on-site debugging, delivery and use, etc., which have problems such as long cycle and high development cost. With the development and application of low-code technology, the development of application software can be streamlined into five steps: requirement analysis, prototype design, application building, online verification, and release and use through a low-code platform.

[0026] However, in actual development scenarios, in order to ensure product quality and user experience, the prototype design and application development of products are both collaborative. Prototype design Figure 1 is generally completed by professional product managers or user experience designers (User Experience Designer, UE designers), and then transferred to application developers for development. The two often need to communicate and collaborate continuously, which affects development efficiency and increases communication costs.

[0027] At the same time, traditional application development first stores the page framework data provided by the prototype design platform in the database and establishes corresponding pages, library tables, and interfaces. This method faces the problem of difficult modification, does not support users for secondary modification, and lacks flexibility in customization.

[0028] Based on this, this application proposes a page generation method, an electronic device, and a computer-readable storage medium, which can improve the efficiency of page generation. For details, please refer to Figure 1 , Figure 1 It is a schematic flowchart of an exemplary embodiment of the page generation method shown in this application.

[0029] The execution entity of the page generation method can be a terminal device, a server, or other processing devices. Among them, the terminal device can be a user equipment (UE), a computer, a mobile device, a user terminal, a terminal, a cellular phone, a cordless phone, a personal digital assistant (PDA), a handheld device, a computing device, a vehicle-mounted device, a wearable device, etc. The execution entity of the page generation method can also be a page generation platform. In some possible implementation manners, the page generation method can be implemented by a processor calling computer-readable instructions stored in a memory.

[0030] Specifically, the page generation method of this embodiment includes the following steps:

[0031] S110: Obtain page frame data sent by a prototype design platform. The page frame data is generated by the prototype design platform based on an initial page frame, and the initial page frame is generated by the prototype design platform in response to a received design operation.

[0032] The prototype design platform is a tool for creating design diagrams of applications or websites. Through the prototype design platform, designers can be allowed to build interface layouts, add interactive elements, and test user experience processes without writing code. Exemplarily, the prototype design platform can be Sketch, Adobe XD (Adobe Experience Design), Figma, and Axure, etc. Among them, Axure can not only help designers create static page layouts, but also be used to implement interactive prototypes, support publishing and exporting specific page frame data, which can also be called a prototype product package.

[0033] The page framework data is generated by the prototype design platform based on the initial page framework. After the UE designer (User Experience Designer) draws the initial page framework on the prototype design platform, the prototype design platform can directly generate the corresponding code files according to the designed initial page framework to form the page framework data. Specifically, the page framework data includes HTML files (HyperText Markup Language), CSS files (Cascading Style Sheets), JavaScript files, JSON files (JavaScript Object Notation), image resource files, font files, link files, etc. In response to the user's export operation, the prototype design platform packages these files into a complete folder to form the page framework data.

[0034] The initial page framework is a visual design diagram of the page. Exemplarily, it can be a page design constructed by the UE designer on the interaction interface of the prototype design platform through operations such as dragging and dropping. The initial page framework can include page layout, interactive elements, state settings, animations, and transition effects, etc. Among them, the page layout refers to the position, size, and arrangement of each element, and the interactive elements include adding buttons, text boxes, drop-down menus, and the state settings define different states for different elements on the page.

[0035] Users can use the tools provided by the prototype design platform through design operations such as dragging and dropping with media such as a drawing pen or a mouse. After receiving the user's design operation, the prototype design platform generates the initial page framework according to the design operation.

[0036] The page generation platform obtains the page framework data sent by the prototype design platform. Among them, after receiving the design operation, the prototype design platform generates the initial page framework based on the design operation. After that, after receiving the export operation, the prototype design platform packages the files of the initial page framework into a folder to obtain the page framework data.

[0037] Exemplarily, the page generation platform can be a low-code platform, which is a zero-code, low-code, and visual application development platform that helps developers and non-technical personnel develop and deploy applications through a graphical interface and visual programming. Typical low-code platforms include Mendix (transliterated as "Mendix"), OutSystems (literally translated as "External Systems"), Salesforce Lightning (literally translated as "Salesforce Lightning"), etc. The low-code platform is deployed and extended based on a container cloud platform with a cloud-native architecture and can be split into business modules such as the front end (web), internal gateway (gateway), platform service (platform), application release (devops), etc., as well as a common middleware service module according to functional types. The front end (web) contains application components, a page rendering engine, and an application editor, which renders and configures corresponding application pages and event responses between components according to specific application framework information; the internal gateway (gateway) is mainly used for filtering and interception, routing and jumping, access control, etc. of the low-code platform; the platform service (platform) is the main service module of the low-code platform, responsible for business functions such as user management, permission management, application management, data source management, etc.; the application release (devops) is the core module related to application deployment in the low-code platform, responsible for core functions such as application release, cancellation of release, status detection, etc.; the middleware includes a database (such as mysql), a configuration center, a registration center, a storage center, and a unified authentication center; the external gateway is used for communication connection with the outside world, and developers or users can operate the low-code platform and low-code applications through the external gateway. Among them, the platform service also includes the function of generating low-code applications based on page framework data.

[0038] S120: Parse and process the page framework data to obtain sub-framework data of different categories.

[0039] The sub-framework data is part of the page framework data. Exemplarily, the page framework data can be parsed and processed to obtain sub-framework data of different categories. Specifically, import the page framework data into the page generation platform. The platform service in the page generation platform decompresses the page framework data and classifies the decompressed sub-frameworks according to the suffix name and content of the sub-framework data to obtain sub-framework data of different categories. Then, for easy acquisition, each sub-framework data can be stored in a temporary directory file according to the category of the sub-framework data. As an example, the temporary directory file is as follows:

[0040] app.html / / HTML file of the application

[0041] data

[0042] document.js

[0043] styles.css

[0044] files

[0045] app / / Application data

[0046] data.js / / JavaScript script file for structural data

[0047] styles.css / / Styling data

[0048] images

[0049] app / / Custom image files used by the application

[0050] u0.png

[0051] index.html

[0052] plugins

[0053] resources

[0054] start_c_1.html

[0055] start.html

[0056] start_with_pages.html

[0057] Among them, the sub-framework data includes structural data, styling data, etc. Exemplarily, the structural data is stored in files / app / data.js, and the styling data is stored in files / app / styles.css, etc.

[0058] S130: Perform page data reconstruction processing on the corresponding sub-framework data according to the data conversion method corresponding to the target structural data in each sub-framework data to obtain the corresponding target page design sub-data.

[0059] The target structural data can refer to the data to be reconstructed. Exemplarily, the structural data can be used as the target structural data, or after converting the styling data into structural data, the converted structural data can be used as the target structural data; or after converting the interaction data into structural data, the converted structural data can be used as the target structural data.

[0060] The data conversion method is a way to convert sub-framework data into data that complies with the rules of the page generation platform. In some embodiments, the corresponding data conversion method can be determined according to the object type of the target structured data. The page framework data includes sub-framework data such as structured data and style data. The structured data includes object types and also includes qualification statements corresponding to the object types. For example, the structured data with the object type of picture includes statements for qualifying the length, width, and height of the picture. One object type can correspond to at least one object, and each object has an identity attribute representing its identity.

[0061] The target page design sub-data refers to the data after reconstructing the sub-framework data. Exemplarily, the sub-framework data can be converted through the corresponding data conversion method to obtain the target page design sub-data.

[0062] S140: Perform a running process on each target page design sub-data to obtain the target page.

[0063] The target page is an operable page. Exemplarily, a running process can be performed on each target page design sub-data to obtain the target page. In some embodiments, each target page design sub-data can be combined and spliced to obtain the target page design data; then the target page design data is run to obtain the target page. In other embodiments, each target page design sub-data can be combined and spliced to obtain the target page design data; a redundancy optimization process is performed on the target page design data to obtain the target page design data after redundancy optimization. Among them, the strategies for redundancy optimization include but are not limited to: multiple objects using the same style data can be simplified into one storage. In addition, some identical interaction action triggers can also be simplified. This optimization can not only ensure that the data will not be bloated due to duplication, but also further improve the rendering speed of page loading. Then, the optimized target page design data and the original structured data (data.json) are saved to the database together.

[0064] Finally, the resource files required for the target page design data, such as pictures, fonts, etc., are uploaded to the page generation platform to ensure that these resource files can be loaded when the application is released, ensuring the accuracy and reliability of the generated application. To save resources, after the application is released, the page framework data sent by the prototype design platform will be cleared, that is, the directories and files generated by decompressing the prototype diagram product package, releasing the occupied disk space.

[0065] It can be seen that the page generation method according to the embodiments of the present application obtains the page frame data sent by the prototype design platform. The page frame data is generated by the prototype design platform based on the initial page frame, and the initial page frame is generated by the prototype design platform in response to the received design operation. The page frame data is parsed and processed to obtain sub-frame data of different categories. According to the data conversion method corresponding to the target structure class data in each sub-frame data, the corresponding sub-frame data is subjected to page data reconstruction processing to obtain the corresponding target page design sub-data. Each target page design sub-data is processed to obtain the target page. Thus, the page frame data generated by the prototype design platform is reconstructed in page data in the data conversion mode of the page generation platform, and the target page is developed and run by the page generation platform, shortening the communication time and code writing time and improving the efficiency of page generation.

[0066] Based on the above embodiments, the embodiments of the present application adopt Figure 2 The flowchart details how to perform page data reconstruction processing on the structure class data. Please refer to Figure 2 , Figure 2 is Figure 1 A schematic flowchart of an exemplary embodiment of step S130 in the page generation method shown. Specifically, the process of step S130 performing page data reconstruction processing on the corresponding sub-frame data according to the data conversion method corresponding to the target structure class data in each sub-frame data to obtain the corresponding target page design sub-data specifically includes the following steps:

[0067] S210: In response to detecting that the sub-frame data includes structure class data, the detected structure class data is used as the target structure class data.

[0068] Structure class data generally refers to data with a certain structure or format. These data are organized according to certain rules, making it easier to parse and process the data. In this embodiment, the data stored in the JSON file can be listed as structure class data, and the data in the JSON file is parsed and processed to obtain the structure class data of each object. JSON is often used for data transmission in Web applications. It is a lightweight data exchange format, easy to read and write, and also easy for machines to parse and generate.

[0069] The page generation platform parses and processes the page frame data to obtain sub-frame data of different categories. If it is detected that the sub-frame data is structure class data, the structure class data is directly used as the target structure class data; if it is detected that the sub-frame data is other data except structure class data, the other data is converted into structure class data to obtain the target structure class data.

[0070] S220: Determine the target data conversion template for the object type from the preset mapping relationship library according to the object type in the target structure class data. The preset mapping relationship library includes the corresponding relationship between the object type and the data conversion template.

[0071] The object type can refer to a data type used to describe the structure and actions of an object. Exemplarily, the object type can include, but is not limited to, pictures, texts, links, etc. Different data conversion methods will be adopted for different object types to meet the code rules of the page generation platform.

[0072] The preset mapping relationship library is used to store the corresponding relationship between the object type and the data conversion template. Exemplarily, the preset mapping relationship library is built into the page generation platform and maintained by a components.properties file. Traverse the preset mapping relationship library according to the object type to determine the data conversion template that matches it, and use it as the target data conversion template for the object type. Specifically, the picture type corresponds to the data conversion template for pictures, and the text corresponds to the data conversion template for texts, etc. If a new object type is added to the prototype design platform, a new data conversion template can be added correspondingly to expand the import and parsing function of the page generation platform for the new object type.

[0073] The data conversion template is the template of each component built into the page generation platform. The component corresponds to the object type, so there is also an object relationship between the data conversion template and the object type. The component is the basic element that makes up the page, including input boxes, text boxes, buttons, dialog boxes, pictures, etc. The component has attributes, style configurations, event triggering and response configurations, etc.

[0074] S230: Perform data conversion processing on the target structure class data corresponding to the object type according to the target data conversion template to obtain the corresponding target page design sub-data.

[0075] The page generation platform first obtains the JSON file, parses the JSON file to obtain the sub-frame data of each object, and the sub-frame data is the structure class data; during the process of reconstructing the page data, when the page generation platform detects that the sub-frame data is the structure class data, it will use the detected structure class data as the target structure class data; traverse from the preset mapping relationship library according to the object type of the target structure class data to obtain the corresponding target data conversion template; perform data conversion processing on the target structure class data corresponding to the object type according to the target data conversion template to obtain the corresponding target page design sub-data.

[0076] Specifically, the process of performing data conversion processing on the target structured class data of the corresponding object type according to the target data conversion template to obtain the target page design sub-data of the object may include: obtaining the statement information of the target structured class data corresponding to each object type in the sub-framework data; writing each statement information into the corresponding target data template to obtain the corresponding target page design sub-data. Thus, different statement information is filled into the corresponding positions in the target data template according to the specified requirements. Ensure the accuracy of the information and the consistency of the format, and ensure that each statement information can be correctly recorded in the target data template.

[0077] Statement information may refer to information used to describe a specific code segment, operation step, or data content during programming. Exemplarily, the statement that defines an object in the sub-framework data is determined as the statement information, and at least one statement information is included in a sub-framework data.

[0078] As an example, when the object type of the sub-framework data is of the image type (type: imageBox), its code structure is as follows:

[0079] "packageId": "71c6f7d1de174bf081b02ba7b381c118",

[0080] "type": "Axure:Page",

[0081] "name": "app",

[0082] "diagram": {

[0083] "objects":

[0084] {

[0085] "id": "7ec7cf1f96dc435da741681bfd9f22a1",

[0086] "label": "",

[0087] "friendlyType": "Picture",

[0088] "type": "imageBox",

[0089] "styleType": "imageBox",

[0090] "visible": true,

[0091] "style": {

[0092] "size": {

[0093] "width": 302,

[0094] "height": 302

[0095] },

[0096] "baseStyle": "75a91ee5b9d042cfa01b8d565fe289c0",

[0097] "image": null,

[0098] "location": {

[0099] "x": 103,

[0100] "y": 64

[0101] }

[0102] },"adaptiveStyles": {},

[0103] "imageOverrides": {},

[0104] "images": {

[0105] "normal~": "images / app / u0.png"

[0106] },

[0107] "action": {}

[0108] }

[0110] }

[0111] },

[0112] "objectPaths": {

[0113] "7ec7cf1f96dc435da741681bfd9f22a1": {

[0114] "scriptId": "u0"

[0115] }

[0116] }

[0117] }

[0118] ​Among them, each line of code constitutes a statement information. For example, the line of code "width": 302 is a statement information that limits the width of the image to 302, and "height": 302 is also a statement information that limits the height of the image to 302.

[0119] Write each statement information into the corresponding target data template according to the template rules. The code after writing is as follows:

[0120] {

[0121] "id": "image_u0",

[0122] "description": "",

[0123] "name": "Picture",

[0124] "type": "image",

[0125] "style": {

[0126] "default": {

[0127] "style": {

[0128] "width": "302px",

[0129] "height": "302px"

[0130] }

[0131] }

[0132] },

[0133] "attribute": {

[0134] "basic": {

[0135] "src": "u0.png",

[0136] "fit": "cover"

[0137] },

[0138] "advances": {}

[0139] }

[0140] }

[0141] It can be seen that during the conversion process, according to the attributes of each statement information, it is written into the target data template. For example, the style attribute (style property) in the target structure class data is written into the style of the target data template according to the code rules of the target data template. For the "images": {"normal~": "images / app / u0.png"} in the target structure class data, that is, the image address, the image address is written into the src of the target data template according to the code rules of the target data template, expressed as "src":"u0.png". If the statement information includes interactive statement information, the step of writing each statement information into the corresponding target data template to obtain the corresponding target page design sub-data includes: obtaining the interactive statement information in the target structure class data; writing the interactive statement information in the target structure class data into the interactive statement of the target data template. Thus, a reliable conversion between the sub-framework data of the prototype design platform and the corresponding target data template of the page generation platform is achieved, and the rules of the data template can also be adjusted at will.

[0142] Among them, the interactive statement information refers to statements that interact with users, allowing users to input data or communicate with the program. In the data exported by the prototype design platform, the interactive statement information usually exists in the action attribute (action property), and the interactive statement information in the action attribute is written into the interactive statement in the target data template, such as in the advances field.

[0143] In some other embodiments, the steps of performing data conversion processing on the target structure class data corresponding to the object type according to the target data conversion template to obtain the corresponding target page design sub-data may further include: obtaining the statement information of the target structure class data corresponding to each object type in the sub-framework data; performing compilation processing on each statement information to obtain the compiled statement information; performing translation processing on the compiled statement information to obtain the translated statement information; performing reconstruction processing on the translated statement information to obtain the corresponding target page design sub-data.

[0144] Furthermore, the sub-framework data may include not only structural data but also style data. The steps of performing page data reconstruction processing on the corresponding sub-framework data according to the data conversion method corresponding to the target structure class data in each sub-framework data to obtain the corresponding target page design sub-data include: in response to detecting that the sub-framework data includes structural data and style data, converting the style data into structural data to obtain the target structure class data; performing data conversion processing on the target structure class data corresponding to the object type according to the target data conversion template corresponding to each object type in the target structure class data to obtain the corresponding target page design sub-data.

[0145] The style class data is used to describe the appearance of an HTML document. The prototyping platform can store the styles and content of a page separately. Exemplarily, the style class data can define all visual effects in a page, including but not limited to: text color, background color or image, animation effects, etc.

[0146] In some embodiments, the style class data can be first converted into structure class data to obtain target structure class data; then, according to the target data conversion templates corresponding to each object type in the target structure class data, data conversion processing is performed on the target structure class data corresponding to the object type to obtain the corresponding target page design sub-data. In other embodiments, the structure class data can also be used as the target structure class data, and data conversion processing is performed on the target structure class data corresponding to the object type according to the data conversion templates corresponding to each object type in the target structure class data to obtain the initial page design sub-data; the style class data is written into the initial page design sub-data according to the code rules of the initial page design sub-data. As an example, the style data of each object in the style class data is written under the style attribute of the corresponding object in the initial page design sub-data.

[0147] Specifically, the style class data includes the style data of at least one object, and one structure class data corresponds to one object. The steps of converting the style class data into structure class data to obtain target structure class data include: obtaining the style data of each object in the style class data; writing the style data of each object in the style class data into the corresponding object's structure class data to obtain the target structure class data.

[0148] The style class data includes the style data of at least one object. The style data of the object is associated with the corresponding structure class data through the identity attribute of the object, so that the structure class data can apply its style data to present the corresponding visual effect.

[0149] To conform to the code rules of the page generation platform, the style class data can be first converted into structure class data. For example, the conversion is performed according to the identity attributes of each object, the identity attributes of the objects corresponding to each style data in the style class data are obtained, the corresponding structure class data is determined according to the identity attributes of each object, and the style data of each object is converted into the corresponding structure class data, and half of it is written into the style attribute of the structure class data.

[0150] Further, to ensure data integrity, before the page data reconstruction process, the data integrity of each object can also be verified, which specifically includes the following steps: traverse the data of each sub-framework to obtain the object data of each object in the sub-framework data; in response to the object data of the object indicating that the target structure class data of the object in the sub-framework data is complete, perform page data reconstruction processing on the corresponding sub-framework data according to the data conversion method corresponding to the target structure class data in each sub-framework data to obtain the corresponding target page design sub-data.

[0151] The object data includes the description information of the object. Exemplarily, the data of each sub-framework can be traversed to obtain the object data of each object in the sub-framework data. As an example, the structure class data can be determined as the object data of the corresponding object. As another example, the style data of each object in the style class data can also be combined with the corresponding structure class data to obtain the object data of each object. Exemplarily, the object data can include the size, position, style, ID (Identifier) of the associated style, etc. of the object.

[0152] After obtaining the object data of each object, verify whether the data of each object is complete, that is, verify whether the target structure class data of the object in the sub-framework data is complete. The target structure class data can be the structure class data in the sub-framework data or the data after the style class data is converted to the structure class data. When designing a page, the description information such as the size, position, style, ID (Identifier) of the associated style, etc. of each object in the page belongs to the necessary elements. If the lack of necessary elements causes the target structure class data of the object to be incomplete, it may lead to logical problems or functional defects in the generated page, or even cause the generation to fail.

[0153] Further, it can also be determined whether the dependent resources of each object exist in the corresponding decompression directory. If they exist, it indicates that the target structure class data where each object is located is complete.

[0154] After obtaining the target page by performing running processing on the design sub-data of each target page, the following steps are further included: in response to receiving a page update operation, obtaining the updated page frame data; comparing the updated page frame data with the page frame data before the update to obtain incremental sub-frame data and modified sub-frame data; performing page data reconstruction processing on the incremental sub-frame data according to the data conversion method of the incremental sub-frame data to obtain the design sub-data of the page corresponding to the incremental sub-frame data; performing page data reconstruction processing on the modified sub-frame data according to the data conversion method of the modified sub-frame data to obtain the design sub-data of the page corresponding to the modified sub-frame data; updating the design sub-data of each target page based on the design sub-data of the page corresponding to the incremental sub-frame data and the design sub-data of the page corresponding to the modified sub-frame data to obtain the updated design sub-data of the target page; performing running processing on the updated design sub-data of the target page to obtain the updated target page.

[0155] After obtaining the target page, the page generation platform will save the target page design data and structure data to facilitate obtaining the incrementally updated data by comparison during secondary import. The updated data generally includes newly added data and modifications to the original data. Comparing the updated page frame data with the page frame data before the update to obtain incremental sub-frame data and modified sub-frame data, where the incremental sub-frame data refers to the newly added data and the modified sub-frame data refers to the data that has changed compared to the page frame data before the update. Exemplarily, the modified sub-frame data includes changes to the position, size, interaction, etc. in the sub-frame data. In this embodiment, the structure data is saved after each page generation, so only the changed parts need to be reconstructed during the update, and the rest remains unchanged. This can reduce repetitive work and improve the flexibility and efficiency of application development.

[0156] For the specific page update operation, please refer to Figure 3, after receiving a page update operation, the page generation platform obtains the updated page framework data from the prototype design platform; decompresses and verifies the updated page framework data to determine whether the object data of each object is complete. If it is incomplete, an exception prompt is given; if it is complete, it is determined whether to perform incremental overwrite, that is, whether there are unmodified parts in the updated page framework data compared with the page framework data before the update. If so, the most recently imported structural data is compared to obtain the incremental sub-framework data and the changed sub-framework data. Then, partial parsing and conversion are performed. The incremental sub-framework data is processed for page data reconstruction according to the data conversion method of the incremental sub-framework data to obtain the page design sub-data corresponding to the incremental sub-framework data. The changed sub-framework data is processed for page data reconstruction according to the data conversion method of the changed sub-framework data to obtain the page design sub-data corresponding to the changed sub-framework data. Based on the page design sub-data corresponding to the incremental sub-framework data and the page design sub-data corresponding to the changed sub-framework data, each target page design sub-data is updated to obtain the updated target page design sub-data. The updated target page design sub-data is combined and spliced to obtain the updated target page design data. The updated target page design data is processed to obtain the updated target page; if there are no unmodified parts, full parsing and conversion are performed, that is, the updated page framework data is parsed to obtain sub-framework data of different categories. The corresponding sub-framework data is processed for page data reconstruction according to the data conversion method corresponding to the target structural data in each sub-framework data to obtain the updated target page design sub-data. The target page design sub-data is combined and spliced to obtain the updated target page design data. The updated target page design data is processed to obtain the updated target page; finally, resource upload is performed to complete the application development.

[0157] To elaborate on the application of the present application to the page generation method in detail, the following Figure 4 framework diagram is used for further illustration, as follows:

[0158] First, the UE designer completes the prototype diagram design output on the Axure RP prototype design platform based on the four elements of page, component, interaction, and resource. The specific process includes: page creation, first creating the application function page; component configuration, forming page units by dragging and dropping components; interaction configuration, configuring interaction functions for some components, such as configuring actions such as triggering a pop-up prompt when a button is clicked; finally, publishing and exporting. In response to the export operation of the UE designer, the prototype design platform packs these files into a complete folder to form a prototype diagram product package (page framework data).

[0159] The application developer receives the prototype diagram product package sent by the prototype design platform and imports the prototype diagram product package into the page generation platform for further development, including configuring the application data source, configuring the connector method, etc. The page generation platform can be a low-code platform. The low-code platform is deployed and extended based on the container cloud platform with a cloud-native architecture. It can be split into a front-end, an internal gateway, platform services, application publishing, and a common middleware service module according to functions. The front-end communicates with the developer through an external gateway and operates the low-code platform through the front-end and the internal gateway. The platform services convert the prototype diagram product package into target page design data and then perform application publishing, including two processes: publishing and canceling publishing; the middleware includes a database, a configuration center, a registration center, a storage center, and a unified authentication center; after the application is published, users can use the application through the external gateway. The platform services complete the page data reconstruction process for the page frame data. Specifically, before the page data reconstruction process, the object data of each object is decompressed and verified to determine whether the data is complete; if it is complete, the page frame data is parsed and converted, including structural data conversion, style data conversion, and interaction data conversion; the page generation platform will build a preset mapping relationship library in it, and the preset mapping relationship library includes the object relationship between the object type and the data template; first, determine the target data template from the preset mapping relationship library according to the object type of the structural data, and perform data conversion processing on the structural data corresponding to the object type according to the target data template to obtain the initial page design sub-data; for the style data, the corresponding initial page design sub-data can be determined according to the identity attributes of each object in the style data; convert the style data of each object in the style data to the corresponding initial page design sub-data; for the interaction data, similarly, convert the interaction data to the corresponding initial page design sub-data according to the identity attributes of the object described in the interaction data; after all the sub-frame data is converted, the target page design sub-data is obtained; finally, the target page design sub-data is combined into a complete target page design data; and perform optimization processing on the target page design data to obtain the optimized target page design data; finally, upload the resource file to complete the application development.

[0160] Perform application publishing on the completed application. Application publishing includes publishing and canceling publishing. After successful publishing, users can download and use it on the terminal.

[0161] In the above solution, the page frame data of the prototype design platform is converted into data that conforms to the structural rules of the low-code platform, and then the page can be rendered through the low-code engine. This not only reduces the repetitive configuration work of developers in page and action interactions, but also ensures the consistency of the application in prototype design and application development by standardizing the program to convert the page frame data. At the same time, developers can also make secondary modifications and adjustments to the page style and interactions of the application on the low-code platform, improving the flexibility of application development.

[0162] Please refer to Figure 5 , Figure 5 which is a schematic structural diagram of an exemplary embodiment of the page generation device shown in the present application. The page generation device 500 includes an acquisition module 510, a parsing module 520, a reconstruction module 530, and an operation module 540. The acquisition module 510 is configured to acquire page frame data sent by a prototype design platform. The page frame data is generated by the prototype design platform based on an initial page frame, and the initial page frame is generated by the prototype design platform in response to a received design operation. The parsing module 520 is configured to perform parsing processing on the page frame data to obtain sub-frame data of different categories. The reconstruction module 530 is configured to perform page data reconstruction processing on the corresponding sub-frame data according to the data conversion method corresponding to the target structure class data in each sub-frame data to obtain corresponding target page design sub-data. The operation module 540 is configured to perform operation processing on each target page design sub-data to obtain a target page.

[0163] In the above solution, the page generation device acquires page frame data sent by the prototype design platform. The page frame data is generated by the prototype design platform based on the initial page frame, and the initial page frame is generated by the prototype design platform in response to the received design operation. It performs parsing processing on the page frame data to obtain sub-frame data of different categories. It performs page data reconstruction processing on the corresponding sub-frame data according to the data conversion method corresponding to the target structure class data in each sub-frame data to obtain corresponding target page design sub-data. It performs operation processing on each target page design sub-data to obtain a target page. Thus, the page frame data generated by the prototype design platform is reconstructed in page data in the data conversion mode of the page generation platform, and the target page is developed and run by the page generation platform, shortening the communication time and code writing time and improving the efficiency of page generation.

[0164] Among them, the functions of each module can be referred to the embodiments of the page generation method, which will not be elaborated here.

[0165] To implement the page generation method of the above embodiment, the present application proposes another electronic device. Please specifically refer to Figure 6 , Figure 6 which is a schematic structural diagram of an embodiment of the electronic device provided by the present application.

[0166] The electronic device 600 includes a memory 610 and a processor 620. Among them, the memory 610 and the processor 620 are coupled.

[0167] The memory 610 is used to store program data, and the processor 620 is used to execute the program data to implement the page generation method of the above embodiment.

[0168] In this embodiment, the processor 620 may also be referred to as a CPU (Central Processing Unit). The processor 620 may be an integrated circuit chip with signal processing capabilities. The processor 620 may also be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. The general-purpose processor may be a microprocessor, or the processor 620 may also be any conventional processor, etc.

[0169] The present application also provides a computer-readable storage medium, such as Figure 7 shown, the computer-readable storage medium 700 is used to store program data 710, and when the program data 710 is executed by the processor, it is used to implement the page generation method in the method embodiment of the present application.

[0170] In the method embodiment of the page generation method of the present application, when the method exists in the form of a software function unit and is sold or used as an independent product, it can be stored in a device, such as a computer-readable storage medium. Based on this understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or all or part of this 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 enable a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor to execute all or part of the steps of the methods described in various embodiments of the present invention. The aforementioned storage medium includes: USB flash drives, mobile hard disks, read-only memories (ROMs), random access memories (RAMs), magnetic disks, or optical discs, etc., which can store program codes.

[0171] The above are only the embodiments of the present application, and do not limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made by using the content of the specification and drawings of the present application, or directly or indirectly applied in other related technical fields, shall be equally included in the patent protection scope of the present application.

Claims

1. A page generation method, characterized in that: The method is applied to a page generation platform, which is a low-code platform, and the method includes: Acquire page frame data sent by the prototype design platform, the page frame data is generated by the prototype design platform based on the initial page frame, the initial page frame is generated by the prototype design platform in response to the received design operation, and the page frame data is the corresponding code file generated by the prototype design platform according to the initial page frame; Parsing the page frame data to obtain sub-frame data of different categories; According to the data conversion method corresponding to the target structure data in each sub-frame data, the corresponding sub-frame data is subjected to page data reconstruction processing to obtain the corresponding target page design sub-data, wherein the data conversion method is a method of converting the sub-frame data into data that meets the rules of the page generation platform; Performing operation processing on each target page design sub-data to obtain the target page; The sub-frame data includes structure data, and the step of performing page data reconstruction processing on the corresponding sub-frame data according to the data conversion mode corresponding to the target structure data in each sub-frame data to obtain the corresponding target page design sub-data includes: In response to detecting that the sub-frame data includes structure data, taking the detected structure data as target structure data; Determining a target data conversion template of the object type from a preset mapping relationship library according to the object type in the target structure class data, wherein the preset mapping relationship library includes a correspondence between the object type and the data conversion template; The target structure class data corresponding to the object type is converted according to the target data conversion template to obtain corresponding target page design sub-data, wherein each statement information in the target structure class data is written into the corresponding target data conversion template according to template rules.

2. The page generation method according to claim 1, characterized in that: The step of performing data conversion processing on the target structure class data corresponding to the object type according to the target data conversion template to obtain corresponding target page design sub-data includes: Acquire statement information of target structure class data corresponding to each object type in the sub-frame data; Write each statement information into the corresponding target data template to obtain the corresponding target page design sub-data.

3. The page generation method according to claim 2, characterized in that: The statement information includes interactive statement information, and the step of writing each statement information into a corresponding target data template to obtain corresponding target page design sub-data includes: Obtaining interactive statement information in the target structure data; The interaction statement information in the target structure class data is written into the interaction statement of the target data template.

4. The page generation method according to claim 1, characterized in that: The sub-frame data includes style data and structure data, and the step of performing page data reconstruction processing on the corresponding sub-frame data according to the data conversion mode corresponding to the target structure data in each sub-frame data to obtain the corresponding target page design sub-data includes: In response to detecting that the sub-frame data includes structure data and style data, converting the style data into structure data to obtain target structure data; The target structure class data corresponding to the object type is subjected to data conversion processing according to the target data conversion template corresponding to each object type in the target structure class data to obtain corresponding target page design sub-data.

5. The page generation method according to claim 4, characterized in that: The style class data includes style data of at least one object, one structure class data corresponds to one object, and in response to detecting that the sub-frame data includes structure class data and style class data, the step of converting the style class data into structure class data to obtain target structure class data includes: Obtaining style data of each object in the style class data; The style data of each object in the style class data is written into the structure class data of the corresponding object to obtain the target structure class data.

6. The page generation method according to claim 1, characterized in that: The sub-frame data includes object data of at least one object. Before the step of performing page data reconstruction processing on the corresponding sub-frame data according to the data conversion mode corresponding to the target structure class data in each sub-frame data to obtain the corresponding target page design sub-data, the method further includes: Performing traversal processing on each sub-frame data to obtain object data of each object in the sub-frame data; In response to the object data of the object representing that the target structure class data of the object in the sub-frame data is complete, the corresponding sub-frame data is reconstructed according to the data conversion method corresponding to the target structure class data in each sub-frame data to obtain the corresponding target page design sub-data.

7. The page generation method according to claim 1, characterized in that: After the step of performing operation processing on each target page design sub-data to obtain the target page, the method further includes: In response to receiving a page update operation, obtaining updated page frame data; Compare the updated page frame data with the page frame data before updating to obtain incremental sub-frame data and modified sub-frame data; Performing page data reconstruction processing on the incremental sub-frame data according to the data conversion method of the incremental sub-frame data to obtain page design sub-data corresponding to the incremental sub-frame data; Performing page data reconstruction processing on the changed sub-frame data according to the data conversion method of the changed sub-frame data to obtain page design sub-data corresponding to the changed sub-frame data; Based on the page design sub-data corresponding to the incremental sub-frame data and the page design sub-data corresponding to the modified sub-frame data, each target page design sub-data is updated to obtain updated target page design sub-data; The updated target page design sub-data is run and processed to obtain an updated target page.

8. An electronic device, characterized in that: include: A memory and a processor, wherein the memory stores program instructions, and the processor retrieves the program instructions from the memory to execute the method according to any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that: include: Program data is stored, and when the program data is executed by a processor, it is used to implement the method according to any one of claims 1 to 7.

Images