CN116931914A - 页面渲染方法、装置、电子设备和计算机可读存储介质 - Google Patents

Abstract

本申请实施例公开了一种页面渲染方法、装置、电子设备和计算机可读存储介质；在本申请实施例中，获取待渲染页面的目标编译组件，所述目标编译组件为根据目标开发框架的组件构建标准构建的组件；确定所述待渲染页面的目标渲染框架；若所述目标渲染框架与所述目标开发框架不同，则将所述组件构建标准在所述目标渲染框架中进行注册；通过所述目标渲染框架，根据注册后的组件构建标准，调用所述目标编译组件对所述待渲染页面进行渲染。本申请实施例可以提高组件的开发效率和协同性。

Description

页面渲染方法、装置、电子设备和计算机可读存储介质

技术领域

本申请涉及软件开发技术领域，具体涉及一种页面渲染方法、装置、电子设备和计算机可读存储介质。

背景技术

随着科学技术的发展，各种各样的客户端越来越多。在客户端被使用之前，需要采用组件对客户端的页面进行渲染。

目前，开发人员一般都是通过渲染框架，采用渲染框架构建的组件去进行渲染。然而，不同渲染框架的开发语言不同，从而使得当包含相同信息的页面需要在多种客户端中进行渲染时，需要针对不同的客户端对应的渲染框架去构建组件，较为繁琐，开发效率低，缺乏协同性。

发明内容

本申请实施例提供一种页面渲染方法、装置、电子设备和计算机可读存储介质，可以解决组件开发过程中，开发效率低，缺乏协同性的技术问题。

一种页面渲染方法，包括：

获取待渲染页面的目标编译组件，上述目标编译组件为根据目标开发框架的组件构建标准构建的组件；

确定上述待渲染页面的目标渲染框架；

若上述目标渲染框架与上述目标开发框架不同，则将上述组件构建标准在上述目标渲染框架中进行注册；

通过上述目标渲染框架，根据注册后的组件构建标准，调用上述目标编译组件对上述待渲染页面进行渲染。

相应地，本申请实施例提供一种页面渲染装置，包括：

获取模块，用于获取待渲染页面的目标编译组件，上述目标编译组件为根据目标开发框架的组件构建标准构建的组件；

确定模块，用于确定上述待渲染页面的目标渲染框架。

注册模块模块，用于若上述目标渲染框架与上述目标开发框架不同，则将上述组件构建标准在上述目标渲染框架中进行注册；

渲染模块，用于通过上述目标渲染框架，根据注册后的组件构建标准，调用上述目标编译组件对上述待渲染页面进行渲染。

可选地，获取模块具体用于执行：

向服务器发送组件获取请求，上述组件获取请求包括上述待渲染页面的目标组件标识，上述服务器包括根据上述目标开发框架的上述组件构建标准构建的编译组件；

接收上述服务器返回的上述目标组件标识对应的目标编译组件和上述组件构建标准。

可选地，获取模块具体用于执行：

显示组件选择界面，上述组件选择界面包括至少一个组件标识；

响应于对上述组件标识的标识选择操作，根据上述标识选择操作对应的目标组件标识生成组件获取请求；

向服务器发送组件获取请求。

可选地，获取模块还用于执行：

响应于对上述组件标识的标识选择操作，显示上述标识选择操作对应的目标组件标识对应的配置界面，上述配置界面包括配置信息控件；

响应于对上述配置信息控件的触发操作，生成上述目标组件标识的初始配置信息。

相应地，渲染模块用于执行：

通过上述目标渲染框架，根据注册后的组件构建标准，调用上述目标编译组件将上述初始配置信息渲染至上述待渲染页面上。

可选地，在上述配置界面还包括链接输入控件。

相应地，获取模块还用于执行：

响应于对上述链接输入控件的输入操作，将上述输入操作对应的列表跳转链接与上述目标编译组件进行关联，以响应于对上述目标编译组件的触发操作，显示上述列表跳转链接对应的页面。

可选地，获取模块具体用于执行：

显示组件管理界面，上述组件管理界面包括组件选择控件；

响应于对上述组件选择控件的触发操作，向上述服务器发送更新请求；

接收上述服务器基于上述更新请求返回的组件标识；

基于上述组件标识，显示上述组件选择界面。

可选地，注册模块具体用于执行：

加载上述目标编译组件；

若加载完成且上述目标渲染框架与上述目标开发框架不同，则将上述组件构建标准在上述目标渲染框架中进行注册；

若加载失败，则确定已加载次数；

若上述已加载次数小于或等于预设加载次数，则返回加载上述目标编译组件。

此外，本申请实施例还提供一种电子设备，包括处理器和存储器，上述存储器存储有计算机程序，上述处理器用于运行上述存储器内的计算机程序实现本申请实施例提供的页面渲染方法。

此外，本申请实施例还提供一种计算机可读存储介质，上述计算机可读存储介质存储有计算机程序，上述计算机程序适于处理器进行加载，以执行本申请实施例所提供的任一种页面渲染方法。

此外，本申请实施例还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现本申请实施例所提供的任一种页面渲染方法。

在本申请实施例中，先获取待渲染页面的目标编译组件，目标编译组件为根据目标开发框架的组件构建标准构建的组件。然后确定待渲染页面的目标渲染框架。若目标渲染框架与目标开发框架不同，则将组件构建标准在目标渲染框架中进行注册。最后通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染

即在本申请中，当目标渲染框架和目标开发框架不同时，可以将目标开发框架的组件构建标准在目标渲染框架中进行注册，从而使得目标渲染框架可以根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染，进而使得针对不同的框架和不同的客户端无需构建不同的组件，较为便捷，提高了研发效率和协同性。

