A page code generation method and device, electronic equipment and storage medium

Abstract

The present disclosure provides a page code generation method and device, electronic equipment and storage medium, relates to the technical field of computers, and particularly relates to the technical field of software development and image processing. The specific implementation scheme is: a color block diagram corresponding to a page design view is acquired, and each color block in the color block diagram is used to represent a control in the page design view; each color block region included in the color block diagram is identified, and the coordinates and the size of each color block region are determined; based on a corresponding relationship between colors and control types, the control type corresponding to each color block region is determined; and based on the control type, the coordinates and the size of each color block region, the page code corresponding to the page design view is generated. In this way, the communication cost can be saved, and the accuracy of the generated code can be improved.

Description

A method, apparatus, electronic device, and storage medium for generating page code. Technical Field

[0001] This disclosure relates to the field of computer technology, and more particularly to the field of software development and image processing technology. Background Technology

[0002] Applications (APPs) installed on smart devices can provide users with various services. As the business functions of an APP are continuously iterated and updated, the page views of those services also need to be updated. The process of updating the page view involves designers providing a page design view, developers converting this view into code, and then running this code to display the updated page view in the APP. Summary of the Invention

[0003] This disclosure provides a method, apparatus, electronic device, and storage medium for generating page code.

[0004] According to one aspect of this disclosure, a method for generating page code is provided, comprising:

[0005] Obtain the color block diagram corresponding to the page design view, where each color block in the color block diagram represents a control in the page design view;

[0006] Identify each color block region included in the color block image, and determine the coordinates and size of each color block region;

[0007] Based on the correspondence between color and control type, determine the control type corresponding to each color block area;

[0008] Based on the control type, coordinates, and size corresponding to each color block area, the page code corresponding to the page design view is generated.

[0009] According to a second aspect of this disclosure, a page code generation apparatus is provided, comprising:

[0010] The acquisition module is used to acquire the color block image corresponding to the page design view, wherein each color block in the color block image represents a control in the page design view;

[0011] The identification module is used to identify each color block region included in the color block image and determine the coordinates and size of each color block region;

[0012] The determination module is used to determine the control type corresponding to each color block area based on the correspondence between color and control type;

[0013] The generation module is used to generate the page code corresponding to the page design view based on the control type, coordinates, and size of each color block area.

[0014] According to a third aspect of this disclosure, an electronic device is provided, comprising:

[0015] At least one processor; and

[0016] A memory communicatively connected to the at least one processor; wherein,

[0017] The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method described in the first aspect.

[0018] According to a fourth aspect of this disclosure, a non-transitory computer-readable storage medium is provided storing computer instructions, wherein the computer instructions are configured to cause the computer to perform the method described in the first aspect.

[0019] According to a fifth aspect of this disclosure, a computer program product is provided, comprising a computer program that, when executed by a processor, implements the method described in the first aspect.

[0020] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0021] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0022] Figure 1 is a flowchart of a page code generation method provided in an embodiment of this disclosure;

[0023] Figure 2 is an exemplary schematic diagram of a page design view provided in an embodiment of this disclosure;

[0024] Figure 3 is an exemplary schematic diagram of a color block diagram corresponding to a page design view provided in an embodiment of this disclosure;

[0025] Figure 4 is a schematic diagram of the structure of a page code generation device provided in an embodiment of this disclosure;

[0026] Figure 5 is a block diagram of an electronic device used to implement the page code generation method of the present disclosure embodiments. Detailed Implementation

[0027] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0028] To ensure an app better meets user needs, developers continuously refine its business functionalities. This development process often involves changes to the view. These changes require designers to provide a page design view, which developers then translate into code. Therefore, designers must clearly describe the position of each control in the page design view using annotations and other methods, and communicate extensively with developers to prevent errors in the code implementation. Because developers and designers have different specializations and may work in different locations, even geographically, communication costs during development are high and error-prone.

