CN110321126B - 生成页面代码的方法和装置 - Google Patents

Abstract

本申请公开了一种生成页面代码的方法和装置，属于计算机技术领域。所述方法包括：获取页面的设计图像；识别所述页面的设计图像中包括的页面元素，确定每个页面元素的位置信息；基于所述位置信息，生成所述页面的定位式布局代码，以及基于所述定位式布局代码生成所述页面的页面代码。采用本申请，可以节省人力和时间。

Description

生成页面代码的方法和装置

技术领域

本申请涉及计算机技术领域，特别涉及一种生成页面代码的方法和装置。

背景技术

随着网络技术的快速发展，应用程序的种类以及数量也逐渐增多。为了便于用户的使用，大多数应用程序几乎都涉及到显示页面。显示页面上可以向用户显示一些信息，如文字、图片或视频等。

目前设计人员设计出页面的设计图像后，技术人员根据设计图像编写相应的页面代码。但是人工编写页面代码的方式，花费的人力以及时间较多。

发明内容

为了解决现有技术的问题，本申请实施例提供了一种生成页面代码的方法和装置。所述技术方案如下：

第一方面，提供了一种生成页面代码的方法，所述方法包括：

获取页面的设计图像；

识别所述设计图像中包括的页面元素，确定每个所述页面元素的位置信息；以及

基于所述位置信息，生成所述页面的定位式布局代码，以及基于所述定位式布局代码生成所述页面的页面代码。

可选地，所述确定每个所述页面元素的位置信息的步骤，包括：

确定每个所述页面元素的最小外接矩形，分别确定所述最小外接矩形的位置信息以作为每个所述页面元素的所述位置信息。

可选地，所述基于所述位置信息，生成所述页面的定位式布局代码的步骤，包括：

获取预先存储的用于显示所述页面元素的显示代码模板；

分别将每个所述页面元素的位置信息，写入所述显示代码模板中，得到每个所述页面元素的显示代码；

根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码。

可选地，所述根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码的步骤之后，还包括：

接收用户输入的至少一个页面元素的内容数据；

将所述至少一个页面元素的内容数据，***到所述定位式布局代码中所述至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码；

所述基于所述定位式布局代码生成所述页面的页面代码，包括：

基于***内容数据后的定位式布局代码生成所述页面的页面代码。

可选地，所述根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码的步骤之后，还包括：

获取在所述设计图像中检测到的至少一个页面元素的内容数据；

将所述至少一个页面元素的内容数据，***到所述定位式布局代码中所述至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码；

所述基于所述定位式布局代码生成所述页面的页面代码的步骤，包括：

基于***内容数据后的定位式布局代码生成所述页面的页面代码。

可选地，所述基于***内容数据后的定位式布局代码生成所述页面的页面代码的步骤，包括：

接收用户输入的至少一个页面元素的功能执行代码；

基于***内容数据后的定位式布局代码和所述至少一个页面元素的功能执行代码，生成所述页面的页面代码。

可选地，所述方法还包括：

当接收到所述页面代码的执行指令时，执行所述页面代码，显示所述页面。

第二方面，提供了一种生成页面代码的装置，所述装置包括：

获取模块，用于获取页面的设计图像；

确定模块，用于识别所述设计图像中包括的页面元素，确定每个所述页面元素的位置信息；

生成模块，用于基于所述每个所述页面元素的位置信息，生成所述页面的定位式布局代码，以及基于所述定位式布局代码生成所述页面的页面代码。

可选地，所述确定模块，用于：

确定每个所述页面元素的最小外接矩形，分别确定所述最小外接矩形的位置信息以作为每个所述页面元素的所述位置信息。

可选地，所述生成模块，用于：

获取预先存储的用于显示所述页面元素的显示代码模板；

分别将每个所述页面元素的位置信息，写入所述显示代码模板中，得到每个所述页面元素的显示代码；

根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码。

可选地，所述装置还包括：

接收模块，用于根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码之后，接收用户输入的至少一个页面元素的内容数据；

