CN111414562A

CN111414562A - 应用程序页面api接口前置方法、装置及存储介质

Info

Publication number: CN111414562A
Application number: CN202010119416.0A
Authority: CN
Inventors: 林泽全
Original assignee: Ping An Puhui Enterprise Management Co Ltd
Current assignee: Shenzhen Lian Intellectual Property Service Center; Shenzhen Sports Ditu Technology Co ltd
Priority date: 2020-02-26
Filing date: 2020-02-26
Publication date: 2020-07-14
Anticipated expiration: 2040-02-26
Also published as: CN111414562B

Abstract

本发明涉及数据处理技术领域，提出一种应用程序页面API接口前置方法、装置及存储介质，其中的方法包括：用户触发第一流程页面中的按钮，通过预设业务逻辑判断待跳转的第二流程页面；通过第一流程页面触发应用程序初始化新的webview，在新的webview加载第二流程页面的静态资源；同时，第一流程页面向应用程序中的代理中间件的发送消息队列中发送API接口请求；代理中间件根据发送消息队列先后处理API接口请求，并与服务端发生交互，获取对应的接口数据；第二流程页面从所述代理中间件中获取与API接口相对应的接口数据；根据接口数据对第二流程页面进行页面渲染。本发明能够优化页面打开速度，提高用户体验。

Description

应用程序页面API接口前置方法、装置及存储介质

技术领域

本发明涉及数据处理技术领域，尤其涉及一种应用程序页面API接口前置方法、装置及计算机可读存储介质。

背景技术

前移动端除了原生iOS/Android开发外，为了业务快速迭代，存在大量的HybridApp或者Web App。但高开发效率带来了页面体验较差的情况，当用户点击一个按钮/链接跳转到下一个页面时，往往需要经过“处理当前页面逻辑->初始化Webview->加载静态资源->请求API接口->页面渲染”几个环节。根据数据统计，一个最简单的Webview初始化时间在90～150ms之间(如果有特殊业务逻辑该部分时间将大大延长)，API接口根据业务逻辑复杂度，需要数百毫秒到数秒之间。从这些数据我们可以看出初始化Webview与请求API接口这两部分占了整个过程的绝大部分时间。

目前，为克服上述问题现有业内或产品部分采用服务端渲染技术，该技术虽然优化了“加载静态资源->请求API接口->页面渲染”的时间，但是API接口请求和Webview初始化这两块占比最大的部分仍是以串行的方式请求，导致业内大部分Hybrid/Web App给人以不流畅的体验。

发明内容

本发明提供一种应用程序页面API接口前置方法、电子装置及计算机可读存储介质，其主要目的在于。

为实现上述目的，本发明提供一种应用程序页面API接口前置方法，应用于电子装置，所述方法包括：

用户触发第一流程页面中的按钮，通过预设业务逻辑判断待跳转的第二流程页面；

通过所述第一流程页面触发应用程序初始化新的webview，在新的webview加载所述第二流程页面的静态资源；同时，所述第一流程页面向应用程序中的代理中间件的发送消息队列中发送API接口请求；

所述代理中间件根据发送消息队列先后处理API接口请求，并与服务端发生交互，获取对应的接口数据；

所述第二流程页面从所述代理中间件中获取与所述API接口相对应的接口数据；

根据所述接口数据对所述第二流程页面进行页面渲染。

优选地，所述用户触发第一流程页面中的按钮，通过预设业务逻辑判断待跳转的第二流程页面的步骤包括：

当所述用户触发或者点击所述第一流程页面上的按钮时，通过所述预设业务逻辑判断所述第二流程页面初始化所需的API接口信息及入参；其中，所述第一流程页面中的按钮为设置在所述第一流程页面上的链接；

基于所述API接口信息及入参确定所述待跳转的第二流程页面的位置。

优选地，所述第二流程页面从所述代理中间件中获取与所述API接口相对应的接口数据的步骤包括：

若所述API接口的接口数据已返回至所述代理中间件，则所述第二流程页面直接获取所述接口数据并进行页面渲染；

