CN112825033A - 界面代码的生成方法、装置、设备及存储介质 - Google Patents

Abstract

本申请实施例提供一种界面代码的生成方法、装置、设备及存储介质，其中该方法通过显示编辑界面，获取用户基于该编辑界面得到的UI界面，基于该UI界面中各UI组件之间的位置关系和嵌套关系，生成该UI界面对应第一编程语言的第一格式数据，通过将第一格式数据转换为对应第二编程语言的第二格式数据，基于第二格式数据生成UI界面对应第二编程语言的代码，实现了界面代码的自动化生成，提高了界面代码的生成效率。

Description

界面代码的生成方法、装置、设备及存储介质

技术领域

本申请实施例涉及计算机技术领域，尤其涉及一种界面代码的生成方法、装置、设备及存储介质。

背景技术

相关技术在界面开发过程中，需要手动编写用于实现目标界面样式的界面代码，并且在编写界面代码之前，需要根据界面所在应用的版本以及开发框架的提供方选择对应的脚手架工具，以及手动修改脚手架工具的部分文件，然后才能根据目标界面的样式手动编写界面代码，在整个开发过程中，手动改写脚手架部分文件及手动编写界面代码的部分需要消耗大量的时间，效率较低。

发明内容

本申请实施例提供一种界面代码的生成方法、装置、设备及存储介质，用以提高界面代码的生成效率。

本申请实施例第一方面提供一种界面代码的生成方法，该方法包括：

显示编辑界面，所述编辑界面上包括可用于UI设计的UI组件，所述UI组件基于第一编程语言实现；从所述编辑界面中获取用户基于所述UI组件编辑得到的UI界面；基于所述UI界面中各UI组件之间的位置关系以及嵌套关系，生成所述UI界面对应所述第一编程语言的第一格式数据；将所述UI界面对应所述第一编程语言的所述第一格式数据转换成对应第二编程语言的第二格式数据；基于所述第二格式数据，生成所述UI界面对应所述第二编程语言的代码。

在一种实施方式中，所述第一格式数据包括：

所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及所述UI界面中各UI组件之间的嵌套关系。

在一种实施方式中，所述将所述UI界面对应所述第一编程语言的所述第一格式数据转换成对应第二编程语言的第二格式数据，包括：

根据第一编程语言与第二编程语言之间的映射关系，将所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及各UI组件之间的嵌套关系映射为在所述第二编程语言中对应的标签名称、样式名称、样式内容和嵌套关系。

在一种实施方式中，所述根据第一编程语言与第二编程语言之间的映射关系，将所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及各UI组件之间的嵌套关系映射为在所述第二编程语言中对应的标签名称、样式名称、样式内容和嵌套关系，包括：

在检测到所述UI界面的UI组件中未嵌套其他组件时，检测所述UI组件的标签名称中是否包括衍生框架标识；其中，若包括，则基于所述衍生框架标识，将所述UI组件在所述第一编程语言中对应的标签名称、样式名称和样式内容映射为所述衍生框架在所述第二编程语言中的标签签名、样式名称和样式内容；若不包括，则将所述UI组件在所述第一编程语言中对应的标签名称、样式名称和样式内容映射为所述UI组件在所述第二编程语言中的原生标签签名、样式名称和样式内容。

在一种实施方式中，所述从所述编辑界面中获取用户基于所述UI组件编辑得到的UI界面之前，所述方法还包括：

接收用户设定的尺寸参数；基于所述尺寸参数，对所述用户在所述编辑界面中选中的UI组件的尺寸进行调整；将所述尺寸参数添加到所述UI组件在所述第一编程语言中的样式名称或样式内容中。

本申请实施例第二方面提供一种界面代码的生成装置，包括：

显示模块，用于显示编辑界面，所述编辑界面上包括可用于UI设计的UI组件，所述UI组件基于第一编程语言实现。

获取模块，用于从所述编辑界面中获取用户基于所述UI组件编辑得到的UI界面。

第一生成模块，用于基于所述UI界面中各UI组件之间的位置关系以及嵌套关系，生成所述UI界面对应所述第一编程语言的第一格式数据。

转换模块，用于将所述UI界面对应所述第一编程语言的所述第一格式数据转换成对应第二编程语言的第二格式数据。

第二生成模块，用于基于所述第二格式数据，生成所述UI界面对应所述第二编程语言的代码。

在一种实施方式中，所述第一格式数据包括：

所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及所述UI界面中各UI组件之间的嵌套关系。

在一种实施方式中，所述转换模块，包括：

映射子模块，用于根据第一编程语言与第二编程语言之间的映射关系，将所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及各UI组件之间的嵌套关系映射为在所述第二编程语言中对应的标签名称、样式名称、样式内容和嵌套关系。

在一种实施方式中，所述映射子模块，用于：

在检测到所述UI界面的UI组件中未嵌套其他组件时，检测所述UI组件的标签名称中是否包括衍生框架标识；其中，若包括，则基于所述衍生框架标识，将所述UI组件在所述第一编程语言中对应的标签名称和样式内容映射为所述衍生框架在所述第二编程语言中的标签签名和样式内容；若不包括，则将所述UI组件在所述第一编程语言中对应的标签名称和样式内容映射为所述UI组件在所述第二编程语言中的原生标签签名和样式内容。

在一种实施方式中，所述装置还包括：

接收模块，用于接收用户设定的尺寸参数。

调整模块，用于基于所述尺寸参数，对所述用户在所述编辑界面中选中的UI组件的尺寸进行调整。

添加模块，用于将所述尺寸参数添加到所述UI组件在所述第一编程语言中的样式名称或样式内容中。

本申请实施例第三方面提供一种计算机设备，包括：处理器；显示屏，用于显示编辑界面，用户在所述编辑界面上，编辑生成UI界面；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述处理器执行，使得所述处理器实现如上述第一方面所述的方法。

本申请实施例第四方面提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述第一方面所述的方法。

基于以上各方面，本申请实施例通过显示编辑界面，获取用户基于该编辑界面得到的UI界面，基于该UI界面中各UI组件之间的位置关系和嵌套关系，生成该UI界面对应第一编程语言的第一格式数据，通过将第一格式数据转换为对应第二编程语言的第二格式数据，基于第二格式数据生成UI界面对应第二编程语言的代码。在本申请实施例中，只要用户在编辑界面上编辑得到UI界面，即能够根据用户编辑得到的UI界面自动生成该UI界面在目标编程语言(即第二编程语言)下的代码，不需要用户手动改写脚手架工具的文件，也不需要人工手动编写UI界面在目标编程语言(即第二编程语言)下的代码，提高了界面代码的生成效率，同时还能够避免不同开发人员编码规范不一致导致的编码问题。

应当理解，上述发明内容部分中所描述的内容并非旨在限定本申请的实施例的关键或重要特征，亦非用于限制本申请的范围。本公申请的其它特征将通过以下的描述变得容易理解。

附图说明

图1是本申请实施例提供的一种通信场景的示意图；

图2是本申请实施例提供的一种界面代码的生成方法的流程图；

图3是本申请实施例提供的一种编辑界面的示意图；

图4是本申请实施例提供的一种格式数据转换方法的流程图；

图5是本申请实施例提供的一种界面代码的生成装置的结构示意图；

图6是本申请实施例提供的一种计算机设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本申请的实施例。虽然附图中显示了本申请的某些实施例，然而应当理解的是，本申请可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本申请。应当理解的是，本申请的附图及实施例仅用于示例性作用，并非用于限制本申请的保护范围。

本申请实施例的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

图1是本申请实施例提供的一种通信场景的示意图，如图1所示，在该通信场景中，技术人员通过计算机设备11对应用程序进行开发，其开发内容包括对应用程序UI界面的开发和对应用程序功能的开发。在开发完成后，计算机设备11将应用程序上传到网络侧的服务器12上使得用户端的电子设备13能够从服务器上下载并使用该应用程序，其中，电子设备13在执行下载操作时，首先向服务器12发送下载请求，该下载请求中包括该应用程序的标识信息、版本信息以及电子设备13自身的运行环境的信息(比如，安卓系统或者苹果系统等)，服务器12接收到电子设备13的请求后，验证电子设备13请求的版本是否能够在电子设备13上运行，比如，若电子设备13请求的版本是基于java语言编写的版本，而电子设备13的运行环境只能运行C语言的版本，那么电子设备13请求的版本显然不能在电子设备13上运行，服务器12向电子设备13发送错误响应，若电子设备13请求的版本能够在电子设备13的运行环境下运行，那么就将应用程序的程序包下发给电子设备13，以使电子设备13安装并运行该应用程序。

由于当前电子设备的种类很多，各类电子设备的运行环境不尽相同，因此，应用程序开发人员，在开发某种应用程序时通常需要以不同的编程语言开发适用于不同运行环境的应用程序代码。如果换一种编程语言就重新编写一次应用程序的代码，显然效率非常低，并且在开发过程中，有时出于开发需要，开发人员不得不去手动修改一些开发工具的文件，这更加增加了开发的复杂度，降低了开发效率。

针对现有技术存在的上述问题，本申请实施例聚焦于如何提高应用程序UI界面的代码生成效率，实现UI界面代码的自动化生成。

图2是本申请实施例提供的一种界面代码的生成方法的流程图，如图2所示，本实施例提供的界面代码生成方法包括：

步骤201、显示编辑界面，所述编辑界面上包括可用于UI设计的UI组件，所述UI组件基于第一编程语言实现。

图3是本申请实施例提供的一种编辑界面的示意图，在该界面中包括组件区、参数输入区、UI界面编辑区和代码显示区。

其中，组件区中包括UI组件1到UI组件n，n为大于1的整数，组件区中的每个UI组件均为采用预设的原生编码语言(为了与其他编码语言进行区分，本实施例将原生编码语言简称为第一编程语言)实现的，可用于对UI界面进行设计的组件，每个UI组件均包括在第一线程语言下的标签名称、样式名称，样式内容等信息，其中样式内容中可以包括UI组件的基本设计信息(比如包括但不局限于：尺寸信息和形状信息)和特殊设计信息(比如包括但不局限于：颜色种类信息和颜色变化信息等)，用户可从组件区中选择相应的UI组件拖拽到UI界面编辑区中实现对UI界面的设计。其中，本实施例所称的标签名称、样式名称和样式内容均用于对UI组件进行标记，每个UI组件的标签名称、样式名称和样式内容具有唯一性，每个UI组件对应一段基于第一编程语言编写的代码，该段代码用于实现该UI组件。

在一种实施方式中，用户拖拽到UI界面编辑区中的多个UI组件可以相互嵌套叠加，比如，用户在将一个内容呈现组件拖拽到UI界面编辑区中之后，还可以将另外一个图片呈现组件拖拽到内容呈现组件在UI界面编辑区上的矩形区域中，实现内容呈现组件与图片呈现组件之间的嵌套，使得内容呈现组件的矩形区域中既显示文字内容又显示图片内容，当然这里仅是以一种嵌套方式为例进行说明，并不是对嵌套方式的唯一限定。

参数输入区可用于对用户选中的UI组件的参数进行设置，在本实施例中，用户从组件区中拖拽的UI组件的参数均为预设的默认值，用户在使用组件区中的UI组件进行界面设计时，可通过参数输入区对选定的UI组件中的尺寸参数进行设置，比如，用户在从组件区中选中了内容呈现组件(内容呈现组件可示例性的理解为用于呈现文字内容的组件)之后，假设该内容呈现组件的内容呈现区域为矩形，那么用户在将该组件拖拽到UI界面编辑区后，可通过参数输入区对矩形区域的长和宽进行设置，以使矩形区域的大小满足需求。在完成尺寸调整之后，在一种示例中可以将用户设置的尺寸参数添加到UI组件在第一编程语言下的样式名称或样式内容中，以便在以其他编程语言实现的包括该UI组件的UI界面时，该UI组件在UI界面上的区域能够保持用户设置的尺寸不变。当然这里仅为一个示例说明，实际上，在其他方式中，用户调整后的尺寸参数可以携带在UI组件的任意标识信息中。

代码显示区可用于对用户拖拽的UI组件在第一编程语言下的代码进行显示，或者也可以用于对用户当前设计的UI界面在第二编程语言下的代码进行显示，其中，第二编程语言是指目标使用的编程语言。

步骤202、从所述编辑界面中获取用户基于所述UI组件编辑得到的UI界面。

在一种可行的实施方式中，在编辑界面上设置触发按键，当检测到用户触发该按键时，确定用户结束设计，此时，从UI界面编辑区中获取用户设计的UI界面。在另一种可行的实施方式中，可以在检测到UI界面编辑区的被编辑区域超过预设阈值，且在预设时间长度内UI界面编辑区中没有发生新的编辑操作时，触发获取UI界面编辑区中的UI界面。其中，本实施例获取到的UI界面中携带有构成该界面的各UI组件的相关信息，比如，UI组件的标签名称、样式名称及样式内容等。当然上述两种方式仅为示例说明，并不是对UI界面获取方式的唯一限定。

步骤203、基于所述UI界面中各UI组件之间的位置关系以及嵌套关系，生成所述UI界面对应所述第一编程语言的第一格式数据。

在本实施例中，可以按照预设顺序从UI界面中获取UI组件的相关信息，比如，在一个示例式中，可按照从左到右，从上到下的顺序遍历UI界面，获取UI界面中每个UI组件的标签签名、样式名称、样式内容等信息，并在遍历到一个UI组件之后，检测该组件之内是否嵌套有其他组件，若包括则继续获取嵌套组件的标签名称、样式名称和样式内容等信息，并基于各组件对应的标签签名、样式名称和样式内容等信息记录组件之间的嵌套关系，比如，在一个可能的示例中可用“(标签签名i、样式名称i、样式内容i)-(标签签名j、样式名称j、样式内容j)”的形式表示标签签名i对应的UI组件中嵌套有标签签名j对应的UI组件，当然这里仅为示例说明而不是唯一限定。

进一步的，在遍历到UI组件之后，若该UI组件与其他组件嵌套，则将该UI组件与其他组件的完整嵌套关系作为一个整体添加到预设字符串中，若UI组件不与其他组件嵌套，则直接将该组件的标签签名、样式名称、样式内容等信息添加到预设字符串中，进而在遍历完整个UI界面之后，即可得到UI界面对应第一编程语言的第一格式数据，也就是说，本实施例所称的第一格式数据中包括UI界面中各组件之间的嵌套关系，以及各UI组件的标签签名、样式名称、样式内容等信息。

步骤204、将所述UI界面对应所述第一编程语言的所述第一格式数据转换成对应第二编程语言的第二格式数据。

其中，第二编程语言是指目标采用的编码语言，该编码语言与第一编程语言不同，在本实施例中，除了第一编程语言之外，可以预先设置多种编程语言，对应编辑界面提供的每个UI组件，在每种编程语言下均对应一段代码，用于实现该UI组件，但是对于同一UI组件来说，其在不同编程语言中对应的标签名称、样式名称和样式内容可能相同也可能不同，因此，在本实施例中预先设置第一编程语言与其他各种编程语言之间的映射关系，该映射关系中包括第一编程语言与其他各种编程语言中标签名称之间的映射关系，样式名称之间的映射关系以及样式内容之间的映射关系等，根据该些映射关系，可以将第一编程语言中的标签名称、样式名称和样式内容等映射到其他编程语言中。

由于在本实施例中，第二编程语言为目标编程语言，因此，在得到第一编程语言对应的第一格式数据之后，根据第一编程语言与第二编程语言之间的映射关系，可将UI界面中的各UI组件在第一编程语言中对应的标签名称、样式名称、样式内容以及各UI组件之间的嵌套关系映射为在第二编程语言中对应的标签名称、样式名称、样式内容和嵌套关系。

