CN116561457A - 页面加载方法、装置、终端及存储介质 - Google Patents

Abstract

本申请实施例公开了一种页面加载方法、装置、终端及存储介质，该方法可包括：获取第一单页面应用的第一程序数据包，该第一程序数据包包括开发工具包，该开发工具包包括目标远程组件的标识信息；通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件；运行目标远程组件，以在第一单页面应用的应用界面中加载目标远程组件对应的视图。采用本申请实施例，可以将各个视图对应的组件以文件的形式存储在服务器中，根据目标远程组件的标识信息即可从服务器中查询并加载目标远程组件，可大大减少本地单页面应用的应用代码体积，从而提高单页面应用的页面加载速度和运行速度。

Description

页面加载方法、装置、终端及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面加载方法、装置、终端及存储介质。

背景技术

单页面应用(Single Page webApplication，SPA)是一种网络应用程序或网站的模型，其指的是只有一个web页面的应用。在该Web页面初始化时要加载相应的html(HyperText Markup Language，超文本标记语言)，js(JavaScript，一种直译式脚本语言)，css(cascading style sheets，层叠样式表)。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用js动态的变换html，从而实现用户界面(UserInterface，UI)与用户的交互。

现有的单页面应用会把页面依赖的js模块(或者称为组件)，以node包管理器(Node Package Manager，npm)的方式，通过组件打包器webpack构建合入单页面应用的代码中。合入后的代码通过浏览器运行，单页面应用就能够使用该js模块的代码能力，从而在浏览器页面上渲染出该模块的UI视图。然而，合入单页面应用的npm代码，会增加单页面应用的应用代码体积，从而在最终运行时，降低了单页面应用的页面加载速度和运行速度。

发明内容

本申请实施例提供一种页面加载方法、装置、终端及存储介质，可大大减少本地单页面应用的应用代码体积，从而提高单页面应用的页面加载速度和运行速度。

第一方面，本申请实施例提供了一种页面加载方法，该方法包括：

获取第一单页面应用的第一程序数据包，所述第一程序数据包包括开发工具包，所述开发工具包包括目标远程组件的标识信息；

通过调用所述开发工具包，根据所述目标远程组件的标识信息从服务器加载所述目标远程组件，所述服务器部署有至少一个远程组件，所述目标远程组件为所述至少一个远程组件中的任意一个；

运行所述目标远程组件，以在所述第一单页面应用的应用界面中加载所述目标远程组件对应的视图。

第二方面，本申请实施例提供了一种页面加载装置，该装置包括：

获取单元，用于获取第一单页面应用的第一程序数据包，所述第一程序数据包包括开发工具包，所述开发工具包包括目标远程组件的标识信息；

加载单元，用于通过调用所述开发工具包，根据所述目标远程组件的标识信息从服务器加载所述目标远程组件，所述服务器部署有至少一个远程组件，所述目标远程组件为所述至少一个远程组件中的任意一个；

处理单元，用于运行所述目标远程组件，以在所述第一单页面应用的应用界面中加载所述目标远程组件对应的视图。

第三方面，本申请实施例提供了一种终端，该终端包括处理器、通信接口和存储器，该处理器、通信接口和存储器相互连接，其中，该存储器存储有计算机程序，该处理器用于调用该计算机程序，执行本申请实施例提供的页面加载方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现本申请实施例提供的页面加载方法。

第五方面，本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。终端的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该终端执行本申请实施例提供的页面加载方法。

在本申请实施例中，终端获取第一单页面应用的第一程序数据包，所述第一程序数据包包括开发工具包，所述开发工具包包括目标远程组件的标识信息；通过调用所述开发工具包，根据所述目标远程组件的标识信息从服务器加载所述目标远程组件，所述服务器部署有至少一个远程组件，所述目标远程组件为所述至少一个远程组件中的任意一个；运行所述目标远程组件，以在所述第一单页面应用的应用界面中加载所述目标远程组件对应的视图。采用本申请实施例，通过从服务器加载远程组件，可大大减少本地单页面应用的应用代码体积，从而提高单页面应用的页面加载速度和运行速度。

附图说明

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

图1是本申请实施例提供的一种页面加载系统架构图；

图2是本申请实施例提供的一种页面加载方法的流程示意图；

图3是本申请实施例提供的一种加载目标远程组件的示意性框图；

图4是本申请实施例提供的一种页面加载的过程示意图；

图5是本申请实施例提供的另一种页面加载方法的流程示意图；

图6是本申请实施例提供的一种组件打包的示意性框图；

图7是本申请实施例提供的一种获得依赖远程组件的sdk的示意性框图；

图8是本申请实施例提供的一种远程组件依赖关系网的形成过程示意图；

图9是本申请实施例提供的一种共享目标远程组件的示意图；

图10是本申请实施例提供的一种页面加载装置的示意图；

图11是本申请实施例提供的一种终端的示意图。

具体实施方式

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

为了便于理解本申请实施例，下面对本申请的页面加载方案进行描述。

为了提高单页面应用的页面加载速度和运行速度，本申请实施例提供了一种页面加载方案。请参见图1，图1是本申请实施例提供的一种页面加载系统架构图，下面结合图1对本申请实施例提出的页面加载方案的大致实施过程进行阐述：首先，用户可通过终端101获取第一单页面应用的第一程序数据包，并在该第一程序包包括的软件开发工具包(Software Development Kit，sdk)中添加所需要的目标远程组件的标识信息；然后，终端101通过调用开发工具包向服务器102发送目标远程组件的标识信息，请求服务器102发送目标远程组件；之后，终端101接收服务器102发送的目标远程组件；最后，终端101运行该目标远程组件，在第一单页面应用的应用界面中加载所述目标远程组件对应的视图。其中，服务器102中部署有至少一个远程组件，目标远程组件为至少一个远程组件中的任意一个。

经实践表明，本申请实施例所提出的页面加载方案可具有如下有益效果：①用户在开发时，通过引入开发工具包sdk，并把目标远程组件的标识信息(或者称为id)添加到sdk中，可在单页面应用中通过加载目标远程组件，在单页面应用的应用界面中生成该目标远程组件对应的视图。②通过加载目标远程组件可大大减小本地单页面应用的应用代码体积，从而提高单页面应用的页面加载速度和运行速度。③可随时对部署在服务器中的远程组件进行更新，而不影响单页面应用本身。④若多个单页面应用共同依赖同一个目标远程组件，则该目标远程组件可以实现复用、共享，从而减少了网络资源的消耗。

需要说明的是：在具体实现中，上述方案可由终端执行，该终端可以包括但不限于：智能手机、平板电脑、笔记本电脑、台式计算机、智能手表、智能电视、智能车载终端等。上述方案中的服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器，等等。并且，本申请实施例所提及的服务器可以位于区块链网络外，也可以位于区块链网络内，对此不作限定；所谓的区块链网络是一种由点对点网络(P2P网络)和区块链所构成的网络，而区块链则是指一种分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式，其本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块(或称为区块)。本申请中，终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本申请在此不做限制。本申请实施例可以应用于各种场景，其中包括但不限于云技术、人工智能等。

可选地，当该服务器是可提供云存储(cloud storage)服务的云服务器时，远程组件也可以以文件的形式存储在云服务器中。云存储是在云计算概念上延伸和发展出来的一个新的概念，分布式云存储系统(以下简称存储系统)是指通过集群应用、网格技术以及分布存储文件系统等功能，将网络中大量各种不同类型的存储设备(存储设备也称之为存储节点)通过应用软件或应用接口集合起来协同工作，共同对外提供数据存储和业务访问功能的一个存储系统。

存储系统的存储方法为：创建逻辑卷，在创建逻辑卷时，就为每个逻辑卷分配物理存储空间，该物理存储空间可能是某个存储设备或者某几个存储设备的磁盘组成。客户端在某一逻辑卷上存储数据，也就是将数据存储在文件系统上，文件系统将数据分成许多部分，每一部分是一个对象，对象不仅包含数据而且还包含数据标识(ID，ID entity)等额外的信息，文件系统将每个对象分别写入该逻辑卷的物理存储空间，且文件系统会记录每个对象的存储位置信息，从而当客户端请求访问数据时，文件系统能够根据每个对象的存储位置信息让客户端对数据进行访问。

