组件预览的方法和电子设备与流程

本技术实施例涉及电子设备领域，并且更加具体地，涉及一种组件预览的方法和电子设备。

背景技术：

1、当前应用开发者在开发不同电子设备的应用的用户界面(user interface，ui)时，需要连接不同实体的电子设备(例如，手机、平板电脑、电视、汽车或智能手表等)。在需要同时调测多个电子设备的ui时，开发者需要连接多个不同的电子设备。这会使得开发成本增加，开发效率较低。

2、个人电脑(personal computer，pc)预览是一种将页面渲染内容显示于pc窗口的技术。该技术不需要在调测多个电子设备的ui时，连接多个实体的电子设备。开发者通过pc预览技术可以快速构建多个电子设备的应用ui界面。这能够提升鸿蒙应用开发的体验，可以吸引更多的鸿蒙应用开发者，更进一步拓展鸿蒙应用的生态。

3、当前pc预览主要分为两类：页面预览和组件预览。页面预览是指预览整个页面上的所有组件，页面可以包括一个或者多个组件。组件预览是指单独预览页面上的组件。开发者可以通过页面预览实时查看所设计的整体ui效果，但页面中的有些组件属性会对页面的其他组件的布局产生较大影响。当开发者在页面中配置指定组件的属性时，有时无法看到组件预期的ui效果。这将对开发者的调测工作带来困扰，使得应用开发的效率较低，当前的页面预览无法满足开发者调测应用的需求。

4、因此，如何获得一种高效的组件预览的方法，以满足开发者调测应用的需求，是目前亟待解决的问题。

技术实现思路

1、本技术实施例提供一种组件预览的方法，该方法可以提高预览组件的效率。

2、第一方面，提供了一种组件预览的方法，该方法应用于电子设备，包括：根据代码文件确定第一预览组件，该代码文件包括多个组件，该第一预览组件为该多个组件中的一个；根据该第一预览组件确定第一绘制图层，该第一绘制图层包括第一绘制指令；根据该第一绘制指令确定第一纹理图片。

3、应理解，第一预览组件是从多个预览组件中筛选得到的。示例性的，操作系统编译工具链对代码文件进行预处理，生成可执行文件，将代码文件中标记有@preview的组件视为预览组件。为每个预览组件单独创建绘制图层，对绘制图层中的绘制指令进行光栅化处理，进而获得与预览组件对应的纹理图片。

4、本技术实施例中，通过筛选出预览组件，并对预览组件创建相对应的绘制图层，最终对绘制图层中的绘制命令进行光栅化处理得到纹理图片。能够提高组件预览的效率，更便于开发者在组件预览过程中获得更好的组件预览效果。

5、结合第一方面，在第一方面的某些实现方式中，根据该代码文件确定第二预览组件，该第二预览组件为该多个组件中的一个，该第二预览组件与该第一预览组件不同；根据该第二预览组件确定第二绘制图层，该第二绘制图层与该第一绘制图层不同，该第二绘制图层包括第二绘制指令；根据该第二绘制指令确定第二纹理图片。

6、应理解，第二预览组件是代码文件中除了第一预览组件之外，另一标记有@preview的组件。电子设备也可以对筛选出的第二预览组件进行处理，创建第二预览组件对应的绘制图层。第二预览组件对应的绘制图层和第一预览组件的对应绘制图层是不同的。也就是说，不同的预览组件所对应的绘制图层是不同的，相应的，不同的预览组件对应的绘制指令也是不同的。因此，电子设备可以对不同的绘制指令进行光栅化处理，进而获得不同的纹理图片。

7、本技术实施例中，通过筛选一个或者多个预览组件，并对每个预览组件生成独立的绘制图层，光栅化每个预览组件对应的绘制图层中的绘制指令，获得预览组件对应的纹理图片。当多个堆叠组件需要预览时，使得每个预览组件对应的绘制图层能够被单独处理，进而获得每个预览组件独立的预览结果。使得堆叠在一起的不同预览组件能够完整预览，提高了组件预览的效率。

8、结合第一方面，在第一方面的某些实现方式中，根据该第一纹理图片显示第一预览图片；或者根据该第二纹理图片显示第二预览图片。

9、应理解，在组件预览的界面上，可以显示不同预览组件对应的预览图片。不同预览组件对应的预览图片是通过独立处理所得到的。因此，当具有多个组件堆叠在一起的情况时，能够将各个预览组件分别处理，以得到最终相互独立的预览图片。