***模块，用于将所述至少一个页面元素的内容数据，***到所述定位式布局代码中所述至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码；

所述生成模块，用于：

基于***内容数据后的定位式布局代码生成所述页面的页面代码。

可选地，

所述获取模块，还用于根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码之后，获取在所述设计图像中检测到的至少一个页面元素的内容数据；

所述***模块，还用于将所述至少一个页面元素的内容数据，***到所述定位式布局代码中所述至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码；

所述生成模块，用于：

基于***内容数据后的定位式布局代码生成所述页面的页面代码。

可选地，所述生成模块，用于：

接收用户输入的至少一个页面元素的功能执行代码；

基于***内容数据后的定位式布局代码和所述至少一个页面元素的功能执行代码，生成所述页面的页面代码。

可选地，所述装置还包括：

显示模块，用于当接收到所述页面代码的执行指令时，执行所述页面代码，显示所述页面。

第三方面，提供了一种终端，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上述第一方面所述的生成页面代码的方法。

第四方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上述第一方面所述的生成页面代码的方法。

本申请实施例提供的技术方案带来的有益效果至少包括：

本申请实施例中，终端根据页面的设计图像可以识别设计图像中包括的页面元素，并确定每个页面元素的位置信息，根据每个页面元素的位置信息生成页面元素的定位式布局代码，进而生成页面的页面代码。这样，根据用户输入的页面的设计图像，终端即可自动生成对应的定位式布局代码，进而生成页面代码，使得技术人员编写的代码量大大减少，节省了花费的人力以及时间。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

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

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

图3是本申请实施例提供的一种生成页面代码的方法的界面示意图；

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

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

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

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

图8是本申请实施例提供的一种终端结构示意图；

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

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

本申请实施例提供了一种生成页面代码的方法，该方法可以由终端实现。其中，终端中安装有编写代码的应用程序。

如图1所示，该方法的处理流程可以包括如下的步骤：

在步骤101中，终端获取页面的设计图像。

一种可行的实施方式中，当用户想要生成页面代码时，可以预先确定出一个设计图像，该设计图像是用户想要得到的页面的显示样式，可以包括图片、文字等页面元素，并明确每个显示元素的位置信息，可以如图2所示。用户在终端中上传设计图像，终端获取页面的设计图像。

在步骤102中，终端识别设计图像中包括的页面元素，确定页面元素的位置信息。

一种可行的实施方式中，终端获取页面的设计图像后，在设计图像中识别设计图像中包括的页面元素。终端识别页面元素的方法可以是采用边缘识别算法进行识别，如采用Sobel边缘检测算法、Canny边缘检测算法、双阈值检测算法等；或者，终端识别页面元素的方法也可以是采用深度学习模型进行识别，如CNN(Convolutional Neural Networks，卷积神经网络)模型、RPN(Region Proposal Network，区域生成网络)等。除上述列举的识别方法外，根据不同的需求可以选择其它方法，只要能够实现在设计图像中识别页面元素的方法均可，本申请对此不做限定。

终端识别出设计图像中的任一页面元素时，确定每个页面元素的位置信息，该位置信息可以是页面元素在设计图像中的坐标，举个例子，假设识别出的页面元素是矩形的页面元素，则页面元素的位置信息可以是页面元素的四个顶角的坐标。

需要说明的是，终端获取设计图像中的页面元素的位置信息时，除了上述方法，还可以是：用户上传的设计图像是预设格式的设计图像，预设格式的设计图像可以包括每个显示元素的不同图层，则终端可以根据设计图像中的不同图层，直接获取设计图像中的每个元素，进而确定每个元素的位置信息。

可选地，在识别页面元素时，终端可以确定每个页面元素的最小外接矩形，分别确定每个页面元素的最小外接矩形的位置信息，作为每个页面元素的位置信息。

