CN111475156B - Page code generation method and device, electronic equipment and storage medium - Google Patents
Page code generation method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN111475156B CN111475156B CN202010285885.XA CN202010285885A CN111475156B CN 111475156 B CN111475156 B CN 111475156B CN 202010285885 A CN202010285885 A CN 202010285885A CN 111475156 B CN111475156 B CN 111475156B
- Authority
- CN
- China
- Prior art keywords
- page design
- information
- page
- design diagram
- elements
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 48
- 238000013461 design Methods 0.000 claims abstract description 199
- 238000010586 diagram Methods 0.000 claims description 110
- 238000004590 computer program Methods 0.000 claims description 8
- 230000008901 benefit Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000007792 addition Methods 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 238000000354 decomposition reaction Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000014509 gene expression Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000005215 recombination Methods 0.000 description 1
- 230000006798 recombination Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
The embodiment of the disclosure discloses a page code generation method and device, an electronic device and a storage medium, wherein the method comprises the following steps: acquiring a page design drawing and determining information of each element in the page design drawing; determining keywords corresponding to elements in the page design drawing based on the type information and the level information of the elements in the page design drawing; and generating codes of the page design drawing based on the characteristic information and the position information of each element in the page design drawing and the keywords corresponding to each element. Therefore, the embodiment of the disclosure can quickly and accurately determine the code for generating the page design drawing, so that the marking information in the page design drawing is omitted, and the understanding deviation of designers and developers is avoided.
Description
Technical Field
The present disclosure relates to computer technology, and in particular, to a method and apparatus for generating page codes, an electronic device, and a storage medium.
Background
Page design is particularly important in front-end development, which typically requires a designer to draw a design drawing and then write code through the design drawing.
In carrying out the present disclosure, the inventors found that: when a developer writes code, a post rework problem often occurs due to deviation from communication and understanding with the designer.
Disclosure of Invention
The present disclosure has been made in order to solve the above technical problems. The embodiment of the disclosure provides a page code generation method and device, electronic equipment and a storage medium.
According to an aspect of the embodiments of the present disclosure, there is provided a page code generation method, including:
acquiring a page design diagram and determining information of each element in the page design diagram; the information of each element in the page design diagram comprises: type information, hierarchy information, feature information, and location information;
determining keywords corresponding to elements in the page design diagram based on the type information and the level information of the elements in the page design diagram;
and generating codes of the page design diagram based on the characteristic information and the position information of each element in the page design diagram and the keywords corresponding to each element.
Optionally, in the above embodiments of the present disclosure, keywords corresponding to each element in the page design drawing include: element type keywords and element level keywords.
Optionally, in the foregoing embodiments of the present disclosure, the determining, based on the type information and the level information of each element in the page design drawing, a keyword corresponding to each element in the page design drawing includes:
determining element type keywords corresponding to elements in the page design drawing based on the type information of the elements in the page design drawing;
and determining element level keywords corresponding to each element in the page design diagram based on the level information of each element in the page design diagram.
Optionally, in the above method embodiments of the present disclosure, the element-level keyword includes: folder management keywords and picture adjustment keywords.
Optionally, in the above embodiments of the methods of the present disclosure, the determining, based on the hierarchical information of each element in the page design drawing, an element hierarchical keyword of each element in the page design drawing includes:
determining folder management keywords corresponding to elements in the page design diagram based on the hierarchy of folders in which the elements in the page design diagram are located;
and determining picture adjustment keywords corresponding to each element in the page design diagram based on the picture hierarchical relationship of each element in the page design diagram.
Optionally, in the foregoing embodiments of the present disclosure, determining, based on the type information and the level information of each element in the page design drawing, between the keywords corresponding to each element in the page design drawing and the codes for generating the page design drawing based on the feature information and the position information of each element in the page design drawing and the keywords corresponding to each element, further includes: and merging folders in which all elements in the page design diagram are positioned in the same hierarchy based on the folder management keywords of all elements in the page design diagram.
Optionally, in the foregoing embodiments of the present disclosure, the generating, based on the feature information and the location information of each element in the page design drawing and the keywords corresponding to each element, a code of the page design drawing includes:
determining the class corresponding to each element in the page design diagram and the attribute information of the class based on the characteristic information and the position information of each element in the page design diagram;
and generating codes of the page design diagram based on the class corresponding to each element in the page design diagram, the attribute information of the class and the keywords corresponding to each element in the page design diagram.
According to another aspect of the embodiments of the present disclosure, there is provided a page code generating apparatus including:
the first determining module is used for acquiring a page design drawing and determining information of each element in the page design drawing; the information of each element in the page design diagram comprises: type information, hierarchy information, feature information, and location information;
the second determining module is used for determining keywords corresponding to elements in the page design diagram based on the type information and the level information of the elements in the page design diagram;
and the generation module is used for generating codes of the page design diagram based on the characteristic information and the position information of each element in the page design diagram and the keywords corresponding to each element.
Optionally, in the above embodiments of the present disclosure, the keywords corresponding to each element in the page design drawing include: element type keywords and element level keywords.
Optionally, in the above embodiments of the present disclosure, the second determining module includes:
the first determining unit is used for determining element type keywords corresponding to elements in the page design drawing based on the type information of the elements in the page design drawing;
and the second determining unit is used for determining element level keywords corresponding to the elements in the page design diagram based on the level information of the elements in the page design diagram.
Optionally, in the above apparatus embodiments of the present disclosure, the element-level keyword includes: folder management keywords and picture adjustment keywords.
Optionally, in the above embodiments of the present disclosure, the second determining unit is configured to:
determining folder management keywords corresponding to elements in the page design diagram based on the hierarchy of folders in which the elements in the page design diagram are located;
and determining picture adjustment keywords corresponding to each element in the page design diagram based on the picture hierarchical relationship of each element in the page design diagram.
Optionally, in the above embodiments of the present disclosure, between the second determining module and the generating module, the method further includes: and the merging module is used for merging folders in which all elements in the page design diagram are positioned in the same hierarchy based on the folder management keywords of all elements in the page design diagram.
Optionally, in the above embodiments of the present disclosure, the generating module includes:
a third determining unit, configured to determine, based on feature information and position information of each element in the page design drawing, a class corresponding to each element in the page design drawing and attribute information of the class;
and the generating unit is used for generating codes of the page design diagram based on classes corresponding to the elements in the page design diagram, attribute information of the classes and keywords corresponding to the elements in the page design diagram.
According to still another aspect of the embodiments of the present disclosure, there is provided a computer-readable storage medium storing a computer program for executing the page code generation method according to any one of the above embodiments of the present disclosure.
According to still another aspect of the embodiments of the present disclosure, there is provided an electronic device including: a processor; a memory for storing the processor-executable instructions; the processor is configured to read the executable instruction from the memory and execute the instruction to implement the page code generation method according to any one of the foregoing embodiments.
Based on the page code generation method and device, the electronic device and the storage medium provided by the embodiment of the disclosure, a page design diagram is obtained, and information of each element in the page design diagram is determined; determining keywords corresponding to elements in the page design drawing based on the type information and the level information of the elements in the page design drawing; and generating codes of the page design drawing based on the characteristic information and the position information of each element in the page design drawing and the keywords corresponding to each element. Therefore, the embodiment of the disclosure can quickly and accurately determine the code for generating the page design drawing, so that the marking information in the page design drawing is omitted, and the understanding deviation of designers and developers is avoided.
The technical scheme of the present disclosure is described in further detail below through the accompanying drawings and examples.
Drawings
The above and other objects, features and advantages of the present disclosure will become more apparent by describing embodiments thereof in more detail with reference to the accompanying drawings. The accompanying drawings are included to provide a further understanding of embodiments of the disclosure, and are incorporated in and constitute a part of this specification, illustrate embodiments of the disclosure and together with the description serve to explain the disclosure, without limitation to the disclosure. In the drawings, like reference numerals generally refer to like parts or steps.
Fig. 1 is a flowchart illustrating a page code generation method according to an exemplary embodiment of the present disclosure.
FIG. 2 is a page layout diagram provided by an exemplary embodiment of the present disclosure.
Fig. 3 is a flowchart illustrating a page code generation method according to another exemplary embodiment of the present disclosure.
Fig. 4 is a flowchart illustrating a page code generation method according to still another exemplary embodiment of the present disclosure.
Fig. 5 is a flowchart illustrating a page code generation method according to still another exemplary embodiment of the present disclosure.
Fig. 6 is a schematic diagram of a structure of a page code generating apparatus provided in an exemplary embodiment of the present disclosure.
Fig. 7 is a block diagram of an electronic device provided in an exemplary embodiment of the present disclosure.
Detailed Description
Hereinafter, example embodiments according to the present disclosure will be described in detail with reference to the accompanying drawings. It should be apparent that the described embodiments are only some of the embodiments of the present disclosure and not all of the embodiments of the present disclosure, and that the present disclosure is not limited by the example embodiments described herein.
It should be noted that: the relative arrangement of the components and steps, numerical expressions and numerical values set forth in these embodiments do not limit the scope of the present disclosure unless it is specifically stated otherwise.
It will be appreciated by those of skill in the art that the terms "first," "second," etc. in embodiments of the present disclosure are used merely to distinguish between different steps, devices or modules, etc., and do not represent any particular technical meaning nor necessarily logical order between them.
It should also be understood that in embodiments of the present disclosure, "plurality" may refer to two or more, and "at least one" may refer to one, two or more.
It should also be appreciated that any component, data, or structure referred to in the presently disclosed embodiments may be generally understood as one or more without explicit limitation or the contrary in the context.
In addition, the term "and/or" in this disclosure is merely an association relationship describing an association object, and indicates that three relationships may exist, for example, a and/or B may indicate: a exists alone, A and B exist together, and B exists alone. In addition, the character "/" in the present disclosure generally indicates that the front and rear association objects are an or relationship.
It should also be understood that the description of the various embodiments of the present disclosure emphasizes the differences between the various embodiments, and that the same or similar features may be referred to each other, and for brevity, will not be described in detail.
Meanwhile, it should be understood that the sizes of the respective parts shown in the drawings are not drawn in actual scale for convenience of description.
The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the disclosure, its application, or uses.
Techniques, methods, and apparatus known to one of ordinary skill in the relevant art may not be discussed in detail, but are intended to be part of the specification where appropriate.
It should be noted that: like reference numerals and letters denote like items in the following figures, and thus once an item is defined in one figure, no further discussion thereof is necessary in subsequent figures.
Embodiments of the present disclosure may be applicable to electronic devices such as terminal devices, computer systems, servers, etc., which may operate with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known terminal devices, computing systems, environments, and/or configurations that may be suitable for use with the terminal device, computer system, server, or other electronic device include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, hand-held or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network personal computers, small computer systems, mainframe computer systems, and distributed cloud computing technology environments that include any of the foregoing, and the like.
Electronic devices such as terminal devices, computer systems, servers, etc. may be described in the general context of computer system-executable instructions, such as program modules, being executed by a computer system. Generally, program modules may include routines, programs, objects, components, logic, data structures, etc., that perform particular tasks or implement particular abstract data types. The computer system/server may be implemented in a distributed cloud computing environment in which tasks are performed by remote processing devices that are linked through a communications network. In a distributed cloud computing environment, program modules may be located in both local and remote computing system storage media including memory storage devices.
FIG. 1 is a flowchart of a page code generation method provided by an exemplary embodiment of the present disclosure. The embodiment can be applied to an electronic device, as shown in fig. 1, and the page code generating method includes the following steps:
s102, acquiring a page design drawing and determining information of each element in the page design drawing.
The information of each element in the page design diagram in the embodiment of the disclosure may include: type information, hierarchy information, feature information, and location information.
Wherein, each element in the page design diagram can comprise: text, pictures, and/or buttons. The type information of each element may include: text type, picture type, and/or user clickable button type. The level information is used to represent the view level where the element is located. The feature information is used to represent the features of the element, for example: the font size, font style, color of the picture, etc. of the text. The location information may include: the lateral coordinate information and the longitudinal coordinate information of the element, and the width information and the height information of the element.
S104, determining keywords corresponding to elements in the page design drawing based on the type information and the level information of the elements in the page design drawing.
The keywords corresponding to each element in the page design diagram in the embodiment of the disclosure may include: element type keywords and element level keywords.
Wherein the element type key is used to represent a markup element type, which may include: text keywords, picture keywords, and button keywords. Element-level keywords are used to represent the hierarchical relationships between the marked elements, which may include: folder management keywords and picture adjustment keywords. The folder management keywords are used for representing and marking the folders which can be combined in the same hierarchy, and the picture adjustment keywords are used for marking the picture hierarchy which needs to be adjusted.
S106, generating codes of the page design drawing based on the characteristic information and the position information of each element in the page design drawing and the keywords corresponding to each element.
In one example, the Sketch software is used to obtain a page layout as shown in FIG. 2, and the elements in the page layout are determined: the new user can use the characters as the type, the immediate picking as the button type, the gray base map under the immediate picking button and the gray base map of the new user special characters as the picture type when buying the VIP after the new user special characters, the coupon and the coupon are picked up, and the position information of each element in the page design map is automatically generated by the sketch software. Based on the type information and the level information of each element in the page design drawing, determining keywords corresponding to each element in the page design drawing: text keywords, picture keywords, button keywords, folder management keywords, and picture adjustment keywords. And generating codes of the page design diagram based on the characteristic information and the position information of each element in the page design diagram and the keywords corresponding to each element.
Based on the page code generation method provided by the embodiment of the disclosure, acquiring a page design drawing and determining information of each element in the page design drawing; determining keywords corresponding to elements in the page design drawing based on the type information and the level information of the elements in the page design drawing; and generating codes of the page design drawing based on the characteristic information and the position information of each element in the page design drawing and the keywords corresponding to each element. Therefore, codes of the page design drawing can be quickly and accurately determined, marking information in the page design drawing is omitted, and understanding deviation of designers and developers is avoided.
As shown in fig. 3, in some optional implementations, based on the embodiment shown in fig. 1, step S104 may specifically include:
s301, determining element type keywords corresponding to elements in the page design drawing based on the type information of the elements in the page design drawing.
S302, determining element level keywords corresponding to elements in the page design drawing based on the level information of the elements in the page design drawing.
As shown in fig. 4, in some optional implementations, based on the embodiment shown in fig. 3, step S302 may specifically include:
s401, determining folder management keywords corresponding to elements in the page design drawing based on the hierarchy of folders in which the elements in the page design drawing are located.
S402, determining picture adjustment keywords corresponding to elements in the page design drawing based on the picture hierarchical relationship of the elements in the page design drawing.
In the example shown in fig. 2, the element type keywords may include: text, image, and text the button key is button; the element-level keywords may include: the folder management keywords are the orders and the picture adjustment keywords are the super. The new user can use the characters such as the characters of the new user for sharing, the characters of the new user for obtaining the coupons, the characters such as the characters can be used when the new user purchases the VIP, and the like belong to the same-level folder, so that the characters marked as the keywords floder are represented in the same level, and the fact that no view level exists can be represented; the gray-scale base map under the "immediately get" button and the gray-scale base map of the "new user-dedicated text" are displayed under the text, so the mark keyword super indicates that the gray-scale base map is at the next level of the text.
Therefore, the folder management keyword and the picture adjustment keyword are utilized in the embodiment of the disclosure, so that folder management and picture levels in the page view can be accurately divided, and the accuracy of page code generation is improved.
In some optional embodiments, between step 104 and step S106 may further include: and merging folders in which all elements in the page design diagram are positioned in the same hierarchy based on the folder management keywords of all elements in the page design diagram. For example: and merging the folder 'flow_tag' where the 'new user special share' and the 'coupon' text are located and the 'flow_text'. Therefore, the embodiment of the disclosure can avoid writing of a plurality of repeated codes, and improves the working efficiency of designers and developers.
As shown in fig. 5, in some optional implementations, based on the embodiment shown in fig. 1, step S106 may specifically include:
s501, determining classes and attribute information of the classes corresponding to the elements in the page design drawing based on the characteristic information and the position information of the elements in the page design drawing.
Wherein, the attribute information of the class may include: the attribute of each element in the class and the description information corresponding to the attribute of each element, for example: the attribute of the font size textsize of the text is the number of the character string, and the description information corresponding to the attribute is 10, namely the font size is 10.
S502, generating codes of the page design drawing based on classes corresponding to elements in the page design drawing, attribute information of the classes and keywords corresponding to the elements in the page design drawing.
In a specific embodiment, firstly, a parent class corresponding to a page design is determined to be a uitableview cell based on a folder management keyword floder_cell2 corresponding to the page design, and then, based on characteristic information and position information of each element in the page design, attribute information of the class and the class corresponding to each element in the page design is determined, for example: the characteristic information of the word 'coupon' determines that the coupon belongs to the class uiilable, the attribute information of the class is character string, and the description information corresponding to the attribute is as follows: and finally, generating codes of the page design diagram based on the class corresponding to each element in the page design diagram, the attribute information of the class and the keywords corresponding to each element.
Any of the page code generation methods provided by the embodiments of the present disclosure may be performed by any suitable device having data processing capabilities, including, but not limited to: terminal equipment, servers, etc. Alternatively, any of the page code generation methods provided by the embodiments of the present disclosure may be executed by a processor, such as the processor executing any of the page code generation methods mentioned by the embodiments of the present disclosure by invoking corresponding instructions stored in a memory. And will not be described in detail below.
Fig. 6 is a schematic diagram of a structure of a page code generating apparatus provided in an exemplary embodiment of the present disclosure. The testing device can be arranged in electronic equipment such as terminal equipment and a server, and the page code generation method of any embodiment of the disclosure can be executed. As shown in fig. 6, the page code generating apparatus includes:
the first determining module 61 is configured to obtain a page design diagram, and determine information of each element in the page design diagram; the information of each element in the page design diagram comprises: type information, hierarchy information, feature information, and location information;
a second determining module 62, configured to determine keywords corresponding to each element in the page design diagram based on the type information and the level information of each element in the page design diagram;
and a generating module 63, configured to generate a code of the page design drawing based on the feature information and the position information of each element in the page design drawing, and the keywords corresponding to each element.
Based on the page code generating device provided by the embodiment of the disclosure, acquiring a page design drawing and determining information of each element in the page design drawing; determining keywords corresponding to elements in the page design drawing based on the type information and the level information of the elements in the page design drawing; and generating codes of the page design drawing based on the characteristic information and the position information of each element in the page design drawing and the keywords corresponding to each element. Therefore, the embodiment of the disclosure can quickly and accurately determine the code for generating the page design drawing, so that the marking information in the page design drawing is omitted, and the understanding deviation of designers and developers is avoided.
In some embodiments, the keywords corresponding to each element in the page design diagram include: element type keywords and element level keywords.
In some of these embodiments, the second determining module 62 includes:
the first determining unit is used for determining element type keywords corresponding to elements in the page design drawing based on the type information of the elements in the page design drawing;
and the second determining unit is used for determining element level keywords corresponding to the elements in the page design diagram based on the level information of the elements in the page design diagram.
In some of these embodiments, the element-level keywords include: folder management keywords and picture adjustment keywords.
In some embodiments, the second determining unit is configured to:
determining folder management keywords corresponding to elements in the page design diagram based on the hierarchy of folders in which the elements in the page design diagram are located;
and determining picture adjustment keywords corresponding to each element in the page design diagram based on the picture hierarchical relationship of each element in the page design diagram.
In some embodiments, between the second determining module 62 and the generating module 63, the method further includes: and the merging module is used for merging folders in which all elements in the page design diagram are positioned in the same hierarchy based on the folder management keywords of all elements in the page design diagram.
In some embodiments, the generating module 63 includes:
a third determining unit, configured to determine, based on feature information and position information of each element in the page design drawing, a class corresponding to each element in the page design drawing and attribute information of the class;
and the generating unit is used for generating codes of the page design diagram based on classes corresponding to the elements in the page design diagram, attribute information of the classes and keywords corresponding to the elements in the page design diagram.
In addition, the embodiment of the disclosure also provides an electronic device, which comprises: a processor; a memory for storing the processor-executable instructions;
the processor is configured to read the executable instruction from the memory and execute the instruction to implement the page code generation method according to any one of the embodiments of the present disclosure.
Next, an electronic device according to an embodiment of the present disclosure is described with reference to fig. 7. The electronic device may be either or both of the first device and the second device, or a stand-alone device independent thereof, which may communicate with the first device and the second device to receive the acquired input signals therefrom. Fig. 7 illustrates a block diagram of an electronic device according to an embodiment of the disclosure. As shown in fig. 7, the electronic device includes one or more processors 71 and memory 72.
The processor 71 may be a Central Processing Unit (CPU) or other form of processing unit having data processing and/or instruction execution capabilities, and may control other components in the electronic device to perform desired functions.
Memory 72 may include one or more computer program products that may include various forms of computer-readable storage media, such as volatile memory and/or non-volatile memory. The volatile memory may include, for example, random Access Memory (RAM) and/or cache memory (cache), and the like. The non-volatile memory may include, for example, read Only Memory (ROM), hard disk, flash memory, and the like. One or more computer program instructions may be stored on the computer readable storage medium that can be executed by the processor 71 to implement the page code generation method and/or other desired functions of the software program of the various embodiments of the present disclosure described above. In one example, the electronic device may further include: an input device 73 and an output device 74, which are interconnected by a bus system and/or other forms of connection mechanisms (not shown).
In addition, the input device 73 may also include, for example, a keyboard, a mouse, and the like.
The output device 74 can output various information to the outside. The output device 74 may include, for example, a display, speakers, a printer, and a communication network and remote output devices connected thereto, among others.
Of course, only some of the components of the electronic device relevant to the present disclosure are shown in fig. 7 for simplicity, components such as buses, input/output interfaces, and the like being omitted. In addition, the electronic device may include any other suitable components depending on the particular application.
In addition to the methods and apparatus described above, embodiments of the present disclosure may also be a computer program product comprising computer program instructions which, when executed by a processor, cause the processor to perform steps in the page code generation method of the software program of the various embodiments described herein.
The computer program product may write program code for performing the operations of embodiments of the present disclosure in any combination of one or more programming languages, including an object oriented programming language such as Java, C++ or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device, partly on a remote computing device, or entirely on the remote computing device or server.
Furthermore, embodiments of the present disclosure may also be a computer-readable storage medium, on which computer program instructions are stored, which, when being executed by a processor, cause the processor to perform the steps in the page code generation method of the software program of the above-described various embodiments of the present disclosure.
The computer readable storage medium may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may include, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium would include the following: an electrical connection having one or more wires, a portable disk, a hard disk, 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), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
The basic principles of the present disclosure have been described above in connection with specific embodiments, however, it should be noted that the advantages, benefits, effects, etc. mentioned in the present disclosure are merely examples and not limiting, and these advantages, benefits, effects, etc. are not to be considered as necessarily possessed by the various embodiments of the present disclosure. Furthermore, the specific details disclosed herein are for purposes of illustration and understanding only, and are not intended to be limiting, since the disclosure is not necessarily limited to practice with the specific details described.
In this specification, each embodiment is described in a progressive manner, and each embodiment is mainly described in a different manner from other embodiments, so that the same or similar parts between the embodiments are mutually referred to. For system embodiments, the description is relatively simple as it essentially corresponds to method embodiments, and reference should be made to the description of method embodiments for relevant points.
The block diagrams of the devices, apparatuses, devices, systems referred to in this disclosure are merely illustrative examples and are not intended to require or imply that the connections, arrangements, configurations must be made in the manner shown in the block diagrams. As will be appreciated by one of skill in the art, the devices, apparatuses, devices, systems may be connected, arranged, configured in any manner. Words such as "including," "comprising," "having," and the like are words of openness and mean "including but not limited to," and are used interchangeably therewith. The terms "or" and "as used herein refer to and are used interchangeably with the term" and/or "unless the context clearly indicates otherwise. The term "such as" as used herein refers to, and is used interchangeably with, the phrase "such as, but not limited to.
The methods and apparatus of the present disclosure may be implemented in a number of ways. For example, the methods and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, firmware. The above-described sequence of steps for the method is for illustration only, and the steps of the method of the present disclosure are not limited to the sequence specifically described above unless specifically stated otherwise. Furthermore, in some embodiments, the present disclosure may also be implemented as programs recorded in a recording medium, the programs including machine-readable instructions for implementing the methods according to the present disclosure. Thus, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.
It is also noted that in the apparatus, devices and methods of the present disclosure, components or steps may be disassembled and/or assembled. Such decomposition and/or recombination should be considered equivalent to the present disclosure.
The previous description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other aspects without departing from the scope of the disclosure. Thus, the present disclosure is not intended to be limited to the aspects shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
The foregoing description has been presented for purposes of illustration and description. Furthermore, this description is not intended to limit the embodiments of the disclosure to the form disclosed herein. Although a number of example aspects and embodiments have been discussed above, a person of ordinary skill in the art will recognize certain variations, modifications, alterations, additions, and subcombinations thereof.
Claims (11)
1. A page code generation method, comprising:
acquiring a page design diagram and determining information of each element in the page design diagram; the information of each element in the page design diagram comprises: type information, hierarchy information, feature information, and location information;
determining keywords corresponding to elements in the page design diagram based on the type information and the level information of the elements in the page design diagram;
the keywords corresponding to each element in the page design diagram comprise: an element level keyword, the element level keyword comprising: folder management keywords and picture adjustment keywords; determining folder management keywords corresponding to elements in the page design diagram based on the hierarchy of folders in which the elements in the page design diagram are located; determining picture adjustment keywords corresponding to elements in the page design diagram based on the picture hierarchical relationship of the elements in the page design diagram;
and generating codes of the page design diagram based on the characteristic information and the position information of each element in the page design diagram and the keywords corresponding to each element.
2. The method of claim 1, wherein the keywords corresponding to each element in the page layout diagram comprise: element type keywords.
3. The method according to claim 1 or 2, wherein the determining, based on the type information and the level information of each element in the page layout, the keyword corresponding to each element in the page layout includes:
determining element type keywords corresponding to elements in the page design drawing based on the type information of the elements in the page design drawing;
and determining element level keywords corresponding to each element in the page design diagram based on the level information of each element in the page design diagram.
4. The method according to claim 1, wherein the determining, based on the type information and the level information of each element in the page design drawing, between the keywords corresponding to each element in the page design drawing and the codes generating the page design drawing based on the feature information and the position information of each element in the page design drawing and the keywords corresponding to each element, further comprises: and merging folders in which all elements in the page design diagram are positioned in the same hierarchy based on the folder management keywords of all elements in the page design diagram.
5. The method according to claim 1, wherein the generating the code of the page layout based on the feature information and the location information of each element in the page layout and the keywords corresponding to each element includes:
determining the class corresponding to each element in the page design diagram and the attribute information of the class based on the characteristic information and the position information of each element in the page design diagram;
and generating codes of the page design diagram based on the class corresponding to each element in the page design diagram, the attribute information of the class and the keywords corresponding to each element in the page design diagram.
6. A page code generating apparatus, comprising:
the first determining module is used for acquiring a page design drawing and determining information of each element in the page design drawing; the information of each element in the page design diagram comprises: type information, hierarchy information, feature information, and location information;
the second determining module is used for determining keywords corresponding to elements in the page design diagram based on the type information and the level information of the elements in the page design diagram;
the keywords corresponding to each element in the page design diagram comprise: an element level keyword, the element level keyword comprising: folder management keywords and picture adjustment keywords;
the second determining module is configured to:
determining folder management keywords corresponding to elements in the page design diagram based on the hierarchy of folders in which the elements in the page design diagram are located; determining picture adjustment keywords corresponding to elements in the page design diagram based on the picture hierarchical relationship of the elements in the page design diagram;
and the generation module is used for generating codes of the page design diagram based on the characteristic information and the position information of each element in the page design diagram and the keywords corresponding to each element.
7. The apparatus of claim 6, wherein the second determining module comprises:
the first determining unit is used for determining element type keywords corresponding to elements in the page design drawing based on the type information of the elements in the page design drawing;
and the second determining unit is used for determining element level keywords corresponding to the elements in the page design diagram based on the level information of the elements in the page design diagram.
8. The apparatus of claim 6, wherein between the second determining module and the generating module, further comprises: and the merging module is used for merging folders in which all elements in the page design diagram are positioned in the same hierarchy based on the folder management keywords of all elements in the page design diagram.
9. The apparatus of claim 8, wherein the generating module comprises:
a third determining unit, configured to determine, based on feature information and position information of each element in the page design drawing, a class corresponding to each element in the page design drawing and attribute information of the class;
and the generating unit is used for generating codes of the page design diagram based on classes corresponding to the elements in the page design diagram, attribute information of the classes and keywords corresponding to the elements in the page design diagram.
10. A computer readable storage medium, characterized in that the storage medium stores a computer program for executing the page code generation method according to any one of the preceding claims 1-5.
11. An electronic device, the electronic device comprising:
a processor;
a memory for storing the processor-executable instructions;
the processor is configured to read the executable instructions from the memory and execute the instructions to implement the page code generation method according to any one of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010285885.XA CN111475156B (en) | 2020-04-13 | 2020-04-13 | Page code generation method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010285885.XA CN111475156B (en) | 2020-04-13 | 2020-04-13 | Page code generation method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111475156A CN111475156A (en) | 2020-07-31 |
| CN111475156B true CN111475156B (en) | 2024-04-02 |
Family
ID=71752247
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010285885.XA Active CN111475156B (en) | 2020-04-13 | 2020-04-13 | Page code generation method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111475156B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112528117B (en) * | 2020-12-11 | 2023-03-14 | 杭州安恒信息技术股份有限公司 | Recognition method and related device for government affair website primary catalog |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2001008007A1 (en) * | 1999-07-22 | 2001-02-01 | Passage Software, Llc | Method and system of automated generation of program code from an object oriented model |
| CN107291476A (en) * | 2017-06-27 | 2017-10-24 | 北京微影时代科技有限公司 | Canvas code generating methods, device, electronic equipment and storage medium |
| CN108804093A (en) * | 2018-06-15 | 2018-11-13 | 联想(北京)有限公司 | A kind of code generating method and electronic equipment |
| CN109783094A (en) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | Front end page generation method, device, computer equipment and storage medium |
| CN109814866A (en) * | 2019-01-31 | 2019-05-28 | 天津字节跳动科技有限公司 | Page application is converted into the treating method and apparatus of native applications |
| CN110275705A (en) * | 2019-06-19 | 2019-09-24 | 北京三快在线科技有限公司 | Generate method, apparatus, equipment and the storage medium for preloading page code |
| CN110321126A (en) * | 2019-07-08 | 2019-10-11 | 北京三快在线科技有限公司 | The method and apparatus for generating page code |
| CN110333862A (en) * | 2019-06-17 | 2019-10-15 | 深圳壹账通智能科技有限公司 | UI page code generation method, device and server |
| CN110442333A (en) * | 2019-07-11 | 2019-11-12 | 北京磨刀刻石科技有限公司 | Method and apparatus based on design drawing automatically generating program code |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7120897B2 (en) * | 2001-07-10 | 2006-10-10 | Microsoft Corporation | User control objects for providing server-side code generation from a user-defined dynamic web page content file |
| US8726226B2 (en) * | 2009-06-05 | 2014-05-13 | Microsoft Corporation | Integrated work lists for engineering project change management |
| US9696974B2 (en) * | 2013-03-13 | 2017-07-04 | Microsoft Technology Licensing, Llc. | Graph-based model for type systems |
| US10360288B2 (en) * | 2017-01-25 | 2019-07-23 | International Business Machines Corporation | Web page design snapshot generator |
| CN106980504B (en) * | 2017-03-28 | 2022-07-01 | 腾讯科技（深圳）有限公司 | Application program development method and tool and equipment thereof |
-
2020
- 2020-04-13 CN CN202010285885.XA patent/CN111475156B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2001008007A1 (en) * | 1999-07-22 | 2001-02-01 | Passage Software, Llc | Method and system of automated generation of program code from an object oriented model |
| CN107291476A (en) * | 2017-06-27 | 2017-10-24 | 北京微影时代科技有限公司 | Canvas code generating methods, device, electronic equipment and storage medium |
| CN108804093A (en) * | 2018-06-15 | 2018-11-13 | 联想(北京)有限公司 | A kind of code generating method and electronic equipment |
| CN109783094A (en) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | Front end page generation method, device, computer equipment and storage medium |
| CN109814866A (en) * | 2019-01-31 | 2019-05-28 | 天津字节跳动科技有限公司 | Page application is converted into the treating method and apparatus of native applications |
| CN110333862A (en) * | 2019-06-17 | 2019-10-15 | 深圳壹账通智能科技有限公司 | UI page code generation method, device and server |
| CN110275705A (en) * | 2019-06-19 | 2019-09-24 | 北京三快在线科技有限公司 | Generate method, apparatus, equipment and the storage medium for preloading page code |
| CN110321126A (en) * | 2019-07-08 | 2019-10-11 | 北京三快在线科技有限公司 | The method and apparatus for generating page code |
| CN110442333A (en) * | 2019-07-11 | 2019-11-12 | 北京磨刀刻石科技有限公司 | Method and apparatus based on design drawing automatically generating program code |
Non-Patent Citations (3)
| Title |
|---|
| 赵金东,于沛.一种轻量级Web应用建模方法.烟台大学学报(自然科学与工程版).2004,(02),全文. * |
| 阳林 ; 及俊川 ; 李新 ; .一种可视化代码生成器的研究及应用.科研信息化技术与应用.2016,(02),全文. * |
| 面向Web应用整合开发的页面编辑器的设计与实现;廖坤;谭景信;栾名君;;计算机工程与设计;20100628(12);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111475156A (en) | 2020-07-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10831984B2 (en) | Web page design snapshot generator | |
| US20190251143A1 (en) | Web page rendering method and related device | |
| US8074167B2 (en) | Cross domain presence of web user interface and logic | |
| CN108717437B (en) | Search result display method and device and storage medium | |
| WO2016032080A1 (en) | Chart conversion system using metadata and method therefor | |
| US9141596B2 (en) | System and method for processing markup language templates from partial input data | |
| CN111512315A (en) | Block-wise extraction of document metadata | |
| JP2006268638A (en) | Document difference detector | |
| CN110096275B (en) | Page processing method and device | |
| WO2020118485A1 (en) | Method of Detecting User Interface Layout Issues for Web Applications | |
| US20230206670A1 (en) | Semantic representation of text in document | |
| US9141344B2 (en) | Hover help support for application source code | |
| CN113535165A (en) | Interface generation method and device, electronic equipment and computer readable storage medium | |
| CN113535164A (en) | Front-end interface generation method and device, electronic equipment and storage medium | |
| US9996506B2 (en) | Identifying fonts using custom ligatures | |
| US9141867B1 (en) | Determining word segment boundaries | |
| CN111475156B (en) | Page code generation method and device, electronic equipment and storage medium | |
| US9594737B2 (en) | Natural language-aided hypertext document authoring | |
| JP2012099097A (en) | Application of path-fill algorithm in laying out text at periphery of object | |
| CN114579461A (en) | Browser compatibility detection method and related equipment | |
| US20130031460A1 (en) | Using a common input/output format to generate a page of an electronic document | |
| CN113656041A (en) | Data processing method, device, equipment and storage medium | |
| JP2014164548A (en) | Information processing system | |
| CN102567305B (en) | The page of resolving in layout relevant documentation is quoted | |
| CN111782180A (en) | Page generation method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |