CN114116056A - 页面显示方法及装置 - Google Patents

Abstract

本说明书提供一种页面显示方法及装置，所述方法包括：响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，所述第一触发操作用于请求从所述目标应用程序的原生页面跳转至目标跨平台页面；基于所述目标跨平台引擎实例，加载所述目标跨平台页面，使得内存中可以仅存在一个跨平台引擎实例，减少内存占用，使得目标应用程序的性能得到优化，提高用户体验。

Description

页面显示方法及装置

技术领域

本说明书涉及计算机技术领域，尤其涉及页面显示方法及装置。

背景技术

Flutter是一种跨平台应用界面(User Interface，UI)解决方案，基于Flutter开发的页面，即Flutter页面可同时运行在Android系统和iOS系统，实现跨平台。

目前，在加载Flutter页面时，需要创建Flutter引擎实例，以利用该Flutter引擎实例加载Flutter页面。在用户使用应用程序的过程中，可能需要多次由原生页面跳转至Flutter页面，每次由原生页面跳转至Flutter页面时，需创建新的Flutter引擎实例，因此，导致需要创建多个Flutter引擎实例，造成内存中存在多个Flutter引擎实例，内存占用较大，影响用户体验。

发明内容

为克服相关技术中存在的问题，本说明书提供了页面显示方法及装置。

根据本说明书实施例的第一方面，提供一种页面显示方法，所述方法包括：

响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，所述第一触发操作用于请求从所述目标应用程序的原生页面跳转至目标跨平台页面；

基于所述目标跨平台引擎实例，加载所述目标跨平台页面。

在一种可能的设计中，所述方法还包括：

响应于所述目标应用程序的启动操作，通过跨平台引擎实例自定义操作构建目标跨平台引擎实例；

将所述目标跨平台引擎实例存储至内存中。

在一种可能的设计中，所述从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，包括：

从内存中获取目标跨平台引擎实例对应的全局变量，并基于所述全局变量，从所述内存中确定所述目标跨平台引擎实例，其中，所述全局变量是在构建所述目标跨平台引擎实例时定义的。

在一种可能的设计中，所述方法还包括：

基于所述目标跨平台引擎实例，显示所述目标应用程序对应的第一预设页面；其中，所述第一预设页面为所述目标应用程序对应的首页。

在一种可能的设计中，所述方法还包括：

响应于所述目标应用程序的启动操作，显示所述目标应用程序对应的第二预设页面；其中，所述第二预设页面为所述目标应用程序对应的启动页。

在一种可能的设计中，所述方法还包括：

在目标应用程序对应的第二预设页面显示完成，且还未显示所述目标应用程序对应的第一预设页面的情况下，显示第三预设页面。

在一种可能的设计中，所述方法还包括：

响应于显示所述第一预设页面，移除所述第三预设页面。

在一种可能的设计中，所述方法还包括：

对所述目标跨平台引擎实例进行初始化。

在一种可能的设计中，所述第三预设页面的显示内容与所述第二预设页面的显示内容相同。

在一种可能的设计中，所述目标跨平台引擎实例包括目标Flutter引擎实例。

根据本说明书实施例的第二方面，提供一种页面显示装置，包括：

实例获取模块，用于响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，所述第一触发操作用于请求从所述目标应用程序的原生页面跳转至目标跨平台页面；

页面显示模块，用于基于所述目标跨平台引擎实例，加载所述目标跨平台页面。

在一种可能的设计中，所述装置还包括实例构建模块；

所述实例构建模块具体用于：

响应于所述目标应用程序的启动操作，通过跨平台引擎实例自定义操作构建目标跨平台引擎实例；

将所述目标跨平台引擎实例存储至内存中。

在一种可能的设计中，所述实例获取模块用于：

从内存中获取目标跨平台引擎实例对应的全局变量，并基于所述全局变量，从所述内存中确定所述目标跨平台引擎实例，其中，所述全局变量是在构建所述目标跨平台引擎实例时定义的。

在一种可能的设计中，实例构建模块还用于：

基于所述目标跨平台引擎实例，显示所述目标应用程序对应的第一预设页面，其中，所述第一预设页面为所述目标应用程序对应的首页。

在一种可能的设计中，实例构建模块还用于：

响应于所述目标应用程序的启动操作，显示所述目标应用程序对应的第二预设页面；其中，所述第二预设页面为所述目标应用程序对应的启动页。

在一种可能的设计中，所述装置还包括页面处理模块；

所述页面处理模块具体用于：

