CN110096275B

CN110096275B - 一种页面处理方法及装置

Info

Publication number: CN110096275B
Application number: CN201810087861.6A
Authority: CN
Inventors: 董家力; 辛华
Original assignee: Alibaba Health Information Technology Ltd
Current assignee: Alibaba Health Information Technology Ltd
Priority date: 2018-01-30
Filing date: 2018-01-30
Publication date: 2023-06-23
Anticipated expiration: 2038-01-30
Also published as: CN110096275A

Abstract

本申请实施例公开了一种页面处理方法及装置。所述方法包括：获取页面布局视图中的控件，以及所述控件的位置信息、属性信息；根据所述属性信息识别出所述控件的类型，并从预设控件代码库中获取所述类型的控件封装代码；根据所述属性信息对所述控件封装代码进行更新；根据所述位置信息以及更新后的控件封装代码对进行页面布局。利用本申请方法或装置实施例，可以快速地实现控件代码的开发工作，避免开发人员的重复开发工作，降低页面开发成本，提升开发效率。

Description

一种页面处理方法及装置

技术领域

本申请涉及软件开发技术领域，特别涉及一种页面处理方法及装置。

背景技术

在应用开发过程中，开发人员需要对应用的界面进行布局。一般的页面布局流程如下所述：应用界面设计师根据应用的业务需求设计应用界面的视觉图稿，该视觉图稿往往布局合理，能够给用户提供较好的视觉体验和操作体验。设计师在完成视觉图稿之后，将视觉图稿提交给开发人员。开发人员在接收到视觉图稿之后，主要任务是将该视觉图稿转换成开发代码，以便于用户在打开应用时，复原视觉图稿中的界面布局。

在最初阶段，开发人员的转换方式主要是人工获取视觉图稿中各个元素的属性信息，如文字的字体、颜色、大小、位置，图片的大小、位置等，再根据各个元素的属性信息编写相应的开发代码。上述方式不仅费时费力，还存在一个弊端：当客户端设备显示屏的尺寸变化时，应用界面设计师需要重新设计视觉图稿，且开发人员需要重新开发代码，导致开发成本较高。后来，提出了页面自动布局的方式，该方式可以利用约束和参照的方法对应用界面进行布局，使得页面布局可以随着屏幕尺寸的变化而变化，解决了最初阶段由于显示屏尺寸不同需要重新对应用界面进行布局的问题。

但是上述方式中，依然需要人工获取视觉图稿中各个元素的属性信息，开发成本依然很高。因此，现有技术中亟需一种高效、开发成本低的页面布局的方法。

发明内容

本申请实施例的目的在于提供一种页面处理方法及装置，可以快速地实现控件代码的开发工作，避免开发人员的重复开发工作，降低页面开发成本，提升开发效率。

本申请实施例提供的一种页面处理方法及装置具体是这样实现的：

一种页面处理方法，所述方法包括：

获取页面布局视图中的控件，以及所述控件的位置信息、属性信息；

根据所述属性信息识别出所述控件的类型，并从预设控件代码库中获取所述类型的控件封装代码；

根据所述属性信息对所述控件封装代码进行更新；

根据所述位置信息以及更新后的控件封装代码对进行页面布局。

一种页面处理装置，包括处理器以及用于存储处理器可执行指令的存储器，所述处理器执行所述指令时实现：

根据所述属性信息对所述控件封装代码进行更新；

一种计算机可读存储介质，其上存储有计算机指令，所述指令被执行时实现以下步骤：

根据所述属性信息对所述控件封装代码进行更新；

本申请提供的页面处理方法及装置，可以从已有的代码库中获取与页面布局视图中的控件相匹配的控件代码，所述处理方法可以将所述控件的属性信息代入至所述控件代码中。相对于现有技术中需要人工提取控件属性信息、重复设计开发代码的方式相比，本申请提供的页面处理方法及装置可以快速地实现控件代码的开发工作，避免开发人员的重复开发工作，降低页面开发成本，提升开发效率。另外，所述处理方法及装置还可以将控件代码转换成与目标开发平台相适配的开发代码，因此，本申请的页面处理方法及装置可以适配于多种开发平台，为多种开发平台提供快速、便捷的页面处理方式。

附图说明

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

图1是本申请提供的页面处理方法的一种应用场景的方法流程图；

图2是本申请提供的页面处理方法的一种应用场景的效果示意图；

图3是本申请提供的页面处理方法的一种实施例的方法流程图；

图4是本申请提供的获取控件属性信息方法的一种实施例的方法流程图；

图5是本申请提供的获取控件封装代码方法的一种实施例的方法流程图；

图6是本申请提供的控件代码处理方法的一种实施例的方法流程图；

图7是本申请提供的控件布局装置的一种实施例的模块结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

由上文可知，现有技术中进页面布局的方式需要人工获取视觉图稿中各个元素的属性信息，且需要根据所述属性信息进行代码开发，开发成本较高。基于类似于上文所述的实际技术需求，本申请提供的页面处理方式，可以重复利用预设控件代码库中已有的控件封装代码，快速生成页面中控件的代码，不仅可以大幅度提升开发效率，还可以降低页面开发成本。

下面结合附图1通过一个具体的应用场景具体说明本申请页面处理方法的实现方式。

如图1所示，某公司正面临一个项目，开发人员需要将视觉设计师设计的页面布局视图转换成应用于苹果公司iOS中的开发代码。所述页面布局视图例如可以包括PSD格式的文件。如图1所示的流程图，在获取到所述页面布局视图之后，可以对所述页面布局视图进行图层解析。在进行图层解析的过程中，可以获取所述页面布局视图中的控件以及各个控件在所述页面布局视图中的位置。由于页面布局视图中包含多个图层，可以逐个图层进行解析，并获取在控件所在位置处的属性信息。然后，可以根据控件在各个图层上的属性信息，确定该控件的类型。由于不同的控件类型具有不同的属性信息，例如，属性信息中既包含文本信息又包含图像信息的是按钮控件，属性信息中只包含文本信息的是标签信息，其他类型的控件的确定方式与此类似，在此不再赘述。基于此，在获取到控件的类型之后，可以从预设代码控件库中获取与所述类型相匹配的控件封装代码。在获取到所述控件封装代码之后，可以将所述控件各个属性所对应的属性值更新至所述控件封装代码。例如，对于按钮控件，所述控件封装代码中可以设置有字体、字号、字体颜色、字体是否加粗、字体是否倾斜、图像尺寸、背景色、透明度、阴影等多个预设属性的代码。然后，可以从所述按钮控件的属性信息中分别提取出与所述预设属性相匹配的属性值，例如，字体＝微软雅黑，字号＝小四，字体颜色＝蓝，字体是否加粗＝否，字体是否倾斜＝否，图像尺寸＝12*12，背景色＝粉色，透明度＝65％，阴影＝无阴影。当然，所述预设属性不限于上述举例，本申请在此不做限制。

当然，所述页面布局视图中不仅包括控件，还可以包括背景图片、文本等非交互性的其他元素。因此，在图层解析的过程中，还可以获取到多个其他元素的属性信息。基于此，还可以设置有预设样式代码库、预设位置代码库等。其中，所述样式可以包括所述页面布局视图的颜色、背景色、阴影、圆角、透明度等属性。所述位置可以包括所述页面布局视图中其他非交互性的文本信息、图片信息相对于预设参考点的坐标等。同样地，从预设样式代码库、预设位置代码库中获取到样式封装代码、位置封装代码之后，可以根据所述其他元素的属性信息，更新所述样式封装代码和所述位置封装代码。