若所述API接口的接口数据未返回至所述代理中间件，且所述发送消息队列中存在所述API接口请求时，则等待所述代理中间件进行接口数据返回；

若所述API接口的接口数据未返回至所述代理中间件，且所述发送消息队列中不存在所述API接口请求时，则通过所述第二流程页面自行发送所述API接口请求，并获取对应的接口数据。

优选地，所述代理中间件根据所述发送消息队列的先后顺序处理所述API接口请求，并与服务器端发生交互，待所述API接口请求成功时，获取对应的接口数据，并将所述接口数据存入缓存。

优选地，所述通过所述第一流程页面触发应用程序初始化新的webview，在新的webview加载所述第二流程页面的静态资源的步骤包括：

待初始化新的webview时，判断是否需要运行ajax，若不需要，则根据预设的默认模板对所述第二流程页面进行页面渲染；否则，检测是否存在所述接口数据缓存。

为实现上述目的，本发明还提供一种电子装置，该电子装置包括：存储器及处理器，所述存储器中包括应用程序页面API接口前置程序，所述应用程序页面API接口前置程序被所述处理器执行时实现如下步骤：

根据所述接口数据对所述第二流程页面进行页面渲染。

基于所述API接口信息及入参确定所述待跳转的所述第二流程页面的位置。

此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中包括应用程序页面API接口前置程序，所述应用程序页面API接口前置程序被处理器执行时，实现如上所述的应用程序页面API接口前置方法中的任意步骤。

本发明提出的应用程序页面API接口前置方法、电子装置及计算机可读存储介质，通过将API接口进行前置，可将Hybrid/Web App中造成页面卡顿的两个关键环节“初始化Webview”及“请求API接口”进行并行处理，两者无需先后执行，并且进行了一定的容错处理，能够优化页面打开速度，用户可以更快的看到并且操作页面，用户体验良好。

附图说明

图1为本发明应用程序页面API接口前置方法具体实施例应用环境示意图；

图2为图1中应用程序页面API接口前置程序较佳实施例的模块示意图；

图3为本发明应用程序页面API接口前置方法较佳实施例的流程图；

图4为本发明应用程序页面API接口前置方法具体实施例的流程图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明提供一种应用程序页面API接口前置方法，应用于一种电子装置1。参照图1所示，为本发明应用程序页面API接口前置方法较佳实施例的应用环境示意图。

在本实施例中，电子装置1可以是服务器、智能手机、平板电脑、便携计算机、桌上型计算机等具有运算功能的终端设备。

该电子装置1包括：处理器12、存储器11、网络接口14及通信总线15。

存储器11包括至少一种类型的可读存储介质。所述至少一种类型的可读存储介质可为如闪存、硬盘、多媒体卡、卡型存储器11等的非易失性存储介质。在一些实施例中，所述可读存储介质可以是所述电子装置1的内部存储单元，例如该电子装置1的硬盘。在另一些实施例中，所述可读存储介质也可以是所述电子装置1的外部存储器11，例如所述电子装置1上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。

在本实施例中，所述存储器11的可读存储介质通常用于存储安装于所述电子装置1的应用程序页面API接口前置程序10、人脸图像样本库及预先训练好的AU分类器、情绪分类器等。所述存储器11还可以用于暂时地存储已经输出或者将要输出的数据。

处理器12在一些实施例中可以是一中央处理器(Central Processing Unit,CPU)，微处理器或其他数据处理芯片，用于运行存储器11中存储的程序代码或处理数据，例如执行应用程序页面API接口前置程序10等。

网络接口14可选地可以包括标准的有线接口、无线接口(如WI-FI接口)，通常用于在该电子装置1与其他电子设备之间建立通信连接。

通信总线15用于实现这些组件之间的连接通信。

图1仅示出了具有组件11-15的电子装置1，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

可选地，该电子装置1还可以包括用户接口，用户接口可以包括输入单元比如键盘(Keyboard)、语音输入装置比如麦克风(microphone)等具有语音识别功能的设备、语音输出装置比如音响、耳机等，可选地用户接口还可以包括标准的有线接口、无线接口。

可选地，该电子装置1还可以包括显示器，显示器也可以称为显示屏或显示单元。在一些实施例中可以是LED显示器、液晶显示器、触控式液晶显示器以及有机发光二极管(Organic Light-Emitting Diode，OLED)触摸器等。显示器用于显示在电子装置1中处理的信息以及用于显示可视化的用户界面。

可选地，该电子装置1还包括触摸传感器。所述触摸传感器所提供的供用户进行触摸操作的区域称为触控区域。此外，这里所述的触摸传感器可以为电阻式触摸传感器、电容式触摸传感器等。而且，所述触摸传感器不仅包括接触式的触摸传感器，也可包括接近式的触摸传感器等。此外，所述触摸传感器可以为单个传感器，也可以为例如阵列布置的多个传感器。

此外，该电子装置1的显示器的面积可以与所述触摸传感器的面积相同，也可以不同。可选地，将显示器与所述触摸传感器层叠设置，以形成触摸显示屏。该装置基于触摸显示屏侦测用户触发的触控操作。

可选地，该电子装置1还可以包括射频(Radio Frequency，RF)电路，传感器、音频电路等等，在此不再赘述。

在图1所示的装置实施例中，作为一种计算机存储介质的存储器11中可以包括操作系统、以及应用程序页面API接口前置程序10；处理器12执行存储器11中存储的应用程序页面API接口前置程序10时实现如下步骤：

根据所述接口数据对所述第二流程页面进行页面渲染。

基于所述API接口信息及入参确定待跳转的第二流程页面的位置。

在其他实施例中，应用程序页面API接口前置程序10还可以被分割为一个或者多个模块，一个或者多个模块被存储于存储器11中，并由处理器12执行，以完成本发明。本发明所称的模块是指能够完成特定功能的一系列计算机程序指令段。

参照图2所示，为图1中应用程序页面API接口前置程序10较佳实施例的程序模块图。所述应用程序页面API接口前置程序10可以被分割为：页面跳转单元101、初始化单元102、API接口请求单元103、数据获取单元104、数据确定单元105、页面渲染单元106。各单元所实现的功能或操作步骤均与上文类似，此处不再详述，示例性地，例如其中：

页面跳转单元101，用于用户触发第一流程页面中的按钮，通过预设业务逻辑判断待跳转的第二流程页面；

初始化单元102，用于通过所述第一流程页面触发应用程序初始化新的webview，在新的webview加载所述第二流程页面的静态资源；

API接口请求单元103，用于所述第一流程页面向应用程序中的代理中间件的发送消息队列中发送API接口请求；

数据获取单元104，用于所述代理中间件根据发送消息队列先后处理API接口请求，并与服务端发生交互，获取对应的接口数据；

数据确定单元105，用于所述第二流程页面从所述代理中间件中获取与所述API接口相对应的接口数据；

页面渲染单元106，用于根据所述接口数据对所述第二流程页面进行页面渲染。

与上述电子装置相对应，本发明还提供一种应用程序页面API接口前置方法。参照图3所示，为本发明应用程序页面API接口前置方法较佳实施例的流程图。该方法可以由一个装置执行，该装置可以由软件和/或硬件实现。

在本实施例中，应用程序页面API接口前置方法包括：

S110：用户触发第一流程页面中的按钮，通过预设业务逻辑判断待跳转的第二流程页面。

其中，业务逻辑是指一个实体单元为了向另一个实体单元提供服务，应该具备的规则与流程。在软件系统架构中，软件一般分为三个层次：表示层、业务逻辑层和数据访问层。业务逻辑层：负责定义业务逻辑(规则、工作流、数据完整性等)，接收来自表示层的数据请求，逻辑判断后，向数据访问层提交请求，并传递数据访问结果，业务逻辑层实际上是一个中间件，起着承上启下的重要作用。

预设业务逻辑为根据具体应用场景预先设定的业务逻辑，在本发明的具体实施方式中，预设业务逻辑根据第二流程页面的page字段，获取对应的init的信息，init信息包括初始化信息接口、初始化信息的入参、初始化需要多个接口时，接口的并行或者串行信息等。