在目标应用程序对应的第二预设页面显示完成，且还未显示所述目标应用程序对应的第一预设页面的情况下，显示第三预设页面。

在一种可能的设计中，所述页面处理模块还用于：

响应于显示所述第一预设页面，移除所述第三预设页面。

在一种可能的设计中，所述实例构建模块还用于：

对所述目标跨平台引擎实例进行初始化。

在一种可能的设计中，所述第三预设页面的显示内容与所述第二预设页面的显示内容相同。

在一种可能的设计中，所述目标跨平台引擎实例包括目标Flutter引擎实例。

根据本说明书实施例的第三方面，提供一种移动终端，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，所述第一触发操作用于请求从所述目标应用程序的原生页面跳转至目标跨平台页面；

基于所述目标跨平台引擎实例，加载所述目标跨平台页面。

根据本说明书实施例的第四方面，提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如上第一方面以及第一方面各种可能的设计所述的页面显示方法。

根据本说明书实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时，实现如上第一方面以及第一方面各种可能的设计所述的页面显示方法。

本说明书的实施例提供的技术方案可以包括以下有益效果：

本说明书实施例中，在用户使用目标应用程序的过程中，在接收到第一触发操作的情况下，表明需要由当前显示的原生页面，跳转至相应的跨平台页面，即目标跨平台页面，则从内存中直接调用自定义的跨平台引擎实例，即预先通过自定义操作构建的目标跨平台引擎实例，以利用该目标跨平台引擎实例加载该目标跨平台页面，实现跨平台页面的显示，且无需创建新的跨平台引擎实例，使得内存中可以仅存在一个跨平台引擎实例，减少内存占用，使得目标应用程序的性能得到优化，提高用户体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本说明书。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本说明书的实施例，并与说明书一起用于解释本说明书的原理。

图1是本说明书根据一示例性实施例示出的一种现有页面跳转过程示意图。

图2是本说明书根据一示例性实施例示出的一种页面入栈的示意图。

图3是本说明书根据一示例性实施例示出的一种页面显示方法的流程图。

图4是本说明书根据一示例性实施例示出的一种页面跳转的示意图。

图5是本说明书根据一示例性实施例示出的另一种页面跳转的示意图。

图6是本说明书根据一示例性实施例示出的另一种页面显示方法的流程图。

图7是本说明书根据一示例性实施例示出的又一种页面跳转的示意图。

图8是本说明书根据一示例性实施例示出的又一种页面显示方法的流程图。

图9是本说明书根据一示例性实施例示出的一种应用程序显示页面的示意图。

图10是本说明书实施例页面显示装置所在移动终端的一种硬件结构图。

图11是本说明书根据一示例性实施例示出的一种页面显示装置的结构框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书的一些方面相一致的装置和方法的例子。

在本说明书使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本说明书。在本说明书和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本说明书可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本说明书范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

为了便于理解，首先对本申请所涉及的名词进行解释。

原生：基于java开发的Android页面和/或基于Objective-C开发的iOS页面。

启动页：应用程序在启动过程中第一个展示的系统页面。

Flutter：一种UI层的跨平台框架，主要用来实现UI层面的业务开发。例如，新闻客户端中的新闻列表页面，新闻详情页面，个人信息页面等都可以使用Flutter进行开发实现。但若新闻里有一个定位的信息，需显示地图以告知用户新闻发生的地点，则需用到定位功能，其是Flutter不能实现的，需要用到原生的功能实现来回调给Flutter层。

另外，在加载Flutter页面时，需要启动Flutter Engine，即Flutter引擎。当业务无需跳转到Android/iOS页面时，在应用程序运行的过程中仅需一个Flutter引擎。但当业务涉及到拍照、定位、推送等功能时，需由Android/iOS原生功能实现，当从Android/iOS页面跳转回Flutter页面时，Flutter默认又会开启一个引擎，这样内存中就同时存在了两个引擎。由于业务需要，后续又从Flutter页面跳转至原生页面，然后继续回调至Flutter页面，则又会生成一个引擎，相应的，内存中存在多个引擎。

接下来对本说明书实施例进行详细说明。

在一些实施方式中，当应用程序启动时，应用程序的首页一般是通过Flutter实现的，即首页为Flutter页面，因此，默认初始化一个Flutter引擎实例，以利用该Flutter引擎实例加载该首页。当应用程序涉及到原生功能(例如，定位、使用相机进行拍摄等)时，则需要从Flutter页面跳转至原生页面。且当用户输入相关触发操作时，表明需从原生页面跳转至相应的Flutter页面，由于无法获取到默认的Flutter引擎实例，因此，重新初始化Flutter引擎实例，以利用新的Flutter引擎实例加载相应的Flutter页面。

