JSX文件生成方法、装置、存储介质和计算机设备制造方法及图纸

本发明专利技术涉及一种JSX文件生成方法、装置、存储介质和计算机设备，所述方法包括：获取待处理的PSD文件；识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与所述PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。上述JSX文件生成方法、装置、存储介质和计算机设备可提高JSX文件的生成的便利性。

JSX file generation method, device, storage medium and computer equipment

The invention relates to a JSX file generation method, device, storage medium, and computer equipment. The method includes: obtaining the PSD file to be processed, identifying the visual information in each layer in the PSD file, the position information of the visual information in the corresponding layer, and according to the visual information and the position letter in each layer. The corresponding layered files are formed and classified, and the JSX template files that match the PSD file are obtained; the corresponding visual information is loaded into the corresponding region of the JSX template text according to the location information in the corresponding layer of the classified files stored in the classified storage, and the JSX file is generated. The JSX file generation method, device, storage medium and computer equipment can improve the convenience of generating JSX files.

【技术实现步骤摘要】
JSX文件生成方法、装置、存储介质和计算机设备
本专利技术涉及信息处理
，特别是涉及一种JSX文件生成方法、装置、存储介质和计算机设备。
技术介绍
JSX(JavaScriptXML)是一种在React组件内部构建标签的类XML语法，JSX文件是由JSX命令组成的描述性文本。在通过React创建用户界面视图组件时，需要用到JSX文件。传统的JSX文件的生成方法，是通过将PSD文件转换为HTML文件，再根据所转换的HTML文件来转换成JSX文件。由于这种传统的在生成JSX文件时需要进过两次转换，因而其转换过程比较复杂。
技术实现思路
基于此，有必要针对上述JSX文件转换生成的过程比较复杂的技术问题，提供一种JSX文件生成方法、装置、存储介质和计算机设备。一种JSX文件生成方法，所述方法包括：获取待处理的PSD文件；识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与所述PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。在其中一个实施例中，在所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储之前，还包括：识别所述PSD文件中每个图层中的可视信息之间的关联关系；所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。在其中一个实施例中，所述根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；将分层文件存储至与可视信息的类型对应的存储路径中。在其中一个实施例中，所述根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，包括：提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据所述位置信息将对应的可视信息加载至所述JSX模板文件中与所述存储路径对应的区域中。在其中一个实施例中，所述根据每个图层中的可视信息和位置信息形成相应的分层文件，包括：对所述可视信息进行格式处理和位置处理；根据每个图层中的处理后的可视信息和位置信息形成相应的分层文件。在其中一个实施例中，所述获取与所述PSD文件相匹配的JSX模板文件，包括：获取每个JSX模板文件的历史反馈信息；根据所述历史反馈信息选取与所述PSD文件相匹配的JSX模板文件。一种JSX文件生成装置，所述装置包括：PSD文件获取模块，用于获取待处理的PSD文件；识别模块，用于识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；分层文件生成模块，用于根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；JSX模板文件获取模块，用于获取与所述PSD文件相匹配的JSX模板文件；JSX文件生成模块，用于根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。在其中一个实施例中，所述识别模块还用于识别所述PSD文件中每个图层中的可视信息之间的关联关系；所述分层文件生成模块还用于根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件。一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各实施例中所述的JSX文件生成方法的步骤。一种计算机设备，包括存储器及处理器，所述存储器上存储有可被处理器执行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述各实施例中所述的JSX文件生成方法的步骤。上述的JSX文件生成方法、装置、存储介质和计算机设备，通过识别PSD文件中每个图层中的可视信息以及可视信息在相应图层中的位置信息，并将识别出的该图层转换成分层文件进行分类存储，同时还获取与PSD文件相匹配的JSX模板文件，再从所存储的分层文件提取相应可视信息及其位置信息，按照该可视信息和位置信息确定该可视信息所加载的区域，并将其加载至对应区域中，生成JSX文件。上述方法通过生成分层文件，并利用JSX模板文件，从而可直接将PSD文件转换成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(PhotoshopDocument)文件是Adobe公司的图像处理软件Photoshop的专用格式的文件。当该计算机设备为终端时，可提供下相应的PSD文件选取界面，并接收用户从该界面上提供的PSD文件选取入口对相应PSD文件的选取操作，再侦测在界面上对PSD文件选取的虚拟按钮点击操作，相应的手势或语音信息等，根据该相应的点击操作，手势或本文档来自技高网...

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

【技术特征摘要】
1.一种JSX文件生成方法，其特征在于，所述方法包括：获取待处理的PSD文件；识别所述PSD文件中每个图层中的可视信息、所述可视信息在相应图层中的位置信息；根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储；获取与所述PSD文件相匹配的JSX模板文件；根据分类存储的分层文件中的可视信息在所述相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，生成JSX文件。2.根据权利要求1所述的方法，其特征在于，在所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储之前，还包括：识别所述PSD文件中每个图层中的可视信息之间的关联关系；所述根据每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储。3.根据权利要求2所述的方法，其特征在于，所述根据所述关联关系对每个图层中的可视信息和位置信息形成相应的分层文件，并进行分类存储，包括：检测具有关联关系的图层中的可视信息的类型是否相同，若是，则将相同类型的可视信息合并成同一份分层文件；将不具有关联关系的图层中的可视信息，或者具有关联关系的图层中的不同类型的可视信息独立生成分层文件；将分层文件存储至与可视信息的类型对应的存储路径中。4.根据权利要求3所述的方法，其特征在于，所述根据分类存储的分层文件中的可视信息在相应图层中的位置信息，将相应的可视信息加载至所述JSX模板文件的对应区域中，包括：提取每个存储路径下的分层文件；将提取的分层文件中的可视信息和位置信息，根据所述位置信息将对应的可视信息加载至所述JSX模板文件中与所述存储路径对应的...

【专利技术属性】
技术研发人员：桂浩群，
申请(专利权)人：深圳壹账通智能科技有限公司，
类型：发明
国别省市：广东,44