[0029] To address the aforementioned problems, this disclosure provides a page code generation method applied to electronic devices, as shown in Figure 1. The method includes:

[0030] S101. Obtain the color block diagram corresponding to the page design view. Each color block in the color block diagram is used to represent a control in the page design view.

[0031] Among them, the color block diagram can be drawn by the designer. The designer can draw the page design view as a color block diagram based on the given correspondence between colors and control types.

[0032] For example, as shown in Figure 2, which is a page design view provided in an embodiment of the present disclosure, the controls in the page design view include an input box, a search button, a web view, and a toolbar at the bottom of the page design view. The toolbar includes a left arrow button, a right arrow button, and a star button.

[0033] Based on Figure 2, the page design view can be converted into a color block diagram, that is, different types of controls in the page design view are filled with different colors.

[0034] As shown in Figure 3, Figure 3 exemplarily illustrates the color block diagram corresponding to the page design view of Figure 2. Each color block in Figure 3 represents a control in the page design view. As an example, part 301 in Figure 3 is a blue color block, part 302 is a yellow color block, part 303 is a green color block, part 304 is a red color block, and part 305 is a pink color block.

[0035] S102. Identify each color block region included in the color block map and determine the coordinates and size of each color block region.

[0036] Among these methods, existing image recognition technologies can be used to identify color block regions and determine their coordinates and dimensions. No specific limitations are placed on the image recognition technologies used here.

[0037] As an example, an electronic device can obtain the color value of each pixel in a color block image by scanning line by line, and then identify a color block composed of consecutive pixels with the same color value as a color block region. Alternatively, the electronic device can also use a deep learning model to identify color block regions, which is not limited in this embodiment.

[0038] S103. Based on the correspondence between color and control type, determine the control type corresponding to each color block area.

[0039] Taking Figure 3 as an example, the preset correspondence between colors and control types can be as follows: blue corresponds to the control type of input box; yellow corresponds to the control type of browser kernel, used to display web page view; green corresponds to the control type of button 1; red corresponds to the control type of button 2; and pink corresponds to the control type of toolbar.

[0040] S104. Based on the control type, coordinates, and size corresponding to each color block area, generate the page code corresponding to the page design view.

[0041] Among them, the electronic device can convert the coordinates and dimensions corresponding to each control type into code language according to the code requirements corresponding to each control type, and can use the control type as a prefix, and combine the prefix and the serial number of the control type into a variable name of a control.

[0042] For example, if the control type is button, and there are 3 color block areas in the color block diagram where the control type is button, then the variable names are button01, button02, and button03 respectively.

[0043] Using the above method, the electronic device identifies each color block region in the obtained color block diagram corresponding to the page design view, and determines the coordinates and size of each color block region. Since each color in the color block diagram represents a control type, the control type corresponding to each color block region in the color block diagram can be determined based on the correspondence between colors and control types. Therefore, the electronic device can accurately identify the coordinates, size, and coordinate type of each control through the color block diagram. This eliminates the need for frequent communication between developers and designers, saving communication costs and development time. Furthermore, it avoids errors caused by developers manually editing control coordinates and sizes in the code, improving the accuracy of the generated page code.

[0044] Based on the above embodiments, determining the coordinates and dimensions of each color block region in S102 can be specifically implemented as follows:

[0045] Step 1: Determine the coordinates and dimensions of each color block area in the coordinate system of the color block diagram.

[0046] Electronic devices can establish a coordinate system based on the entire color block image, thereby determining the coordinates and dimensions of each color block region in the coordinate system corresponding to the color block image. For example, the coordinate system can be established with the upper left corner, center point, or lower left corner of the color block image as the origin; this disclosure does not limit this approach.

[0047] As an example, with the top left corner of the color block image as the origin, we establish a coordinate system corresponding to the color block image, with the horizontal axis pointing to the right and the vertical axis pointing downwards. Each unit length of the horizontal and vertical axes represents one pixel.