举例来说，如图1所示，当应用程序启动后，默认初始化Flutter引擎实例，即启动Flutter引擎1，以利用Flutter引擎1加载应用程序的首页，且在启动Flutter引擎1时，会将Flutter引擎1保存至内存中。在用户使用应用程序的过程中，当由原生页面跳转至Flutter页面，即页面1时，由于获取不到默认引擎的实例，即获取不到Flutter引擎1，因此，需要初始化，即启动一个新的Flutter引擎实例，即Flutter引擎2，以利用Flutter引擎2加载该页面1。且启动Flutter引擎2时，会将Flutter引擎2保存至内存中，此时，内存中存在两个Flutter引擎实例。可见，当应用程序内存在多次由原生页面跳转至Flutter页面的场景时，需要多次实例化Flutter引擎，导致内存中存在多个Flutter引擎实例，内存占用较大，影响应用程序的性能。

其中，在加载首页/页面1时，路由机制将首页/页面1推入路由栈(如图2所示)。由于首页/页面1入栈之后会一直占用内存，导致Flutter引擎1/Flutter引擎2释放不掉，也会一直占用内存。

因此，针对上述问题，本公开实施例提出了一种Flutter页面加载方法，该方法通过在应用程序启动时，自定义初始化一个Flutter引擎实例，并将其保存至缓存中。利用该Flutter引擎实例加载应用程序的首页，且在后续需由原生页面跳转至Flutter页面时，直接利用内存中的该Flutter引擎实例加载Flutter页面，无需创建新的Flutter引擎实例，使得内存中可以仅存在一个Flutter引擎实例，减少内存占用，有效降低内存开销和性能开销，优化应用程序的性能，提高用户体验。

如图3所示，图3是本说明书根据一示例性实施例示出的一种页面显示方法的流程图，包括以下步骤：

步骤301、响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，第一触发操作用于请求从目标应用程序的原生页面跳转至目标跨平台页面。

在本实施例中，在用户使用移动终端上的目标应用程序的过程中，当用户欲使用该目标应用程序提供的某个特定功能时，输入相应的触发操作，即第一触发操作。其中，该特定功能在实现时，需要由原生页面跳转至特定跨平台页面，相应的，该第一触发操作用于请求从目标应用程序当前显示的原生页面跳转至目标跨平台页面。

移动终端在接收到用户输入的第一触发操作后，表明需由当前显示的原生页面跳转至特定跨平台页面(即目标特定跨平台页面)，也即表明需要加载跨平台页面，则从内存中获取已经存在的目标跨平台引擎实例，以供利用目标跨平台引擎实例加载跨平台页面。

其中，第一触发操作包括点击操作、语音操作、手势操作等。

其中，目标跨平台引擎实例是在目标应用程序启动时，通过执行自定义操作预先构建的跨平台引擎实例。在将该目标跨平台引擎实例保存至内存后，由于该目标跨平台引擎实例是自定义的，该目标跨平台引擎实例的相关实例信息(例如，实例名称)是已知的，因此，可以基于该相关实例信息，从内存中获取到该目标跨平台引擎实例。

可选的，目标跨平台引擎实例包括目标Flutter引擎实例。相应的，跨平台页面包括Flutter页面，即基于Flutter开发的页面。

可选的，目标应用程序为基于Flutter开发的应用程序，其涉及一个或多个由原生页面跳转至Flutter页面的场景。

以一个具体应用场景为例，目标应用程序包括巡检模块，进入巡检模块后，如图4所示，第一个显示的页面为Flutter页面，当点击该页面上的设备总览按钮时，跳转至包含定位的设备总览页面，即原生页面，以通过该设备总览页面查看设备的定位。该设备总览页面上显示有报警按钮，当用户点击该报警按钮时，表明触发第一触发操作，则跳转至相应的报警页面，即Flutter页面。当用户点击报警页面上的相关按钮后，在该页面显示如图5中(a)所示的弹出层，当用户点击该弹出层上的转工单/查看工单控件后，跳转至如图5中(b)所示的新建报修工单页面(即Flutter页面)。当用户点击该新建报修工单页面上的定位控件后，目标应用程序可以跳转到定位页面，定位页面选择定位后又跳转回Flutter页面，实现原生页面与Flutter页面之间的跳转。