在对所述控件封装代码、所述样式封装代码和所述位置封装代码进行更新之后，还可以将更新后的代码转换成与iOS开发语言相匹配的开发代码。例如目前iOS的开发语言为面向C的开发语言，因此，可以将更新后的代码转换成面向C的开发代码。这样，基于所述开发代码，可以在客户端的用户界面上展示所述页面布局视图。图2是将页面布局视图转换成用户界面的效果图，如图2所示，首先将页面布局视图转换成开发代码，再根据所述开发代码进行页面布局，生成用户界面。

下面结合附图3对本申请所述的页面处理方法进行详细的说明。图3是本申请提供的页面处理方法的一种实施例的方法流程图。虽然本申请提供了如下述实施例或附图所示的方法操作步骤，但基于常规或者无需创造性的劳动在所述方法中可以包括更多或者更少的操作步骤。在逻辑性上不存在必要因果关系的步骤中，这些步骤的执行顺序不限于本申请实施例提供的执行顺序。所述方法在实际中的页面处理过程中或者装置执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

具体的本申请提供的页面处理方法的一种实施例如图3所示，所述方法可以包括：

S301：获取页面布局视图中的控件，以及所述控件的位置信息、属性信息。

S303：根据所述属性信息识别出所述控件的类型，并从预设控件代码库中获取所述类型的控件封装代码。

S305：根据所述属性信息对所述控件封装代码进行更新。

S307：根据所述位置信息以及更新后的控件封装代码对进行页面布局。

本实施例中，所述页面布局视图可以包括应用界面设计师根据应用的业务需求设计的应用界面的视觉图稿。所述视觉图稿例如可以具有布局合理、给用户提供较好的视觉体验和操作体验的特征。在一些实施例中，所述页面布局视图的文件格式可以包括下述中的至少一种：Photoshop文档(PSD)、Sketch、Marketch、PDF。

其中，所述PSD格式为图像处理软件Photoshop的专用格式，PSD格式可以用于存储Photoshop应用中图层、通道、参考线、注解、颜色模式等多种信息。当应用界面复杂，需要较多图层时，应用界面设计师可以利用Photoshop进行视觉图稿的设计，生成的文档即为PSD格式。Sketch、Marketch都是基于矢量绘图的视图格式，其中，Marketch为Sketch应用的在线预览插件，可以实现文档导出、动态标注、单位转换、动态切图等多种功能。矢量绘图具有文件存储空间较小、可无极缩放的优点，当应用界面的复杂度较小时，可以利用Sketch、Marketch应用进行视觉图稿的设计。而PDF格式可以将文字、字型、格式、颜色及独立于设备和分辨率的图形、图像等信息封装于一个文件中。PDF格式文件还可以包含超文本链接、声音和动态影像等电子信息，支持存储空间较大的文件，集成度和安全可靠性都较高，且易于传输，通用性较强。当应用界面中包含的信息元素的类型比较丰富时，为了能够向开发人员准确表达应用界面的设计信息，应用界面设计师可以利用PDF进行视觉图稿的设计。

当然，在其他实施方式中，所述页面布局视图的文件格式还可以包括其他多种格式，例如基于矢量绘图的CorelDraw、Adobe Illustrator等，本申请在此不做限制。

本实施例中的页面布局视图可以包括多个控件，且所述控件具有属性信息。在一些实施例中，所述控件的类型可以包括下述中的至少一种：按钮控件、图像控件、标签控件、文本框控件、输入框控件、选择器控件。

在实际应用中，用户界面中的控件往往用于提供与用户进行交互的窗口。由于不同类型的控件的交互方式不相同，因此，不同类型的控件具有不同的属性信息。例如，以按钮控件和标签控件举例说明，按钮控件可以具有文本属性和图像属性，其中，文本属性用于设置按钮控件的文本信息，图像属性则用于设置按钮控件的图像，如所述按钮控件的背景、边框等图像信息。而标签控件可以用于描述其他控件的文本信息，因此标签控件可以只具有文本属性。类似地，图像控件可以只具有图像属性等。