一种可行的实施方式中，设计图像中可能包括一些外形不是矩形的页面元素，这样的页面元素比较难以描述其位置信息，例如，当位置信息是以矩形的四个顶角的坐标形式进行表示时，外形不是矩形的页面元素的位置信息就比较难确定。为了解决这种问题，在识别页面元素时，终端可以先确定每个页面元素的最小外接矩形，如图3所示。进而，确定每个页面元素的最小外接矩形的位置信息，将其确定为每个页面元素的位置信息。这样，就可以采用较为简单的方式表示每个页面元素的位置信息。

在步骤103中，终端基于位置信息，生成页面的定位式布局代码，基于定位式布局代码生成页面的页面代码。

其中，定位式布局代码是根据每个页面元素的位置信息显示页面元素的代码，主要包括每个页面元素的位置信息以及显示功能代码，根据技术人员的预先设置，定位式布局代码中可以包括从设计图像中识别出的页面元素的内容数据，如图像、文字等，定位式布局代码中也可以不包括任何页面元素的内容数据，均采用预设内容数据表示，后续技术人员手动写入页面元素的内容数据。根据实际情况可选择不同的方式，本申请对此不做限定。

一种可行的实施方式中，通过上述步骤获取每个页面元素的位置信息后，终端基于每个页面元素的位置信息，生成页面的定位式布局代码，相应的处理步骤可以如下步骤1031-1033：

步骤1031，获取预先存储的用于显示页面元素的显示代码模板。

其中，显示代码模板是一段预设的代码，所有页面元素对应的显示代码模板可以是同一个显示代码模板，当然，根据用户的实际需求，也可以根据不同的页面元素设计不同的显示代码模板，本申请对此不做限定。

显示代码模板中主要包含根据位置信息显示页面元素的代码，但显示代码模板中预设的位置信息是空白字段或预设位置信息，显示代码模板中预设的内容数据也是空白数据或预设内容数据，用以后续根据设计图像中的页面元素进行替换。

一种可行的实施方式中，终端根据页面元素获取预先存储的显示代码模板，可选地，终端可以确定页面元素的个数，并获取相同个数的显示代码模板。

步骤1032，终端分别将每个页面元素的位置信息，写入显示代码模板中，得到每个页面元素的显示代码。

一种可行的实施方式中，终端根据页面元素在设计图像中的顺序，将页面元素的位置信息逐一写入到显示代码模板中，得到的代码即为每个页面元素的显示代码。如果显示代码模板中预设的位置信息是空白字段，则直接将位置信息写入显示代码模板；如果显示代码模板中预设的位置信息是预设位置信息，则使用页面元素的位置信息替换预设位置信息。

步骤1033，终端根据每个页面元素的显示代码，生成页面的不包含内容数据的定位式布局代码。

可选地，在根据步骤1033生成页面的不包含内容数据的定位式布局代码之后，可以在定位式布局代码之中***内容数据，其中，页面元素的内容数据可以是内容数据本身，如图像、文字等，也可以是拉取数据的链接，如视频链接等。获取内容数据的方式可以包括但不限于以下几种：

方式一、终端获取用户输入的内容数据，相应的处理步骤可以是：接收用户输入的至少一个页面元素的内容数据；终端将至少一个页面元素的内容数据，***到定位式布局代码中至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码，基于***内容数据后的定位式布局代码生成页面的页面代码。

一种可行的实施方式中，以至少一个页面元素中的任一页面元素为例，当用户想要手动输入该页面元素的内容数据时，可以先定位该页面元素对应的显示代码在定位式布局代码中的位置，然后将页面元素的内容数据写入到对应的显示代码中。如果显示代码中预设内容数据是空白数据，则直接将页面元素的内容数据写入显示代码中即可，如果显示代码中预设内容数据是某个固定的内容数据，则将输入的内容数据替换掉固定的内容数据。终端接收用户输入的页面元素的内容数据并***对应的显示代码中。用户完成输入内容数据后，得到***内容数据后的定位式布局代码，***内容数据后的定位式布局代码即为页面的页面代码。

方式二、终端可以识别设计图像中的页面元素的内容数据，相应的处理步骤可以如下：获取在设计图像中检测到的至少一个页面元素的内容数据；将至少一个页面元素的内容数据，***到定位式布局代码中至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码；基于***内容数据后的定位式布局代码生成页面的页面代码。

一种可行的实施方式中，如果设计图像中包含了一些页面元素的内容数据，如图像或文本字符等，终端可以识别内容数据，并将检测到的内容数据***到对应的显示代码中，如果显示代码中预设内容数据是空白数据，则直接将页面元素的内容数据写入显示代码中即可，如果显示代码中预设内容数据是某个固定的内容数据，则将检测的内容数据替换掉固定的内容数据。终端将检测到的内容数据均***对应的显示代码中后，可以得到***内容数据后的定位式布局代码，***内容数据后的定位式布局代码即为页面的页面代码。

可选地，得到***内容数据后的定位式布局代码后，用户还可以输入页面元素的功能执行代码，相应的处理步骤可以如下：接收用户输入的至少一个页面元素的功能执行代码；基于***内容数据后的定位式布局代码和至少一个页面元素的功能执行代码，生成页面的页面代码。

其中，功能执行代码用于使页面元素实现相应的功能，如刷新页面、登录、跳转等。

一种可行的实施方式中，根据设计图纸生成的页面代码包括的内容数据有限，且由于设计图像的限制，仅能实现显示功能，因此，为了增加页面代码的丰富性，可以支持用户可以在终端生成的定位式布局代码中添加功能执行代码。如果用户想要使页面元素实现较为复杂的功能，可以手动输入页面元素的功能执行代码。

终端生成***内容数据后的定位式布局代码后，用户可以查看定位式布局代码，且可以在某个页面元素对应的显示代码处，***页面元素的功能执行代码。用户对定位式布局代码完成修改后，点击保存选项，终端即可保存***内容数据后的定位式布局代码和至少一个页面元素的功能执行代码，保存后的代码即为页面的页面代码。需要说明的是，上述***功能执行代码的至少一个页面元素与***内容数据的至少一个页面元素可以是完全相同的页面元素，也可以是部分相同的页面元素，还可以是完全不同的页面元素，对此不做限定。

举例来说，用户在查看定位式布局代码时，为了便于找到想要查看或修改页面元素对应的代码段，可以根据页面元素的标识进行查找。定位到页面元素对应的代码段后，用户可以输入页面元素的内容数据，如将定位式布局代码中页面元素的内容数据修改为链接地址等，也可以添加页面元素的功能执行代码，使得页面元素能够执行不同的功能。

可选地，根据上述步骤103生成页面的页面代码之后，当终端接收到页面代码的执行指令时，执行页面代码，显示页面。

一种可行的实施方式中，根据上述步骤103生成页面的页面代码，可以将页面代码添加到应用程序的代码中，当用户打开或操作应用程序时，终端会接收到页面代码的执行指令，执行该页面代码，根据页面代码中每个页面元素的内容数据、位置信息和/或功能执行代码，显示每个页面元素，进而显示出该页面。

可选地，以页面是浏览器页面为例，在页面初次显示时，页面中的某些页面元素的内容数据可能会发生变化，如用于定位当前地址的页面元素，根据用户所在的不同位置，其内容数据可能确定为“中国”，也可能确定为“埃塞俄比亚”。这样可能会出现页面元素的页面代码中位置信息与实际显示的内容数据不符合的情况。但基于浏览器页面渲染的机制，当页面代码中位置信息与实际显示的内容数据不符合时，浏览器页面可能出现重绘的情况，这种情况可能会使得一些页面元素出现由于重绘调整位置而挪动的情况，这样的情况使得显示效果不好，为了避免让用户看到页面元素进行挪动的过程，在页面渲染过程中，可以先以不可见的属性显示页面元素，直至将所有页面元素的实际位置确定后，再一同显示所有页面元素。

