具体实施方式

下面，将参考附图详细地描述根据本公开的示例实施例。显然，所描述的实施例仅仅是本公开的一部分实施例，而不是本公开的全部实施例，应理解，本公开不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本公开的范围。

本领域技术人员可以理解，本公开实施例中的“第一”、“第二”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。

还应理解，在本公开实施例中，“多个”可以指两个或两个以上，“至少一个”可以指一个、两个或两个以上。

还应理解，对于本公开实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。

另外，本公开中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本公开中字符“/”，一般表示前后关联对象是一种“或”的关系。

还应理解，本公开对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本公开及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本公开实施例可以应用于终端设备、计算机系统、服务器等电子设备，其可与众多其它通用或专用计算系统环境或配置一起操作。适于与终端设备、计算机系统、服务器等电子设备一起使用的众所周知的终端设备、计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统、大型计算机系统和包括上述任何系统的分布式云计算技术环境，等等。

终端设备、计算机系统、服务器等电子设备可以在由计算机系统执行的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。

申请概述

目前为了能够让用户同时在多种终端同时填写表单，通常需要分别开发支持不同类型的终端的表单。对于实现某个功能的表单，虽然各种终端上应用的表单内容一样，但因为开发不同类型的终端支持的表单所使用的开发组件不同，因此，同一份表单需要进行多次两次，造成开发时间的浪费。

示例性系统

图1示出了可以应用本公开的实施例的组件生成方法或组件生成装置的示例性系统架构100。

如图1所示，系统架构100可以包括终端设备101，网络102和服务器103。网络102用于在终端设备101和服务器103之间提供通信链路的介质。网络102可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101通过网络102与服务器103交互，以接收或发送消息等。终端设备101上可以安装有各种通讯客户端应用，例如网页浏览器应用、搜索类应用、购物类应用、即时通信工具等。

终端设备101可以是各种电子设备，包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。

服务器103可以是提供各种服务的服务器，例如对终端设备101上传的代码片段进行分析的后台表单服务器。后台表单服务器可以对获取到的代码片段进行处理，得到处理结果(例如至少一个功能相同但类型不同的展示组件)。

需要说明的是，本公开的实施例所提供的组件生成方法可以由服务器103执行，也可以由终端设备101执行，相应地，组件生成装置可以设置于服务器103中，也可以设置于终端设备101中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。在目标代码片段不需要从远程获取的情况下，上述系统架构可以不包括网络，只包括服务器或终端设备。

示例性方法

图2是本公开一示例性实施例提供的组件生成方法的流程示意图。本实施例可应用在电子设备(如图1所示的终端设备101或服务器103)上，如图2所示，该方法包括如下步骤：

步骤201，获取用于生成预设功能的页面的目标代码片段。

在本实施例中，电子设备可以从本地或从远程获取预先配置的用于生成预设功能的页面的目标代码片段。其中，预设功能的页面可以是各种类型的页面，例如，可以是网页表单类型的页面。目标代码片段中可以包括该页面的相关内容，根据这些内容，可以生成相应的页面。目标代码片段可以是各种类型的代码片段，例如JSON代码片段。

步骤202，从目标代码片段中确定用于生成应用组件的目标代码单元。

在本实施例中，电子设备可以从目标代码片段中确定用于生成应用组件的目标代码单元。其中，目标代码单元对应于一个应用组件。目标代码片段中可以包括多个用于生成应用组件(例如按钮、菜单、文本框等)的代码单元，即每个代码单元对应于一个应用组件。电子设备可以从这些代码单元中选择目标代码单元，例如按顺序依次选择代码单元作为目标代码单元。

步骤203，从至少一个组件库中分别提取目标代码单元对应的基础组件。

在本实施例中，电子设备可以从预先建立的至少一个组件库中分别提取目标代码单元对应的基础组件，其中，至少一个组件库分别对应于一种组件展示页面。作为示例，可以预先建立两个React组件库，一个用于提供应用于H5端(例如手机、平板电脑等终端)上的展示页面的组件，一个应用于PC端(例如台式计算机、笔记本电脑等终端)上的展示页面的组件。电子设备可以分别从这两个组件库中提取基础组件。

步骤204，基于目标代码单元，在提取的至少一个基础组件的基础上，生成至少一个展示组件。

在本实施例中，电子设备可以基于目标代码单元，在提取的至少一个基础组件的基础上，生成至少一个展示组件。其中，基础组件为预先经过初始化的组件，通常，目标代码单元可以包括用户配置的组件标识、属性等信息，电子设备基于这些信息可以在基础组件的基础上，生成展示组件。对于同一目标代码单元，由于基于该目标代码单元生成的至少一个展示组件均对应于该目标代码单元，因此，同一目标代码单元对应的至少一个展示组件的功能相同。例如，基于某目标代码单元，生成两个功能相同的文本框，这两个文本框分别应用在H5端和PC端。

步骤205，对于至少一个展示组件包括的展示组件，在该展示组件对应的组件展示页面显示该展示组件。

在本实施例中，对于至少一个展示组件包括的展示组件，电子设备可以在该展示组件对应的组件展示页面显示该展示组件。作为示例，步骤204生成两个相同功能的文本框组件，其中一个应用在H5端的页面，另一个应用在PC端的页面，则可以在H5端的页面和PC端的页面中分别渲染出对应的展示组件。

应当理解，通过多次从目标代码片段中提取目标代码单元，并执行上述各步骤，可以在一种类型的组件展示页面中显示多个展示组件，从而得到完整的组件展示页面。

本公开的上述实施例提供的方法，通过从目标代码片段中确定用于生成预设类型的组件的目标代码单元，从预先建立的至少一个组件库中分别提取目标代码单元对应的基础组件，然后基于目标代码单元，在提取的至少一个基础组件的基础上，生成至少一个展示组件，最后将各个展示组件分别展示到对应的组件展示页面。实现了根据一段代码片段生成至少一个展示组件，也可以根据一段代码片段生成不同种类的组件展示页面下具有相同功能的展示组件，从而无需对不同种类的组件展示页面单独开发预设类型的组件，提高了页面设计的速度，节约了设计不同种类的组件展示页面耗费的人力。

在一些可选的实现方式中，上述步骤202可以如下执行：

首先，从目标代码片段中确定目标组件标识。

其中，目标代码片段可以包括多个组件标识，电子设备可以从多个组件标识中选择(例如按照顺序依次选择)一个或多个组件标识作为目标组件标识。

然后，将包含目标组件标识的代码单元确定为目标代码单元。

本实现方式通过根据目标组件标识确定目标代码单元，可以实现精准地从目标代码片段中提取用于生成某个应用组件的代码单元。

在一些可选的实现方式中，步骤303可以如下执行：

基于预先建立的组件标识和基础组件的对应关系，从预先建立的至少一个组件库中分别提取组件标识对应的基础组件作为目标代码单元对应的基础组件。

其中，组件标识和基础组件的对应关系可以基于表格等方式预先建立。

作为示例，若组件标识为“text”，两个组件库分别为应用于H5端的组件库和应用于PC端的组件库，则可以从分别从这两个组件库中提取应用于H5端的文本框组件和应用于PC端的文本框组件。

本实现方式通过基于组件标识从各组件库中分别提取相应的基础组件，可以实现快速、准确地提取出同一功能的至少一个组件，进而提高生成应用于多种场景的展示组件的效率。

在一些可选的实现方式中，步骤204可以如下执行：

首先，从目标代码单元中确定组件属性信息。

其中，组件属性信息用于表征待生成的展示组件的特性，例如展示组件的名称、说明、候选项等。

然后，基于组件属性信息，在至少一个基础组件的基础上，生成至少一个展示组件。

作为示例，若基础组件的组件标识为“text”，其类型为文本框，则组件属性信息可以包括文本框的名称，例如“房源编号”，该名称可以在展示界面上的文本框的相应位置显示。

本实现方式实现了由用户预先按照业务需求配置好组件的属性信息，然后自动地根据组件属性信息生成适用于各种类型的页面的展示组件，进一步提高了生成展示组件的灵活性和效率。