当然，本实施例中获取的所述控件的属性信息不仅可以包括文本属性、图像属性等属性，还可以包括各个控件的位置信息、样式信息等属性信息，所述样式信息例如可以包括字体、字号、文字颜色、图片尺寸、图片颜色、边框粗细、边框颜色等信息。

图4是本申请提供的获取控件属性信息方法的一种实施例的方法流程图，如图4所示，所述获取页面布局视图中控件的属性信息可以包括：

S401：确定控件在页面布局视图中的位置。

S403：获取所述页面布局视图在所述位置处的至少一个图层。

S405：分别对所述至少一个图层进行解析，得到所述图层在所述位置处的属性信息。

本实施例中，可以首先确定页面布局视图中控件所在的位置。所述页面布局视图中不仅可以包括交互性的控件，还可以包括非交互性的其他元素，例如非交互的文本、图片等信息。因此，为了获取所述控件的属性信息，可以预先确定所述控件在所述页面布局视图中的位置。在一个实施例中，所述页面布局视图中可以标注所述控件的位置，因此，可以根据所述页面布局视图的标注信息获取所述控件的位置。在其他实施例中，还可以利用视图解析的方式获取所述控件在所述页面布局视图中的位置，本申请在此不做限制。

在确定所述控件在页面布局视图中的位置之后，可以获取所述位置处的属性信息。具体地，可以遍历所述页面布局视图在所述位置处的至少一个图层，并分别对所述至少一个图层进行解析，得到所述图层在所述位置处的属性信息。例如，对于按钮控件，可以包括文本属性和图像属性，那么，在页面布局视图中，所述按钮控件所在的位置处可以包括展示文本信息的图层以及展示图像信息的图层。本实施例中，可以分别解析所述图层，获取所述图层在所述位置处的属性信息。具体的解析方式例如可以包括：首先识别所述图层在所述位置处的属性类型，所述属性类型例如可以包括文字、图像、边框等。在确定所述属性类型之后，可以读取所述属性类型所对应的属性值，例如，文字的属性值可以包括字体、字号、颜色、是否加粗、是否倾斜等，图像的属性值可以包括尺寸、背景色、透明度、阴影等。需要说明的是，所述控件的属性信息还可以包括其他多种获取方式，本申请在此不做限制。

本实施例中，在获取所述控件的属性信息之后，可以从预设控件代码库中获取与所述控件的属性信息相匹配的控件封装代码。所述预设控件代码库中可以包括多种类型的控件封装代码，例如所述预设控件代码库中可以包括按钮控件封装代码、图像控件封装代码、标签控件封装代码等。由上述可知，不同类型的控件具有不同的属性信息，由于所述按钮控件具有文本属性和图像属性，因此，按钮控件开发代码中可以包括文本信息所对应的封装代码和图像信息所对应的封装代码。

在本申请的一个实施例中，可以根据所述属性信息确定所述控件的类型，并从预设控件代码库中获取与所述控件的类型相匹配的控件封装代码。本实施例中，可以首先根据所述属性信息确定所述控件的类型。具体可以依据控件之间的区别特征确定所述控件的类型，例如，按钮控件与标签控件的区别在于所述按钮控件具有文本属性和图像属性，而标签控件只具有文本属性。本实施例中，根据所述属性信息可以确定所述控件所包含的信息类型，例如是否包含文本信息、图像信息等，例如属性信息中既包含文本信息又包含图像信息的是按钮控件，属性信息中只包含文本信息的是标签信息，其他类型的控件的确定方式与此类似，在此不再赘述。在确定所述控件的类型之后，可以从预设控件代码库中获取与所述空间的类型相匹配的控件封装代码。

本实施例中，在获取到所述控件的控件封装代码之后，还可以根据所述属性信息对所述控件封装代码进行更新。图5是本申请提供的控件封装代码处理方法的一种实施例的方法流程图，如图5所示，所述根据所述属性信息对所述控件封装代码进行更新可以包括：

