CN110704136B - 小程序组件的渲染方法、客户端、电子设备及存储介质 - Google Patents

Abstract

本申请公开了小程序组件的渲染方法、客户端、电子设备及存储介质，涉及计算机技术，尤其涉及一种小程序技术领域。具体实现方案为：终端设备通过浏览器内核在超文本标记语言HTML布局文件中获取第一同层渲染组件的目标渲染参数，目标渲染参数中包括第一同层渲染组件的目标页面区域；通过浏览器内核将目标渲染参数发送至小程序客户端框架；终端设备中的小程序客户端框架根据目标渲染参数，将第一同层渲染组件绘制在目标页面区域，得到绘制后的目标页面区域；终端设备中的浏览器内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中，实现了小程序组件的同层渲染，提高了开发者的灵活性。

Description

小程序组件的渲染方法、客户端、电子设备及存储介质

技术领域

本申请涉及计算机技术，尤其涉及一种小程序技术领域。

背景技术

小程序，是指一种基于特定编程语言开发完成，无需下载和安装，就可以使用的应用(Application，APP)。小程序的最大特点是使用便捷，无需手动在移动端的操作系统中安装，通常小程序依托于大型APP作为载体进行使用。在对小程序的渲染过程中，如何将前端组件及客户端原生组件糅合在同一页面内，并保证正确的布局，成为此技术方案中的难点。

相关技术中，前端组件和客户端原生组件分层渲染，前端组件由浏览器内核在网页视图WebView层中渲染、客户端原生组件由小程序客户端在手机原生布局上渲染，然后通过坐标系统保证两者相对布局符合开发者要求。具体的，小程序页面进行布局时，会在WebView的上方覆盖一层与页面等大的“客户端原生根视图”用于添加客户端原生组件，小程序前端框架根据开发者的页面布局，将客户端原生组件的位置、属性等信息通知到客户端，客户端根据这些信息将客户端原生组件添加到客户端原生根视图的指定位置。

然而，相关技术中，客户端原生根视图覆盖于WebView之上，使得客户端原生组件总是覆盖于前端组件之上，大大限制了开发者的灵活性。

发明内容

本申请实施例提供一种小程序组件的渲染方法、客户端、电子设备及存储介质，实现了对小程序组件的同层渲染，提高了开发者的灵活性。

第一方面，本申请实施例提供一种小程序组件的渲染方法，应用于终端设备中，终端设备包括浏览器内核和小程序客户端框架，包括：

终端设备通过浏览器内核在超文本标记语言HTML布局文件中获取第一同层渲染组件的目标渲染参数，目标渲染参数中包括第一同层渲染组件的目标页面区域；终端设备通过浏览器内核将目标渲染参数发送至小程序客户端框架；终端设备中的小程序客户端框架根据目标渲染参数将第一同层渲染组件绘制在目标页面区域，得到绘制后的目标页面区域；终端设备中的浏览器内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中。

本申请实施例中，通过浏览器内核将目标渲染参数发送至小程序客户端框架，小程序客户端框架根据目标渲染参数在目标页面区域对第一同层渲染组件进行绘制，浏览器内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中，实现了对同层渲染组件与前端组件的同层渲染，不再受客户端原生组件的层级限制，提高了开发者灵活性。

可选的，终端设备通过浏览器内核在超文本标记语言HTML布局文件中获取第一同层渲染组件的目标渲染参数之前，还包括：

终端设备通过小程序客户端框架将小程序包中的布局文件的格式转换为HTML布局文件，布局文件中包括N个网络组件的标签，HTML布局文件中包括N个同层渲染组件各自对应的第一标识和N个同层渲染组件各自对应的渲染参数，N个网络组件的标签与N个第一标识一一对应，N为大于等于1的整数。

本申请实施例中，通过对小程序包中的布局文件的格式进行转换为HTML布局文件，并且对同层渲染组件进行标识，实现了对同层渲染组件的确定，有利于实现同层渲染组件与前端组件的同层渲染。

可选的，终端设备通过浏览器内核将目标渲染参数发送至小程序客户端框架之前，还包括：

终端设备中的小程序客户端框架通过HTML布局文件，确定同层渲染组件工厂，同层渲染组件工厂中包括N个同层渲染组件的创建方法；终端设备通过小程序客户端框架将同层渲染组件工厂注入至浏览器内核中；终端设备通过浏览器内核调用N个同层渲染的创建方法，创建N个同层渲染组件，每个同层渲染组件中包括第二标识，第二标识用于标识同层渲染组件。

本申请实施例中，通过小程序客户端框架将同层渲染组件工厂注入到浏览器内核中，并通过浏览器创建同层渲染组件，有利于同层渲染组件的扩展和对同层渲染组件生命周期的维护。

可选的，终端设备通过浏览器内核将目标渲染参数发送至小程序客户端框架，包括：

终端设备通过浏览器内核在HTML布局文件中获取第一同层渲染组件的第一标识；终端设备中的浏览器内核通过第一同层渲染组件的第一标识与N个同层渲染组件的N个第二标识，在N个同层渲染组件中确定第一同层渲染组件，N个第一标识和N个第二标识存在一一对应关系；终端设备通过浏览器内核将目标渲染参数发送至小程序客户端框架中的第一同层渲染组件。