可选的，目标应用程序包括原生层和跨平台层(例如，Flutter层)。在由Flutter页面跳转至原生页面的情况下，移动终端基于跨平台层发送第一目标页面信息至原生层，以使原生层由跨平台页面跳转至原生页面，该第一目标页面信息包括跳转标识以及目标原生页面标识，该跳转标识指示进行页面跳转，该目标原生页面标识指示待显示的原生页面标识。原生层接收到该第一目标页面信息后，表明需要由当前显示的跨平台页面跳转至目标原生页面，则调用相关页面加载方法，加载该目标原生页面标识对应的目标原生页面。

其中，跨平台层发送第一目标页面信息至原生层可以通过平台通道(PlantformChannel)进行发送，具体的，该平台通道可以为方法通道(MethodChannel)。

相应的，原生页面跳转至跨平台页面的过程与上述跨平台页面跳转至原生页面的过程相反，即原生层可以通过平台通道发送相应的第二目标页面信息至跨平台层，以使跨平台层在接收到该第二目标页面信息时，表明需由当前显示的原生页面跳转至目标跨平台页面，则调用目标跨平台引擎实例，加载该目标跨平台页面。

步骤302、基于目标跨平台引擎实例，加载目标跨平台页面。

在本实施例中，在从内存查找到目标跨平台引擎实例时，直接利用该目标跨平台引擎实例加载目标跨平台页面，以由当前显示的页面跳转至该目标跨平台页面，实现跨平台页面的显示。

具体的，获取目标跨平台页面对应的页面信息(例如，页面标识)，并将该页面信息作为目标跨平台引擎实例的入参，以使目标跨平台引擎实例加载相应的跨平台页面。

相应的，在目标应用程序运行的过程中，可能需要打开多个跨平台页面，因此，需要利用该目标跨平台引擎实例加载不同的跨平台页面。当目标跨平台引擎实例加载不同的跨平台页面时，获取需加载的跨平台页面对应的页面信息，并将其作其作为目标跨平台引擎实例的入参，以使目标跨平台引擎实例加载相应的跨平台页面。

可选的，由于在打开目标应用程序的页面时，需要将其推入路由栈中，因此，在返回至路由栈中的一个页面时，可以直接从路由栈获取该页面，无需重新加载。相应的，在由原生页面跳转回目标跨平台页面，且路由栈中存在该目标跨平台页面时，可以直接从路由栈中获取该目标跨平台页面，无需再次调用跨平台引擎实例进行加载。

可以理解，在打开页面时，会将该页面进行入栈，在退出该页面时，会将该页面进行出栈。

在本实施例中，由于目标跨平台引擎实例是预先通过自定义操作构建得到的，该目标跨平台引擎实例是自定义的跨平台引擎实例，而不是系统默认创建的跨平台引擎实例，因此，在将该目标跨平台引擎实例保存至内存中后，可以从内存中获取到目标跨平台引擎实例，从而在由原生页面跳转至跨平台页面时，可以从内存中直接调用该目标跨平台引擎实例以加载相应的跨平台页面，避免由于无法获取系统默认创建的跨平台引擎实例，导致需要重新创建跨平台引擎实例以利用重新创建的跨平台引擎实例加载跨平台页面。

从上述描述可知，在用户使用目标应用程序的过程中，在接收到第一触发操作的情况下，表明需要由当前显示的原生页面，跳转至相应的跨平台页面，即目标跨平台页面，则从内存中直接调用自定义的跨平台引擎实例，即预先通过自定义操作构建的目标跨平台引擎实例，以利用该目标跨平台引擎实例加载该目标跨平台页面，实现跨平台页面的显示，且无需创建新的跨平台引擎实例，使得内存中可以仅存在一个跨平台引擎实例，减少内存占用，使得目标应用程序的性能得到优化，提高用户体验。

如图6所示，图6是本说明书根据一示例性实施例示出的另一种页面显示方法的流程图，在启动目标应用程序时，构建目标跨平台引擎实例，以利用目标跨平台引擎实例加载跨平台页面。下面将结合一个具体实施例对此过程进行详细说明，如图6所示，该方法包括以下步骤：

步骤601、响应于目标应用程序的启动操作，通过跨平台引擎实例自定义操作构建目标跨平台引擎实例。

在本实施例中，在接收到用户输入的目标应用程序的启动操作的情况下，启动目标应用程序。在目标应用程序启动时，执行跨平台引擎实例自定义操作，以生成自定义的跨平台引擎实例，即目标跨平台引擎实例。

