CN115562662A - 应用页面的创建方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请实施例属于大数据领域，涉及一种应用页面的创建方法，包括：当接收到与子应用对应的应用访问请求时，加载与预设的微前端框架对应的主应用，通过主应用从应用访问请求中获取子应用的名称；获取与子应用的名称对应的入口文件；基于入口文件获取与子应用对应的资源配置文件；基于资源配置文件确定与子应用对应的初始化资源；基于初始化资源，在与子应用对应的指定挂载区域渲染子应用的页面。本申请还提供一种应用页面的创建装置、计算机设备及存储介质。此外，本申请还涉及区块链技术，初始化资源可存储于区块链中。本申请通过基于微前端框架的使用可以快速创建生成与应用访问请求对应的子应用的页面，提高了子应用的页面的开发创建的效率。

Description

应用页面的创建方法、装置、计算机设备及存储介质

技术领域

本申请涉及大数据和应用程序开发技术领域，尤其涉及应用页面的创建方法、装置、计算机设备及存储介质。

背景技术

随着技术的发展，前端应用承载的内容日益复杂，特别是在金融科技领域中，由于金融涉及行业非常多，且每个行业下细分领域，因此，面临大量异构存量***，具体到每个行业的各类前端***的需求量也非常大。然而，对于一些金融企业，这些金融企业的内部仍存在许多的旧***，例如基于Iframe的***，这些旧***采用的技术栈非常古老，使用这些旧***进行页面创建的开发维护成本都非常大，经常需要重复开发区别不大的页面，页面开发创建的效率低。

发明内容

本申请实施例的目的在于提出一种应用页面的创建方法、装置、计算机设备及存储介质，以解决现有的旧***进行页面创建的开发维护成本都非常大，经常需要重复开发区别不大的页面，造成开发人员的工作量大，重复率高，耗时长，页面开发创建的效率低的技术问题。

为了解决上述技术问题，本申请实施例提供一种应用页面的创建方法，采用了如下所述的技术方案：

判断是否接收到与子应用对应的应用访问请求；其中，所述应用访问携带所述子应用的名称；

若是，加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称；

获取与所述子应用的名称对应的入口文件；

基于所述入口文件获取与所述子应用对应的资源配置文件；

基于所述资源配置文件确定与所述子应用对应的初始化资源；

基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。

进一步的，所述基于所述入口文件获取与所述子应用对应的资源配置文件的步骤，具体包括：

对所述入口文件进行解析，从所述入口文件中获取所述资源配置文件的请求地址；

基于所述请求地址，向预设的第一服务器发送与所述资源配置文件对应的文件获取请求；

接收所述第一服务器对所述文件获取请求进行处理后返回的所述资源配置文件。

进一步的，所述基于所述资源配置文件确定与所述子应用对应的初始化资源的步骤，具体包括：

基于所述资源配置文件获取所述初始化资源内包含的所有文件名；

从所有所述文件名中读取出符合预设条件的目标标签；

将所述目标标签***至预设的应用环境内；

基于***的所述目标标签向预设的第二服务器发送资源获取请求；

接收所述第二服务器对所述资源获取请求进行处理后返回的所述初始化资源。

进一步的，所述基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面的步骤，具体包括：

获取所述初始化资源中包含的js资源文件与css资源文件；

基于所述js资源文件确定出与所述指定挂载区域对应的组件信息；

基于所述css资源文件确定出与所述组件信息对应的组件的显示信息；

基于所述组件信息与所述显示信息在所述指定挂载区域渲染所述子应用的页面。

进一步的，在所述基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面的步骤之后，还包括：

判断是否接收到目标用户触发的与所述子应用的页面对应的编辑请求；

若是，展示预设的子应用编辑页面，并在所述子应用编辑页面内加载预设的组件库；

接收所述目标用户基于拖拽方式从所述组件库拖拽到所述子应用编辑页面内的指定区域的目标组件；

确定所述目标组件在所述指定区域内的指定位置；

获取与所述目标组件对应的组件资源信息；

基于所述目标组件的位置与所述组件资源信息对所述目标组件进行渲染处理与属性配置处理，得到相应的应用界面。

进一步的，所述基于所述目标组件的位置与所述组件资源信息对所述目标组件进行渲染处理与属性配置处理，得到相应的应用界面的步骤，具体包括：

对所述组件资源信息进行解析，获取所述目标组件的代码下载地址以及所述目标组件的属性文件；

基于所述代码下载地址获取与所述目标组件对应的代码；

基于所述代码对处于所述指定位置内的所述目标组件进行渲染；

基于所述属性文件对所述目标组件进行属性配置，得到所述应用界面。

进一步的，在所述基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面的步骤之前，还包括：

获取预设的子应用隔离策略；其中，所述隔离策略包括软隔离、硬隔离、css隔离中的一种或多种；

从所述子应用隔离策略中确定出目标子应用隔离策略；

基于所述目标子应用隔离策略进行对应的应用隔离处理。

为了解决上述技术问题，本申请实施例还提供一种应用页面的创建装置，采用了如下所述的技术方案：

第一判断模块，用于判断是否接收到与子应用对应的应用访问请求；其中，所述应用访问携带所述子应用的名称；

加载模块，用于若是，加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称；

第一获取模块，用于获取与所述子应用的名称对应的入口文件；

第二获取模块，用于基于所述入口文件获取与所述子应用对应的资源配置文件；

第一确定模块，用于基于所述资源配置文件确定与所述子应用对应的初始化资源；

渲染模块，用于基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：

判断是否接收到与子应用对应的应用访问请求；其中，所述应用访问携带所述子应用的名称；

若是，加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称；

获取与所述子应用的名称对应的入口文件；

基于所述入口文件获取与所述子应用对应的资源配置文件；

基于所述资源配置文件确定与所述子应用对应的初始化资源；

基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：

判断是否接收到与子应用对应的应用访问请求；其中，所述应用访问携带所述子应用的名称；

若是，加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称；

获取与所述子应用的名称对应的入口文件；

基于所述入口文件获取与所述子应用对应的资源配置文件；

基于所述资源配置文件确定与所述子应用对应的初始化资源；

基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请实施例当接收到与子应用对应的应用访问请求后，会先加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称，然后获取与所述子应用的名称对应的入口文件，之后基于所述入口文件获取与所述子应用对应的资源配置文件，后续基于所述资源配置文件确定与所述子应用对应的初始化资源，最后基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。本申请实施例通过基于微前端框架的使用，可以快速地创建生成与应用访问请求对应的子应用的页面，使得子应用的网页的访问可以以较快的速度进行响应，提高了子应用的页面的开发创建的效率。并且可以动态获取子应用所需的资源配置文件，实现了对于子应用的页面的轻量化处理，提高了用户的使用体验。

附图说明

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

图1是本申请可以应用于其中的示例性***架构图；

图2根据本申请的应用页面的创建方法的一个实施例的流程图；

图3是根据本申请的应用页面的创建装置的一个实施例的结构示意图；

图4是根据本申请的计算机设备的一个实施例的结构示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

如图1所示，***架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving PictureExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(MovingPictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。

需要说明的是，本申请实施例所提供的应用页面的创建方法一般由服务器/终端设备执行，相应地，应用页面的创建装置一般设置于服务器/终端设备中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的应用页面的创建方法的一个实施例的流程图。所述的应用页面的创建方法，包括以下步骤：

步骤S201，判断是否接收到与子应用对应的应用访问请求；其中，所述应用访问携带所述子应用的名称。

在本实施例中，应用页面的创建方法运行于其上的电子设备(例如图1所示的服务器/终端设备)内的浏览器，可以通过有线连接方式或者无线连接方式获取应用访问请求。需要指出的是，上述无线连接方式可以包括但不限于3G/4G/5G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband)连接、以及其他现在已知或将来开发的无线连接方式。其中，上述应用访问请求为触发的用户对子应用的页面进行访问的请求。具体的，本方案可以是基于用户的操作，例如子应用的点击操作或子应用的域名输入操作等，在安装于电子设备内的浏览器运行的过程中，接收到子应用的访问请求，并在浏览器的基础上调用子应用的场景。

步骤S202，若是，加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称。

