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

A technology of interface code and interface design, which is applied in the computer field, can solve the problems of low accuracy and achieve the effect of improving accuracy and generating efficiency

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

AI Technical Summary

Problems solved by technology

[0004] This application provides a front-end interface code generation method to solve the

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 generation method and device, electronic equipment and storage medium
  • Front end interface code generation method and device, electronic equipment and storage medium
  • Front end interface code generation method and device, electronic equipment and storage medium

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

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

[0026] Step 100, exporting front-end interface design data from the front-end interface design draft.

[0027] In the prior art, when developing the front-end interface, usually the designer first designs the front-end interface through design software, and then exports the pictures or controls or cutouts in the front-end interface designed by the designer into a file in image format, HTML format data file or JSON format data file. After that, the software engineer writes the interface display code so that the front-end interface is displayed when the program is running. Design software commonly used by designers such as: Sketch, Photoshop, Illustrator and Fireworks, etc. Usually, the design software supports the export of source data, and also supports the export of some layers or interface elements. Taking Sketch as an...

Embodiment 2

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

[0037] Step 200, exporting front-end interface design data from the design draft of the front-end interface.

[0038] For the specific technical solution of deriving the design data of the front-end interface from the design draft of the front-end interface, refer to Embodiment 1, which will not be repeated here.

[0039] After obtaining the front-end interface design data, since the front-end interface design data is the data exported from the design draft through the open interface of the design software, the exported front-end interface design data contains the fields defined by the open interface of the design software. Data processing is performed on the front-end interface design data, and the information required for designing the front-end interface display program is obtained therefrom. During specific implementa...

Embodiment 3

[0091] A front-end interface code generation device disclosed in this application, such as Figure 5 As shown, the device includes:

[0092] A data export module 510, configured to derive front-end interface design data from the design draft of the front-end interface;

[0093] A control information acquisition module 520, configured to collect and transform information on the front-end interface design data exported by the data export module 510, and determine the control information included in the front-end interface;

[0094] The code generating module 530 is configured to combine the input configuration information and the control information to generate the front-end interface code.

[0095] optional, such as Figure 6 As shown, the control information acquisition module 520 further includes:

[0096] The control information conversion unit 5201 is configured to map each layer in the front-end interface design data with a preset control type, so as to preliminarily de...

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 generation method, and belongs to the technical field of computers. The problem that in the prior art, a front end interface code generation method islow in accuracy is solved. The method comprises the steps that front end interface design data is exported from a front end interface design layout, information collection and conversion treatment are performed on the front end interface design data, control information included in the front end interface is determined, and on the basis of input configuration information and the control information, front end interface codes are generated. According to the method, the control information in the front end interface is exported on the basis of the design layout, the front end interface codes are automatically generated according to the exported control information and configuration information, the interface design information in the design layout is sufficiently reserved, the defect that generated interface codes are not accurate due to the fact that obtained interface information is not sufficient when interface codes are directly generated from screenshots is overcome, and the accuracy of the automatically generated front end interface codes is effectively improved.

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

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
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 Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

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

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap