CN114186156A - 一种子应用的访问方法、装置、介质及设备 - Google Patents

Abstract

本申请涉及计算机及人工智能技术领域，本实施例公开了一种子应用的访问方法、装置、介质及设备。所述方法由浏览器执行，所述方法包括：响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件；执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件；根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。本技术方案，可以做到各子应用之间的样式的天然隔离效果，同时对于子应用的页面渲染也更加轻量化。

Description

一种子应用的访问方法、装置、介质及设备

技术领域

本申请实施例涉及互联网及人工智能技术领域，尤其涉及一种子应用的访问方法、装置、介质及设备。

背景技术

随着信息化时代的迅速发展，在一个主框架下进行子应用的开发，因为可以节省子应用作为一个独立应用所占据的空间，所以广受用户的喜爱。

目前微前端子应用，往往是通过浏览器作为载体实现的。多个子应用之间，往往需要通过设置沙箱进行隔离，来确保样式的加载过程中不会受到已经加载的子应用的样式文件的干扰，避免样式错乱。然而这样设置的问题在于通过沙箱隔离的实质是采用应用前缀来重新命名实现样式文件的隔离，而对于一些子应用来说，即有可能用到全局通用的样式，也有可能用到单独设置的样式。这就使得在样式文件读取过程中需要根据子应用的不同来构建各自的访问机制，同时通过前缀的隔离又会收到一些写了类名的样式的限制，因此无法进行有效的样式隔离。

发明内容

本申请实施例提供一种子应用的访问方法、装置、介质及设备，可以通过通用的子应用入口文件模板，其中即可以包括公共部分，又可以包括私有部分，对于私有部分的渲染方式也采用的是动态获取资源加载文件，从而可以做到样式的天然隔离效果，同时对于子应用的页面渲染也更加轻量化。

第一方面，本申请实施例提供了一种子应用的访问方法，所述方法由浏览器执行，所述方法包括：

响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件；

执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件；

根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

第二方面，本申请实施例提供了一种子应用的访问方法，所述方法由主框架服务执行，所述方法包括：

通过流量路由接收浏览器发出的子应用访问请求，向所述浏览器反馈子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

其中，所述资源加载文件的请求地址用于供浏览器发出资源加载文件获取请求，得到并执行所述子应用的资源加载文件，以得到子应用渲染的必要文件，并基于所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

第三方面，本申请实施例提供了一种子应用的访问装置，所述装置配置于浏览器，所述装置包括：

子应用入口文件请求模块，用于响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

资源加载文件获取模块，用于根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件；

必要文件获取模块，用于执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件；

子应用页面渲染模块，用于根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

第四方面，本申请实施例提供了一种子应用的访问装置，所述装置配置于主框架服务，所述装置包括：

子应用入口文件反馈模块，用于通过流量路由接收浏览器发出的子应用访问请求，向所述浏览器反馈子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

其中，所述资源加载文件的请求地址用于供浏览器发出资源加载文件获取请求，得到并执行所述子应用的资源加载文件，以得到子应用渲染的必要文件，并基于所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

第五方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例所述的子应用的访问方法。

第六方面，本申请实施例提供了一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器运行的计算机程序，所述处理器执行所述计算机程序时实现如本申请实施例所述的子应用的访问方法。

本申请实施例所提供的技术方案，通过获取子应用入口文件之后基于资源加载文件的请求地址，来获取资源加载文件，并执行资源加载文件中的资源加载函数，得到子应用渲染所需的必要文件。因此，对于不同的子应用来说，渲染所需的必要文件是相互隔离的，无需通过编辑并保留在浏览器端。同时所获取的必要文件是子应用渲染需要用到的最小文件，避免了网络传输的负担，同时在浏览器端可以确保响应速度。通过采用本方案，子应用的访问可以以最快的速度进行响应，并且可以避免多个子应用之间的渲染所需的必要文件因为存储在浏览器端所造成的渲染混乱，降低开发人员的开发设计负担，同时提高用户的使用体验。

附图说明

图1是本申请实施例一提供的子应用的访问方法的流程图；

图2是本申请实施例二提供的子应用的访问方法的流程图；

图3是本申请实施例二提供的微前端应用架构的示意图；

图4是本申请实施例二提供的子应用访问方法的信令示意图；

图5是本申请实施例三提供的子应用的访问方法的流程图；

图6是本申请实施例四提供的一种子应用的访问装置的结构框图；

图7是本申请实施例五提供的一种子应用的访问装置的结构框图；

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

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本申请，而非对本申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本申请相关的部分而非全部结构。

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理，但是其中的许多步骤可以被并行地、并发地或者同时实施。此外，各步骤的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

实施例一

图1是本申请实施例一提供的子应用的访问方法的流程图，本实施例可适用于通过浏览器打开子应用场景，该方法可以由本申请实施例所提供的子应用的访问装置执行，该装置可以由软件和/或硬件的方式来实现，并可集成于包含浏览器的电子设备中。

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

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

如图1所示，所述子应用的访问方法包括：

S110，响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址。

本方案采用的是微前端的设计架构。其中，微前端是一种架构风格，众多独立交付的前端应用组合成一个大型整体。这些应用可以各自独立开发、测试和部署，而它们组合在一起仍然对用户表现为单一完整的产品。整体架构由主框架+子应用组成，主框架充当调度者的角色，由它来决定在不同的条件下激活不同的子应用。

其中，浏览器可以是主应用，也可以是主应用页面的一个载体。浏览器可以是安装在电子设备当中的，用于进行页面浏览的应用。其中，电子设备可以是智能终端、平板电脑、移动终端以及个人数字助理等。浏览器在本方案中相当于主框架，本方案可以在其中调用子应用，以进行一个或者多个子应用在主框架中的渲染。本方案可以是基于用户的操作，例如子应用的点击操作或子应用的域名输入操作等，在主框架运行的过程中，接收到子应用的访问请求，并在主框架的基础上调用子应用的场景。

本方案中，流量路由可以是请求转发的载体，可以是通过设置的路由器或者服务器来实现。其作用在于根据接收到的请求信息，向不同的服务端转发，并在得到服务端返回的结果后将结果返回给浏览器。

子应用入口文件，可以是程序项目或者系统被访问请求的时候，第一个被访问到的文件，所有的指令功能都是从这文件分发出去，再找相对应的模块进行处理，一些初始化的工作也在这里进行。子应用入口文件可以根据不同的请求去调用框架不同的模块，这里还可以设定一些参数，方便以后的开发和维护。

子应用入口文件可以包括子应用挂载位置。子应用挂载位置可以是预先设置的用于挂载子应用的函数实现的位置。子应用入口文件还可以包括资源加载文件的请求地址，该地址可以用来获取资源加载文件。由于不同的子应用需要不同的资源加载文件，因此本方案可以优先根据用户需要访问的子应用来返回资源加载文件的请求地址，以对该地址进行访问。

S120，根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件。

其中，在浏览器得到资源加载文件的请求地址之后，可以发出资源加载文件的获取请求。本方案中，具体的，服务端匹配会渲染子应用入口文件模版返回包子应用挂载点和loader地址页面给浏览器。浏览器可以通过子应用的loader地址页面，请求到请求loader.js文件，即资源加载文件。

S130，执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件。

本方案中，资源加载文件包含资源加载函数，该资源加载函数为立即执行函数。通过执行资源加载函数，可以请求到静态资源服务以获取静态资源文件。此处，静态资源文件可以是子应用首页面渲染所需的必要文件。其中，可以在dom中添加子应用的首屏加载所必须要使用到的样式文件以及js标签，以作为所需的必要文件。浏览器得到相应的样式文件以及js标签之后，可以在子应用的挂载点渲染子应用的页面。

S140，根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

本方案中，必要文件是子应用的页面渲染所需的文件，可以包含子应用的首页面的渲染格式等文件。具体的，必要文件可以包括确定子应用渲染的页面中组件数量的文件，还可以包括确定子应用渲染的页面中组件样式的文件。本方案通过这样的设置，可以将预先配置好的子应用的渲染所需的必要文件配置在后端，然后通过动态的获取必要文件，实现子应用页面的渲染。同时因为必要文件是实时获取的，因此具有与子应用的更新版本相匹配的特点，并且无需在前端进行手动隔离各个子应用之间的渲染所需的必要文件。

在本方案中，可选的，响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件，包括：

响应于子应用访问请求，确定子应用的应用标识；

通过流量路由向主框架服务请求带有所述应用标识的子应用入口文件，供所述主框架服务反馈子应用挂载位置和与所述应用标识相对应的资源加载文件的请求地址。

其中，各个子应用之间具有互不相同的应用标识。浏览器在检测到用户的操作之后，可以根据应用标识来确定用户需要访问的子应用，并通过流量路由向主框架服务请求带有所述应用标识的子应用入口文件。

可以理解的是，子应用入口文件可以针对每一个子应用进行不同的设置，即有多少个子应用，就有多少个子应用入口文件。除此之外，还可以针对所有的子应用设置同一个子应用入口文件，只需要在不同的子应用之间，在子应用入口文件中携带有不同的子应用标识即可。这样设置，主框架服务在接收到携带有子应用标识的子应用入口文件后返回相对应的资源加载文件的请求地址。

本方案他通过这样的设置，可以简化子应用入口文件的设计，同时也便于维护，使得方案的适用范围更加广泛。

在本方案中，可选的，所述子应用入口文件还包括：公共部分片段；

在通过流量路由向主框架服务请求子应用入口文件之后，所述方法还包括：

渲染所述子应用入口文件的公共部分片段，以得到子应用的菜单栏和/或导航栏。

其中，公共部分片段，可以是针对每一个子应用都适用的部分。例如在子应用页面中，通常会显示有菜单栏或者导航栏，或者两者同时显示。其中，菜单栏可以用于供用户点击来实现子应用的功能菜单的展示。导航栏可以用于供用户点击来实现子应用的不同页面的导航。例如菜单栏可以包括“概览”、“镜像”以及“传输”等，导航栏可以包括“客服中心”、“管理中心”以及“帮助”等。本方案通过这样的设置，可以将公共部分片段与每个子应用渲染所需的必要文件进行隔离，确保不影响子应用渲染的同时，能够采用通用化的设置，进行统一的模板化加载，简化了子应用服务端的开发和维护操作，确保了子应用的正常运行。

本申请实施例所提供的技术方案，响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件；执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件；根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。通过通用的子应用入口文件模板，其中即可以包括公共部分，又可以包括私有部分，对于私有部分的渲染方式也采用的是动态获取资源加载文件，从而可以做到样式的天然隔离效果，同时对于子应用的页面渲染也更加轻量化。

实施例二

图2是本申请实施例二提供的子应用的访问方法的流程图，本实施例以上述实施例为基础进行优化。具体优化为：执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件，包括：执行资源加载函数，以得到子应用渲染所需的静态资源；根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面，包括：根据所述静态资源中的js资源文件，确定页面所需的静态资源构建的组件数量和组件类型；以及根据所述静态资源中的css样式文件，确定页面所需的静态资源构建的各组件的显示位置、显示颜色以及显示形式中的至少一种。

如图2所示，本实施例的方法具体包括如下步骤：

S210，响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址。

S220，根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件。

S230，执行资源加载函数，以得到子应用渲染所需的静态资源。

本方案中，具体的，静态资源可以是用来对子应用的首页面或者某个页面进行渲染时必须要使用到的页面。例如样式文件。可以知道的，子应用由于版本的更新，其样式文件等静态资源可能存在更新。但是由于本方案是采用动态获取的方式来得到静态资源的，即静态资源完全可以根据子应用的版本进行预先的配置。

本方案中，可选的，执行资源加载函数，以得到子应用渲染所需的静态资源，包括：

执行资源加载函数，从所述资源加载函数中读取必要文件的文件名；

根据所述必要文件的文件名读取css标签和js标签，将所述css标签和所述js标签插入到所述浏览器的当前应用环境；

根据所插入的所述css标签和所述js标签发起静态资源获取请求，以得到css样式文件和js资源文件。

必要文件的文件名可以是以列表的形式记录在资源加载文件中的。可以根据文件名确定必要文件的css标签和js标签，进而从子应用的服务端来获取相应的资源文件。静态资源可以是css、js等。本方案中，静态资源可以是独立开发并打包生成的资源。因此，静态资源可以与子应用的版本同步更新，因此，通过静态资源的加载，可以更加灵活的对子应用的首屏进行控制，以得到动态加载的效果。

本方案中，可选的，根据所述必要文件的文件名读取css标签和js标签，包括：

读取所述资源加载文件中的文件名的哈希值列表；

根据所述文件名的哈希值列表，确定子应用渲染所需的css标签和js标签。

其中，资源加载函数，即loader函数可以是由自研插件LoaderPlugin(类WebpackHTMLPlugin)打包动态生成的立即执行函数，loader函数会动态加载子应用首屏展示最小必要资源，挂载到当前document上，它是一个几KB大小的文件，加随机数可以保证每次重新加载loader.js文件，加载时间在是十毫秒级别，loader.js文件里包含子应用首屏加载必要的css和js资源，名称带哈希，如有文件更新，相应的哈希值也会变化。这样设置，可以保证不影响性能的同时用户访问的是子应用最新的版本。

在一个可行的实施例中，在读取所述资源加载文件中的文件名的哈希值列表之前，所述方法还包括：

若所述子应用存在版本更新事件，则根据子应用更新后的版本渲染所需的静态资源，对所述资源加载文件中的文件名的哈希值列表进行更新。

本方案中，各接入子应用数相对独立的项目，因此，可以通过接入产品前端项目product-template模版生成，支持react和vue，接入产品项目打包会生成资源加载函数loader.js文件和产品的静态资源css、js等loader.js会动态加载产品独立开发打包生成的静态资源。因此，在子应用存在版本更新事件之后，可以将子应用的新版本所需的静态资源进行重新打包，以确保所加载的子应用首屏为最新版本的首屏。

S240，根据所述静态资源中的js资源文件，确定页面所需的静态资源构建的组件数量和组件类型；以及根据所述静态资源中的css样式文件，确定页面所需的静态资源构建的各组件的显示位置、显示颜色以及显示形式中的至少一种。

本方案中，js资源文件可以用来确定页面的组件数量及组件类型，例如可以确定子应用的首页面或者其他页面包含哪些组件，而css样式文件可以确定各组件的显示位置、显示颜色以及显示形式中的至少一种，例如可以具体包含子应用首页面或者其他页面的具体样式。

本实施例通过这样的设置，可以基于动态加载静态资源的形式，来实现子应用页面的渲染，提高子应用的渲染过程的准确性，避免静态资源的混乱。

为了能够让本领域技术人员更加清楚的了解本方案，本申请还提供了一种优选实施方式。

图3是本申请实施例二提供的微前端应用架构的示意图，其中，主框架应用console服务，它提供一个子应用入口文件product.ejs，包含公共部分的片段，微前端的挂载点和资源加载函数loader.js地址。ecsApp和vpcApp是各接入产品的独立项目，通过接入产品前端项目product-template模版生成，支持react和vue，接入产品项目打包会生成loader.js资源加载函数文件和产品的静态资源css、js等loader.js会动态加载产品独立开发打包生成的静态资源。

子应用入口文件product.ejs，包含公共部分(导航、菜单等)的片段，子应用的挂载点和资源加载函数loader.js地址。

挂载点，是一个div标签容器，productName是一个变量，取url中接入的产品名，子应用接入时无须像客户端方案一样在主框架进行子应用注册，有子应用接入时主框架也不需要改动代码，十分方便。

资源加载函数由自研插件LoaderPlugin(类WebpackHTMLPlugin)打包动态生成的立即执行函数，loader函数会动态加载子应用首屏展示最小必要资源，挂载到当前document上，它是一个几KB大小的文件，加随机数可以保证每次重新加载loader.js文件，加载时间在是十毫秒级别，loader.js文件里包含子应用首屏加载必要的css和js资源，名称带哈希，如有文件更新，相应的哈希值也会变化，这样可以保证不影响性能的同时用户访问的是子应用最新的版本。

图4是本申请实施例二提供的子应用访问方法的信令示意图，其中，csp-router服务主要是转发请求，csp-console服务是主框架应用，ecs部署ecs产品的静态服务。

阶段一：用户通过浏览器访问/console/product/ecs请求到主框架console服务，服务端匹配会渲染product.ejs模版返回包含菜单导航及ecs挂载点和loader地址页面给浏览器；

阶段二：加载ecs产品的loader函数，请求到静态资源服务获取ecs，返回loader.js,运行loader函数会在dom中添加ecs首屏加载必要的css和js标签，浏览器获取相应的资源，渲染生成页面。

具体包括如下步骤：

1.访问控制台内ecs产品；

2.路由请求给console服务；

3.根据陆游信息生产页面；

4.返回包含菜单、导航及产品挂载点和loader地址的页面；

5.获取ecs产品loader函数；

6.转发请求给静态资源服务，获取ecs产品loader；

7.返回ecs-loader.js；

8.返回ecs-loader.js；

9.获取ecs产品需加载的静态资源；

10.转发请求给静态资源服务，获取ecs产品资源；

11.返回ecs产品所需css/js/image等静态资源；

12.返回ecs产品所需css/js/image等静态资源；

13.浏览器运行js生成内容区页面。

本方案提出的服务端模版组合集成的微前端架构方案，相比客户端通常是通过约定css前缀的方式来避免样式冲突，或者直接基于css module方案写样式这种不彻底的解决方案，服务端可以实现样式和函数作用域的天然隔离。同时该方案通过自研webpack插件LoaderPlugin生成的loader函数可以实现子应用的动态加载，子应用资源打包粒度的细分，首屏只加载必要的资源。而且子应用接入方式相比客户端方案简单，无需在主框架注册对应的子应用，可以做到接入无感知，保证主框架的代码简单和稳定。

实施例三

图5是本申请实施例三提供的子应用的访问方法的流程图，本实施例可适用于通过浏览器打开子应用场景，该方法可以由本申请实施例所提供的子应用的访问装置执行，该装置可以由软件和/或硬件的方式来实现，并可集成于包含主框架服务的服务端电子设备中。

本实施例与上述实施例一和实施例二的方法的对端执行的，因此具有与之响应的执行过程和有益效果。

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

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

如图5所示，所述子应用的访问方法包括：

S510，通过流量路由接收浏览器发出的子应用访问请求，向所述浏览器反馈子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

其中，所述资源加载文件的请求地址用于供浏览器发出资源加载文件获取请求，得到并执行所述子应用的资源加载文件，以得到子应用渲染的必要文件，并基于所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

本实施例通过通用的子应用入口文件模板，其中即可以包括公共部分，又可以包括私有部分，对于私有部分的渲染方式也采用的是动态获取资源加载文件，从而可以做到样式的天然隔离效果，同时对于子应用的页面渲染也更加轻量化。

实施例四

图6是本申请实施例四提供的一种子应用的访问装置的结构框图，该装置可执行本申请实施例一和二所提供的子应用的访问方法，具备执行方法相应的功能模块和有益效果。

如图6所示，该装置包括：

子应用入口文件请求模块610，用于响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

资源加载文件获取模块620，用于根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件；

必要文件获取模块630，用于执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件；

子应用页面渲染模块640，用于根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

上述产品可执行本申请实施例一和二所提供的子应用的访问方法，具备执行方法相应的功能模块和有益效果。

实施例五

图7是本申请实施例五提供的一种子应用的访问装置的结构框图，该装置可执行本申请实施例三所提供的子应用的访问方法，具备执行方法相应的功能模块和有益效果。

如图7所示，该装置包括：

子应用入口文件反馈模块710，用于通过流量路由接收浏览器发出的子应用访问请求，向所述浏览器反馈子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

其中，所述资源加载文件的请求地址用于供浏览器发出资源加载文件获取请求，得到并执行所述子应用的资源加载文件，以得到子应用渲染的必要文件，并基于所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

上述产品可执行本申请实施例三所提供的子应用的访问方法，具备执行方法相应的功能模块和有益效果。

实施例六

本申请实施例六提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请所有发明实施例提供的子应用的访问方法：

响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件；

执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件；

根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

或者执行：

通过流量路由接收浏览器发出的子应用访问请求，向所述浏览器反馈子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

其中，所述资源加载文件的请求地址用于供浏览器发出资源加载文件获取请求，得到并执行所述子应用的资源加载文件，以得到子应用渲染的必要文件，并基于所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本申请操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

实施例七

本申请实施例七提供了一种电子设备。图8是本申请实施例七提供的一种电子设备的结构示意图。如图8所示，本实施例提供了一种电子设备800，其包括：一个或多个处理器820；存储装置810，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器820执行，使得所述一个或多个处理器820实现本申请实施例所提供的子应用的访问方法，该方法包括：

响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件；

执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件；

根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

或者，包括：

通过流量路由接收浏览器发出的子应用访问请求，向所述浏览器反馈子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

其中，所述资源加载文件的请求地址用于供浏览器发出资源加载文件获取请求，得到并执行所述子应用的资源加载文件，以得到子应用渲染的必要文件，并基于所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

当然，本领域技术人员可以理解，处理器820还实现本申请任意实施例所提供的子应用的访问方法的技术方案。

图8显示的电子设备800仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图8所示，该电子设备800包括处理器820、存储装置810、输入装置830和输出装置840；电子设备中处理器820的数量可以是一个或多个，图8中以一个处理器820为例；电子设备中的处理器820、存储装置810、输入装置830和输出装置840可以通过总线或其他方式连接，图8中以通过总线850连接为例。

存储装置810作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块单元，如本申请实施例中的子应用的访问方法对应的程序指令。

存储装置810可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端的使用所创建的数据等。此外，存储装置810可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置810可进一步包括相对于处理器820远程设置的存储器，这些远程存储器可以通过网络连接。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置830可用于接收输入的数字、字符信息或语音信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入。输出装置840可包括显示屏、扬声器等电子设备。

本申请实施例提供的电子设备，可以通过通用的子应用入口文件模板，其中即可以包括公共部分，又可以包括私有部分，对于私有部分的渲染方式也采用的是动态获取资源加载文件，从而可以做到样式的天然隔离效果，同时对于子应用的页面渲染也更加轻量化。

上述实施例中提供的子应用的访问装置、介质及电子设备可执行本申请任意实施例所提供的子应用的访问方法，具备执行该方法相应的功能模块和有益效果。未在上述实施例中详尽描述的技术细节，可参见本申请任意实施例所提供的子应用的访问方法。

注意，上述仅为本申请的较佳实施例及所运用技术原理。本领域技术人员会理解，本申请不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本申请的保护范围。因此，虽然通过以上实施例对本申请进行了较为详细的说明，但是本申请不仅仅限于以上实施例，在不脱离本申请构思的情况下，还可以包括更多其他等效实施例，而本申请的范围由所附的权利要求范围决定。

Claims (12)

1.一种子应用的访问方法，其特征在于，所述方法由浏览器执行，所述方法包括：

响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件；

执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件；

根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

2.根据权利要求1所述的方法，其特征在于，执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件，包括：

执行资源加载函数，以得到子应用渲染所需的静态资源；

根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面，包括：

根据所述静态资源中的js资源文件，确定页面所需的静态资源构建的组件数量和组件类型；以及根据所述静态资源中的css样式文件，确定页面所需的静态资源构建的各组件的显示位置、显示颜色以及显示形式中的至少一种。

3.根据权利要求2所述的方法，其特征在于，执行资源加载函数，以得到子应用渲染所需的静态资源，包括：

执行资源加载函数，从所述资源加载函数中读取必要文件的文件名；

根据所述必要文件的文件名读取css标签和js标签，将所述css标签和所述js标签插入到所述浏览器的当前应用环境；

根据所插入的所述css标签和所述js标签发起静态资源获取请求，以得到css样式文件和js资源文件。

4.根据权利要求3所述的方法，其特征在于，根据所述必要文件的文件名读取css标签和js标签，包括：

读取所述资源加载文件中的文件名的哈希值列表；

根据所述文件名的哈希值列表，确定子应用渲染所需的css标签和js标签。

5.根据权利要求4所述的方法，其特征在于，在读取所述资源加载文件中的文件名的哈希值列表之前，所述方法还包括：

若所述子应用存在版本更新事件，则根据子应用更新后的版本渲染所需的静态资源，对所述资源加载文件中的文件名的哈希值列表进行更新。

6.根据权利要求1所述的方法，其特征在于，响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件，包括：

响应于子应用访问请求，确定子应用的应用标识；

通过流量路由向主框架服务请求带有所述应用标识的子应用入口文件，供所述主框架服务反馈子应用挂载位置和与所述应用标识相对应的资源加载文件的请求地址。

7.根据权利要求1所述的方法，其特征在于，所述子应用入口文件还包括：公共部分片段；

在通过流量路由向主框架服务请求子应用入口文件之后，所述方法还包括：

渲染所述子应用入口文件的公共部分片段，以得到子应用的菜单栏和/或导航栏。

8.一种子应用的访问方法，其特征在于，所述方法由主框架服务执行，所述方法包括：

通过流量路由接收浏览器发出的子应用访问请求，向所述浏览器反馈子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

其中，所述资源加载文件的请求地址用于供浏览器发出资源加载文件获取请求，得到并执行所述子应用的资源加载文件，以得到子应用渲染的必要文件，并基于所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

9.一种子应用的访问装置，其特征在于，所述装置配置于浏览器，所述装置包括：

子应用入口文件请求模块，用于响应于子应用访问请求，通过流量路由向主框架服务请求子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

资源加载文件获取模块，用于根据所述资源加载文件的请求地址发出资源加载文件获取请求，得到所述子应用的资源加载文件；

必要文件获取模块，用于执行所述资源加载文件的资源加载函数，得到子应用渲染的必要文件；

子应用页面渲染模块，用于根据所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

10.一种子应用的访问装置，其特征在于，所述装置配置于主框架服务，所述装置包括：

子应用入口文件反馈模块，用于通过流量路由接收浏览器发出的子应用访问请求，向所述浏览器反馈子应用入口文件；其中，所述子应用入口文件包括子应用挂载位置和资源加载文件的请求地址；

其中，所述资源加载文件的请求地址用于供浏览器发出资源加载文件获取请求，得到并执行所述子应用的资源加载文件，以得到子应用渲染的必要文件，并基于所述必要文件，在所述子应用挂载位置对应的界面布局中渲染所述子应用的页面。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7或者如权利要求8中任一项所述的子应用的访问方法。

12.一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1-7或者如权利要求8中任一项所述的子应用的访问方法。

Images