在本实施例中，上述微前端框架具体为Single-Spa。微前端类似于微服务，将不同域的前端应用组合在统一的企业管理平台中。每个子应用独立部署、独立运行、独立回滚，彼此互不影响、无技术栈限制。微前端使用的是Single-Spa，它是将多个单页面应用聚合为一个整体应用的JavaScript框架，可以支持Vue、React、Angular所有主流框架开发的应用程序。微前端的基本概念：加载器(独立服务)：也就是微前端架构的核心，主要用来调度子应用，决定何时展示哪个子应用，可以把它理解为电源；包装器(每个子应用都需要有自己的包装器)：把子应用进行包装，给子应用提供生命周期钩子，并将其导出，使得加载器可以使用它们，它相当于电源适配器；主应用(独立服务)：一般是包含所有子应用公共部分的项目，也叫基座，比如导航栏、左侧菜单、右侧内容区域；子应用(独立服务)：展示在主应用内容区域的模块，比如报价管理、投保管理、送单管理等。

步骤S203，获取与所述子应用的名称对应的入口文件。

在本实施例中，可基于子应用的名称，通过路由来向与微前端框架对应的服务器请求子应用的入口文件。其中，入口文件，是指程序项目或者***被访问请求的时候，第一个被访问到的文件，所有的指令功能都是从这文件分发出去，再找相对应的模块进行处理，一些初始化的工作也在这里进行。子应用的入口文件可以根据不同的请求去调用框架不同的模块。另外，上述子应用的入口文件可以包括资源配置文件的请求地址，该地址可以用来获取资源配置文件。上述入口文件还可包括子应用的挂载位置。子应用的挂载位置可以是预先设置的用于挂载子应用的函数实现的位置。此外，子应用的入口文件可以针对每一个子应用进行不同的设置，即有多少个子应用，就有多少个子应用入口文件。

对应的资源加载文件的请求地址。

步骤S204，基于所述入口文件获取与所述子应用对应的资源配置文件。

在本实施例中，上述基于所述入口文件获取与所述子应用对应的资源配置文件的具体实施过程，本申请将在后续的具体实施例中对此进行进一步的细节描述，在此不作过多阐述。

步骤S205，基于所述资源配置文件确定与所述子应用对应的初始化资源。

在本实施例中，上述基于所述资源配置文件确定与所述子应用对应的初始化资源的具体实施过程，本申请将在后续的具体实施例中对此进行进一步的细节描述，在此不作过多阐述。

步骤S206，基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。

在本实施例中，上述基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面的具体实施过程，本申请将在后续的具体实施例中对此进行进一步的细节描述，在此不作过多阐述。

本申请当接收到与子应用对应的应用访问请求后，会先加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称，然后获取与所述子应用的名称对应的入口文件，之后基于所述入口文件获取与所述子应用对应的资源配置文件，后续基于所述资源配置文件确定与所述子应用对应的初始化资源，最后基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。本申请实施例通过基于微前端框架的使用，可以快速地创建生成与应用访问请求对应的子应用的页面，使得子应用的网页的访问可以以较快的速度进行响应，提高了子应用的页面的开发创建的效率。并且可以动态获取子应用所需的资源配置文件，实现了对于子应用的页面的轻量化处理，提高了用户的使用体验。

在一些可选的实现方式中，步骤S204包括以下步骤：

对所述入口文件进行解析，从所述入口文件中获取所述资源配置文件的请求地址。

在本实施例中，上述与子应用对应的入口文件内包括资源配置文件的请求地址。另外，该入口文件内还可包括与子应用对应的挂载位置。

基于所述请求地址，向预设的第一服务器发送与所述资源配置文件对应的文件获取请求。

在本实施例中，上述第一服务器为与上述微前端框架对应的服务器。在得到了资源配置文件的请求地址，可通过流量路由向与预设的第一服务器发送与所述资源配置文件对应的文件获取请求。

接收所述第一服务器对所述文件获取请求进行处理后返回的所述资源配置文件。

在本实施例中，第一服务器在接收到文件获取请求后，会对该文件获取请求进行处理，以从构建生产环境代码时生产的配置清单文件中查询出与上述子应用对应的资源配置文件,并向浏览器返回包含资源配置文件的请求地址的页面。

本申请通过对入口文件进行解析，从入口文件中获取资源配置文件的请求地址，进而基于请求地址向预设的第一服务器发送与资源配置文件对应的文件获取请求，以通过第一服务器实现对于资源配置文件的快速获取，有利于后续可以基于得到的资源配置文件来快速准确地确定出与子应用对应的初始化资源，并进一步基于初始化资源，在与子应用对应的指定挂载区域渲染子应用的页面，以实现对于子应用的页面的快速加载过程。

在本实施例的一些可选的实现方式中，步骤S205包括以下步骤：

基于所述资源配置文件获取所述初始化资源内包含的所有文件名。

在本实施例中，上述资源配置文件内包括有资源载入函数，可通过执行该资源载入函数，从资源载入函数中读取出初始化资源内包含的所有文件名。其中，上述资源载入函数为立即执行函数。通过执行资源载入函数，可以请求到静态资源服务以获取到相应的资源配置文件。资源配置文件是指子应用首页面渲染所需的必需文件。具体的，资源配置文件可以包含子应用的首页面的渲染格式等文件，还可以包括确定子应用渲染的页面中组件数量的文件，以及还可以包括确定子应用渲染的页面中组件样式的文件。

从所有所述文件名中读取出符合预设条件的目标标签。

在本实施例中，上述符合预设条件的目标标签具体是指js标签与css标签。具体的，可通过读取资源配置文件中的文件名的哈希值列表，再基于该哈希值列表确定出子应用渲染所需的css标签与js标签。

将所述目标标签***至预设的应用环境内。

在本实施例中，上述预设的应用环境是指电子设备内的浏览器的应用环境。

基于***的所述目标标签向预设的第二服务器发送资源获取请求。

在本实施例中，上述第二服务器为与上述微前端框架对应的服务器。在将目标标签***至预设的应用环境内后，可通过向预设的第二服务器发送相对应的资源获取请求。

接收所述第二服务器对所述资源获取请求进行处理后返回的所述初始化资源。

在本实施例中，第二服务器在接收到资源获取请求后，会对该资源获取请求进行处理，以查询出与上述子应用对应的初始化资源。

本申请通过基于所述资源配置文件获取所述初始化资源内包含的所有文件名，并从所有所述文件名中读取出符合预设条件的目标标签，在将所述目标标签***至预设的应用环境内后通过向预设的第二服务器发送资源获取请求，以通过第二服务器实现对于初始化资源的快速获取，有利于后续能够基于初始化资源在与子应用对应的指定挂载区域渲染子应用的页面，以实现对于子应用的页面的快速加载过程。

在一些可选的实现方式中，步骤S206包括以下步骤：

获取所述初始化资源中包含的js资源文件与css资源文件。

在本实施例中，上述初始化资源内至少包括js资源文件与css资源文件。

基于所述js资源文件确定出与所述指定挂载区域对应的组件信息。

在本实施例中，上述组件信息是指构建子应用的页面所需的初始化资源构建的组件数量与组件类型，例如可以确定子应用的首页面或者其他页面包含哪些类型的组件，以及包含的组件的数量。

基于所述css资源文件确定出与所述组件信息对应的组件的显示信息。

在本实施例中，上述显示信息是指构建子应用的页面所需的初始化资源构建的各个组件的显示形式、显示位置以及显示颜色中的一种或多种，例如可以具体包含子应用的首页面或者其他页面的具体样式。

基于所述组件信息与所述显示信息在所述指定挂载区域渲染所述子应用的页面。

在本实施例中，得到了子应用的待构建页面所需要的组件信息与显示信息后，便可以基于该组件信息与显示信息在所述指定挂载区域渲染所述子应用的页面，以构建生成最终所需的子应用页面。

本申请通过获取初始化资源中包含的js资源文件与css资源文件，然后基于js资源文件确定出与指定挂载区域对应的组件信息，以及基于css资源文件确定出与组件信息对应的组件的显示信息，进而基于组件信息与显示信息在指定挂载区域渲染子应用的页面，实现对于子应用的页面的快速准确的加载过程。

在一些可选的实现方式中，上述电子设备还可以执行以下步骤：

判断是否接收到目标用户触发的与所述子应用的页面对应的编辑请求。

在本实施例中，上述目标用户可以为与前端页面维护相关的运维人员。上述编辑请求为目标用户触发的用于对创建的子应用的页面进行修改的请求。

若是，展示预设的子应用编辑页面，并在所述子应用编辑页面内加载预设的组件库。

在本实施例中，上述组件库为根据实际的业务使用需求预先构建的包含有一定数量的组件的数据库，举例地，上述组件库内至少包括ElementUI、Ant Design的组件、自定义开发的组件，等等。

接收所述目标用户基于拖拽方式从所述组件库拖拽到所述子应用编辑页面内的指定区域的目标组件。

在本实施例中，对于上述指定区域的实际位置不作具体限定，可根据实际的使用需求预先设置。当在子应用编辑页面内的指定区域内检测到目标组件时，表示该目标组件为需要用于对子应用的页面进行编辑处理的组件。

确定所述目标组件在所述指定区域内的指定位置。

在本实施例中，可通过获取目标组件在指定区域内的坐标信息以确定出上述指定位置。

获取与所述目标组件对应的组件资源信息。

在本实施例中，上述组件资源信息包括目标组件的代码下载地址以及所述目标组件的属性文件。

基于所述目标组件的位置与所述组件资源信息对所述目标组件进行渲染处理与属性配置处理，得到相应的应用界面。

在本实施例中，上述基于所述目标组件的位置与所述组件资源信息对所述目标组件进行渲染处理与属性配置处理，得到相应的应用界面的具体实施过程，本申请将在后续的具体实施例中对此进行进一步的细节描述，在此不作过多阐述。

本申请在创建生成子应用的页面后，如果接收到目标用户触发的与子应用的页面对应的编辑请求，则会展示加载有预设的组件库的子应用编辑页面，然后接收目标用户基于拖拽方式从组件库拖拽到子应用编辑页面内的指定区域的目标组件，之后确定目标组件在指定区域内的指定位置，后续获取与目标组件对应的组件资源信息，最后基于目标组件的位置与组件资源信息对目标组件进行渲染处理与属性配置处理，得到相应的应用界面，以实现基于用户的个人需求来完成对于子应用的页面的修改处理，提高了用户的使用体验。另外，通过使用微前端来进行渲染修改以生成最终的子应用的页面，能够保证不会对电子设备造成代码污染和安全威胁。

在本实施例的一些可选的实现方式中，所述基于所述目标组件的位置与所述组件资源信息对所述目标组件进行渲染处理与属性配置处理，得到相应的应用界面，包括以下步骤：

对所述组件资源信息进行解析，获取所述目标组件的代码下载地址以及所述目标组件的属性文件。

在本实施例中，上述组件资源信息包括目标组件的代码下载地址以及所述目标组件的属性文件。

基于所述代码下载地址获取与所述目标组件对应的代码。

在本实施例中，可基于所述请求地址，向与微前端框架对应的服务器发送与代码下载地址对应的代码获取请求，以通过该服务器对代码获取请求进行处理并返回相应的代码。

基于所述代码对处于所述指定位置内的所述目标组件进行渲染。

基于所述属性文件对所述目标组件进行属性配置，得到所述应用界面。

本申请通过对组件资源信息进行解析，获取目标组件的代码下载地址以及目标组件的属性文件，然后基于代码下载地址获取与目标组件对应的代码，后续基于代码对处于指定位置内的目标组件进行渲染，最后基于属性文件对目标组件进行属性配置，得到应用界面，以实现基于用户的个人需求来完成对于子应用的页面的修改处理，提高了用户的使用体验。另外，通过使用微前端来进行渲染修改以生成最终的子应用的页面，能够保证不会对电子设备造成代码污染和安全威胁。

在本实施例的一些可选的实现方式中，在步骤S206之前，上述电子设备还可以执行以下步骤：

获取预设的子应用隔离策略；其中，所述隔离策略包括软隔离、硬隔离、css隔离中的一种或多种。

在本实施例中，一个子应用从加载到运行，再到卸载，有可能会对全局产生一些污染。这些污染包括但不限于：添加/删除/修改全局变量、绑定全局事件、修改原生方法或对象、修改原生方法或对象的原型链。而所有这些子应用造成的影响都可能引起潜在的全局冲突。因此，需要在加载和卸载一个子应用的同时，尽可能消除前述所提及的影响。上述子应用隔离策略为预先构建的用于对不同的子应用之间进行隔离的策略。具体的，(1)软隔离：就是在应用加载之前做一次全局快照，在子应用卸载之后，按快照恢复全局属性。考虑到主应用和子应用会同时运行在Window中，所以，必须区分哪些修改是由子应用引起而需要恢复的。为此，我们创建了一个sandbox。在子应用加载前后，需要进行以下处理：a.记录对全局变量的修改，解除应用时恢复原有值；b.记录全局事件的修改，卸载应用时remove事件；c.记录setTimeout和setIntervald的修改，卸载应用时解除；d.由于sandbox并不能监听到对全局方法(对象)和它们的原型链修改，因此需要在加载子应用前创建一份windowsnapshot，卸载应用后按snapshot恢复全局方法(对象)和它们的原型链。(2)硬隔离，就是在每个子应用加载之前，都进行一次window reload，以可以保证每个子应用在渲染时都是一个全新的环境，哪怕是上一个子应用把window上的属性改了个遍，也丝毫没有影响。然而，仅有window reload不行，页面的刷新会带来用户体验上的下降。所以配合该方案，还需要进行以下的手段优化处理：a.前端snapshot+resume，快速恢复应用界面。b.主应用使用SSR局部直出，使页面在视觉效果上无刷新。(3)css隔离：在子应用加载时，标记该子应用所有的link文件和style文件。在子应用卸载后，同步卸载所有的link文件和style文件。

从所述子应用隔离策略中确定出目标子应用隔离策略。

在本实施例中，对于上述目标子应用隔离策略的确定过程不作具体限定，可根据实际的使用需求进行设置。举例地，上述目标子应用隔离策略可以仅包括上述三种子应用隔离策略中的任意一种策略，或者可以包括三种子应用隔离策略中的任意两种策略，或者包括上述三种子应用隔离策略中的所有策略。

基于所述目标子应用隔离策略进行对应的应用隔离处理。

在本实施例中，通过执行上述目标子应用隔离策略，可以实现对子应用之间的隔离处理。

本申请在进行基于初始化资源，在与子应用对应的指定挂载区域渲染子应用的页面的过程之前，通过从获得的子应用隔离策略中确定出目标子应用隔离策略，进而基于得到的目标子应用隔离策略进行对应的应用隔离处理，从而可以保证每个子应用在渲染时都是一个全新的环境，有效地避免了子应用造成的影响可能引起的潜在的全局冲突，提高了子应用界面的生成智能性。

需要强调的是，为进一步保证上述资源配置文件的私密和安全性，上述资源配置文件还可以存储于一区块链的节点中。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用***。

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互***、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种应用页面的创建装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图3所示，本实施例所述的应用页面的创建装置300包括：第一判断模块301、加载模块302、第一获取模块303、第二获取模块304、第一确定模块305以及渲染模块306。其中：

第一判断模块301，用于判断是否接收到与子应用对应的应用访问请求；其中，所述应用访问携带所述子应用的名称；

加载模块302，用于若是，加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称；

第一获取模块303，用于获取与所述子应用的名称对应的入口文件；

第二获取模块304，用于基于所述入口文件获取与所述子应用对应的资源配置文件；

第一确定模块305，用于基于所述资源配置文件确定与所述子应用对应的初始化资源；

渲染模块306，用于基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。

在本实施例中，上述模块或单元分别用于执行的操作与前述实施方式的应用页面的创建方法的步骤一一对应，在此不再赘述。

在本实施例的一些可选的实现方式中，第二获取模块304包括：

第一获取子模块，用于对所述入口文件进行解析，从所述入口文件中获取所述资源配置文件的请求地址；

第一发送子模块，用于基于所述请求地址，向预设的第一服务器发送与所述资源配置文件对应的文件获取请求；

第一接收子模块，用于接收所述第一服务器对所述文件获取请求进行处理后返回的所述资源配置文件。

在本实施例中，上述模块或单元分别用于执行的操作与前述实施方式的应用页面的创建方法的步骤一一对应，在此不再赘述。

在本实施例的一些可选的实现方式中,第一确定模块305包括：

第二获取子模块，用于基于所述资源配置文件获取所述初始化资源内包含的所有文件名；

读取子模块，用于从所有所述文件名中读取出符合预设条件的目标标签；

***子模块，用于将所述目标标签***至预设的应用环境内；

第二发送子模块，用于基于***的所述目标标签向预设的第二服务器发送资源获取请求；

第二接收子模块，用于接收所述第二服务器对所述资源获取请求进行处理后返回的所述初始化资源。

本实施例中，上述模块或单元分别用于执行的操作与前述实施方式的应用页面的创建方法的步骤一一对应，在此不再赘述。

在本实施例的一些可选的实现方式中，渲染模块306包括：

第三获取子模块，用于获取所述初始化资源中包含的js资源文件与css资源文件；

第一确定子模块，用于基于所述js资源文件确定出与所述指定挂载区域对应的组件信息；

第二确定子模块，用于基于所述css资源文件确定出与所述组件信息对应的组件的显示信息；

第一渲染子模块，用于基于所述组件信息与所述显示信息在所述指定挂载区域渲染所述子应用的页面。

在本实施例中，上述模块或单元分别用于执行的操作与前述实施方式的应用页面的创建方法的步骤一一对应，在此不再赘述。

在本实施例的一些可选的实现方式中，应用页面的创建装置还包括：

第二判断模块，用于判断是否接收到目标用户触发的与所述子应用的页面对应的编辑请求；

展示模块，用于若是，展示预设的子应用编辑页面，并在所述子应用编辑页面内加载预设的组件库；

接收模块，用于接收所述目标用户基于拖拽方式从所述组件库拖拽到所述子应用编辑页面内的指定区域的目标组件；

第二确定模块，用于确定所述目标组件在所述指定区域内的指定位置；

第三获取模块，用于获取与所述目标组件对应的组件资源信息；

第一处理模块，用于基于所述目标组件的位置与所述组件资源信息对所述目标组件进行渲染处理与属性配置处理，得到相应的应用界面。

在本实施例中，上述模块或单元分别用于执行的操作与前述实施方式的应用页面的创建方法的步骤一一对应，在此不再赘述。

在本实施例的一些可选的实现方式中，第一处理模块包括：

第四获取子模块，用于对所述组件资源信息进行解析，获取所述目标组件的代码下载地址以及所述目标组件的属性文件；

第五获取子模块，用于基于所述代码下载地址获取与所述目标组件对应的代码；

第二渲染子模块，用于基于所述代码对处于所述指定位置内的所述目标组件进行渲染；

配置子模块，用于基于所述属性文件对所述目标组件进行属性配置，得到所述应用界面。

在本实施例中，上述模块或单元分别用于执行的操作与前述实施方式的应用页面的创建方法的步骤一一对应，在此不再赘述。

在本实施例的一些可选的实现方式中，应用页面的创建装置还包括：

第四获取模块，用于获取预设的子应用隔离策略；其中，所述隔离策略包括软隔离、硬隔离、css隔离中的一种或多种；

第三确定模块，用于从所述子应用隔离策略中确定出目标子应用隔离策略；

第二处理模块，用于基于所述目标子应用隔离策略进行对应的应用隔离处理。

在本实施例中，上述模块或单元分别用于执行的操作与前述实施方式的应用页面的创建方法的步骤一一对应，在此不再赘述。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。

所述计算机设备4包括通过***总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是，图中仅示出了具有组件41-43的计算机设备4，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器41至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器41可以是所述计算机设备4的内部存储单元，例如该计算机设备4的硬盘或内存。在另一些实施例中，所述存储器41也可以是所述计算机设备4的外部存储设备，例如该计算机设备4上配备的插接式硬盘，智能存储卡(SmartMediaCard,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中，所述存储器41通常用于存储安装于所述计算机设备4的操作***和各类应用软件，例如应用页面的创建方法的计算机可读指令等。此外，所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器42在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器42通常用于控制所述计算机设备4的总体操作。本实施例中，所述处理器42用于运行所述存储器41中存储的计算机可读指令或者处理数据，例如运行所述应用页面的创建方法的计算机可读指令。

所述网络接口43可包括无线网络接口或有线网络接口，该网络接口43通常用于在所述计算机设备4与其他电子设备之间建立通信连接。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请实施例中，当接收到与子应用对应的应用访问请求后，会先加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称，然后获取与所述子应用的名称对应的入口文件，之后基于所述入口文件获取与所述子应用对应的资源配置文件，后续基于所述资源配置文件确定与所述子应用对应的初始化资源，最后基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。本申请实施例通过基于微前端框架的使用，可以快速地创建生成与应用访问请求对应的子应用的页面，使得子应用的网页的访问可以以较快的速度进行响应，提高了子应用的页面的开发创建的效率。并且可以动态获取子应用所需的资源配置文件，实现了对于子应用的页面的轻量化处理，提高了用户的使用体验。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的应用页面的创建方法的步骤。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请实施例中，当接收到与子应用对应的应用访问请求后，会先加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称，然后获取与所述子应用的名称对应的入口文件，之后基于所述入口文件获取与所述子应用对应的资源配置文件，后续基于所述资源配置文件确定与所述子应用对应的初始化资源，最后基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。本申请实施例通过基于微前端框架的使用，可以快速地创建生成与应用访问请求对应的子应用的页面，使得子应用的网页的访问可以以较快的速度进行响应，提高了子应用的页面的开发创建的效率。并且可以动态获取子应用所需的资源配置文件，实现了对于子应用的页面的轻量化处理，提高了用户的使用体验。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种应用页面的创建方法，其特征在于，包括下述步骤：

判断是否接收到与子应用对应的应用访问请求；其中，所述应用访问携带所述子应用的名称；

若是，加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称；

获取与所述子应用的名称对应的入口文件；

基于所述入口文件获取与所述子应用对应的资源配置文件；

基于所述资源配置文件确定与所述子应用对应的初始化资源；

基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。

2.根据权利要求1所述的应用页面的创建方法，其特征在于，所述基于所述入口文件获取与所述子应用对应的资源配置文件的步骤，具体包括：

对所述入口文件进行解析，从所述入口文件中获取所述资源配置文件的请求地址；

基于所述请求地址，向预设的第一服务器发送与所述资源配置文件对应的文件获取请求；

接收所述第一服务器对所述文件获取请求进行处理后返回的所述资源配置文件。

3.根据权利要求1所述的应用页面的创建方法，其特征在于，所述基于所述资源配置文件确定与所述子应用对应的初始化资源的步骤，具体包括：

基于所述资源配置文件获取所述初始化资源内包含的所有文件名；

从所有所述文件名中读取出符合预设条件的目标标签；

将所述目标标签***至预设的应用环境内；

基于***的所述目标标签向预设的第二服务器发送资源获取请求；

接收所述第二服务器对所述资源获取请求进行处理后返回的所述初始化资源。

4.根据权利要求1所述的应用页面的创建方法，其特征在于，所述基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面的步骤，具体包括：

获取所述初始化资源中包含的js资源文件与css资源文件；

基于所述js资源文件确定出与所述指定挂载区域对应的组件信息；

基于所述css资源文件确定出与所述组件信息对应的组件的显示信息；

基于所述组件信息与所述显示信息在所述指定挂载区域渲染所述子应用的页面。

5.根据权利要求1所述的应用页面的创建方法，其特征在于，在所述基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面的步骤之后，还包括：

判断是否接收到目标用户触发的与所述子应用的页面对应的编辑请求；

若是，展示预设的子应用编辑页面，并在所述子应用编辑页面内加载预设的组件库；

接收所述目标用户基于拖拽方式从所述组件库拖拽到所述子应用编辑页面内的指定区域的目标组件；

确定所述目标组件在所述指定区域内的指定位置；

获取与所述目标组件对应的组件资源信息；

基于所述目标组件的位置与所述组件资源信息对所述目标组件进行渲染处理与属性配置处理，得到相应的应用界面。

6.根据权利要求5所述的应用页面的创建方法，其特征在于，所述基于所述目标组件的位置与所述组件资源信息对所述目标组件进行渲染处理与属性配置处理，得到相应的应用界面的步骤，具体包括：

对所述组件资源信息进行解析，获取所述目标组件的代码下载地址以及所述目标组件的属性文件；

基于所述代码下载地址获取与所述目标组件对应的代码；

基于所述代码对处于所述指定位置内的所述目标组件进行渲染；

基于所述属性文件对所述目标组件进行属性配置，得到所述应用界面。

7.根据权利要求1所述的应用页面的创建方法，其特征在于，在所述基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面的步骤之前，还包括：

获取预设的子应用隔离策略；其中，所述隔离策略包括软隔离、硬隔离、css隔离中的一种或多种；

从所述子应用隔离策略中确定出目标子应用隔离策略；

基于所述目标子应用隔离策略进行对应的应用隔离处理。

8.一种应用页面的创建装置，其特征在于，包括：

第一判断模块，用于判断是否接收到与子应用对应的应用访问请求；其中，所述应用访问携带所述子应用的名称；

加载模块，用于若是，加载与预设的微前端框架对应的主应用，并通过所述主应用从应用访问请求中获取所述子应用的名称；

第一获取模块，用于获取与所述子应用的名称对应的入口文件；

第二获取模块，用于基于所述入口文件获取与所述子应用对应的资源配置文件；

第一确定模块，用于基于所述资源配置文件确定与所述子应用对应的初始化资源；

渲染模块，用于基于所述初始化资源，在与所述子应用对应的指定挂载区域渲染所述子应用的页面。

9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的应用页面的创建方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的应用页面的创建方法的步骤。

Images