Looking for breakthrough ideas for innovation challenges? Try Patsnap Eureka!

Front end interface code generating method and device, electronic equipment and storage medium

A technology of interface code and interface design, applied in the computer field, can solve problems such as loss of necessary information for programming, low development efficiency, poor applicability, etc., and achieve the effects of avoiding layout restrictions on applicable interfaces, improving accuracy, and improving efficiency

Active Publication Date: 2018-07-06
BEIJING SANKUAI ONLINE TECH CO LTD
View PDF5 Cites 15 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

Compared with the traditional technology, the method of generating front-end interface code based on deep learning has greatly improved the speed of generating front-end interface code, but the screenshots lose a lot of necessary programming information compared with the complete design draft, resulting in low accuracy of the generated code, which cannot Reach engineering-level use requirements
In the prior art, there is also a method for generating a web interface by pre-establishing code standard templates, general script files, and information item configuration tables, automatically loading elements and calling script files according to configuration processing results, but this method requires pre-establishing code standards Templates, low development efficiency, and are only suitable for interfaces with single interface design elements and simple structures, which cannot meet the needs of complex design interfaces
[0003] It can be seen that the front-end interface code generation method in the prior art has at least the defects of low code generation accuracy, low development efficiency, or poor applicability

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Front end interface code generating method and device, electronic equipment and storage medium
  • Front end interface code generating method and device, electronic equipment and storage medium
  • Front end interface code generating method and device, electronic equipment and storage medium

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0028] A front-end interface code generation method disclosed in this application, such as figure 1 As shown, the method includes: step 100 to step 120.

[0029] Step 100, acquiring position information of controls included in the source data derived from the front-end interface design draft.

[0030] During specific implementation, the front-end interface design data may be derived from the design draft of the front-end interface, and then information collection and transformation processing are performed on the front-end interface design data to determine the control information included in the front-end interface. The control information includes: a list of all controls included in the front-end interface, and position information of each control, and the position information at least includes: position coordinates and control size information such as control width and height.

[0031] In the prior art, when developing the front-end interface, usually the designer first de...

Embodiment 2

[0040] A front-end interface code generation method disclosed in this application, such as figure 2 As shown, the method includes: Step 200 to Step 240.

[0041] Step 200, acquiring position information of controls included in the source data derived from the front-end interface design draft.

[0042] For the specific implementation manner of obtaining the position information of the controls included in the source data exported from the front-end interface design draft, refer to Embodiment 1, and details will not be repeated here.

[0043] During specific implementation, the obtained position information of the controls included in the front-end interface at least includes information such as position coordinates and the width and height of the controls.

[0044] After obtaining the position information of the control, first, based on the position information of the control, determine the layout scheme of the control by simulating the layout, including: based on the positio...

Embodiment 3

[0101] A front-end interface code generation method disclosed in this application, such as Figure 5 As shown, the method includes: step 500 to step 550.

[0102] Step 500, acquiring position information of controls included in the source data derived from the front-end interface design draft.

[0103] For the specific implementation manner of obtaining the position information of the controls included in the source data exported from the front-end interface design draft, refer to Embodiment 1, and details will not be repeated here.

[0104] During specific implementation, the obtained position information of the controls included in the front-end interface at least includes information such as position coordinates and the width and height of the controls. The obtained position information of the controls included in the front-end interface may also include position coordinates and dimensions of the structural frame corresponding to the controls.

[0105] The layout scheme o...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention provides a front end interface code generating method, and belongs to the technical field of computers. The front end interface code generating method solves the problems existing in a front end interface generating method in the prior art that a generated code is low in accuracy, and the developing efficiency is low. The method comprises the steps of obtaining position information of a control included in source data exported by a design file of a front end interface, then based on the position information of the control, through the mode of simulating the layout or iteration ofthe control in a container, determining the layout scheme of the control, and finally, according to the layout scheme, generating the code of the front end interface. By means of the method, by obtaining the position information of the control included in the source data exported by the design file of the front end interface, control data is fully reserved, and the accuracy of the generated codecan be effectively improved; according to the position information of the control, the layout scheme of the control is automatically determined, a standard layout template does not need to be manuallyinput, the efficiency of generating the code of the front end interface is improved, and meanwhile, the generated layout code is higher in flexibility.

Description

technical field [0001] The present application relates to the field of computer technology, in particular to a front-end interface code generation method, device, electronic equipment and storage medium. Background technique [0002] With the development of computer technology, there are more and more types of clients. In order to maintain the consistency of the product interface, the UI (user interface) designed by designers usually needs to be displayed on different types of clients, such as webpage, PC, mobile terminal etc. In the traditional graphical user interface development process, the user interface designed by the designer usually needs to be delivered to the coding engineer. The coding engineer lays out the interface elements in the graphical user interface to the front end by writing code. However, the traditional interface layout method Coding engineers are required to manually write code and layout interface elements, and the development efficiency is low. I...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
Patent Type & Authority Applications(China)
IPC IPC(8): G06F8/38
CPCG06F8/38
Inventor 彭笑风郝田田顾健张玲火智英梁士兴何佳张杰胡朝旭
Owner BEIJING SANKUAI ONLINE TECH CO LTD
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Patsnap Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Patsnap Eureka Blog
Learn More
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com