Page generation method, electronic equipment and computer readable storage medium

Abstract

The invention discloses a page generation method, electronic equipment and a computer readable storage medium, and the method comprises the steps: obtaining page frame data sent by a prototype graph design platform, the page frame data being generated by the prototype graph design platform based on an initial page frame, the initial page frame is generated by the prototype graph design platform in response to the received design operation; analyzing and processing the page frame data to obtain different types of sub-frame data; performing page data reconstruction processing on the corresponding sub-frame data according to a data conversion mode corresponding to the target structure class data in each sub-frame data to obtain corresponding target page design sub-data; and performing operation processing on each target page design sub-data to obtain a target page. Therefore, the page generation efficiency 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 usually includes processes such as demand introduction, demand 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 actual operable interface, developers need to develop code based on the prototype to generate an operable target page.

[0003] In order to save development time, prototype designers will complete the design of prototypes on professional prototype design platforms, which will automatically generate corresponding page framework data. However, this page framework data is a static web page and cannot be used directly. Developers need to spend a lot of time to write prototypes into operable display pages, which reduces the efficiency of application development. Summary of the invention

[0004] The main technical problem solved by the present 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] In order to solve the above technical problems, a technical solution adopted in the present application is: a page generation method is provided, the method comprising: obtaining 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; parsing the page frame data to obtain sub-frame data of different categories; reconstructing the corresponding sub-frame data according to the data conversion method corresponding to the target structure data in each sub-frame data to obtain the corresponding target page design sub-data; and running each target page design sub-data to obtain the target page.

[0006] In some embodiments, the sub-frame data includes structure class data, and 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 includes: in response to detecting that the sub-frame data includes structure class data, using the detected structure class data as the target structure class 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 structure class data, the preset mapping relationship library including the correspondence between the object type and the data conversion template; 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.

[0007] In some embodiments, 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 the corresponding target page design sub-data includes: obtaining statement information of the target structure class data corresponding to each object type in the sub-frame 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 interactive statement information, and 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; and writing the interactive statement information in the target structure class data into the interactive statement of the target data template.

[0009] In some embodiments, the sub-frame data includes style class data and structure class data, and 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 includes: in response to detecting that the sub-frame data includes structure class data and style class data, converting the style class data into structure class 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.

[0010] In some embodiments, 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 style class data is converted into structure class data to obtain target structure class data, including: 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 object data of at least one object. Before the step of reconstructing the page data of 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 also 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 representing that the target structure class data of the object in the sub-frame data is complete, reconstructing the page data of 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 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; comparing the updated page frame data with the page frame data before the update to obtain incremental sub-frame data and 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 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; 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 updated target page design sub-data; performing operation processing on the updated target page design sub-data to obtain an updated target page.

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

[0014] In order to solve the above technical problem, another technical solution adopted by the present application is: providing a computer-readable storage medium including program data stored therein, wherein the program data is used to implement the above page generation method when executed by a processor.

[0015] Compared with the traditional method of manually adapting the prototype image, which leads to the problem of low efficiency of page generation, the above scheme proposes a page generation method, which includes: obtaining 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; parsing the page frame data to obtain sub-frame data of different categories; reconstructing the corresponding sub-frame data according to the data conversion method corresponding to the target structure data in each sub-frame data to obtain the corresponding target page design sub-data; running each target page design sub-data to obtain the target page. In this way, the page frame data generated by the prototype design platform is reconstructed in the data conversion method of the page generation platform, and the development and operation of the target page are completed by the page generation platform, which shortens the communication time and code writing time and improves the efficiency of page generation. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments are briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative work, among which: Figure 1 It is a flowchart of an exemplary embodiment of a page generation method shown in the present application; Figure 2 yes Figure 1 A flow chart of an exemplary embodiment of step S130 in the page generation method is shown; Figure 3 yes Figure 1 A flowchart of an exemplary embodiment of a page update operation is shown; Figure 4 It is a schematic diagram of a framework of an exemplary embodiment of a page generation method shown in the present application; Figure 5 It is a structural schematic diagram of an exemplary embodiment of a page generating device shown in the present application; Figure 6 It is a structural schematic diagram of an embodiment of an electronic device provided by the present application; Figure 7 It is a structural schematic diagram of an embodiment of a computer-readable storage medium provided by the present application. DETAILED DESCRIPTION