S501：将所述属性信息代入至所述控件封装代码中；

S503：将代入所述属性信息之后的控件封装代码转换成与目标开发平台的开发语言相匹配的开发代码。

本实施例中，可以将所述属性信息代入至所述控件封装代码中，例如所述控件封装代码中已经设置有预设属性对应的代码信息。本实施例中，可以从所述属性信息中提取出与所述预设属性相匹配的属性值，再将所述属性值代入至所述控件封装代码中。例如，对于按钮控件，所述预设控件代码库中可以设置有字体、字号、字体颜色、字体是否加粗、字体是否倾斜、图像尺寸、背景色、透明度、阴影等预设属性的代码。然后，可以从所述按钮控件的属性信息中分别提取出与所述预设属性相匹配的属性值，例如，字体＝雅黑，字号＝小四，字体颜色＝蓝，字体是否加粗＝否，字体是否倾斜＝否，图像尺寸＝12*12，背景色＝粉色，透明度＝65％，无阴影。

在将所述属性信息代入至所述控件封装代码中之后，还可以将代入属性信息之后的控件封装代码转换成与目标开发平台的开发语言相匹配的开发代码。

本实施例中，还可以将所述控件代码适配至多个开发平台上。而不同的开发平台具有不同的开发特征，例如不同的开发平台使用不同的开发语言，例如安卓系统采用JAVA语言、苹果系统采用面向C的开发语言，网页采用HTML等。本实施例中，将代入属性信息之后的控件代码转换成与目标开发平台的开发语言相匹配的开发代码，以提升所述控件代码的适配性。

在本申请的一个实施例中，还提供一种控件布局的方法，图6是本申请提供的控件布局方法的一种实施例的方法流程图，如图5所示，所述将所述属性信息代入至所述控件代码中可以包括：

S601：基于所述控件的位置信息设置所述控件相对于预设参考对象的相对位置信息；

S603：将所述相对位置信息代入至所述控件封装代码中。

本实施例中，可以对所述控件进行位置的布局，具体地，可以从所述控件的属性信息中提取出所述控件的位置信息，所述位置信息可以包括所述控件相对于页面布局视图中参考点(如坐标原点)的绝对坐标信息。本实施例中，可以基于所述位置信息设置所述控件相对于预设参考对象的相对位置信息。所述预设参考对象可以包括所述页面布局视图中的其他控件，所述相对位置信息例如可以包括所述控件与所述预设参考对象之间的线性变化规则等。在获取所述相对位置信息之后，可以将所述相对位置信息代入至所述控件代码中。

通过上述这种控件布局的方式，可以在所述控件与所述预设参考对象之间建立精确的相对位置，可以随着平台的变化、客户端设备尺寸的变化，依然保持控件的布局的合理性。

在本申请的一个实施例中，在生成与目标开发平台相匹配的开发代码之后，所述方法还可以包括：

SS1：获取所述页面布局视图中其他元素的属性信息；

SS2：将所述其他元素的属性信息代入至所述开发代码中。

本实施例中，还可以获取所述页面布局视图中其他元素的属性信息，所述属性信息例如可以包括所述页面布局视图的样式，位置等信息。例如所述样式可以包括所述页面布局视图的颜色、背景色、阴影、圆角、透明度等信息。所述位置可以包括所述页面布局视图中其他非交互性的文本信息、图片信息相对于预设参考点的坐标信息等。然后，可以将所述其他元素的属性信息以代码的形式代入至所述开发代码中，这样，所述开发平台中不仅可以包括所述控件的代码信息，还可以包括所述页面布局视图中其他元素的开发代码，将所述页面布局视图的完整信息融合至所述开发代码中。

