CN114625439A - 基于微前端架构的子应用运行方法、电子设备及存储介质 - Google Patents

Abstract

本申请公开了一种基于微前端架构的子应用运行方法、电子设备及存储介质，涉及互联网技术领域。首先构建用于在主应用中运行的子应用的入口组件，首先响应于加载子应用的触发请求，获取主应用资源，再利用入口组件依据入口地址执行子应用资源列表以获取子应用资源，最后利用入口组件创建用于子应用的沙箱，并将子应用资源注入沙箱，以加载子应用。本申请提供的基于微前端架构的子应用运行方法、电子设备及存储介质具有加载更多种脚本语言构建的子应用、加载速度更快以及加载更加便捷的优点。

Description

基于微前端架构的子应用运行方法、电子设备及存储介质

技术领域

本发明涉及互联网技术领域，具体地涉及基于微前端架构的子应用运行的方法、电子设备及存储介质。

背景技术

随着互联网行业的快速发展，应用程序的项目复杂度剧增，业务需求也愈发庞杂。为了提高开发效率，前后端分离的架构已逐渐普及，前端和后端的开发、构建、部署和运行等流程都是独立运行。

随着前端工程化的兴起，前端应用体量也越来越大。因此，微前端技术架构被提出。微前端作为一种最近新的架构，在大型应用转变成多个更小、更简单的能够独立开发、测试、部署的小型应用的聚合。

目前已知的微前端架构的实现方案可以基于singleSPA、Qiankun等微前端框架来实现。

然而，当前的singleSPA、Qiankun等微前端框架可能不支持利用某些脚本语言构建模块来构建子应用。

同时，当前的singleSPA、Qiankun等微前端框架需要与主应用框架同步加载，这可能会影响主应用的存储空间大小以及主应用的加载速度。

另外，当前的singleSPA、Qiankun等微前端框架可能需要并掌控子应用的生命周期，并且子应用的接入需要进行特定预先配置，感知不同的运行场景来启动或以其他方式操作子应用。

本背景技术描述的内容仅为了便于了解本领域的相关技术，不视作对现有技术的承认。

发明内容

因此，本发明的目的在于提供一种基于微前端架构的子应用运行、电子设备及存储介质，以解决现有技术中微前端框架加载子应用时存在诸多限制的问题。

在第一方面，本申请实施例提供了一种基于微前端架构的子应用运行方法，包括：

构建用于在主应用中运行的子应用的入口组件；

响应于加载所述子应用的触发请求，获取主应用资源；

解析所述主应用资源，以获取可执行的子应用资源列表；

加载所述入口组件，并获取所述子应用的入口地址；

利用所述入口组件依据所述入口地址执行所述子应用资源列表以获取子应用资源；

利用所述入口组件创建用于所述子应用的沙箱，并将所述子应用资源注入所述沙箱，以加载所述子应用。

可选地，所述子应用为基于ES模块实现的子应用。

可选地，创建用于所述子应用的沙箱，包括：

创建用于所述沙箱的窗口代理，所述窗口代理对接所述主应用的窗口对象和所述沙箱。

可选地，所述方法还包括：

响应于所述子应用访问第一目标变量的请求，确定所述沙箱内是否存在所述第一目标变量；

若是，则将所述沙箱中的第一目标变量发送至所述子应用；

若否，则通过所述窗口代理将所述主应用窗口对象中的第一目标变量发送至所述子应用。

可选地，所述方法还包括：

响应于所述子应用设置第二目标变量的请求，确定所述沙箱内是否存在所述第二目标变量；

若是，则对所述沙箱内的所述第二目标变量进行设置；

若否，则通过所述窗口代理确定所述主应用窗口对象中的第二目标变量是否可设置；

若是，则通过所述窗口代理设置主应用窗口对象中的第二目标变量；

若否，则保持主应用窗口对象中所述第二目标变量不变。

可选地，所述方法还包括：

响应于卸载所述子应用的触发请求，卸载所述入口组件，以卸载所述子应用。

可选地，所述构建用于在主应用中运行的子应用的入口组件，包括：

定义用于所述子应用的第一函数和第二函数；

所述方法还包括：

在所述子应用被加载后，记录所述子应用执行所述第一函数的操作；

所述响应于卸载所述子应用的触发请求，卸载所述入口组件，以卸载所述子应用，包括：

清除所述子应用执行的第一函数的所述操作。

可选地，所述方法还包括：

在所述子应用被加载后，记录所述子应用执行所述第二函数的操作和对所述沙箱的操作；

所述响应于卸载所述子应用的触发请求，卸载所述入口组件，以卸载所述子应用，还包括：

保留所述子应用执行的第二函数的所述操作和对所述沙箱的所述操作。

第二方面，本申请实施例还提供了一种基于微前端架构的子应用运行装置，包括：

处理单元，用于构建用于在主应用中运行的子应用的入口组件；

入口组件加载单元，用于响应于加载所述子应用的触发请求，获取主应用资源；

资源解析单元，用于解析所述主应用资源，以获取可执行的子应用资源列表；

入口组件加载单元还用于加载所述入口组件，并获取所述子应用的入口地址；

处理单元，用于利用所述入口组件依据所述入口地址执行所述子应用资源列表以获取子应用资源；

处理单元，还用于利用所述入口组件创建用于所述子应用的沙箱，并将所述子应用资源注入所述沙箱，以加载所述子应用。

第三方面，本申请实施例还提供了一种基于微前端架构的子应用运行方法，包括：

构建用于在主应用中运行的第一子应用的第一入口组件；

构建用于在主应用中运行的第二子应用的第二入口组件；

响应于从所述第一子应用切换到所述第二子应用的触发请求，获取主应用资源，卸载所述第一入口组件以卸载所述第一子应用；

解析所述主应用资源，以获取可执行的第二子应用资源列表；

加载所述第二入口组件，并获取所述第二子应用的入口地址；

利用所述第二入口组件依据所述入口地址执行所述第二子应用资源列表以获取第二子应用资源；

利用所述第二入口组件创建用于所述第二子应用的第二沙箱，并将所述第二子应用资源注入所述第二沙箱，以加载所述第二子应用。

可选地，所述构建用于在主应用中运行的第一子应用的第一入口组件，包括：

定义用于所述第一子应用的第一函数和第二函数；

所述卸载所述第一入口组件以卸载所述第一子应用，包括：

清除所述第一子应用执行的所述第一函数的操作。

可选地，所述第一子应用和第二子应用为基于ES模块实现的子应用。

第四方面，本申请实施例还提供了一种基于微前端架构的子应用运行装置，包括：

入口组件构建单元，用于构建用于在主应用中运行的第一子应用的第一入口组件；

入口组件构建单元，还用于构建用于在主应用中运行的第二子应用的第二入口组件；

处理单元，用于入口响应于从所述第一子应用切换到所述第二子应用的触发请求，获取主应用资源，卸载所述第一入口组件以卸载所述第一子应用；

资源解析单元，用于解析所述主应用资源，以获取可执行的第二子应用资源列表；

处理单元，用于加载所述第二入口组件，并获取所述第二子应用的入口地址；

处理单元，用于利用所述第二入口组件依据所述入口地址执行所述第二子应用资源列表以获取第二子应用资源；

处理单元，还用于利用所述第二入口组件创建用于所述第二子应用的第二沙箱，并将所述第二子应用资源注入所述第二沙箱，以加载所述第二子应用。

第五方面，本申请实施例还提供了一种电子设备，包括：处理器和存储有计算机程序的存储器，所述处理器被配置为在运行计算机程序时执行上述的基于微前端架构的子应用运行方法。

第六方面，本申请实施例还提供了一种存储介质，所述存储介质存储有计算机程序，所述计算机程序配置成被运行时执行上述的基于微前端架构的子应用运行方法。

本申请提供了一种基于微前端架构的子应用运行方法、电子设备及存储介质，构建用于在主应用中运行的子应用的入口组件，首先响应于加载子应用的触发请求，获取主应用资源，然后解析主应用资源，以获取可执行的子应用资源列表，再加载所述入口组件，并获取所述子应用的入口地址，再利用入口组件依据所述入口地址执行子应用资源列表以获取子应用资源，最后利用入口组件创建用于子应用的沙箱，并将子应用资源注入沙箱，以加载子应用。由于本申请采用入口组件的方式加载子应用，避免Qiankun系统的url监听，因此使得子应用的加载更加灵活。同时，由于入口组件依据子应用的触发请求加载，因此每个子应用均能对应一个入口组件，可以实现异步加载，加载速度更加快速。此外，本申请提供的入口组件由于与子应用对应，因此无需掌握子应用的生命周期与提前匹配路径，子应用加载更加便捷。

本发明实施例的可选特征和其他效果一部分在下文描述，一部分可通过阅读本文而明白。

附图说明

结合附图来详细说明本发明的实施例，所示元件不受附图所显示的比例限制，附图中相同或相似的附图标记表示相同或类似的元件，其中：

图1示出了Qiankun微前端框架的调度方案的模块示意图；

图2示出了根据本发明实施例提供的基于微前端架构的子应用运行方法的第一种示例性流程图；

图3示出了根据本发明实施例提供的利用入口组件加载基于ES模块的子应用的一种模块示意图；

图4示出了根据本发明实施例提供的基于微前端架构的子应用运行方法的第二种示例性流程图；

图5示出了根据本发明实施例提供的基于微前端架构的子应用运行方法的第三种示例性流程图；

图6示出了根据本发明实施例提供的沙箱执行子应用的第一种交互示意图；

图7示出了根据本发明实施例提供的沙箱执行子应用的第二种交互示意图；

图8示出了根据本发明实施例提供的沙箱执行子应用的第三种交互示意图；

图9示出了根据本发明实施例提供的基于微前端架构的子应用运行方法的第三种示例性流程图；

图10示出了根据本发明实施例提供的基于微前端架构的子应用运行方法的第四种示例性流程图；

图11示出了根据本发明实施例提供的基于微前端架构的子应用运行方法的第五种示例性流程图；

图12示出了根据本发明实施例提供的子应用运行方法的一种示例性界面图。

图13示出了根据本发明实施例提供的子应用运行方法的另一种示例性界面图。

图14示出了根据本发明实施例提供的基于微前端架构的子应用运行装置的模块示意图。

图15示出了根据本发明实施例提供的基于微前端架构的子应用运行方法的第六种示例性流程图；

图16示出能实施根据本发明实施例的基于微前端架构的子应用运行方法的移动终端的示例性硬件结构示意图；

图17示出了能实施根据本发明实施例的基于微前端架构的子应用运行方法的移动终端的示例性操作系统结构示意图；

图18示出了能实施根据本发明实施例的基于微前端架构的子应用运行方法的移动终端的示例性操作系统结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下面结合具体实施方式和附图，对本发明做进一步详细说明。在此，本发明的示意性实施方式及其说明用于解释本发明，但并不作为对本发明的限定。

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。市面上的主流的微前端方案有Qiankun、singleSPA,其中Qiankun的接入方式最为简洁。

Qiankun系统是一款基于single-spa进行二次开发的微前端框架，用于将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。需要说明的是，在利用Qiankun系统加载应用时，需要区分出主应用与子应用，其中，主应用为统治各个子应用的应用，也即合并结果页面，负责子应用的注册，路由分发等；子应用为各个SPA应用，即SPA(single page web application，单页Web应用)里的页面组件，子应用主要负责暴露一些函数，以此对接主应用。

图1示出了Qiankun系统在加载子应用时的调度方案，首先需要 Qiankun系统的基座框架实时主动监听url变化，进而实现子应用的操作。例如，如图所示，从子应用A切换到B，即从路径\Aapp到路径\Bapp；或者子应用A中的操作比如\Aapp到\Aapp\xxxx。然而，正如背景技术中所述，目前乾坤系统可能不支持利用某些脚本语言构建模块来构建子应用，例如，乾坤系统无法实现ES(ECMAScript)模块的子应用的加载，主要原因在于， ES应用有import、exports关键字，而这两个关键字规定必须在代码的顶层执行，不能被包裹。然而，乾坤系统使用import-html-entry来加载子应用，在使用eval循环执行子应用资源列表的时候，使用的一个IIFE函数来执行子应用代码，通过该方式加载的子应用资源，都会被乾坤系统包裹运行一次，与ES应用不能被包裹的性质相矛盾，因此无法利用乾坤系统加载ES应用。

此外，乾坤系统在进行子应用调度方面，采用的调度方案为监听url的变化，然后跟进对应的配置规则切换子应用。然而，通过该调度方式，微前端框架需要与主应用框架同步加载，可能会影响主应用的存储空间大小以及主应用的加载速度。

并且，基于Qiankun系统的微前端框架可能需要并掌控子应用的生命周期，并且子应用的接入需要进行特定预先配置，感知不同的运行场景来启动或以其他方式操作子应用。综上，现有技术中利用乾坤系统加载子应用的方式至少存在以下问题：

1、目前的乾坤系统不支持基于ES模块的子应用的加载。

2、乾坤系统存在影响主应用大小的问题。因为本身数据包比较大，对主应用加载速度会有影响。

3、乾坤系统需要并掌控子应用的生命周期，所以子应用在接入时需要进行特定预先配置，需要感知不同的运行场景来启动或其它操作。

有鉴于此，为了解决上述问题，本申请提供了一种基于微前端架构的子应用运行方法，通过针对每个子应用构建对应的组件的方式，使得能够实现对基于ES模块的子应用进行更加简化的加载。

下面对本申请提供的基于微前端架构的子应用运行方法进行示例性说明：

作为一种实现方式，请参阅图2，该基于微前端架构的子应用运行方法包括：

S102，构建用于在主应用中运行的子应用的入口组件。

S104，响应于加载子应用的触发请求，获取主应用资源。

S106，解析主应用资源，以获取可执行的子应用资源列表。

S108，加载入口组件，并获取子应用的入口地址。

S110，利用入口组件依据入口地址执行子应用资源列表以获取子应用资源。

S112，利用入口组件创建用于子应用的沙箱，并将子应用资源注入沙箱，以加载子应用。

在本发明实施例中，主应用可以包括主框架、浏览器主框架等。入口组件可以包括Web组件，是对Web的数据和方法进行封装实体。

由于本申请采用入口组件的方式加载子应用，避免Qiankun系统的url 监听，因此可以使得子应用的加载更加灵活。

并且，本申请采可以通过入口组件加载不同脚本语言构建的子应用，例如，对基于ES模块的子应用进行加载。在此基础上，作为一种实现方式，本申请所述的子应用可以为基于ES模块实现的子应用。

需要说明的是，ES模块是一种JavaScript代码重用的机制，且ES模块主要应用于浏览器上。在本发明实施例中，基于ES模块的子应用意指利用ES模块构建的子函数，在本文中也可以简称为ES子应用。当然地，利用本申请提供的入口组件进行加载的方式，还可以加载其它脚本语言构建的子应用，例如加载使用CommonJS模块通过构建工具构建转换之后的子应用。

作为一种实现方式，每个基于ES模块的子应用均有一个对应的入口组件对其进行加载。例如，请参阅图3，当存在基于ES模块的子应用A 与基于ES模块的子应用B时，则入口组件包括入口组件A与入口组件 B，利用入口组件A可以对基于ES模块的子应用A进行加载，利用入口组件B可以对基于ES模块的子应用B进行加载，以此类推。通过该实现方式，本质上无须对基于ES模块的子应用进行改造，进而简化了接入方式，使得基于ES模块的子应用加载更加方便。当然地，通过利用入口组件对基于ES模块的子应用进行加载的方式，可以支持异步加载微前端框架与子应用。例如，可以利用入口组件A对基于ES模块的子应用A进行加载的同时，利用入口组件B对基于ES模块的子应用B进行加载，二者互不影响。

因此，当检测到子应用的触发请求时，可以依据该请求加载对应的入口组件，并获取主应用资源。其中，本申请所述主应用资源包括超文本标记语言(HTML)资源，HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。在获取HTML文件后，加载对应的入口组件，并在解析HTML 资源后，获取可执行的子应用资源列表，并利用入口组件加载对应的子应用资源列表，进而获取对应的子应用资源。在本发明实施例中，所述子应用资源列表可以包括可执行的Javascript(JS)列表，其中，JS列表即 Javascript数组，列表是一组有序的数据，每个列表中的数据项称为元素。在JavaScript中，列表中的元素可以是任意数据类型在本发明实施例中，所述子应用资源列表可以包括可执行的CSS列表。相应地，所述子应用资源可以包括JS资源和/或CSS资源。

作为一种实现方式，在获取子应用资源列表时，会获取对应的子应用资源列表，例如，当根据HTML文件内容，确定需要加载入口组件A与入口组件B时，解析HTML资源后，获取可执行的子应用资源列表包括子应用A与子应用B，并利用入口组件A加载子应用A，同时利用入口组件B加载子应用B。作为另一种实现方式，在获取子应用资源列表时，也可能会获取更多的子应用资源列表，例如，当根据HTML文件内容，确定需要加载入口组件A与入口组件B时，解析HTML资源后，获取可执行的子应用资源列表包括子应用A、子应用B、子应用C以及子应用D，此时，利用入口组件A加载子应用A，同时利用入口组件B加载子应用B。

需要说明的是，在确定子应用资源列表后，本申请采用入口地址的方式确定对应的子应用资源，即在加载入口组件后，先获取子应用的入口地址，然后利用入口组件依据入口地址执行子应用资源列表，进而获取对应的子应用资源。

在获取子应用资源后，即获取了待执行的相关指令，在此基础上，当子应用需要访问或设置全局变量时，为了避免影响到其它应用，可以通过设置沙箱，并访问和设置提供的沙箱。因此在获取子应用资源后，还会利用入口组件出创建用于对应的子应用的沙箱，并将子应用资源注入该沙箱，实现加载子应用的目的。

需要说明的是，沙箱可以构造成主应用、如浏览器窗口(window)对象的代理。由此，通过设置沙箱的方式，一方面，可以避免基于ES模块的子应用直接访问主应用、如浏览器窗口(window)对象；另一方面，也可以避免影响其它的应用。同时，通过利用沙箱加载基于ES模块的子应用，能后记录沙箱在执行基于ES模块的子应用相关执行数据，该执行数据即为基于ES模块的子应用的执行结果，进而使得系统在执行不同的基于ES模块的子应用时，直接调用沙箱的执行数据即可，实现了对基于ES 模块的子应用的加载。

可选地，请参阅图4，S112包括：

S112':创建用于沙箱的窗口代理，该窗口代理对接主应用的窗口对象和沙箱。

其中，窗口代理为用于连通沙箱与主应用之间的中间件，通过创建窗口代理，可以实现子应用对全局变量的访问与设置，作为一种实现方式，窗口代理可以由沙箱构成。在一种可选的实现方式中，每个基于ES模块的子应用均需要一个沙箱进行加载，例如，当加载基于ES模块的子应用A时，入口组件A需要新建沙箱A，然后利用沙箱A运行基于ES模块的子应用A；而当加载基于ES模块的子应用B时，需要新建沙箱B，然后利用沙箱B运行基于ES模块的子应用B。

其中，在加载基于ES模块的子应用时，沙箱用于执行解析的子应用资源，执行方式包括但不限于调用、更改、新建沙箱内的函数等。

作为一种实现方式，请参阅图5，在S112后，即在子应用加载后，该方法还包括：

S114，响应于子应用访问第一目标变量的请求，确定沙箱内是否存在第一目标变量，如果是，则执行S116；如果否，则执行S118。

S116，将沙箱中的第一目标变量发送至子应用。

S118，通过窗口代理将主应用窗口对象中的第一目标变量发送至子应用。

其中，本申请所述的目标变量涉及全局向量，即主应用框架、如浏览器层面的向量。在子应用发出访问第一目标变量的请求时，优先获取沙箱内的值，若沙箱内并不存在该值时，则从主应用窗口对象中获取。

例如，请参阅图6，当基于ES模块的子应用A访问第一目标变量(值)a时，若沙箱中存在第一目标变量a，则沙箱会将第一目标变量a反馈至基于ES模块的子应用A。相应地，当基于ES模块的子应用A访问另外的第一目标变量(值)b时，若沙箱中不存在第一目标变量b，需要从主应用窗口对象中获取对应的第一目标变量b，并将第一目标变量b发送至基于ES模块的子应用。

可选地，在一种实现方式中，请参阅图7，在执行上述方式时，基于 ES模块的子应用A先发出访问请求，该访问请求包括需要访问第一目标变量a与第一目标变量b，在接收到在访问请求后，查看沙箱中是否存在第一目标变量a与第一目标变量b，若只存在第一目标变量a，则将第一目标变量a发送至基于ES模块的子应用A，同时将第一目标变量b的信息发送至基于ES模块的子应用A。在接收到该信息后，基于ES模块的子应用A继续向主应用窗口对象发送访问第一目标变量b的访问请求，主应用窗口对象再将第一目标变量b发送至基于ES模块的子应用A，进而实现了对第一目标变量a与第一目标变量b的访问。

作为另一种实现方式，请参阅图8，在执行上述方式时，基于ES模块的子应用A先发出访问请求，该访问请求包括需要访问第一目标变量a 与第一目标变量b，沙箱在接收到在访问请求后，查看沙箱中是否存在第一目标变量a与第一目标变量b，若只存在第一目标变量a，则沙箱向主应用窗口对象发出访问请求，该访问请求只需访问第一目标变量b，在此基础上，主应用窗口对象会将第一目标变量发送至沙箱，此时沙箱中同时存在第一目标变量a与b，并将第一目标变量a与b同时发送至基于ES模块的子应用，进而实现了对第一目标变量a与第一目标变量b的访问。

可选地，请参阅图9，在S112后，该方法还包括：

S120，响应于子应用设置第二目标变量的请求，确定沙箱内是否存在第二目标变量，如果是，则执行S122，如果否，则执行S124。

S122，对沙箱内的第二目标变量进行设置。

S124，通过窗口代理确定主应用窗口对象中的第二目标变量是否可设置，如果是，则执行S126，如果否，则执行S128。

S126，通过窗口代理设置主应用窗口对象中的第二目标变量；

S128，保持主应用窗口对象中第二目标变量不变。

其中，本申请所述的设置沙箱的第二目标变量的请求，指对第二目标变量进行更改、新设或者删除等操作，例如，更改某些函数中的参数。

需要说明的是，在设置第二目标变量时，由于某些全局变量不能被更改，若其一旦被更改，则可能会引起故障。

在此基础上，当沙箱接收到更改请求时，例如当要将某一第二目标变量(值)进行修改，如将全局变量值x更改全局变量值y时，首先确定沙箱内是否存在全局变量x，若存在，则将沙箱内的全局变量值x更改全局变量值y，如不存在，则可选地更改主应用窗口对象中的全局变量值x。此时，需要先确定主应用窗口对象中的全局变量值x是否能够被更改，若能够被更改，则将主应用窗口对象中的全局变量值x更改为全局变量值 y，若无法被更改，则保持主应用窗口对象中第二目标变量不变。

可以理解地，本申请所述的更改，包括对某一参数进行设置，例如，沙箱中的某一参数并不存在值，基于ES模块的子应用可对该值进行设置，在此之前，沙箱需要判断该值是否可被设置，在此不做限定。

在此，需要说明的是，本申请提供的基于微前端架构的子应用运行方法不仅能够实现子应用的加载，还能够实现子应用的卸载，在此基础上，在S102之后，请参阅图10，该方法还包括:

S103，响应于卸载子应用的触发请求，卸载入口组件，以卸载子应用。

即在本申请中，当接收到入口组件的加载或卸载请求时，依据该请求对应的加载或者卸载入口组件。具体地，在通过获取并解析HTML文件，根据文件的内容，决定是否加载或不再加载(在本申请实施例中也可被解释为卸载)相应的组件。例如，当解析到当前的HTML文件有入口组件A 且在此之前子应用A并未运行，则需要利用入口组件A加载子应用A。又例如，当解析到当前的HTML文件并没有入口组件B，即不再加载入口组件B(在本申请实施例中也可被解释为，卸载入口组件B)，且在此之前子应用B正在运行，则子应用B也相应卸载。

在实际应用中，在HTML上的操作(例如检索或者点击)，也可相应地导致子应用的加载或不再加载(卸载)。

需要说明的是，在浏览器运行过程中，页面可主动或被动的实时刷新，进而使得能够实时获取HTML文件，并相应加载或卸载入口组件。

在本发明实施例中，在卸载入口组件的同时，为了防止副作用函数的影响，优选将副作用函数清除。还需要说明的是，本申请中S103与S104- S110之间并无严格的先后顺序。

在此基础上，请参阅图11，S102包括：

定义用于所述子应用的第一函数和第二函数。

该方法还包括：

在子应用被加载后，记录子应用执行第一函数的操作；

S103包括：

S103'：响应于卸载子应用的触发请求，清除子应用执行的第一函数的操作。

在本发明实施例中，本申请所述的第一函数可以为副作用函数，第二函数为非副作用函数。其中，本申请所述的副作用函数，指在卸载相应的子应用后，该函数的继续执行会对主应用和/或其他子应用的运行产生不利结果。因此，第一函数包括窗口对象(window)上的全局方法，如定时器，滚动监听的全局事件，这些函数在子应用切换时需要做清理和还原。而第二函数是指在函数调用时，除了返回值还会对全局变量做改变(对沙箱的操作)，这些操作在子应用切换时保留在沙箱。

需要说明的是，本申请中所述的副作用函数，可以包括子应用调用的全局或非全局函数，在此不做限定。在一个具体实例中，所述副作用函数例如为子应用创建的一个或多个定时器(函数)，例如一个或多个全局或非全局的计时器(函数)，优选非全局的计时器(函数)。

此外，在一种可选的实现方式中，可以在构建入口组件时定义哪些函数或哪些函数类型属于第一函数，即副作用函数。

基于此，该方法还包括：

确定基于ES模块的子应用的类型。

当基于ES模块的子应用的类型为目标类型时，清除与基于ES模块的子应用关联的副作用函数。

在利用入口组件加载基于ES模块的子应用时，即可确定出基于ES模块的子应用的类型，对于不同类型的基于ES模块的子应用，其可能对应不同的副作用函数。在此基础上，可以确定当基于ES模块的子应用的类型为目标类型时，清除与基于ES模块的子应用关联的副作用函数的所有操作。在此基础上，在执行子应用时，还会记录子应用的执行数据，并在写在子应用后，清除子应用的相关操作，即清除子应用执行对应副作用函数的操作。

当然地，对于子应用执行正常函数的操作，则无须进行清除。可选地，该方法还包括：

在子应用被加载后，记录子应用执行第二函数的操作和对沙箱的操作。

S103，保留子应用执行的第二函数的操作和对沙箱的操作。

即在运行过程中，在卸载子应用后，对于副作用函数的操作将会一并清除，而对于正常函数的操作则保留。

借助于选择性地清除副作用函数并保留非副作用函数，能够使得子应用的加载和卸载异常快捷，且不会造成主应用和/或其他子应用的运行异常。

为便于理解，本申请以实际示例进行说明。请参阅图12与图13，假设推荐歌曲、推荐歌单属于不同的子应用，并具有在主应用界面上的不同图标。在一种实现方式中，推荐歌曲中的不同歌曲也属于不同的子应用，当用户刷新页面，或者页面在固定的时间被动刷新时，系统均能根据 HTML文件确定是否需要加载或卸载相应的子应用。

基于上述实现方式，请参阅图14，本申请还提供了一种基于微前端架构的子应用运行装置200，该基于微前端架构的子应用运行装置200包括：

入口组件加载单元210，用于响应于加载子应用的触发请求，获取主应用资源，加载入口组件。

可以理解地，通过入口组件构建单元210可以执行上述的S102。

处理单元240，用于响应于加载子应用的触发请求，获取主应用资源；

可以理解地，通过处理单元240可以执行上述的S104。

资源解析单元230，用于解析主应用资源，以获取可执行的子应用资源列表；

可以理解地，通过资源解析单元230可以执行上述的S106。

入口组件加载单元220还用于加载所述入口组件，并获取所述子应用的入口地址。

可以理解地，通过入口组件加载单元220可以执行上述的S108。

处理单元240，用于利用入口组件依据所述入口地址执行子应用资源列表以获取子应用资源；

可以理解地，通过处理单元240可以执行上述的S110。

处理单元240，还用于利用入口组件创建用于子应用的沙箱，并将子应用资源注入沙箱，以加载子应用。

可以理解地，通过处理单元240可以执行上述的S112。

当然地，上述实施例的每一个步骤均有一个对应的功能模块执行，在此不做赘述。

基于上述实现方式，请参阅图15，本申请还提供了另一种基于微前端架构的子应用运行方法，该方法包括：

S202，构建用于在主应用中运行的第一子应用的第一入口组件。

S204，构建用于在主应用中运行的第二子应用的第二入口组件。

S206，响应于从第一子应用切换到第二子应用的触发请求，获取主应用资源，卸载第一入口组件以卸载第一子应用。

S208，解析主应用资源，以获取可执行的第二子应用资源列表。

S210，加载第二入口组件，并获取第二子应用的入口地址。

S212，利用第二入口组件依据入口地址执行第二子应用资源列表以获取第二子应用资源。

S214，利用第二入口组件创建用于第二子应用的第二沙箱，并将第二子应用资源注入第二沙箱，以加载第二子应用。

与上述实现方式不同的是，本实施例中可以在对部分子应用进行卸载的同时，对另一部分子应用进行加载，二者互不影响，实现了异步加载。

当然地，S202包括：

定义用于第一子应用的第一函数和第二函数。

S206包括：

清除第一子应用执行的第一函数的操作。

在本发明的该实施例实现了不同子应用之间的调度，例如从第一子应用切换到第二子应用(即，第一子应用的卸载，第二子应用的加载)，这与Qiankun架构所实现的子应用调度相比，无需监听url的变化。

由于上述实施例已经对子应用的加载与卸载进行详细说明，因此本实施例不再进行赘述。

通过本申请提供的基于微前端架构的子应用运行方法，一方面，可以实现对基于ES模块的子应用的加载，应用场景更广。同时，子应用无需根据运行场景适配，降低了子应用的接入成本，并以组件的方式使用，无需提前配置规则，更加灵活。可以理解地，本申请将超大应用拆分多个应用，独立部署，开发合维护时，产品并不分开，体验上还是一个整体，最终提升团队合作开发效率。

综上所述，本发明实施例提供一种基于微前端架构的子应用运行方法和装置以及相关的电子设备和存储介质。该子应用运行方法可以借助于一个或多个计算机、如终端、比如移动终端、例如智能手机实施。在一些实施例中，所述子应用运行装置可以由软件、硬件或软硬件结合实现。

在此基础上，本发明的实施例中还提供了一种电子设备，其包括：处理器和存储有计算机程序的存储器，所述处理器被配置为在运行计算机程序时实施任一根据本发明实施例的方法。另外，还可以提供实现根据本发明实施例的子应用运行装置。

在本发明的一个优选实施例中，所述电子设备可以为移动终端，优选可以为手机。仅作为示例性的实现方案，图16示出了电子设备、如移动终端1600的一个具体实施例的硬件结构示意图；而图17和图18示出了电子设备、如移动终端的一个具体实施例的系统结构示意图。

在所示出的实施例中，移动终端1600可以包括处理器1601、外部存储器接口1612、内部存储器1610、通用串行总线(USB)接口1613、充电管理模块1614、电源管理模块1615、电池1616、移动通信模块1640、无线通信模块1642、天线1639和1641、音频模块1634、扬声器1635、受话器1636、麦克风1637、耳机接口1638、按键1609、马达1608、指示器 1607、用户标识模块(SIM)卡接口1611、显示屏1605、摄像装置 1606，以及传感器模块1620等。

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

在一些实施例中，处理器1601可以包括一个或一个以上处理单元。在一些实施例中，处理器1601可以包括以下之一或以下至少两种的组合：应用处理器(AP)、调制解调处理器、基带处理器、图形处理器 (GPU)、图像信号处理器(ISP)、控制器、存储器、视频编解码器、数字信号处理器(DSP)、基带处理器、神经网络处理器(NPU)等。不同的处理单元可以是独立的器件，也可以集成在一个或一个以上处理器中。

控制器可以是移动终端1600的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器中的存储器为高速缓冲存储器。该存储器可以保存处理器刚用过或循环使用的指令或数据。如果处理器需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器1601的等待时间，因而提高了系统的效率。

NPU为神经网络(NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断地自学习。

GPU为图像处理的微处理器，连接显示屏和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

数字信号处理器(ISP)用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。

在一些实施例中，处理器1601可以包括一个或一个接口。接口可以包括集成电路(I2C)接口、集成电路内置音频(I2S)接口、脉冲编码调制 (PCM)接口、通用异步收发传输器(UART)接口、移动产业处理器接口(MIPI)、通用输入输出(GPIO)接口、用户标识模块(SIM)接口、通用串行总线(USB)接口等。

可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对移动终端的结构限定。在本申请另一些实施例中，移动终端也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。

移动终端1600的无线通信功能可以通过天线1639和1641、移动通信模块1640、无线通信模块1642、调制解调处理器或基带处理器等实现。

视频编解码器用于对数字视频压缩或解压缩。

移动终端1600可以通过音频模块、扬声器、受话器、麦克风、耳机接口，以及应用处理器等实现音频功能。例如音乐播放，录音等。

音频模块用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。

麦克风用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风发声，将声音信号输入到麦克风。

传感器模块1620可包括下述传感器中的一个或多个：

压力传感器1623配置为感受压力信号，将压力信号转换成电信号。

气压传感器1624用于测量气压。

磁传感器1625包括霍尔传感器。

陀螺仪传感器1627可以用于确定移动终端1600的运动姿态。

加速度传感器1628可检测移动终端1600在各个方向上加速度的大小。

距离传感器1629可配置为测量距离。

接近光传感器1621可以包括例如发光二极管(LED)和光检测器，例如光电二极管。

环境光传感器1622用于感知环境光亮度。

指纹传感器1631可配置为采集指纹。

触摸传感器1632可以设置于显示屏，由触摸传感器与显示屏组成触摸屏，也称“触控屏”。触摸传感器用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型，例如单击、双击、长按、轻拍、定向滑动、聚拢等等。

骨传导传感器1633可以获取振动信号。

所述传感器模块1620还可包括重力传感器1626、温度传感器1630。

电子设备(计算机)、如移动终端的软件操作系统可以采用分层架构、事件驱动架构、微核架构、微服务架构或云架构。

本文所示的实施例以分层架构的分别以iOS和安卓操作系统平台为例，示例性说明移动终端的软件结构。但可以想到，本文的实施例可以在不同的软件操作系统中实施。

在图17所示的实施例中，本发明实施例的方案可以采用iOS操作系统。iOS操作系统采用四层架构，由上到下依次为可触摸层(Cocoa Touch layer)1710、媒体层(Medialayer)1720、核心服务层(Core ServicES layer)1730以及核心操作系统层(Core OSlayer)1740。触摸层1710为应用程序开发提供了各种常用的框架并且大部分框架与界面有关，其负责用户在iOS设备上的触摸交互操作。媒体层提供应用中视听方面的技术，如图形图像、声音技术、视频以及音视频传输相关的框架等。核心服务层提供给应用所需要的基础的系统服务。核心操作系统层包含大多数低级别接近硬件的功能。

在本发明实施例中，UIKit是可触摸层1710的用户界面框架，其可以以媒体层1720中的众多图像框架作为支撑，包括但不限于图17中所示的核心图库(Core Graphics)、核心动画(Core Animation)、开放式图库ES (OPEN GL ES)、核心图(Core Image)、图像IO(ImageIO)、图库包 (GLKit)。

图18是安卓操作系统结构示意图，本发明实施例的方案可以采用安卓操作系统。分层架构将软件分成若干个层，层间通过软件接口通信。在一些实施例中，将安卓系统分为四层，从上至下分别为应用程序层1810、应用程序框架层1820、安卓运行时(Runtime)和系统库1830、以及内核层1840。

应用程序层1810可以包括一系列应用程序包。

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

窗口管理器用于管理窗口程序。

内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。

视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。

电话管理器用于提供移动终端的通信功能。

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

通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。

安卓Runtime(运行时)包括核心库和虚拟机，安卓Runtime负责安卓系统的调度和管理。核心库包含两部分：一部分是java语言要调用的功能函数，另一部分是安卓的核心库。应用程序层和框架层运行在虚拟机中。

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

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

内核层1840是硬件和软件之间的层。内核层可包含显示驱动、摄像头驱动、音频接口、传感器驱动、电源管理和GPS接口。在本发明的一些实施例中，的显示可以调用显示驱动。

上述实施例阐明的系统、装置、模块或单元，可以由电子设备(计算机)或其关联部件实现，优选由移动终端实现。移动终端例如可以为智能电话、膝上型计算机、车载人机交互设备、个人数字助理、媒体播放器、导航设备、游戏控制台、平板电脑、可穿戴设备或者其组合。

尽管未示出，在一些实施例中还提供一种存储介质，存储有计算机程序。计算机程序配置成被运行时执行任一本发明实施例的方法。

在本发明的实施例的存储介质包括永久性和非永久性、可移动和非可移动的可以由任何方法或技术来实现信息存储的物品。存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器 (ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

本领域技术人员应明白，本说明书的实施例可提供为方法、系统或计算机程序产品。因此，本领域技术人员可想到，上述实施例阐明的功能模块/单元或控制器以及相关方法步骤的实现，可以用软件、硬件和软/硬件结合的方式实现。

除非明确指出，根据本发明实施例加载的方法、程序的动作或步骤并不必须按照特定的顺序来执行并且仍然可以实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

在本文中，针对本发明的多个实施例进行了描述，但为简明起见，各实施例的描述并不是详尽的，各个实施例之间相同或相似的特征或部分可能会被省略。在本文中，“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”意指适用于根据本发明的至少一个实施例或示例中，而非所有实施例。上述术语并不必然意味着指代相同的实施例或示例。在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

已参考上述实施例具体示出并描述了本发明的示例性系统及方法，其仅为实施本系统及方法的最佳模式的示例。本领域的技术人员可以理解的是，可以在实施本系统及/或方法时，对这里描述的系统及方法的实施例做各种改变，而不脱离界定在所附权利要求中的本发明的精神及范围。

Claims (13)

1.一种基于微前端架构的子应用运行方法，其特征在于，包括：

构建用于在主应用中运行的子应用的入口组件；

响应于加载所述子应用的触发请求，获取主应用资源；

解析所述主应用资源，以获取可执行的子应用资源列表；

加载所述入口组件，并获取所述子应用的入口地址；

利用所述入口组件依据所述入口地址执行所述子应用资源列表以获取子应用资源；

利用所述入口组件创建用于所述子应用的沙箱，并将所述子应用资源注入所述沙箱，以加载所述子应用。

2.如权利要求1所述的子应用运行方法，其特征在于，所述子应用为基于ES模块实现的子应用。

3.如权利要求1或2所述的子应用运行方法，其特征在于，创建用于所述子应用的沙箱，包括：

创建用于所述沙箱的窗口代理，所述窗口代理对接所述主应用的窗口对象和所述沙箱。

4.如权利要求3所述的子应用运行方法，其特征在于，所述方法还包括：

响应于所述子应用访问第一目标变量的请求，确定所述沙箱内是否存在所述第一目标变量；

若是，则将所述沙箱中的第一目标变量发送至所述子应用；

若否，则通过所述窗口代理将所述主应用窗口对象中的第一目标变量发送至所述子应用。

5.如权利要求3所述的子应用运行方法，其特征在于，所述方法还包括：

响应于所述子应用设置第二目标变量的请求，确定所述沙箱内是否存在所述第二目标变量；

若是，则对所述沙箱内的所述第二目标变量进行设置；

若否，则通过所述窗口代理确定所述主应用窗口对象中的第二目标变量是否可设置；

若是，则通过所述窗口代理设置主应用窗口对象中的第二目标变量；

若否，则保持主应用窗口对象中所述第二目标变量不变。

6.如权利要求1或2所述的子应用运行方法，其特征在于，所述方法还包括：

响应于卸载所述子应用的触发请求，卸载所述入口组件，以卸载所述子应用。

7.如权利要求6所述的子应用运行方法，其特征在于，

所述构建用于在主应用中运行的子应用的入口组件，包括：

定义用于所述子应用的第一函数和第二函数；

所述方法还包括：

在所述子应用被加载后，记录所述子应用执行所述第一函数的操作；

所述响应于卸载所述子应用的触发请求，卸载所述入口组件，以卸载所述子应用，包括：

清除所述子应用执行的第一函数的所述操作。

8.如权利要求7所述的子应用运行方法，其特征在于，所述方法还包括：

在所述子应用被加载后，记录所述子应用执行所述第二函数的操作和对所述沙箱的操作；

所述响应于卸载所述子应用的触发请求，卸载所述入口组件，以卸载所述子应用，还包括：

保留所述子应用执行的第二函数的所述操作和对所述沙箱的所述操作。

9.一种基于微前端架构的子应用运行方法，其特征在于，包括：

构建用于在主应用中运行的第一子应用的第一入口组件；

构建用于在主应用中运行的第二子应用的第二入口组件；

响应于从所述第一子应用切换到所述第二子应用的触发请求，获取主应用资源，卸载所述第一入口组件以卸载所述第一子应用；

解析所述主应用资源，以获取可执行的第二子应用资源列表；

加载所述第二入口组件，并获取所述第二子应用的入口地址；

利用所述第二入口组件依据所述入口地址执行所述第二子应用资源列表以获取第二子应用资源；

利用所述第二入口组件创建用于所述第二子应用的第二沙箱，并将所述第二子应用资源注入所述第二沙箱，以加载所述第二子应用。

10.如权利要求9所述的子应用运行方法，其特征在于，

所述构建用于在主应用中运行的第一子应用的第一入口组件，包括：

定义用于所述第一子应用的第一函数和第二函数；

所述卸载所述第一入口组件以卸载所述第一子应用，包括：

清除所述第一子应用执行的所述第一函数的操作。

11.如权利要求9或10所述的子应用运行方法，其特征在于，所述第一子应用和第二子应用为基于ES模块实现的子应用。

12.一种电子设备，其特征在于，包括：处理器和存储有计算机程序的存储器，所述处理器被配置为在运行计算机程序时执行权利要求1-11中任一项所述的方法。

13.一种存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序配置成被运行时执行权利要求1-11中任一项所述的方法。

Images