[0017] The technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. It will be appreciated that the specific embodiments described herein are only used to explain the present application, rather than to limit the present application. It should also be noted that, for ease of description, only some but not all structures related to the present application are shown in the drawings. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the art without making creative work are within the scope of protection of the present application.

[0018] First of all, it should be noted that the development process of traditional application software mostly needs to go through the following steps, such as demand introduction, demand analysis, software design, code development, test release, installation and deployment, on-site debugging, delivery and use, etc., which have problems such as long development cycle and high development cost. With the development and application of low-code technology, application software can be developed through low-code platforms and simplified into five steps: demand analysis, prototype design, application construction, online verification, and release and use.

[0019] However, in actual development scenarios, in order to ensure product quality and user experience, product prototype design and application development are both divided into two parts. Figure 1 It is usually completed by a professional product manager or user experience designer (User Experience Designer, UE designer), and then handed over to the application developer for development. The two often need to communicate and collaborate constantly, which affects development efficiency and increases communication costs.

[0020] At the same time, traditional application development is to first store the page framework data provided by the prototype design platform into the database, and then establish corresponding pages, library tables and interfaces. This method faces the problem of difficulty in modification, does not support users to make secondary modifications, and lacks customization flexibility.

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

[0022] The execution subject of the page generation method may be a terminal device or a server or other processing device, wherein the terminal device may 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 subject of the page generation method may also be a page generation platform. In some possible implementations, the page generation method may be implemented by a processor calling a computer-readable instruction stored in a memory.

[0023] Specifically, the page generation method of this embodiment includes the following steps: S110: Acquire page frame data sent by the 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.

[0024] A prototyping design platform is a tool for creating design drawings for applications or websites. The prototyping design platform allows designers to build interface layouts, add interactive elements, and test user experience processes without writing code. Exemplarily, the prototyping design platform can be Sketch, Adobe XD (Adobe Experience Design), Figma, and Axure. Among them, Axure can not only help designers create static page layouts, but also be used to implement interactive prototypes, support the release and export of specific page framework data, and can also be called a prototype product package.

[0025] The page frame data is generated by the prototype design platform based on the initial page frame. After the UE designer (User Experience Designer) draws the initial page frame on the prototype design platform, the prototype design platform can directly generate the corresponding code file based on the designed initial page frame to form the page frame data. Specifically, the page frame 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 frame data.

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

[0027] The user can use the tools provided by the prototype design platform by dragging and dropping the design operation through the media such as the drawing pen and the mouse. After receiving the design operation of the user, the prototype design platform generates the initial page framework according to the design operation.

[0028] The page generation platform obtains the page frame data sent by the prototype design platform. After receiving the design operation, the prototype design platform generates an initial page frame based on the design operation. After receiving the export operation, the prototype design platform packages the files of the initial page frame into a folder to obtain the page frame data.

[0029] Exemplarily, the page generation platform can be a low-code platform, which is a zero-code, low-code, 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 system"), Salesforce Lightning (literally translated as "Salesforce Lightning"), etc. The low-code platform is deployed and expanded based on a container cloud platform with a cloud-native architecture. It can be divided into business modules such as front-end (web), internal gateway (gateway), platform service (platform), application release (devops) and public middleware service modules according to functional type. The front end (web) contains application components, page rendering engines, and application editors, which render and configure corresponding application pages and event responses between components according to specific application framework information; the internal gateway (gateway) is mainly used for filtering, interception, routing, and access control 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, authority management, application management, and data source management; application publishing (devops) is the core module of the low-code platform related to application deployment, responsible for core functions such as application publishing, unpublishing, and status detection; the middleware includes databases (such as MySQL), configuration centers, registration centers, storage centers, and unified authentication centers; the external gateway is used to communicate 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.

[0030] S120: parsing the page frame data to obtain sub-frame data of different categories.

[0031] Subframe data is part of page frame data. Exemplarily, the page frame data can be parsed to obtain subframe data of different categories. Specifically, the page frame data is imported into the page generation platform, and the platform service in the page generation platform decompresses the page frame data, and classifies the decompressed subframes according to the suffix name and content of the subframe data to obtain subframe data of different categories. Later, for easy acquisition, each subframe data can be stored in a temporary directory file according to the category of the subframe data. As an example, the temporary directory file is as follows: app.html / / Application HTML file data document.js styles.css files app / / application data data.js / / JavaScript script file for structured data styles.css / / Style class data images app / / Custom image files used by the application u0.png index.html plugins resources start_c_1.html start.html start_with_pages.html The sub-frame data includes structure data, style data, etc. Exemplarily, the structure data is stored in files / app / data.js, and the style data is stored in files / app / styles.css, etc.

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