本申请实施例中，浏览器内核可以通过第一标识和第二标识之间的对应关系，实现通过HTML布局文件中的布局逻辑，控制小程序客户端框架操作对应的同层渲染组件。

可选的，终端设备中的浏览器内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中，包括：

终端设备通过浏览器内核在HTML布局文件中，获取目标页面区域的布局位置信息和层级信息；终端设备中的浏览器内核按照目标页面区域的布局位置信息和层级信息，将绘制后的目标页面区域合成至小程序页面中。

本申请实施例实现了将绘制后的目标页面区域合成至小程序页面中，保证了页面布局的准确性。

可选的，本申请实施例提供的小程序组件的渲染方法，同层渲染组件支持定制层级信息以及支持嵌入到可滑动组件中。

本申请实施例中，通过同层渲染组件支持定制层级信息，不再受层级限制，实现了对同层渲染组件的自由布局，通过同层渲染组件支持嵌入到可滑动组件中，解决了现有技术中延迟、动画不一致等问题。

可选的，本申请实施例提供的小程序组件的渲染方法，还包括：

终端设备通过浏览器内核获取对第二同层渲染组件的用户操作信息；终端设备中的浏览器内核通过用户操作信息生成控制指令；终端设备通过浏览器内核向小程序客户端框架中的第二同层渲染组件发送控制指令；终端设备通过第二同层渲染组件执行控制指令，得到对控制指令的执行结果。

本申请实施例中，通过浏览器内核根据用户操作信息，向小程序客户端发送控制指令，以使小程序客户端框架执行控制指令，实现了用户与小程序页面之间的交互。

可选的，终端设备通过第二同层渲染组件执行控制指令，得到对控制指令的执行结果之后，还包括：

终端设备通过小程序客户端框架向浏览器内核发送执行结果；终端设备通过浏览器内核将执行结果反馈至小程序前端框架。

本申请实施例实现了对执行结果的呈现。

下面介绍本申请实施例提供的客户端、电子设备、计算机可读存储介质以及计算机程序产品，其内容和效果可参考本申请实施例提供的小程序组件的渲染方法，不再赘述。

第二方面，本申请实施例提供一种客户端，包括：浏览器内核和小程序客户端框架，

浏览器内核，用于在超文本标记语言HTML布局文件中获取第一同层渲染组件的目标渲染参数，目标渲染参数中包括第一同层渲染组件的目标页面区域；浏览器内核，还用于将目标渲染参数发送至小程序客户端框架；小程序客户端框架，用于根据目标渲染参数将第一同层渲染组件绘制在目标页面区域，得到绘制后的目标页面区域；浏览器内核，还用于根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中。

可选的，本申请实施例提供的客户端，

小程序客户端框架，还用于将小程序包中的布局文件的格式转换为HTML布局文件，布局文件中包括N个网络组件的标签，HTML布局文件中包括N个同层渲染组件各自对应的第一标识和N个同层渲染组件各自对应的渲染参数，N个网络组件的标签与N个第一标识一一对应，N为大于等于1的整数。

可选的，本申请实施例提供的客户端，

小程序客户端框架，还用于通过HTML布局文件，确定同层渲染组件工厂，同层渲染组件工厂中包括N个同层渲染组件的创建客户端；小程序客户端框架，还用于将同层渲染组件工厂注入至浏览器内核中；浏览器内核，还用于调用N个同层渲染的创建客户端，创建N个同层渲染组件，每个同层渲染组件中包括第二标识，第二标识用于标识同层渲染组件。

可选的，本申请实施例提供的客户端，

浏览器内核，还用于在HTML布局文件中获取第一同层渲染组件的第一标识；浏览器内核，还用于通过第一同层渲染组件的第一标识与N个同层渲染组件的N个第二标识，在N个同层渲染组件中确定第一同层渲染组件，N个第一标识和N个第二标识存在一一对应关系；浏览器内核，还用于将目标渲染参数发送至小程序客户端框架中的第一同层渲染组件。

可选的，本申请实施例提供的客户端，

浏览器内核，还用于在HTML布局文件中，获取目标页面区域的布局位置信息和层级信息；浏览器内核，还用于按照目标页面区域的布局位置信息和层级信息，将绘制后的目标页面区域合成至小程序页面中。

可选的，本申请实施例提供的客户端，同层渲染组件支持定制层级信息以及支持嵌入到可滑动组件中。

可选的，本申请实施例提供的客户端，

浏览器内核，还用于获取对第二同层渲染组件的用户操作信息；浏览器内核，还用于通过用户操作信息生成控制指令；浏览器内核，还用于向小程序客户端框架中的第二同层渲染组件发送控制指令；小程序客户端框架，还用于通过第二同层渲染组件执行控制指令，得到对控制指令的执行结果。

可选的，本申请实施例提供的客户端，

小程序客户端框架，还用于向浏览器内核发送执行结果；浏览器内核，还用于将执行结果反馈至小程序前端框架。

第三方面，本申请实施例提供一种电子设备，包括：

至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行如第一方面或第一方面可选方式提供的方法。

第四方面，本申请实施例提供一种存储有计算机指令的非瞬时计算机可读存储介质，计算机指令用于使计算机执行如第一方面或第一方面可实现方式提供的方法。

第五方面，本申请实施例提供一种计算机程序产品，包括：可执行指令，可执行指令用于实现如第一方面或第一方面可实现方式提供的方法。

上述申请中的一个实施例具有如下优点或有益效果：通过浏览器内核将目标渲染参数发送至小程序客户端框架，小程序客户端框架根据目标渲染参数将第一同层渲染组件绘制在目标页面区域，浏览器内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中，实现了对同层渲染组件与前端组件的同层渲染，不再受客户端原生组件的层级限制，提高了开发者灵活性。

上述可选方式所具有的其他效果将在下文中结合具体实施例加以说明。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是本申请实施例提供的现有小程序渲染技术示意图；

图2是本申请实施例提供的一示例性应用场景图；

图3是本申请一实施例提供的小程序组件的渲染方法的流程示意图；

图4是本申请再一实施例提供的小程序组件的渲染方法的流程示意图

图5是本申请另一实施例提供的小程序组件的渲染方法的流程示意图；

图6是本申请又一实施例提供的小程序组件的渲染方法的流程示意图；

图7是本申请又再一实施例提供的小程序组件的渲染方法的流程示意图；

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

图9是根据本申请实施例的小程序组件的渲染方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

小程序使用便捷，无需手动在移动端的操作系统中安装，通常小程序依托于大型APP作为载体进行使用。在对小程序的渲染过程中，现有技术通常采用前端组件和客户端原生组件分层渲染，前端组件由浏览器内核在网页视图WebView层中渲染、客户端原生组件由小程序客户端在手机原生布局上渲染，然后通过坐标系统保证两者相对布局符合开发者要求。图1是本申请实施例提供的现有小程序渲染技术示意图，如图1所示，小程序页面进行布局时，会在网页视图11的上方覆盖一层与网页视图11的页面等大的客户端原生根视图12，并且通过浏览器内核在网页视图11中渲染前端组件，通过小程序客户端在客户端原生根视图12中渲染客户端原生组件，小程序前端框架根据开发者的页面布局，将客户端原生组件的位置、属性等信息通知到客户端，客户端根据这些信息将客户端原生组件添加到客户端原生根视图12的指定位置。但由于客户端原生根视图覆盖于WebView之上，使得客户端原生组件总是覆盖于前端组件之上，大大限制了开发者的灵活性。为了解决上述问题，本申请实施例提供一种小程序组件的渲染方法、客户端、电子设备及存储介质。

以下，对本申请实施例的示例性应用场景进行介绍。

本申请实施例提供的小程序组件的渲染方法，可以通过终端设备的部分或者全部执行，图2是本申请实施例提供的一示例性应用场景图，如图2所示，本申请实施例提供的小程序组件的渲染方法可以应用于终端设备21中，终端设备21中安装有包括浏览内核和小程序客户端框架的客户端22，本申请实施例对终端设备的类型不做限制，例如，终端设备可以是手机、个人电脑、平板电脑、可穿戴设备、车载终端等，另外，本申请实施例对客户端的类型也不做限制。

基于此，本申请实施例提供了一种小程序组件的渲染方法、客户端、电子设备及存储介质，下面对本申请实施例进行介绍。

图3是本申请一实施例提供的小程序组件的渲染方法的流程示意图，该方法可以由本申请实施例提供的客户端执行，该客户端可以通过软件和/或硬件的方式实现，例如，可以通过终端设备实现，终端设备上安装有包括浏览内核和小程序客户端框架的客户端，终端设备可以是个人电脑、智能手机、用户终端、平板电脑、可穿戴设备等，下面以终端设备为执行主体对小程序组件的渲染方法进行说明，如图3所示，本申请实施例提供的小程序组件的渲染方法，可以包括：

步骤S101：终端设备通过浏览内核在HTML布局文件中获取第一同层渲染组件的目标渲染参数，目标渲染参数中包括第一同层渲染组件的目标页面区域。

HTML布局文件中可以包括多个组件标签以及多个组件各自对应的渲染参数，多个组件各自对应的渲染参数中可以包括组件的渲染格式、渲染内容、组件类型、组件在页面中的位置等信息，不同的组件可能会对应不同的渲染参数，本申请实施例对HTML布局文件中包括的组件数量、组件类型以及每个组件对应的渲染参数的类型等均不做限制，具体可以根据实际需求进行设置。其中，HTML布局文件中包括的组件标签可以包括端上组件标签、同层渲染组件标签等，其中，前端组件可以通过浏览器内核直接在网页中渲染，同层渲染组件的渲染无法通过浏览器内核直接在网页中渲染，可以采用小程序客户端框架渲染，同层渲染组件可以是客户端原生组件中的部分或全部组件。

终端设备中的浏览器内核可以通过加载HTML布局文件，在HTML布局文件中获取第一同层渲染组件的目标渲染参数，本申请实施例对浏览器内核在HTML布局文件中获取第一同层渲染组件的目标渲染参数的过程不做限制。目标渲染参数中包括第一同层渲染组件的目标页面区域(surface)，目标页面区域是指第一同层渲染组件在小程序页面中的渲染区域，除此之外，目标渲染参数中，还可以包括第一同层渲染组件的组件设计、组件样式以及组件内容等参数，本申请实施对目标渲染参数中的具体参数不做限制。

示例性的，为了便于对本申请实施例提供的小程序组件的渲染方法进行介绍，图4是本申请再一实施例提供的小程序组件的渲染方法的流程示意图，下面结合图3和图4，对本申请实施例提供的小程序组件渲染方法进行介绍，如图4所示，在对小程序组件进行渲染之前，首先需要开发者执行步骤1.开发，具体的，开发者根据需求场景编写小程序包，小程序包中包括布局文件；然后执行步骤2.打包安装至终端设备中，终端设备中的小程序前端运行时执行步骤3.加载小程序包，生成HTML布局文件，并以网络组件(web component)形式提供的同层渲染组件来实现小程序中所需的布局，以使小程序布局兼具前端组件的开发方式及客户端原生组件的能力，在加载小程序包之后，终端设备进行HTML页面布局，形成小程序页面，布局文件中可能包括前端组件和同层渲染组件，小程序页面中包括前端组件页面区域和同层渲染组件的目标页面区域，本申请实施例主要是对同层渲染组件的渲染方式进行介绍。终端设备通过浏览器内核执行步骤4.布局，在HTML布局文件中获取第一同层渲染组件的目标渲染参数。

开发者开发的小程序包所采用的开发语言可能不是HTML标准语言，因此，在一种可能的实现方式中，终端设备通过浏览器内核在超文本标记语言HTML布局文件中获取第一同层渲染组件的目标渲染参数之前，还包括：

终端设备通过小程序客户端框架将小程序包中的布局文件的格式转换为HTML布局文件，布局文件中包括N个网络组件的标签，HTML布局文件中包括N个同层渲染组件各自对应的第一标识和N个同层渲染组件各自对应的渲染参数，N个网络组件的标签与N个第一标识一一对应，N为大于等于1的整数。

终端设备通过小程序客户端框架，将小程序包中的布局文件的格式转换为HTML布局文件，小程序包中的布局文件中包括N个网络组件的标签，小程序客户端框架在将小程序包中的布局文件的格式转换为HTML布局文件时，还包括识别N个网络组件的标签，并且将N个网络组件的标签，标识为N个同层渲染组件，得到N个同层渲染组件各自对应的第一标识，N个网络组件的标签与N个第一标识一一对应；并且，将小程序包中的布局文件中网络组件各自对应的渲染参数，转换为N个同层渲染组件各自对应的渲染参数。本申请实施例对此不做限制。

步骤S102：终端设备通过浏览内核将目标渲染参数发送至小程序客户端框架。

如图4所示，浏览器内核执行步骤4.发送渲染参数，具体的将目标渲染参数发送至小程序客户端框架上，渲染参数中包括目标页面区域。步骤S103：终端设备中的小程序客户端框架根据目标渲染参数，将第一同层渲染组件绘制在目标页面区域，得到绘制后的目标页面区域。

终端设备中的小程序客户端框架在接收到目标渲染参数之后，执行步骤5.绘制，示例性的，小程序客户端框架根据目标渲染参数中的第一同层渲染组件的组件设计、组件样式和组件内容，动态的将第一同层渲染组件的画面绘制到目标页面区域中，以得到绘制后的目标页面区域。

在一种可能的实施方式中，同层渲染组件支持定制层级信息以及支持嵌入到可滑动组件中。

步骤S104：终端设备中的浏览内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中。

本申请实施例对浏览器内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中的具体实现方式不做限制，针对不同类型的同层渲染组件，存在不同的目标渲染参数，也存在不同的页面区域，在一种可能的实现方式中，同层渲染组件支持定制层级信息以及支持嵌入到可滑动组件中。

通过对同层渲染组件进行定制层级信息，实现了对同层渲染组件的层级的设置，相比与现有技术，提高了同层渲染组件的灵活性，不再受层级限制，通过对同层渲染组件支持嵌入到可滑动组件中，例如将同层渲染组件嵌入到自带滑动效果的组件中，解决了现有技术中延迟、动画不一致等问题。

在一种可能的实施方式中，终端设备中的浏览器内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中，包括：

终端设备通过浏览器内核在HTML布局文件中，获取目标页面区域的布局位置信息和层级信息；终端设备中的浏览器内核按照目标页面区域的布局位置信息和层级信息，将绘制后的目标页面区域合成至小程序页面中。

终端设备中的浏览器内核通过在HTML布局文件中，获取目标页面区域的布局位置信息和层级信息，并按照目标页面区域的布局位置信息和层级信息，将绘制后的目标页面区域合成在小程序页面中，实现了对同层渲染组件的渲染和显示。

本申请实施例中，通过浏览器内核将目标渲染参数发送至小程序客户端框架，目标渲染参数中包括第一同层渲染组件的目标页面区域；小程序客户端根据目标渲染参数将第一同层渲染组件绘制在目标页面区域，得到绘制后的目标页面区域；浏览器内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中，实现了对小程序中同层渲染组件与前端组件的同层渲染，不再受客户端原生组件的层级限制，提高了开发者灵活性，并且，由于同层渲染组件属于HTML页面的文档对象模型(Document Object Model，DOM)，对同层渲染组件的滚动操作、动画显示等，均与前端组件完全一致，不再存在延迟以及动画不一致的问题；同层渲染组件基于HTML通用标准语言实现，因此同层渲染组件支持层叠样式表(Cascading Style Sheets，CSS)定义样式，并且，对于开发者而言，无需理解和区分同层渲染组件和客户端原生组件的概念，均可以按照前端组件的规范和能力开发，不会出现实际页面布局与预期不符的情况，切实符合前端开发者的开发习惯。

在一种可能的实现方式中，图5是本申请另一实施例提供的小程序组件的渲染方法的流程示意图，该方法可以由本申请实施例提供的客户端执行，该客户端可以通过软件和/或硬件的方式实现，例如，可以通过终端设备实现，终端设备上安装有包括浏览内核和小程序客户端框架的客户端，终端设备可以是个人电脑、智能手机、用户终端、平板电脑、可穿戴设备等，下面以终端设备为执行主体对小程序组件的渲染方法进行说明，如图5所示，本申请实施例提供的小程序组件的渲染方法，在步骤S102，即终端设备通过浏览器内核将目标渲染参数发送至小程序客户端框架之前，还包括：

步骤S201：终端设备中的小程序客户端框架通过HTML布局文件，确定同层渲染组件工厂，同层渲染组件工厂中包括N个同层渲染组件的创建方法。

通过HTML布局文件，可以获取小程序渲染需要的同层渲染组件的类型、同层渲染组件的数量等信息，终端设备中的小程序客户端框架，通过HTML布局文件，确定同层渲染组件工厂，同层渲染组件工厂中包括N个同层渲染组件的创建方法，其中，N为大于等于1的整数，N的数值是通过HTML布局文件中需要的同层渲染组件的个数或类别确定的。针对不同的同层渲染组件，存在不同的创建方法，本申请实施例对同层渲染组件工厂中的同层渲染组件的类型和数量不做限制，例如，同层渲染组件可以包括视频组件、音频组件、输入端口组件等。另外，本申请实施例对同层渲染组件的创建方法也不做限制。

步骤S202：终端设备通过小程序客户端框架将同层渲染组件工厂注入至浏览器内核中。

终端设备通过小程序客户端框架将同层渲染组件工厂注入至浏览器内核中，浏览器内核可以根据HTML布局文件中的页面布局需求，创建需要的同层渲染组件。

步骤S203：终端设备通过浏览器内核调用N个同层渲染的创建方法，创建N个同层渲染组件。

为了便于浏览器内核为N个同层渲染组件的维护，每个同层渲染组件中还可以包括第二标识，第二标识用于标识同层渲染组件，本申请实施例对第二标识的具体形式不做限制。

本申请实施例中，通过小程序客户端框架将同层渲染组件工厂注入到浏览器内核中，并通过浏览器创建同层渲染组件，有利于同层渲染组件的扩展和对同层渲染组件生命周期的维护。

在上述实施例的基础上，在一种可能的实施方式中，图6是本申请又一实施例提供的小程序组件的渲染方法的流程示意图，该方法可以由本申请实施例提供的客户端执行，该客户端可以通过软件和/或硬件的方式实现，例如，可以通过终端设备实现，终端设备上安装有包括浏览内核和小程序客户端框架的客户端，终端设备可以是个人电脑、智能手机、用户终端、平板电脑、可穿戴设备等，下面以终端设备为执行主体对小程序组件的渲染方法进行说明，如图6所示，本申请实施例提供的小程序组件的渲染方法，在步骤S102还可以包括：

步骤S301：终端设备通过浏览内核在HTML布局文件中获取第一同层渲染组件的第一标识。

HTML布局文件中包括N个同层渲染组件的N个第一标识，终端设备可以通过浏览内核加载HTML布局文件时，获取第一同层渲染组件的第一标识，本申请实施例对终端设备通过浏览内核在HTML布局文件中获取第一同层渲染组件的第一标识的方式不做限制。

步骤S302：终端设备中的浏览内核通过第一同层渲染组件的第一标识与N个同层渲染组件的N个第二标识，在N个同层渲染组件中确定第一同层渲染组件，N个第一标识和N个第二标识存在一一对应关系。

N个第一标识和N个第二标识存在一一对应关系，本申请实施例对N个第一标识和N个第二标识存在一一对应关系的表示方式不做限制，例如，可以通过第一标识和第二标识的关系列表实现。

终端设备中的浏览内核可以通过第一同层渲染组件的第一标识，以及N个第一标识和N个第二标识之间的对应关系，确定第一同层渲染组件的第二标识，然后通过第一同层渲染组件的第二标识在N个同层渲染组件中确定第一同层渲染组件。

步骤S303：终端设备通过浏览内核将目标渲染参数发送至小程序客户端框架中的第一同层渲染组件。

在确定第一同层渲染组件之后，终端设备可以通过浏览内核将目标渲染参数发送至小程序客户端框架中的第一同层渲染组件，以使第一同层渲染组件根据目标渲染参数在目标页面区域中进行绘制，实现对第一同层渲染组件的同层渲染。

在上述任一实施例的基础上，为了实现用户与小程序页面之间的交互，图7是本申请又再一实施例提供的小程序组件的渲染方法的流程示意图，该方法可以由本申请实施例提供的客户端执行，该客户端可以通过软件和/或硬件的方式实现，例如，可以通过终端设备实现，终端设备上安装有包括浏览内核和小程序客户端框架的客户端，终端设备可以是个人电脑、智能手机、用户终端、平板电脑、可穿戴设备等，下面以终端设备为执行主体对小程序组件的渲染方法进行说明，如图7所示，本申请实施例提供的小程序组件的渲染方法，还可以包括：

步骤S401：终端设备通过浏览器内核获取对第二同层渲染组件的用户操作信息。

结合图4，用户在需要对小程序页面进行控制时，对小程序页面执行步骤6.用户操作，在用户对小程序页面进行操作时，终端设备通过浏览器内核获取对第二同层渲染组件的用户操作信息，即，浏览器内核执行步骤7.获取用户操作信息，第二同层渲染组件是用户操作的页面区域对应的同层渲染组件，例如，当用户对页面中的视频进行操作时，第二同层渲染组件为该视频组件。用户操作信息可以包括用户对页面的操作动作，例如：点击、滑动等操作；

步骤S402：终端设备中的浏览器内核通过用户操作信息生成控制指令。

针对不同的页面区域，用户的不同操作需要终端设备执行的指令不同，终端设备中的浏览器内核通过用户操作信息生成控制指令，例如：用户操作信息是对视频界面中的点击了暂停按钮，则浏览器内核生成的控制指令用于使视频组件执行对视频执行暂停指令等，本申请实施例浏览器内核通过用户操作信息生成的控制指令不做限制。

步骤S403：终端设备通过浏览器内核向小程序客户端框架中的第二同层渲染组件发送控制指令。

如图4所示，浏览器内核执行步骤8.发送控制指令，向小程序客户端框架发送在步骤S402中生成的控制指令。

步骤S404：终端设备通过第二同层渲染组件执行控制指令，得到对控制指令的执行结果。

终端设备通过浏览器内核向小程序客户端框架中的第二同层渲染组件发送控制指令之后，通过第二同层渲染组件执行控制指令，得到对控制指令的执行结果。

执行结果可以是通知消息或者是数据流，例如，用户需要暂停视频，则执行结果可以是通知消息，通知消息中包括是否暂停视频的执行结果；再例如，用户需要打开本地的图片，则执行结果可以是用户需要打开的本地的图片，本申请实施例对此不做限制。

在一种可能的实施方式中，终端设备通过第二同层渲染组件执行控制指令，得到对控制指令的执行结果之后，还包括：

终端设备通过小程序客户端框架向浏览器内核发送执行结果；终端设备通过浏览器内核将执行结果反馈至小程序前端框架。

如图4所示，小程序客户端框架执行步骤9.发送执行结果，将执行结果发送至浏览器内核，浏览器内核接收到执行结果之后，执行步骤10.更新页面区域，终端设备中的页面被更新之后呈现给用户。

本申请实施例中，通过浏览器内核根据用户操作信息，向小程序客户端发送控制指令，以使小程序客户端框架执行控制指令，实现了用户与小程序页面之间的交互。

下面介绍本申请实施例提供的客户端、电子设备、可读存储介质，其内容和效果可参考上述方法实施例，不再赘述。

图8是本申请一实施例提供的客户端的结构示意图，该客户端可以通过软件和/或硬件的方式实现，例如，可以通过终端设备实现，终端设备上安装有包括浏览内核和小程序客户端框架的客户端，终端设备可以是个人电脑、智能手机、用户终端、平板电脑、可穿戴设备等，如图8所示，本申请实施例提供的客户端70可以包括浏览器内核71和小程序客户端框架72。

浏览器内核71，用于在超文本标记语言HTML布局文件中获取第一同层渲染组件的目标渲染参数，目标渲染参数中包括第一同层渲染组件的目标页面区域；浏览器内核71，还用于将目标渲染参数发送至小程序客户端框架72；小程序客户端框架72，用于根据目标渲染参数将第一同层渲染组件绘制在目标页面区域，得到绘制后的目标页面区域；浏览器内核71，还用于根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中。

可选的，小程序客户端框架72，还用于将小程序包中的布局文件的格式转换为HTML布局文件，布局文件中包括N个网络组件的标签，HTML布局文件中包括N个同层渲染组件各自对应的第一标识和N个同层渲染组件各自对应的渲染参数，N个网络组件的标签与N个第一标识一一对应，N为大于等于1的整数。

可选的，小程序客户端框架72，还用于通过HTML布局文件，确定同层渲染组件工厂，同层渲染组件工厂中包括N个同层渲染组件的创建客户端；小程序客户端框架72，还用于将同层渲染组件工厂注入至浏览器内核71中；浏览器内核71，还用于调用N个同层渲染的创建客户端，创建N个同层渲染组件，每个同层渲染组件中包括第二标识，第二标识用于标识同层渲染组件。

可选的，浏览器内核71，还用于在HTML布局文件中获取第一同层渲染组件的第一标识；浏览器内核71，还用于通过第一同层渲染组件的第一标识与N个同层渲染组件的N个第二标识，在N个同层渲染组件中确定第一同层渲染组件，N个第一标识和N个第二标识存在一一对应关系；浏览器内核71，还用于将目标渲染参数发送至小程序客户端框架72中的第一同层渲染组件。

可选的，浏览器内核71，还用于在HTML布局文件中，获取目标页面区域的布局位置信息和层级信息；浏览器内核71，还用于按照目标页面区域的布局位置信息和层级信息，将绘制后的目标页面区域合成至小程序页面中。

可选的，同层渲染组件支持定制层级信息以及支持嵌入到可滑动组件中。

可选的，浏览器内核71，还用于获取对第二同层渲染组件的用户操作信息；浏览器内核71，还用于通过用户操作信息生成控制指令；浏览器内核71，还用于向小程序客户端框架72中的第二同层渲染组件发送控制指令；小程序客户端框架72，还用于通过第二同层渲染组件执行控制指令，得到对控制指令的执行结果。

可选的，小程序客户端框架72，还用于向浏览器内核71发送执行结果；浏览器内核71，还用于将执行结果反馈至小程序前端框架。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

图9是根据本申请实施例的小程序组件的渲染方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图9所示，该电子设备包括：一个或多个处理器801、存储器802，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图9中以一个处理器801为例。

存储器802即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的产品评估方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的产品评估方法。

存储器802作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的产品评估方法对应的程序指令/模块(例如，附图8所示的浏览器内核71和小程序客户端框架72)。处理器801通过运行存储在存储器802中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的产品评估方法。

存储器802可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据产品评估方法的电子设备的使用所创建的数据等。此外，存储器802可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器802可选包括相对于处理器801远程设置的存储器，这些远程存储器可以通过网络连接至产品评估方法的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

产品评估方法的电子设备还可以包括：输入装置803和输出装置804。处理器801、存储器802、输入装置803和输出装置804可以通过总线或者其他方式连接，图9中以通过总线连接为例。

输入装置803可接收输入的数字或字符信息，以及产生与产品评估方法的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置804可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

根据本申请实施例的技术方案，通过浏览器内核将目标渲染参数发送至小程序客户端框架，目标渲染参数中包括第一同层渲染组件的目标页面区域；小程序客户端根据目标渲染参数在目标页面区域对第一同层渲染组件进行绘制，得到绘制后的目标页面区域；浏览器内核根据HTML布局文件将绘制后的目标页面区域合成至小程序页面中，实现了对同层渲染组件与前端组件的同层渲染，不再受客户端原生组件的层级限制，提高了开发者灵活性，并且，由于同层渲染组件属于HTML页面的DOM，对同层渲染组件的滚动操作、动画显示等，均与前端组件完全一致，不再存在延迟以及动画不一致的问题；同层渲染组件基于HTML通用标准语言实现，因此同层渲染组件支持CSS定义样式，并且，对于开发者而言，无需理解和区分同层渲染组件和客户端原生组件的概念，均可以按照前端组件的规范和能力开发，不会出现实际页面布局与预期不符的情况，切实符合前端开发者的开发习惯。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (14)

1.一种小程序组件的渲染方法，应用于终端设备中，所述终端设备包括浏览器内核和小程序客户端框架，其特征在于，包括：

所述终端设备通过所述浏览器内核在超文本标记语言HTML布局文件中获取第一同层渲染组件的目标渲染参数，所述目标渲染参数中包括所述第一同层渲染组件的目标页面区域；

所述终端设备通过所述浏览器内核将所述目标渲染参数发送至所述小程序客户端框架；

所述终端设备中的所述小程序客户端框架根据所述目标渲染参数，将所述第一同层渲染组件绘制在所述目标页面区域，得到绘制后的目标页面区域；所述同层渲染组件支持定制层级信息以及支持嵌入到可滑动组件中；

所述终端设备中的所述浏览器内核根据所述HTML布局文件将所述绘制后的目标页面区域合成至小程序页面中；

所述终端设备通过所述浏览器内核将所述目标渲染参数发送至所述小程序客户端框架之前，还包括：

所述终端设备中的所述小程序客户端框架通过所述HTML布局文件，确定同层渲染组件工厂，所述同层渲染组件工厂中包括N个同层渲染组件的创建方法；

所述终端设备通过所述小程序客户端框架将所述同层渲染组件工厂注入至所述浏览器内核中；

所述终端设备通过所述浏览器内核调用所述N个同层渲染的创建方法，创建所述N个同层渲染组件，每个同层渲染组件中包括第二标识，所述第二标识用于标识同层渲染组件。

2.根据权利要求1所述的方法，其特征在于，所述终端设备通过所述浏览器内核在超文本标记语言HTML布局文件中获取第一同层渲染组件的目标渲染参数之前，还包括：

所述终端设备通过所述小程序客户端框架将小程序包中的布局文件的格式转换为HTML布局文件，所述布局文件中包括N个网络组件的标签，所述HTML布局文件中包括N个同层渲染组件各自对应的第一标识和所述N个同层渲染组件各自对应的渲染参数，所述N个网络组件的标签与N个所述第一标识一一对应，N为大于等于1的整数。

3.根据权利要求1所述的方法，其特征在于，所述终端设备通过所述浏览器内核将所述目标渲染参数发送至所述小程序客户端框架，包括：

所述终端设备通过所述浏览器内核在HTML布局文件中获取所述第一同层渲染组件的第一标识；

所述终端设备中的所述浏览器内核通过所述第一同层渲染组件的第一标识与所述N个同层渲染组件的N个所述第二标识，在所述N个同层渲染组件中确定所述第一同层渲染组件，N个所述第一标识和N个所述第二标识存在一一对应关系；

所述终端设备通过所述浏览器内核将所述目标渲染参数发送至所述小程序客户端框架中的所述第一同层渲染组件。

4.根据权利要求3所述的方法，其特征在于，所述终端设备中的所述浏览器内核根据所述HTML布局文件将所述绘制后的目标页面区域合成至小程序页面中，包括：

所述终端设备通过所述浏览器内核在所述HTML布局文件中，获取所述目标页面区域的布局位置信息和层级信息；

所述终端设备中的所述浏览器内核按照所述目标页面区域的所述布局位置信息和所述层级信息，将所述绘制后的目标页面区域合成至小程序页面中。

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

所述终端设备通过所述浏览器内核获取对第二同层渲染组件的用户操作信息；

所述终端设备中的所述浏览器内核通过所述用户操作信息生成控制指令；

所述终端设备通过所述浏览器内核向所述小程序客户端框架中的第二同层渲染组件发送所述控制指令；

所述终端设备通过所述第二同层渲染组件执行所述控制指令，得到对所述控制指令的执行结果。

6.根据权利要求5所述的方法，其特征在于，所述终端设备通过所述第二同层渲染组件执行所述控制指令，得到对所述控制指令的执行结果之后，还包括：

所述终端设备通过所述小程序客户端框架向所述浏览器内核发送所述执行结果；

所述终端设备通过所述浏览器内核将所述执行结果反馈至小程序前端框架。

7.一种客户端，其特征在于，包括：浏览器内核和小程序客户端框架，

所述浏览器内核，用于在超文本标记语言HTML布局文件中获取第一同层渲染组件的目标渲染参数，所述目标渲染参数中包括所述第一同层渲染组件的目标页面区域；

所述浏览器内核，还用于将所述目标渲染参数发送至所述小程序客户端框架；

所述小程序客户端框架，用于根据所述目标渲染参数，将所述第一同层渲染组件绘制在所述目标页面区域，得到绘制后的目标页面区域；所述同层渲染组件支持定制层级信息以及支持嵌入到可滑动组件中；

所述浏览器内核，还用于根据所述HTML布局文件将所述绘制后的目标页面区域合成至小程序页面中；

所述小程序客户端框架，还用于通过所述HTML布局文件，确定同层渲染组件工厂，所述同层渲染组件工厂中包括N个同层渲染组件的创建客户端；

所述小程序客户端框架，还用于将所述同层渲染组件工厂注入至所述浏览器内核中；

所述浏览器内核，还用于调用所述N个同层渲染的创建客户端，创建所述N个同层渲染组件，每个同层渲染组件中包括第二标识，所述第二标识用于标识同层渲染组件。

8.根据权利要求7所述的客户端，其特征在于，

所述小程序客户端框架，还用于将小程序包中的布局文件的格式转换为HTML布局文件，所述布局文件中包括N个网络组件的标签，所述HTML布局文件中包括N个同层渲染组件各自对应的第一标识和所述N个同层渲染组件各自对应的渲染参数，所述N个网络组件的标签与N个所述第一标识一一对应，N为大于等于1的整数。

9.根据权利要求7所述的客户端，其特征在于，

所述浏览器内核，还用于在HTML布局文件中获取所述第一同层渲染组件的第一标识；

所述浏览器内核，还用于通过所述第一同层渲染组件的第一标识与所述N个同层渲染组件的N个所述第二标识，在所述N个同层渲染组件中确定所述第一同层渲染组件，N个所述第一标识和N个所述第二标识存在一一对应关系；

所述浏览器内核，还用于将所述目标渲染参数发送至所述小程序客户端框架中的所述第一同层渲染组件。

10.根据权利要求9所述的客户端，其特征在于，

所述浏览器内核，还用于在所述HTML布局文件中，获取所述目标页面区域的布局位置信息和层级信息；

所述浏览器内核，还用于按照所述目标页面区域的所述布局位置信息和所述层级信息，将所述绘制后的目标页面区域合成至小程序页面中。

11.根据权利要求7-10任一项所述的客户端，其特征在于，

所述浏览器内核，还用于获取对第二同层渲染组件的用户操作信息；

所述浏览器内核，还用于通过所述用户操作信息生成控制指令；

所述浏览器内核，还用于向所述小程序客户端框架中的第二同层渲染组件发送所述控制指令；

所述小程序客户端框架，还用于通过所述第二同层渲染组件执行所述控制指令，得到对所述控制指令的执行结果。

12.根据权利要求11所述的客户端，其特征在于，

所述小程序客户端框架，还用于向所述浏览器内核发送所述执行结果；

所述浏览器内核，还用于将所述执行结果反馈至小程序前端框架。

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

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-6中任一项所述的方法。

14.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求1-6中任一项所述的方法。

Images