存储系统为逻辑卷分配物理存储空间的过程，具体为：按照对存储于逻辑卷的对象的容量估量(该估量往往相对于实际要存储的对象的容量有很大余量)和独立冗余磁盘阵列(RAID，Redundant Array of Independent Disk)的组别，预先将物理存储空间划分成分条，一个逻辑卷可以理解为一个分条，从而为逻辑卷分配了物理存储空间。

基于上述方案，本申请实施例提出了一种页面加载方法，请参见图2，图2是本申请实施例提供的一种页面加载方法的流程示意图。该方法由终端来执行，如图2所示，该页面加载方法可包括如下步骤S201-S203：

S201、获取第一单页面应用的第一程序数据包，该第一程序数据包包括开发工具包，该开发工具包包括目标远程组件的标识信息。

其中，第一程序数据包中还包括第一单页面应用的本地程序数据。

在一种可选的实施方式中，终端可接收用户针对开发工具包sdk和第一单页面应用的本地程序数据输入的合并指令，获得第一程序数据包；然后，通过接收用户针对第一程序数据包中的开发工具包sdk输入的目标远程组件的标识信息，根据该目标远程组件的标识信息，确定从服务器中加载的目标远程组件。在具体实现中，终端可通过执行第一程序数据包中的开发工具包sdk，获得一个TDVRemoteComponent(TDV远程组件)方法。之后，接收用户针对开发工具包sdk输入的目标远程组件的标识信息(或者称为id)，并执行该TDVRemoteComponent方法，向服务器发送加载目标远程组件的请求。

示例性的，终端可通过执行如下代码获得目标远程组件：

import React from‘react’；

importTDVRemoteComponent from‘@xxx/TDVRemoteComponen’；

export default function Remote(){

return<TDVRemoteComponent id＝“xxxxx”/>；

}

上述代码中，@xxx/TDVRemoteComponen指的是sdk的名字，id＝“xxxxx”中xxxxx指的是所需目标远程组件的标识信息。

S202、通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件。

其中，服务器部署有至少一个远程组件，目标远程组件为至少一个远程组件中的任意一个。

在一种可选的实施方式中，终端通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件，包括：通过调用开发工具包获取模块联合插件(Modulefederation Plugin)的远程加载接口；根据目标远程组件的标识信息，利用远程加载接口从服务器加载目标远程组件。

请参见图3，图3是本申请实施例提供的一种加载目标远程组件的示意性框图。如图3所示，终端通过调用开发工具包(sdk)301，获取模块联合插件(Module federationPlugin)303提供的远程加载接口；然后开发工具包(sdk)301在运行时，根据目标远程组件的标识信息(标识id)302，利用模块联合插件(Module federation Plugin)303提供的远程加载接口从服务器加载目标远程组件304。

请参见图4，图4是本申请实施例提供的一种页面加载的过程示意图。如图4所示，终端通过调用单页面应用401的程序数据包中的开发工具包(sdk)402，可获得模块联合插件的远程加载接口；根据目标远程组件403的标识信息，利用远程加载接口从服务器404加载目标远程组件403。其中，利用远程加载接口从服务器404加载目标远程组件403可以是向服务器404发送http请求，该http请求用于请求加载目标远程组件403。

S203、运行目标远程组件，以在第一单页面应用的应用界面中加载目标远程组件对应的视图。

在一种可选的实施方式中，终端在运行目标远程组件之前，还可对目标远程组件进行依赖分析，并加载与目标远程组件相关联的依赖组件。

本申请实施例中，终端获取第一单页面应用的第一程序数据包，该第一程序数据包包括开发工具包，该开发工具包包括目标远程组件的标识信息；通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件；运行目标远程组件，以在第一单页面应用的应用界面中加载目标远程组件对应的视图。可见，该方法通过从服务器加载目标远程组件，可大大减少本地单页面应用的应用代码体积，从而提高单页面应用的页面加载速度和运行速度。

请参见图5，图5是本申请实施例提供的另一种页面加载方法的流程示意图。该方法可通过终端来执行，如图5所示，该页面加载方法可包括如下步骤S501-S506：

S501、获取第一单页面应用的第一程序数据包，该第一程序数据包包括开发工具包，该开发工具包包括目标远程组件的标识信息。

在一种可选的实施方式中，终端在获取第一单页面应用的第一程序数据包，该第一程序数据包包括开发工具包，该开发工具包包括目标远程组件的标识信息之前，还包括：通过组件打包器将至少一个普通组件分别进行打包处理，得到至少一个远程组件；将至少一个远程组件部署在服务器，以使得服务器将至少一个远程组件中每个远程组件的标识信息添加到远程组件列表中。

可选地，部署在服务器中的任一远程组件包括有命名空间，以兼容多个相同远程组件的不同版本。由于任一远程组件都是独立的，因此，可随时通过对远程组件的版本进行更新，获得更新版本后的远程组件。可选地，更新版本后的远程组件可以替换原版本的远程组件，也可以和原版本的远程组件共同存在在服务器中。

可选地，当更新版本后的远程组件和原版本的远程组件共同存在在服务器中时，终端还可接收用户针对开发工具包sdk输入的目标远程组件的版本号，并根据目标远程组件的标识信息和目标远程组件的版本号，从服务器加载对应版本的目标远程组件。

在一种可选的实施方式中，终端还对服务器中的至少一个远程组件进行依赖分析，确定与至少一个远程组件中每个远程组件相关联的依赖组件(即运行各个远程组件分别需要依赖的其他组件)；通过组件打包器对至少一个依赖组件进行打包处理，并将打包后的至少一个依赖组件部署在服务器。其中，服务器可通过http访问。

可选地，组件打包器可以是webpack。webpack是一款模块加载器兼打包工具，它能把各种资源，例如js(含jsx)、样式(含less/sass)、图片等都作为模块来使用和处理。webpack包括有入口，出口和插件等。

示例性的，请参见图6，图6是本申请实施例提供的一种组件打包的示意性框图。如图6所示，终端通过组件打包器(webpack)602的模块联合插件(Module federationPlugin)603，将普通组件601打包成可执行的远程组件604，之后将打包好的远程组件604部署在服务器中。在一种可选的实施方式中，终端还对该远程组件604进行依赖分析，确定与远程组件604相关联的依赖组件；将与远程组件604相关联的依赖组件以上述同样的方式进行打包处理，并部署在服务器中。

S502、通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件。

在一种可选的实施方式中，终端通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件，包括：通过调用开发工具包获取模块联合插件的远程加载接口；根据目标远程组件的标识信息，利用远程加载接口从服务器加载目标远程组件。

在一种可选的实施方式中，终端根据目标远程组件的标识信息，利用远程加载接口从服务器加载目标远程组件，包括：利用远程加载接口向服务器发送目标远程组件的标识信息，以使得服务器根据目标远程组件的标识信息从远程组件列表中查询目标远程组件，该远程组件列表包括至少一个远程组件中每个远程组件的标识信息；利用远程加载接口接收服务器发送的目标远程组件。

示例性的，请参见图7，图7是本申请实施例提供的一种获得引用远程组件的sdk的示意性框图。如图7所示，终端首先通过调用开发工具包(sdk)701获取组件打包器(webpack)702中的模块联合插件(Module federation Plugin)703提供的远程加载接口；然后，利用远程组件接口向服务器发送目标远程组件的标识信息，以使服务器根据目标远程组件的标识信息从远程组件列表中查询目标远程组件；最后，利用远程加载接口接收服务器发送的目标远程组件，得到引用目标远程组件的开发工具包(sdk)704。可选地，终端还可以通过其他方式从服务器中调用远程组件，以实现更少的启动文件，从而减少网络消耗。

S503、对目标远程组件进行依赖分析，确定与目标远程组件相关联的依赖组件。

在一种可选的实施方式中，终端通过对目标远程组件进行依赖分析，可以确定与目标远程组件相关联的其他依赖组件。也就是说，依赖分析的作用是确定运行目标远程组件所需要加载的其他依赖组件。

可选地，与目标远程组件相关联的依赖组件可以有一个，也可以有多个，当然，也可以没有。

S504、判断本地是否存在与目标远程组件相关联的依赖组件，若不存在，则执行步骤S505、S506；若存在，则直接执行步骤S506。

可选地，如果终端已经加载过目标远程组件，则可将与目标远程组件相关联的依赖组件保存到本地。当需要再次运行目标远程组件的时候，终端可在加载目标远程组件之后，检查本地是否已经存在与该目标远程组件相关联的依赖组件，如果存在，则可直接执行步骤S506；若不存在，则需要先执行步骤S505，之后再执行步骤S506。

S505、通过调用开发工具包从服务器中加载与目标远程组件相关联的依赖组件。

其中，服务器还部署有与至少一个远程组件中每个远程组件相关联的依赖组件。

在一种可选的实施方式中，当终端加载与目标远程组件相关联的依赖组件后，会形成一个依赖关系网，以使终端能够顺利运行目标远程组件。

请参见图8，图8是本申请实施例提供的一种远程组件依赖关系网的形成过程示意图。如图8所示，终端首先对远程组件801进行依赖分析，通过依赖分析802确定与远程组件801相关联的依赖组件；然后通过加载依赖组件803，形成远程组件的依赖关系网；最后，根据依赖关系网可实现远程组件的运行804。

S506、运行目标远程组件，以在第一单页面应用的应用界面中加载目标远程组件对应的视图。

在一种可选的实施方式中，服务器中存储的远程组件可以被不同的单页面应用共享使用。以上述的目标远程组件为例，终端在执行完步骤S505之后，还可获取第二单页面应用的第二程序数据包，该第二程序数据包包括开发工具包；若该第二程序数据包包括的开发工具包中存在目标远程组件的标识信息，则运行目标远程组件，以在所述第二单页面应用的应用界面中加载所述目标远程组件对应的视图。也就是说，若第一单页面应用通过开发工具包sdk从服务器加载了目标远程组件之后，当第二单页面应用需要使用该目标远程组件时，可直接运行目标远程组件，无需再次从服务器中加载。

举例来说，请参见图9，图9是本申请实施例提供的共享目标远程组件的示意图。如图9所示，当第一单页面应用901、第二单页面应用902和第三单页面应用903都需要通过开发工具包(sdk)904从服务器906加载目标远程组件905的时候，若第一单页面应用901已经通过开发工具包(sdk)904从服务器906加载了目标远程组件905，则第二单页面应用902和第三单页面应用903需要使用目标远程组件905时，可直接运行目标远程组件905，无需再次从服务器906中加载。也就是说，该目标远程组件905可以被第一单页面应用901、第二单页面应用902和第三单页面应用903同时共享。

本申请实施例中，终端在通过调用开发工具包从服务器中加载与目标远程组件相关联的依赖组件之后，可获取第二单页面应用的第二程序数据包，该第二程序数据包包括开发工具包；若该第二程序数据包包括的开发工具包中存在目标远程组件的标识信息，则运行目标远程组件，以在所述第二单页面应用的应用界面中加载所述目标远程组件对应的视图。可见，本申请实施例中，一方面，独立部署在服务器中的远程组件不同单页面应用之间，重复依赖的目标远程组件可以实现共享、复用，避免了因每个单页面应用都去从服务器加载目标远程组件，导致对带宽的浪费问题，从而减少了网络的消耗。

此外，由于远程组件是独立部署在服务器中的，因此，相比于采用npm将组件的代码合入单页面应用代码的方式中，当npm需要升级版本时只能手动更新npm版本，并重新通过webpack构建单页面应用而言，本申请可对远程组件随时进行更新，而不影响单页面应用本身。

需要说明的是，当本申请实施例运用到具体产品或技术中时，本申请实施例所涉及的第一程序数据包、开发工具包、目标远程组件、目标远程组件的标识信息以及依赖组件等均是在获得用户的许可或者同意后才获取的；并且第一程序数据包、开发工具包、目标远程组件、目标远程组件的标识信息以及依赖组件等的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。

基于上述页面加载方法的相关实施例的描述，本申请实施例还提出了一种页面加载装置，该页面加载装置可以是运行于终端中的一个计算机程序(包括程序代码)。该页面加载装置可以执行图2或图5所示的页面加载方法；请参见图10，图10是本申请实施例提供的一种页面加载装置的示意图，该页面加载装置可以包括如下单元：

获取单元1001，用于获取第一单页面应用的第一程序数据包，该第一程序数据包包括开发工具包，该开发工具包包括目标远程组件的标识信息；

加载单元1002，用于通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件，该服务器部署有至少一个远程组件，该目标远程组件为至少一个远程组件中的任意一个；

处理单元1003，用于运行目标远程组件，以在第一单页面应用的应用界面中加载目标远程组件对应的视图。

在一种可选的实施方式中，加载单元1002在用于通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件时，具体用于：

通过调用开发工具包获取模块联合插件的远程加载接口；

根据目标远程组件的标识信息，利用远程加载接口从服务器加载目标远程组件。

在一种可选的实施方式中，加载单元1002在用于根据目标远程组件的标识信息，利用远程加载接口从服务器加载目标远程组件时，具体用于：

利用远程加载接口向服务器发送目标远程组件的标识信息，以使得服务器根据目标远程组件的标识信息从远程组件列表中查询目标远程组件，远程组件列表包括至少一个远程组件中每个远程组件的标识信息；

利用远程加载接口接收服务器发送的目标远程组件。

在一种可选的实施方式中，在运行目标远程组件之前，加载单元1002还用于：

对目标远程组件进行依赖分析，确定与目标远程组件相关联的依赖组件；

加载依赖组件。

在一种可选的实施方式中，加载单元1002在用于加载依赖组件时，具有用于：

判断本地是否存在与目标远程组件相关联的依赖组件；

若不存在，则通过调用开发工具包从服务器中加载与目标远程组件相关联的依赖组件，该服务器还部署有与至少一个远程组件中每个远程组件相关联的依赖组件。

在一种可选的实施方式中，获取单元1001还用于通过组件打包器将至少一个普通组件分别进行打包处理，得到至少一个远程组件。

在一种可选的实施方式中，处理单元1003还用于将至少一个远程组件部署在服务器，以使得服务器将至少一个远程组件中每个远程组件的标识信息添加到远程组件列表中。

在一种可选的实施方式中，加载单元1002在通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件之后，处理单元1003还具体用于：

获取第二单页面应用的第二程序数据包，第二程序数据包包括开发工具包；

若第二程序数据包包括的开发工具包中存在目标远程组件的标识信息，则运行目标远程组件，以在第二单页面应用的应用界面中加载目标远程组件对应的视图。

根据本申请的一个实施例，图2或图5所示的方法所涉及的各个步骤均可由图10所示的页面加载装置中的各个模块来执行的。例如，图2中所示的步骤S201可由图10中所示的获取单元1001执行，步骤S202可由图10中所示的加载单元1002执行，步骤S203可由图10中所示的处理单元1003执行。又如，图5中所示的步骤S501可由图10中所示的获取单元1001执行，步骤S502至S505可由图10中所示的加载单元1002执行，步骤S506可由图10所示的处理单元1003执行等等。

根据本申请的另一个实施例，图10所示的页面加载装置中的各个单元可以分别或全部合并为一个或若干个另外的单元来构成，或者其中的某个(些)单元还可以再拆分为功能上更小的多个单元来构成，这可以实现同样的操作，而不影响本申请的实施例的技术效果的实现。上述单元是基于逻辑功能划分的，在实际应用中，一个单元的功能也可以由多个单元来实现，或者多个单元的功能由一个单元实现。在本申请的其它实施例中，基于页面加载装置也包括其他单元，在实际应用中，这些功能也可以由其它单元协助实现，并且可以由多个单元协作实现。

根据本申请的另一个实施例，可以通过在包括中央处理单元(CPU)、随机存取存储介质(RAM)、只读存储介质(ROM)等处理元件和存储元件的例如计算机的通用终端上运行能够执行如图2或图5中所示的相应方法所涉及的各步骤的计算机程序(包括程序代码)，来构造如图10中所示的页面加载装置，以及来实现本申请实施例的页面加载方法。计算机程序可以记载于例如计算机可读存储介质上，并通过计算机可读存储介质装载于上述终端中，并在其中运行。

可以理解的是，本申请实施例提供的页面加载装置中各个单元的具体实现以及可以达到的有益效果可参考前述页面加载方法实施例的描述，在此不再赘述。

基于上述方法实施例以及装置实施例的描述，本申请实施例还提供一种终端。请参见图11，该终端至少包括处理器1101、存储器1102、通信接口1103。上述处理器1101、存储器1102和通信接口1103可通过总线1104或其他方式连接，本申请实施例以通过总线1104连接为例。

其中，处理器1101(或称CPU(Central Processing Unit，中央处理器))是终端的计算核心以及控制核心，其可以解析终端内的各类指令以及处理终端的各类数据，例如：CPU可以用于解析用户向终端所发送的开关机指令，并控制终端进行开关机操作；再如：CPU可以在终端内部结构之间传输各类交互数据，等等。通信接口1103可选的可以包括标准的有线接口、无线接口(如Wi-Fi、移动通信接口等)，受处理器1101的控制用于收发数据。存储器1102(Memory)是终端中的记忆设备，用于存放计算机程序和数据。可以理解的是，此处的存储器1102既可以包括终端的内置存储器，当然也可以包括终端所支持的扩展存储器。存储器1102提供存储空间，该存储空间存储了终端的操作系统，可包括但不限于：Windows系统、Linux系统、Android系统、iOS系统，等等，本申请对此并不作限定。在一种可选的实施方式中，本申请实施例的处理器1101可通过运行存储器1102中存储的计算机程序，执行如下操作：

获取第一单页面应用的第一程序数据包，该第一程序数据包包括开发工具包，该开发工具包包括目标远程组件的标识信息；

通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件，该服务器部署有至少一个远程组件，目标远程组件为至少一个远程组件中的任意一个；

运行目标远程组件，以在第一单页面应用的应用界面中加载目标远程组件对应的视图。

在一种可选的实施方式中，处理器1101在通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件时，具体用于：

通过调用开发工具包获取模块联合插件的远程加载接口；

根据目标远程组件的标识信息，利用远程加载接口从服务器加载目标远程组件。

在一种可选的实施方式中，处理器1101在根据目标远程组件的标识信息，利用远程加载接口从服务器加载目标远程组件时，具体用于：

利用远程加载接口向服务器发送目标远程组件的标识信息，以使得服务器根据目标远程组件的标识信息从远程组件列表中查询目标远程组件，该远程组件列表包括至少一个远程组件中每个远程组件的标识信息；

利用远程加载接口接收服务器发送的目标远程组件。

在一种可选的实施方式中，处理器1101在运行目标远程组件之前，还用于：

对目标远程组件进行依赖分析，确定与目标远程组件相关联的依赖组件；

加载依赖组件。

在一种可选的实施方式中，处理器1101在加载依赖组件时，具体用于：

判断本地是否存在与目标远程组件相关联的依赖组件；

若不存在，则通过调用开发工具包从服务器中加载与目标远程组件相关联的依赖组件，服务器还部署有与至少一个远程组件中每个远程组件相关联的依赖组件。

在一种可选的实施方式中，处理器1101还用于：

通过组件打包器将至少一个普通组件分别进行打包处理，得到至少一个远程组件；

将至少一个远程组件部署在服务器，以使得服务器将至少一个远程组件中每个远程组件的标识信息添加到远程组件列表中。

在一种可选的实施方式中，处理器1101在通过调用开发工具包，根据目标远程组件的标识信息从服务器加载目标远程组件之后，还用于：

获取第二单页面应用的第二程序数据包，第二程序数据包包括开发工具包；

若第二程序数据包包括的开发工具包中存在目标远程组件的标识信息，则运行目标远程组件，以在第二单页面应用的应用界面中加载目标远程组件对应的视图。

具体实现中，本申请实施例中所描述的处理器1101、存储器1102、通信接口1103可执行本申请实施例提供的页面加载方法中所描述的终端的实现方式，也可执行本申请实施例提供的页面加载装置中所描述的实现方式，在此不再赘述。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有计算机程序，当其在计算机上运行时，使得计算机执行上述任一可能实现方式的页面加载方法。其具体实现方式可参考前文描述，此处不再赘述。

本申请实施例还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。终端的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该终端执行上述任一可能实现方式的页面加载方法。其具体实现方式可参考前文描述，此处不再赘述。

需要说明的是，对于前述的各个方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某一些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：闪存盘、只读存储器(Read-Only Memory，ROM)、随机存取器(Random AccessMemory，RAM)、磁盘或光盘等。

以上所揭露的仅为本申请部分实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。

Claims (11)

1.一种页面加载方法，其特征在于，所述方法包括：

获取第一单页面应用的第一程序数据包，所述第一程序数据包包括开发工具包，所述开发工具包包括目标远程组件的标识信息；

通过调用所述开发工具包，根据所述目标远程组件的标识信息从服务器加载所述目标远程组件，所述服务器部署有至少一个远程组件，所述目标远程组件为所述至少一个远程组件中的任意一个；

运行所述目标远程组件，以在所述第一单页面应用的应用界面中加载所述目标远程组件对应的视图。

2.根据权利要求1所述的方法，其特征在于，所述通过调用所述开发工具包，根据所述目标远程组件的标识信息从服务器加载所述目标远程组件，包括：

通过调用所述开发工具包获取模块联合插件的远程加载接口；

根据所述目标远程组件的标识信息，利用所述远程加载接口从服务器加载所述目标远程组件。

3.根据权利要求2所述的方法，其特征在于，所述根据所述目标远程组件的标识信息，利用所述远程加载接口从服务器加载所述目标远程组件，包括：

利用所述远程加载接口向服务器发送所述目标远程组件的标识信息，以使得所述服务器根据所述目标远程组件的标识信息从远程组件列表中查询所述目标远程组件，所述远程组件列表包括所述至少一个远程组件中每个远程组件的标识信息；

利用所述远程加载接口接收所述服务器发送的所述目标远程组件。

4.根据权利要求1所述的方法，其特征在于，所述运行所述目标远程组件之前，所述方法还包括：

对所述目标远程组件进行依赖分析，确定与所述目标远程组件相关联的依赖组件；

加载所述依赖组件。

5.根据权利要求4所述的方法，其特征在于，所述加载所述依赖组件，包括：

判断本地是否存在与所述目标远程组件相关联的依赖组件；

若不存在，则通过调用所述开发工具包从所述服务器中加载与所述目标远程组件相关联的依赖组件，所述服务器还部署有与所述至少一个远程组件中每个远程组件相关联的依赖组件。

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

通过组件打包器将至少一个普通组件分别进行打包处理，得到至少一个远程组件；

将所述至少一个远程组件部署在所述服务器，以使得所述服务器将所述至少一个远程组件中每个远程组件的标识信息添加到远程组件列表中。

7.根据权利要求1所述的方法，其特征在于，所述通过调用所述开发工具包，根据所述目标远程组件的标识信息从服务器加载所述目标远程组件之后，所述方法还包括：

获取第二单页面应用的第二程序数据包，所述第二程序数据包包括开发工具包；

若所述第二程序数据包包括的开发工具包中存在所述目标远程组件的标识信息，则运行所述目标远程组件，以在所述第二单页面应用的应用界面中加载所述目标远程组件对应的视图。

8.一种页面加载装置，其特征在于，所述装置包括：

获取单元，用于获取第一单页面应用的第一程序数据包，所述第一程序数据包包括开发工具包，所述开发工具包包括目标远程组件的标识信息；

加载单元，用于通过调用所述开发工具包，根据所述目标远程组件的标识信息从服务器加载所述目标远程组件，所述服务器部署有至少一个远程组件，所述目标远程组件为所述至少一个远程组件中的任意一个；

处理单元，用于运行所述目标远程组件，以在所述第一单页面应用的应用界面中加载所述目标远程组件对应的视图。

9.一种终端，其特征在于，所述终端包括存储器、通信接口以及处理器，其中，所述存储器、所述通信接口和所述处理器相互连接；所述存储器存储有计算机程序，所述处理器调用所述存储器中存储的计算机程序，用于实现权利要求1至7任一项所述的页面加载方法。

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

11.一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序或计算机指令，所述计算机程序或计算机指令被处理器执行时实现如权利要求1至7中任一项所述的页面加载方法。