在一些可选的实现方式中，至少一个组件库预先基于如下步骤生成：

首先，从预设的至少一个原始组件库中确定功能相同的基础组件。

其中，原始组件库可以是预先针对不同的类型的页面设置的组件库，原始组件库中包括各种类型的基础组件的源代码。

然后，将功能相同的基础组件标记为相同的组件标识，得到至少一个组件库。

具体地，电子设备可以基于用户设置组件表示的操作，对功能相同的基础组件设置组件标识。设置组件标识后的原始组件库可以为本公开的组件生成方法使用的至少一个组件库，或将组件标识相同的基础组件重新存储，得到本公开的组件生成方法使用的至少一个组件库。

本实现方式通过对原始组件库中的基础组件设置组件标识，可以得到支持同时生成同一功能但不同类型的展示组件的组件库，有助于提高页面设计的速度。

参见图3，作为本公开的组件生成方法的一个应用场景，图3提供了两种类型的组件展示页面生成过程的示意图。其中，301为JSON形式的目标代码片段，其作用是生成表单生成页面。302和303分别为根据目标代码片段301生成的H5端的表单生成页面和PC端的表单生成页面。在目标代码片段301中，包括“text”、“select”、“button”三个组件标识，分别表示文本框组件、选择组件和按钮组件。组件标识所在的代码单元即目标代码单元如301a、301b、301c。电子设备根据组件标识，从预设的应用于H5端的组件库和应用于PC端的组件库中分别提取目标代码单元对应的基础组件。然后，电子设备从三个目标代码单元中分别提取组件属性信息。

例如，对于“text”对应的目标代码单元，其包括的组件属性信息包括“label：房源编号”，根据该组件属性信息，得到如301和302中所示的用于输入房源编号的文本框。类似的，对于“select”对应的目标代码单元，根据其包括的组件属性信息，得到如301和302中所示的用于选择房源类型的下拉菜单组件。对于“button”对应的目标代码单元，根据其包括的组件属性信息，得到如301和302中所示的提交按钮。

示例性装置

图4是本公开一示例性实施例提供的组件生成装置的结构示意图。本实施例可应用在电子设备上，如图4所示，组件生成装置包括：获取模块401，用于获取用于生成预设功能的页面的目标代码片段；确定模块402，用于从目标代码片段中确定用于生成应用组件的目标代码单元；提取模块403，用于从至少一个组件库中分别提取目标代码单元对应的基础组件，其中，至少一个组件库分别对应于一种组件展示页面；生成模块404，用于基于目标代码单元，在提取的至少一个基础组件的基础上，生成至少一个展示组件；显示模块405，用于对于至少一个展示组件包括的展示组件，在该展示组件对应的组件展示页面显示该展示组件。

在本实施例中，获取模块401可以从本地或从远程获取预先配置的用于生成预设功能的页面的目标代码片段。其中，预设功能的页面可以是各种类型的页面，例如，可以是网页表单类型的页面。目标代码片段中可以包括该页面的相关内容，根据这些内容，可以生成相应的页面。目标代码片段可以是各种类型的代码片段，例如JSON代码片段。

在本实施例中，确定模块402可以从目标代码片段中确定用于生成应用组件的目标代码单元。其中，目标代码单元对应于一个应用组件。目标代码片段中可以包括多个用于生成应用组件(例如按钮、菜单、文本框等)的代码单元，即每个代码单元对应于一个应用组件。确定模块402可以从这些代码单元中选择目标代码单元，例如按顺序依次选择代码单元作为目标代码单元。

在本实施例中，提取模块403可以从预先建立的至少一个组件库中分别提取目标代码单元对应的基础组件，其中，至少一个组件库分别对应于一种组件展示页面。作为示例，可以预先建立两个React组件库，一个用于提供应用于H5端(例如手机、平板电脑等终端)上的展示页面的组件，一个应用于PC端(例如台式计算机、笔记本电脑等终端)上的展示页面的组件。提取模块403可以分别从这两个组件库中提取基础组件。