其中，第一流程页面中的按钮可以为设置在第一流程页面上的各链接，当用户触发或者点击第一流程页面上的链接时，通过预设业务逻辑可判断第二流程页面初始化所需的API接口信息及入参，基于所述API接口信息及入参确定需要跳转至的第二流程页面的位置信息等。

S120：通过所述第一流程页面触发应用程序初始化新的webview，在新的webview加载所述第二流程页面的静态资源；同时，所述第一流程页面向应用程序中的代理中间件的发送消息队列中发送API接口请求。

其中，待用户点击第一流程页面中的按钮后，初始化webview和API接口请求并行处理，不存在先后顺序，能够节省页面打开时间，优化用户体验。第一流程页面向应用程序中的代理中间件的发送消息队列中发送API接口请求是基于步骤S110中的第二流程页面初始化所需的API接口信息及入参来进行的。

具体地，API(Application Programming Interface，应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

webview用来展示网页的view组件，该组件是运行浏览器或者在线程中展示线上内容的基础。使用webkit渲染引擎来展示，并且支持前进后退等基于浏览历史，放大缩小，等更多功能。简单来说WebView是手机中内置了一款高性能webkit内核浏览器,在SDK中封装的一个组件。不给过没有提供地址栏和导航栏，只是单纯的展示一个网页界面。初始化webview的过程可以理解为，当App首次打开时，默认是并不初始化浏览器内核的；只有当创建WebView实例的时候，才会创建WebView的基础框架。所以与浏览器不同，App中打开WebView的第一步并不是建立连接，而是启动浏览器内核。在浏览器中，我们输入地址时(甚至在之前)，浏览器就可以开始加载页面。而在客户端中，客户端需要先花费时间初始化WebView完成后，才开始加载。

S130：所述代理中间件根据发送消息队列先后处理API接口请求，并与服务端发生交互，获取对应的接口数据。

其中，代理中间件是由APP创建的一个Webview，它有以下几个特点：

1.代理中间件的功能同APP中其它加载网页的webview的功能完全一致，确保在其他页面发出去的API接口，与在代理中间件中发出的效果完全一致；

2.该代理中间件在APP启动时就已存在，并且伴随整个App生命周期，隐藏在所有Webview最底层，即呈不可见状态；

3.App对其他网页webview定制的功能，如添加个性化user agent、header头等，都会通过继承的方式给代理中间件(webview)加上，无需重复处理。

S140：所述第二流程页面从所述代理中间件中获取与所述API接口相对应的接口数据。

S150：根据所述接口数据对所述第二流程页面进行页面渲染。

其中，通过第二流程页面从所述代理中间件中获取与所述API接口相对应的接口数据的步骤包括：

若API接口的接口数据已返回至所述代理中间件，则第二流程页面直接获取接口数据并进行页面渲染；

若API接口的接口数据未返回至代理中间件，且所述发送消息队列中存在API接口请求时，则等待代理中间件进行接口数据返回；

若API接口的接口数据未返回至代理中间件，且发送消息队列中不存在API接口请求时，则通过第二流程页面自行发送API接口请求，并获取对应的接口数据。

作为具体示例，以下结合图4具体流程对本发明实施例的应用程序页面API接口前置方法进行详细描述。

根据图4可知，本发明实施例的应用程序页面API接口前置方法具体包括以下步骤：

1、在第一流程页面进行按钮点击后，请求页面离开，同时委托接口请求，向代理中间件发送消息队列中发送API接口请求；

2、代理中间件根据发送消息队列的先后顺序处理API接口请求，并与服务端发生交互，待API接口请求成功时，获取对应的接口数据，并将接口数据存入缓存；

3、与步骤1同时进行的有，第二流程页面进入初始化阶段，即通过第一流程页面触发APP初始化新的webview；

4、待初始化新的webview时，判断是否需要ajax，如果不需要，则根据默认模板进行渲染页面；否则，检查是否存在API接口数据缓存；

在该步骤中，其中，AJAX全称“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

因为在页面渲染的时候，有些页面比较简单，它无需等待后端接口数据，就可以渲染页面，这种情况下就无需等待ajax返回；而有些页面需要等待后端接口数据返回才可组成完整页面。所以在初始化webview的时候，首先判断是否需要ajax，从而得知是否会有API的前置。

当页面比较简单，无需等待后端接口数据时，页面是由一些固定的页面内容组成的，例如，一个简单的欢迎页面，此时可根据默认的模板直接渲染出页面。

5、当存在缓存的API接口数据时，获取该API接口数据，并进行渲染页面；否则，如果不存在缓存时，检查代理中间件的发送消息队列中是否存在API接口请求，如果发送消息队列不存在，则第二流程页面自行发送API接口请求，并获取对应的接口数据渲染页面。否则，如果发送消息队列中存在该API接口请求，则等待接口数据返回，直至获取API接口数据，进行渲染页面。

通过上述应用程序页面API接口前置方法，可以将HybridApp或者Web App中造成页面卡顿的两个关键环节“初始化Webview”及“请求API接口”进行并行处理，两者无需先后执行，并且进行了一定的容错处理，通过这一系列操作，能够优化页面打开速度，用户可以更快的看到并且操作页面，提升用户体验。

利用上述应用程序页面API接口前置方法，可以将HybridApp或者Web App中造成页面卡顿的两个关键环节“初始化Webview”及“请求API接口”进行并行处理，两者无需先后执行，并且进行了一定的容错处理，以确保系统的稳定性，通过这一系列操作，能够优化页面打开速度，用户可以更快的看到并且操作页面，提升用户体验。

此外，本发明实施例还提出一种计算机可读存储介质，所述计算机可读存储介质中包括应用程序页面API接口前置程序，所述应用程序页面API接口前置程序被处理器执行时实现如下操作：

根据所述接口数据对所述第二流程页面进行页面渲染。

优选地，所述通过所述第一流程页面触发应用程序初始化新的webview，并加载所述第二流程页面的静态资源的步骤包括：

本发明之计算机可读存储介质的具体实施方式与上述应用程序页面API接口前置方法、电子装置的具体实施方式大致相同，在此不再赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。

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

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.一种应用程序页面API接口前置方法，应用于电子装置，其特征在于，所述方法包括：

根据所述接口数据对所述第二流程页面进行页面渲染。

2.根据权利要求1所述的应用程序页面API接口前置方法，其特征在于，所述用户触发第一流程页面中的按钮，通过预设业务逻辑判断待跳转的第二流程页面的步骤包括：

3.根据权利要求1所述的应用程序页面API接口前置方法，其特征在于，所述第二流程页面从所述代理中间件中获取与所述API接口相对应的接口数据的步骤包括：

4.根据权利要求1所述的应用程序页面API接口前置方法，其特征在于，所述代理中间件根据所述发送消息队列的先后顺序处理所述API接口请求，并与服务器端发生交互，待所述API接口请求成功时，获取对应的接口数据，并将所述接口数据存入缓存。

5.根据权利要求4所述的应用程序页面API接口前置方法，其特征在于，所述通过所述第一流程页面触发应用程序初始化新的webview，在新的webview加载所述第二流程页面的静态资源的步骤包括：

6.一种电子装置，其特征在于，该电子装置包括：存储器及处理器，所述存储器中包括应用程序页面API接口前置程序，所述应用程序页面API接口前置程序被所述处理器执行时实现如下步骤：

根据所述接口数据对所述第二流程页面进行页面渲染。

7.根据权利要求6所述的电子装置，其特征在于，

所述用户触发第一流程页面中的按钮，通过预设业务逻辑判断待跳转的第二流程页面的步骤包括：

8.根据权利要求6所述的电子装置，其特征在于，

所述第二流程页面从所述代理中间件中获取与所述API接口相对应的接口数据的步骤包括：

9.根据权利要求6所述的电子装置，其特征在于，

所述代理中间件根据所述发送消息队列的先后顺序处理所述API接口请求，并与服务器端发生交互，待所述API接口请求成功时，获取对应的接口数据，并将所述接口数据存入缓存。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中包括应用程序页面API接口前置程序，所述应用程序页面API接口前置程序被处理器执行时，实现如权利要求1至5中任一项所述的应用程序页面API接口前置的步骤。