附图说明

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

图1是本申请实施例提供的页面渲染过程的场景示意图；

图2是本申请实施例提供的页面渲染方法的流程示意图；

图3是本申请实施例提供的源组件的构建和编译过程的示意图；

图4是本申请实施例提供的源组件的构建、编译以及发布过程的示意图；

图5是本申请实施例提供的源组件的构建、编译以及发布过程的交互示意图；

图6是本申请实施例提供的组件构建标准的注册过程的示意图；

图7是本申请实施例提供的配置界面的示意图；

图8是本申请实施例提供的初始配置信息的示意图；

图9是本申请实施例提供的另一种页面渲染方法的流程示意图；

图10是本申请实施例提供的编译组件的示意图；

图11是本申请实施例提供的第一软件开发工具包和第二软件开发工具包的示意图；

图12是本申请实施例提供的将编译组件上传至服务器中的过程的示意图；

图13是本申请实施例提供的渲染页面的示意图；

图14是本申请实施例提供的页面渲染装置的结构示意图；

图15是本申请实施例提供的电子设备的结构示意图。

具体实施方式

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

本申请实施例提供一种页面渲染方法、装置、电子设备和计算机可读存储介质。其中，该页面渲染装置可以集成在电子设备中，该电子设备可以是服务器，也可以是终端等设备。

其中，服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、网络加速服务(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

并且，其中多个服务器可组成为一区块链，而服务器为区块链上的节点。

终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请在此不做限制。

例如，如图1所示，终端可以向服务器发送组件获取请求，组件获取请求包括待渲染页面的目标组件标识，服务器包括根据目标开发框架的组件构建标准构建的编译组件。服务器再从编译组件中查找目标组件标识对应的目标编译组件，并将目标编译组件和目标开发框架的组件构建标准返回至终端，终端从而接收到目标编译组件和组件构建标准。最后，终端将组件构建标准在目标渲染框架中进行注册，使得终端可以通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染。

另外，本申请实施例中的“多个”指两个或两个以上。本申请实施例中的“第一”和“第二”等用于区分描述，而不能理解为暗示相对重要性。

以下分别进行详细说明。需要说明的是，以下实施例的描述顺序不作为对实施例优选顺序的限定。

在本实施例中，将从页面渲染装置的角度进行描述，为了方便对本申请的页面渲染方法进行说明，以下将以页面渲染装置集成在第一终端中进行详细说明，即以第一终端作为执行主体进行详细说明。

请参阅图2，图2是本申请一实施例提供的页面渲染方法的流程示意图。该页面渲染方法可以包括：

S201、获取待渲染页面的目标编译组件，目标编译组件为根据目标开发框架的组件构建标准构建的组件。

待渲染页面可以为开发人员待开发的页面，一个待渲染页面可以包括至少一个编译组件。

待渲染页面可以为客户端的页面，即第一终端可以响应于对客户端的触发操作，显示待渲染页面。其中，客户端可以以应用程序的形式存在，或者，客户端也可以以小程序的形式存在，又或者，客户端也可以以网页的形式存在，用户可以根据实际情况进行设置，本实施例在此不做限定。

当开发人员想要对待渲染页面进行渲染时，开发人员可以在第一终端显示的待渲染页面上进行触发，使得第一终端可以响应于对待渲染页面的触发操作，显示组件选择界面，组件选择界面包括组件标识。然后，第一终端再响应于对组件标识的选择操作，获取标识选择操作对应的目标组件标识，对应的目标编译组件，即响应于对组件标识的选择操作，从组件标识中筛选出目标组件标识，目标组件标识对应的编译组件即为目标编译组件。

也即是，此时，获取待渲染页面的目标编译组件，包括：

显示组件选择界面，组件选择界面包括至少一个组件标识；

响应于对组件标识的标识选择操作，获取标识选择操作对应的目标组件标识，对应的目标编译组件。

目标开发框架可以为VUE框架、React框架、Weex框架以及React Native中的一种。目标开发框架的组件构建标准，指目标开发框架的开发语言的语法标准。

编译组件可以存储在第一终端中，然后第一终端从本地存储的编译组件中筛选出目标编译组件。或者，编译组件可以是用户在第一终端进行开发的组件，然后第一终端将编译组件上传至服务器，第一终端再从服务器中获取目标编译组件。又或者，编译组件可以是用户在第二终端进行开发的组件，然后第二终端再将编译组件上传至服务器，以便第一终端可以从服务器中获取目标编译组件。

所以，在一些实施例中，获取待渲染页面的目标编译组件，包括：

向服务器发送组件获取请求，组件获取请求包括待渲染页面的目标组件标识，服务器包括根据目标开发框架的组件构建标准构建的编译组件；

接收服务器返回的目标组件标识对应的目标编译组件和组件构建标准。

服务器在接收到组件获取请求之后，从编译组件从筛选出目标组件标识对应的目标编译组件，然后再将目标编译组件和组件构建标准返回至第一终端。

可选地，组件获取请求中还可以包括待渲染页面的目标渲染框架，则服务器在接收到组件获取请求之后，如果目标渲染框架与目标开发框架不相同，则服务器再将组件构建标准和目标编译组件返回至第一终端，如果目标渲染框架与目标开发框架相同，则服务器可以只返回目标编译组件。

在本实施例中，目标编译组件可以是第三方开发人员开发的组件，然后本开发人员需要通过目标编译组件渲染待渲染页面时，可以通过第一终端从服务器中获取目标编译组件。

由于待渲染页面的目标编译组件可以包括至少一个，因此，在一些实施例中，第一终端也可以从本地获取待渲染页面的一些目标编译组件，从服务器中获取待渲染页面的另一些目标编译组件。

其中，向服务器发送组件获取请求，包括：

显示组件选择界面，组件选择界面包括至少一个组件标识；

响应于对组件标识的标识选择操作，根据标识选择操作对应的目标组件标识生成组件获取请求；

向服务器发送组件获取请求。

在另一些实施例中，在获取待渲染页面的目标编译组件之前，可以先构建源组件，并对源组件进行编译，得到编译组件，并将编译组件进行发布。所以，参照图3，构建源组件和编译源组件的过程可以为：

通过目标开发框架构建源组件，并将源组件存储在项目文件夹中；

当获取到组件发布消息时，将源组件从项目文件中复制至编译文件夹中；

基于编译文件夹，运行节点包管理器(npm install)，生成npm包(generateManifest)；

通过发布工具(fbit run CLI)，调用编译工具(execa.shell VUE-cli-servicebulid)对npm包中源组件进行编译，得到编译组件。

编译组件指包含了执行逻辑的文件夹，即在本实施例中，将源组件编译为一个独立的文件，方便直接加载。

其中，由于如果一个组件已经发布过，则会存在历史版本的源组件对应的npm包，为了保证源组件的版本和组件对应的npm包的版本一致，在基于编译文件夹，运行节点包管理器之前，可以先确定源组件的状态，如果源组件的状态为第一次发布状态，则在基于编译文件夹，运行节点包管理器，生成npm包之后，可以直接通过发布工具，调用编译工具对npm包中源组件进行编译，得到编译组件，并通过发布工具将npm包发送至GIT仓库进行存储。

如果源组件的状态为已发布状态，则在基于编译文件夹，运行节点包管理器，生成npm包之后，可以对源组件对应的npm包的版本进行更新，即将当前版本的源组件对应的npm包，通过发布工具发送至GIT仓库进行更新存储，并通过发布工具，调用编译工具对npm包中源组件进行编译，得到编译组件。

应理解，第一终端通过发布工具将当前版本的源组件对应的npm包发送至GIT仓库之后，GIT仓库可以将历史版本的源组件对应的npm包和当前版本的源组件对应的npm包进行合并，得到源组件对应的npm包，方便后续的处理。或者，GIT仓库也可以是将当前版本的源组件对应的npm包进行存储，将历史版本的源组件对应的npm包删除。

第一终端得到编译组件之后，再将编译组件进行发布，即将编译组件发送至服务器中进行存储。最后，第一终端可以将编译组件和待渲染页面进行关联，即将编译组件和客户端进行关联。

比如，如图4所示，当第一终端接收到组件发布消息时，第一终端可以通过发布工具先在组件中心服务器中进行登录，然后第一终端获取源组件的标识，根据源组件的标识确定源组件的状态，并将源组件的状态发送至GIT仓库中进行存储。如果源组件的状态为已发布状态，则对源组件对应的npm包的版本进行更新发布，然后通过发布工具，调用编译工具对npm包中源组件进行编译，得到编译组件。接着，第一终端通过op服务器将编译组件发送至组件中心服务器进行更新存储。最后，第一终端可以将编译组件和待渲染页面进行关联，即将编译组件和客户端进行关联。

此时，对于源组件的编译和发布过程，第一终端、发布工具、组件中心服务器、GIT仓库、npm服务器以及op服务器之间的交互过程可以如图5所示。

第一终端将源组件的组件发布消息发送至发布工具。发布工具再基于组件发布消息在组件中心服务器进行登录，并确定源组件的状态，然后将源组件的发布记录和源组件的状态发送至GIT仓库中进行存储。接着，如果源组件的状态为已发布状态，发布工具则对源组件在npm服务器中对应的npm包的版本进行更新，并调用编译工具对源组件进行编译，得到编译组件。

发布工具再将编译组件返回至第一终端。第一终端获取编译组件后，再将编译组件发送至op服务器，op服务器再将编译组件发送至组件中心服务器。最后，第一终端再通过发布工具将编译组件与待渲染页面进行关联。

需要说明的是，上述源组件的编译和发布过程，也可以通过第二终端执行，本实施例在此不再赘述。并且，为了保证编译组件的发布成功，还可以对编译组件进行预发布，编译组件的预发布的过程可以参照编译组件的发布过程，本实施例在此不再赘述。

S202、确定待渲染页面的目标渲染框架。

第一终端在获取到待渲染页面之后，可以确定待渲染页面的目标渲染框架。比如，当待渲染页面对应的客户端以应用程序的形式存在时，待渲染页面的目标渲染框架可以为VUE框架，当待渲染页面对应的客户端以网页的形式存在时，待渲染页面的目标渲染框架可以为H5框架。

目标渲染框架可以为VUE框架、React框架、Weex框架以及React Native中的一种。

S203、若目标渲染框架与目标开发框架不同，则将组件构建标准在目标渲染框架中进行注册。

因为如果目标渲染框架与目标开发框架不同，目标编译组件是根据目标开发框架的组件构建标识构建的，所以目标渲染框架不能直接调用目标编译组件。为了目标渲染框架可以调用目标编译组件，在本实施例中，如果目标渲染框架与目标开发框架不同，第一终端可以将组件构建标准在目标渲染框架中进行注册，以便目标渲染框架可以根据注册后的组件构建标准，调用目标编译组件。

其中，参照图6，若目标渲染框架与目标开发框架不同，则将组件构建标准在目标渲染框架中进行注册，包括：

加载目标编译组件；

若加载完成且目标渲染框架与目标开发框架不同，则将组件构建标准在目标渲染框架中进行注册；

若加载失败，则确定已加载次数；

若已加载次数小于或等于预设加载次数，则返回加载目标编译组件。

在本实施例中，设置预设加载次数，如果加载失败，且已加载次数小于或等于预设加载次数，则重新加载目标编译组件，如果已加载次数超过预设加载次数，则第一终端可以删除目标编译组件，并返回执行获取待渲染页面的目标编译组件的步骤。

或者，如果已加载次数超过预设加载次数，则第一终端可以显示提示页面，以便开发人员可以获知页面渲染失败是加载失败导致的，从而使得开发人员更加快速地解决问题。

可选地，也可以在测试的过程中，找到解决该加载失败的问题的方法，并预先将加载失败的问题和解决加载失败的问题的方法关联存储在第一终端中。然后当已加载次数超过预设加载次数时，则第一终端可以对解决加载失败的问题的方法进行遍历，从而找到解决当前加载失败的问题的方法，进而使得加载成功。

在本实施例中，设置了预设加载次数，使得在加载失败时，不会出现无限循环加载的现象，进而避免出现问题。

S204、通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染。

当客户端的形式不同时，客户端的渲染框架也不同，使得针对不同客户端中包含相同信息的页面，需要根据客户端的渲染框架去构建组件，然后通过客户端的渲染框架去调用根据客户端的渲染框架构建的组件去渲染页面。

比如，“理财通”客户端同时存在小程序“理财通”和网页“理财通”，小程序“理财通”的渲染框架为VUE框架，网页“理财通”的渲染框架H5框架，虽然小程序“理财通”的页面和网页“理财通”的页面上显示的内容相同，但是，需要根据VUE框架构建VUE组件，根据H5框架构建H5组件，然后通过VUE框架调用VUE组件渲染小程序“理财通”的页面，通过H5框架调用H5组件渲染网页“理财通”的页面。

而在本实施例中，虽然目标编译组件是根据目标开发框架的组件构建标准进行构建的，但是，由于将目标开发框架的组件构建标准在目标渲染框架中进行注册，因此，通过目标渲染框架可以根据注册后的组件构建标准，识别目标编译组件，使得可以调用目标编译组件，对待渲染页面进行渲染，进而使得针对包含相同信息的页面，无需根据不同渲染框架去构建不同渲染框架的组件，即无需将源组件编译为不同框架、不同平台下的编译组件，使得编译组件可以跨平台(平台可以指客户端)跨框架进行使用，即使得可以在不同框架和不同平台下快速地渲染编译组件。

由于编译组件可以跨平台、跨框架进行使用，因此，编译组件也可以称为跨框架组件(Cross Framework Component，CFC)，或者，编译组件也可以称为复合组件。

若目标渲染框架与目标开发框架同，则可以直接通过目标渲染框架，根据组件构建标准，调用目标编译组件对待渲染页面进行渲染。

在一些实施例中，当第一终端从服务器中获取目标编译组件时，显示组件选择界面，包括：

显示组件管理界面，组件管理界面包括组件选择控件；

响应于对组件选择控件的触发操作，向服务器发送更新请求；

接收服务器基于更新请求返回的组件标识；

基于组件标识，显示组件选择界面。

由于编译组件存储在服务器中，则第一终端显示组件选择界面时，可能服务器中存储了新的编译组件，因此，第一终端可以响应于对组件选择控件的触发操作，向服务器发送更新请求，服务器再基于更新请求返回编译组件的组件标识至第一终端，第一终端从而获取到组件标识。最后，第一终端再基于组件标识，显示组件选择界面。

需要说明的是，当服务器获取到编译组件时，服务器可以创建编译组件的组件标识对应的时间戳，此时，接收服务器基于更新请求返回的组件标识，包括：

接收服务器更新返回的组件标识和每个组件标识对应的时间戳。

第一终端在获取到组件标识和每个组件标识对应的时间戳之后，可以将组件标识和组件标识对应的时间戳进行存储，然后在后续再响应于对组件选择控件的触发操作，向服务器发送更新请求时，更新请求包括最晚时间戳，最晚时间戳为第一终端存储的时间戳中最晚的时间戳。

比如，第一终端获取到组件标识1、组件标识2以及组件标识3，组件标识1对应时间戳a，组件标识2对应时间戳b，组件标识3对应时间戳c，时间戳a对应的时间早于时间戳b对应的时间，时间戳b对应的时间早于时间戳c对应的时间，则时间戳c为最晚时间戳。

服务器在获取到更新请求之后，服务器查看最晚时间戳，然后将晚于最晚时间戳的时间戳对应的组件标识返回至第一终端，第一终端再将存储的组件标识和服务器返回的组件标识一起显示在组件选择界面。

在本实施例中，为每个组件标识设置对应的时间戳，然后服务器根据最晚时间戳，确定需要返回的组件标识，从而减少服务器返回的组件标识，进而加快第一终端显示组件选择界面的速度。

或者，显示组件管理界面包括了第一终端中存储的组件标识，然后如果开发人员在显示组件管理界面中没有找到自己响应的组件标识，开发人员再触发组件选择控件，终端再响应于对组件选择控件的触发操作，向服务器发送更新请求。

在另一些实施例中，在显示组件选择界面之后，还包括：

响应于对组件标识的标识选择操作，显示标识选择操作对应的目标组件标识对应的配置界面，配置界面包括配置信息控件；

响应于对配置信息控件的触发操作，生成目标组件标识的初始配置信息；

通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染，包括：

通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件将初始配置信息渲染至待渲染页面上。

目标组件标识对应的配置界面可以如图7所示。则第一终端响应于对配置信息控件的触发操作，显示配置信息的输入页面，接收开发人员在输入页面输入的初始配置信息，从而获取到目标组件标识对应的初始配信信息。

初始配置信息指目标编译组件在待渲染页面上显示的信息。比如，初始配置信息可以如图8所示，待渲染页面为客户端的首页，在首页上显示资产趋势列表，资产趋势列表即为初始配置信息，以及在首页上显示“稳健理财”控件，其中，“稳健理财”即为初始配置信息，“稳健理财”控件是可视化的目标编译组件。

在设置初始配置信息之后，再通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件将初始配置信息渲染至待渲染页面上。

在本实施例中，设置目标编译组件的配置界面，配置界面包括配置信息控件，使得可以开发人员可以触发配置信息控件，然后设置初始配置信息，最后第一终端再将初始配置信息渲染至待渲染页面上，使得即使目标编译组件是第三方开发人员在第二终端构建的组件，开发人员也可以根据自己的实际需要，设置目标编译组件的配置信息，从而无需将第一终端和第二终端进行关联。

在另一些实施例中，服务器中还包括编译组件的配置信息，则接收服务器返回的目标组件标识对应的目标编译组件和组件构建标准，包括：

接收服务器返回的目标组件标识对应的目标编译组件、目标编译组件对应的目标配置信息以及组件构建标准；

通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染，包括：

通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件将目标配置信息渲染至待渲染页面上。

在本实施例中，目标配置信息指目标编译组件在待渲染页面上显示的信息。开发人员也可以无需自己设置配置信息，直接使用第三方开发人员设置的配置信息，此时，服务器将第三方开发的目标编译组件的目标配置信息一起返回至第一终端，第一终端再将目标配置信息渲染至待渲染页面。

需要说明的是，第一终端可以通过目标渲染框架，调用目标编译组件，将目标配置信息和初始配置信息渲染至待渲染页面上。如果目标配置信息和初始配置信息是针对目标编译组件的同一部分，则将初始配置信息渲染至待渲染页面上。比如，目标配置信息和初始配置信息均是针对目标编译组件在待渲染页面上对应的控件的名称，则采用初始配置信息作为目标编译组件在待渲染页面上对应的控件的名称。

如果目标配置信息和初始配置信息是针对目标编译组件的不同部分，则将初始配置信息目标配置信息一起渲染至待渲染页面上。

比如，目标配置信息是针对目标编译组件在待渲染页面上对应的控件的名称，初始配置信息是针对目标编译组件在待渲染页面上对应的控件的形状。

在另一些实施例中，配置界面还包括链接输入控件。在响应于对组件标识的标识选择操作，显示标识选择操作对应的目标组件标识对应的配置界面之后，还包括：

响应于对链接输入控件的输入操作，将输入操作对应的列表跳转链接与目标编译组件进行关联，以响应于对目标编译组件的触发操作，显示列表跳转链接对应的页面。

第一终端在通过目标渲染框架，调用目标编译组件对待渲染页面进行渲染之后，目标编译组件在待渲染页面上存在对应的控件，则第一终端响应于对链接输入控件的输入操作，将输入操作对应的列表跳转链接与目标编译组件进行关联之后，第一终端可以响应于对目标编译组件对应的控件的触发操作，显示列表跳转链接对应的页面。

后续，第一终端可以再对列表跳转链接对应的页面进行渲染，即此时，列表跳转链接对应的页面也为待渲染页面。

在另一些实施例中，第一终端可以先显示组件选择界面，然后第一终端响应于对组件标识的标识选择操作，显示标识选择操作对应的目标组件标识的配置界面，配置界面包括配置信息控件和链接输入控件。第一终端再响应于对配置信息控件的触发操作，生成目标组件标识的初始配置信息，响应于对链接输入控件的输入操作，将输入操作对应的列表跳转链接对应的页面作为待渲染页面，即此时，第一终端在显示组件选择界面之前，还没确定待渲染页面，然后将输入操作对应的列表跳转链接对应的页面作为待渲染页面。

由以上可知，在本申请实施例中，先获取待渲染页面的目标编译组件，目标编译组件为根据目标开发框架的组件构建标准构建的组件。然后确定待渲染页面的目标渲染框架。若目标渲染框架与目标开发框架不同，则将组件构建标准在目标渲染框架中进行注册。最后通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染

即在本申请中，当目标渲染框架和目标开发框架不同时，可以将目标开发框架的组件构建标准在目标渲染框架中进行注册，从而使得目标渲染框架可以根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染，进而使得针对不同的框架和不同的客户端无需构建不同的组件，较为便捷，提高了研发效率和协同性。

根据上述实施例所描述的方法，以下将举例作进一步详细说明。

请参阅图9，图9为本申请实施例提供的页面渲染方法的流程示意图。该页面渲染方法流程可以包括：

S901、第二终端通过目标开发框架的组件构建标准，构建源组件，并对源组件进行编译，得到目标开发框架的编译组件。

目标开发框架可以为VUE框架。对源组件进行编译，得到目标开发框架的编译组件，包括：

当获取到组件发布消息时，将源组件从项目文件中复制至编译文件夹中；

基于编译文件夹，运行节点包管理器，生成npm包(generateManifest)；

通过发布工具，调用编译工具对npm包中源组件进行编译，得到编译组件。

编译组件指包含了执行逻辑的文件夹，即在本实施例中，将源组件编译为一个独立的文件，方便直接加载。

S902、第二终端配置编译组件的配置信息，并将编译组件、编译组件对应的配置信息以及组件构建标准打包成第一软件开发工具包(Software Development Kit，SDK)，并将第一软件开发工具包发送至服务器中进行存储。

S903、第二终端配置编译组件的配置信息，并将编译组件以及编译组件对应的配置信息打包成第二软件开发工具包，并将第二软件开发工具包发送至服务器中进行存储。

此时，服务器中可以存储采用目标开发框架开发的编译组件。在相关技术中，针对不同的客户端，需要采用的开发框架开发编译组件，比如，如图10所示，针对“理财通”客户端，存在VUE框架、H5框架以及新uniapp(小程序)框架，则服务器中存储了H5组件1、H5组件2、VUE组件1以及VUE组件2。而在本实施例中，当目标开发框架为VUE框架时，服务器中可以只存储了VUE组件1、VUE组件2以及VUE组件3等。

当目标开发框架为VUE框架，目标渲染框架为H5框架时，第一软件开发工具包和第二软件开发工具包可以如图11所示，CGI指网关接口，即第一终端可以通过CGI访问服务器，Componentinfo+Data指组件信息数据，Componentinfo+Data中包括了VUE组件(VUE组件指组件构建标准)、Component数据(Component数据指编译组件的配置信息)、Config(Config用于指示配置信息在第一终端中的存储地址)、组件CDN地址(组件CDN地址指编译组件)。

也就是，第二终端将编译组件上传至服务器中的过程可以如图12所示。第三方开发人员在第二终端上进行操作，第二终端响应于第三方开发人员的操作，获取到组件发布消息，并基于组件发布消息进行组件本地打包(将编译组件、配置信息以及组件构建标准打包成第一软件开发工具包，将编译组件以及编译组件对应的配置信息打包成第二软件开发工具包)。

然后发布工具对第一软件开发工具包和第二软件开发工具包进行验证，如果验证通过，则将第一软件开发工具包和第二软件开发工具包上传至服务器，并将上传结果返回至第二终端。

S904、第一终端显示组件选择界面，组件选择界面包括至少一个组件标识。

第一终端可以响应于开发人员对编辑器的触发操作，显示组件管理界面，组件管理界面包括组件选择控件。然后第一终端响应于对组件选择控件的触发操作，向服务器发送更新请求。第一终端接收服务器基于更新请求返回的组件标识。最后，第一终端可以基于组件标识，显示组件选择界面。

可选地，服务器可以返回第一终端中没有的组件标识，此时，更新请求可以还包括最晚时间戳，最晚时间戳为第一终端存储的组件标识对应地时间戳中最晚的时间戳。

比如，第一终端获取到组件标识1、组件标识2以及组件标识3，组件标识1对应时间戳a，组件标识2对应时间戳b，组件标识3对应时间戳c，时间戳a对应的时间早于时间戳b对应的时间，时间戳b对应的时间早于时间戳c对应的时间，则时间戳c为最晚时间戳。

服务器在获取到更新请求之后，服务器查看最晚时间戳，然后将晚于最晚时间戳的时间戳对应的组件标识返回至第一终端，晚于最晚时间戳的时间戳对应的组件标识即为第一终端中没有的标识。第一终端再将存储的组件标识和服务器返回的组件标识一起显示在组件选择界面。

在本实施例中，为每个组件标识设置对应的时间戳，然后服务器根据最晚时间戳，确定需要返回的组件标识，从而减少服务器返回的组件标识，进而加快第一终端显示组件选择界面的速度。

S905、第一终端响应于对组件标识的标识选择操作，根据标识选择操作对应的目标组件标识生成组件获取请求，并向服务器发送组件获取请求，组件获取请求包括待渲染页面的目标组件标识。

S906、第一终端接收服务器返回的目标组件标识对应的目标第一软件开发工具包和目标第二软件开发工具包。

S907、第一终端响应于对组件标识的标识选择操作，显示标识选择操作对应的目标组件标识的配置界面，配置界面包括链接输入控件和配置信息输入控件。

S908、第一终端响应于对配置信息控件的触发操作，生成目标组件标识的初始配置信息，以及第一终端响应于对链接输入控件的输入操作，将输入操作对应的列表跳转链接与目标标识组件进行关联。

S909、第一终端确定待渲染页面的渲染框架。

S9010、若目标渲染框架与目标开发框架不同，则加载目标第一软件开发工具包中目标编译组件。

S9011、若加载成功，第一终端则将目标第一软件开发工具包中组件构建标准在目标渲染框架中进行注册。

S9012、第一终端通过目标渲染框架，根据注册后的组件构建标准，调用加载后的目标编译组件将目标配置信息和初始配置信息渲染至待渲染页面上，得到渲染后页面，渲染后页面包括目标编译组件对应的控件。

S9013、第一终端响应于对目标编译组件对应的控件的触发操作，显示列表跳转链接对应的页面，并将列表跳转链接对应的页面作为待渲染页面，然后返回执行S904。

S9014、若目标编译组件加载失败，第一终端则确定已加载次数。

S9015、若已加载次数小于或等于预设加载次数，第一终端则返回加载目标编译组件。

S9016、若已加载次数超过预设加载次数，第一终端则删除目标第一软件开发工具包，并返回执行S905。

在本实施例中，设置预设加载次数，如果加载失败，且已加载次数小于或等于预设加载次数，则重新加载目标编译组件，如果已加载次数超过预设加载次数，则第一终端可以删除目标编译组件，并返回执行获取待渲染页面的目标编译组件的步骤。

或者，如果已加载次数超过预设加载次数，则第一终端可以显示提示页面，以便开发人员可以获知页面渲染失败是加载失败导致的，从而使得开发人员更加快速地解决问题。

可选地，也可以在测试的过程中，找到解决该加载失败的问题的方法，并预先将加载失败的问题和解决加载失败的问题的方法关联存储在第一终端中。然后当已加载次数超过预设加载次数时，则第一终端可以对解决加载失败的问题的方法进行遍历，从而找到解决当前加载失败的问题的方法，进而使得加载成功。

在本实施例中，设置了预设加载次数，使得在加载失败时，不会出现无限循环加载的现象，进而避免出现问题。

S9017、若目标渲染框架与目标开发框架相同，则加载目标第二软件开发工具包中目标编译组件。

S9018、通过目标渲染框架，调用加载后的目标编译组件，将目标配置信息和初始配置信息渲染至待渲染页面上。

若目标渲染框架与目标开发框架同，第一终端则通过目标渲染框架，调用加载后的目标编译组件对待渲染页面进行渲染。

比如，当目标开发框架为VUE框架时，将目标编译组件应用于uniapp小程序或者app的框架中，渲染之后的页面可以如图13中1301所示，将目标编译组件应用于seajs+zepto的框架中，渲染之后的页面可以如图13中1302所示。

本实施例中具体的实现方式以及对应的有益效果，具体可以参照上述页面渲染方法实施例，本实施例在此不再赘述。

为便于更好的实施本申请实施例提供的页面渲染方法，本申请实施例还提供一种基于上述页面渲染方法的装置。其中名词的含义与上述页面渲染方法中相同，具体实现细节可以参考方法实施例中的说明。

例如，如图14所示，该页面渲染装置可以包括：

获取模块1401，用于获取待渲染页面的目标编译组件，目标编译组件为根据目标开发框架的组件构建标准构建的组件。

确定模块1402，用于确定待渲染页面的目标渲染框架。

注册模块1403，用于若目标渲染框架与目标开发框架不同，则将组件构建标准在目标渲染框架中进行注册。

渲染模块1404，用于通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染。

可选地，获取模块1401具体用于执行：

向服务器发送组件获取请求，组件获取请求包括待渲染页面的目标组件标识，服务器包括根据目标开发框架的组件构建标准构建的编译组件；

接收服务器返回的目标组件标识对应的目标编译组件和组件构建标准。

可选地，获取模块1401具体用于执行：

显示组件选择界面，组件选择界面包括至少一个组件标识；

响应于对组件标识的标识选择操作，根据标识选择操作对应的目标组件标识生成组件获取请求；

向服务器发送组件获取请求。

可选地，获取模块1401还用于执行：

响应于对组件标识的标识选择操作，显示标识选择操作对应的目标组件标识对应的配置界面，配置界面包括配置信息控件；

响应于对配置信息控件的触发操作，生成目标组件标识的初始配置信息。

相应地，渲染模块1404具体用于执行：

通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件将初始配置信息渲染至待渲染页面上。

可选地，获取模块1401还用于执行：

响应于对链接输入控件的输入操作，将输入操作对应的列表跳转链接与目标编译组件进行关联，以响应于对目标编译组件的触发操作，显示列表跳转链接对应的页面。

可选地，获取模块1401具体用于执行：

显示组件管理界面，组件管理界面包括组件选择控件；

响应于对组件选择控件的触发操作，向服务器发送更新请求；

接收服务器基于更新请求返回的组件标识；

基于组件标识，显示组件选择界面。

可选地，注册模块1403具体用于执行：

加载目标编译组件；

若加载完成且目标渲染框架与目标开发框架不同，则将组件构建标准在目标渲染框架中进行注册；

若加载失败，则确定已加载次数；

若已加载次数小于或等于预设加载次数，则返回加载目标编译组件。

具体实施时，以上各个模块可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个模块的具体实施方式以及对应的有益效果可参见前面的方法实施例，在此不再赘述。

本申请实施例还提供一种电子设备，该电子设备可以是服务器或终端等，如图15所示，其示出了本申请实施例所涉及的电子设备的结构示意图，具体来讲：

该电子设备可以包括一个或者一个以上处理核心的处理器1501、一个或一个以上计算机可读存储介质的存储器1502、电源1503和输入单元1504等部件。本领域技术人员可以理解，图15中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

处理器1501是该电子设备的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器1502内的计算机程序和/或模块，以及调用存储在存储器1502内的数据，执行电子设备的各种功能和处理数据。可选的，处理器1501可包括一个或多个处理核心；优选的，处理器1501可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器1501中。

存储器1502可用于存储计算机程序以及模块，处理器1501通过运行存储在存储器1502的计算机程序以及模块，从而执行各种功能应用以及数据处理。存储器1502可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的计算机程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据电子设备的使用所创建的数据等。此外，存储器1502可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器1502还可以包括存储器控制器，以提供处理器1501对存储器1502的访问。

电子设备还包括给各个部件供电的电源1503，优选的，电源1503可以通过电源管理系统与处理器1501逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源1503还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

该电子设备还可包括输入单元1504，该输入单元1504可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

尽管未示出，电子设备还可以包括显示单元等，在此不再赘述。具体在本实施例中，电子设备中的处理器1501会按照如下的指令，将一个或一个以上的计算机程序的进程对应的可执行文件加载到存储器1502中，并由处理器1501来运行存储在存储器1502中的计算机程序，从而实现各种功能，比如：

获取待渲染页面的目标编译组件，目标编译组件为根据目标开发框架的组件构建标准构建的组件；

确定待渲染页面的目标渲染框架；

若目标渲染框架与目标开发框架不同，则将组件构建标准在目标渲染框架中进行注册；

通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染。

以上各个操作的具体实施方式以及对应的有益效果可参见上文对页面渲染方法的详细描述，在此不作赘述。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过计算机程序来完成，或通过计算机程序控制相关的硬件来完成，该计算机程序可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本申请实施例提供一种计算机可读存储介质，其中存储有计算机程序，该计算机程序能够被处理器进行加载，以执行本申请实施例所提供的任一种页面渲染方法中的步骤。例如，该计算机程序可以执行如下步骤：

获取待渲染页面的目标编译组件，目标编译组件为根据目标开发框架的组件构建标准构建的组件；

确定待渲染页面的目标渲染框架；

若目标渲染框架与目标开发框架不同，则将组件构建标准在目标渲染框架中进行注册；

通过目标渲染框架，根据注册后的组件构建标准，调用目标编译组件对待渲染页面进行渲染。

以上各个操作的具体实施方式以及对应的有益效果可参见前面的实施例，在此不再赘述。

其中，该计算机可读存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

由于该计算机可读存储介质中所存储的计算机程序，可以执行本申请实施例所提供的任一种页面渲染方法中的步骤，因此，可以实现本申请实施例所提供的任一种页面渲染方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

其中，根据本申请的一个方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述页面渲染方法。

以上对本申请实施例所提供的一种页面渲染方法、装置、电子设备和计算机可读存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (11)

1.一种页面渲染方法，其特征在于，包括：

获取待渲染页面的目标编译组件，所述目标编译组件为根据目标开发框架的组件构建标准构建的组件；

确定所述待渲染页面的目标渲染框架；

若所述目标渲染框架与所述目标开发框架不同，则将所述组件构建标准在所述目标渲染框架中进行注册；

通过所述目标渲染框架，根据注册后的组件构建标准，调用所述目标编译组件对所述待渲染页面进行渲染。

2.根据权利要求1所述的页面渲染方法，其特征在于，所述获取待渲染页面的目标编译组件，包括：

向服务器发送组件获取请求，所述组件获取请求包括所述待渲染页面的目标组件标识，所述服务器包括根据所述目标开发框架的所述组件构建标准构建的编译组件；

接收所述服务器返回的所述目标组件标识对应的目标编译组件和所述组件构建标准。

3.根据权利要求2所述的页面渲染方法，其特征在于，所述向服务器发送组件获取请求，包括：

显示组件选择界面，所述组件选择界面包括至少一个组件标识；

响应于对所述组件标识的标识选择操作，根据所述标识选择操作对应的目标组件标识生成组件获取请求；

向服务器发送组件获取请求。

4.根据权利要求3所述的页面渲染方法，其特征在于，在所述显示组件选择界面之后，还包括：

响应于对所述组件标识的标识选择操作，显示所述标识选择操作对应的目标组件标识对应的配置界面，所述配置界面包括配置信息控件；

响应于对所述配置信息控件的触发操作，生成所述目标组件标识的初始配置信息；

所述通过所述目标渲染框架，根据注册后的组件构建标准，调用所述目标编译组件对所述待渲染页面进行渲染，包括：

通过所述目标渲染框架，根据注册后的组件构建标准，调用所述目标编译组件将所述初始配置信息渲染至所述待渲染页面上。

5.根据权利要求3所述的页面渲染方法，其特征在于，在所述配置界面还包括链接输入控件；

在响应于对所述组件标识的标识选择操作，显示所述标识选择操作对应的目标组件标识对应的配置界面之后，还包括：

响应于对所述链接输入控件的输入操作，将所述输入操作对应的列表跳转链接与所述目标编译组件进行关联，以响应于对所述目标编译组件的触发操作，显示所述列表跳转链接对应的页面。

6.根据权利要求3所述的页面渲染方法，其特征在于，所述显示组件选择界面，包括：

显示组件管理界面，所述组件管理界面包括组件选择控件；

响应于对所述组件选择控件的触发操作，向所述服务器发送更新请求；

接收所述服务器基于所述更新请求返回的组件标识；

基于所述组件标识，显示所述组件选择界面。

7.根据权利要求1所述的页面渲染方法，其特征在于，所述若所述目标渲染框架与所述目标开发框架不同，则将所述组件构建标准在所述目标渲染框架中进行注册，包括：

加载所述目标编译组件；

若加载完成且所述目标渲染框架与所述目标开发框架不同，则将所述组件构建标准在所述目标渲染框架中进行注册；

若加载失败，则确定已加载次数；

若所述已加载次数小于或等于预设加载次数，则返回加载所述目标编译组件。

8.一种页面渲染装置，其特征在于，包括：

获取模块，用于获取待渲染页面的目标编译组件，所述目标编译组件为根据目标开发框架的组件构建标准构建的组件；

确定模块，用于确定所述待渲染页面的目标渲染框架；

注册模块模块，用于若所述目标渲染框架与所述目标开发框架不同，则将所述组件构建标准在所述目标渲染框架中进行注册；

渲染模块，用于通过所述目标渲染框架，根据注册后的组件构建标准，调用所述目标编译组件对所述待渲染页面进行渲染。

9.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储有计算机程序，所述处理器用于运行所述存储器内的计算机程序，以执行权利要求1至7任一项所述的页面渲染方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序适于处理器进行加载，以执行权利要求1至7任一项所述的页面渲染方法。

11.一种计算机程序产品，其特征在于，所述计算机程序产品存储有计算机程序，所述计算机程序适于处理器进行加载，以执行权利要求1至8任一项所述的页面渲染方法。