[0048] In this embodiment, the coordinates and dimensions can be represented as (x, y, w, h). Where (x, y) are the coordinates of the color block region, w is the width of the color block region, and h is the height of the color block region.

[0049] Step 2: Based on the coordinates and size of each color block region, filter out the parent and child color block regions that have a hierarchical relationship.

[0050] The hierarchical relationship refers to the nesting relationship between color block regions, with child color block regions nested within parent color block regions.

[0051] Optionally, based on the coordinates and size of each color block region, parent and child color block regions with hierarchical relationships can be filtered out, which can be implemented as follows:

[0052] For each color block region, determine whether it is completely within another color block region based on its coordinates and size. If so, define the color block region as a child color block region, and the other color block region as the parent color block region of the child color block region.

[0053] As an example, in the coordinate system corresponding to the color block image, the coordinates of color block region A are (0, 680), the width is 480 pixels, and the height is 40 pixels. The coordinates of color block region B are (66, 681), the width is 38 pixels, and the height is 38 pixels. Therefore, it can be determined that color block region B is nested in color block region A. Color block region A is the parent color block region, and color block region B is the child color block region.

[0054] In this way, by using the containment relationship between the coordinates and dimensions of the color block areas, color block areas with hierarchical relationships can be accurately filtered out. Consequently, the layout of controls can be obtained more accurately based on the color block diagram.

[0055] Step 3: Determine the relative coordinates of the child color block region within the coordinate system of the parent color block region.

[0056] The coordinate system of the parent color block region is established based on the parent color block region. For example, the upper left corner of the parent color block region is taken as the origin, and the horizontal coordinate is to the right and the vertical coordinate is to the down. The coordinates of the child color block region in the coordinate system of the parent color block region are the relative coordinates.

[0057] Continuing with the example above, if color block region A is the parent color block region of color block region B, then based on color block region A, we establish the coordinate system of the parent color block region, and obtain the relative coordinates of color block region B in color block region A as (66,1), with a width of 38 pixels and a height of 38 pixels.

[0058] Using the above method, based on the coordinates and size of each color block area, parent and child color block areas with hierarchical relationships are selected, and then the relative coordinates of the child color block area in the coordinate system of the parent color block area are determined. The relative coordinates of the child color block area in the coordinate system of the parent color block area can more clearly represent the layout hierarchy relationship between the child and parent color block areas. In this way, the subsequently generated code can accurately represent the layout hierarchy between controls.

[0059] In some embodiments, the identified color patch regions can be rectangular or irregular in shape. After identifying the color patch regions, the coordinates and dimensions of the color patch regions can be further determined, and the dimensions can include width and height. Specifically, in the above embodiments, determining the coordinates and dimensions of each color patch region in the coordinate system of the color patch image can be implemented as follows:

[0060] For each color block area, if the color block area is rectangular, then the coordinates of the top left corner of the color block area are used as the coordinates of the color block area, and the width and height of the rectangle are used as the size of the color block area.

[0061] If the color block area is not rectangular, then the coordinates of one vertex of the color block area are used as the coordinates of the color block area, the difference between the maximum and minimum values ​​of the color block area in the vertical direction is used as the height, and the difference between the maximum and minimum values ​​of the color block area in the horizontal direction is used as the width.

[0062] If the color block area is not rectangular, then any vertex of the color block area is selected as the coordinate of the color block area, and then the width and height of the smallest rectangular area containing the color block area are used as the width and height of the color block area.

[0063] Taking Figure 3 as an example, the color block area corresponding to the leftmost arrow in the toolbar is not a rectangle. The coordinates of the top vertex of this color block area are (66,1). The difference between the maximum and minimum values ​​of this color block area in the vertical direction is 38 pixels, and the difference between the maximum and minimum values ​​of this color block area in the horizontal direction is also 38 pixels. Therefore, the coordinates of this color block area are (66,1), the width is 38 pixels, and the height is 38 pixels.

[0064] Using the above method, the coordinates and dimensions of rectangular color block areas, as well as the coordinates and dimensions of non-rectangular color block areas, can be accurately determined. It is not limited by the shape of the color block, has high adaptability, and does not require manual measurement of coordinates and dimensions, thus achieving automatic recognition and reducing communication costs.

[0065] Based on the above embodiments, page code can be generated through the following two implementation methods.

[0066] The first implementation method includes:

[0067] For each color block region, based on the control type, coordinates, and size corresponding to that region, coordinate code matching the resolution of the color block image is generated. Based on the preset correspondence between control types and control parameters, the control parameters corresponding to the control types of that color block region are obtained, and control parameter code for that region is generated. If the color block region has sub-color block regions, control relationship code corresponding to those sub-color block regions is generated.

[0068] The coordinate code describes the coordinates and size of the control in the page design view. Electronic devices can generate coordinate codes using the coordinates and size of each color block area. When generating coordinate codes, the coordinates of the hierarchical sub-color blocks used are: the relative coordinates of the sub-color block area in the coordinate system of its corresponding parent color block area.

[0069] It is understood that the coordinates and size of the control may change with the resolution. In this embodiment of the disclosure, a set of coordinate codes can be adapted for each resolution. For example, if the resolution of the color block image is 480*720, then coordinate codes corresponding to the 480*720 resolution are generated, and these coordinate codes are adapted to a 480*720 resolution display screen.

[0070] Each control type has corresponding control parameters, which can include any one or more of the following: the control's background color, click event handling method, and whether the control has a border, etc. Control parameter codes are used to describe the control's parameters.

[0071] Control relationship code is used to describe the hierarchical relationship between controls corresponding to parent and child color block areas. For example, the code for the control corresponding to the parent color block area can include control relationship code for "adding a child view," which in turn leads to the code for the control corresponding to the child color block area.

[0072] Understandably, after generating the page code, it needs to be initialized according to the requirements of the control type so that the page view can be rendered when the page code is run later.

[0073] Using the above method, electronic devices can generate coordinate codes that match the resolution of the color block diagram, eliminating the need to consider the display differences of controls at different resolutions, thus simplifying implementation. Furthermore, it can also generate control parameter codes and control relationship codes, accurately representing the style and layout of each control in the page design view. This ensures the accuracy of each control's display in the page view presented based on page code.

[0074] In the second implementation, if there are at least two color blocks corresponding to the page design view, and each color block has a different resolution, then the above-mentioned S104, based on the control type, coordinates, and size corresponding to each color block area, generates the page code corresponding to the page design view. Specifically, this can be implemented as follows:

[0075] Step a: Based on the coordinates and dimensions of the target color block area of ​​the same control type in each color block image, determine the layout of the target color block area on the page.

[0076] The arrangement method is used to represent the common patterns of the target color block area in color block images of different resolutions.

[0077] The target color block area is the color block area corresponding to the same control type in each color block image. For example, an electronic device may obtain color block image 1 and color block image 2 corresponding to the same page design view, but color block image 1 and color block image 2 have different resolutions.

[0078] If color block region A in color block diagram 1 and color block region a in color block diagram 2 correspond to the same control type, then color block region A and color block region a are the target color block regions. If color block region B in color block diagram 1 and color block region b in color block diagram 2 correspond to the same control type, then color block region B and color block region b are the target color block regions.

[0079] The common pattern is the display pattern of the target color block area in color block images at different resolutions.

[0080] Taking Figure 3 as an example, assuming the target color block area is the search box, Figure 3 and the color block image of another resolution correspond to the same page design view. Electronic devices can compare the target color block area in Figure 3 with the target color block area in the color block image of another resolution to determine common patterns.