需要说明的是，所述页面布局视图中不仅可以包括所述控件的样式信息，还可以包括所述控件的方法信息。所述方法信息例如可以包括点击所述控件可以产生的事件等。本实施例中，可以将所述控件的方法信息以标注的形式设置于所述页面布局视图中，在对所述控件代码进行处理的过程中，可以读取所述控件的方法信息，并将所述方法信息代入至所述开发代码中。

本申请提供的页面处理方法，可以从已有的代码库中获取与页面布局视图中的控件相匹配的控件代码，所述处理方法可以将所述控件的属性信息代入至所述控件代码中。相对于现有技术中需要人工提取控件属性信息、重复设计开发代码的方式相比，本申请提供的页面处理方法可以快速地实现控件代码的开发工作，避免开发人员的重复开发工作，降低页面开发成本，提升开发效率。另外，所述处理方法还可以将控件代码转换成与目标开发平台相适配的开发代码，因此，本申请的页面处理方法可以适配于多种开发平台，为多种开发平台提供快速、便捷的页面处理方式。

本申请另一方面还提供一种页面处理装置，图7是本申请提供的页面处理装置的一种实施例的模块结构示意图，如图7所示，所述装置包括处理器以及用于存储处理器可执行指令的存储器，所述处理器执行所述指令时实现：

根据所述属性信息对所述控件封装代码进行更新；

可选的，在本申请的一个实施例中，所述处理器在实现步骤获取页面布局视图中的控件，以及所述控件的位置信息、属性信息时可以包括：

确定控件在页面布局视图中的位置；

获取所述页面布局视图在所述位置处的至少一个图层；

分别对所述至少一个图层进行解析，得到所述图层在所述位置处的属性信息。

可选的，在本申请的一个实施例中，所述控件的类型包括下述中的至少一种：按钮控件、图像控件、标签控件、文本框控件、输入框控件、选择器控件。

可选的，在本申请的一个实施例中，所述处理器在实现步骤根据所述属性信息对所述控件封装代码进行更新时可以包括：

将所述属性信息代入至所述控件封装代码中；

将代入所述属性信息之后的控件封装代码转换成与目标开发平台的开发语言相匹配的开发代码。

可选的，在本申请的一个实施例中，所述处理器在实现步骤将所述属性信息代入至所述控件封装代码中时可以包括：

基于所述控件的位置信息设置所述控件相对于预设参考对象的相对位置信息；

将所述相对位置信息代入至所述控件封装代码中。

可选的，在本申请的一个实施例中，所述处理器在实现步骤生成与目标开发平台相匹配的开发代码之后，还可以包括：

获取所述页面布局视图中其他元素的属性信息；

将所述其他元素的属性信息代入至所述开发代码中。

可选的，在本申请的一个实施例中，所述页面布局视图的文件格式可以包括下述中的至少一种：

Photoshop文档(PSD)、Sketch、Marketch、PDF。

本申请另一方面还提供一种计算机可读存储介质，其上存储有计算机指令，所述指令被执行时可以实现以下步骤：

根据所述属性信息对所述控件封装代码进行更新；

所述计算机可读存储介质可以包括用于存储信息的物理装置，通常是将信息数字化后再以利用电、磁或者光学等方式的媒体加以存储。本实施例所述的计算机可读存储介质有可以包括：利用电能方式存储信息的装置如，各式存储器，如RAM、ROM等；利用磁能方式存储信息的装置如，硬盘、软盘、磁带、磁芯存储器、磁泡存储器、U盘；利用光学方式存储信息的装置如，CD或DVD。当然，还有其他方式的可读存储介质，例如量子存储器、石墨烯存储器等等。

尽管本申请内容中提到实施例中的对控件代码处理、获取控件属性信息、解析图层等之类的数据设置、处理描述，但是，本申请并不局限于必须是完全符合行业编程语言设计标准或实施例所描述的数据展示、处理的情况。某些页面设计语言或实施例描述的基础上略加修改后的实施方案也可以实行上述实施例相同、等同或相近、或变形后可预料的实施效果。当然，即使不采用上数据处理、判断的方式，只要符合本申请上述各实施例的对控件代码处理、获取控件属性信息、解析图层方式，仍然可以实现相同的申请，在此不再赘述。

