WO2019052143A1 - Jsx文件生成方法、装置、存储介质和计算机设备 - Google Patents

Jsx文件生成方法、装置、存储介质和计算机设备 Download PDF

Info

Publication number
WO2019052143A1
WO2019052143A1 PCT/CN2018/079925 CN2018079925W WO2019052143A1 WO 2019052143 A1 WO2019052143 A1 WO 2019052143A1 CN 2018079925 W CN2018079925 W CN 2018079925W WO 2019052143 A1 WO2019052143 A1 WO 2019052143A1
Authority
WO
WIPO (PCT)
Prior art keywords
file
visual information
layer
jsx
information
Prior art date
Application number
PCT/CN2018/079925
Other languages
English (en)
French (fr)
Inventor
桂浩群
Original Assignee
深圳壹账通智能科技有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 深圳壹账通智能科技有限公司 filed Critical 深圳壹账通智能科技有限公司
Publication of WO2019052143A1 publication Critical patent/WO2019052143A1/zh

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

Definitions

  • the present application relates to the field of information processing technologies, and in particular, to a JSX file generation method, apparatus, storage medium, and computer device.
  • JSX JavaScript XML
  • JSX files are descriptive text composed of JSX commands.
  • JSX files are required when creating user interface view components through React.
  • the traditional JSX file is generated by converting the PSD file into an HTML file and then converting it into a JSX file according to the converted HTML file.
  • the inventors realized that since this conventional method requires two conversions when generating a JSX file, the conversion process is complicated.
  • a JSX file generation method for example, a JSX file generation method, apparatus, storage medium, and computer device are provided.
  • a JSX file generation method includes:
  • a JSX file generating device includes:
  • a PSD file obtaining module configured to acquire a PSD file to be processed
  • An identification module configured to identify visual information in each layer in the PSD file, location information of the visual information in a corresponding layer, and a layered file generating module, configured to be used according to each layer
  • the visual information and the location information form a corresponding layered file and are classified and stored
  • the JSX template file obtaining module is configured to obtain a JSX template file matching the PSD file
  • a JSX file generating module configured to load corresponding visual information into a corresponding area of the JSX template file according to location information of the visible information in the hierarchical file stored in the classification, to generate a JSX file.
  • a computer device comprising a memory and one or more processors, the memory storing computer readable instructions, the instructions being executed by the one or more processors to cause the one or more processors Perform the following steps:
  • One or more non-transitory computer readable storage mediums storing computer readable instructions, when executed by one or more processors, cause the one or more processors to perform the following steps:
  • FIG. 1 is an application environment diagram of a JSX file generation method in accordance with one or more embodiments.
  • FIG. 2 is a flow diagram of a JSX file generation method in accordance with one or more embodiments.
  • FIG. 3 is a flowchart of forming a corresponding hierarchical file for visual information and location information in each layer according to an association relationship according to an association relationship, and performing classification storage.
  • FIG. 4 is a block diagram of a JSX file generation device in accordance with one or more embodiments.
  • FIG. 5 is a block diagram of a computer device in accordance with one or more embodiments.
  • the JSX file generating method provided by the embodiment of the present application can be applied to the application environment shown in FIG. 1 .
  • the application environment of the JSX file generating method includes the terminal 110 and the server 120 .
  • the terminal 110 can be connected to the server 120 through a network, the terminal 110 can be a terminal used by a user who is designed or developed for a JSX file, and the server 120 can be a server suitable for generating a JSX file.
  • the terminal 110 or the server 120 can store the PSD file to be processed, and can recognize the visual information and the location information in each layer in the PSD file, and generate a JSX file.
  • the terminal 110 may obtain the PSD file to be processed from the local, or may obtain the PSD file to be processed from the server 110; and may call the local built-in identifiable PSD file to identify the PSD file.
  • the positional information of the visual information and the visual information in each layer in the corresponding layer; the identification instruction of the PSD file may also be sent to the server 120, and each of the PSD files of the server 120 is received.
  • the position information of the visual information and the visual information in the corresponding layer in the layer and then form a corresponding layered file according to the visual information and the position information in each layer, and perform classification storage; obtaining and PSD files
  • the matching JSX template file according to the position information of the visual information stored in the hierarchical file in the corresponding layer, the corresponding visual information is loaded into the corresponding area of the JSX template file to generate a JSX file, thereby realizing The generation of JSX files.
  • a JSX file generation method includes:
  • Step S202 Acquire a PSD file to be processed.
  • the computer device may obtain a PSD file to be processed, and 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 a smart wearable device.
  • the PSD (Photoshop Document) file is a file in a proprietary format of Adobe's image processing software Photoshop.
  • the corresponding PSD file selection interface may be provided, and the user selects an input from the PSD file provided on the interface to select a corresponding PSD file, and then detects the PSD file selected on the interface.
  • the virtual button click operation, the corresponding gesture or voice information, etc. generates a PSD file selection instruction according to the corresponding click operation, gesture or voice information, and acquires the corresponding selected PSD file according to the selection instruction, to be set to generate the JSX file.
  • the terminal may generate a corresponding JSX file generation request according to the PSD file to be processed selected by the user, and send the request to the server.
  • the server may receive the JSX file generation request to obtain a PSD file to be processed included in the JSX file generation request.
  • Step S204 identifying the positional information of the visual information and the visual information in each layer in the PSD file in the corresponding layer.
  • the PSD file stores all the layers in Photoshop.
  • the properties of different layers are different, and there are hierarchical relationships between different layers.
  • Each layer can contain corresponding visual information as well as location information of the visual information in the corresponding layer.
  • the visual information includes information such as pictures, texts, channels, reference lines, annotations, and colors, and the position information is a position where the corresponding visual information is located in the corresponding layer.
  • the properties of the layer include the properties of each visual information, such as the image's properties such as png, bmp, and so on.
  • the computer device can call the preset Photoshop software to parse the PSD file to be processed, and identify the visual information and its location information in each layer in the PSD file.
  • the computer device may also send the PSD file to a cloud server suitable for parsing the PSD file, and send a parsing instruction thereto, and receive the configurable in each layer parsed by the cloud server. View information, location information, and relationships to reduce the consumption of resources by computer devices.
  • Step S206 forming a corresponding hierarchical file according to the visual information and the position information in each layer, and performing classification storage.
  • the computer device can respectively form the location information in one or several layers into a corresponding layer file according to the identified layer, and store it.
  • the stored hierarchical file may be each layer in the PSD file, that is, each layer in the PSD is separated and stored separately. In particular, it may be cached in an internal memory of the computer device or stored in a corresponding non-volatile storage medium. For example, for each layer, it can be stored as a layered file, and the visual information and its location information in the layer are kept unchanged. Or multiple layers can be merged into one layer file, each visual element in the merged layer file can retain its position in the original layer, or the position pair in the original layer is stored in the layer file. The position in the adjustment is made.
  • the different hierarchical files formed may be stored under corresponding different paths according to different attributes of the visual information therein to form a classified storage.
  • Step S208 acquiring a JSX template file that matches the PSD file.
  • the computer device also presets a plurality of JSX template files from which a JSX template file that best matches the PSD file can be selected.
  • the JSX template file is a template file for generating a corresponding JSX file.
  • the JSX template file can be a user-defined JSX template file, 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 device can select the most matching one from the plurality of JSX template files according to the attributes of each layer in the PSD file, the type of the visual element, and the position information in the layer, as the JSX file to be generated.
  • JSX template file can be selected from the plurality of JSX template files according to the attributes of each layer in the PSD file, the type of the visual element, and the position information in the layer.
  • step S208 can be performed at any time after step S202 and before step S210.
  • Step S210 Load the corresponding visual information into the corresponding area of the JSX template file according to the position information of the visible information in the hierarchical file stored in the classification, to generate a JSX file.
  • the JSX template file sets different layers and different loading areas for different visual information in each layer, and the computer device can extract corresponding visual information from the stored hierarchical files, and according to the Depending on the attributes of the information and the location information in the hierarchical file, determine the loading area that it fits in the JSX template file, and load the visual information into the corresponding determined area, after loading all the visual information. , the corresponding JSX file is generated.
  • the above method can directly convert the PSD file into a JSX file by generating a layered file and utilizing the JSX template file, thereby improving the convenience of generating the JSX file and improving the conversion efficiency of the JSX file.
  • the method before the step S206, further includes: identifying an association relationship between the visual information in each layer in the PSD file; and step S206 includes: selecting an association relationship in each layer according to the association relationship
  • the visual information and the location information form a corresponding hierarchical file and are classified and stored.
  • the computer device can further identify whether there is an association relationship between the visual information in each layer, and the association relationship indicates that there is a certain relationship between the corresponding visual information, such as a reference relationship.
  • the computer device may extract visual information in the layer having the associated relationship according to the identified association relationship, merge and generate a hierarchical file. And extract the visual elements in the layer that have no association, and also generate a hierarchical file.
  • the layers with associations are merged into one hierarchical file, and the generated hierarchical files are classified and stored.
  • each visual element in the generated layered file can retain its position in the original layer, or the position in the original layer can be adjusted for the location stored in the layered file.
  • the hierarchical file is formed by further considering the association relationship between the visual information, so that the subsequent loading of the visual information in the hierarchical file into the JSX template file is more efficient.
  • the above-mentioned hierarchical information is formed on the visual information and the location information in each layer according to the association relationship, and is classified and stored, including:
  • Step S302 It is detected whether the types of the visual information in the layer having the association relationship are the same. If yes, step S304 is performed; otherwise, step S306 is performed.
  • the computer device can detect whether there is an association relationship between the visual information in each layer, and after detecting whether the visual information in each layer has an association relationship, the information of the visual information having the associated relationship can be further detected.
  • the type is the same. For example, if the two types of visual information having the association relationship are text information and picture information, respectively, it is determined that the information types of the two are different, and when the two types of visual information are detected as picture information, and the two pictures are When the information type of the information is a picture in the JPG format, it is determined that the information types of the two visual information are the same.
  • step S304 the same type of visual information is merged into the same hierarchical file.
  • the visual information of the same type and the same type can be merged into the same layered file to form a layered file, so that the information type of the merged stored visual information is the same, so as to improve subsequent calls.
  • step S306 the layered file is independently generated from the visual information in the layer having no association relationship or the different types of visual information in the layer having the associated relationship.
  • the visual information in the unified layer involved will be Separate storage, that is, the visual information in each layer is separately formed into a layered file. For example, if there are 5 layers, and the visual information in each layer does not have an association relationship or has an association relationship, but the visual information is not the same, five layer files can be generated correspondingly.
  • the hierarchical files store the visual information in a corresponding layer separately.
  • the visual information when the visual information is text information, it may be further detected whether the text information is editable text information, and if not, the editable text information and the non-editable text information are determined to be different types.
  • Visual information For example, the text information is text information in the PSD file that has been filtered, discolored, and deformed, and cannot be edited.
  • Step S308 storing the hierarchical file into a storage path corresponding to the type of the visual information.
  • the computer device can store the layered files formed by the visual information in different layers to a preset corresponding different path.
  • a corresponding storage path may be set for different types of visual information.
  • the storage location corresponding to the visual information of a certain graphic class may be the path A
  • the storage location of the visual information for a certain text type is the path B.
  • the corresponding storage path is determined, and the formed hierarchical file is stored under the corresponding path to further improve the standardization of the hierarchical file storage. Moreover, when the layered file needs to be called, the hierarchical file of the corresponding type of visual information can be found according to the corresponding path, thereby improving the convenience of subsequently calling the layered file.
  • the location information of the visual information in the layered file stored in the corresponding layer according to the classification is loaded into the corresponding area of the JSX template file, including: extracting each The layered file in the storage path; the visual information and the location information in the extracted layered file, and the corresponding visual information is loaded into the area corresponding to the storage path in the JSX template file according to the location information.
  • the computer device After detecting the loading instruction of the visual information on the JSX template file, the computer device extracts the layered file generated and stored in the above step, and extracts each hierarchical file of the corresponding type from the corresponding preset corresponding path.
  • the extracted hierarchical file is a hierarchical file generated by the PSD file to be processed.
  • the computer device is not necessarily the same type of visual information that can be applied to the different regions in which the different regions are set for each JSX template file.
  • the computer device can detect the type of each area to be loaded in the JSX template file, and can automatically extract the corresponding layer file from the corresponding path according to the applicable type, and the corresponding layer file is The visual information is loaded into the corresponding area.
  • the corresponding JSX file is generated by traversing the hierarchical files under each storage path to complete the loading of the visual information in all the hierarchical files. By searching for the hierarchical file of the corresponding type of visual information according to the corresponding path and loading it into the corresponding area of the JSX template file, the convenience of calling the hierarchical file and the efficiency of loading the visual information can be improved.
  • generating prompt information for confirming the loading may be generated for the user to perform loading confirmation, so that the user
  • the layered files to be loaded can be modified to further improve the accuracy of the loading.
  • the corresponding layered file is formed according to the visual information and the position information in each layer, including: performing format processing and position processing on the visual information; according to the processed in each layer
  • the visual information and the location information form a corresponding hierarchical file.
  • the computer device can further perform format processing and location processing on the recognized visual information.
  • the format processing includes detecting the type of information of the recognized visual information and determining whether modification is required to make the information type of the modified visual information more closely match the subsequently generated JSX file.
  • the location processing is used to detect whether the location of the visual information in the layered file to be formed needs to be adjusted so that the adjusted location more closely matches the subsequently generated JSX file. It is detected that the position of the recognized visual information in the layer is set to whether the position of the visual information in the layered file to be formed matches, and if not, the position adjustment can be performed.
  • the corresponding hierarchical files are formed according to the visual information after the format processing and the position processing, thereby further improving the efficiency of generating the JSX file by using the hierarchical file.
  • acquiring the JSX template file that matches the PSD file includes: obtaining historical feedback information of each JSX template file; and selecting a JSX template file matching the PSD file according to the historical feedback information.
  • a plurality of JSX template files can be stored in the template library of the computer device, and historical feedback information of each JSX template file can be further stored.
  • the historical feedback information includes usage information and recommendation information of the JSX template file, and the usage number, usage frequency, and number of recommendations of the corresponding JSX template file may be calculated according to the usage information and the recommendation information.
  • the JSX template file suitable for generating this JSX file can be queried according to the number of times of use of each JSX template file, the frequency of use, and the number of recommendations.
  • the JSX template file stored in the template library is a JSX template file used by the user, for example, historical feedback information of the JSX template file stored in the login account of the user, or Historical feedback information of the JSX template file stored by the computer device itself.
  • 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 most user usage times can be queried, and it is determined as the JSX template file that most closely matches the PSD template file. Or, the JSX template file used by the user last time is queried from the historical feedback information, and is determined as the JSX template file that most closely matches the PSD template file.
  • multiple JSX template files may be queried from the server and one or more matches may be selected therefrom.
  • the highest-level JSX template file is recommended to the user, and based on the received selection instruction, the selected JSX is determined to be a JSX template file that matches the PSD file.
  • the computer device can receive the modification instruction to the JSX template file and store the modified JSX template file, so that the user can customize and edit the JSX template file and select the modified JSX template file.
  • the modification instruction may carry information such as sequence adjustment information of the code block in the JSX template file and editing and modification of the code block, so that the JSX template file is completed according to the modified and/or adjusted information carried therein. Modification, and establish the relationship between the modified JSX template file and the user account.
  • the above JSX file generation method can output the PSD file of the design draft into a React version of the JSX file, which obviously improves the development efficiency from the UI design to the development of the React code, can be more conveniently and smoothly connected to the mobile app, and is generated.
  • the front-end code is consistent and more standardized.
  • FIGS. 2 and 3 are sequentially displayed in accordance with the indication of the arrows, these steps are not necessarily performed in the order indicated by the arrows. Except as explicitly stated herein, the execution of these steps is not strictly limited, and the steps may be performed in other orders. Moreover, at least some of the steps in FIGS. 2 and 3 may include a plurality of sub-steps or stages, which are not necessarily performed at the same time, but may be performed at different times, or The order of execution of the stages is also not necessarily sequential, but may be performed alternately or alternately with at least a portion of the sub-steps or stages of other steps or other steps.
  • a JSX file generating apparatus comprising:
  • the PSD file obtaining module 402 is configured to acquire a PSD file to be processed.
  • the identification module 404 is configured to identify the visual information in each layer in the PSD file and the location information of the visual information in the corresponding layer.
  • the layered file generating module 406 is configured to form a corresponding layered file according to the visual information and the location information in each layer, and perform classification storage.
  • the JSX template file obtaining module 408 is configured to obtain a JSX template file that matches the PSD file.
  • the JSX file generating module 410 is configured to load the corresponding visual information into the corresponding area of the JSX template file according to the location information of the visible information in the hierarchical file stored in the classification, to generate a JSX file.
  • the identification module 404 is further configured to identify an association relationship between visual information in each layer in the PSD file; the hierarchical file generation module 406 is further configured to associate each layer according to the association relationship.
  • the visual information and location information form a corresponding hierarchical file.
  • the layered file generating module 406 is further configured to detect whether the types of the visual information in the layer having the associated relationship are the same, and if so, merge the same type of visual information into the same hierarchical file. Generating a hierarchical file independently of visual information in a layer having no associated relationship, or different types of visual information in a layer having an associated relationship; storing the hierarchical file to correspond to a type of visual information In the storage path.
  • the JSX file generating module 410 is further configured to extract a layered file in each storage path; the visual information and the location information in the extracted layered file, and the corresponding visual information according to the location information. Loaded into the area of the JSX template file that corresponds to the storage path.
  • the hierarchical file generating module 406 is further configured to perform format processing and location processing on the visual information; and form a corresponding hierarchical file according to the processed visual information and location information in each layer.
  • the JSX template file obtaining module 408 is further configured to obtain historical feedback information of each JSX template file; and select a JSX template file that matches the PSD file according to the historical feedback information.
  • Each module in the above JSX file generating apparatus may be implemented in whole or in part by software, hardware, and a combination thereof.
  • the network interface can be an Ethernet card or a wireless network card.
  • Each of the above modules may be embedded in or independent of the processor in the computer device, or may be stored in a memory in the computer device in a software form, so that the processor invokes the operations corresponding to the above modules.
  • the processor can be a central processing unit (CPU), a microprocessor, a microcontroller, or the like.
  • One or more non-transitory computer readable storage mediums storing computer readable instructions, when executed by one or more processors, cause one or more processors to perform the steps of:
  • the corresponding visual information is loaded into the corresponding area of the JSX template file to generate a JSX file.
  • the computer readable instructions when executed by one or more processors, further comprise identifying the PSD prior to implementing the formation of the respective hierarchical file based on the visual information and the location information in each of the layers.
  • the relationship between the visual information in each layer in the file; the corresponding layered file is formed according to the visual information and the position information in each layer, including: each layer according to the association relationship
  • the visual information and location information in the form form a corresponding hierarchical file.
  • the computer readable instructions are implemented by one or more processors to form a corresponding hierarchical file for visual information and location information in each layer according to an association relationship, and to perform classified storage.
  • the method includes: detecting whether the types of the visual information in the layer having the association relationship are the same, and if so, combining the same type of visual information into the same hierarchical file; and visualizing the layer in the unrelated relationship
  • the information, or different types of visual information in the layer having the associated relationship independently generates a hierarchical file; the hierarchical file is stored in a storage path corresponding to the type of the visual information.
  • the location information of the visual information in the hierarchical file stored according to the classification implemented in the corresponding layer, the corresponding visual information Loading into the corresponding area of the JSX template file including: extracting the hierarchical file under each storage path; displaying the visual information and the location information in the extracted hierarchical file, and loading the corresponding visual information to the JSX according to the location information In the area of the template file that corresponds to the storage path.
  • the computer readable instructions are executed by one or more processors to form a corresponding hierarchical file according to the visual information and the location information in each layer, including: performing visual information Format processing and position processing; forming a corresponding hierarchical file according to the processed visual information and position information in each layer.
  • the obtaining, by the one or more processors, the obtaining of the JSX template file that matches the PSD file includes: obtaining historical feedback information of each JSX template file; The information is selected from the JSX template file that matches the PSD file.
  • a computer device comprising a memory and one or more processors having stored therein computer readable instructions, the computer readable instructions being executed by one or more processors, causing one or more processors to execute the various embodiments described above The steps in the JSX file generation method.
  • the computer device can be a terminal or a server or the like, such as terminal 110 or server 120 shown in FIG.
  • FIG. 5 it is a schematic diagram of the internal structure of a computer device in one embodiment.
  • the computer device includes a processor, memory, and network interface coupled by a system bus.
  • the processor is used to provide computing and control capabilities to support the operation of the entire computer device.
  • the memory is used to store data, instruction code, etc., and the memory stores at least one computer readable instruction, which can be executed by the processor to implement the JSX file generation method applicable to the computer device provided in the embodiment of the present 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 storage memory (Random-Access-Memory, RAM).
  • a non-volatile storage medium such as a magnetic disk, an optical disk, a read-only memory (ROM), or a random storage memory (Random-Access-Memory, RAM).
  • the memory includes a non-volatile storage medium and an internal memory, and the non-volatile storage medium may be a non-transitory computer-readable storage medium.
  • Non-volatile storage media stores operating systems, databases, and computer readable instructions.
  • the database stores data related to a JSX file generation method provided by the above various embodiments, for example, a plurality of JSX template files may be stored.
  • the computer readable instructions are executable by a processor for implementing a JSX file generation method provided by the various embodiments above.
  • the internal memory in the computer device provides a cached operating environment for operating systems, databases, and computer readable instructions in a non-volatile storage medium.
  • the network interface may be an Ethernet card or a wireless network card or the like for communicating with an external terminal or server.
  • the structure shown in FIG. 5 is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation of the computer device to which the solution of the present application is applied.
  • the specific computer device may It includes more or fewer components than those shown in the figures, or some components are combined, or have different component arrangements.
  • the computer device can also include a display screen, which can be used to display information such as a corresponding PSD file and a JSX file.
  • the display screen can be a touch screen, such as a capacitive screen or an electronic screen, and a corresponding command can be generated by receiving a click operation of a control applied to the touch screen.
  • the one or more processors execute the computer readable instructions to implement the following steps:
  • the one or more processors when executing the computer readable instructions, further comprise identifying the PSD before implementing the forming of the corresponding layered file according to the visual information and the location information in each layer. a step of associating visual information between each layer in the file; forming a corresponding hierarchical file according to the visual information and the position information in each layer, including: The visual information and location information in the layer form a corresponding hierarchical file.
  • the one or more processors implement the computer readable instructions to form a corresponding hierarchical file for the visual information and the location information in each layer according to the association relationship, and perform classified storage.
  • the method includes: detecting whether the types of the visual information in the layer having the association relationship are the same, and if so, combining the same type of visual information into the same hierarchical file; and visualizing the layer in the unrelated relationship
  • the information, or different types of visual information in the layer having the associated relationship independently generates a hierarchical file; the hierarchical file is stored in a storage path corresponding to the type of the visual information.
  • the location information of the visual information in the hierarchical file stored according to the classification implemented in the corresponding layer the corresponding visual information Loading into the corresponding area of the JSX template file, including: extracting the hierarchical file under each storage path; displaying the visual information and the location information in the extracted hierarchical file, and loading the corresponding visual information to the JSX according to the location information In the area of the template file that corresponds to the storage path.
  • the one or more processors implement the computer readable instructions to form a corresponding hierarchical file according to the visual information and the location information in each layer, including: performing visual information. Format processing and position processing; forming a corresponding hierarchical file according to the processed visual information and position information in each layer.
  • the obtaining, by the one or more processors, the JSX template file that matches the PSD file implemented by the computer readable instructions comprises: obtaining historical feedback information of each JSX template file; The information is selected from the JSX template file that matches the PSD file.
  • Non-volatile memory Any reference to a memory, storage, database, or other medium used herein may include non-volatile memory. Suitable non-volatile memories can include read only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory.
  • ROM read only memory
  • PROM programmable ROM
  • EPROM electrically programmable ROM
  • EEPROM electrically erasable programmable ROM
  • flash memory any reference to a memory, storage, database, or other medium used herein may include non-volatile memory.
  • ROM read only memory
  • PROM programmable ROM
  • EPROM electrically programmable ROM
  • EEPROM electrically erasable programmable ROM

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