基于上述的情况，如图4所示，对页面进行渲染的处理可以如下：获取视图DOM(Document Object Model，文档对象模型)树结构化数据，然后遍历树节点，并且当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。创建一个虚拟的节点，拉取内容数据填充到相应的页面元素，并以不可见的属性***文档，然后，根据拉取到的内容数据确定内容数据的实际显示位置信息，冒泡递归所有父节点重写该页面元素的宽和高，并对该页面元素进行渲染。如果拉取到的内容数据的实际显示位置信息与页面代码中的位置信息不相同，则需要重绘右侧树节点的位置信息。这样，将所有页面元素都渲染后，将所有页面元素的属性修改为可见属性，这样，整个页面完成了渲染。

本申请实施例中，终端根据页面的设计图像可以识别设计图像中包括的页面元素，并确定每个页面元素的位置信息，根据每个页面元素的位置信息生成页面元素的定位式布局代码，进而生成页面的页面代码。这样，根据用户输入的页面的设计图像，终端即可自动生成对应的定位式布局代码，进而生成页面代码，使得技术人员编写的代码量大大减少，节省了花费的人力以及时间。

基于相同的技术构思，本申请实施例还提供了一种生成页面代码的装置，该装置可以为上述实施例中的终端，如图5所示，该装置包括：获取模块510、确定模块520和生成模块530。

获取模块510，被配置为获取页面的设计图像；

确定模块520，被配置为识别所述设计图像中包括的页面元素，确定每个所述页面元素的位置信息；

生成模块530，被配置为基于所述每个所述页面元素的位置信息，生成所述页面的定位式布局代码，以及基于所述定位式布局代码生成所述页面的页面代码。

可选地，所述确定模块520，被配置为：

确定每个所述页面元素的最小外接矩形，分别确定所述最小外接矩形的位置信息以作为每个所述页面元素的所述位置信息。

可选地，所述生成模块530，被配置为：

获取预先存储的用于显示所述页面元素的显示代码模板；

分别将每个所述页面元素的位置信息，写入所述显示代码模板中，得到每个所述页面元素的显示代码；

根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码。

可选地，如图6所示，所述装置还包括：

接收模块540，被配置为根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码之后，接收用户输入的至少一个页面元素的内容数据；

***模块550，被配置为将所述至少一个页面元素的内容数据，***到所述定位式布局代码中所述至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码；

所述生成模块530，被配置为：

基于***内容数据后的定位式布局代码生成所述页面的页面代码。

可选地，

所述获取模块510，还被配置为根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码之后，获取在所述设计图像中检测到的至少一个页面元素的内容数据；

所述***模块550，还被配置为将所述至少一个页面元素的内容数据，***到所述定位式布局代码中所述至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码；

所述生成模块530，被配置为：

基于***内容数据后的定位式布局代码生成所述页面的页面代码。

可选地，所述生成模块530，被配置为：

接收用户输入的至少一个页面元素的功能执行代码；

基于***内容数据后的定位式布局代码和所述至少一个页面元素的功能执行代码，生成所述页面的页面代码。

可选地，如图7所示，所述装置还包括：

显示模块560，被配置为当接收到所述页面代码的执行指令时，执行所述页面代码，显示所述页面。

本申请实施例中，终端根据页面的设计图像可以识别设计图像中包括的页面元素，并确定每个页面元素的位置信息，根据每个页面元素的位置信息生成页面元素的定位式布局代码，进而生成页面的页面代码。这样，根据用户输入的页面的设计图像，终端即可自动生成对应的定位式布局代码，进而生成页面代码，使得技术人员编写的代码量大大减少，节省了花费的人力以及时间。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

需要说明的是：上述实施例提供的生成页面代码的装置在生成页面代码时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的生成页面代码的装置与生成页面代码的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图8是本申请实施例提供的一种终端的结构框图。该终端可以是上述实施例中的终端。该终端800可以是便携式移动终端，比如：智能手机、平板电脑。终端800还可能被称为用户设备、便携式终端等其他名称。

通常，终端800包括有：处理器801和存储器802。

处理器801可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器801可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器801也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器801可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器801还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器802可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是有形的和非暂态的。存储器802还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器802中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器801所执行以实现本申请中提供的生成页面代码的方法。

