CN115145563A - 一种应用界面开发方法及装置 - Google Patents

Abstract

一种应用界面开发方法及装置，用以提高应用界面的开发效率。其中方法包括：第一电子设备向第二电子设备发送待显示的应用界面的代码，待显示的应用界面的代码包括N个代码段，N为大于1的正整数，每个代码段对应根视图或至少一个控件；当确定需要对应用界面进行代码调试时，以i的取值依次为1至N中的整数，重复执行以下步骤：向第二电子设备发送指令，该指令用于指示第二电子设备执行代码中的第i个代码段，接收第二电子设备发送的第一图像数据，并显示该第一图像数据，如此，在第一电子设备上展示出第二电子设备执行到每个代码段时对应的渲染结果，便于开发者在渲染结果不符合预期时定位出问题出现在哪个代码段，从而提高应用界面的开发效率。

Description

一种应用界面开发方法及装置

技术领域

本申请涉及终端技术领域，尤其涉及一种应用界面开发方法及装置。

背景技术

鸿蒙系统(HarmonyOS)是华为开发的一款“面向未来”的操作系统，一款面向全场景(例如移动办公、运动健康、社交通信、媒体娱乐等场景)的分布式操作系统。在传统的单设备系统能力的基础上，鸿蒙系统创造性地提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持手机、平板、电视、智能汽车、可穿戴设备等多种终端设备。由于多终端形态的分布式理念的提出，需要适配多个智能终端设备的智能生态应用也与日俱增，与不同智能终端相对应的应用界面开发需求大大增加，应用界面开发效率将对整个应用的开发效率有较大影响。

当前的应用开发技术仅支持在智能终端设备上展示界面开发之后的最终界面效果，例如，安卓(android)应用程序的界面开发过程中，在布局监视器(layout inspector)窗口中展示应用界面中各个控件与图层之间的从属关系，例如，图层1包括控件1，图层2包括控件2和控件3，以及展示应用界面最终呈现的显示效果，当应用界面最终呈现的显示效果不符合预期，需要定位其中的问题而进行代码调试时，需重新修改代码并等待重新执行完应用界面的所有代码，然后展示应用界面最终呈现的显示效果，这个过程非常耗时，应用界面开发效率低。

发明内容

本申请提供一种应用界面开发方法及装置，用以提高应用界面的开发效率。

第一方面，本申请提供一种应用界面开发方法，该方法由第一电子设备执行，该方法包括：第一电子设备向第二电子设备发送待显示的应用界面的代码，该待显示的应用界面的代码包括N个代码段，N为大于1的正整数，每个代码段对应根视图或至少一个控件；当第一电子设备确定需要对应用界面进行代码调试时，以i的取值依次为1至N中的整数，重复执行以下步骤：向第二电子设备发送指示信息，该指示信息用于指示第二电子设备执行代码中的第i个代码段，然后，接收第二电子设备发送的第一图像数据，并显示该第一图像数据，其中，当i等于1时，该第一图像数据为第二电子设备执行第1个代码段时，对第1个代码段对应的根视图进行渲染生成的，当i大于1时，该第一图像数据为第二电子设备执行第i个代码段时，对第1个代码段至第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染生成的。

通过该方法，第一电子设备在需要对待显示的应用界面进行代码调试时，指示第二电子设备执行该应用界面的代码，并且在第一电子设备上展示出第二电子设备执行到每个代码段时对应的渲染结果，从而可以使得开发者可以清晰的看到应用界面上的各个控件的渲染先后顺序，而不用像现有技术中需要等待整个应用界面的代码全部执行完才展示出渲染结果，这样便于开发者在渲染结果不符合预期时定位出问题出现在哪个代码段，从而提高应用界面的开发效率。

在一种可能的设计中，该待显示的应用界面的代码还可以包括N个断点，N个断点与N个代码段一一对应。

通过该设计，通过开发者在应用界面的代码中设置断点，可以使得第二电子设备在执行应用界面的代码的过程中，执行至每个断点时，停止执行断点之后的代码段，从而第一电子设备可以在第二电子设备执行到每个断点时，展示该断点之前的代码段的渲染效果。

在一种可能的设计中，当i等于1时，第1个代码段包括创建根视图的指令；第一电子设备显示第一图像数据，具体可以包括：显示根图层，该根图层包括根视图。

通过该设计，在第二电子设备执行创建根视图的指令后，开发者可以清晰的看到第一电子设备上展示的根视图的渲染结果。

在一种可能的设计中，当i等于j，j为大于1、且小于N的正整数时，第j个代码段包括创建第一控件的指令；第一电子设备显示第一图像数据，具体可以包括：显示游离图层，游离图层包括第一控件。

通过该设计，在第二电子设备执行创建第一控件的指令后，开发者可以清晰的看到第一电子设备上展示的创建第一控件之后的游离图层的渲染结果。

在一种可能的设计中，当i等于j+k，k为大于1、且小于N的正整数，j+k为大于1、且小于N的正整数时，第j+k个代码段包括将第一控件挂载至根视图的指令；第一电子设备显示第一图像数据，具体可以包括：从游离图层切换为显示根图层，根图层包括根视图、以及位于根视图上层的第一控件。

通过该设计，在第二电子设备执行将第一控件挂载至根视图的指令后，开发者可以清晰的看到第一电子设备上展示的从游离图层向根图层切换的过程、以及将第一控件挂载至根视图之后的根图层的渲染效果、以及控件与根视图之间的覆盖叠加关系。

在一种可能的设计中，当i等于j+m，m为大于k、且小于N的正整数，j+m为小于N的正整数时，第j+m个代码段包括将第二控件挂载至第一控件的指令；第一电子设备显示第一图像数据，具体可以包括：显示根图层，根图层还包括位于第一控件上层的第二控件。

通过该设计，在第二电子设备执行将第二控件挂载至第一控件的指令后，开发者可以清晰的看到第一电子设备上展示的将第二控件挂载至第一控件之后的根图层的渲染效果、以及第一控件与第二控件之间的覆盖叠加关系。

在一种可能的设计中，当i等于j+n，n为大于k、且小于N的正整数，j+n为小于N的正整数，第j+n代码段包括将第三控件挂载至第一控件的指令；第一电子设备显示第一图像数据，具体可以包括：显示游离图层，游离图层还包括位于第一控件上层的第三控件。

通过该设计，在第二电子设备执行将第三控件挂载至第一控件的指令后，开发者可以清晰的看到第一电子设备上展示的将第三控件挂载至第一控件之后的根图层的渲染效果、以及第一控件与第三控件之间的覆盖叠加关系。

第二方面，本申请提供一种应用界面开发方法，该方法由第二电子设备执行，该方法包括：第二电子设备接收第一电子设备发送的待显示的应用界面的代码，该应用界面的代码包括N个代码段，N为大于1的正整数，每个代码段对应根视图或至少一个控件；第二电子设备接收第一电子设备发送的指示信息，该指示信息用于指示第二电子设备执行代码中的第i个代码段，i为小于或等于N的正整数；当i等于1时，第二电子设备执行第1个代码段，对第1个代码段对应的根视图进行渲染，生成第二图像数据，或者，当i为大于1、且小于或等于N的整数时，第二电子设备执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据；然后，第二电子设备向第一电子设备发送第一图像数据，该第一图像数据包括第二图像数据或第三图像数据。

通过该方法，第二电子设备可以根据第一电子设备发送的指示信息执行应用界面的代码，并向第一电子设备发送执行到每个代码段时对应的渲染结果，以便在第一电子设备上展示出第二电子设备执行到每个代码段时对应的图像数据，从而可以使得开发者可以在第一电子设备上清晰的看到应用界面上的各个控件的渲染先后顺序，而不用像现有技术中需要等待整个应用界面的代码全部执行完才展示出渲染结果，这样便于开发者在渲染结果不符合预期时定位出问题出现在哪个代码段，从而提高应用界面的开发效率。

在一种可能的设计中，代码还包括N个断点，N个断点与N个代码段一一对应；该方法还可以包括：当第二电子设备执行至每个断点时，停止执行断点之后的代码段。

通过该设计，第二电子设备执行到每个断点时，可以通过第一电子设备向开发者展示该断点之前的代码段的渲染效果。

在一种可能的设计中，当i等于1时，第1个代码段包括创建根视图的指令。第二电子设备执行第1个代码段，并对第1个代码段对应的根视图进行渲染，生成第二图像数据，可以包括：在根图层上创建根视图，渲染根图层，得到第二图像数据。

通过该设计，第二电子设备可以在执行创建根视图的指令后，可以通过第一电子设备向开发者展示的根视图的渲染结果。

在一种可能的设计中，当所述i等于j，所述j为大于1、且小于所述N的正整数时，所述第j个代码段包括创建第一控件的指令。第二电子设备执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的控件进行渲染，生成第三图像数据，可以包括：在游离图层上创建第一控件，然后，渲染游离图层，得到第三图像数据。

通过该设计，第二电子设备可以在执行创建第一控件的指令后，可以通过第一电子设备向开发者展示的第一控件的渲染结果。

在一种可能的设计中，当所述i等于j+k，所述k为大于1、且小于所述N的正整数，所述j+k为大于1、且小于所述N的正整数时，第j+k个代码段包括将所述第一控件挂载至根视图的指令。第二电子设备执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据，可以包括：从游离图层中移除第一控件，并将第一控件添加至根图层中的根视图的上层，然后，渲染根图层，得到第三图像数据。

通过该设计，第二电子设备可以在执行将第一控件挂载至根视图的指令后，可以通过第一电子设备向开发者展示的将第一控件挂载至根视图的渲染结果、以及控件与根视图之间的覆盖叠加关系。

在一种可能的设计中，当所述i等于j+m，所述m为大于k、且小于所述N的正整数，所述j+m为小于所述N的正整数时，第j+m个代码段包括将第二控件挂载至所述第一控件的指令。第二电子设备执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据，可以包括：从游离图层中移除第二控件，并将第二控件添加至根图层中的第一控件的上层，然后，渲染根图层，得到第三图像数据。

通过该设计，第二电子设备可以在执行将第二控件挂载至第一控件的指令后，可以通过第一电子设备向开发者展示的将第二控件挂载至根图层上的第一控件的渲染结果、以及根图层上的第一控件与第二控件之间的覆盖叠加关系。

在一种可能的设计中，当所述i等于j+n，所述n为大于k、且小于所述N的正整数，所述j+n为小于所述N的正整数，第j+n个代码段包括将第三控件挂载至所述第一控件的指令。第二电子设备执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的控件进行渲染，生成第三图像数据，可以包括：将游离图层中的第三控件添加至游离图层中的第一控件的上层，然后，渲染游离图层，得到第三图像数据。

通过该设计，第二电子设备可以在执行将第三控件挂载至第一控件的指令后，可以通过第一电子设备向开发者展示的将第二控件挂载至游离图层上的第一控件的渲染结果、以及游离图层上的第一控件与第二控件之间的覆盖叠加关系。

第三方面，本申请提供一种电子设备，该电子设备包括处理器、存储器、以及显示屏；所述显示屏，用于显示图像数据；所述存储器用于存储一个或多个计算机程序，当所述计算机程序被所述处理器执行时，使得所述电子设备执行上述第一方面及其第一方面任一可能设计的技术方案，或者，执行上述第二方面及其第二方面任一可能设计的技术方案。

第四方面，本申请实施例还提供了一种电子设备，所述电子设备包括执行上述第一方面或者第一方面的任意一种可能的设计的方法的模块/单元，或者，执行上述第二方面或者第二方面的任意一种可能的设计的方法的模块/单元；这些模块/单元可以通过硬件实现，也可以通过硬件执行相应的软件实现。

第五方面，本申请实施例还提供一种芯片，所述芯片与电子设备中的存储器耦合，用于调用存储器中存储的计算机程序并执行本申请实施例第一方面及其第一方面任一可能设计的技术方案，或者，执行本申请实施例第二方面及其第二方面任一可能设计的技术方案；本申请实施例中“耦合”是指两个部件彼此直接或间接地结合。

第六方面，本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行本申请实施例第一方面及其第一方面任一可能设计的技术方案，或者，执行本申请实施例第二方面及其第二方面任一可能设计的技术方案。

第七方面，本申请实施例还提供一种程序产品，当所述程序产品在电子设备上运行时，使得所述电子设备执行本申请实施例第一方面及其第一方面任一可能设计的技术方案，或者，执行本申请实施例第二方面及其第二方面任一可能设计的技术方案。

附图说明

图1为本申请实施例提供的一种系统架构示意图；

图2为本申请实施例提供的一种电子设备的结构示意图；

图3为本申请实施例提供的一种应用界面开发方法的流程示意图；

图4为本申请实施例提供的待显示的应用界面的代码的示例；

图5为本申请实施例提供的控件树的示意图之一；

图6为本申请实施例提供的渲染过程示意图之一；

图7为本申请实施例提供的预览界面示意图之一；

图8为本申请实施例提供的渲染过程示意图之二；

图9为本申请实施例提供的预览界面示意图之二；

图10为本申请实施例提供的渲染过程示意图之三；

图11为本申请实施例提供的渲染过程示意图之四；

图12为本申请实施例提供的渲染过程示意图之五；

图13为本申请实施例提供的预览界面示意图之三；

图14为本申请实施例提供的控件树的示意图之二。

具体实施方式

首先，对本申请实施例涉及的部分用语进行解释说明，以便于本领域技术人员理解。

(1)电子设备：可以安装各类应用程序，并且能够将已安装的应用程序中提供的对象进行显示的设备。示例性地，该电子设备可以包含能够实现数据处理功能的器件(比如处理器或图像处理器或其他处理器)，以及能够显示用户界面的器件(比如显示屏)。该电子设备可以是移动的，也可以是固定的。例如，电子设备可以为智能手机、平板电脑、各类可穿戴设备、车载设备、个人数字助理(personal digital assistant，PDA)、个人计算机(personal computer，PC)或其它能够实现上述功能的电子设备等。

(2)用户界面，是电子设备的显示屏上显示的图形用户界面(graphical userinterface，GUI)，包括但不限于主界面(也可称为桌面)，负一屏显示界面、各个应用程序(application，APP)的显示界面。

(3)应用程序(application，APP)：可以简称为应用，为能够完成某项或多项特定功能的计算机程序，它可以具有可视的显示界面，能与用户进行交互，比如设置、微信等。

(4)断点是在程序代码中某一行设置的一个点，在调试时，程序运行到断点所在行就会停住，然后可以一步一步往下调试。

(5)“至少一个”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A,B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指的这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a,b,或c中的至少一项(个)，可以表示：a,b,c,a-b,a-c,b-c,或a-b-c，其中a,b,c可以是单个，也可以是多个。

以及，除非有特别说明，本申请实施例提及“第一”、“第二”等序数词是用于对多个对象进行区分，不用于限定多个对象的顺序、时序、优先级或者重要程度。例如，第一应用和第二应用，只是为了区分不同的应用，而并不是表示这两种应用的内容、优先级、发送顺序或者重要程度等的不同。

目前，对于鸿蒙系统全场景智慧生态应用开发来说，应用界面的开发效率至关重要，但是如前述背景技术中所述，当前的应用开发技术仅支持在智能终端设备上展示界面开发之后的最终界面效果，即只能展示出应用界面对应的图层，无法清晰准确的展示出应用界面中各控件的渲染过程，当应用界面最终呈现的显示效果不符合预期，需要定位其中的问题而进行代码调试时，需重新修改代码并等待重新执行一次完整的应用界面的代码，然后展示应用界面最终呈现的显示效果，这个过程非常耗时，应用界面开发效率低。

鉴于此，本申请提供一种应用界面开发方法，将应用界面中各控件的渲染过程与代码调试过程结合起来，具体来说，第一电子设备在需要对待显示的应用界面进行代码调试时，指示第二电子设备执行该应用界面的代码，并且在第一电子设备上展示出第二电子设备执行到每个代码段时对应的渲染结果，使得开发者能清晰的看到应用界面上的各个控件的渲染先后顺序，便于开发者在渲染结果不符合预期时定位出问题出现在哪个代码段，进而可以在修改相应的代码段之后，执行修改后的代码段，然后在第一电子设备上展示修改后的代码段对应的渲染结果，从而提高应用界面的开发效率。

图1示例性示出了本申请实施例提供的系统架构示意图。

如图1所示，该系统架构包括应用集成开发环境(integrated developmentenvironment，IDE)与鸿蒙系统预览引擎(HarmonyOS previewer engine)，IDE旨在为开发者开发HarmonyOS分布式应用提供一体化开发平台。

IDE包括调试客户端(debugger)，其中调试客户端包括协议处理模块(protocolhandler)，用于处理调试适配协议(debug adapter protocol，DAP)相关的功能。在具体实施中，IDE启动调试客户端后，调试客户端可以通过DAP与调试服务端(debug server)连接，调试客户端可以通过该连接向调试服务端发送待显示的应用界面的代码。

HarmonyOS previewer engine包括调试服务端(debug server)，该调试服务端用于在接收到指示信息时，根据指示信息执行待显示的应用界面的代码，并同步创建控件树，代码中每个控件对应控件树中的一个节点，并将控件树中的节点(例如，根视图(rootview)、控件等)渲染出来。

在调试状态时，显示结果分为根(root)图层和游离图层，其中root图层表示控件添加到root view的图层，游离图层表示控件尚未添加到root view的图层。每次创建控件都将控件渲染出来，并添加到游离图层。当某一控件添加到root节点以及root的子节点时，将该控件从游离图层中删除，并添加到root图层。

当一个节点被创建出来，例如该节点为root view，该root view在root图层中显示，又例如，该节点为控件，那么该控件先在游离图层中显示，当调试服务端执行到包括将该控件加载到root view的指令的代码段时，则将该控件从游离图层中移除，并挂载到root图层中进行显示。调试服务端将渲染界面(包括root图层或游离图层)通过图像管道传输到IDE中。

IDE还包括预览界面(previewer)，在IDE接收到渲染界面对应的图像数据后，通过预览界面进行显示图像数据，从而让开发者能清晰的看到控件渲染加载的整个过程。

需要说明的是，本申请实施例中的第一电子设备和第二电子设备可以为同一个电子设备，也可以为不同的电子设备，本申请对此不作限定。当第一电子设备和第二电子设备为同一个电子设备时，分布式应用开发平台均设于同一个第一电子设备；当第一电子设备和第二电子设备为不同的电子设备时，分布式应用开发平台设于第一电子设备中，鸿蒙系统预览引擎设于第二电子设备中。以下实施例中以第一电子设备与第二电子设备为不同的电子设备为例进行说明。

下面结合附图，进一步说明第一电子设备与第二电子设备的硬件结构。

电子设备100的硬件结构示意图可以参见图2所示，图2仅示出了本申请实施例提供的一种电子设备的硬件结构示意图，在图2所示的基础上，还可以有其他变型结构方式存在。

如图2所示，电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块151，无线通信模块152，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。

其中，处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。在本申请实施例中，处理器110可以运行应用界面开发方法所对应的软件代码/模块，执行相应的流程，具体的流程将在后文介绍。

显示屏194用于显示电子设备100接收到其它设备发送的图像数据，例如，当电子设备100为上述第一电子设备时，电子设备100可以接收第二电子设备发送的第一图像数据，并显示第一图像数据。

显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystaldisplay，LCD)，有机发光二极管(organic light-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emitting diode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot light emitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。

内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如设置、微信)等。存储数据区可存储电子设备100使用过程中所创建的数据等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。

传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。

电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块151，无线通信模块152，调制解调处理器以及基带处理器等实现。

天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。

移动通信模块151可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块151可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块151可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块151还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块151的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块151的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。

无线通信模块152，可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块152可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块152经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块152还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。

电子设备100还可以包括外设接口，用于为外部的输入/输出设备(例如键盘、鼠标、外接显示器、外部存储器、用户识别模块卡等)提供各种接口。例如通过通用串行总线(USB)接口130与鼠标连接，通过用户识别模块卡的卡槽上的金属触点与运营商提供的SIM卡连接。外设接口可以被用来将上述外部的输入/输出外围设备耦接到处理器110和内部存储器121。

电子设备100还可以包括给各个部件供电的充电管理模块140(比如电池142和电源管理模块141)，电池142可以通过电源管理模块141与处理器110逻辑相连，从而通过充电管理模块140实现管理充电、放电、以及功耗管理等功能。

另外，电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。电子设备100可以接收按键190输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。电子设备100可以利用马达191产生振动提示(比如来电振动提示)。电子设备100中的指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。电子设备100中的SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。

可以理解的是，本发明实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

结合上述实施例及附图，本申请实施例提供一种应用界面开发方法，该方法可以在具有图2所示的硬件结构的电子设备100中实现。如图3所示，该方法包括以下步骤：

步骤301，第一电子设备向第二电子设备发送待显示的应用界面的代码。相应的，第二电子设备接收第一电子设备发送的待显示的应用界面的代码。

其中，该待显示的应用界面的代码可以包括N个代码段，N为大于1的正整数，每个代码段对应根视图或至少一个控件。

应理解，一个代码段可以包括一行代码，也可以包括多行代码，本申请对此不作限定。

步骤302，当第一电子设备确定需要对应用界面进行调试时，以i的取值依次为1至N中的整数，重复执行以下过程：具体参见步骤303、步骤306、以及步骤307。

步骤303，向第二电子设备发送指示信息，该指示信息用于指示第二电子设备执行代码中的第i个代码段，i为小于或等于N的正整数。

相应的，第二电子设备接收第一电子设备发送的指示信息。

示例性的，该指示信息可以包括代码段标识，也可以包括其它可以唯一标识每个代码段的信息，此处不作限制。

示例性的，以N等于3为例进行说明，i依次取值1、2和3，重复执行步骤303、步骤306、以及步骤307。具体来说，当i取值为1时，第一电子设备依次执行：向第二电子设备发送指示信息，该指示信息用于指示第二电子设备执行代码中的第1个代码段，接收第二电子设备发送的第一图像数据，显示第一图像数据；该第一图像数据为第二电子设备执行第1个代码段时，对第1个代码段对应的根视图进行渲染生成的；当i取值为2时，第一电子设备依次执行：向第二电子设备发送指示信息，该指示信息用于指示第二电子设备执行代码中的第2个代码段，接收第二电子设备发送的第一图像数据，显示第一图像数据；该第一图像数据为第二电子设备执行第2个代码段时，对第1个代码段和第2个代码段中的至少一个代码段对应的根视图和/或控件进行渲染生成的；当i取值为3时，第一电子设备依次执行：向第二电子设备发送指示信息，该指示信息用于指示第二电子设备执行代码中的第3个代码段，接收第二电子设备发送的第一图像数据，显示第一图像数据；该第一图像数据为第二电子设备执行第3个代码段时，对第1个代码段至第3个代码段中的至少一个代码段对应的根视图和/或控件进行渲染生成的。

步骤304，当i等于1时，第二电子设备根据指示信息执行第1个代码段，对第1个代码段对应的根视图进行渲染，生成第二图像数据；或者，当i为大于1、且小于或等于N的整数时，第二电子设备根据指示信息执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据。

此处，第二电子设备根据指示信息执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，可以理解为：第二电子设备对第i个代码段对应的控件，以及在第i个代码段之前已执行的、且与第i个代码段包括的指令相关的根视图和/或控件进行渲染。

本申请实施例中，每个代码段包括一个或多个指令，以下实施例以包括一个指令为例。例如，第i个代码段包括创建一个控件1的指令，那么在第i个代码段之前已执行的、且与第i个代码段包括的指令相关的根视图和/或控件具体可以理解为：在游离图层上已经创建、且并未移除的控件。

又例如，第i个代码段包括将新创建的一个控件1挂载至根视图上，根视图位于root图层上，那么，在第i个代码段之前已执行的、且与第i个代码段包括的指令相关的根视图和/或控件具体可以理解为：root图层中的根视图以及控件。

再例如，第i个代码段包括将新创建的一个控件1挂载至root图层中的控件2上，那么，在第i个代码段之前已执行的、且与第i个代码段包括的指令相关的根视图和/或控件具体可以理解为：root图层中的根视图以及控件。

再例如，第i个代码段包括将新创建的一个控件1挂载至游离图层中的控件3上，那么，在第i个代码段之前已执行的、且与第i个代码段包括的指令相关的根视图和/或控件具体可以理解为：游离图层中的各种控件，其中的各种控件至少包括控件1、控件3，若游离图层还包括其它控件，那么此处的各种控件还包括其它控件。

本申请实施例中，上述步骤304可以有多种可能的实施方式。当i等于1时，具体可参见下述实施方式A1，当i为大于1、且小于或等于N的整数时，具体可参见下述可能的实施方式A2至实施方式A5。

实施方式A1，当i等于1时，第1个代码段包括创建根视图的指令。第二电子设备执行第1个代码段，并对第1个代码段对应的根视图进行渲染，生成第二图像数据，具体可以通过以下方式实现：在root图层上创建根视图，渲染root图层，得到第二图像数据。

实施方式A2，当i等于j，j为大于1、且小于N的正整数时，第j个代码段包括创建第一控件的指令。第二电子设备执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据，具体可以通过以下方式实现：在游离图层上创建第一控件，然后，渲染游离图层，得到第三图像数据。

下面提供几个示例进行详细说明。

示例a1，以j等于2、第一控件为按钮(button)1为例，即i等于2，第2个代码段包括创建button 1的指令。第二电子设备接收到用于指示执行第2个代码段的指示信息后，执行第2个代码段，并对第2个代码段对应的控件进行渲染，具体来说，即在游离图层上创建button 1，并对包括button 1的游离图层进行渲染，得到第三图像数据。

示例a2，以j等于3，第一控件为按钮(button)1为例，即第3个代码段包括创建button1的指令。假设第2个代码段包括创建Frame Layout的指令，第二电子设备在接收到用于指示执行第3个代码段的指示信息之前，已经执行完第2个代码段，并在游离图层上创建了控件：Frame Layout，第二电子设备在接收到用于指示执行第3个代码段的指示信息后，执行第3个代码段，并在包括控件Frame Layout的游离图层上创建控件：button 1，在创建控件button 1之后，并对包括控件Frame Layout和控件button 1的游离图层进行渲染，得到第三图像数据。

需要说明的是，本申请实施例中创建控件的指令的执行结果为：在游离图层上创建控件。在游离图层上的控件，可以挂载到根视图或其它控件。其中挂载到根视图上具体可以为：挂载到root图层中的根视图上，具体参见下述实施方式A3；挂载到其它控件上具体可以包括两种情况：一种情况为挂载到root图层中的控件上，具体参见下述实施方式A4；另一种情况为挂载到游离图层中的控件上，具体参见下述实施方式A5。

实施方式A3，基于实施方式A2，当i等于j+k，k为大于1、且小于N的正整数，j+k为大于1、且小于N的正整数，第j+k个代码段包括将第一控件挂载至根视图的指令。第二电子设备执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据，具体可以通过以下方式实现：从游离图层中移除第一控件，并将第一控件添加至root图层中的根视图的上层，渲染root图层，得到第三图像数据。

示例a3，以j等于2、k等于2为例，即第4个代码段包括将第一控件挂载至根视图的指令。沿用上述示例a1，即第一控件为按钮(button)1，游离图层包括button 1。在第二电子设备接收到用于指示执行第4个代码段的指示信息后，执行第4个代码段，并对第4个代码段对应的控件和第1个代码段对应的根视图进行渲染，生成第三图像数据。具体来说，从游离图层中移除第一控件button 1，并将该第一控件button 1添加至root图层中的根视图的上层，并渲染包括第一控件button 1和根视图、且第一控件button 1位于根视图的上层的root图层，从而得到第三图像数据。

实施方式A4，基于实施方式A3，当i等于j+m，m为大于k、且小于N的正整数，j+m为小于N的正整数，第j+m个代码段包括将第二控件挂载至第一控件的指令。第二电子设备执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据，具体可以通过以下方式实现：从游离图层中移除第二控件，并将第二控件添加至root图层中的第一控件的上层，然后，渲染root图层，得到第三图像数据。

示例a4，以j等于2、m等于3为例，即第5个代码段包括将第二控件挂载至第一控件的指令。沿用上述示例a1，即游离图层包括第一控件button 1。以游离图层包括第二控件button 2为例，在第二电子设备接收到用于指示执行第5个代码段的指示信息后，执行第5个代码段，并对第5个代码段对应的控件、以及第2个代码段对应的控件进行渲染，生成第三图像数据。具体来说，从游离图层中移除button 2，并将button 2添加至root图层中的button 1的上层，然后渲染包括button 1和button 2、且button 2位于button 1上层的root图层，得到第三图像数据。

实施方式A5，基于实施方式A2，当i等于j+n，n为大于k、且小于N的正整数，j+n为小于N的正整数，第j+n个代码段包括将第三控件挂载至第一控件的指令。第二电子设备执行第i个代码段，并对第1个代码段至第i个代码段中的至少一个代码段对应的控件进行渲染，生成第三图像数据，具体可以通过以下方式实现：将游离图层中的第三控件添加至游离图层中的第一控件的上层，然后，渲染游离图层，得到第三图像数据。

示例a5，以j等于2、n等于4为例，即第6个代码段包括将第三控件挂载至第一控件的指令。沿用上述示例a1，即游离图层包括第一控件button 1。以游离图层包括第三控件button 3为例，在第二电子设备接收到用于指示执行第6个代码段的指示信息后，执行第6个代码段，并对第6个代码段对应的控件、以及第2个代码段对应的控件进行渲染，生成第三图像数据。具体来说，将游离图层中的button 3添加至游离图层中的button 1的上层，然后渲染包括button 1和button 3、且button 3位于button 1上层的游离图层，得到第三图像数据。

步骤305，第二电子设备向第一电子设备发送第一图像数据，该第一图像数据包括第二图像数据或第三图像数据。

步骤306，第一电子设备接收第二电子设备发送的第一图像数据，其中，当i等于1时，第一图像数据为上述第二图像数据，当i大于1时，该第一图像数据为上述第三图像数据。

步骤307，第一电子设备显示第一图像数据。

本申请实施例中，上述步骤307的方式有多种可能的实施方式，下面通过下述可能的实施方式B1至实施方式B5来进行具体的描述。

实施方式B1，基于上述实施方式A1，第一电子设备显示第一图像数据，具体可以包括：显示root图层，该root图层包括根视图。如此，在第二电子设备执行创建根视图的指令后，开发者可以清晰的看到第一电子设备上展示的根视图的渲染结果。

实施方式B2，基于上述实施方式A2，当i等于j，j为大于1、且小于N的正整数时，第j个代码段包括创建第一控件的指令。第一电子设备显示第一图像数据，具体可以包括：显示游离图层，游离图层包括第一控件。如此，在第二电子设备执行创建第一控件的指令后，开发者可以清晰的看到第一电子设备上展示的创建第一控件之后的游离图层的渲染结果。

实施方式B3，基于上述实施方式A3，当i等于j+k，k为大于1、且小于N的正整数，j+k为大于1、且小于N的正整数时，第j+k个代码段包括将第一控件挂载至根视图的指令。

第一电子设备显示第一图像数据，具体可以包括：从游离图层切换为显示root图层，root图层包括根视图、以及位于根视图上层的第一控件。如此，在第二电子设备执行将第一控件挂载至根视图的指令后，开发者可以清晰的看到第一电子设备上展示的从游离图层向root图层切换的过程、以及将第一控件挂载至根视图之后的root图层的渲染效果、以及控件与根视图之间的覆盖叠加关系。

实施方式B4，基于上述实施方式A4，当i等于j+m，m为大于k、且小于N的正整数，j+m为小于N的正整数时，第j+m个代码段包括将第二控件挂载至第一控件的指令；第一电子设备显示第一图像数据，具体可以包括：显示root图层，root图层还包括位于第一控件上层的第二控件。如此，在第二电子设备执行将第二控件挂载至第一控件的指令后，开发者可以清晰的看到第一电子设备上展示的将第二控件挂载至第一控件之后的root图层的渲染效果、以及第一控件与第二控件之间的覆盖叠加关系。

实施方式B5，基于上述实施方式A5，当i等于j+n，n为大于k、且小于N的正整数，j+n为小于N的正整数，第j+n代码段包括将第三控件挂载至第一控件的指令；第一电子设备显示第一图像数据，具体可以包括：显示游离图层，游离图层还包括位于第一控件上层的第三控件。如此，在第二电子设备执行将第三控件挂载至第一控件的指令后，开发者可以清晰的看到第一电子设备上展示的将第三控件挂载至第一控件之后的root图层的渲染效果、以及第一控件与第三控件之间的覆盖叠加关系。

本申请实施例中，在需要调试待显示的应用界面的代码时，可以通过第一电子设备指示第二电子设备执行该应用界面的代码，并且在第一电子设备上展示出第二电子设备执行到每个代码段时对应的渲染结果，从而可以使得开发者可以清晰的看到应用界面上的各个控件的渲染先后顺序，而不用像现有技术中需要等待整个应用界面的代码全部执行完才展示出渲染结果，这样便于开发者在渲染结果不符合预期时定位出问题出现在哪个代码段，从而提高应用界面的开发效率。

在一种可能的实施方式中，上述步骤301中，待显示的应用界面的代码还可以包括N个断点，N个断点与N个代码段一一对应。当第二电子设备执行至每个断点处时，停止执行断点之后的代码段。

示例的，断点可以设置在每个代码段的起始位置，这样第二电子设备在执行代码的过程中，执行到每个断点时，停止执行断点之后的代码段，例如，第1个代码段的起始位置设置了断点，那么第二电子设备在接收到指示信息后，停止执行于该断点处，在接收到下一个指示信息后，再继续执行断点之后的代码直到执行至下一个断点处停止。

通过该实施方式，开发者在应用界面的代码中设置断点，可以使得第二电子设备在执行应用界面的代码的过程中，执行至每个断点时，可以向通过第一电子设备向开发者展示该断点之前的代码段的渲染效果。

本申请实施例中，第二电子设备在执行待显示的应用界面的代码可以有多种实施方式。

一种可能的实施方式中，按照单步执行方式，即第二电子设备接收到一个指示信息，开始执行一个代码段，在该代码段执行完就停止执行后续的代码段，等待第一电子设备发送下一个指示信息，当第二电子设备接收到下一个指示信息，继续执行下一段代码。

另一种可能的实施方式中，按照断点执行方式，即第二电子设备接收到一个指示信息，开始执行代码段，直到执行至一个断点处，停止执行后续代码，等待第一电子设备发送下一个指示信息，当第二电子设备接收到下一个指示信息，继续执行代码直到执行至下一个断点处。

在具体实施中，可以通过在第一电子设备上设置不同的按钮，以便开发者通过点击不同的按钮实现指示第二电子设备按照单步执行方式或按照断点执行方式执行代码。在第二电子设备执行代码的过程中，也可以更换执行方式，可以在第一电子设备上触发更换执行方式。

以下提供一个具体的示例，说明上述两种实施方式的区别。

示例性的，以待显示的应用界面的代码包括10个代码段为例，一个代码段包括一行代码，其中，第3行代码的起始位置处打了断点，第6行代码的起始位置处打了断点，如果按照单步执行方式，第一电子设备发一次指示信息，第二电子设备执行完第1行代码，并在执行完第1行代码时停下，然后，第一电子设备再发一次指示信息，第二电子设备执行第2行代码，并在执行完第2行代码时停下，第一电子设备再发一次指示信息，第二电子设备执行第3行代码，并在执行完第3行代码时停下，依此类推，第一电子设备总共需要发送10次指示信息，第二电子设备每接收到一个指示信息，执行一行代码，并在这一行代码执行完后停下，直至第10行执行完。如果按照断点执行，第一电子设备发一次指示信息，第二电子设备从第1行开始执行，直至执行完第2行停下，第一电子设备再发一次指令，第二电子设备从第3行开始执行，直至执行完第5行停下，第一电子设备再发一次指令，第二电子设备从第6行开始执行，直至执行完第10行停下。

本申请实施例中，第二电子设备可以按照单步执行方式或按照断点执行方式执行代码，二者相比较而言，按照单步执行方式具有更优的效果，即向开发者展示每个代码段对应的控件的渲染效果，对于应用界面的开发效率更为显著。

在其它一些实施例中，上述第一图像数据还可以包括执行第i个代码段的时长以及在执行完第i个代码段后的渲染过程的时长，第一电子设备上还可以显示该执行第i个代码段的时长以及在执行完第i个代码段后的渲染过程的时长。这样开发者可以在第一电子设备上看到各个控件渲染所需的时间。如此，开发者可以感知不同控件的渲染速度。

为了更清楚的介绍本申请实施例提供的应用界面开发方法，以一个代码段包括一行代码为例，提供一个具体的应用界面开发示例。

图4为本申请实施例提供的待显示的应用界面的代码的示例。

首先，第一电子设备向第二电子设备发送如图4所示的待显示的应用界面的代码。第二电子设备以单步执行方式执行代码为例进行说明。

在第二电子设备在接收到如图4所示的待显示的应用界面的代码后，会接收多个指示信息，每接收一个指示信息，执行一行代码，并在执行代码的过程中创建控件树，每生成一个节点，将该节点渲染出来。然后，第二电子设备将渲染结果发送给第一电子设备，以便第一电子设备通过预览界面显示渲染结果，开发者可以清晰的看到各个控件的渲染过程。

下面针对第二电子设备执行每一行代码、以及渲染过程进行描述。

当第二电子设备执行第1行代码：create root view，创建如图5中控件树的根节点：根视图，并在根图层上创建根视图，得到如图6中(A)所示的根图层①，然后对如图6中(A)所示的根图层①进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示如图7中(A)所示的预览界面，如图7中(A)所示的预览界面显示的根图层包括根视图。

当第二电子设备执行第2行代码：create frame layout，创建如图5中控件树的叶子节点：框架布局，并在游离图层上创建框架布局，得到如图6中(B)所示的游离图层①，此时框架布局并未挂载，故框架布局作为游离图层，记录在游离图层列表(参见图6中(B)左侧)。然后第二电子设备对如图6中(B)所示的游离图层①进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示如图7中(B)所示的预览界面，如图7中(B)所示的预览界面显示的游离图层包括框架布局。

当第二电子设备执行第3行代码：add frame layout to root view，将叶子节点frame layout挂载到控件树上的根节点(即根视图)上，并将游离图层①上的框架布局移除，挂载到根图层①中的根视图上，得到如图6中(C)所示的根图层②，此时，游离图层①上无任何控件，游离图层列表中的框架布局也移除。然后第二电子设备对如图6中(C)所示的根图层②进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示如图7中(C)所示的预览界面，如图7中(C)所示的预览界面包括根视图、以及位于该根视图上层的框架布局。

当第二电子设备执行第4行代码：create button，创建如图5所示的叶子节点：button，并在游离图层上创建按钮(button)，得到如图8中(A)所示的游离图层①，此时框架布局并未挂载，故框架布局作为游离图层，记录在游离图层列表(参见图8中(A)左侧)。然后第二电子设备对如图8中(A)所示的游离图层①进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示图9中(A)所示的预览界面，图9中(A)所示的预览界面显示的游离图层中包括button。

应理解，当第二电子设备执行完第4行代码，所创建的控件树如图5中所示，由于按钮并未挂载到控件树上的根节点或叶子节点上，所以此时按钮为一个独立的节点。

当第二电子设备执行第5行代码：button.setbackground(yellow)，如图8中(B)所示，对游离图层①上按钮(button)填充背景，背景色为黄色(图8中以斜条纹示例填充为黄色)。然后第二电子设备对如图8中(B)所示的游离图层①进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示图9中(B)所示的预览界面，图9中(B)所示的预览界面显示的游离图层中包括填充了背景色(黄色)的button。

当第二电子设备执行第6行代码：create container，创建如图5所示的控件树的叶子节点(container)，并游离图层上创建容器(container)，得到如图8中(C)所示的游离图层②，此时container并未挂载，故container作为游离图层，记录在游离图层列表(参见图8中(C)左侧)。然后第二电子设备对如图8中(C)所示的游离图层①和游离图层②进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示图9中(C)所示的预览界面，图9中(C)所示的预览界面显示的游离图层中包括：填充了背景色(黄色)的button、以及container。

当第二电子设备执行第7行代码：add button to container，将叶子节点button挂载到控件树上的叶子节点(即container)上，并将游离图层①上的button挂载到游离图层②中的container上，得到如图8中(D)所示的游离图层②，然后第二电子设备对如图8中(D)所示的游离图层②进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示如图9中(D)所示的预览界面，图9中(D)所示的预览界面显示的游离图层中包括container、以及位于该container上层的填充了背景色(黄色)的button。

当第二电子设备执行第8行代码：create text，创建控件树的叶子节点(text)，并在游离图层上创建文本(text)，得到如图8中(E)所示的游离图层①，此时text并未挂载，故text作为游离图层，记录在游离图层列表(参见图8中(E)左侧)。然后第二电子设备对如图8中(E)所示的游离图层①和游离图层②进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示图9中(E)所示的预览界面，如9中(E)所示的预览界面显示的游离图层中包括text、container、以及位于该container上层的填充了背景色(黄色)的button。

当第二电子设备执行第9行代码：add text to frame layout，将叶子节点text挂载到控件树上的叶子节点(即frame layout)上，将如图8中(E)所示的游离图层①上的text移除，得到如图10中(A)所示的游离图层，并将从游离图层①移除的text挂载到如图6中(C)所示的根图层中的frame layout上，得到如图10中(B)所示的根图层③。然后第二电子设备对如图10中(B)所示的根图层③进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示如图13中(A)所示的预览界面，如图13中(A)所示的预览界面显示的根图层中包括frame layout、以及位于该frame layout上层的text。

当第二电子设备执行第10行代码：add container to frame layout，将叶子节点container挂载到控件树上的叶子节点(即frame layout)上，将如图10中(A)所示的游离图层②上的container移除，并将移除的container挂载到如图10中(B)所示的根图层③中的frame layout上，得到如图11所示的根图层④。然后第二电子设备对如图11所示的根图层④进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示如图13中(B)所示的预览界面，如图13中(B)所示的预览界面显示的根图层中包括frame layout、位于该frame layout上层的text、位于该frame layout上层的container、以及位于该container上层的填充了背景色(黄色)的button。

当第二电子设备执行第11行代码：create list view，创建控件树的叶子节点(list view)，并在游离图层上创建列表视图(list view)，得到如图12中(A)所示的游离图层①，此时list view并未挂载，故list view作为游离图层，记录在游离图层列表(参见图12中(A)左侧)。然后，第二电子设备对如图12中(A)所示的游离图层①进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示图13中(C)所示的预览界面，如图13中(C)所示的预览界面显示的游离图层中包括list view。

当第二电子设备执行第12行代码：add list view to container，将叶子节点list view挂载到控件树上的叶子节点(即container)上，将如图12中(A)所示的游离图层①上的list view移除，并将移除的list view挂载到如图11所示的根图层④中的container上，得到如图12中(B)所示的根图层⑤。然后，第二电子设备对如图12中(B)所示的根图层⑤进行渲染，并将渲染结果发送至第一电子设备，在第一电子设备上显示如图13中(D)所示的预览界面，如图13中(D)所示的预览界面显示的根图层中包括frame layout、位于该frame layout上层的text、位于该frame layout上层的container、位于该container上层的填充了背景色(黄色)的button、以及位于该container上层的list view。

当执行完所有代码，第二电子设备创建的所有控件都已合并到根图层中，无游离图层。此时，创建的控件树如图14所示。

在其它一些实施例中，在图4所示的应用界面的代码中，假设在create button设置有断点，若第二电子设备按照断点方式执行应用界面的代码，那么第二电子设备在接收到一个指示信息后，执行到create button停止执行，然后在接收到下一个指示信息后，继续执行create button，直到代码执行完。

本申请实施例中，以图4所示的应用界面的代码为例，如果其中存在某一个或多个代码段对应的渲染结果不符合预期，开发者可以对该一个或多个代码段进行修改，然后在第二电子设备执行修改后的代码段生成对应的渲染结果，然后可以在第一电子设备上显示渲染结果。例如，第二电子设备执行完第5行代码：button.setbackground(yellow)，并将对应的渲染结果发送至第一电子设备，开发者看到第一电子设备上显示的渲染结果不符合预期，可以在第一电子设备上对第5行代码进行修改，例如修改为：button.setbackground(blue)，然后，第一电子设备可以将修改后的第5行代码发送至第二电子设备，第二电子设备执行该修改后的第5行代码，并将对应的渲染结果发送至第一电子设备，以便在第一电子设备显示。

上述本申请提供的实施例中，从电子设备(第一电子设备、第二电子设备)作为执行主体的角度对本申请实施例提供的方法进行了介绍。为了实现上述本申请实施例提供的方法中的各功能，电子设备可以包括硬件结构和/或软件模块，以硬件结构、软件模块、或硬件结构加软件模块的形式来实现上述各功能。上述各功能中的某个功能以硬件结构、软件模块、还是硬件结构加软件模块的方式来执行，取决于技术方案的特定应用和设计约束条件。

以上实施例中所用，根据上下文，术语“当…时”或“当…后”可以被解释为意思是“如果…”或“在…后”或“响应于确定…”或“响应于检测到…”。类似地，根据上下文，短语“在确定…时”或“如果检测到(所陈述的条件或事件)”可以被解释为意思是“如果确定…”或“响应于确定…”或“在检测到(所陈述的条件或事件)时”或“响应于检测到(所陈述的条件或事件)”。另外，在上述实施例中，使用诸如第一、第二之类的关系术语来区份一个实体和另一个实体，而并不限制这些实体之间的任何实际的关系和顺序。

在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘(solid state disk，SSD))等。在不冲突的情况下，以上各实施例的方案都可以组合使用。

需要指出的是，本专利申请文件的一部分包含受著作权保护的内容。除了对专利局的专利文件或记录的专利文档内容制作副本以外，著作权人保留著作权。

Claims (29)

1.一种应用界面开发方法，其特征在于，包括：

第一电子设备向第二电子设备发送待显示的应用界面的代码，所述代码包括N个代码段，每个所述代码段对应根视图或至少一个控件，所述N为大于1的正整数；

当所述第一电子设备确定需要对所述应用界面进行代码调试时，以i的取值依次为1至所述N中的整数，重复执行以下过程：

向所述第二电子设备发送指示信息，所述指示信息用于指示所述第二电子设备执行所述代码中的第i个代码段，所述i为小于或等于N的正整数；

接收所述第二电子设备发送的第一图像数据，其中，当所述i等于1时，所述第一图像数据为所述第二电子设备执行第1个代码段时，对所述第1个代码段对应的根视图进行渲染生成的，当所述i大于1时，所述第一图像数据为所述第二电子设备执行所述第i个代码段时，对所述第1个代码段至所述第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染生成的；

显示所述第一图像数据。

2.如权利要求1所述的方法，其特征在于，所述代码还包括N个断点，所述N个断点与所述N个代码段一一对应。

3.如权利要求1或2所述的方法，其特征在于，当所述i等于1时，第1个代码段包括创建根视图的指令；

所述显示所述第一图像数据，包括：

显示根图层，所述根图层包括所述根视图。

4.如权利要求1或2所述的方法，其特征在于，当所述i等于j，所述j为大于1、且小于所述N的正整数时，所述第j个代码段包括创建第一控件的指令；

所述显示所述第一图像数据，包括：

显示游离图层，所述游离图层包括所述第一控件。

5.如权利要求4所述的方法，其特征在于，当所述i等于j+k，所述k为大于1、且小于所述N的正整数，所述j+k为大于1、且小于所述N的正整数时，第j+k个代码段包括将所述第一控件挂载至根视图的指令；

所述显示所述第一图像数据，包括：

从所述游离图层切换为显示根图层，所述根图层包括所述根视图、以及位于所述根视图上层的所述第一控件。

6.如权利要求5所述的方法，其特征在于，当所述i等于j+m，所述m为大于k、且小于所述N的正整数，所述j+m为小于所述N的正整数时，第j+m个代码段包括将第二控件挂载至所述第一控件的指令；

所述显示所述第一图像数据，包括：

显示所述根图层，所述根图层还包括位于所述第一控件上层的所述第二控件。

7.如权利要求4所述的方法，其特征在于，当所述i等于j+n，所述n为大于k、且小于所述N的正整数，所述j+n为小于所述N的正整数，第j+n代码段包括将第三控件挂载至所述第一控件的指令；

所述显示所述第一图像数据，包括：

显示游离图层，所述游离图层还包括位于所述第一控件上层的所述第三控件。

8.一种应用界面开发方法，其特征在于，包括：

第二电子设备接收第一电子设备发送的待显示的应用界面的代码，所述代码包括N个代码段，每个所述代码段对应根视图或至少一个控件，所述N为大于1的正整数；

所述第二电子设备接收所述第一电子设备发送的指示信息，所述指示信息用于指示所述第二电子设备执行所述代码中的第i个代码段，所述i为小于或等于N的正整数；

当所述i等于1时，所述第二电子设备执行所述第1个代码段，并对所述第1个代码段对应的根视图进行渲染，生成第二图像数据；或者，当所述i为大于1、且小于或等于N的整数时，所述第二电子设备执行所述第i个代码段，并对所述第1个代码段至所述第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据；

所述第二电子设备向所述第一电子设备发送第一图像数据，所述第一图像数据包括所述第二图像数据或所述第三图像数据。

9.如权利要求8所述的方法，其特征在于，所述代码还包括N个断点，所述N个断点与所述N个代码段一一对应；所述方法还包括：

当所述第二电子设备执行至每个所述断点时，停止执行所述断点之后的代码段。

10.如权利要求8或9所述的方法，其特征在于，当所述i等于1时，所述第1个代码段包括创建根视图的指令；

所述执行所述第1个代码段，并对所述第1个代码段对应的根视图进行渲染，生成第二图像数据，包括：

在根图层上创建所述根视图；

渲染所述根图层，得到所述第二图像数据。

11.如权利要求8或9所述的方法，其特征在于，当所述i等于j，所述j为大于1、且小于所述N的正整数时，所述第j个代码段包括创建第一控件的指令；

所述第二电子设备执行所述第i个代码段，并对所述第1个代码段至所述第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据，包括：

在游离图层上创建所述第一控件；

渲染所述游离图层，得到所述第三图像数据。