10、本技术实施例中，通过分别对不同预览组件的处理，能够最终得到相互独立的预览图片。这样，能够避免多个组件预览时的相互影响，从而进一步使得每个预览组件都能完整、准确地显示出预览图片。

11、结合第一方面，在第一方面的某些实现方式中，该根据该第一预览组件确定第一绘制图层，包括：根据该第一预览组件确定第一组件节点，该第一组件节点用于表示该第一预览组件的数据；根据该第一组件节点确定第一元素节点；根据该第一元素节点确定第一渲染节点，该第一元素节点用于关联该第一组件节点和该第一渲染节点；根据该第一渲染节点确定该第一绘制图层，该第一绘制图层中的该第一绘制指令是由该第一渲染节点确定的。

12、应理解，第一预览组件的数据可以是第一预览组件的属性、事件或者方法中的一项或者多项。第一预览组件的数据可以用来描述第一预览组件的外观。第一预览组件对应的元素节点(例如第一元素节点)可用于创建对应的渲染节点。组件节点、元素节点和渲染节点之间具有对应关系。渲染节点(例如第一渲染节点)可用于确定对应的绘制图层和绘制指令，绘制指令可承载于绘制图层上。渲染节点还可用于维护所对应的预览组件的渲染信息(或者绘制信息)，包括布局信息、绘制指令等。

13、本技术实施例中，每个预览组件都可以被创建与之对应的绘制图层和绘制指令。正因为创建了独立的绘制图层和绘制指令，通过本技术实施例中的组件预览的方法，能够获得不同预览组件的预览图片。

14、结合第一方面，在第一方面的某些实现方式中，在该根据该第一渲染节点确定该第一绘制图层之前，该方法还包括：根据该第一渲染节点确定第一布局信息，该第一布局信息包括第一尺寸信息或第一位置信息，该第一绘制图层包括该第一布局信息。

15、应理解，布局信息用于指示预览组件的初始大小或位置。布局信息可以是电子设备计算得到的，也可以默认设定的初始值。布局信息和绘制信息都可以处于绘制图层中。

16、结合第一方面，在第一方面的某些实现方式中，将该第一预览组件与该第一预览组件的数据绑定；当监测到该第一预览组件的数据变化时，根据该第一预览组件的数据变化确定述第二组件节点；根据该第二组件节点确定第二元素节点；根据该第二元素节点确定第二渲染节点，该第二元素节点用于关联该第二组件节点和该第二渲染节点；根据该第二渲染节点确定第二布局信息，该第二布局信息包括第二尺寸信息或第二位置信息；根据该第二渲染节点确定第三绘制图层，该第三绘制图层包括第三绘制指令和该第二布局信息，该第三绘制指令是由该第二渲染节点确定的。

17、本技术实施例中，当预览组件的数据发生变化时，可以重新创建预览组件所对应的组件节点，并更新所对应的元素节点、渲染节点和布局信息。进而能够根据更新之后的信息确定新的绘制图层和绘制指令。也就是说，当监测到预览组件的数据发生变化时，能够对预览组件的相关绘制信息进行实时更新，从而能够随着数据变化，实时更新预览组件对应的预览图片，使得开发者能够动态获知预览组件的预览效果的变化。

18、结合第一方面，在第一方面的某些实现方式中，根据该第三绘制指令确定第三纹理图片，该第三纹理图片与该第一纹理图片不同。

19、结合第一方面，在第一方面的某些实现方式中，根据该第三纹理图片显示第三预览图片，该第三预览图片为该第一预览图片更新后的图片。

20、应理解，当第一预览组件的数据发生变化时，可以获得变化后的纹理图片，也就是获得更新后的第三纹理图片，从而可以显示更新后的第三预览图片。

21、结合第一方面，在第一方面的某些实现方式中，该监测到该第一预览组件的数据变化，包括：响应于开发者对该第一预览图片的操作，将该数据变化关联到该第一预览组件；当该数据变化关联到该第一预览组件时，监测到该第一预览组件的数据变化。

22、示例性的，可以通过开发者对第一预览图片的点击操作，确定此时第一预览组件的数据发生变化，从而能够在预览界面直接获得变化后第三预览图片。

