Web多应用单页生成方法、系统、计算机设备及介质

技术领域

本发明涉及信息处理领域，尤其涉及一种Web多应用单页生成方法、系统、计算机设备及介质。

背景技术

在互联网发展的Web时代，网页承载了基本上绝大多数应用功能，如看新闻、发邮件、订机票等；而在当今移动互联网的浪潮下，用户已不再满足于在手机上使用高延迟、高卡顿的传统多页网站，转而期待网页能拥有和原生App一样的交互体验，因此，单页应用应运而生。

单页应用，即在单一HTML文件内包含多个应用功能，各应用功能之间的数据跳转、状态及通信都在浏览器中进行，而不经过服务器，或称多应用单页；因其富交互、低延迟等特性而受到人们追捧，但它也带来了新的问题；其一，所有内容都集中在一个网页内，首次加载时间变得很长，导致长时间白屏；其二，有些文件用户或许根本用不到，造成带宽浪费；其三，单页上承载了不同应用功能，对应了不同的开发团队，不利于多人协作开发。

发明内容

本发明实施例提供一种Web多应用单页生成方法、系统、计算机设备及存储介质，以解决现有单页应用在性能、开发效率上的问题。

一种Web多应用单页生成方法，所述Web多应用单页生成方法，包括：

在多应用单页开发阶段，创建应用入口并在配置文件中进行注册；

根据所述配置文件，编译生成资源文件并上传至服务端；

在生产阶段，所述服务端根据客户端的应用请求，动态生成目标应用，并在将所述目标应用嵌入目标单页中后，将所述目标单页发送至所述客户端；

所述客户端解析所述目标单页并获取所需应用资源。

一种Web多应用单页生成系统，其特征在于，包括：

开发端，用于在多应用单页开发阶段，创建应用入口并在配置文件中进行注册；

以及用于根据所述配置文件，编译生成资源文件并上传至服务端；

服务端，用于在生产阶段，根据客户端的应用请求，动态生成目标应用，并在将所述目标应用嵌入目标单页中后，将所述目标单页发送至所述客户端；

客户端，用于解析所述目标单页并获取所需应用资源。

一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述Web多应用单页生成方法的步骤。

一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述Web多应用单页生成方法的步骤。

上述Web多应用单页生成方法、系统、计算机设备及存储介质，包括开发阶段和生产阶段，在开发阶段，为每个应用单独创建入口并注册在配置文件中，便于后续拆分或灵活组合成不同微应用；同时，将配置文件编译成资源文件后上传至服务端，便于通过服务端动态生成单页。在生产阶段，服务端接收客户端的应用请求之后，动态生成目标应用，并将目标应用嵌入至目标单页中发送，使客户端能获取所需资源。

本技术方案，使用流畅，具有富交互、低延迟、无卡顿的特点，可媲美手机APP；并且与现有技术相比，具有如下优势：其一，便于单个应用既可以独立开发、运行，又能大大减少代码冗余，提高开发效率，适合多人协作；其二，服务端能灵活地根据客户端的需求动态生成目标应用，做到应用按需加载，减少首次加载白屏时间，节省带宽；其三，修改配置文件即可裁减或拓展单页应用，最大程度共享代码，拓展性强，便于根据实际需求快速开发。

附图说明

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

图1是本发明一实施例中Web多应用单页生成方法的一应用环境示意图；

图2是本发明一实施例中Web多应用单页生成方法的流程图；

图3是本发明一实施例中Web多应用单页生成系统的示意图；

具体实施方式

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

本发明提供的Web多应用单页生成方法，应用在如图1所示的应用环境中。其中，开发端是指开发人员所使用的计算机设备，在多应用单页开发阶段，每个多应用单页内不同的应用可同时由多个开发端开发，不同开发团队在开发完成后在服务端形成统一的资源文件；服务端是存储资源文件的计算机设备，并且响应客户端的应用需求；客户端是用户所使用的移动智能终端，包括但不限于智能手机、平板电脑等；在生产阶段，服务端根据客户端需求并结合资源文件进行响应。

在一实施例中，如图2所示，提供了一种Web多应用单页生成方法，以服务端上架设Express服务器，客户端为浏览器为例，并包括以下步骤：

S1：多应用单页开发阶段，创建应用入口并在配置文件中进行注册。

其中，应用入口是客户端加载页面时某特定应用功能(微应用)的入口demo1，例如订机票的入口，发邮件的入口等。配置文件，是记录各应用入口的文件。具体地，应用入口创建后在配置文件中，并对应上相应的应用功能的名称。

S2：根据配置文件，编译生成资源文件并上传至服务端。

具体地，根据配置文件的内容，编译所有的微应用，并通过Webpack编译所有应用后生成资源文件，再将这些文件上传到Express服务器。编译完成后的信息包含发布路径publicPath、编译后的资源名称，根据这些信息，生成资源文件assets.json，如下：

其中，Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。

S3：在生产阶段，服务端根据客户端的应用请求，动态生成目标应用，并在将目标应用嵌入目标单页中后，将目标单页发送至客户端。

其中，客户端的应用请求，为单页中各微应用所需的资源。目标应用，为指向微应用所需资源的脚本代码或资源地址。目标单页，是客户端所加载的HTML页面。

S4：客户端解析目标单页并获取所需应用资源。

其中，应用资源是指浏览器加载单页时所需要的图片、音乐等。具体地，客户端解析HTML页面，得到目标应用所指向的应用资源，完成加载。

在本实施例中，Express即指Express.js，是一种保持最低程度规模的灵活Node.js Web应用程序框架，为Web和移动应用程序提供一组强大的功能。服务器上的资源文件包含了多个微应用的应用入口，便于开发、修改维护及拓展；客户端所需的应用资源是服务器根据应用请求，动态生成的，做到应用按需加载，既节省带宽又提高响应速度，优化用户体验。

进一步地，在一实施例中，对上述方案进行优化，当客户端应用请求为应用资源路径信息时，步骤S3还包括以下步骤：

服务端将应用资源路径信息与资源文件进行逐字段匹配，若匹配成功，则将与应用资源路径信息对应的资源地址嵌入目标单页的标签内；若匹配不成功，则结束本次响应。其中，目标单页的标签为脚本标签。

具体地，当用户通过浏览器访问某个应用时，Express服务器收到一条浏览器的请求路径，并在assets.json文件中查找是否有此请求路径对应的资源名称；如果查找成功，则把这些资源的服务器地址放入html文件的