12.如权利要求11所述的方法，其特征在于，当所述i等于j+k，所述k为大于1、且小于所述N的正整数，所述j+k为大于1、且小于所述N的正整数时，第j+k个代码段包括将所述第一控件挂载至根视图的指令；

所述第二电子设备执行所述第i个代码段，并对所述第1个代码段至所述第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据，包括：

从所述游离图层中移除所述第一控件，并将所述第一控件添加至根图层中的根视图的上层；

渲染所述根图层，得到所述第三图像数据。

13.如权利要求12所述的方法，其特征在于，当所述i等于j+m，所述m为大于k、且小于所述N的正整数，所述j+m为小于所述N的正整数时，第j+m个代码段包括将第二控件挂载至所述第一控件的指令；

所述第二电子设备执行所述第i个代码段，并对所述第1个代码段至所述第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据，包括：

从所述游离图层中移除所述第二控件，并将所述第二控件添加至所述根图层中的第一控件的上层；

渲染所述根图层，得到所述第三图像数据。

14.如权利要求11所述的方法，其特征在于，当所述i等于j+n，所述n为大于k、且小于所述N的正整数，所述j+n为小于所述N的正整数，第j+n个代码段包括将第三控件挂载至所述第一控件的指令；

所述第二电子设备执行所述第i个代码段，并对所述第i个代码段至所述第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据，包括：

将所述游离图层中的所述第三控件添加至所述游离图层中的所述第一控件的上层；

渲染所述游离图层，得到所述第三图像数据。

15.一种电子设备，其特征在于，包括处理器、存储器、以及显示屏；

所述显示屏，用于显示图像数据；

所述存储器用于存储一个或多个计算机程序，当所述计算机程序被所述处理器执行时，使得所述电子设备执行：

向第二电子设备发送待显示的应用界面的代码，所述代码包括N个代码段，每个所述代码段对应根视图或至少一个控件，所述N为大于1的正整数；

当确定需要对所述应用界面进行代码调试时，以i的取值依次为1至所述N中的整数，重复执行以下步骤：

向所述第二电子设备发送指示信息，所述指示信息用于指示所述第二电子设备执行所述代码中的第i个代码段，所述i为小于或等于N的正整数；

接收所述第二电子设备发送的第一图像数据，其中，当所述i等于1时，所述第一图像数据为所述第二电子设备执行第1个代码段时，对所述第1个代码段对应的根视图进行渲染生成的，当所述i大于1时，所述第一图像数据为所述第二电子设备执行所述第i个代码段时，对所述第1个代码段至所述第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染生成的；

通过所述显示屏显示所述第一图像数据。

16.如权利要求15所述的电子设备，其特征在于，所述代码还包括N个断点，所述N个断点与所述N个代码段一一对应。

17.如权利要求15或16所述的电子设备，其特征在于，当所述i等于1时，第1个代码段包括创建根视图的指令；

当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

显示根图层，所述根图层包括所述根视图。

18.如权利要求15或16所述的电子设备，其特征在于，当所述i等于j，所述j为大于1、且小于所述N的正整数时，所述第j个代码段包括创建第一控件的指令；当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

显示游离图层，所述游离图层包括所述第一控件。

19.如权利要求18所述的电子设备，其特征在于，当所述i等于j+k，所述k为大于1、且小于所述N的正整数，所述j+k为大于1、且小于所述N的正整数时，第j+k个代码段包括将所述第一控件挂载至根视图的指令；当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

从所述游离图层切换为显示根图层，所述根图层包括所述根视图、以及位于所述根视图上层的所述第一控件。

20.如权利要求19所述的电子设备，其特征在于，当所述i等于j+m，所述m为大于k、且小于所述N的正整数，所述j+m为小于所述N的正整数时，第j+m个代码段包括将第二控件挂载至所述第一控件的指令；当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

显示所述根图层，所述根图层还包括位于所述第一控件上层的所述第二控件。

21.如权利要求18所述的电子设备，其特征在于，当所述i等于j+n，所述n为大于k、且小于所述N的正整数，所述j+n为小于所述N的正整数，第j+n代码段包括将第三控件挂载至所述第一控件的指令；当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

显示游离图层，所述游离图层还包括位于所述第一控件上层的所述第三控件。

22.一种应用界面开发电子设备，其特征在于，包括处理器和存储器：

所述存储器用于存储一个或多个计算机程序，当所述计算机程序被所述处理器执行时，使得所述电子设备执行：

接收第一电子设备发送的待显示的应用界面的代码，所述代码包括N个代码段，每个所述代码段对应根视图或至少一个控件，所述N为大于1的正整数；

接收所述第一电子设备发送的指示信息，所述指示信息用于指示所述第二电子设备执行所述代码中的第i个代码段，所述i为小于或等于N的正整数；

当所述i等于1时，执行所述第1个代码段，并对所述第1个代码段对应的根视图进行渲染，生成第二图像数据；或者，当所述i为大于1、且小于或等于N的整数时，执行所述第i个代码段，并对所述第1个代码段至所述第i个代码段中的至少一个代码段对应的根视图和/或控件进行渲染，生成第三图像数据；

向所述第一电子设备发送第一图像数据，所述第一图像数据包括所述第二图像数据或所述第三图像数据。

23.如权利要求22所述的电子设备，其特征在于，所述代码还包括N个断点，所述N个断点与所述N个代码段一一对应；

当所述计算机程序被所述处理器执行时，使得所述电子设备还执行：

当执行至每个所述断点时，停止执行所述断点之后的代码段。

24.如权利要求22或23所述的电子设备，其特征在于，当所述i等于1时，所述第1个代码段包括创建根视图的指令；

当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

在根图层上创建所述根视图；

渲染所述根图层，得到所述第二图像数据。

25.如权利要求22或23所述的电子设备，其特征在于，当所述i等于j，所述j为大于1、且小于所述N的正整数时，所述第j个代码段包括创建第一控件的指令；

当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

在游离图层上创建所述第一控件；

渲染所述游离图层，得到所述第三图像数据。

26.如权利要求25所述的电子设备，其特征在于，当所述i等于j+k，所述k为大于1、且小于所述N的正整数，所述j+k为大于1、且小于所述N的正整数时，第j+k个代码段包括将所述第一控件挂载至根视图的指令；

当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

从所述游离图层中移除所述第一控件，并将所述第一控件添加至根图层中的根视图的上层；

渲染所述根图层，得到所述第三图像数据。

27.如权利要求26所述的电子设备，其特征在于，当所述i等于j+m，所述m为大于k、且小于所述N的正整数，所述j+m为小于所述N的正整数时，第j+m个代码段包括将第二控件挂载至所述第一控件的指令；

当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

从所述游离图层中移除所述第二控件，并将所述第二控件添加至所述根图层中的第一控件的上层；

渲染所述根图层，得到所述第三图像数据。

28.如权利要求25所述的电子设备，其特征在于，当所述i等于j+n，所述n为大于k、且小于所述N的正整数，所述j+n为小于所述N的正整数，第j+n个代码段包括将第三控件挂载至所述第一控件的指令；当所述计算机程序被所述处理器执行时，使得所述电子设备具体执行：

将所述游离图层中的所述第三控件添加至所述游离图层中的所述第一控件的上层；

渲染所述游离图层，得到所述第三图像数据。

29.一种计算机可读存储介质，其特征在于，包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行如权利要求1-7中任一项所述的方法，或者，执行如权利要求8-14中任一项所述的方法。

Images