在一些实施例中，终端800还可选包括有：***设备接口803和至少一个***设备。具体地，***设备包括：射频电路804、触摸显示屏805、摄像头806、音频电路807、定位组件808和电源809中的至少一种。

***设备接口803可被用于将I/O(Input/Output，输入/输出)相关的至少一个***设备连接到处理器801和存储器802。在一些实施例中，处理器801、存储器802和***设备接口803被集成在同一芯片或电路板上；在一些其他实施例中，处理器801、存储器802和***设备接口803中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路804用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路804通过电磁信号与通信网络以及其他通信设备进行通信。射频电路804将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路804包括：天线***、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路804可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路804还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

触摸显示屏805用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。触摸显示屏805还具有采集在触摸显示屏805的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器801进行处理。触摸显示屏805用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，触摸显示屏805可以为一个，设置终端800的前面板；在另一些实施例中，触摸显示屏805可以为至少两个，分别设置在终端800的不同表面或呈折叠设计；在再一些实施例中，触摸显示屏805可以是柔性显示屏，设置在终端800的弯曲表面上或折叠面上。甚至，触摸显示屏805还可以设置成非矩形的不规则图形，也即异形屏。触摸显示屏805可以采用LCD(LiquidCrystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件806用于采集图像或视频。可选地，摄像头组件806包括前置摄像头和后置摄像头。通常，前置摄像头用于实现视频通话或自拍，后置摄像头用于实现照片或视频的拍摄。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能，主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能。在一些实施例中，摄像头组件806还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路807用于提供用户和终端800之间的音频接口。音频电路807可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器801进行处理，或者输入至射频电路804以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端800的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器801或射频电路804的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路807还可以包括耳机插孔。

定位组件808用于定位终端800的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件808可以是基于美国的GPS(GlobalPositioning System，全球定位***)、中国的北斗***或俄罗斯的伽利略***的定位组件。

电源809用于为终端800中的各个组件进行供电。电源809可以是交流电、直流电、一次性电池或可充电电池。当电源809包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端800还包括有一个或多个传感器810。该一个或多个传感器810包括但不限于：加速度传感器811、陀螺仪传感器812、压力传感器813、指纹传感器814、光学传感器815以及接近传感器816。

加速度传感器811可以检测以终端800建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器811可以用于检测重力加速度在三个坐标轴上的分量。处理器801可以根据加速度传感器811采集的重力加速度信号，控制触摸显示屏805以横向视图或纵向视图进行用户界面的显示。加速度传感器811还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器812可以检测终端800的机体方向及转动角度，陀螺仪传感器812可以与加速度传感器811协同采集用户对终端800的3D动作。处理器801根据陀螺仪传感器812采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器813可以设置在终端800的侧边框和/或触摸显示屏805的下层。当压力传感器813设置在终端800的侧边框时，可以检测用户对终端800的握持信号，根据该握持信号进行左右手识别或快捷操作。当压力传感器813设置在触摸显示屏805的下层时，可以根据用户对触摸显示屏805的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器814用于采集用户的指纹，以根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器801授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器814可以被设置终端800的正面、背面或侧面。当终端800上设置有物理按键或厂商Logo时，指纹传感器814可以与物理按键或厂商Logo集成在一起。

光学传感器815用于采集环境光强度。在一个实施例中，处理器801可以根据光学传感器815采集的环境光强度，控制触摸显示屏805的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏805的显示亮度；当环境光强度较低时，调低触摸显示屏805的显示亮度。在另一个实施例中，处理器801还可以根据光学传感器815采集的环境光强度，动态调整摄像头组件806的拍摄参数。

接近传感器816，也称距离传感器，通常设置在终端800的正面。接近传感器816用于采集用户与终端800的正面之间的距离。在一个实施例中，当接近传感器816检测到用户与终端800的正面之间的距离逐渐变小时，由处理器801控制触摸显示屏805从亮屏状态切换为息屏状态；当接近传感器816检测到用户与终端800的正面之间的距离逐渐变大时，由处理器801控制触摸显示屏805从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图8中示出的结构并不构成对终端800的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

本申请实施例中，终端根据页面的设计图像可以识别设计图像中包括的页面元素，并确定每个页面元素的位置信息，根据每个页面元素的位置信息生成页面元素的定位式布局代码，进而生成页面的页面代码。这样，根据用户输入的页面的设计图像，终端即可自动生成对应的定位式布局代码，进而生成页面代码，使得技术人员编写的代码量大大减少，节省了花费的人力以及时间。

在示例性实施例中，还提供了一种计算机可读存储介质，存储介质中存储有至少一条指令，至少一条指令由处理器加载并执行以实现上述实施例中的生成页面代码的方法。例如，所述计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

图9是本申请实施例提供的一种计算机设备的结构示意图，该计算机设备可以是上述实施例中的终端。该计算机设备900可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)901和一个或一个以上的存储器902，其中，所述存储器902中存储有至少一条指令，所述至少一条指令由所述处理器901加载并执行以实现上述生成页面代码。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的较佳实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (9)

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