[0033] The target structural data may refer to data to be reconstructed. For example, the structural data may be used as the target structural data, or the style data may be converted into the structural data and the converted structural data may be used as the target structural data; or the interactive data may be converted into the structural data and the converted structural data may be used as the target structural data.

[0034] The data conversion method is a method of converting subframe data into data that meets 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 structure data. The page frame data includes subframe data such as structure data and style data. The structure data includes object types and also includes limiting statements corresponding to the object types. For example, the structure data of the object type is a picture, which includes statements that limit the length, width, height, etc. of the picture. An object type can correspond to at least one object, and each object has an identity attribute that represents its identity.

[0035] The target page design sub-data refers to the data reconstructed from the sub-frame data. Exemplarily, the sub-frame data can be converted by a corresponding data conversion method to obtain the target page design sub-data.

[0036] S140: performing operation processing on each target page design sub-data to obtain the target page.

[0037] The target page is an operational page. Exemplarily, each target page design sub-data can be run and processed 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; the target page design data is subjected to redundancy optimization processing to obtain the target page design data after redundancy optimization processing. Among them, the strategy of redundant optimization processing includes but is not limited to: multiple objects using the same style class data can be simplified into one storage, and in addition, some identical interactive action triggers can also be simplified. This optimization not only ensures that the data will not be bloated due to repetition, but also further improves the rendering speed of page loading. Then, the optimized target page design data and the original structure class data (data.json) are saved to the database together.

[0038] Finally, the resource files required for the target page design data, such as pictures and fonts, 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. In order 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 the decompression of the prototype product package, to release the occupied disk space.

[0039] It can be seen that the page generation method of the embodiment 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. 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; the corresponding sub-frame data is reconstructed according to the data conversion method corresponding to the target structure data in each sub-frame data to obtain the corresponding target page design sub-data; each target page design sub-data is run and processed to obtain the target page. In this way, the page frame data generated by the prototype design platform is reconstructed in the data conversion method of the page generation platform, and the development and operation of the target page is completed by the page generation platform, which shortens the communication time and code writing time and improves the efficiency of page generation.

[0040] Based on the above embodiments, the embodiments of the present application adopt Figure 2 The flowchart details how to reconstruct page data for structured data. Figure 2 , Figure 2 yes Figure 1The flowchart of an exemplary embodiment of step S130 in the page generation method is shown. Specifically, step S130 performs page data reconstruction processing on the corresponding sub-frame data according to the data conversion method corresponding to the target structure data in each sub-frame data, and the process of obtaining the corresponding target page design sub-data specifically includes the following steps: S210: In response to detecting that the sub-frame data includes structure data, taking the detected structure data as target structure data.

[0041] Structural data generally refers to data with a certain structure or format, which is 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 structural data, and the data in the JSON file can be parsed and processed to obtain the structural data of each object. JSON is commonly used for data transmission in Web applications. It is a lightweight data exchange format that is easy to read and write, and is also easy for machines to parse and generate.

[0042] 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 structural data, the structural data is directly used as the target structural data; if it is detected that the sub-frame data is other data except structural data, the other data is converted into structural data to obtain the target structural data.

[0043] S220: Determine 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. The preset mapping relationship library includes a correspondence between the object type and the data conversion template.

[0044] An object type may refer to a data type used to describe the structure and action of an object. For example, an object type may include, but is not limited to, images, texts, links, etc. Different data conversion methods may be used for different object types to meet the code rules of the page generation platform.

[0045] The preset mapping relationship library is used to store the correspondence between object types and data conversion templates. Exemplarily, the preset mapping relationship library is built into the page generation platform and maintained by a components.properties file. It traverses the preset mapping relationship library according to the object type, determines the data conversion template that matches it, and uses it as the target data conversion template for the object type. Specifically, the image type corresponds to the image data conversion template, the text corresponds to the text data conversion template, and so on. If the prototype design platform adds a new object type, a new data conversion template can be added accordingly, expanding the page generation platform's import and parsing function for the new object type.