在本实施例中，生成模块404可以基于目标代码单元，在提取的至少一个基础组件的基础上，生成至少一个展示组件。其中，基础组件为预先经过初始化的组件，通常，目标代码单元可以包括用户配置的组件标识、属性等信息，生成模块404基于这些信息可以在基础组件的基础上，生成展示组件。生成的各个展示组件均对应于目标代码单元，因此，各个展示组件的功能相同。

在本实施例中，对于至少一个展示组件包括的展示组件，显示模块405可以在该展示组件对应的组件展示页面显示该展示组件。作为示例，步骤204生成两个相同功能的文本框组件，其中一个应用在H5端的页面，另一个应用在PC端的页面，则可以在H5端的页面和PC端的页面中分别渲染出对应的展示组件。

参照图5，图5是本公开另一示例性实施例提供的组件生成装置的结构示意图。

在一些可选的实现方式中，确定模块402包括：第一确定单元4021，用于从目标代码片段中确定目标组件标识；第二确定单元4022，用于将包含目标组件标识的代码单元确定为目标代码单元。

在一些可选的实现方式中，提取模块403进一步用于：基于预先建立的组件标识和基础组件的对应关系，从预先建立的至少一个组件库中分别提取组件标识对应的基础组件作为目标代码单元对应的基础组件。

在一些可选的实现方式中，生成模块404包括：第三确定单元4041，用于从目标代码单元中确定组件属性信息；生成单元4042，用于基于组件属性信息，在至少一个基础组件的基础上，生成至少一个展示组件。

在一些可选的实现方式中，至少一个组件库预先基于如下步骤生成：从预设的至少一个原始组件库中确定功能相同的基础组件；将功能相同的基础组件标记为相同的组件标识，得到至少一个组件库。

本公开上述实施例提供的组件生成装置，通过从目标代码片段中确定用于生成预设类型的组件的目标代码单元，从预先建立的至少一个组件库中分别提取目标代码单元对应的基础组件，然后基于目标代码单元，在提取的至少一个基础组件的基础上，生成至少一个展示组件，最后将各个展示组件分别展示到对应的组件展示页面。实现了根据一段代码片段生成至少一个展示组件，也可以根据一段代码片段生成不同种类的组件展示页面下具有相同功能的展示组件，从而无需对不同种类的组件展示页面单独开发预设类型的组件，提高了页面设计的速度，节约了设计不同种类的组件展示页面耗费的人力。

示例性电子设备

下面，参考图6来描述根据本公开实施例的电子设备。该电子设备可以是如图1所示的终端设备101和服务器103中的任一个或两者、或与它们独立的单机设备，该单机设备可以与终端设备101和服务器103进行通信，以从它们接收所采集到的输入信号。

图6图示了根据本公开实施例的电子设备的框图。

如图6所示，电子设备600包括一个或多个处理器601和存储器602。

处理器601可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备600中的其他组件以执行期望的功能。

存储器602可以包括一个或多个计算机程序产品，计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器601可以运行程序指令，以实现上文的本公开的各个实施例的组件生成方法以及/或者其他期望的功能。在计算机可读存储介质中还可以存储诸如目标代码片段、应用组件的代码等各种内容。

在一个示例中，电子设备600还可以包括：输入装置603和输出装置604，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。

例如，在该电子设备是终端设备101或服务器103时，该输入装置603可以是鼠标、键盘等设备，用于输入目标代码片段。在该电子设备是单机设备时，该输入装置603可以是通信网络连接器，用于从终端设备101和服务器103接收所输入的目标代码片段。

该输出装置604可以向外部输出各种信息，包括展示组件。该输出设备604可以包括例如显示器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图6中仅示出了该电子设备600中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备600还可以包括任何其他适当的组件。

示例性计算机程序产品和计算机可读存储介质

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的组件生成方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的组件生成方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

示例性计算机程序

本公开实施例还提供了一种计算机程序程序产品，包括计算机程序/指令，所述计算机程序/指令被处理器执行时，可以实现上述任一可能的实现方式中的组件生成方法。

该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选例子中，该计算机程序产品具体体现为计算机存储介质，在另一个可选例子中，该计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。

提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。