其中，执行跨平台引擎实例自定义操作，实际是处理器执行自定义的跨平台引擎实例生成代码的过程，该代码是由相关人员预先编写的。

其中，启动操作包括点击操作、语音操作、手势操作等。例如，当用户点击目标应用程序对应的图标时，表明用户输入了相应的启动操作。

可选的，在执行目标应用程序对应的目标方法之后，通过跨平台引擎实例自定义操作构建目标跨平台引擎实例。

其中，目标方法包括main方法。

可选的，在构建得到目标跨平台引擎实例后，将该目标跨平台引擎实例的相关信息(例如，实例名称)保存至预设插件表中。该插件表的作用与注册表类似，在将跨平台引擎实例的相关信息保存至该插件表中后，可以使用该跨平台引擎实加载跨平台页面。

在本实施例中，可选的，响应于目标应用程序的启动操作，即在启动目标应用程序的过程中，显示目标应用程序对应的第二预设页面。其中，第二预设页面为目标应用程序对应的启动页。

可选的，在构建得到目标跨平台引擎实例后，对目标跨平台引擎实例进行初始化，即启动目标跨平台引擎实例。

步骤602、将目标跨平台引擎实例存储至内存中。

在本实施例中，在创建得到目标跨平台引擎实例后，将目标跨平台引擎实例存储至内存中，以供后续在使用跨平台引擎实例加载相应的跨平台页面时，可以直接利用该内存中的目标跨平台引擎实例，无需重新创建跨平台引擎实例。

具体的，在创建得到目标跨平台引擎实例后，初始化目标跨平台引擎实例，并将初始化后的目标跨平台引擎实例添加至内存中。

可选的，可以将目标跨平台引擎实例添加至缓存中，以使在后续调用目标跨平台引擎实例时，可以快速从缓存中获取，从而提高页面的加载速度。

可选的，为了便于从内存，即缓存中查找目标跨平台引擎实例，在构建目标跨平台引擎实例的过程中，需要定义该目标跨平台引擎实例对应的全局变量，并将该全局变量存储至内存中。具体的，可以将全局变量存储至缓存中，以供后续在调用目标跨平台引擎实例时，从内存中查找该全局变量，并从该全局变量指向的位置中获取到目标跨平台引擎实例。

其中，定义全局变量实际是指执行定义全局变量的代码。

其中，创建自定义的跨平台引擎实例以及定义全局变量，并将其存储至缓存的代码如下：

@objc func getFlutterEngine()->FlutterEngine{

/*

缓存中查找Engine变量，如果不存在初始化一次，如果存在，直接return获取

*/

if(flutterEngine＝＝nil){

/*

初始化自定义Engine

*/

let flutterEngin＝FlutterEngine(name:"park.flutter",project:nil)；

/*

启动引擎

*/

flutterEngin.run(withEntrypoint:nil)；

GeneratedPluginRegistrant.register(with:flutterEngin)；

/*

定义全局变量赋值Engine,存入内存

*/

flutterEngine＝flutterEngin；

}

/*

return缓存中的Engine

*/

return flutterEngine；

}

可选的，基于目标跨平台引擎实例，显示目标应用程序对应的第一预设页面。

在本实施例中，在构建得到目标跨平台引擎实例后，初始化该目标跨平台引擎实例，并利用初始化后的目标跨平台引擎实例加载目标应用程序对应的第一预设页面。

其中，第一预设页面为目标应用程序对应的首页，即为需在启动页之后显示的首个页面。

其中，从缓存中获取目标跨平台引擎实例，并利用目标跨平台引擎实例加载首页的代码如下：

/*

缓存中获取Engine对象

*/

