CN108287707B - JSX file generation method and device, storage medium and computer equipment - Google Patents
JSX file generation method and device, storage medium and computer equipment Download PDFInfo
- Publication number
- CN108287707B CN108287707B CN201710823347.XA CN201710823347A CN108287707B CN 108287707 B CN108287707 B CN 108287707B CN 201710823347 A CN201710823347 A CN 201710823347A CN 108287707 B CN108287707 B CN 108287707B
- Authority
- CN
- China
- Prior art keywords
- file
- jsx
- visual information
- information
- layer
- 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
Images
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to a JSX file generation method, a JSX file generation device, a storage medium and computer equipment, wherein the method comprises the following steps: acquiring a PSD file to be processed; identifying visual information in each layer in the PSD file and position information of the visual information in the corresponding layer; forming corresponding layered files according to the visual information and the position information in each layer, and performing classified storage; acquiring a JSX template file matched with the PSD file; and loading the corresponding visual information into the corresponding region of the JSX template file according to the position information of the visual information in the classified and stored hierarchical file in the corresponding layer, thereby generating the JSX file. The method, the device, the storage medium and the computer equipment for generating the JSX file can improve the convenience of JSX file generation.
Description
Technical Field
The invention relates to the technical field of information processing, in particular to a JSX file generation method, a JSX file generation device, a JSX file generation storage medium and computer equipment.
Background
JSX (javascript XML) is an XML-like syntax that builds tags inside the read component, and JSX files are descriptive text composed of JSX commands. When a user interface view component is created through React, a JSX file is needed.
The traditional method for generating the JSX file is to convert the PSD file into the HTML file and then convert the HTML file into the JSX file. Since this conventional method needs to perform two times of conversion when generating a JSX file, the conversion process is complicated.
Disclosure of Invention
Based on this, it is necessary to provide a method, an apparatus, a storage medium, and a computer device for generating a JSX file, aiming at the technical problem that the process of the conversion and generation of the JSX file is complex.
A JSX file generation method, the method comprising: acquiring a PSD file to be processed; identifying visual information in each layer in the PSD file and position information of the visual information in the corresponding layer; forming corresponding layered files according to the visual information and the position information in each layer, and performing classified storage; acquiring a JSX template file matched with the PSD file; and loading the corresponding visual information into the corresponding region of the JSX template file according to the position information of the visual information in the classified and stored hierarchical file in the corresponding layer, thereby generating the JSX file.
In one embodiment, before forming a corresponding layered file according to the visual information and the location information in each layer and performing classified storage, the method further includes: identifying an incidence relation between visual information in each layer in the PSD file; the forming of the corresponding layered file according to the visual information and the position information in each layer and the classified storage include: and forming corresponding layered files for the visual information and the position information in each layer according to the association relation, and performing classified storage.
In one embodiment, the forming, according to the association relationship, a corresponding layered file for the visual information and the position information in each layer, and performing classified storage includes: detecting whether the types of the visual information in the layers with the association relation are the same or not, and if so, combining the visual information of the same type into the same hierarchical file; independently generating a layered file from the visual information in the layer without the association relationship or the different types of visual information in the layer with the association relationship; and storing the layered file into a storage path corresponding to the type of the visual information.
In one embodiment, the loading, according to the position information of the visual information in the hierarchical file stored in the classified manner in the corresponding layer, the corresponding visual information into the corresponding region of the JSX template file includes: extracting the hierarchical files under each storage path; and loading the visual information and the position information in the extracted hierarchical file into an area corresponding to the storage path in the JSX template file according to the position information.
In one embodiment, the forming a corresponding hierarchical file according to the visual information and the location information in each layer includes: carrying out format processing and position processing on the visual information; and forming a corresponding layered file according to the processed visual information and the position information in each layer.
In one embodiment, the obtaining a JSX template file matching the PSD file includes: acquiring historical feedback information of each JSX template file; and selecting a JSX template file matched with the PSD file according to the historical feedback information.
A JSX file generation apparatus, the apparatus comprising: the PSD file acquisition module is used for acquiring a PSD file to be processed; the identification module is used for identifying the visual information in each layer in the PSD file and the position information of the visual information in the corresponding layer; the hierarchical file generation module is used for forming corresponding hierarchical files according to the visual information and the position information in each layer and performing classified storage; a JSX template file obtaining module used for obtaining a JSX template file matched with the PSD file; and the JSX file generating module is used for loading corresponding visual information into a corresponding region of the JSX template file according to the position information of the visual information in the classified and stored hierarchical file in the corresponding layer so as to generate the JSX file.
In one embodiment, the identification module is further configured to identify an association relationship between the visual information in each layer in the PSD file; the hierarchical file generation module is further configured to form a corresponding hierarchical file for the visual information and the position information in each layer according to the association relationship.
A computer-readable storage medium on which a computer program is stored, which when executed by a processor, implements the steps of the JSX file generation method described in the embodiments above.
A computer device comprising a memory and a processor, wherein the memory stores a computer program executable by the processor, and the processor executes the computer program to implement the steps of the JSX file generation method described in the embodiments.
According to the JSX file generation method, the device, the storage medium and the computer equipment, the visible information in each layer in the PSD file and the position information of the visible information in the corresponding layer are identified, the identified layers are converted into the layered files for classified storage, meanwhile, the JSX template file matched with the PSD file is obtained, the corresponding visible information and the position information of the visible information are extracted from the stored layered files, the region loaded with the visible information is determined according to the visible information and the position information, and the region is loaded into the corresponding region, so that the JSX file is generated. According to the method, the layered file is generated, and the JSX template file is utilized, so that the PSD file can be directly converted into the JSX file, and the convenience of JSX file generation is improved.
Drawings
FIG. 1 is a diagram of an application environment of a JSX file generation method in one embodiment;
FIG. 2 is a flowchart of a JSX file generation method in one embodiment;
fig. 3 is a flowchart illustrating forming a corresponding layered file for the visual information and the location information in each layer according to the association relationship and performing classified storage in one embodiment;
FIG. 4 is a block diagram showing the structure of a JSX file generation apparatus according to an embodiment;
FIG. 5 is a diagram illustrating an internal structure of a computer device according to an embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The JSX file generation method provided by the present invention can be applied to an application environment shown in fig. 1, and as shown in fig. 1, the application environment of the JSX file generation method includes a terminal 110 and a server 120. The terminal 110 may be connected to the server 120 through a network, wherein the terminal 110 may be a terminal used by a user who designs or develops a JSX file, and the server 120 may be a server adapted to generate the JSX file. Terminal 110 or server 120 may store a PSD file to be processed, identify visual information and position information thereof in each layer in the PSD file, and generate a JSX file. For example, taking terminal 110 as an example, terminal 110 may obtain a PSD file to be processed locally, or may obtain the PSD file to be processed from server 110; the application which can identify and process the PSD file and is built in the local can be called to identify the visual information in each layer in the PSD file and the position information of the visual information in the corresponding layer; or sending an identification instruction for the PSD file to the server 120, receiving the visual information in each layer and the position information of the visual information in the corresponding layer in the PSD file in another place of the server 120, then forming a corresponding layered file according to the visual information and the position information in each layer, and performing classified storage; acquiring a JSX template file matched with the PSD file; and loading the corresponding visual information into the corresponding region of the JSX template file according to the position information of the visual information in the corresponding layer of the classified and stored hierarchical file, and generating the JSX file, thereby realizing the generation of the JSX file.
In one embodiment, as shown in FIG. 2, a JSX file generation method is provided. The method comprises the following steps:
step S202, a PSD file to be processed is obtained.
In this embodiment, a computer device may obtain a PSD file to be processed, where the computer device may be a terminal or a server, and the terminal may include, but is not limited to, a mobile phone, a tablet computer, a portable notebook, or an intelligent wearable device. A psd (Photoshop document) file is a file of a proprietary format of the Adobe company's image processing software Photoshop. When the computer equipment is a terminal, a corresponding PSD file selection interface can be provided, the selection operation of a user on the corresponding PSD file from a PSD file selection inlet provided on the interface is received, the clicking operation of a virtual button selected on the PSD file on the interface, corresponding gesture or voice information and the like are detected, a PSD file selection instruction is generated according to the corresponding clicking operation, gesture or voice information and the like, the correspondingly selected PSD file is obtained according to the selection instruction, and the PSD file is set as a PSD file to be processed for generating the JSX file.
When the computer equipment is a server, the terminal can generate a corresponding JSX file generation request according to the PSD file to be processed selected by the user, and the request is sent to the server. The server can receive the JSX file generation request and obtain the PSD file to be processed contained in the JSX file generation request.
Step S204, identifying the visual information in each layer in the PSD file and the position information of the visual information in the corresponding layer.
In this embodiment, all layers in Photoshop are stored in the PSD file, attributes of different layers are different, and different layers have a hierarchical relationship. Each layer may include corresponding visual information and position information of the visual information in the corresponding layer. The visual information comprises information such as pictures, characters, channels, reference lines, annotations, colors and the like, and the position information is the position of the corresponding visual information in the corresponding layer. The attribute of the image layer includes an attribute of each piece of visual information, for example, the attribute of the picture is in formats of png, bmp, and the like.
In one embodiment, the computer device may invoke preset Photoshop software to parse the PSD file to be processed, and identify the visual information and the position information thereof in each layer in the PSD file.
In an embodiment, the computer device may further send the PSD file to a cloud server adapted to parse the PSD file, send a parsing instruction to the cloud server, and receive the visual information, the location information, and the association relationship in each layer parsed by the cloud server, so as to reduce resource consumption of the computer device.
And step S206, forming corresponding layered files according to the visual information and the position information in each layer, and performing classified storage.
In this embodiment, the computer device may form, according to the identified layers, corresponding one hierarchical file from the position information in one or more of the layers, and store the corresponding hierarchical file. The stored layered files can be all layers in the PSD files, namely all layers in the PSD files are independently extracted for classified storage. In particular, it may be cached in an internal memory of the computer device or stored into a corresponding non-volatile storage medium. For example, each layer may be stored as a hierarchical file, and the visual information and the position information thereof in the layer may be kept unchanged. Alternatively, multiple image layers may be combined into a layered file, and each visual element in the combined layered file may retain its position in the original image layer, or may adjust the position stored in the layered file in the original image layer.
In one embodiment, the formed different hierarchical files can be stored to the corresponding different paths according to the different attributes of the visual information in the files, so as to form the classified storage.
And step S208, acquiring a JSX template file matched with the PSD file.
In this embodiment, the computer device further presets a plurality of JSX template files, and may select one JSX template file that is most matched with the PSD file. The JSX template file is used for generating a corresponding JSX file, can be a JSX template file customized by a user and can also be a pre-stored JSX template file. The content styles of JSX files generated by different JSX template files are not necessarily the same.
The computer equipment can select the most matched one from the JSX template files according to the attribute of each layer in the PSD file, the type of the visual element and the position information in the layer, and the most matched one is used as the JSX template file of the JSX file to be generated.
In one embodiment, the step S208 may be performed at any time after the step S202 and before the step S210.
Step S210, loading corresponding visual information into a corresponding region of the JSX template file according to the position information of the visual information in the classified and stored hierarchical file in the corresponding layer, and generating the JSX file.
In this embodiment, different image layers and loading regions to which different visual information in each image layer is applicable are set in the JSX template file, and the computer device may extract corresponding visual information from the stored hierarchical file, determine a loading region adapted to the computer device in the JSX template file according to the attribute of the visual information and the position information in the hierarchical file, load the visual information into the corresponding determined region, and generate a corresponding JSX file after all the visual information is loaded.
In this embodiment, a JSX file is generated by identifying visual information in each layer in a PSD file and position information of the visual information in the corresponding layer, converting the identified layer into a hierarchical file for classified storage, acquiring a JSX template file matched with the PSD file, extracting corresponding visual information and position information thereof from the stored hierarchical file, determining a region where the visual information is loaded according to the visual information and the position information, and loading the region into the corresponding region. According to the method, the layered file is generated, and the JSX template file is utilized, so that the PSD file can be directly converted into the JSX file, the convenience for generating the JSX file is improved, and meanwhile the conversion efficiency of the JSX file can be improved.
In one embodiment, before step S206, the method further includes: identifying an incidence relation between visual information in each layer in the PSD file; step S206 includes: and forming corresponding layered files for the visual information and the position information in each layer according to the association relationship, and performing classified storage.
In this embodiment, the computer device may further identify whether there is an association relationship between the visual information in each layer, where the association relationship indicates that there is a certain relationship, such as a reference relationship, between the corresponding visual information. The computer equipment can extract the visual information in the layers with the incidence relation according to the identified incidence relation, and the visual information is combined to generate a layered file. And extracting the visual elements in the layer without the incidence relation, and generating the layered file. And merging the layers with the association relationship into a layered file, and performing classified storage on the generated layered file. Likewise, each visual element in the generated hierarchical file may retain its position in the original image layer, or the position in the original image layer may be adjusted to the position stored in the hierarchical file.
In this embodiment, the hierarchical file is formed by further considering the association relationship between the visual information, so that the efficiency of subsequently loading the visual information in the hierarchical file into the JSX template file is higher.
In an embodiment, as shown in fig. 3, the forming, according to the association relationship, a corresponding layered file for the visual information and the location information in each layer, and performing classified storage includes:
step S302, detecting whether the types of the visual information in the layers having the association relationship are the same, if yes, performing step S304, otherwise, performing step S306.
In this embodiment, the computer device may detect whether there is an association between the visual information in each layer, and after detecting whether there is an association between the visual information in each layer, may further detect whether the information types of the visual information having an association are the same. For example, if two types of visual information having an association relationship are respectively text information and picture information, it is determined that the information types of the two types of visual information are different, and when it is detected that the two types of visual information are both picture information and the information types of the two types of picture information are respectively pictures in the JPG format, it is determined that the information types of the two types of visual information are the same.
And step S304, merging the same type of visual information into the same hierarchical file.
In this embodiment, the visual information with the same type and correlation to each other may be merged into the same hierarchical file to form a hierarchical file, so that the types of information between the merged and stored visual information are the same, thereby improving convenience and efficiency of subsequently calling the visual information in the hierarchical file.
Step S306, independently generating a hierarchical file from the visual information in the layer without the association relationship or the different types of visual information in the layer with the association relationship.
In this embodiment, for the detected visual information in the layer that does not have the association relationship, and although the visual information has the association relationship, the types of the associated visual information are different, the related visual information in the unified layer is separately stored, that is, the visual information in each layer forms a layered file separately. For example, if there are 5 image layers and there is no association between the visual information in each image layer, or there is an association between the visual information in each image layer, but the visual information is not the same, then 5 hierarchical files may be correspondingly generated, and each hierarchical file separately stores the visual information in a corresponding image layer.
In one embodiment, when the visual information is character information, whether the character information is editable character information or not can be further detected, and if not, the editable character information and the non-editable character information are judged to be different types of visual information. For example, the text information is processed by filtering, color changing and deforming in the PSD file, and cannot be edited.
Step S308, storing the layered file into a storage path corresponding to the type of the visual information.
In this embodiment, the computer device may store the layered file formed by the visual information in different layers to different preset paths. Specifically, the corresponding storage path may be set for different types of visual information. For example, the storage location corresponding to the visual information of a certain graphic class may be set as path a, and the storage location for the visual information of a certain text type may be set as path B.
And when the information type of the visual information in the layer is detected, determining a corresponding storage path, and storing the formed layered file to the corresponding path so as to further improve the normative to the storage of the layered file. And when the layered file is required to be called subsequently, the layered file of the corresponding type of the visual information can be found according to the corresponding path, so that the convenience of calling the layered file subsequently is improved.
In an embodiment, the loading, according to the position information of the visual information in the hierarchical file stored in the classification in the corresponding layer, the corresponding visual information into the corresponding region of the JSX template file includes: extracting the hierarchical files under each storage path; and loading the visual information and the position information in the extracted hierarchical file into a region corresponding to the storage path in the JSX template file according to the position information.
In this embodiment, after detecting a loading instruction for performing visual information on the JSX template file, the computer device may extract the hierarchical files generated and stored in the above step, and extract each hierarchical file of a corresponding type from a corresponding preset path, where the extracted hierarchical file is a hierarchical file generated from the PSD file to be processed.
The type of visual information that the computer device sets up in which different regions can be adapted to load is not necessarily the same for each type of JSX template file. The computer equipment can detect the type suitable for loading of each region to be loaded in the JSX template file, can automatically extract the corresponding layered file from the corresponding path according to the suitable type, and loads the visual information in the corresponding layered file into the corresponding region. And completing loading of the visual information in all the hierarchical files by traversing the hierarchical files under each storage path, thereby generating the corresponding JSX file. The hierarchical file of the corresponding type of the visual information is found according to the corresponding path and is loaded into the corresponding area of the JSX template file, so that the convenience of calling the hierarchical file and the efficiency of loading the visual information can be improved.
In one embodiment, after the corresponding hierarchical file is extracted from the corresponding path, before the corresponding hierarchical file is ready to be loaded to the corresponding JXS template file, prompt information for confirming whether to load the hierarchical file may be generated, so that the user may modify the hierarchical file to be loaded, thereby further improving the loading accuracy.
In one embodiment, forming a corresponding hierarchical file according to the visual information and the location information in each layer includes: carrying out format processing and position processing on the visual information; and forming a corresponding layered file according to the processed visual information and the position information in each layer.
In this embodiment, the computer device may further perform format processing and location processing on the identified visual information. The format processing comprises detecting the information type of the identified visual information and judging whether modification is needed or not so that the information type of the modified visual information is more matched with the subsequently generated JSX file. The position processing is used for detecting whether the position of the visual information in the layered file to be formed needs to be adjusted or not, so that the adjusted position is more matched with the subsequently generated JSX file. The method comprises the steps of detecting whether the positions of the identified visual information in the image layers are matched with the positions of the visual information in the layered files to be formed, and if not, adjusting the positions. Through format processing and position processing, a corresponding layered file is formed according to the visual information after the format processing and the position processing, so that the efficiency of generating the JSX file by using the layered file can be further improved.
In one embodiment, obtaining a JSX template file that matches a PSD file comprises: acquiring historical feedback information of each JSX template file; and selecting a JSX template file matched with the PSD file according to the historical feedback information.
In this embodiment, a plurality of JSX template files may be stored in the template library of the computer device, and the history feedback information of each JSX template file may be further stored. The history feedback information comprises the use information, recommendation information and the like of the JSX template file, and the use times, use frequency, recommendation times and the like of the corresponding JSX template file can be calculated according to the use information and the recommendation information. The JSX template file suitable for generating the JSX file at this time can be inquired according to the using times, using frequency and recommendation times of each JSX template file.
In one embodiment, the JSX template file stored in the template library is a JSX template file used by a corresponding user, for example, historical feedback information of a JSX template file stored in association with a login account of the user may be used, and historical feedback information of a JSX template file stored in the computer device itself may also be used. Therefore, the corresponding JSX template file can be selected from the historical feedback information of the JSX template file used by the user. For example, according to the historical feedback information, the JSX template file with the largest number of times used by the user can be searched out, and the JSX template file with the largest number of times used by the user is determined to be the JSX template file which is the closest match to the PSD template file. Or inquiring the JSX template file used by the user most recently from the historical feedback information, and judging the JSX template file to be the JSX template file which is most matched with the PSD template file.
In one embodiment, when it is detected that the JSX template files associated with the login account of the user are not matched with the PSD file, a plurality of JSX template files can be queried from the server, one or more JSX template files with the highest matching degree can be selected from the plurality of JSX template files to be recommended to the user, and the selected JSX is determined to be the JSX template file matched with the PSD file according to the received selection instruction.
In one embodiment, the computer device can receive modification instructions for the JSX template file and store the modified JSX template file, so that a user can edit and create the JSX template file in a self-defined manner and select the modified JSX template file as the JSX template file matched with the PSD file, thereby improving the flexibility of generating the JSX template file. Specifically, the modification instruction can carry sequence adjustment information of the code blocks in the JSX template file and information such as editing and modifying of the code blocks, so that modification of the JSX template file is completed according to the carried modification and/or adjustment information, and an association relationship between the modified JSX template file and the user account is established.
According to the JSX file generation method, the PSD file of the design draft can be output into the exact JSX file in one key mode, the development efficiency from UI design to exact code development is obviously improved, the exact code can be more conveniently and smoothly docked into the mobile app, and the generated front-end code is good in consistency and more standard.
In one embodiment, as shown in fig. 4, there is provided a JSX file generating apparatus including:
a PSD file obtaining module 402, configured to obtain a PSD file to be processed.
The identifying module 404 is configured to identify the visual information in each layer in the PSD file, and the position information of the visual information in the corresponding layer.
And the hierarchical file generating module 406 is configured to form a corresponding hierarchical file according to the visual information and the position information in each layer, and perform classified storage.
A JSX template file obtaining module 408, configured to obtain a JSX template file matched with the PSD file.
The JSX file generating module 410 is configured to load, according to the position information of the visual information in the hierarchical file stored in the classification in the corresponding layer, the corresponding visual information into the corresponding region of the JSX template file, and generate the JSX file.
In one embodiment, the identifying module 404 is further configured to identify an association relationship between the visual information in each layer in the PSD file; the hierarchical file generating module 406 is further configured to form a corresponding hierarchical file for the visual information and the position information in each layer according to the association relationship.
In an embodiment, the hierarchical file generating module 406 is further configured to detect whether types of the visual information in the layers with the association relationship are the same, and if yes, combine the visual information of the same type into the same hierarchical file; independently generating a layered file from the visual information in the layer without the association relationship or the different types of visual information in the layer with the association relationship; and storing the layered file into a storage path corresponding to the type of the visual information.
In one embodiment, the JSX file generation module 410 is further configured to extract the hierarchical file under each storage path; and loading the visual information and the position information in the extracted hierarchical file into a region corresponding to the storage path in the JSX template file according to the position information.
In one embodiment, the hierarchical file generation module 406 is further configured to format and position the visual information; and forming a corresponding layered file according to the processed visual information and the position information in each layer.
In one embodiment, the JSX template file obtaining module 408 is further configured to obtain historical feedback information of each JSX template file; and selecting a JSX template file matched with the PSD file according to the historical feedback information.
The modules in the JSX file generating device can be wholly or partially implemented by software, hardware and a combination thereof. The network interface may be an ethernet card or a wireless network card. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules. The processor can be a Central Processing Unit (CPU), a microprocessor, a singlechip and the like.
In one embodiment, a computer readable storage medium is provided, on which a computer program is stored, which when executed by a processor implements the steps of the JSX file generation method in the embodiments described above.
In one embodiment, the computer program when executed by a processor implements the steps of: acquiring a PSD file to be processed; identifying visual information in each layer in the PSD file and position information of the visual information in the corresponding layer; forming corresponding layered files according to the visual information and the position information in each layer, and performing classified storage; acquiring a JSX template file matched with the PSD file; and loading the corresponding visual information into the corresponding region of the JSX template file according to the position information of the visual information in the classified and stored hierarchical file in the corresponding layer, thereby generating the JSX file.
In one embodiment, the computer program, when executed by the processor, further enables identifying an association between the visual information in each layer of the PSD file before enabling forming a corresponding layered file according to the visual information and the location information in each layer; the realized formation of the corresponding layered file according to the visual information and the position information in each layer comprises the following steps: and forming a corresponding layered file for the visual information and the position information in each layer according to the association relation.
In one embodiment, the forming, by the processor, the corresponding layered file according to the association relationship between the visual information and the position information in each layer, and performing classified storage includes: detecting whether the types of the visual information in the layers with the association relation are the same or not, and if so, combining the visual information of the same type into the same hierarchical file; independently generating a layered file from the visual information in the layer without the association relationship or the different types of visual information in the layer with the association relationship; and storing the layered file into a storage path corresponding to the type of the visual information.
In one embodiment, the computer program, when executed by a processor, for loading corresponding visual information into a corresponding region of a JSX template file according to location information of the visual information in a hierarchical file stored by classification in a corresponding layer, includes: extracting the hierarchical files under each storage path; and loading the visual information and the position information in the extracted hierarchical file into a region corresponding to the storage path in the JSX template file according to the position information.
In one embodiment, the computer program, when executed by a processor, implements forming a corresponding hierarchical file according to the visual information and the location information in each layer, including: carrying out format processing and position processing on the visual information; and forming a corresponding layered file according to the processed visual information and the position information in each layer.
In one embodiment, the computer program when executed by a processor implements obtaining a JSX template file that matches a PSD file, comprising: acquiring historical feedback information of each JSX template file; and selecting a JSX template file matched with the PSD file according to the historical feedback information.
In one embodiment, a computer device is provided, which includes a memory and a processor, the memory stores a computer program executable by the processor, and the processor executes the computer program to implement the steps of the JSX file generation method in the embodiments.
In one embodiment, the computer device may be a terminal, a server, or the like, such as terminal 110 or server 120 shown in fig. 1. Fig. 5 is a schematic diagram of an internal structure of the computer device in one embodiment. The computer device includes a processor, a memory, and a network interface connected by a system bus. Wherein, the processor is used for providing calculation and control capability and supporting the operation of the whole computer equipment. The memory is used for storing data, instruction codes and the like, and at least one computer program is stored on the memory, wherein the computer program can be executed by the processor to realize the JSX file generation method suitable for the computer device provided by the embodiment of the application. The Memory may include a non-volatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a Random-Access-Memory (RAM). For example, in one embodiment, the memory includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a database, and a computer program. The database stores data related to a JSX file generation method for implementing the embodiments, for example, a plurality of JSX template files may be stored. The computer program can be executed by a processor to implement a JSX file generation method provided by the above embodiments. The internal memory in the computer device provides a cached operating environment for the operating system, databases, and computer programs in the non-volatile storage medium. The network interface may be an ethernet card or a wireless network card, and is used for communicating with an external terminal or server.
Those skilled in the art will appreciate that the architecture shown in fig. 5 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components. For example, the computer device may also include a display screen that can be used to display information such as the corresponding PSD file and JSX file. The display screen may be a touch screen, such as a capacitive screen or an electronic screen, and the corresponding instruction may be generated by receiving a click operation applied to a control displayed on the touch screen.
In one embodiment, the processor, when executing the computer program, performs the steps of: acquiring a PSD file to be processed; identifying visual information in each layer in the PSD file and position information of the visual information in the corresponding layer; forming corresponding layered files according to the visual information and the position information in each layer, and performing classified storage; acquiring a JSX template file matched with the PSD file; and loading the corresponding visual information into the corresponding region of the JSX template file according to the position information of the visual information in the classified and stored hierarchical file in the corresponding layer, thereby generating the JSX file.
In an embodiment, when the processor executes the computer program, before forming a corresponding hierarchical file according to the visual information and the position information in each layer, the processor further includes a step of identifying an association relationship between the visual information in each layer in the PSD file; the realized formation of the corresponding layered file according to the visual information and the position information in each layer comprises the following steps: and forming a corresponding layered file for the visual information and the position information in each layer according to the association relation.
In one embodiment, the forming, by the processor, a corresponding hierarchical file for the visual information and the location information in each layer according to the association relationship when the computer program is executed, and performing classified storage includes: detecting whether the types of the visual information in the layers with the association relation are the same or not, and if so, combining the visual information of the same type into the same hierarchical file; independently generating a layered file from the visual information in the layer without the association relationship or the different types of visual information in the layer with the association relationship; and storing the layered file into a storage path corresponding to the type of the visual information.
In one embodiment, the loading, by the processor, corresponding visual information into a corresponding region of the JSX template file according to the position information of the visual information in the hierarchical file stored by classification in the corresponding layer when the computer program is executed includes: extracting the hierarchical files under each storage path; and loading the visual information and the position information in the extracted hierarchical file into a region corresponding to the storage path in the JSX template file according to the position information.
In one embodiment, the forming of the corresponding hierarchical file according to the visual information and the position information in each layer by the processor when the processor executes the computer program includes: carrying out format processing and position processing on the visual information; and forming a corresponding layered file according to the processed visual information and the position information in each layer.
In one embodiment, the obtaining of the JSX template file matching the PSD file by the processor when executing the computer program comprises: acquiring historical feedback information of each JSX template file; and selecting a JSX template file matched with the PSD file according to the historical feedback information.
Those skilled in the art will appreciate that all or part of the flow of the method implementing the above embodiments may be implemented by a computer program instructing associated hardware. The computer program may be stored on a memory, such as in a non-volatile computer readable storage medium. When executed, the program may implement a process including embodiments of the methods described above.
Any reference to memory, storage, database or other medium used by the invention may include non-volatile memory. Suitable non-volatile memory can include read-only memory (ROM), Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), or flash memory.
The technical features of the embodiments described above may be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the embodiments described above are not described, but should be considered as being within the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
The above-mentioned embodiments only express several embodiments of the present invention, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the inventive concept, which falls within the scope of the present invention. Therefore, the protection scope of the present patent shall be subject to the appended claims.
Claims (10)
1. A JSX file generation method is characterized by comprising the following steps:
acquiring a PSD file to be processed;
identifying visual information in each layer in the PSD file and position information of the visual information in the corresponding layer;
forming corresponding layered files according to the visual information and the position information in each layer, and performing classified storage; the storage paths of the layered files formed by different types of visual information are different;
acquiring a JSX template file matched with the PSD file according to the attribute of each layer in the PSD file, the type of the visual information and the position information of the visual information in the layer;
loading corresponding visual information into a corresponding region of the JSX template file according to the position information of the visual information in the classified and stored hierarchical file in the corresponding layer, and generating the JSX file; detecting a loading type applicable to each region to be loaded in the JSX template file, automatically extracting a corresponding layered file from a corresponding storage path according to the applicable loading type, and loading visual information in the corresponding layered file into the corresponding region;
the acquiring of the JSX template file matched with the PSD file comprises the following steps:
receiving a modification instruction of the JSX template file and storing the modified JSX template file;
taking the modified JSX template file as a JSX template file matched with the PSD file;
and the modification instruction carries sequence adjustment information of the code blocks in the JSX template file and editing and modifying information of the code blocks, and the modification of the JSX template file is completed according to the modifying information and/or the adjusting information.
2. The method according to claim 1, wherein before forming the corresponding hierarchical file according to the visual information and the position information in each layer and performing the classified storage, the method further comprises:
identifying an incidence relation between visual information in each layer in the PSD file;
the forming of the corresponding layered file according to the visual information and the position information in each layer and the classified storage include:
and forming corresponding layered files for the visual information and the position information in each layer according to the association relation, and performing classified storage.
3. The method according to claim 2, wherein the forming of the corresponding hierarchical file for the visual information and the position information in each layer according to the association relationship and the classified storage include:
detecting whether the types of the visual information in the layers with the association relation are the same or not, and if so, combining the visual information of the same type into the same hierarchical file;
independently generating a layered file from the visual information in the layer without the association relationship or the different types of visual information in the layer with the association relationship;
and storing the layered file into a storage path corresponding to the type of the visual information.
4. The method according to claim 3, wherein the loading the corresponding visual information into the corresponding region of the JSX template file according to the position information of the visual information in the hierarchical file stored by classification in the corresponding layer comprises:
extracting the hierarchical files under each storage path;
and loading the visual information and the position information in the extracted hierarchical file into an area corresponding to the storage path in the JSX template file according to the position information.
5. The method according to claim 1, wherein the forming a corresponding hierarchical file according to the visual information and the position information in each layer comprises:
carrying out format processing and position processing on the visual information;
and forming a corresponding layered file according to the processed visual information and the position information in each layer.
6. The method according to any one of claims 1 to 5, wherein the obtaining a JSX template file matching the PSD file comprises:
acquiring historical feedback information of each JSX template file;
and selecting a JSX template file matched with the PSD file according to the historical feedback information.
7. An apparatus for generating a JSX file, the apparatus comprising:
the PSD file acquisition module is used for acquiring a PSD file to be processed;
the identification module is used for identifying the visual information in each layer in the PSD file and the position information of the visual information in the corresponding layer;
the hierarchical file generation module is used for forming corresponding hierarchical files according to the visual information and the position information in each layer and performing classified storage; the storage paths of the layered files formed by different types of visual information are different;
a JSX template file obtaining module, configured to obtain, according to the attribute of each layer in the PSD file, the type of the visual information, and position information of the visual information in the layer, a JSX template file matched with the PSD file;
the JSX file generation module is used for loading corresponding visual information into a corresponding region of the JSX template file according to the position information of the visual information in the classified and stored hierarchical file in the corresponding layer, so as to generate the JSX file; detecting a loading type applicable to each region to be loaded in the JSX template file, automatically extracting a corresponding layered file from a corresponding storage path according to the applicable loading type, and loading visual information in the corresponding layered file into the corresponding region;
the JSX template file acquisition module is also used for receiving a modification instruction of the JSX template file and storing the modified JSX template file; taking the modified JSX template file as a JSX template file matched with the PSD file; and the modification instruction carries sequence adjustment information of the code blocks in the JSX template file and editing and modifying information of the code blocks, and the modification of the JSX template file is completed according to the modifying information and/or the adjusting information.
8. The apparatus according to claim 7, wherein the identifying module is further configured to identify an association relationship between the visual information in each layer in the PSD file;
the hierarchical file generation module is further configured to form a corresponding hierarchical file for the visual information and the position information in each layer according to the association relationship.
9. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 6.
10. A computer device comprising a memory and a processor, the memory having stored thereon a computer program executable by the processor, wherein the processor implements the steps of the method of any one of claims 1 to 6 when executing the computer program.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710823347.XA CN108287707B (en) | 2017-09-13 | 2017-09-13 | JSX file generation method and device, storage medium and computer equipment |
| PCT/CN2018/079925 WO2019052143A1 (en) | 2017-09-13 | 2018-03-22 | Jsx file generation method and apparatus, storage medium and computer device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710823347.XA CN108287707B (en) | 2017-09-13 | 2017-09-13 | JSX file generation method and device, storage medium and computer equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108287707A CN108287707A (en) | 2018-07-17 |
| CN108287707B true CN108287707B (en) | 2021-03-02 |
Family
ID=62831549
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710823347.XA Active CN108287707B (en) | 2017-09-13 | 2017-09-13 | JSX file generation method and device, storage medium and computer equipment |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN108287707B (en) |
| WO (1) | WO2019052143A1 (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112182458B (en) * | 2019-07-03 | 2024-03-26 | 腾讯科技（深圳）有限公司 | Page data processing method and device |
| CN112927314B (en) * | 2019-12-06 | 2023-01-31 | 腾讯数码（天津）有限公司 | Image data processing method and device and computer equipment |
| CN111198680B (en) * | 2019-12-20 | 2020-12-11 | 江苏原力数字科技股份有限公司 | File generation system and method based on Arnold renderer |
Family Cites Families (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080184139A1 (en) * | 2007-01-29 | 2008-07-31 | Brian Robert Stewart | System and method for generating graphical user interfaces and graphical user interface models |
| CN101206668B (en) * | 2007-12-14 | 2011-05-04 | 北大方正集团有限公司 | Method for generating and analyzing website content components as well as apparatus |
| CN103970750B (en) * | 2013-01-25 | 2018-10-02 | 腾讯科技（深圳）有限公司 | A kind of method and apparatus generating html web page |
| CN104020984B (en) * | 2013-02-28 | 2017-07-07 | 阿里巴巴集团控股有限公司 | A kind of method and device for generating static page |
| CN105631059B (en) * | 2014-10-28 | 2020-04-10 | 腾讯科技（深圳）有限公司 | Data processing method, data processing device and data processing system |
| CN105739963B (en) * | 2014-12-12 | 2019-03-15 | 博雅网络游戏开发（深圳）有限公司 | The method and apparatus for generating webpage |
| CN105989031A (en) * | 2015-02-03 | 2016-10-05 | 阿里巴巴集团控股有限公司 | Picture information processing method and server |
| CN106293669B (en) * | 2015-06-02 | 2019-12-24 | 阿里巴巴集团控股有限公司 | Webpage component generation method and device |
| CN105653284A (en) * | 2015-12-29 | 2016-06-08 | Tcl集团股份有限公司 | Method and device for generating scene file of android platform |
| CN106777077A (en) * | 2016-12-13 | 2017-05-31 | 网易（杭州）网络有限公司 | The generation method and device of webpage |
-
2017
- 2017-09-13 CN CN201710823347.XA patent/CN108287707B/en active Active
-
2018
- 2018-03-22 WO PCT/CN2018/079925 patent/WO2019052143A1/en active Application Filing
Also Published As
| Publication number | Publication date |
|---|---|
| CN108287707A (en) | 2018-07-17 |
| WO2019052143A1 (en) | 2019-03-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10284705B2 (en) | Method and apparatus for controlling smart device, and computer storage medium | |
| CN110955416A (en) | Interface document generation method, device, equipment and computer storage medium | |
| KR20190001894A (en) | Method for creating web documents and Apparatus thereof | |
| CN108287707B (en) | JSX file generation method and device, storage medium and computer equipment | |
| CN110555171B (en) | Information processing method, device, storage medium and system | |
| CN105224302B (en) | Skin processing method of input method and input method system | |
| US9170714B2 (en) | Mixed type text extraction and distribution | |
| US11782740B2 (en) | Interface to configure media content | |
| CN109947399A (en) | Code structure generation method, device, computer installation and readable storage medium storing program for executing | |
| CN113486785A (en) | Video face changing method, device, equipment and storage medium based on deep learning | |
| CN110737711A (en) | Report exporting method and device, computer equipment and storage medium | |
| CN113079273A (en) | Watermark processing method, device, electronic equipment and medium | |
| CN111694549A (en) | Data processing method, device, terminal and medium | |
| CN113268232B (en) | Page skin generation method and device and computer readable storage medium | |
| WO2023239468A1 (en) | Cross-application componentized document generation | |
| CN115469849A (en) | Service processing system, method, electronic device and storage medium | |
| CN112486378B (en) | Graph generation method, device, terminal and storage medium | |
| KR20220024227A (en) | Method and related apparatus for data annotation, computer program | |
| CN112288835A (en) | Image text extraction method and device and electronic equipment | |
| WO2019114133A1 (en) | Method and apparatus for altering color of editing page content, terminal, and storage medium | |
| CN116363260B (en) | Image generation method and device and electronic equipment | |
| US12050905B2 (en) | Video-based progress tracker for mobile application development | |
| CN114741315B (en) | Use case updating method and device, electronic equipment and storage medium | |
| US20210157969A1 (en) | Information processing system, information processing apparatus, and non-transitory computer readable medium storing program | |
| CN117234391A (en) | Image generation method and device and electronic equipment |
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 |