[0046] Data conversion templates are templates for components built into the page generation platform. Components correspond to object types, so there is also an object relationship between data conversion templates and object types. Components are the basic elements that make up a page, including input boxes, text boxes, buttons, dialog boxes, pictures, etc. Components have properties, style configurations, event triggers, and response configurations.

[0047] 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 corresponding target page design sub-data.

[0048] The page generation platform first obtains the JSON file, parses the JSON file, and obtains the sub-frame data of each object, which is structural data; during the process of page data reconstruction, the page generation platform detects that the sub-frame data is structural data, and uses the detected structural data as the target structural data; according to the object type of the target structural data, the corresponding target data conversion template is traversed from the preset mapping relationship library; according to the target data conversion template, the target structural data of the corresponding object type is converted to obtain the corresponding target page design sub-data.

[0049] Specifically, the process of performing data conversion processing on the target structure 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 structure class data corresponding to each object type in the sub-frame 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 position in the target data template according to the specified requirements. The accuracy of the information and the consistency of the format are guaranteed to ensure that each statement information can be correctly recorded in the target data template.

[0050] Statement information may refer to information used to describe a specific code segment, operation steps or data content during programming. Exemplarily, a statement defining an object in the sub-frame data is determined as statement information, and one sub-frame data includes at least one statement information.

[0051] As an example, when the object type of the subframe data is a picture type (type: imageBox), the code structure is as follows: "packageId": "71c6f7d1de174bf081b02ba7b381c118", "type": "Axure:Page", "name": "app", "diagram": { "objects": [ { "id": "7ec7cf1f96dc435da741681bfd9f22a1", "label": "", "friendlyType": "Image", "type": "imageBox", "styleType": "imageBox", "visible": true, "style": { "size": { "width": 302, "height": 302 }, "baseStyle": "75a91ee5b9d042cfa01b8d565fe289c0", "image": null, "location": { "x": 103, "y": 64 } },"adaptiveStyles": {}, "imageOverrides": {}, "images": { "normal~": "images / app / u0.png" }, "action": {} } ] } }, "objectPaths": { "7ec7cf1f96dc435da741681bfd9f22a1": { "scriptId": "u0" } } } Each line of code constitutes a statement information. For example, the line of code "width": 302 is a statement information, which limits the width of the image to 302. "height": 302 is also a statement information, which limits the height of the image to 302.

[0052] Write each statement information into the corresponding target data template according to the template rules. The written code is as follows: { "id": "image_u0", "description": "", "name": "Picture", "type": "image", "style": { "default": { "style": { "width": "302px", "height": "302px" } } }, "attribute": { "basic": { "src": "u0.png", "fit": "cover" }, "advances": {} } } It can be seen that in the conversion process, the attributes of each statement information are written into the target data template. For example, the style attribute (style attribute) 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, and the "images": {"normal~": "images / app / u0.png"} in the target structure class data, that is, 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, each statement information is written into the corresponding target data template to obtain the corresponding target page design sub-data, including: 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. In this way, reliable conversion between the sub-frame data of the prototype design platform and the target data template corresponding to the page generation platform is achieved, and the rules of the data template can be adjusted at will.

[0053] The interactive statement information refers to the statements that interact with the user, allowing the user to input data or communicate with the program. In the data exported by the prototyping platform, the interactive statement information usually exists in the action attribute (action attribute). The interactive statement information in the action attribute is written into the interactive statement in the target data template, such as the advances field.

[0054] In other embodiments, 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 the corresponding target page design sub-data may also include: obtaining statement information of the target structure class data corresponding to each object type in the sub-frame data; compiling each statement information to obtain compiled statement information; translating the compiled statement information to obtain translated statement information; reconstructing the translated statement information to obtain the corresponding target page design sub-data.

[0055] Furthermore, the sub-frame data may include not only structure class data but also style class data. The steps of reconstructing the page data of 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 include: in response to detecting that the sub-frame data includes structure class data and style class data, converting the style class data into the structure class 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.

[0056] Style data is used to describe the appearance of an HTML document. The prototype design platform can store the style and content of a page separately. For example, style data can define all visual effects in a page, including but not limited to: text color, background color or image, animation effects, etc.

[0057] In some embodiments, the style class data may be first converted into the structure class data to obtain the target structure class data; then, the target structure class data corresponding to the object type may be converted 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. In other embodiments, the structure class data may be first used as the target structure class data, and the target structure class data corresponding to the object type may be converted according to the data conversion template corresponding to each object type in the target structure class data to obtain the initial page design sub-data; the style class data may be 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 into the style attribute of the corresponding object in the initial page design sub-data.