self.flutterEngine＝self.getFlutterEngine(；

/*

用自定义引擎，即目标跨平台引擎实例初始化应用程序的首页

*/

self.flutterController＝FlutterViewController(engine:self.flutterEngine,nibName:nil,bundle:nil)；

let image＝UllmageView.init(image:Ullmage.init(named:"lanch._img))；

image.frame＝CGRect.init(origin:CGPoint.init(x:0,y:0)，size:self.window.bounds.size)；

image.contentMode＝.scaleAspectFill；

self.flutterController！.view.addSubview(image)；

/*

启动首页

*/

let navigationController＝TaoWenLvNavigationController.init(rootViewController:self.flutterController！)

self.window.rootViewController＝navigationController；

self.window.backgroundColor＝UlColor.white；

self.flutterController？.fd prefersNavigationBarHidden＝true；

BOERouter<AnyObject>.shared().navigationController＝navigationController；

步骤603、响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，第一触发操作用于请求从目标应用程序的原生页面跳转至目标跨平台页面。

在本实施例中，从内存中获取目标跨平台引擎实例对应的全局变量，并基于所述全局变量，从内存中确定目标跨平台引擎实例，即从该全局变量指向的位置中获取该目标跨平台引擎实例，该全局变量是在构建目标跨平台引擎实例时定义的，以供利用该目标跨平台引擎实例初始化新的跨平台页面，即目标跨平台页面，其具体实现如下：

/*

缓存池获取Engine

*/

AppDelegate*ad＝(AppDelegate*)[UlApplicationsharedApplication].delegate；

FlutterEngine*engine＝[ad getFlutterEngine]；

engine.viewController＝nil；

/*

用缓存的Engine，即目标跨平台引擎实例初始化新的Flutter页面

*/

FlutterViewController*flutterController＝[[FlutterViewControlleralloc]initWithEngine:engine nibName:nil bundle:nil]；

flutterController.fd prefersNavigationBarHidden＝YES；

[self.navigationController pushViewController:flutterControlleranimated:YES]；

步骤604、基于目标跨平台引擎实例，加载目标跨平台页面。

在本实施例中，对于现有原生应用程序，由于大部分页面都是原生页面，在开发基于Flutter需求的新业务时，需将Flutter页面嵌入至原有的页面之中，因此，在用户使用应用程序的过程中，涉及从原生页面跳转至Flutter页面的业务，每次由原生页面跳转至Flutter页面(如图7所示由页面A跳转至页面B、由页面C跳转至页面D)，均需启动一个Flutter引擎，导致出现内存中存在多个Flutter引擎的问题，极大的消耗系统资源。因此，为了避免内存中存在多个Flutter引擎，本申请放弃系统的默认Flutter引擎，而是采用自定义可控的Flutter引擎，将Flutter引擎存储至缓存池中，后续在需要由原生页面跳转至Flutter页面时，可以从缓存池中取出该Flutter引擎，以利用该Flutter引擎加载该Flutter页面，从而使得在应用程序运行期间，可以仅存在一个Flutter引擎，在实现跨平台的基础上，解决内存和资源损耗问题，节省了人力开发成本。

在本实施例中，在目标应用程序启动时，不启动系统默认的跨平台引擎，而是执行跨平台引擎实例自定义操作以创建自主可控的跨平台引擎实例，即目标跨平台引擎实例，以供利用该目标跨平台引擎实例加载跨平台页面，从而在由原生页面跳转至跨平台页面的场景中，可以直接利用目标跨平台引擎实例加载相应的跨平台页面，无需创建新的跨平台引擎实例，使得内存中可以仅存在一个跨平台引擎实例，从而在实现跨平台的基础上，可以降低内存的占用，减少资源损耗，提高用户体验。

如图8所示，图8是本说明书根据一示例性实施例示出的又一种页面显示方法的流程图，为了避免白屏问题，在初始化目标跨平台引擎实例时，插入相应的页面。下面将结合一个具体实施例对此过程进行详细说明，如图8所示，该方法包括以下步骤：

步骤801、在目标应用程序对应的第二预设页面显示完成，且还未显示目标应用程序对应的第一预设页面的情况下，显示第三预设页面。

在本实施例中，由于目标跨平台引擎实例是基于相关自定义代码生成的，即目标跨平台引擎实例是自定义的跨平台引擎实例，相较于初始化默认的跨平台引擎实例所需的时间，初始化自定义的跨平台引擎实例所需的时间较长。因此，导致在初始化自定义的跨平台引擎实例时，启动页(如图9中(a)所示启动页)，即第二预设页面已经显示完成，但需要使用跨平台引擎实例加载的第一预设页面(如图9中(c)所示的首页，即登录页面)还未渲染出来，出现一定时间的空白页面(如图9中(b)所示的空白页)，极度影响用户体验。

可选的，第一预设页面(即首页)、第二预设页面(即启动页)和第三预设页面均保存至目标应用程序，目标应用程序对应的安装包中的相应位置，也即第一预设页面对应的显示信息(例如，显示图片)保存在该安装包中的第一预设位置，第二预设页面对应的显示信息保存在该安装包中的第二预设位置，第三预设页面对应的显示信息保存在该安装包中的第三预设位置。

在需要加载相应的预设页面时，即在需要加载相应的预设页面对应的显示信息时，基于相关加载方法，即函数，从相应的预设位置中获取。例如，在加载第三页面对应的显示信息时，调用相关加载方法，从第三预设位置中获取该显示信息，并进行显示。

其中，第一预设位置、第二预设位置和第三预设位置可以根据需求进行设置，在此，不对其进行限制。

另外，可选的，在目标应用程序安装至移动终端后，将第二预设位置存储的第二预设页面对应的显示信息保存至该移动终端中的特定位置中，以便于后续利用原生层从该特定位置中获取该显示信息。

为了避免由于目标跨平台引擎实例初始化时间过长导致出现空白页，在第二预设页面显示完成，且第一预设页面还未显示的情况下，即在初始化目标跨平台引擎实例时，插入第三预设页面，使得移动终端显示第三预设页面，避免显示空白页，从而可以避免用户产生关于白屏的疑惑，保证用户体验。

可选的，第三预设页面的显示内容与第二预设页面的显示内容相同。

具体的，为了保证用户的无感体验，第三预设页面的显示内容可以与第二预设页面的显示内容相同，即在初始化目标跨平台引擎实例时，可以在移动终端的顶部窗口window，即当前显示的页面的最上方图层上显示与启动页相同的图片，使得用户看到与启动页相同的内容，实现无感切换。

在本实施例中，为了避免影响第一预设页面的显示，需移除第三预设页面，因此，可以基于以下两种方式确定是否可以移除第三预设页面。

一种方式为，响应于显示第一预设页面，移除第三预设页面。

具体的，在需要显示第一预设页面时，表明目标跨平台引擎实例已经初始化完成，可以利用目标跨平台引擎实例加载第一预设页面，则无需继续显示该第三预设页面，从而移除第三预设页面，即移除当前页面显示的与启动页相同的图片，以避免影响第一预设页面的显示。

另一种方式为，响应于达到第三预设页面对应的目标显示时间，移除第三预设页面，该目标显示时间表示显示第三预设页面的总时长。

具体的，获取第三预设页面对应的显示时间，从显示该第三预设页面开始计时，以得到当前显示时间，在确定该当前显示时间大于或等于该第三预设页面对应的目标显示时间时，表明可以停止显示该第三预设页面，则移除第三预设页面，以避免影响第一预设页面的显示。

其中，目标显示时间可以根据实际需求进行设置，例如，目标显示时间为1.5秒。相应的，目标显示时间可以存储于目标应用程序对应的指定位置中，例如，目标显示时间存在于与加载该第三预设页面相关的加载方法中。

步骤802、响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，第一触发操作用于请求从目标应用程序的原生页面跳转至目标跨平台页面。

步骤803、基于目标跨平台引擎实例，加载目标跨平台页面。

在本实施例中，在初始化目标跨平台引擎实例时，即在第二预设页面已经显示完成，但第一预设页面还未渲染的情况下，显示过渡页面，即第三预设页面，以避免出现白屏问题。当可以显示第一预设页面时，停止显示该第三预设页面，实现第一预设页面的正常显示，从而使得可以成功过渡到第一预设页面，保证用户的无感体验，提高用户使用满意度。

与前述方法的实施例相对应，本说明书还提供了页面显示装置及其所应用的终端的实施例。

本说明书页面显示装置的实施例可以应用在移动终端上，例如手机、平板电脑等。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图10所示，为本说明书实施例页面显示装置所在移动终端的一种硬件结构图，除了图10所示的处理器1010、内存1030、网络接口1020、以及非易失性存储器1040之外，实施例中页面显示装置1031所在的移动终端，通常根据该移动终端的实际功能，还可以包括其他硬件，对此不再赘述。

如图11所示，图11是本说明书根据一示例性实施例示出的一种页面显示装置的框图，装置包括：

实例获取模块1110，用于响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，第一触发操作用于请求从目标应用程序的原生页面跳转至目标跨平台页面。

页面显示模块1120，用于基于目标跨平台引擎实例，加载目标跨平台页面。

可选的，目标跨平台引擎实例包括目标Flutter引擎实例。

在本申请的另一个实施例中，在上述图11实施例的基础上，页面显示装置还包括实例构建模块。

实例构建模块具体用于：

在响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例之前，响应于目标应用程序的启动操作，通过跨平台引擎实例自定义操作构建目标跨平台引擎实例。

将目标跨平台引擎实例存储至内存中。

在任意实施例中，可选的，实例获取模块1110用于：

从内存中获取目标跨平台引擎实例对应的全局变量，并基于全局变量，从内存中确定目标跨平台引擎实例，其中，全局变量是在构建目标跨平台引擎实例时定义的。

在本实施例中，可选的，实例构建模块还用于：

在将目标跨平台引擎实例存储至内存中之后，基于目标跨平台引擎实例，显示目标应用程序对应的第一预设页面，其中，第一预设页面为目标应用程序对应的首页。

在本实施例中，可选的，实例构建模块还用于：

响应于目标应用程序的启动操作，显示目标应用程序对应的第二预设页面。其中，第二预设页面为目标应用程序对应的启动页。

在本实施例中，可选的，实例构建模块还用于：

在通过跨平台引擎实例自定义操作构建目标跨平台引擎实例之后，对目标跨平台引擎实例进行初始化。

在本申请的另一个实施例中，在上述图11实施例的基础上，页面显示装置还包括页面处理模块。

页面处理模块具体用于：

在目标应用程序对应的第二预设页面显示完成，且还未显示目标应用程序对应的第一预设页面的情况下，显示第三预设页面。

在本实施例中，可选的，页面处理模块还用于：

响应于显示第一预设页面，移除第三预设页面。

可选的，第三预设页面的显示内容与第二预设页面的显示内容相同。

上述装置中各个模块的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

相应的，本说明书还提供一种移动终端，所述终端包括有处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为：

响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，所述第一触发操作用于请求从所述目标应用程序的原生页面跳转至目标跨平台页面；

基于所述目标跨平台引擎实例，加载所述目标跨平台页面。

本申请实施例提供一种计算机可读存储介质，其中存储有计算机程序代码，该计算机程序代码被处理器执行时实现上述方法步骤。

本申请实施例还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时，实现如上述方法步骤。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本说明书方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本领域技术人员在考虑说明书及实践这里申请的发明后，将容易想到本说明书的其它实施方案。本说明书旨在涵盖本说明书的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本说明书的一般性原理并包括本说明书未申请的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本说明书的真正范围和精神由下面的权利要求指出。

应当理解的是，本说明书并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本说明书的范围仅由所附的权利要求来限制。

以上所述仅为本说明书的较佳实施例而已，并不用以限制本说明书，凡在本说明书的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本说明书保护的范围之内。

Claims (12)

1.一种页面显示方法，其特征在于，包括：

响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，所述第一触发操作用于请求从所述目标应用程序的原生页面跳转至目标跨平台页面；

基于所述目标跨平台引擎实例，加载所述目标跨平台页面。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

响应于所述目标应用程序的启动操作，通过跨平台引擎实例自定义操作构建目标跨平台引擎实例；

将所述目标跨平台引擎实例存储至内存中。

3.根据权利要求2所述的方法，其特征在于，所述从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，包括：

从内存中获取目标跨平台引擎实例对应的全局变量，并基于所述全局变量，从所述内存中确定所述目标跨平台引擎实例，其中，所述全局变量是在构建所述目标跨平台引擎实例时定义的。

4.根据权利要求2所述的方法，其特征在于，所述方法还包括：

基于所述目标跨平台引擎实例，显示所述目标应用程序对应的第一预设页面；其中，所述第一预设页面为所述目标应用程序对应的首页。

5.根据权利要求2所述的方法，其特征在于，所述方法还包括：

响应于所述目标应用程序的启动操作，显示所述目标应用程序对应的第二预设页面；其中，所述第二预设页面为所述目标应用程序对应的启动页。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在目标应用程序对应的第二预设页面显示完成，且还未显示所述目标应用程序对应的第一预设页面的情况下，显示第三预设页面。

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：

响应于显示所述第一预设页面，移除所述第三预设页面。

8.根据权利要求2至5任一项所述的方法，其特征在于，所述方法还包括：

对所述目标跨平台引擎实例进行初始化。

9.根据权利要求6或7所述的方法，其特征在于，所述第三预设页面的显示内容与所述第二预设页面的显示内容相同。

10.根据权利要求1至7任一项所述的方法，其特征在于，所述目标跨平台引擎实例包括目标Flutter引擎实例。

11.一种页面显示装置，其特征在于，所述装置包括：

实例获取模块，用于响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，所述第一触发操作用于请求从所述目标应用程序的原生页面跳转至目标跨平台页面；

页面显示模块，用于基于所述目标跨平台引擎实例，加载所述目标跨平台页面。

12.一种移动终端，其特征在于，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现如下方法：

响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，所述第一触发操作用于请求从所述目标应用程序的原生页面跳转至目标跨平台页面；

基于所述目标跨平台引擎实例，加载所述目标跨平台页面。

Images