[0081] For example, the common pattern is that the search box width is always 15% of the page width, and the pixel distance from the top and right edges of the page is 20. That is, the common pattern of the search box in the page design view in different resolution color block images is: the width is 15% of the color block image width, and the pixel distance from the top and right edges of the page is 20.

[0082] Taking Figure 3 as an example, assuming the target color block area is star button 2, Figure 3 and the color block image of another resolution correspond to the same page design view. Electronic devices can compare the target color block area in Figure 3 with the target color block area in the color block image of another resolution to determine common patterns.

[0083] For example, the common pattern is that the center point of the star button 2 is always located at the right quarter of the toolbar width, and the width of the star button 2 is 10% of the toolbar width. That is, the common pattern of the star button 2 in the color block image of different resolutions in the page design view is: the center point of the star button 2 is located at the right quarter of the toolbar width, and the width is 10% of the toolbar width.

[0084] Step b: Generate coordinate description code for the target color block area based on the control type and layout of the target color block area.

[0085] The coordinate description code describes the above layout. When the coordinate description code is run, the size of the display interface can be obtained. The size of the display interface can be substituted into the layout described by the description code to obtain the coordinates and size of each control, so as to achieve a set of page code to adapt to screens with different resolutions.

[0086] Step c: Based on the preset correspondence between control type and control parameters, obtain the control parameters corresponding to the control type of the target color block area, and generate the control parameter code for the target color block area.

[0087] Step d: If the target color block area has sub-color block areas, generate the control relationship code corresponding to the target color block area.

[0088] The specific implementation methods of steps c and d can be found in the description of control parameter code and control relationship code in the above embodiments, which will not be repeated here.

[0089] Using the above method, for multiple color block images in the same page design view, by comparing the target color block area in multiple color block images, the common pattern of the target color block area in color block images with different resolutions can be obtained. Based on the common pattern, coordinate description code is generated. In this way, the generated page code can be adapted to display devices with different resolutions, and the adaptability is higher.

[0090] Based on the same concept, this disclosure provides a page code generation apparatus, as shown in FIG4, including:

[0091] The acquisition module 401 is used to acquire a color block image corresponding to the page design view, wherein each color block in the color block image represents a control in the page design view.

[0092] The identification module 402 is used to identify each color block region included in the color block image and determine the coordinates and size of each color block region;

[0093] Module 403 is used to determine the control type corresponding to each color block area based on the correspondence between color and control type.

[0094] The generation module 404 is used to generate the page code corresponding to the page design view based on the control type, coordinates and size corresponding to each color block area.

[0095] Optionally, the identification module 402 is specifically used for:

[0096] Determine the coordinates and dimensions of each color patch region in the coordinate system of the color patch diagram;

[0097] Based on the coordinates and size of each color block region, filter out the parent and child color block regions with hierarchical relationships;

[0098] Determine the relative coordinates of the sub-color patch region in the coordinate system of the parent color patch region.

[0099] Optionally, the dimensions include width and height; the identification module 402 is specifically used for:

[0100] For each color block area, if the color block area is rectangular, then the coordinates of the upper left corner of the color block area are used as the coordinates of the color block area, and the width and height of the rectangle are used as the size of the color block area;

[0101] If the color block area is not rectangular, then the coordinates of one vertex of the color block area are used as the coordinates of the color block area, the difference between the maximum and minimum values ​​of the color block area in the vertical direction is used as the height, and the difference between the maximum and minimum values ​​of the color block area in the horizontal direction is used as the width.

[0102] Optionally, the identification module 402 is specifically used for:

[0103] For each color block region, determine whether the color block region is completely within another color block region based on the coordinates and size of the color block region;

[0104] If so, then the color block area is determined to be a sub-color block area, and the other color block area is the parent color block area of ​​the sub-color block area.

[0105] Optionally, the generation module 404 is specifically used for:

[0106] For each color block area, based on the control type, coordinates, and size corresponding to that color block area, coordinate codes matching the resolution of the color block image are generated for that color block area;

