CN117290004A - 组件预览的方法和电子设备 - Google Patents

Abstract

本申请实施例提供了一种组件预览的方法和电子设备，该方法应用于电子设备，包括：根据代码文件确定第一预览组件，代码文件包括多个组件，第一预览组件为多个组件中的一个；根据第一预览组件确定第一绘制图层，第一绘制图层包括第一绘制指令；根据第一绘制指令确定第一纹理图片。本申请提供的组件预览的方法和电子设备，能够完整预览堆叠在一起的组件，并支持组件的动态预览，进而在提高组件预览效率的同时，也能获得更好的组件预览效果。

Description

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

技术领域

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

背景技术

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

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

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

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

发明内容

本申请实施例提供一种组件预览的方法，该方法可以提高预览组件的效率。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

附图说明

图1是一种电子设备的结构示意图。

图2是本申请实施例提供的电子设备的软件结构框图。

图3是本申请实施例提供的一种不支持组件动态预览的示意图。

图4是本申请实施例提供的一种不能单独完整预览显示单个组件对应的预览图片的示意图。

图5是Swift UI组件预览的示意图。

图6是Jetpack Compose组件预览的示意图。

图7是本申请实施例所提供的电子设备的系统化框架图。

图8是本申请实施例提供的电子设备的模块框架图。

图9是本申请实施例提供的一种组件预览的方法900示意性流程图。

图10是本申请实施例提供的另一种组件预览的方法1000示意性流程图。

图11是本申请实施例提供的组件预览效果示意图。

图12是本申请实施例提供的另一组件预览效果示意图。

图13是本申请实施例提供的组件预览方法的对比示意图。

图14是本申请实施例提供的一种组件预览的方法1400示意性流程图。

具体实施方式

下面将结合附图，对本申请实施例中的技术方案进行描述。

以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个、两个或两个以上。术语“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系；例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A、B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。

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

以下介绍电子设备、用于这样的电子设备的用户界面、和用于使用这样的电子设备的实施例。在一些实施例中，电子设备可以是还包含其它功能诸如个人数字助理和/或音乐播放器功能的便携式电子设备，诸如手机、平板电脑、具备无线通讯功能的可穿戴电子设备(如智能手表)等。便携式电子设备的示例性实施例包括但不限于搭载 或者其它操作系统的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备，诸如膝上型计算机(Laptop)等。还应当理解的是，在其他一些实施例中，上述电子设备也可以不是便携式电子设备，而是台式计算机。

示例性的，图1示出了电子设备100的结构示意图。电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户身份识别(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。

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

处理器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可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuitsound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purposeinput/output，GPIO)接口，用户身份识别(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。

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

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

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

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。

无线通信模块160可以提供应用在电子设备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)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。

在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications，GSM)，通用分组无线服务(general packet radio service，GPRS)，码分多址接入(codedivision multiple access，CDMA)，宽带码分多址(wideband code division multipleaccess，WCDMA)，时分码分多址(time-division code division multiple access，TD-SCDMA)，长期演进(long term evolution，LTE)，BT，GNSS，WLAN，NFC，FM，和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system，GPS)，全球导航卫星系统(global navigation satellite system，GLONASS)，北斗卫星导航系统(beidounavigation satellite system，BDS)，准天顶卫星系统(quasi-zenith satellitesystem，QZSS)和/或星基增强系统(satellite based augmentation systems，SBAS)。

电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

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

电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。

ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点，亮度，肤色进行算法优化。ISP还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。

摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或N个摄像头193，N为大于1的正整数。

数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。

视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1，MPEG2，MPEG3，MPEG4等。

NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别，人脸识别，语音识别，文本理解等。

外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。

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

电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。

音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。

扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐，或收听免提通话。

受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时，可以通过将受话器170B靠近人耳接听语音。

麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中，电子设备100可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。

压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如，当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于闹钟应用图标时，执行新建闹钟的指令。

指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。例如，当手机在锁屏界面检测到用户的触控操作时，手机可以通过指纹传感器180H采集用户的指纹信息，并通过采集的指纹信息与手机中预置的指纹信息进行匹配。若匹配成功，则手机可以从锁屏界面进入非锁屏界面。

触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。

图2是本申请实施例的电子设备100的软件结构框图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。应用程序层可以包括一系列应用程序包。

如图2所示，应用程序层可以包括相机、设置、皮肤模块、用户界面(userinterface，UI)、三方应用程序等。其中，三方应用程序可以包括图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等。

应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层可以包括一些预先定义的函数。

如图2所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。

窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。

视图系统包括可视控件，例如显示文字的控件，显示图片的控件等，例如本申请实施例中的用于提示虚拟快门键的指示信息等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。

电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。

资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。

通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。

Android runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。

核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。

应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。