步骤205、基于所述第二格式数据，生成所述UI界面对应所述第二编程语言的代码。

由于在本实施例中在每种编程语言下均预先编写了相应的代码用来实现相应的UI组件，而由第一格式数据映射得到的第二格式数据是用第二编程语言中的标签名称、样式名称、样式内容等信息来表示的UI界面中的各UI组件之间的关系的，因此，根据第二格式数据可以从预先设置的代码中找到预先以第二编码语言编写的所述UI界面的各UI组件的代码，再根据该些代码以及UI组件之间的嵌套关系，生成基于第二编程语言的UI界面的代码。

本实施例通过显示编辑界面，获取用户基于该编辑界面得到的UI界面，基于该UI界面中各UI组件之间的位置关系和嵌套关系，生成该UI界面对应第一编程语言的第一格式数据，通过将第一格式数据转换为对应第二编程语言的第二格式数据，基于第二格式数据生成UI界面对应第二编程语言的代码。在本实施例中，只要用户在编辑界面上编辑得到UI界面，即能够根据用户编辑得到的UI界面自动生成该UI界面在目标编程语言(即第二编程语言)下的代码，不需要用户手动改写脚手架工具的文件，也不需要人工手动编写UI界面在目标编程语言(即第二编程语言)下的代码，提高了界面代码的生成效率，同时还能够避免不同开发人员编码规范不一致导致的编码问题。

图4是本申请实施例提供的一种格式数据转换方法的流程图，如图4所示，在本实施例中格式数据的转换方法如下：

步骤401、从第一编程语言对应的第一格式数据中解析出各UI组件的信息，并根据所述第一格式数据中记录的信息，确定各UI组件与其他组件之间是否存在嵌套关系。

步骤402，针对与其他组件存在嵌套关系的UI组件，将该UI组件和所述其他组件在第一编程语言下的标签名称、样式名称和样式内容映射成第二编程语言下的标签名称、样式名称和样式内容，采用该UI组件和所述其他组件在第二编程语言下的标签名称、样式名称和样式内容表示该UI组件与所述其他组件之间的嵌套关系。

在实际应用中，由于第一格式数据中记录有UI界面中各组件之间的嵌套关系，因此，当从第一格式数据中解析到的某个UI组件与其他组件存在嵌套关系时，获取该UI组件和其他组件的完整的嵌套关系，并将该嵌套关系用第二编程语言中的标签名称、样式名称和样式内容进行表示，比如，当UI组件1嵌套在UI组件2中，UI组件2嵌套在UI组件3中，则在解析到UI组件3时，需要获取UI组件1、UI组件2和UI组件3之间的完整嵌套关系。进一步的，再根据第一编程语言与第二编程语言之间的映射关系，将UI组件1、UI组件2和UI组件3在第一编程语言下的标签名称、样式名称和样式内容映射为第二编程语言下的标签名称、样式名称和样式内容，从而通过UI组件1、UI组件2和UI组件3在第二编程语言下的标签名称、样式名称和样式内容表示UI组件1、UI组件2和UI组件3之间的嵌套关系。

步骤403、针对与其他组件不存在嵌套关系的UI组件，检测所述UI组件的标签名称中是否包括衍生框架标识，其中若是，则执行步骤404、否则执行步骤405。

其中，UI组件对应的衍生框架是指基于指定编程语言，采用自定义的编码方式实现UI组件的代码段，比如，对于某一UI组件来说，系统默认的一种基于第二编程语言的代码段被称为该UI组件的原生框架，开发者基于第二编程语言采用自定义的方式编写得到的代码段被称为该UI组件的衍生框架，对于一个UI组件来说，其对应的衍生框架可以是多个。

步骤404、基于所述衍生框架标识，将所述UI组件在第一编程语言中对应的标签名称和样式内容映射为所述衍生框架在第二编程语言中的标签签名和样式内容。

步骤405、将所述UI组件在第一编程语言中对应的标签名称、样式名称和样式内容映射为所述UI组件在第二编程语言中的原生标签签名、样式名称和样式内容。