[0107] Based on the preset correspondence between control type and control parameters, obtain the control parameters corresponding to the control type of the color block area, and generate the control parameter code for the color block area;

[0108] If the color block area has sub-color block areas, generate the control relationship code corresponding to the color block area.

[0109] Optionally, there are at least two color blocks corresponding to the page design view, and each color block has a different resolution; the generation module 404 is specifically used for:

[0110] Based on the coordinates and size of the target color block area of ​​the same control type in each color block image, the arrangement of the target color block area on the page is determined. The arrangement is used to represent the common pattern of the target color block area in color block images of different resolutions.

[0111] Generate coordinate description code for the target color block area based on the control type and the arrangement method of the target color block area;

[0112] Based on the preset correspondence between control type and control parameters, obtain the control parameters corresponding to the control type of the target color block area, and generate the control parameter code for the target color block area;

[0113] If the target color block area has sub-color block areas, generate the control relationship code corresponding to the target color block area.

[0114] The collection, storage, use, processing, transmission, provision, and disclosure of user personal information involved in the technical solution disclosed herein comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0115] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0116] Figure 5 illustrates a schematic block diagram of an example electronic device 500 that can be used to implement embodiments of the present disclosure. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0117] As shown in Figure 5, the electronic device 500 includes a computing unit 501, which can perform various appropriate actions and processes based on a computer program stored in a read-only memory (ROM) 502 or a computer program loaded from a storage unit 508 into a random access memory (RAM) 503. The RAM 503 can also store various programs and data required for the operation of the electronic device 500. The computing unit 501, ROM 502, and RAM 503 are interconnected via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0118] Multiple components in electronic device 500 are connected to I / O interface 505, including: input unit 506, such as keyboard, mouse, etc.; output unit 507, such as various types of monitors, speakers, etc.; storage unit 508, such as disk, optical disk, etc.; and communication unit 509, such as network card, modem, wireless transceiver, etc. Communication unit 509 allows electronic device 500 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0119] The computing unit 501 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 501 performs the various methods and processes described above, such as the page code generation method. For example, in some embodiments, the page code generation method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 508. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 500 via ROM 502 and / or communication unit 509. When the computer program is loaded into RAM 503 and executed by the computing unit 501, one or more steps of the page code generation method described above may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the page code generation method by any other suitable means (e.g., by means of firmware).

[0120] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0121] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0122] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0123] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0124] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0125] Computer systems can include clients and servers. Clients and servers are generally located far apart and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be cloud servers, servers in distributed systems, or servers incorporating blockchain technology.

[0126] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0127] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method for generating page code, comprising: Obtain the color block diagram corresponding to the page design view. The color block diagram is obtained by filling different types of controls in the page design view with different colors. Each color block in the color block diagram represents a control in the page design view. Identify each color block area included in the color block diagram. Determine the coordinates and size of each color block area in the coordinate system of the color block diagram. For each color block area, determine whether the color block area is completely within another color block area based on the coordinates and size of the color block area. If so, determine that the color block area is a sub-color block area, and the other color block area is the parent color block area of ​​the sub-color block area. Determine the relative coordinates of the sub-color block area in the coordinate system of the parent color block area. Based on the correspondence between color and control type, determine the control type corresponding to each color block area. Based on the control type, coordinates, and size corresponding to each color block area, generate the page code corresponding to the page design view; There are at least two color block images corresponding to the page design view, and each color block image has a different resolution; The step of generating page code corresponding to the page design view based on the control type, coordinates, and size of each color block area includes: determining the layout of the target color block area on the page based on the coordinates and size of the target color block area of ​​the same control type in each color block image, wherein the layout is used to represent the common pattern of the target color block area in color block images at different resolutions; generating coordinate description code of the target color block area based on the control type of the target color block area and the layout; and obtaining the control parameters corresponding to the control type of the target color block area based on the preset correspondence between control type and control parameters, and generating control parameter code of the target color block area. If the target color block area has sub-color block areas, generate the control relationship code corresponding to the target color block area.