获取页面的设计图像；

识别所述设计图像中包括的页面元素，确定每个所述页面元素的位置信息；以及

基于所述位置信息，生成所述页面的定位式布局代码；

在所述定位式布局代码中***至少一个页面元素的内容数据，得到***内容数据后的定位式布局代码；

接收用户输入的至少一个页面元素的功能执行代码；

基于***内容数据后的定位式布局代码和所述至少一个页面元素的功能执行代码，生成所述页面的页面代码。

2.根据权利要求1所述的方法，其特征在于，所述确定每个所述页面元素的位置信息的步骤，包括：

确定每个所述页面元素的最小外接矩形，确定所述最小外接矩形的位置信息以作为每个所述页面元素的所述位置信息。

3.根据权利要求1所述的方法，其特征在于，所述基于所述位置信息，生成所述页面的定位式布局代码的步骤，包括：

获取预先存储的用于显示所述页面元素的显示代码模板；

分别将每个所述页面元素的位置信息，写入所述显示代码模板中，得到每个所述页面元素的显示代码；

根据所述每个所述页面元素的显示代码，生成所述页面的不包含内容数据的定位式布局代码。

4.根据权利要求3所述的方法，其特征在于，所述在所述定位式布局代码中***至少一个页面元素的内容数据，得到***内容数据后的定位式布局代码，包括：

接收用户输入的至少一个页面元素的内容数据；

将所述至少一个页面元素的内容数据，***到所述定位式布局代码中所述至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码。

5.根据权利要求3所述的方法，其特征在于，所述在所述定位式布局代码中***至少一个页面元素的内容数据，得到***内容数据后的定位式布局代码，包括：

获取在所述设计图像中检测到的至少一个页面元素的内容数据；

将所述至少一个页面元素的内容数据，***到所述定位式布局代码中所述至少一个页面元素的显示代码中，得到***内容数据后的定位式布局代码。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

当接收到所述页面代码的执行指令时，执行所述页面代码，显示所述页面。

7.一种生成页面代码的装置，其特征在于，所述装置包括：

获取模块，用于获取页面的设计图像；

确定模块，用于识别所述设计图像中包括的页面元素，确定每个所述页面元素的位置信息；

生成模块，用于基于所述位置信息，生成所述页面的定位式布局代码；在所述定位式布局代码中***至少一个页面元素的内容数据，得到***内容数据后的定位式布局代码；接收用户输入的至少一个页面元素的功能执行代码；基于***内容数据后的定位式布局代码和所述至少一个页面元素的功能执行代码，生成所述页面的页面代码。

8.一种终端，其特征在于，所述终端包括处理器和存储器，所述存储器中存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如权利要求1至6任一所述的生成页面代码的方法。

9.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令，所述至少一条指令由处理器加载并执行以实现如权利要求1至6任一所述的生成页面代码的方法。

Images