[0058] Specifically, the style class data includes style data of at least one object, one structure class data corresponds to one object, and the steps of converting the style class data into the structure class data to obtain the 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 structure class data of the corresponding object to obtain the target structure class data.

[0059] The style data includes style data of at least one object. The style data of the object is associated with the corresponding structure data through the identity attribute of the object, so that the structure data applies its style data and presents a corresponding visual effect.

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

[0061] Furthermore, in order to ensure data integrity, before the page data is reconstructed, the data of each object can also be checked for integrity, which specifically includes the following steps: traversing each sub-frame data to obtain the object data of each object in the sub-frame data; in response to the object data 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.

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

[0063] After obtaining the object data of each object, check whether the data of each object is complete, that is, check whether the target structure data of the object in the sub-frame data is complete. The target structure data can be the structure data in the sub-frame data, or the data after the style data is converted to the structure data. When designing a page, the descriptive information such as the size, position, style, and ID (Identifier) ​​of each object in the page is a necessary element. If the necessary elements are missing, the target structure data of the object is incomplete, which may cause the generated page to have logical problems or functional defects, or even fail to generate.

[0064] Furthermore, it is also possible to determine whether the dependent resources of each object exist in the corresponding decompression directory. If so, it indicates that the target structure class data of each object is complete.

[0065] After the step of executing the processing on each target page design sub-data to obtain the target page, it also includes: in response to receiving a page update operation, obtaining 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 changed sub-frame data; reconstructing 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; reconstructing 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 updated target page design sub-data; executing the processing on the updated target page design sub-data to obtain an updated target page.

[0066] After obtaining the target page, the page generation platform will save the target page design data and structural data to facilitate the comparison and acquisition of incremental updated data during the secondary import. Updated data generally includes newly added data and changes to the original data. The updated page frame data is compared with the page frame data before the update to obtain incremental sub-frame data and changed sub-frame data, wherein the incremental sub-frame data refers to newly added data, and the changed sub-frame data refers to data that has changed relative to the page frame data before the update. Exemplarily, changing the sub-frame data includes changing the position, size, interaction, etc. in the sub-frame data. In this embodiment, the structural data will be saved after each page is generated, so when updating, only the changed part needs to be reconstructed, and the rest remains unchanged. This can reduce repetitive work and improve the flexibility and efficiency of application development.

[0067] For details on page update operations, see Figure 3 After receiving the page update operation, the page generation platform obtains the updated page frame data from the prototype design platform; decompresses and verifies the updated page frame data to determine whether the object data of each object is complete, and if not, an exception prompt is given; if it is complete, it determines whether it is an incremental overwrite, that is, whether there is an unmodified part in the updated page frame data relative to the page frame data before the update, and if so, it compares the most recently imported structural data to obtain the incremental sub-frame data and the changed sub-frame data, and then performs partial parsing and conversion, and reconstructs 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, and reconstructs 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. Update each target page design sub-data with the page design sub-data corresponding to the changed sub-frame data to obtain the updated target page design sub-data, combine and splice the updated target page design sub-data to obtain the updated target page design data, run the processing on the updated target page design data to obtain the updated target page; if there is no unmodified part, perform full parsing and conversion, that is, parse and process the updated page frame data to obtain sub-frame data of different categories, reconstruct the page data of the corresponding sub-frame data according to the data conversion method corresponding to the target structure data in each sub-frame data, obtain the updated target page design sub-data, combine and splice the target page design sub-data to obtain the updated target page design data, run the processing on the updated target page design data to obtain the updated target page; finally, upload resources to complete application development.

[0068] In order to elaborate on the page generation method of the present application, Figure 4 The framework diagram shown further illustrates it, as follows: First, the UE designer completes the prototype design output based on the four elements of page, component, interaction and resource on the Axure RP prototype design platform. The specific process includes: page creation, first create the application function page; component configuration, drag and drop components to form page units; interaction configuration, configure interactive functions for some components, such as configuring buttons to trigger pop-up prompts when clicked; finally, publish and export. In response to the export operation of the UE designer, the prototype design platform packages these files into a complete folder to form a prototype product package (page framework data).