2. The method according to claim 1, wherein, The dimensions include width and height; Determining the coordinates and dimensions of each color block region in the coordinate system of the color block diagram includes: for each color block region, if the color block region is rectangular, then the coordinates of the upper left corner of the color block region are used as the coordinates of the color block region, and the width and height of the rectangle are used as the dimensions of the color block region; if the color block region is not rectangular, then the coordinates of one vertex of the color block region are used as the coordinates of the color block region, the difference between the maximum and minimum values ​​of the color block region in the vertical axis direction is used as the height, and the difference between the maximum and minimum values ​​of the color block region in the horizontal axis direction is used as the width.

3. The method according to claim 1 or 2, wherein, The step of generating page code corresponding to the page design view based on the control type, coordinates, and size corresponding to each color block region includes: for each color block region, generating coordinate code that matches the resolution of the color block image based on the control type, coordinates, and size corresponding to the color block region; obtaining the control parameters corresponding to the control type of the color block region based on the preset correspondence between control type and control parameters, and generating control parameter code for the color block region; and generating control relationship code corresponding to the color block region if the color block region has sub-color block regions.

4. A page code generation device, comprising: The acquisition module is used to acquire a color block image corresponding to the page design view. The color block image is obtained by filling different types of controls in the page design view with different colors. Each color block in the color block image is used to represent a control in the page design view. The recognition module is used to recognize each color block area included in the color block image. Determine the coordinates and dimensions of each color block region in the coordinate system of the color block diagram; for each color block region, determine whether the color block region is completely within another color block region based on its coordinates and dimensions; if so, determine that the color block region is a sub-color block region, and the other color block region is the parent color block region of the sub-color block region; determine the relative coordinates of the sub-color block region in the coordinate system of the parent color block region; The determination module is used to determine the control type corresponding to each color block area based on the correspondence between color and control type; The generation module is used to generate the page code corresponding to the page design view based on the control type, coordinates and size corresponding to each color block area; There are at least two color block images corresponding to the page design view, and each color block image has a different resolution. The generation module is specifically used for: determining the layout of the target color block area on the page based on the coordinates and size of the target color block area of ​​the same control type in each color block image, wherein the layout is used to represent the common pattern of the target color block area in color block images of different resolutions; generating coordinate description code of the target color block area based on the control type of the target color block area and the layout; and obtaining the control parameters corresponding to the control type of the target color block area based on the preset correspondence between control type and control parameters, and generating control parameter code of the target color block area. If the target color block area has sub-color block areas, generate the control relationship code corresponding to the target color block area.

5. The apparatus according to claim 4, wherein, The dimensions include width and height; the recognition module is specifically used for: for each color block area, if the color block area is rectangular, then the coordinates of the upper left corner of the color block area are used as the coordinates of the color block area, and the width and height of the rectangle are used as the dimensions of the color block area; if the color block area is not rectangular, then the coordinates of one vertex of the color block area are used as the coordinates of the color block area, the difference between the maximum and minimum values ​​of the color block area in the vertical axis direction is used as the height, and the difference between the maximum and minimum values ​​of the color block area in the horizontal axis direction is used as the width.

6. The apparatus according to claim 4 or 5, wherein, The generation module is specifically used for: for each color block area, generating coordinate code that matches the resolution of the color block image based on the control type, coordinates, and size corresponding to the color block area; and obtaining the control parameters corresponding to the control type of the color block area based on the preset correspondence between control type and control parameters, and generating control parameter code for the color block area. If the color block area has sub-color block areas, generate the control relationship code corresponding to the color block area.

7. An electronic device, comprising: At least one processor; And a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-3.

8. A non-transitory computer-readable storage medium storing computer instructions, wherein, The computer instructions are used to cause the computer to perform the method according to any one of claims 1-3.

9. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1-3.

Images