一种JSX文件生成方法，包括：获取待处理的PSD文件；识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与所述PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。

Description

JSX文件生成方法、装置、存储介质和计算机设备
本申请要求于2017年9月13日提交中国专利局、申请号为201710823347X、发明名称为“JSX文件生成方法、装置、存储介质和计算机设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及信息处理技术领域，特别是涉及一种JSX文件生成方法、装置、存储介质和计算机设备。
背景技术
JSX(JavaScript XML)是一种在React组件内部构建标签的类XML语法，JSX文件是由JSX命令组成的描述性文本。在通过React创建用户界面视图组件时，需要用到JSX文件。
传统的JSX文件的生成方法，是通过将PSD文件转换为HTML文件，再根据所转换的HTML文件来转换成JSX文件。然而，发明人意识到，由于这种传统的在生成JSX文件时需要进过两次转换，因而其转换过程比较复杂。
发明内容
根据本申请公开的各种实施例，提供一种JSX文件生成方法、装置、存储介质和计算机设备。
一种JSX文件生成方法包括：
获取待处理的PSD文件；
识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与所述PSD文件相匹配的JSX模板文件；及
根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。
一种JSX文件生成装置包括：
PSD文件获取模块，用于获取待处理的PSD文件；
识别模块，用于识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；分层文件生成模块，用于根据每个图层中的 可视信息和位置信息形成相应的分层文件，并进行分类存储；JSX模板文件获取模块，用于获取与所述PSD文件相匹配的JSX模板文件；及
JSX文件生成模块，用于根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。
一种计算机设备，包括存储器及一个或多个处理器，所述存储器中储存有计算机可读指令，所述指令被所述一个或多个处理器执行时，使得所述一个或多个处理器执行以下步骤：
获取待处理的PSD文件；
识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与所述PSD文件相匹配的JSX模板文件；及
根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。
一个或多个存储有计算机可读指令的非易失性计算机可读存储介质，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行以下步骤：
获取待处理的PSD文件；
识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与所述PSD文件相匹配的JSX模板文件；及
根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。
本申请的一个或多个实施例的细节在下面的附图和描述中提出。本申请的其它特征、目的和优点将从说明书、附图以及权利要求书变得明显。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为根据一个或多个实施例中JSX文件生成方法的应用环境图。
图2为根据一个或多个实施例中JSX文件生成方法的流程图。
图3为根据一个或多个实施例中根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储的流程图。
图4为根据一个或多个实施例中JSX文件生成装置的框图。
图5为根据一个或多个实施例中计算机设备的框图。
具体实施方式
为了使本申请的技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
本申请实施例所提供的JSX文件生成方法，可应用于如图1所示的应用环境中，参考图1所示，该JSX文件生成方法的应用环境包括终端110和服务器120。终端110可通过网络与服务器120连接，终端110可为JSX文件设计或开发的用户的所使用的终端，服务器120可为适用于生成JSX文件的服务器。终端110或服务器120均可上存储待处理的PSD文件，并可识别出该PSD文件中每个图层中的可视信息及其位置信息，并生成JSX文件。比如，以终端110为例，终端110可从本地获取待处理的PSD文件，或者可从服务器110上获取待处理的PSD文件；并可调用本地内置的可识别处理PSD文件的应用来识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息；也可以向服务器120发送对该PSD文件的识别指令，接收有服务器120所出别处的PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息，然后根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，生成JSX文件，从而实现了对JSX文件的生成。
在其中一个实施例中，如图2所示，提供了一种JSX文件生成方法。该方法包括：
步骤S202，获取待处理的PSD文件。
计算机设备可获取待处理的PSD文件，该计算机设备可为终端或服务器，该终端可包括但不限于手机、平板电脑、便携式笔记本或智能穿戴设备等。PSD(Photoshop Document)文件是Adobe公司的图像处理软件Photoshop的 专用格式的文件。当该计算机设备为终端时，可提供下相应的PSD文件选取界面，并接收用户从该界面上提供的PSD文件选取入口对相应PSD文件的选取操作，再侦测在界面上对PSD文件选取的虚拟按钮点击操作，相应的手势或语音信息等，根据该相应的点击操作，手势或者语音信息等生成PSD文件选取指令，根据该选取指令获取对应选取的PSD文件，以设置为用于生成JSX文件的待处理PSD文件。
当该计算机设备为服务器时，终端可根据用户选取的待处理的PSD文件，生成相应的JSX文件生成请求，将该请求发送至服务器。服务器可接收该JSX文件生成请求，获取该JSX文件生成请求中包含的待处理的PSD文件。
步骤S204，识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息。
PSD文件中存储Photoshop中所有的图层，不同图层的属性不同，且不同图层之间具有层级关系。每个图层中均可包含相应的可视信息以及可视信息在相应图层中的位置信息。该可视信息包括图片、文字、通道、参考线、注解和颜色等信息，位置信息为相应可视信息在对应图层中所处的位置。图层的属性包括每个可视信息的属性，比如图片的属性为png、bmp等格式。
在其中一个实施例中，计算机设备可调用预设的Photoshop软件来对待处理的PSD文件进行解析，识别PSD文件中每个图层中的可视信息及其位置信息。
在其中一个实施例中，计算机设备还可将该PSD文件发送至适用于解析该PSD文件的云服务器上，并向其发送解析指令，接收由云服务器所解析出的每个图层中的可视信息、位置信息以及关联关系，以降低计算机设备对资源的消耗。
步骤S206，根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。
计算机设备可根据所识别出的图层，将其中一个或几个图层中的位置信息分别形成相应的一个分层文件，并存储。所存储的分层文件可为PSD文件中的各个图层，即将PSD中的各个图层独立出来进行分类存储。具体地，可缓存在计算机设备的内存储器中或存储至相应的非易失性存储介质中。比如，可针对每个图层，可对应存储为一份分层文件，并保持该图层中的可视信息及其位置信息不变。或者可将多份图层合并成一份分层文件，合并成的分层文件中的每个可视元素可保留其在原图层中的位置，或者在原图层中的位置 对存储在分层文件中的位置进行调整。
在其中一个实施例中，形成的不同分层文件可按照其中的可视信息的属性的不同，被存储至对应不同的路径下，形成分类存储。
步骤S208，获取与PSD文件相匹配的JSX模板文件。
计算机设备还预设了多个JSX模板文件，可从其中选取一个与该PSD文件最匹配的JSX模板文件。JSX模板文件为用于生成相应JSX文件的模板文件，该JSX模板文件可为用户自定义制作的JSX模板文件，还可为预先存储的JSX模板文件。不同JSX模板文件所生成的JSX文件的内容样式不一定相同。
计算机设备可根据PSD文件中的每个图层的属性、以及可视元素的类型和在图层中的位置信息，从多个JSX模板文件中选取出最匹配的一个，作为待生成JSX文件的JSX模板文件。
在其中一个实施例中，上述步骤S208可在步骤S202之后、步骤S210之前的任意时刻执行。
步骤S210，根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，生成JSX文件。
JSX模板文件中设置了不同的图层以及每个图层中的不同的可视信息所适用的加载区域，计算机设备可从所存储的分层文件中提取相应的可视信息，并根据该可视信息的属性以及在分层文件中的位置信息，确定其在JSX模板文件中所适应的加载区域，并将该可视信息加载至相应确定的区域中，当加载完所有的可视信息后，则生成相应的JSX文件。
通过识别PSD文件中每个图层中的可视信息以及可视信息在相应图层中的位置信息，并将识别出的该图层转换成分层文件进行分类存储，同时还获取与PSD文件相匹配的JSX模板文件，再从所存储的分层文件提取相应可视信息及其位置信息，按照该可视信息和位置信息确定该可视信息所加载的区域，并将其加载至对应区域中，生成JSX文件。上述方法通过生成分层文件，并利用JSX模板文件，从而可直接将PSD文件转换成JSX文件，既提高了JSX文件的生成的便利性，同时还可提高JSX文件的转换效率。
在其中一个实施例中，在步骤S206之前，上述方法还包括：识别PSD文件中每个图层中的可视信息之间的关联关系；步骤S206包括：根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。
计算机设备可进一步识别出每个图层中的可视信息之间是否具有关联关系，该关联关系表示相应可视信息之间具有一定的联系，比如为引用关系。计算机设备可根据所识别出的关联关系，提取具有关联关系的图层中的可视信息，进行合并，生成分层文件。并提取不具有关联关系的图层中的可视元素，同样也生成分层文件。使得具有关联关系的图层合并至一份分层文件中，并对生成的分层文件进行分类存储。同样地，所生成的分层文件中的每个可视元素可保留其在原图层中的位置，或者在原图层中的位置对存储在分层文件中的位置进行调整。
通过进一步考虑可视信息之间的关联关系来形成分层文件，使得后续加载分层文件中的可视信息至JSX模板文件中的效率更高。
在其中一个实施例中，如图3所示，上述根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：
步骤S302，检测具有关联关系的图层中的可视信息的类型是否相同，若是，则执行步骤S304，否则，执行步骤S306。
计算机设备可检测每个图层中的可视信息之间是否具有关联关系，在检测出每个图层中的可视信息是否具有关联关系之后，可进一步检测具有关联关系的可视信息的信息类型是否相同。举例来说，若具有关联关系的两种可视信息分别为文字信息和图片信息时，则判定两者的信息类型不相同，当检测出两种可视信息均为图片信息，且两种图片信息的信息类型分别为JPG格式的图片时，则判定两个可视信息的信息类型相同。
步骤S304，将相同类型的可视信息合并成同一份分层文件。
可将具有相互关联的、相同类型的可视信息合并至同一份分层文件之中，形成一份分层文件，使得被合并存储的可视信息之间的信息类型相同，以提高后续调用该分层文件中的可视信息的便利性的和效率。
步骤S306，将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件。
针对检测到不具有关联关系的图层中的可视信息，以及虽然具有关联关系，但关联的可视信息之间的类型并不相同，则将所涉及到的统一图层中的可视信息进行单独存储，即将每个图层中的可视信息单独形成一份分层文件。比如，具有5个图层，且每个图层之中的可视信息之间不具有关联关系，或者具有关联关系，但可视信息并不相同，则可对应生成5个分层文件，每个分层文件单独存储对应一个图层中的可视信息。
在其中一个实施例中，针对可视信息为文字信息时，可进一步检测该文字信息是否为可编辑的文字信息，若否，则将可编辑的文字信息和不可编辑的文字信息判定为不同类型的可视信息。比如该文字信息为PSD文件中经过滤镜、变色、变形处理过的文字信息，其不能被进行编辑。
步骤S308，将分层文件存储至与可视信息的类型对应的存储路径中。
计算机设备可将不同的图层中的可视信息所形成的分层文件存储至预设的对应不同的路径下。具体地，可针对不同的可视信息的类型，设置对应的存储路径。举例来说，可设置某一中图形类的可视信息对应的存储位置为路径A，针对某一种文字类型的可视信息存储的位置为路径B。
当检测到图层中的可视信息的信息类型后，确定其相应的存储路径，将所形成的分层文件存储至对应的路径下，以进一步提高对分层文件存储的规范性。且使得后续在需要调用分层文件时，可根据相应的路径寻找到对应类型的可视信息的分层文件，提高后续调用分层文件的便利性。
在其中一个实施例中，上述根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，包括：提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据位置信息将对应的可视信息加载至JSX模板文件中与存储路径对应的区域中。
计算机设备可在检测到对JSX模板文件进行可视信息的加载指令后，提取上述步骤中所生成并存储的分层文件，并从相应预设的对应路径下提取对应类型的每个分层文件，所提取的分层文件为上述待处理的PSD文件所生成的分层文件。
计算机设备针对每种JSX模板文件，所设置的其中的不同区域可被适用于加载的可视信息的类型不一定相同。计算机设备可检测该JSX模板文件中的每个待加载的区域所适用于加载的类型，并可根据该适用的类型，自动从对应的路径下提取相应的分层文件，将相应分层文件中的可视信息加载至对应的区域中。通过遍历每个存储路径下的分层文件，以完成对所有分层文件中的可视信息的加载，从而生成相应的JSX文件。通过根据相应的路径寻找到对应类型的可视信息的分层文件，将其加载至JSX模板文件的对应区域中，可提高调用分层文件的便利性，和可视信息加载的效率。
在其中一个实施例中，在从对应的路径中提取出相应分层文件后，在准备加载至相应的JXS模板文件之前，可生成是否确认加载的提示信息，以供 用户进行加载确认，使得用户可对待加载的分层文件进行修改，以进一步提高加载的准确性。
在其中一个实施例中，根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：对可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。
计算机设备可进一步对所识别出的可视信息进行格式处理和位置处理。格式处理包括对所识别出的可视信息的信息类型进行检测，并判定是否需要进行修改，以使得修改后的可视信息的信息类型更加匹配后续所生成的JSX文件。位置处理用于检测待形成的分层文件中的可视信息所处的位置是否需要进行调整，使得调整后的位置更加匹配后续所生成的JSX文件。可检测将识别出的可视信息在图层中的位置设置为可视信息在待形成的分层文件中的位置是否相匹配，若不匹配，可进行位置调整。通过格式处理和位置处理，根据格式处理和位置处理后的可视信息形成相应的分层文件，从而可进一步提高利用分层文件生成JSX文件的效率。
在其中一个实施例中，获取与PSD文件相匹配的JSX模板文件，包括：获取每个JSX模板文件的历史反馈信息；根据历史反馈信息选取与PSD文件相匹配的JSX模板文件。
计算机设备的模板库中可存储多个JSX模板文件，并可进一步存储每个JSX模板文件的历史反馈信息。历史反馈信息包括JSX模板文件的使用信息和推荐信息等，可根据该使用信息和推荐信息计算出相应JSX模板文件的使用次数、使用频率以及推荐次数等。可根据每个JSX模板文件使用次数、使用频率和推荐次数查询出适用于生成本次JSX文件的JSX模板文件。
在其中一个实施例中，该模板库中所存储的JSX模板文件为对应用户使用过的JSX模板文件，比如可为用户的登录账号中所关联存储的JSX模板文件的历史反馈信息，也可为计算机设备自身存储的JSX模板文件的历史反馈信息。使得可从该用户使用过的JSX模板文件的历史反馈信息，选取出相应的JSX模板文件。比如，可根据历史反馈信息，查询出用户使用次数最多的JSX模板文件，将其判定为与该PSD模板文件最匹配的JSX模板文件。或者从该历史反馈信息中查询出用户最近一次使用的JSX模板文件，将其判定为与该PSD模板文件最匹配的JSX模板文件。
在其中一个实施例中，当检测到与用户的登录账号关联的JSX模板文件均不与该PSD文件相匹配时，可从服务器上查询多个JSX模板文件，并从其 中选取一个或多个匹配度最高的JSX模板文件，以向用户推荐，并根据接收到的选择指令，将选择的JSX判定为与PSD文件相匹配的JSX模板文件。
在其中一个实施例中，计算机设备可接收对JSX模板文件的修改指令，并存储修改后的JSX模板文件，从而使得用户可自定义地编辑和创建JSX模板文件，并选择修改后的JSX模板文件作为与PSD文件相匹配的JSX模板文件，提高了JSX模板文件生成的灵活性。具体地，修改指令中可携带对JSX模板文件中的代码块的顺序调整信息以及对代码块的编辑和修改等信息，使得根据其中所携带的修改和/或调整的信息，完成对JSX模板文件的修改，并建立修改后的JSX模板文件与用户账号之间的关联关系。
上述JSX文件生成方法，可以将设计稿的PSD文件一键输出成react版的JSX文件，明显提升从UI设计到开发react代码的开发效率，能够更方便、流畅的对接到移动app中，并且生成的前端代码一致性较好，更加规范。
应该理解的是，虽然图2和图3的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2和图3中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
在其中一个实施例中，如图4所示，提供了一种JSX文件生成装置，该装置包括：
PSD文件获取模块402，用于获取待处理的PSD文件。
识别模块404，用于识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息。
分层文件生成模块406，用于根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。
JSX模板文件获取模块408，用于获取与PSD文件相匹配的JSX模板文件。
JSX文件生成模块410，用于根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中， 生成JSX文件。
在其中一个实施例中，识别模块404还用于识别PSD文件中每个图层中的可视信息之间的关联关系；分层文件生成模块406还用于根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。
在其中一个实施例中，分层文件生成模块406还用于检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；将分层文件存储至与可视信息的类型对应的存储路径中。
在其中一个实施例中，JSX文件生成模块410还用于提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据位置信息将对应的可视信息加载至JSX模板文件中与存储路径对应的区域中。
在其中一个实施例中，分层文件生成模块406还用于对可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。
在其中一个实施例中，JSX模板文件获取模块408还用于获取每个JSX模板文件的历史反馈信息；根据历史反馈信息选取与PSD文件相匹配的JSX模板文件。
上述JSX文件生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。网络接口可以是以太网卡或无线网卡等。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。该处理器可以为中央处理单元(CPU)、微处理器、单片机等。
一个或多个存储有计算机可读指令的非易失性计算机可读存储介质，计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行以下步骤：
获取待处理的PSD文件；
识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与PSD文件相匹配的JSX模板文件；及
根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相 应的可视信息加载至JSX模板文件的对应区域中，生成JSX文件。
在其中一个实施例中，该计算机可读指令被一个或多个处理器执行时，在实现根据每个图层中的可视信息和位置信息形成相应的分层文件之前，还包括实现识别PSD文件中每个图层中的可视信息之间的关联关系；所实现的根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。
在其中一个实施例中，该计算机可读指令被一个或多个处理器执行时实现的根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；将分层文件存储至与可视信息的类型对应的存储路径中。
在其中一个实施例中，该计算机可读指令被一个或多个处理器执行时实现的根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，包括：提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据位置信息将对应的可视信息加载至JSX模板文件中与存储路径对应的区域中。
在其中一个实施例中，该计算机可读指令被一个或多个处理器执行时实现的根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：对可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。
在其中一个实施例中，该计算机可读指令被一个或多个处理器执行时实现的获取与PSD文件相匹配的JSX模板文件，包括：获取每个JSX模板文件的历史反馈信息；根据历史反馈信息选取与PSD文件相匹配的JSX模板文件。
一种计算机设备，包括存储器及一个或多个处理器，存储器中储存有计算机可读指令，计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述各实施例中的JSX文件生成方法的步骤。
在其中一个实施例中，该计算机设备可为终端或服务器等，比如可为图1中所示的终端110或者服务器120。如图5所示，为其中一个实施例中计算机设备的内部结构示意图。该计算机设备包括通过系统总线连接的处理器、 存储器和网络接口。该处理器用于提供计算和控制能力，支撑整个计算机设备的运行。存储器用于存储数据、指令代码等，存储器上存储至少一个计算机可读指令，该计算机可读指令可被处理器执行，以实现本申请实施例中提供的适用于计算机设备的JSX文件生成方法。存储器可包括磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random-Access-Memory，RAM)等。例如，在其中一个实施例中，存储器包括非易失性存储介质及内存储器，非易失性存储介质可以是非易失性计算机可读存储介质。非易失性存储介质存储有操作系统、数据库和计算机可读指令。该数据库中存储有用于实现以上各个实施例所提供的一种JSX文件生成方法相关的数据，比如可存储有多个JSX模板文件等。该计算机可读指令可被处理器所执行，以用于实现以上各个实施例所提供的一种JSX文件生成方法。计算机设备中的内存储器为非易失性存储介质中的操作系统、数据库和计算机可读指令提供高速缓存的运行环境。网络接口可以是以太网卡或无线网卡等，用于与外部的终端或服务器进行通信。
本领域技术人员可以理解，图5中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。比如该计算机设备还可包含显示屏，该显示屏可用于显示相应的PSD文件以及JSX文件等信息。显示屏可以是触摸屏，比如为电容屏或电子屏，可通过接收作用于该触摸屏上显示的控件的点击操作，生成相应的指令。
在其中一个实施例中，该一个或多个处理器执行该计算机可读指令时实现以下步骤：
获取待处理的PSD文件；
识别PSD文件中每个图层中的可视信息、可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；及
获取与PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，生成JSX文件。
在其中一个实施例中，该一个或多个处理器执行该计算机可读指令时，在实现根据每个图层中的可视信息和位置信息形成相应的分层文件之前，还 包括实现识别PSD文件中每个图层中的可视信息之间的关联关系的步骤；所实现的根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。
在其中一个实施例中，该一个或多个处理器执行该计算机可读指令时实现的根据关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；将分层文件存储至与可视信息的类型对应的存储路径中。
在其中一个实施例中，该一个或多个处理器执行该计算机可读指令时实现的根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至JSX模板文件的对应区域中，包括：提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据位置信息将对应的可视信息加载至JSX模板文件中与存储路径对应的区域中。
在其中一个实施例中，该一个或多个处理器执行该计算机可读指令时实现的根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：对可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。
在其中一个实施例中，该一个或多个处理器执行该计算机可读指令时实现的获取与PSD文件相匹配的JSX模板文件，包括：获取每个JSX模板文件的历史反馈信息；根据历史反馈信息选取与PSD文件相匹配的JSX模板文件。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成。该计算机可读指令可存储在存储器上，比如存储于一非易失性计算机可读取存储介质中。该指令被执行时，可实现包括如上述各方法的实施例的流程。
本申请所使用的对存储器、存储、数据库或其它介质的任何引用可包括非易失性存储器。合适的非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未 对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (20)

  1. 一种JSX文件生成方法，包括：
    获取待处理的PSD文件；
    识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；
    根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；
    获取与所述PSD文件相匹配的JSX模板文件；及
    根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。
  2. 根据权利要求1所述的方法，其特征在于，在所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储之前，所述方法还包括：
    识别所述PSD文件中每个图层中的可视信息之间的关联关系；
    所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：
    根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。
  3. 根据权利要求2所述的方法，其特征在于，所述根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：
    检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；
    将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；及
    将分层文件存储至与可视信息的类型对应的存储路径中。
  4. 根据权利要求3所述的方法，其特征在于，所述根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，包括：
    提取每个存储路径下的分层文件；
    将提取的分层文件中的可视信息和位置信息，根据所述位置信息将对应的可视信息加载至所述JSX模板文件中与所述存储路径对应的区域中。
  5. 根据权利要求1所述的方法，其特征在于，所述根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：
    对所述可视信息进行格式处理和位置处理；及
    根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。
  6. 根据权利要求1至5中任一项所述的方法，其特征在于，所述获取与所述PSD文件相匹配的JSX模板文件，包括：
    获取每个JSX模板文件的历史反馈信息；及
    根据所述历史反馈信息选取与所述PSD文件相匹配的JSX模板文件。
  7. 一种JSX文件生成装置，包括：
    PSD文件获取模块，用于获取待处理的PSD文件；
    识别模块，用于识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；
    分层文件生成模块，用于根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；
    JSX模板文件获取模块，用于获取与所述PSD文件相匹配的JSX模板文件；及
    JSX文件生成模块，用于根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。
  8. 根据权利要求7所述的装置，其特征在于，所述识别模块还用于识别所述PSD文件中每个图层中的可视信息之间的关联关系；
    所述分层文件生成模块还用于根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。
  9. 一种计算机设备，包括存储器及一个或多个处理器，所述存储器中储存有计算机可读指令，所述指令被所述一个或多个处理器执行时，使得所述一个或多个处理器执行以下步骤：
    获取待处理的PSD文件；
    识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；
    根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；
    获取与所述PSD文件相匹配的JSX模板文件；及
    根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。
  10. 根据权利要求9所述的计算机设备，其特征在于，所述指令被所述一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    识别所述PSD文件中每个图层中的可视信息之间的关联关系；
    根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。
  11. 根据权利要求10所述的计算机设备，其特征在于，所述指令被所述一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；
    将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；及
    将分层文件存储至与可视信息的类型对应的存储路径中。
  12. 根据权利要求11所述的计算机设备，其特征在于，所述指令被所述一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    提取每个存储路径下的分层文件；
    将提取的分层文件中的可视信息和位置信息，根据所述位置信息将对应的可视信息加载至所述JSX模板文件中与所述存储路径对应的区域中。
  13. 根据权利要求9所述的计算机设备，其特征在于，所述指令被所述一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    对所述可视信息进行格式处理和位置处理；及
    根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。
  14. 根据权利要求9至13中任一项所述的计算机设备，其特征在于，所述指令被所述一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    获取每个JSX模板文件的历史反馈信息；及
    根据所述历史反馈信息选取与所述PSD文件相匹配的JSX模板文件。
  15. 一个或多个存储有计算机可读指令的非易失性计算机可读存储介质，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行以下步骤：
    获取待处理的PSD文件；
    识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；
    根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；
    获取与所述PSD文件相匹配的JSX模板文件；及
    根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。
  16. 根据权利要求15所述的存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    识别所述PSD文件中每个图层中的可视信息之间的关联关系；
    根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。
  17. 根据权利要求16所述的存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；
    将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；及
    将分层文件存储至与可视信息的类型对应的存储路径中。
  18. 根据权利要求17所述的存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    提取每个存储路径下的分层文件；
    将提取的分层文件中的可视信息和位置信息，根据所述位置信息将对应的可视信息加载至所述JSX模板文件中与所述存储路径对应的区域中。
  19. 根据权利要求15所述的存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    对所述可视信息进行格式处理和位置处理；及
    根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。
  20. 根据权利要求15至19中任一项所述的存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，还使得所述一个或多个处理器执行以下步骤：
    获取每个JSX模板文件的历史反馈信息；及
    根据所述历史反馈信息选取与所述PSD文件相匹配的JSX模板文件。
PCT/CN2018/079925 2017-09-13 2018-03-22 Jsx文件生成方法、装置、存储介质和计算机设备 WO2019052143A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201710823347.XA CN108287707B (zh) 2017-09-13 2017-09-13 Jsx文件生成方法、装置、存储介质和计算机设备
CN201710823347.X 2017-09-13

Publications (1)

Publication Number Publication Date
WO2019052143A1 true WO2019052143A1 (zh) 2019-03-21

Family

ID=62831549

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2018/079925 WO2019052143A1 (zh) 2017-09-13 2018-03-22 Jsx文件生成方法、装置、存储介质和计算机设备

Country Status (2)

Country Link
CN (1) CN108287707B (zh)
WO (1) WO2019052143A1 (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112182458B (zh) * 2019-07-03 2024-03-26 腾讯科技（深圳）有限公司 一种页面数据处理方法及装置
CN112927314B (zh) * 2019-12-06 2023-01-31 腾讯数码（天津）有限公司 一种图像数据处理方法、装置以及计算机设备
CN111198680B (zh) * 2019-12-20 2020-12-11 江苏原力数字科技股份有限公司 一种基于 Arnold 渲染器的文件生成系统及方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103970750A (zh) * 2013-01-25 2014-08-06 腾讯科技（深圳）有限公司 一种生成html网页的方法和装置
CN104020984A (zh) * 2013-02-28 2014-09-03 阿里巴巴集团控股有限公司 一种生成静态页面的方法及装置
CN105739963A (zh) * 2014-12-12 2016-07-06 博雅网络游戏开发（深圳）有限公司 生成网页的方法和装置
CN106293669A (zh) * 2015-06-02 2017-01-04 阿里巴巴集团控股有限公司 一种网页组件的生成方法和装置

Family Cites Families (6)

* Cited by examiner, † Cited by third party
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 (zh) * 2007-12-14 2011-05-04 北大方正集团有限公司 一种网站内容组件生成方法、解析方法及装置
CN105631059B (zh) * 2014-10-28 2020-04-10 腾讯科技（深圳）有限公司 数据处理方法、数据处理装置及数据处理系统
CN105989031A (zh) * 2015-02-03 2016-10-05 阿里巴巴集团控股有限公司 一种图片信息处理方法和服务器
CN105653284A (zh) * 2015-12-29 2016-06-08 Tcl集团股份有限公司 一种生成安卓平台的场景文件的方法和装置
CN106777077A (zh) * 2016-12-13 2017-05-31 网易（杭州）网络有限公司 网页的生成方法及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103970750A (zh) * 2013-01-25 2014-08-06 腾讯科技（深圳）有限公司 一种生成html网页的方法和装置
CN104020984A (zh) * 2013-02-28 2014-09-03 阿里巴巴集团控股有限公司 一种生成静态页面的方法及装置
CN105739963A (zh) * 2014-12-12 2016-07-06 博雅网络游戏开发（深圳）有限公司 生成网页的方法和装置
CN106293669A (zh) * 2015-06-02 2017-01-04 阿里巴巴集团控股有限公司 一种网页组件的生成方法和装置

Also Published As

Publication number Publication date
CN108287707B (zh) 2021-03-02
CN108287707A (zh) 2018-07-17

Similar Documents

Publication Publication Date Title
WO2021217911A1 (zh) 业务网站项目构建方法、装置、计算机设备和存储介质
WO2018000998A1 (zh) 界面生成方法、装置和系统
US20190197068A1 (en) Page rendering method, device, and data storage medium
CN106682219B (zh) 关联文档获取方法及装置
US10846526B2 (en) Content based transformation for digital documents
CN110955416A (zh) 接口文档生成方法、装置、设备和计算机存储介质
CN107004008B (zh) 使用对不同的数据存储位置的自动化查询的相关文件识别
US10223812B2 (en) Image validation
US9811605B2 (en) Methods, apparatuses and computer program products for automated learning of data models
US8621341B2 (en) Theming engine
US10318286B2 (en) Adding on-the-fly comments to code
US20150058708A1 (en) Systems and methods of character dialog generation
WO2017080007A1 (zh) 一种识别码智能分析处理系统及其处理方法
CN111666740A (zh) 流程图生成方法、装置、计算机设备和存储介质
WO2019052143A1 (zh) Jsx文件生成方法、装置、存储介质和计算机设备
WO2020140650A1 (zh) 一种图像处理方法及装置、存储介质、电子设备
JP2017162147A (ja) 情報処理装置、プログラム及び情報処理方法
US10360286B2 (en) Color coding of layout structure elements in a flow format document
CN108874392A (zh) 用户指引界面生成方法及装置
WO2023239468A1 (en) Cross-application componentized document generation
US9537928B2 (en) Remote computing device use of unsupported local computing device components
US20180061074A1 (en) Apparatus, method, and storage medium
KR20220024227A (ko) 데이터 주석화 방법, 관련 장치 및 컴퓨터 프로그램
WO2019114133A1 (zh) 编辑页面内容颜色修改方法、装置、终端和存储介质
CN106155473A (zh) 一种终端应用处理方法及其装置

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 18856313

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 18856313

Country of ref document: EP

Kind code of ref document: A1