[0069] The application developer receives the prototype product package sent by the prototype design platform and imports the prototype 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 expanded based on the container cloud platform of the cloud native architecture. It can be divided into front-end, internal gateway, platform service, application release and public middleware service modules according to its functions. The front-end communicates with the developer through the external gateway, and operates the low-code platform through the front-end and internal gateway. The platform service converts the prototype product package into the target page design data and then releases the application, including the two processes of release and cancellation. The middleware includes database, configuration center, registration center, storage center and unified authentication center. After the application is released, users can use the application through the external gateway. The page data reconstruction processing of the page framework data is completed by the platform service. Specifically, before the page data reconstruction process is performed, the object data of each object is first decompressed and verified to determine whether the data is complete; if it is complete, the page frame data is parsed and converted, including structure data conversion, style data conversion and interaction data conversion; the page generation platform will have a built-in preset mapping relationship library, which includes the object relationship between object type and data template; first determine the target data template from the preset mapping relationship library according to the object type of the structure data, and perform data conversion processing on the structure data corresponding to the object type according to the target data template to obtain the initial page design sub-data; for style data, the corresponding initial page design sub-data can be determined according to the identity attributes of each object in the style data; the style data of each object in the style data is converted into the corresponding initial page design sub-data; for interaction data, the interaction data is also converted into the corresponding initial page design sub-data according to the identity attributes of the object described by the interaction data; after all sub-frame data are converted, the target page design sub-data is obtained; finally, the target page design sub-data are combined into a complete target page design data; and the target page design data is optimized to obtain the optimized target page design data; finally, the resource file is uploaded to complete the application development.

[0070] The completed application is published. Application publishing includes publishing and canceling. When the publishing is successful, the user can download and use it on the terminal.

[0071] The above solution converts the page framework data of the prototype design platform 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, which not only reduces the developer's repeated configuration work on the page and action interaction, but also converts the page framework data through a standardized program to ensure the consistency of the application in prototype design and application development. At the same time, developers can also make secondary modifications to the application's page style and interaction on the low-code platform, which improves the flexibility of application development.

[0072] See also Figure 5 , Figure 5 It is a 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 used to acquire 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. The initial page frame is generated by the prototype design platform in response to the received design operation; the parsing module 520 is used to parse the page frame data to obtain sub-frame data of different categories; the reconstruction module 530 is used to reconstruct 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 operation module 540 is used to run each target page design sub-data to obtain the target page.

[0073] In the above scheme, the page generation device 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. 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; the corresponding sub-frame data is reconstructed according to the data conversion method corresponding to the target structure data in each sub-frame data to obtain the corresponding target page design sub-data; each target page design sub-data is run to obtain the target page. In this way, the page frame data generated by the prototype design platform is reconstructed according to the data conversion method of the page generation platform, and the development and operation of the target page are completed by the page generation platform, which shortens the communication time and code writing time and improves the efficiency of page generation.

[0074] The functions of each module can be found in the embodiment of the page generation method, which will not be described in detail here.

[0075] In order to implement the page generation method of the above embodiment, the present application proposes another electronic device, for details, please refer to Figure 6 , Figure 6 It is a structural schematic diagram of an embodiment of an electronic device provided by the present application.

[0076] The electronic device 600 includes a memory 610 and a processor 620 , wherein the memory 610 and the processor 620 are coupled.

[0077] 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.

[0078] 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 having 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, discrete hardware components. A general-purpose processor may be a microprocessor or the processor 620 may also be any conventional processor, etc.

[0079] The present application also provides a computer-readable storage medium, such as Figure 7 As shown, the computer-readable storage medium 700 is used to store program data 710. 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.

[0080] The method involved in the embodiment of the page generation method of the present application, when implemented in the form of a software functional unit and sold or used as an independent product, can be stored in a device, such as a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) or a processor (processor) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program code.

[0081] The above description is only an implementation method of the present application, and does not limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly used in other related technical fields, are also 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, and the method comprises: Acquire page frame data sent by the prototype design platform, wherein 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; 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 reconstructed to obtain the corresponding target page design sub-data; The design sub-data of each target page are processed to obtain the target page.

2. The page generation method according to claim 1, characterized in that: 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.

3. The page generation method according to claim 2, 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.

4. The page generation method according to claim 3, 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.

5. 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.

6. The page generation method according to claim 5, 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.

7. 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.

8. 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.

9. 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 8.

10. 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 8.

Images