系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(media libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。

表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。

媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。

三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。

2D图形引擎是2D绘图的绘图引擎。

此外，系统库还可以包括状态监测服务模块等，例如物理状态识别模块，用于对用户手势进行分析和识别；传感器服务模块，用于对硬件层各类传感器上传的传感器数据进行监测，确定电子设备100的物理状态。

内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。

硬件层可以包括各类传感器，例如图1中介绍的各类传感器，在本申请实施例中涉及的加速度传感器、陀螺仪传感器、触摸传感器等。

结合以上图1和图2介绍的电子设备，在本申请实施例中，电子设备100涉及的物理器件主要包括传感器、决策支持系统(decision support systems，DSS)显示芯片、触摸显示屏、指纹识别模块等硬件组件；以及屏幕管理模块、显示驱动、指纹驱动、防误触等内核软件层；防误触输入、屏幕控制、灭屏显示(always on display，AOD)服务、电源管理等应用程序框架层功能；以及特殊适配应用(camera)、三方应用、系统休眠、AOD等应用层业务。

组件预览作为当前PC(personal computer)预览的一种，受到较多开发者的青睐。一方面，组件预览无需预览整个页面，开发者可根据实际需要，自定义需要预览的组件，并设置组件所对相应的属性。当预览这些组件时，这些组件的布局不会受到其他组件的影响，能够得到预期的组件用户界面(user interface，UI)预览效果。这种组件预览的方式，相比于页面预览，具有更好的开发调试效率，开发者可以更加方便地调试应用UI界面。

另一方面，组件预览是运行时加载不同的自定义组件。能够基于一个JavaScriptBundle(JS Bundle)文件，同时完成多个自定义组件预览。相比于页面预览，如果需要同时预览不同的自定义组件，则需要加载多个不同的JS Bundle文件。因此，当预览页面中包含多个自定义组件时，组件预览相比与页面预览的速度会更快，更有效率。

下面介绍两种预览组件的方式。其一是Swift UI，这是一种新的构件UI的方式和全新的编码风格。可用于watchOS、tvOS、macOS等苹果旗下产品的应用UI的开发，统一了苹果平台的UI框架。其二是Jetpack Compose，可用于构建原生Android界面的新工具包，可简化Android上的界面开发。能够使用更少的代码、强大的工具和直观的应用程序接口(application programming interface，API)，快速构建UI。

一方面，上述两种预览调测工具只能对组件进行静态预览，如果需要支持动态预览，需要工具链重新编译，渲染引擎重新进行渲染。可见，上述两种预览调测工具不支持预览组件的动态更新，开发者体验感较差，开发调试的效率较低。如图3示出了一种不能支持组件动态预览的示意图。现有方案在文本组件(例如图3所示，文本内容为ComponentPreview)绑定一个点击事件，用以修改文本颜色。当点击事件触发后，不会修改文本颜色。如果需要修改文本的字体颜色，需要工具链重新编译，生成可执行文件，再重新生成渲染图片。

另一方面，Swift UI和Jetpack Compose都是光栅化页面中的所有组件和组件布局。当通过光栅化页面中所有组件以及组件布局来裁剪组件图片，这会导致无法完整预览堆叠在一起的组件。如图4所示，示出一种不能单独完整预览显示单个组件对应的预览图片的示意图。图中包括文本组件对应的预览图片(例如，Flower)和图片组件对应的图片，这两个组件对应的预览图片堆叠在一起，图片组件对应的预览图片中包括一块白色区域，该区域是裁剪出文本组件对应的预览图片所留下的。由于文本组件和图片组件在同一图层进行显示，并且一起经过光栅化处理后生成了纹理图片。上述过程会导致无法完整显示出文本组件的预览图片和图片组件的预览图片。又因为如图4所示的文本组件对应的预览图片包含了图片组件对应的预览图片的一部分，进而无法完整单独地预览出图片组件对应的预览图片和文本组件对应的预览图片。

为了便于理解，下面更进一步介绍以上两种组件预览的方案。如图5所示，示出了Swift UI组件预览的示意图。可以通过PreviewProvider代码片段定义预览的组件内容，计算页面上每个组件的布局，并且光栅化该页面上的所有组件，生成静态图像。随后根据组件布局，从静态图像中截取每个组件所对应的静态图片，从而实现对单个组件的预览。显然，图5示出的组件预览不支持多个堆叠组件的预览，也不支持对组件的动态预览。另外，该方案还受到预览组件个数的限制。通常而言，Swift UI组件预览一次性仅支持同时预览10个组件，超过10个组件时会编译报错。因此，对于大型应用中包含较多组件的页面，组件的个数往往超过10个，Swift UI组件预览应用的场景受到较多限制。

如图6所示，示出了Jetpack Compose组件预览的示意图。该方案可以通过@Preview注解指定的代码片段定义预览的组件内容，同时光栅化页面上所有组件，生成静态图像、随后根据组件的布局，截图每个组件对应的静态图像，显示在预览界面上。显然，Jetpack Compose组件预览与Swift UI组件预览类似，也不支持对多个堆叠组件的预览，也不支持对组件的动态预览。当组件的数据发生变化时，需要重新生成可执行文件，不能实时动态更新组件的信息，从而动态更新组件的UI界面，从而具有较低的组件调试效率。

综上所述，针对现有组件预览方案存在的问题，本申请提供一种组件预览的方法，在能够独立预览多个堆叠组件的同时，还能实时动态预览组件，进而提高组件预览的效率。

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

组件动态预览

在预览器界面，可在预览器中操作应用的交互动作，例如点击事件，与应用运行在真机电子设备上的交互体验一致。

JS Bundle

是应用开发者编写的JS应用程序打包后获得的文件，包括如何构件组件界面的指令流。

布局

布局的过程是通过各类布局的算法，计算出每个渲染节点(RenderNode)在相对空间上真实的大小和位置。当某个节点的内容发生变化时，就会标记自己为需要布局(needLayout)的节点，并一直向上标记到布局边界(LayoutParam)传给子节点，子节点自底向上据此计算得到大小和位置。

绘制

绘制是一个深度遍历的过程，遍历调用每个渲染节点的绘制方法，此时的绘制只是根据布局算出来的大小和位置，在当前绘制的上下文记录每个节点的绘制命令。

对于每个节点，绘制可分为以下步骤：1、创建绘制上下文，提供可以记录绘制命令的画布；2、在当前画布上记录背景的绘制命令；3、递归调用子节点的绘制方法，记录子节点的绘制命令；4、在当前的画布上记录前景的绘制命令。

光栅化

光栅化是将顶点数据转换为片元的过程，具有将图转化为一个个栅格组成的图像的作用，特点是每个元素对应帧缓冲区的像素。

如图7所示，示出了本申请实施例所应用的系统框架。该系统框架可以包括图7中的各个模块或者单元。其中，主要的模块为组件光栅化和组件预览。组件光栅化负责对预览组件对应的绘制图层中的绘制指令单独进行光栅化处理，用以获得纹理图片，并将光栅化处理之后的结果发送至预览器显示。组件预览负责获得预览组件所需要的数据，从而显示纹理图片等。

为了便于理解，图8示出了本申请实施例所应用的模块框架。主要包括预览器前端模块、预览器后端模块、应用框架管理模块、声明式JS引擎管理模块、节点管理模块、组件状态管理模块、组件光栅化模块和预览器回调管理模块。下面分别对上述各个模块的功能进行介绍。

预览器前端模块，用于从预览器后端获取组件预览数据，显示组件对应的纹理图片、处理界面事件、JS调试等。

预览器后端模块，用于与应用框架的UI引擎通讯，发送获取数据指令给应用框架的UI引擎，获取应用框架UI引擎渲染的预览组件对应的纹理图片，进程间通讯(interprocess communication，IPC)等。

预览器回调管理模块，用于预览器渲染结果回调管理，将应用框架的UI引擎的渲染组件的结果实时分发给预览器后端。

应用框架管理模块，用于应用框架UI引擎初始化，生命周期管理，事件分发，加载预览组件，路由跳转和图形库框架(Graphics Library Framework，GLFW)窗口管理等，其中，图形库框架用于创建开放图形库(Open Graphics Library，OpenGL)上下文，以及操作窗口的第三方库。

声明式JS引擎管理模块，用于初始化声明式引擎实例，加载JS Bundle的内容，编译成字节码，并分发给JS引擎执行等。

声明式前端管理模块，用于页面和资源加载，路由跳转，页面生命周期管理，事件与JS引擎交互等。

节点管理模块，用于创建和管理每个组件对应的组件节点，元素节点，绘制节点。其中，组件节点可以对应绑定组件的属性、事件或方法等信息中的一项或多项。元素节点可以联结组件和渲染节点。元素节点和组件节点一一对应。当组件节点出现数据变化后，元素节点可以将该节点变化后的数据对应更新到渲染树中对应的节点，实现将渲染树中节点和数据的重新绑定，进而可以基于更新后的渲染树渲染出变化后的用户界面。渲染节点中包括可显示在用户界面的节点。并且由于渲染树绑定了这些节点的信息，通过渲染节点可获取用户界面的布局、样式等，可基于渲染树生成绘制命令渲染出用户界面。

组件状态管理模块，用于事件处理，组件的双向数据绑定、组件状态更新，并将更新的数据分发给应用框架的UI渲染管线等。

组件光栅化模块，用于对组件对应的图层中的绘制指令单独进行光栅化生成纹理图片，并将光栅化生成的纹理图片传给预览器进行显示。

如图9所示，示出了本申请实施例提供的一种组件预览的方法900示意性流程图。下面结合图9，对该方法900进行详细描述。

S901，预览器后端模块向预览器回调管理模块注册回调。

S902，声明式前端管理模块将工具链解析后的结果发送至声明式JS引擎管理模块。

S903，声明式JS引擎管理模块将样式解析及更新后的结果发送至应用框架管理模块。

S904，应用框架管理模块将创建的渲染节点发送至节点管理模块。

S905，预览器回调管理模向应用框架管理模块注册回调。

应理解，当开启组件预览时，声明式JS引擎管理模块将开发者的代码进行解析，也就是操作系统的编译工具链对代码进行预处理。示例性的，装饰器@Preview预处理。声明式前端管理模块加载出预览组件的可执行文件(JS Bundle)。声明式前端管理模块将解析后的结果发送至应用框架管理模块。应用框架管理模块将标记有@Preview的组件进行绑定，并向预览器后端模块注册渲染纹理数据回调。应用框架管理模块将组件和组件的属性信息发送至节点管理模块。节点管理模块创建标记有@Preview的组件所对应的组件节点、元素节点和渲染节点。

S906，节点管理模块将生成的绘制指令及光栅化处理后的结果发送至组件光栅化模块。

S907，组件光栅化模块向预览器回调管理模块回调获取的纹理图片。

S908，预览器回调管理模块将光栅化结果分发给预览器后端模块。

S909，预览器后端模块将纹理数据发送至预览器前端模块。

示例性的，节点管理模块将生成的绘制指令发送至组件光栅化模块。组件光栅化模块根据绘制指令确定纹理图片。进而，组件光栅化模块将纹理图片发送至预览器回调管理模块。预览器回调管理模块将纹理图片异步发送至预览器后端模块，预览器后端模块可以通过IPC将纹理图片发送至预览器前端模块。预览器前端模块完成预览组件图片的上屏显示。

需要说明的是，上述步骤为数据未发生变化的过程。根据实际需要预览的组件，计算出预览组件对应的渲染节点和布局。并对预览组件单独进行光栅化处理，生成纹理图片。最后在预览器上可以独立显示预览组件对应的预览图片。当数据发生变化时，电子设备可执行后续步骤，以实现动态预览组件。

S910，声明式JS引擎管理模块监测数据更新。

S911，声明式JS引擎管理模块将检测到的组件属性的变化发送至组件状态管理模块。

S912，组件状态管理模块将创建的新的组件节点发送至节点管理模块。

S913，节点管理模块将更新后的渲染数据发送至组件光栅化模块。

S914，组件光栅化模块将更新后的渲染数据发送至预览器回调管理模块。

S915，预览器回调管理模块将更新后的渲染数据发送至预览器后端模块。

S916，预览器后端模块将更新后的渲染纹理图片发送至预览器前端模块。

示例性的，当开发者点击预览组件绑定的区域时，声明式前端管理模块获知JS侧的数据发生了变化，组件属性更改，触发相应的数据绑定函数(getter/setter函数)。进而，声明式前端管理模块将上述获知的内容通知组件状态管理模块。组件状态管理模块将数据关联至变化的组件，并且重新创建对应的组件节点。组件状态管理模块将重新创建的组件节点发送至节点管理模块。节点管理模块更新元素节点信息，并进一步发送至组件光栅化模块。组件光栅化模块重新生成绘制指令，重新对绘制指令进行光栅化，生成更新后的纹理图片，并将渲染之后的结果发送至预览器回调管理模块。预览器回调管理模块异步发送至预览器后端管理模块。最后，预览器后端管理模块将渲染结果(纹理图片)通过IPC通讯分发至预览器前端模块，预览器前端模块完成预览组件的图片的更新上屏显示。

可见，本申请实施例提供一种组件预览的方法。其一，可以通过对预览组件(标记有@Preview的组件)对应的绘制指令进行单独光栅化处理，进而获取预览组件对应的纹理图片，最后实现对预览组件对应的预览图片的上屏显示。该方法可以实现堆叠的多个组件对应的预览图片的独立显示，提高了组件预览的效率。其二，该方法将组件与数据关联，当数据发生变化，会重新创建与数据关联的组件节点，并且更新元素节点信息和渲染信息(渲染数据)，生成对应的绘制指令(渲染指令)，对重新生成的绘制指令进行光栅化处理获得纹理图片。该方法可以实现对预览组件的动态预览，使得开发者在预览组件时能够实时获得预览组件的显示效果，进一步提高了组件预览的效率。其三，该方法可以只需要对预览组件(标记有@Preview的组件)计算布局，并生成绘制指令，无需对页面的所有组件都进行处理，这样会避免处理预览组件时受到其他不必要预览的组件的影响，这也会提高组件预览的速度。

如图10所示，示出了本申请实施例提供的一种组件预览的方法1000示意性流程图。下面结合图10，对该方法1000进行详细描述。

S1001，生成可执行文件。

应理解，将开发者的应用UI代码通过工具链，进行编译。示例性的，对装饰器(@Preview)进行解析，编译应用UI代码获得可执行文件。例如，可执行文件为JS Bundle，包含如何构建组件界面的指令信息。

S1002，绑定预览组件。

应理解，电子设备中的节点管理模块将标记有@Preview的组件进行属性，方法的绑定，并发送至预览组件的入口(例如，loadDocument)。

S1003，确定组件节点、元素节点和渲染节点。

应理解，可以通过JS到C++的跨语言接口生成预览组件的C++预览组件节点，并通过预览组件生成元素节点。其中，元素节点可用于联结组件和渲染节点，还用于数据变化时的局部更新。通常而言，每个可显示的元素节点会创建对应的渲染节点。每个渲染节点对应一个预览组件节点的显示信息，每个渲染节点用于维护所对应的预览组件节点在渲染时所需要用到的信息，包括布局、绘制指令等。

示例性的，当数据发生变化时，将数据关联至发生变化的预览组件，并对该预览组件重新创建新的预览组件节点，并更新元素节点信息和对应的渲染节点的信息。也就是说，当数据发生变化时，与数据关联的预览组件的绘制指令也会发生变化。此时，接着执行后续步骤，便可实现对组件的动态预览。

S1004，生成独立的绘制图层。

应理解，在预览组件对应的渲染节点的绘制函数中创建对应的绘制上下文，并生成独立的绘制图层。还可以在绘制图层中提供一个画布，该画布用于记录该预览组件节点对应的绘制信息，绘制信息可以包括布局、颜色、绘制指令等。

S1005，光栅化绘制指令。

应理解，光栅化处理每个预览组件节点对应的绘制指令。具体的，光栅化处理DisplayList中的绘制指令。其中，DisplayList是一个缓存绘制指令的缓存区，该缓存区记录了将要执行的绘制指令序列。示例性的，在像素缓冲区上生成像素的颜色值(像素可以保存在纹理的计算机图形内存中)。光栅化处理后得到预览组件节点所对应的纹理图片。进一步触发预览器回调事件，可以通过回调函数，将纹理图片(纹理数据)传输至预览器后端。

应理解，光栅化处理的对象为预览组件节点对应的绘制指令。首先，并不是对所有的组件都进行光栅化处理，仅对开发者需要预览的组件进行光栅化处理。其次，由于每个预览组件节点会有相对应的渲染节点，因此绘制指令也是与预览组件一一对应的。因此可以通过单独光栅化处理绘制指令，从而生成与预览组件对应的纹理图片。每个预览组件所对应的纹理图片也是独立的。

S1006，显示预览组件的图片。

应理解，预览器后端可以通过IPC通讯将预览组件对应的纹理图片传输至预览器前端。预览器前端将纹理图片(渲染结果)发送至合成器。合成器进一步将纹理图片的相关数据发送至帧缓存区，显示器便可以从帧缓存区中读取纹理图片的相关数据，最后，将预览组件的图片显示在屏幕上。

为了方便理解，下面以预览组件为文字组件为例，介绍了本申请实施例提供的一种组件预览方法的具体实例。代码段如下所示：

上述代码段中存在一个文本组件，该文本组件的初始显示为“Good morning”。当开发者点击该预览的文本组件对应的预览图片时，会触发相应的数据绑定函数(getter/setter函数)将新的文本内容关联到该变化的组件上。同时，重新创建了与之对应的预览组件节点，更新了元素节点的信息和对应的渲染节点的信息，并生成了绘制指令。对该绘制指令重新进行光栅化处理，生成更新后的纹理图片，最终将更新好的该文本组件对应的预览图片显示在预览器的界面上。如上段代码所示，显示结果为：“Good afternoon”。

为了方便理解，图11示出了本申请实施例提供的组件预览的效果示意图。当开发者点击文本组件对应的预览图片(内容为“Flowers”)时，该文本的字体会变大，直接显示在预览的界面上。可见，本申请实施例提供的组件预览的方法，通过数据与组件的绑定，当数据发生变化时(例如，通过开发者点击预览组件对应的预览图片)，会触发预览组件的界面更新，直接显示出更新之后预览组件对应的预览图片。可以动态更改预览组件的属性，无需重新编译获得可执行文件，能够在运行时直接渲染出改变属性后的预览组件对应的预览图片。

为了方便理解，图12示出了本申请实施例提供的另一组件预览的效果示意图。如图12(a)所示，预览组件为文本组件(内容为“Component Preview”)。当监测到数据发生变化时，实现该文本组件的文本底色变化的自动感知，并且确定出相应的最小化预览组件的更新范围，可以实时修改文本组件的文本底色。如图12(b)所示，预览组件包括图片组件(内容为风景图)和文本组件(内容为“Flowers”)。图片组件与文字组件堆叠。通过分别对图片组件和文字组件创建独立的绘制图层，并分别进行光栅化处理得到纹理图片，将得到的纹理图片分发至预览器，最后能够单独显示出堆叠在一起的图片组件对应的预览图片和文字组件对应的预览图片。

更进一步地，为了便于理解本申请实施例提供的组件预览方法的进一步改进，图13示出了两种组件预览方法的对比示意图。其中，图13(b)示出了本申请实施例提供的组件预览方法。虚线框内的步骤是两种方法的不同之处。这两种方法均需要对开发者的代码进行编译，以获得可执行文件。随后，电子设备仅对预览组件进行处理，而非对所有组件都进行处理。具体的，电子设备计算筛选出的预览组件的布局，并进一步生成预览组件对应的绘制图层以及相应的绘制指令，对该绘制指令进行光栅化处理从而得到纹理图片。最终，能够在预览器上独立显示预览组件的图片。而现有方案中所有的组件绘制在同一图层，光栅化的对象也仅是该同一图层，如果需要显示部分组件，则需要将获得的纹理图片进行裁剪。因此，裁剪之后的图片可能会出现无法完整显示各个组件的问题。

如图14所示，示出了本申请实施例提供的一种组件预览的方法1400，该方法可应用于如图8所示的电子设备的系统架构中，详细步骤如下：

S1401，根据代码文件确定第一预览组件。

应理解，代码文件中包括多个组件，第一预览组件为多个组件中的一个，也就是说，第一预览组件是从多个组件中筛选得到的。操作系统编译工具链对代码文件进行预处理，生成可执行文件(JS Bundle)。示例性的，将代码文件中标记有@Preview的组件视为预览组件。

需要说明的是，从代码文件的多个组件中筛选出预览组件，从而仅需要对预览组件执行后续的处理，能够提高组件预览的速度和效率。同时，也可以尽量避免其他不需要预览组件被处理时，对预览组件处理过程造成的影响，能够提高组件预览的效果。

S1402，根据第一预览组件确定第一绘制图层，第一绘制图层包括第一绘制指令。

应理解，每个预览组件会生成相应的绘制图层，也就是说，每个预览组件对应的绘制图层是相互独立的。独立绘制图层的确定，明确了后续处理的对象(绘制图层上的绘制指令)也是独立的，能够更进一步获得完整的预览组件的最终预览效果。使得通过本申请实施例提供的组件预览方法获得的预览结果更加准确，提升了开发者组件预览的效率。

在一些实施例中，根据第一预览组件确定第一组件节点，第一组件节点用于表示第一预览组件的数据；根据第一组件节点确定第一元素节点；根据第一元素节点确定第一渲染节点，第一元素节点用于关联第一组件节点和第一渲染节点；根据第一渲染节点确定第一绘制图层，第一绘制图层中的第一绘制指令是由第一渲染节点确定的。

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

在一些实施例中，根据第一渲染节点确定第一布局信息，第一布局信息包括第一尺寸信息或第一位置信息，第一绘制图层包括第一布局信息。

应理解，布局信息用于指示预览组件的初始大小或者位置。布局信息可以是电子设备计算得到的，也可以是默认设定的初始值。本申请对此不作具体限定。布局信息和绘制指令都可以处于绘制图层中。

S1403，根据第一绘制指令确定第一纹理图片。

在一些实施例中，根据代码文件确定第二预览组件，第二预览组件为多个组件中的一个，第二预览组件与第一预览组件不同；根据第二预览组件确定第二绘制图层，第二绘制图层与第一绘制图层不同，第二绘制图层包括第二绘制指令；根据第二绘制指令确定第二纹理图片。

应理解，第二预览组件是代码文件中除了第一预览组件之外，另一标记有@Preview的组件。电子设备也会对第二预览组件进行处理，生成的第二预览组件对应的绘制图层，与第一预览组件对应的绘制图层分别是独立的绘制图层。也就是说，不同预览组件对应的绘制图层是独立的。电子设备可以对独立绘制图层中的绘制指令进行处理，用以获得不同的纹理图片。其中，对绘制指令进行处理，用以获得纹理图片的过程是光栅化。

在一些实施例中，根据所第一纹理图片显示第一预览图片；或者根据第二纹理图片显示第二预览图片。

应理解，在组件预览的界面上，会显示不同预览组件对应的预览图片。不同预览组件对应的预览图片不是从同一预览图片上裁剪而成的，而是对独立的绘制图层分别处理得到的。因此，本申请实施例提供的组件预览的方法，能够完整显示不同预览组件对应的预览图片。当具有多个组件堆叠在一起的情况时，能够避免多个堆叠组件的相互影响，使得每个堆叠的组件都能完整、准确地显示出预览图片。

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

在一些实施例中，响应于开发者对第一预览图片的操作，将数据变化关联到第一预览组件；当数据变化关联到第一预览组件时，监测到第一预览组件的数据变化。

在一些实施例中，根据第三绘制指令确定第三纹理图片，第三纹理图片与第一纹理图片不同。

在一些实施例中，根据第三纹理图片显示第三预览图片，第三预览图片为第一预览图片更新后的图片。

应理解，预览组件与该组件的数据进行绑定。当该预览组件的数据发生变化时，重新创建该预览组件对应的组件节点，并更新所对应的元素节点和渲染节点，进一步更新布局信息和绘制指令。根据更新后的绘制指令重新生成纹理图片，从而获得预览组件数据更新之后的预览图片。

需要说明的是，元素节点还可以用于数据的更新。也就是说，当发生预览组件的数据变化时，元素节点将变化后的数据对应更新至渲染节点，实现渲染节点和变化后数据的重新绑定。

在一些实施例中，第一绘制图层包括第一画布，第一画布包括第一布局信息和第一绘制指令；第三绘制图层包括第二画布，第二画布包括第二布局信息和第三绘制指令。

本申请实施例提供的一种组件预览的方法，通过筛选预览组件，并对每个预览组件生成独立绘制图层，光栅化每个预览组件对应的独立绘制图层中的绘制指令，获得预览组件对应的纹理图片并进行显示。当多个堆叠组件需要预览时，能够分别对每个预览组件对应的绘制图层进行处理，进而能够完整预览堆叠在一起的不同预览组件。此外，还可以通过预览组件与数据的绑定，当监测到数据发生变化时，对预览组件的相关绘制信息进行实时更新，从而获得能够随着数据变化，实时更新的预览组件对应的预览图片。使得开发者能够动态获知预览组件的预览效果的变化。更进一步地，由于本申请中的预览组件的方法，仅对预览组件进行处理，不需要对页面上所有组件都进行处理。这使得电子设备可以按需处理预览组件的布局信息或绘制信息，也能够避免不需要处理的组件对预览组件的影响，能够提高组件预览的速度和预览效果。

本申请实施例提供一种计算机程序产品，当所述计算机程序产品在电子设备运行时，使得电子设备执行上述实施例中的技术方案。其实现原理和技术效果与上述方法相关实施例类似，此处不再赘述。

本申请实施例提供一种可读存储介质，所述可读存储介质包含指令，当所述指令在电子设备运行时，使得所述电子设备执行上述实施例的技术方案。其实现原理和技术效果类似，此处不再赘述。

本申请实施例提供一种芯片，所述芯片用于执行指令，当所述芯片运行时，执行上述实施例中的技术方案。其实现原理和技术效果类似，此处不再赘述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请实施例的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请实施例的具体实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请实施例的保护范围之内。因此，本申请实施例的保护范围应以所述权利要求的保护范围为准。

Claims (22)

1.一种组件预览的方法，其特征在于，所述方法应用于电子设备，包括：

根据代码文件确定第一预览组件，所述代码文件包括多个组件，所述第一预览组件为所述多个组件中的一个；

根据所述第一预览组件确定第一绘制图层，所述第一绘制图层包括第一绘制指令；

根据所述第一绘制指令确定第一纹理图片。

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

根据所述代码文件确定第二预览组件，所述第二预览组件为所述多个组件中的一个，所述第二预览组件与所述第一预览组件不同；

根据所述第二预览组件确定第二绘制图层，所述第二绘制图层与所述第一绘制图层不同，所述第二绘制图层包括第二绘制指令；

根据所述第二绘制指令确定第二纹理图片。

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

根据所述第一纹理图片显示第一预览图片；或者

根据所述第二纹理图片显示第二预览图片。

4.根据权利要求1至3中任一项所述的方法，其特征在于，所述根据所述第一预览组件确定第一绘制图层，包括：

根据所述第一预览组件确定第一组件节点，所述第一组件节点用于表示所述第一预览组件的数据；

根据所述第一组件节点确定第一元素节点；

根据所述第一元素节点确定第一渲染节点，所述第一元素节点用于关联所述第一组件节点和所述第一渲染节点；

根据所述第一渲染节点确定所述第一绘制图层，所述第一绘制图层中的所述第一绘制指令是由所述第一渲染节点确定的。

5.根据权利要求4所述的方法，其特征在于，在所述根据所述第一渲染节点确定所述第一绘制图层之前，所述方法还包括：

根据所述第一渲染节点确定第一布局信息，所述第一布局信息包括第一尺寸信息或第一位置信息，所述第一绘制图层包括所述第一布局信息。

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

将所述第一预览组件与所述第一预览组件的数据绑定；

当监测到所述第一预览组件的数据变化时，根据所述第一预览组件的数据变化确定述第二组件节点；

根据所述第二组件节点确定第二元素节点；

根据所述第二元素节点确定第二渲染节点，所述第二元素节点用于关联所述第二组件节点和所述第二渲染节点；

根据所述第二渲染节点确定第二布局信息，所述第二布局信息包括第二尺寸信息或第二位置信息；

根据所述第二渲染节点确定第三绘制图层，所述第三绘制图层包括第三绘制指令和所述第二布局信息，所述第三绘制指令是由所述第二渲染节点确定的。

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

根据所述第三绘制指令确定第三纹理图片，所述第三纹理图片与所述第一纹理图片不同。

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

根据所述第三纹理图片显示第三预览图片，所述第三预览图片为所述第一预览图片更新后的图片。

9.根据权利要求6至8中任一项所述的方法，其特征在于，所述监测到所述第一预览组件的数据变化，包括：

响应于开发者对所述第一预览图片的操作，将所述数据变化关联到所述第一预览组件；

当所述数据变化关联到所述第一预览组件时，监测到所述第一预览组件的数据变化。

10.根据权利要求6至9中任一项所述的方法，其特征在于，所述第一绘制图层包括第一画布，所述第一画布包括所述第一布局信息和所述第一绘制指令；

所述第三绘制图层包括第二画布，所述第二画布包括所述第二布局信息和所述第三绘制指令。

11.一种电子设备，其特征在于，包括：

一个或多个处理器；

一个或多个存储器；

所述一个或多个存储器存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

根据代码文件确定第一预览组件，所述代码文件包括多个组件，所述第一预览组件为所述多个组件中的一个；

根据所述第一预览组件确定第一绘制图层，所述第一绘制图层包括第一绘制指令；

根据所述第一绘制指令确定第一纹理图片。

12.根据权利要求11所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

根据所述代码文件确定第二预览组件，所述第二预览组件为所述多个组件中的一个，所述第二预览组件与所述第一预览组件不同；

根据所述第二预览组件确定第二绘制图层，所述第二绘制图层与所述第一绘制图层不同，所述第二绘制图层包括第二绘制指令；

根据所述第二绘制指令确定第二纹理图片。

13.根据权利要求12所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

根据所述第一纹理图片显示第一预览图片；或者

根据所述第二纹理图片显示第二预览图片。

14.根据权利要求11至13中任一项所述的电子设备，其特征在于，所述根据所述第一预览组件确定第一绘制图层，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

根据所述第一预览组件确定第一组件节点，所述第一组件节点用于表示所述第一预览组件的数据；

根据所述第一组件节点确定第一元素节点；

根据所述第一元素节点确定第一渲染节点，所述第一元素节点用于关联所述第一组件节点和所述第一渲染节点；

根据所述第一渲染节点确定所述第一绘制图层，所述第一绘制图层中的所述第一绘制指令是由所述第一渲染节点确定的。

15.根据权利要求14所述的电子设备，其特征在于，在所述根据所述第一渲染节点确定所述第一绘制图层之前，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

根据所述第一渲染节点确定第一布局信息，所述第一布局信息包括第一尺寸信息或第一位置信息，所述第一绘制图层包括所述第一布局信息。

16.根据权利要求11至15中任一项所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

将所述第一预览组件与所述第一预览组件的数据绑定；

当监测到所述第一预览组件的数据变化时，根据所述第一预览组件的数据变化确定第二组件节点；

根据所述第二组件节点确定第二元素节点；

根据所述第二元素节点确定第二渲染节点，所述第二元素节点用于关联所述第二组件节点和所述第二渲染节点；

根据所述第二渲染节点确定第二布局信息，所述第二布局信息包括第二尺寸信息或第二位置信息；

根据所述第二渲染节点确定第三绘制图层，所述第三绘制图层包括第三绘制指令和所述第二布局信息，所述第三绘制指令是由所述第二渲染节点确定的。

17.根据权利要求16所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

根据所述第三绘制指令确定第三纹理图片，所述第三纹理图片与所述第一纹理图片不同。

18.根据权利要求17所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

根据所述第三纹理图片显示第三预览图片，所述第三预览图片为所述第一预览图片更新后的图片。

19.根据权利要求16至18中任一项所述的电子设备，其特征在于，所述监测到所述第一预览组件的数据变化，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：

响应于开发者对所述第一预览图片的操作，将所述数据变化关联到所述第一预览组件；

当所述数据变化关联到所述第一预览组件时，监测到所述第一预览组件的数据变化。

20.根据权利要求16至19中任一项所述的电子设备，其特征在于，所述第一绘制图层包括第一画布，所述第一画布包括所述第一预览组件第一布局信息和所述第一绘制指令；

所述第三绘制图层包括第二画布，所述第二画布包括所述第二布局信息和所述第三绘制指令。

21.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括计算机程序或指令，当所述计算机程序或指令在计算机上运行时，使得如权利要求1至10中任一项所述的方法被执行。

22.一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序或指令，当所述计算机程序或指令在计算机上运行时，使得如1至10中任一项所述的方法被执行。