虽然本申请提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的手段可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或客户端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

上述实施例阐明的单元、装置，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本申请时可以把各模块的功能在同一个或多个软件和/或硬件中实现。当然，本申请中所述的某一单元模块也可以将实现同一功能的模块由多个子模块或子模块的组合实现。

本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内部包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构、类等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，移动终端，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例采用递进的方式描述，各个实施例之间相同或相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

虽然通过实施例描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。

Claims

1.一种页面处理方法，其特征在于，所述方法包括：

处理器自动获取页面布局视图中的控件，以及所述控件的位置信息、属性信息；其中，所述页面布局视图包括应用界面的视觉图稿；

根据所述属性信息对所述控件封装代码进行更新；

2.根据权利要求1所述的方法，其特征在于，所述获取页面布局视图中的控件，以及所述控件的位置信息、属性信息包括：

确定控件在页面布局视图中的位置；

获取所述页面布局视图在所述位置处的至少一个图层；

3.根据权利要求1所述的方法，其特征在于，所述控件的类型包括下述中的至少一种：按钮控件、图像控件、标签控件、文本框控件、输入框控件、选择器控件。

4.根据权利要求1所述的方法，其特征在于，所述根据所述属性信息对所述控件封装代码进行更新包括：

将所述属性信息代入至所述控件封装代码中；

5.根据权利要求4所述的方法，其特征在于，所述将所述属性信息代入至所述控件封装代码中包括：

将所述相对位置信息代入至所述控件封装代码中。

6.根据权利要求4所述的方法，其特征在于，在生成与目标开发平台相匹配的开发代码之后，所述方法还包括：

获取所述页面布局视图中其他元素的属性信息；

将所述其他元素的属性信息代入至所述开发代码中。

7.根据权利要求1所述的方法，其特征在于，所述页面布局视图的文件格式包括下述中的至少一种：

Photoshop文档(PSD)、Sketch、Marketch、PDF。

8.一种页面处理装置，其特征在于，包括处理器以及用于存储处理器可执行指令的存储器，所述处理器执行所述指令时实现：

自动获取页面布局视图中的控件，以及所述控件的位置信息、属性信息；其中，所述页面布局视图包括应用界面的视觉图稿；

根据所述属性信息对所述控件封装代码进行更新；

9.根据权利要求8所述的装置，其特征在于，所述处理器在实现步骤获取页面布局视图中的控件，以及所述控件的位置信息、属性信息时包括：

确定控件在页面布局视图中的位置；

获取所述页面布局视图在所述位置处的至少一个图层；

10.根据权利要求8所述的装置，其特征在于，所述控件的类型包括下述中的至少一种：按钮控件、图像控件、标签控件、文本框控件、输入框控件、选择器控件。

11.根据权利要求8所述的装置，其特征在于，所述处理器在实现步骤根据所述属性信息对所述控件封装代码进行更新时包括：

将所述属性信息代入至所述控件封装代码中；

12.根据权利要求11所述的装置，其特征在于，所述处理器在实现步骤将所述属性信息代入至所述控件封装代码中时包括：

将所述相对位置信息代入至所述控件封装代码中。

13.根据权利要求11所述的装置，其特征在于，所述处理器在实现步骤生成与目标开发平台相匹配的开发代码之后，还包括：

获取所述页面布局视图中其他元素的属性信息；

将所述其他元素的属性信息代入至所述开发代码中。

14.根据权利要求8所述的装置，其特征在于，所述页面布局视图的文件格式包括下述中的至少一种：

Photoshop文档(PSD)、Sketch、Marketch、PDF。

15.一种计算机可读存储介质，其上存储有计算机指令，其特征在于，所述指令被执行时实现以下步骤：

根据所述属性信息对所述控件封装代码进行更新；