23、应理解，开发者可以对任一预览组件实现动态预览。例如，多个预览组件中的第一预览组件或第二预览组件。

24、结合第一方面，在第一方面的某些实现方式中，该第一绘制图层包括第一画布，该第一画布包括该第一布局信息和该第一绘制指令；该第三绘制图层包括第二画布，该第二画布包括该第二布局信息和该第三绘制指令。

25、应理解，预览组件对应的绘制图层上还可以包括画布，画布上可以记录有布局信息和绘制指令。

26、第二方面，提供了一种电子设备，包括：一个或多个处理器；一个或多个存储器；该一个或多个存储器存储有一个或多个计算机程序，该一个或多个计算机程序包括指令，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据代码文件确定第一预览组件，该代码文件包括多个组件，该第一预览组件为该多个组件中的一个；根据该第一预览组件确定第一绘制图层，该第一绘制图层包括第一绘制指令；根据该第一绘制指令确定第一纹理图片。

27、结合第二方面，在第二方面的某些实现方式中，根据该代码文件确定第二预览组件，该第二预览组件为该多个组件中的一个，该第二预览组件与该第一预览组件不同；根据该第二预览组件确定第二绘制图层，该第二绘制图层与该第一绘制图层不同，该第二绘制图层包括第二绘制指令；根据该第二绘制指令确定第二纹理图片。

28、结合第二方面，在第二方面的某些实现方式中，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第一纹理图片显示第一预览图片；或者根据该第二纹理图片显示第二预览图片。

29、结合第二方面，在第二方面的某些实现方式中，其特征在于，该根据该第一预览组件确定第一绘制图层，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第一预览组件确定第一组件节点，该第一组件节点用于表示该第一预览组件的数据；根据该第一组件节点确定第一元素节点；根据该第一元素节点确定第一渲染节点，该第一元素节点用于关联该第一组件节点和该第一渲染节点；根据该第一渲染节点确定该第一绘制图层，该第一绘制图层中的该第一绘制指令是由该第一渲染节点确定的。

30、结合第二方面，在第二方面的某些实现方式中，在该根据该第一渲染节点确定该第一绘制图层之前，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第一渲染节点确定第一布局信息，该第一布局信息包括第一尺寸信息或第一位置信息，该第一绘制图层包括该第一布局信息。

31、结合第二方面，在第二方面的某些实现方式中，将该第一预览组件与该第一预览组件的数据绑定；当监测到该第一预览组件的数据变化时，根据该第一预览组件的数据变化确定第二组件节点；根据该第二组件节点确定第二元素节点；根据该第二元素节点确定第二渲染节点，该第二元素节点用于关联该第二组件节点和该第二渲染节点；根据该第二渲染节点确定第二布局信息，该第二布局信息包括第二尺寸信息或第二位置信息；根据该第二渲染节点确定第三绘制图层，该第三绘制图层包括第三绘制指令和该第二布局信息，该第三绘制指令是由该第二渲染节点确定的。

32、结合第二方面，在第二方面的某些实现方式中，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第三绘制指令确定第三纹理图片，该第三纹理图片与该第一纹理图片不同。

33、结合第二方面，在第二方面的某些实现方式中，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第三纹理图片显示第三预览图片，该第三预览图片为该第一预览图片更新后的图片。

34、结合第二方面，在第二方面的某些实现方式中，该监测到该第一预览组件的数据变化，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：响应于开发者对该第一预览图片的操作，将该数据变化关联到该第一预览组件；当该数据变化关联到该第一预览组件时，监测到该第一预览组件的数据变化。

35、结合第二方面，在第二方面的某些实现方式中，该第一绘制图层包括第一画布，该第一画布包括该第一预览组件第一布局信息和该第一绘制指令；该第三绘制图层包括第二画布，该第二画布包括该第二布局信息和该第三绘制指令。

36、第三方面，提供了一种计算机可读存储介质，该计算机可读存储介质包括计算机程序或指令，当该计算机程序或指令在计算机上运行时，使得第一方面及第一方面的任一可能实现的方法被执行。

37、第四方面，提供了一种计算机程序产品，该计算机程序产品包括计算机程序或指令，当该计算机程序或指令在计算机上运行时，使得第一方面及第一方面的任一可能实现的方法被执行。

38、第五方面，提供了一种计算机程序，当其在计算机上运行时，使得如第一方面及其任一种可能的实现方式中的方法被执行。