示例的，在本实施例的实施方式中，当UI组件的标签名称中不包括衍生框架标识时，判断UI组件采用原生框架实现，当UI组件的标签名称中包含衍生框架标识时，判断UI组件采用该衍生框架标识对应的衍生框架实现，因此，在执行将第一格式数据转换成第二格式数据的操作时，需要根据UI组件的标签名称判断UI组件是否需要通过衍生框架来实现，若是，那么需要根据第一编程语言与第二编程语言之间的映射关系，将该衍生框架在第一编程语言下的标签名称、样式名称、样式内容映射成该衍生框架在第二编程语言下的标签名称、样式名称和样式内容，若不是，则需要将原生框架对应在第一编程语言下的标签名称、样式名称、样式内容映射成该原生框架在第二编程语言下的原生标签名称、样式名称和样式内容。

在本实施例中，UI组件的标签名称中可以包括衍生框架的标识，通过对衍生框架标识的判断，可以允许在UI界面的代码中使用自定义的代码段，从而提高了代码形式的灵活性，满足不同的编程需要。

图5是本申请实施例提供的一种界面代码的生成装置的结构示意图，如图5所示，装置50包括：

显示模块51，用于显示编辑界面，所述编辑界面上包括可用于UI设计的UI组件，所述UI组件基于第一编程语言实现；

获取模块52，用于从所述编辑界面中获取用户基于所述UI组件编辑得到的UI界面；

第一生成模块53，用于基于所述UI界面中各UI组件之间的位置关系以及嵌套关系，生成所述UI界面对应所述第一编程语言的第一格式数据；

转换模块54，用于将所述UI界面对应所述第一编程语言的所述第一格式数据转换成对应第二编程语言的第二格式数据；

第二生成模块55，用于基于所述第二格式数据，生成所述UI界面对应所述第二编程语言的代码。

在一种实施例方式中，所述第一格式数据包括：

所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及所述UI界面中各UI组件之间的嵌套关系。

在一种实施方式中，所述转换模块，包括：

映射子模块，用于根据第一编程语言与第二编程语言之间的映射关系，将所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及各UI组件之间的嵌套关系映射为在所述第二编程语言中对应的标签名称、样式名称、样式内容和嵌套关系。

在一种实施例方式中，所述映射子模块，用于：

在检测到所述UI界面的UI组件中未嵌套其他组件时，检测所述UI组件的标签名称中是否包括衍生框架标识；

其中，若包括，则基于所述衍生框架标识，将所述UI组件在所述第一编程语言中对应的标签名称、样式名称和样式内容映射为所述衍生框架在所述第二编程语言中的标签签名、样式名称和样式内容；

若不包括，则将所述UI组件在所述第一编程语言中对应的标签名称、样式名称和样式内容映射为所述UI组件在所述第二编程语言中的原生标签签名、样式名称和样式内容。

在一种实施方式中，所述装置还包括：

接收模块，用于接收用户设定的尺寸参数；

调整模块，用于基于所述尺寸参数，对所述用户在所述编辑界面中选中的UI组件的尺寸进行调整；

添加模块，用于将所述尺寸参数添加到所述UI组件在所述第一编程语言中的样式名称或样式内容中。

本实施例提供的装置能够执行上述图2或图4实施例的方法，其执行方式和有益效果类似，在这里不再赘述。

图6是本申请实施例提供的一种计算机设备的结构示意图，如图6所示，计算机设备60包括：

处理器61；

显示屏62，用于显示编辑界面，用户在所述编辑界面上，编辑生成UI界面；

存储装置63，用于存储一个或多个程序，当所述一个或多个程序被所述处理器执行，使得所述处理器实现如上述图2或图4实施例的方法。

本申请实施例还提供在一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任一方法实施例所述的方法。

本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)等等。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

此外，虽然采用特定次序描绘了各操作，但是这应当理解为要求这样操作以所示出的特定次序或以顺序次序执行，或者要求所有图示的操作应被执行以取得期望的结果。在一定环境下，多任务和并行处理可能是有利的。同样地，虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实现中。相反地，在单个实现的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实现中。

尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。

Claims (10)

1.一种界面代码的生成方法，其特征在于，包括：

显示编辑界面，所述编辑界面上包括可用于UI设计的UI组件，所述UI组件基于第一编程语言实现；

从所述编辑界面中获取用户基于所述UI组件编辑得到的UI界面；

基于所述UI界面中各UI组件之间的位置关系以及嵌套关系，生成所述UI界面对应所述第一编程语言的第一格式数据；

将所述UI界面对应所述第一编程语言的所述第一格式数据转换成对应第二编程语言的第二格式数据；

基于所述第二格式数据，生成所述UI界面对应所述第二编程语言的代码。

2.根据权利要求1所述的方法，其特征在于，所述第一格式数据包括：

所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及所述UI界面中各UI组件之间的嵌套关系。

3.根据权利要求2所述的方法，其特征在于，所述将所述UI界面对应所述第一编程语言的所述第一格式数据转换成对应第二编程语言的第二格式数据，包括：

根据第一编程语言与第二编程语言之间的映射关系，将所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及各UI组件之间的嵌套关系映射为在所述第二编程语言中对应的标签名称、样式名称、样式内容和嵌套关系。

4.根据权利要求3所述的方法，其特征在于，所述根据第一编程语言与第二编程语言之间的映射关系，将所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及各UI组件之间的嵌套关系映射为在所述第二编程语言中对应的标签名称、样式名称、样式内容和嵌套关系，包括：

在检测到所述UI界面的UI组件中未嵌套其他组件时，检测所述UI组件的标签名称中是否包括衍生框架标识；

其中，若包括，则基于所述衍生框架标识，将所述UI组件在所述第一编程语言中对应的标签名称、样式名称和样式内容映射为所述衍生框架在所述第二编程语言中的标签签名、样式名称和样式内容；

若不包括，则将所述UI组件在所述第一编程语言中对应的标签名称、样式名称和样式内容映射为所述UI组件在所述第二编程语言中的原生标签签名、样式名称和样式内容。

5.根据权利要求1-4中任一项所述的方法，其特征在于，所述从所述编辑界面中获取用户基于所述UI组件编辑得到的UI界面之前，所述方法还包括：

接收用户设定的尺寸参数；

基于所述尺寸参数，对所述用户在所述编辑界面中选中的UI组件的尺寸进行调整；

将所述尺寸参数添加到所述UI组件在所述第一编程语言中的样式名称或样式内容中。

6.一种界面代码的生成装置，其特征在于，包括：

显示模块，用于显示编辑界面，所述编辑界面上包括可用于UI设计的UI组件，所述UI组件基于第一编程语言实现；

获取模块，用于从所述编辑界面中获取用户基于所述UI组件编辑得到的UI界面；

第一生成模块，用于基于所述UI界面中各UI组件之间的位置关系以及嵌套关系，生成所述UI界面对应所述第一编程语言的第一格式数据；

转换模块，用于将所述UI界面对应所述第一编程语言的所述第一格式数据转换成对应第二编程语言的第二格式数据；

第二生成模块，用于基于所述第二格式数据，生成所述UI界面对应所述第二编程语言的代码。

7.根据权利要求6所述的装置，其特征在于，所述第一格式数据包括：

所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及所述UI界面中各UI组件之间的嵌套关系。

8.根据权利要求7所述的装置，其特征在于，所述转换模块，包括：

映射子模块，用于根据第一编程语言与第二编程语言之间的映射关系，将所述UI界面中的各UI组件在所述第一编程语言中对应的标签名称、样式名称、样式内容以及各UI组件之间的嵌套关系映射为在所述第二编程语言中对应的标签名称、样式名称、样式内容和嵌套关系。

9.一种计算机设备，其特征在于，包括：

处理器；

显示屏，用于显示编辑界面，用户在所述编辑界面上，编辑生成UI界面；

存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述处理器执行，使得所述处理器实现如权利要求1-5中任一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-5中任一项所述的方法。

Images