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

页面显示方法及装置 Download PDF

Info

Publication number
WO2023087897A1
WO2023087897A1 PCT/CN2022/120091 CN2022120091W WO2023087897A1 WO 2023087897 A1 WO2023087897 A1 WO 2023087897A1 CN 2022120091 W CN2022120091 W CN 2022120091W WO 2023087897 A1 WO2023087897 A1 WO 2023087897A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
target
platform
cross
engine instance
Prior art date
Application number
PCT/CN2022/120091
Other languages
English (en)
French (fr)
Inventor
李坤
姜苏珈
赵振焱
赵海霞
Original Assignee
京东方科技集团股份有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 京东方科技集团股份有限公司 filed Critical 京东方科技集团股份有限公司
Publication of WO2023087897A1 publication Critical patent/WO2023087897A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • This application relates to the field of computer technology, in particular to a page display method and device
  • Flutter is a cross-platform application interface (User Interface, UI) solution, based on the pages developed by Flutter, that is, the Flutter pages can run on both the Android system and the iOS system to achieve cross-platform.
  • UI User Interface
  • a Flutter engine instance needs to be created to use the Flutter engine instance to load the Flutter page.
  • the user may need to jump from the native page to the Flutter page multiple times. Every time the user jumps from the native page to the Flutter page, a new Flutter engine instance needs to be created. Therefore, multiple Flutter pages need to be created.
  • Engine instances resulting in multiple Flutter engine instances in the memory, occupying a large amount of memory and affecting user experience.
  • one of the objectives of the present application is to provide a page display method and device.
  • a method for displaying a page comprising:
  • the first trigger operation is used to request a jump from a native page of the target application to the target cross-platform page;
  • the method also includes:
  • the acquiring the target cross-platform engine instance pre-built through a custom operation from the memory includes:
  • the method also includes:
  • the method also includes:
  • a second preset page corresponding to the target application is displayed; wherein the second preset page is a startup page corresponding to the target application.
  • the method also includes:
  • the method also includes:
  • the method also includes:
  • the target cross-platform engine instance is initialized.
  • the display content of the third preset page is the same as the display content of the second preset page.
  • the target cross-platform engine instance includes a target Flutter engine instance.
  • a page display device including:
  • An instance obtaining module configured to obtain from memory a target cross-platform engine instance pre-built through a custom operation in response to a first trigger operation in the target application, the first trigger operation being used to request from the target application
  • the native page of the program jumps to the target cross-platform page
  • the page display module is configured to load the target cross-platform page based on the target cross-platform engine instance.
  • the device also includes an example building block
  • the example building blocks are specifically for:
  • the instance obtaining module is specifically used for:
  • instance building blocks are also used to:
  • instance building blocks are also used to:
  • a second preset page corresponding to the target application is displayed; wherein the second preset page is a startup page corresponding to the target application.
  • the device further includes a page processing module
  • the page processing module is specifically used for:
  • the page processing module is also used for:
  • the instance building block is also used for:
  • the target cross-platform engine instance is initialized.
  • the display content of the third preset page is the same as the display content of the second preset page.
  • the target cross-platform engine instance includes a target Flutter engine instance.
  • a mobile terminal including:
  • memory for storing processor-executable instructions
  • the processor is configured as:
  • the first trigger operation is used to request a jump from a native page of the target application to the target cross-platform page;
  • a computer-readable storage medium stores computer-executable instructions, and when the processor executes the computer-executable instructions, the above first aspect and Various possible designs of the page display method described in the first aspect.
  • a computer program product including a computer program.
  • the computer program When the computer program is executed by a processor, the page display described in the above first aspect and various possible designs of the first aspect is realized. method.
  • the user when the user receives the first trigger operation while using the target application, it indicates that the currently displayed native page needs to jump to the corresponding cross-platform page, that is, the target cross-platform page , then directly call the custom cross-platform engine instance from the memory, that is, the target cross-platform engine instance constructed through custom operations in advance, so as to use the target cross-platform engine instance to load the target cross-platform page and realize the display of the cross-platform page , and there is no need to create a new cross-platform engine instance, so that only one cross-platform engine instance can exist in the memory, reducing memory usage, optimizing the performance of the target application, and improving user experience.
  • Fig. 1 is a schematic diagram of an existing page jumping process according to an exemplary embodiment of the present application.
  • Fig. 2 is a schematic diagram of page pushing into a stack according to an exemplary embodiment of the present application.
  • Fig. 3 is a flowchart of a page display method according to an exemplary embodiment of the present application.
  • Fig. 4 is a schematic diagram of page jump according to an exemplary embodiment of the present application.
  • Fig. 5 is a schematic diagram of another page jump according to an exemplary embodiment of the present application.
  • Fig. 6 is a flowchart of another page display method according to an exemplary embodiment of the present application.
  • Fig. 7 is a schematic diagram of another page jump according to an exemplary embodiment of the present application.
  • Fig. 8 is a flowchart of another page display method according to an exemplary embodiment of the present application.
  • Fig. 9 is a schematic diagram of an application display page according to an exemplary embodiment of the present application.
  • FIG. 10 is a hardware structural diagram of a mobile terminal where the page display device according to the embodiment of the present application is located.
  • Fig. 11 is a structural block diagram of a page display device according to an exemplary embodiment of the present application.
  • Startup page The first system page displayed during the startup process of the application.
  • Flutter A cross-platform framework for the UI layer, mainly used to implement business development at the UI level.
  • the news list page, news detail page, personal information page, etc. in the news client can be developed and implemented using Flutter.
  • the location function is required, which cannot be realized by Flutter, and the native function implementation needs to be used to call back to the Flutter layer.
  • the homepage of the application is generally implemented through Flutter, that is, the homepage is a Flutter page. Therefore, a Flutter engine instance is initialized by default to load the homepage by using the Flutter engine instance.
  • a Flutter engine instance is initialized by default to load the homepage by using the Flutter engine instance.
  • native functions such as positioning, using the camera to shoot, etc.
  • the user enters a relevant trigger operation it indicates that it is necessary to jump from the native page to the corresponding Flutter page. Since the default Flutter engine instance cannot be obtained, the Flutter engine instance should be reinitialized to use the new Flutter engine instance to load the corresponding Flutter page.
  • the Flutter engine instance is initialized by default, that is, the Flutter engine 1 is started to use the Flutter engine 1 to load the home page of the application, and when the Flutter engine 1 is started, the Flutter Engine 1 is saved to memory.
  • the Flutter engine instance that is, Flutter engine 2
  • the Flutter engine 2 will be saved in the memory.
  • the routing mechanism pushes the home page/page 1 into the routing stack (as shown in FIG. 2 ). Since the home page/page 1 will always occupy memory after being pushed onto the stack, Flutter engine 1/Flutter engine 2 cannot be released and will always occupy memory.
  • the embodiment of the present application proposes a Flutter page loading method, which is to initialize a Flutter engine instance by customizing and saving it in the cache when the application starts. Use this Flutter engine instance to load the homepage of the application, and when you need to jump from the native page to the Flutter page later, directly use the Flutter engine instance in the memory to load the Flutter page, without creating a new Flutter engine instance, so that the memory can There is only one instance of the Flutter engine, which reduces memory usage, effectively reduces memory overhead and performance overhead, optimizes application performance, and improves user experience.
  • Figure 3 is a flowchart of a page display method according to an exemplary embodiment of the present application, including the following steps:
  • Step 301 in response to the first trigger operation in the target application, obtain from the memory the target cross-platform engine instance pre-built through the custom operation, the first trigger operation is used to request to jump from the native page of the target application to Target cross-platform pages.
  • the user when the user wants to use a specific function provided by the target application program, the user inputs a corresponding trigger operation, that is, a first trigger operation.
  • a corresponding trigger operation that is, a first trigger operation.
  • the mobile terminal After the mobile terminal receives the first trigger operation input by the user, it indicates that it needs to jump from the currently displayed native page to a specific cross-platform page (that is, a target-specific cross-platform page), which means that it needs to load a cross-platform page, and then from the memory Obtain an existing target cross-platform engine instance in , so as to use the target cross-platform engine instance to load the cross-platform page.
  • a specific cross-platform page that is, a target-specific cross-platform page
  • the first trigger operation includes click operation, voice operation, gesture operation and the like.
  • the target cross-platform engine instance is a pre-built cross-platform engine instance by executing a custom operation when the target application starts. After the target cross-platform engine instance is saved to memory, since the target cross-platform engine instance is customized, the relevant instance information (for example, instance name) of the target cross-platform engine instance is known, therefore, it can be based on The relevant instance information is obtained from the memory of the target cross-platform engine instance.
  • the target cross-platform engine instance includes a target Flutter engine instance.
  • cross-platform pages include Flutter pages, that is, pages developed based on Flutter.
  • the target application is an application developed based on Flutter, which involves one or more scenarios of jumping from a native page to a Flutter page.
  • the target application includes the inspection module.
  • the first displayed page is the Flutter page.
  • the device overview button on this page is clicked, the Navigate to the device overview page with targeting, the native page, to view the targeting of the device from that device overview page.
  • the alarm button When the user clicks the alarm button, it indicates that the first trigger operation is triggered, and then jumps to the corresponding alarm page, that is, the Flutter page.
  • the pop-up layer shown in (a) in Figure 5 is displayed on the page.
  • the new repair work order page that is, the Flutter page
  • the target application can jump to the positioning page. After selecting the positioning on the positioning page, it will jump back to the Flutter page, realizing the jump between the native page and the Flutter page.
  • the target application includes a native layer and a cross-platform layer (for example, a Flutter layer).
  • the mobile terminal sends the first target page information to the native layer based on the cross-platform layer, so that the native layer jumps from the cross-platform page to the native page, and the first target page information includes A jump identifier and a target native page identifier, the jump identifier indicates page jump, and the target native page identifier indicates a native page identifier to be displayed.
  • the native layer indicates that it needs to jump from the currently displayed cross-platform page to the target native page, and then calls the relevant page loading method to load the target native page corresponding to the target native page identifier.
  • sending the first target page information from the cross-platform layer to the native layer may be sent through a platform channel (PlantformChannel), specifically, the platform channel may be a method channel (MethodChannel).
  • PlanChannel a platform channel
  • MethodChannel a method channel
  • the process of jumping from the native page to the cross-platform page is opposite to the above-mentioned process of jumping from the cross-platform page to the native page, that is, the native layer can send the corresponding second target page information to the cross-platform layer through the platform channel, so that the cross-platform When the platform layer receives the second target page information, it indicates that the currently displayed native page needs to jump to the target cross-platform page, and then calls the target cross-platform engine instance to load the target cross-platform page.
  • Step 302 based on the target cross-platform engine instance, load the target cross-platform page.
  • the target cross-platform engine instance when the target cross-platform engine instance is found from the memory, the target cross-platform engine instance is directly used to load the target cross-platform page, so as to jump to the target cross-platform page from the currently displayed page to realize cross-platform The display of the page.
  • the page information (for example, page identifier) corresponding to the target cross-platform page is obtained, and the page information is used as an input parameter of the target cross-platform engine instance, so that the target cross-platform engine instance loads the corresponding cross-platform page.
  • the target cross-platform engine instance needs to be used to load different cross-platform pages.
  • the target cross-platform engine instance loads different cross-platform pages, obtain the page information corresponding to the cross-platform page to be loaded, and use it as an input parameter of the target cross-platform engine instance, so that the target cross-platform engine instance loads the corresponding cross-platform pages.
  • the page of the target application program needs to be pushed into the routing stack when the page is opened, when returning to a page in the routing stack, the page can be obtained directly from the routing stack without reloading.
  • the target cross-platform page can be obtained directly from the routing stack without calling the cross-platform engine instance again to load.
  • the target cross-platform engine instance is a custom cross-platform engine instance, not a cross-platform engine instance created by the system by default. Therefore, After the target cross-platform engine instance is saved in the memory, the target cross-platform engine instance can be obtained from the memory, so that the target cross-platform engine can be directly called from the memory when jumping from the native page to the cross-platform page instance to load the corresponding cross-platform page, avoiding the need to re-create the cross-platform engine instance to use the re-created cross-platform engine instance to load the cross-platform page due to the inability to obtain the default cross-platform engine instance created by the system.
  • FIG. 6 is a flowchart of another page display method according to an exemplary embodiment of the present application.
  • a target cross-platform engine instance is constructed to utilize the target cross-platform engine instance Load cross-platform pages. This process will be described in detail below in conjunction with a specific embodiment, as shown in Figure 6, the method includes the following steps:
  • Step 601 in response to the start operation of the target application program, build the target cross-platform engine instance through the custom operation of the cross-platform engine instance.
  • the target application program when the start operation of the target application program input by the user is received, the target application program is started.
  • the target application executes the cross-platform engine instance custom operation to generate a customized cross-platform engine instance, that is, the target cross-platform engine instance.
  • executing the custom operation of the cross-platform engine instance is actually a process in which the processor executes the custom cross-platform engine instance to generate code, which is pre-written by relevant personnel.
  • the starting operation includes a click operation, a voice operation, a gesture operation, and the like. For example, when the user clicks the icon corresponding to the target application program, it indicates that the user has input a corresponding start operation.
  • the target cross-platform engine instance is constructed through a custom operation of the cross-platform engine instance.
  • the target method includes the main method.
  • relevant information for example, instance name
  • the target cross-platform engine instance is constructed, relevant information (for example, instance name) of the target cross-platform engine instance is saved in a preset plug-in table.
  • the function of the plug-in table is similar to that of the registry.
  • the cross-platform engine can be used to load the cross-platform page.
  • a second preset page corresponding to the target application is displayed.
  • the second preset page is a startup page corresponding to the target application program.
  • the target cross-platform engine instance is initialized, that is, the target cross-platform engine instance is started.
  • Step 602 storing the target cross-platform engine instance into memory.
  • the target cross-platform engine instance is stored in the memory, so that when the cross-platform engine instance is used to load the corresponding cross-platform page, the memory can be directly used The target cross-platform engine instance for , without recreating the cross-platform engine instance.
  • the target cross-platform engine instance is initialized, and the initialized target cross-platform engine instance is added to the memory.
  • the target cross-platform engine instance can be added to the cache, so that the target cross-platform engine instance can be quickly obtained from the cache when the target cross-platform engine instance is called subsequently, thereby improving the page loading speed.
  • the global variable can be stored in the cache, so that when the target cross-platform engine instance is called later, the global variable can be searched from the memory, and the target cross-platform engine instance can be obtained from the location pointed to by the global variable.
  • defining a global variable actually refers to executing a code defining a global variable.
  • the code for creating a custom cross-platform engine instance, defining global variables, and storing them in the cache is as follows:
  • flutterEngine flutterEngine
  • a first preset page corresponding to the target application is displayed.
  • the target cross-platform engine instance is initialized, and the initialized target cross-platform engine instance is used to load the first preset page corresponding to the target application.
  • the first preset page is the homepage corresponding to the target application program, that is, the first page to be displayed after the startup page.
  • the code to obtain the target cross-platform engine instance from the cache and use the target cross-platform engine instance to load the home page is as follows:
  • image.contentMode .scaleAspectFill
  • Step 603 in response to the first trigger operation in the target application program, obtain from the memory the target cross-platform engine instance pre-built through the custom operation, the first trigger operation is used to request to jump from the native page of the target application program to Target cross-platform pages.
  • the global variable corresponding to the target cross-platform engine instance is obtained from the memory, and based on the global variable, the target cross-platform engine instance is determined from the memory, that is, the target cross-platform engine instance is obtained from the location pointed to by the global variable.
  • Platform engine instance this global variable is defined when building the target cross-platform engine instance, so as to use the target cross-platform engine instance to initialize a new cross-platform page, that is, the target cross-platform page, and its specific implementation is as follows:
  • the cache pool obtains the Engine
  • AppDelegate*ad (AppDelegate*)[UlApplication sharedApplication].delegate;
  • FlutterViewController*flutterController [[FlutterViewController alloc]initWithEngine:engine nibName:nil bundle:nil];
  • Step 604 based on the target cross-platform engine instance, load the target cross-platform page.
  • this application abandons the default Flutter engine of the system, but uses a custom and controllable Flutter engine, stores the Flutter engine in the cache pool, and subsequently jumps from the native page to When using a Flutter page, the Flutter engine can be taken out from the buffer pool to load the Flutter page with the Flutter engine, so that only one Flutter engine can exist during the running of the application, and on the basis of realizing cross-platform, memory and The problem of resource loss saves manpower development costs.
  • the target application program starts, the default cross-platform engine of the system is not started, but the custom operation of the cross-platform engine instance is executed to create an autonomous and controllable cross-platform engine instance, that is, the target cross-platform engine instance,
  • the target cross-platform engine instance can be used to load cross-platform pages, so that in the scenario of jumping from a native page to a cross-platform page, the target cross-platform engine instance can be directly used to load the corresponding cross-platform page without creating a new cross-platform
  • the engine instance allows only one cross-platform engine instance to exist in the memory, so that on the basis of realizing cross-platform, it can reduce memory usage, reduce resource consumption, and improve user experience.
  • FIG. 8 is a flow chart of another page display method according to an exemplary embodiment of the present application.
  • a corresponding page is inserted. This process will be described in detail below in conjunction with a specific embodiment, as shown in Figure 8, the method includes the following steps:
  • Step 801 Display a third preset page when the display of the second preset page corresponding to the target application is completed and the first preset page corresponding to the target application has not been displayed yet.
  • the target cross-platform engine instance is generated based on related custom code, that is, the target cross-platform engine instance is a custom cross-platform engine instance, compared to the time required to initialize the default cross-platform engine instance , custom cross-platform engine instances take longer to initialize. Therefore, when the custom cross-platform engine instance is initialized, the startup page (the startup page shown in (a) in FIG. A preset page (the homepage as shown in (c) in Figure 9, that is, the login page) has not been rendered yet, and a blank page appears for a certain period of time (the blank page as shown in (b) in Figure 9), which greatly affects users experience.
  • the first preset page (ie the home page), the second preset page (ie the startup page) and the third preset page are all saved to the target application, and the corresponding positions in the installation package corresponding to the target application are also That is, the display information (for example, a display picture) corresponding to the first preset page is stored in the first preset location in the installation package, and the display information corresponding to the second preset page is stored in the second preset location in the installation package. , the display information corresponding to the third preset page is saved in the third preset location in the installation package.
  • the corresponding preset page needs to be loaded that is, when the display information corresponding to the corresponding preset page needs to be loaded, it is obtained from the corresponding preset position based on a related loading method, ie, a function.
  • a relevant loading method is called to acquire the display information from the third preset location and display it.
  • the first preset position, the second preset position, and the third preset position can be set according to requirements, which are not limited here.
  • the display information corresponding to the second preset page stored in the second preset location is saved to a specific location in the mobile terminal, so that the native layer can be used later. Get the display information from that specific location.
  • the third preset page enables the mobile terminal to display the third preset page, avoiding displaying a blank page, thereby preventing the user from having doubts about the white screen and ensuring user experience.
  • the display content of the third preset page is the same as that of the second preset page.
  • the display content of the third preset page may be the same as that of the second preset page, that is, when the target cross-platform engine instance is initialized, it may be displayed on the top window of the mobile terminal, That is, the same picture as the startup page is displayed on the top layer of the currently displayed page, so that the user sees the same content as the startup page, and realizes non-inductive switching.
  • the third preset page needs to be removed. Therefore, whether the third preset page can be removed can be determined based on the following two methods.
  • One way is to remove the third preset page in response to displaying the first preset page.
  • the target cross-platform engine instance when the first preset page needs to be displayed, it indicates that the target cross-platform engine instance has been initialized, and the target cross-platform engine instance can be used to load the first preset page, so there is no need to continue to display the third preset page, thereby moving Excluding the third preset page means removing the same picture displayed on the current page as the startup page, so as not to affect the display of the first preset page.
  • Another way is to remove the third preset page in response to reaching the target display time corresponding to the third preset page, where the target display time represents the total duration of displaying the third preset page.
  • the third preset page acquires the display time corresponding to the third preset page, start counting from the display of the third preset page, to obtain the current display time, and determine that the current display time is greater than or equal to the target display time corresponding to the third preset page
  • the third preset page is removed to avoid affecting the display of the first preset page.
  • the target display time can be set according to actual requirements, for example, the target display time is 1.5 seconds.
  • the target display time may be stored in a designated location corresponding to the target application, for example, the target display time exists in a loading method related to loading the third preset page.
  • Step 802 in response to the first trigger operation in the target application program, obtain from the memory the target cross-platform engine instance pre-built through the custom operation, the first trigger operation is used to request to jump from the native page of the target application program to Target cross-platform pages.
  • Step 803 based on the target cross-platform engine instance, load the target cross-platform page.
  • a transitional page that is, the third preset page is displayed, To avoid the white screen problem.
  • the first preset page can be displayed, stop displaying the third preset page, and realize the normal display of the first preset page, thereby making it possible to successfully transition to the first preset page, ensuring the user's senseless experience, and improving the user experience. Use satisfaction.
  • the present application also provides embodiments of a page display device and a terminal to which it is applied.
  • Embodiments of the page display device of the present application can be applied to mobile terminals, such as mobile phones, tablet computers, and the like.
  • the device embodiments can be implemented by software, or by hardware or a combination of software and hardware. Taking software implementation as an example, as a device in a logical sense, it is formed by reading the corresponding computer program instructions in the non-volatile memory into the memory for execution by the processor where it is located.
  • FIG. 10 it is a hardware structure diagram of a mobile terminal where the page display device of the embodiment of the present application is located, except for the processor 1010, memory 1030, network interface 1020, and non-easy
  • the mobile terminal in which the page display device 1031 is located in the embodiment may generally include other hardware according to the actual functions of the mobile terminal, which will not be repeated here.
  • FIG. 11 is a block diagram of a page display device according to an exemplary embodiment of the present application, and the device includes:
  • the instance acquiring module 1110 is configured to acquire a target cross-platform engine instance pre-built through a custom operation from the memory in response to a first trigger operation in the target application, the first trigger operation is used to request a native engine instance from the target application The page jumps to the target cross-platform page.
  • the page display module 1120 is configured to load the target cross-platform page based on the target cross-platform engine instance.
  • the target cross-platform engine instance includes a target Flutter engine instance.
  • the page display device further includes an example building block.
  • Instance building blocks are used specifically for:
  • the cross-platform engine instance is constructed by the custom operation in response to the start operation of the target application Target cross-platform engine instance.
  • the instance obtaining module 1110 is specifically used to:
  • the global variable corresponding to the target cross-platform engine instance is acquired from the memory, and the target cross-platform engine instance is determined from the memory based on the global variable, wherein the global variable is defined when the target cross-platform engine instance is constructed.
  • the instance building block is also used for:
  • a first preset page corresponding to the target application is displayed, wherein the first preset page is a homepage corresponding to the target application.
  • the instance building block is also used for:
  • a second preset page corresponding to the target application is displayed.
  • the second preset page is a startup page corresponding to the target application program.
  • the instance building block is also used for:
  • the page display device further includes a page processing module.
  • the page processing module is specifically used for:
  • the page processing module is also used for:
  • the third preset page is removed.
  • the display content of the third preset page is the same as that of the second preset page.
  • the present application also provides a mobile terminal, the terminal includes a processor; a memory for storing instructions executable by the processor; wherein the processor is configured to:
  • the first trigger operation is used to request a jump from a native page of the target application to the target cross-platform page;
  • An embodiment of the present application provides a computer-readable storage medium, in which computer program code is stored, and the above method steps are implemented when the computer program code is executed by a processor.
  • An embodiment of the present application further provides a computer program product, including a computer program, and when the computer program is executed by a processor, the above method steps are implemented.
  • the device embodiment since it basically corresponds to the method embodiment, for related parts, please refer to the part description of the method embodiment.
  • the device embodiments described above are only illustrative, and the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in One place, or it can be distributed to multiple network elements. Part or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. It can be understood and implemented by those skilled in the art without creative effort.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

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*)[UlApplication sharedApplication].delegate；
FlutterEngine*engine＝[ad getFlutterEngine]；
engine.viewController＝nil；
/*
用缓存的Engine，即目标跨平台引擎实例初始化新的Flutter页面
*/
FlutterViewController*flutterController＝[[FlutterViewController alloc]initWithEngine:engine nibName:nil bundle:nil]；
flutterController.fd prefersNavigationBarHidden＝YES；
[self.navigationController pushViewController:flutterController animated: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. 一种移动终端，其特征在于，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现如下方法：
    响应于在目标应用程序中的第一触发操作，从内存中获取预先通过自定义操作构建的目标跨平台引擎实例，所述第一触发操作用于请求从所述目标应用程序的原生页面跳转至目标跨平台页面；
    基于所述目标跨平台引擎实例，加载所述目标跨平台页面。
PCT/CN2022/120091 2021-11-19 2022-09-21 页面显示方法及装置 WO2023087897A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202111401266.3A CN114116056A (zh) 2021-11-19 2021-11-19 页面显示方法及装置
CN202111401266.3 2021-11-19

Publications (1)

Publication Number Publication Date
WO2023087897A1 true WO2023087897A1 (zh) 2023-05-25

Family

ID=80440868

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/120091 WO2023087897A1 (zh) 2021-11-19 2022-09-21 页面显示方法及装置

Country Status (2)

Country Link
CN (1) CN114116056A (zh)
WO (1) WO2023087897A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116795356A (zh) * 2023-08-21 2023-09-22 山东为农信息科技有限公司 Flutter与原生平台的混合开发方法、系统及装置
CN118051294A (zh) * 2024-04-16 2024-05-17 湖南兴盛优选网络科技有限公司 一种基于Flutter的移动端混合页面的管理方法

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114116056A (zh) * 2021-11-19 2022-03-01 京东方科技集团股份有限公司 页面显示方法及装置
CN114741127B (zh) * 2022-03-15 2024-04-09 北京贝壳时代网络科技有限公司 小程序控制方法及装置
CN115079923B (zh) * 2022-06-17 2023-11-07 北京新唐思创教育科技有限公司 事件处理方法、装置、设备及介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112417337A (zh) * 2020-11-27 2021-02-26 贝壳技术有限公司 页面跳转的实现方法、装置、电子设备及存储介质
CN112905933A (zh) * 2021-01-29 2021-06-04 挂号网（杭州）科技有限公司 页面跳转方法、装置、电子设备及存储介质
CN113641594A (zh) * 2021-10-15 2021-11-12 杭州涂鸦信息技术有限公司 跨端自动化测试方法以及相关装置
CN114116056A (zh) * 2021-11-19 2022-03-01 京东方科技集团股份有限公司 页面显示方法及装置

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105224363B (zh) * 2015-09-23 2019-04-05 北京金山安全软件有限公司 一种加载应用程序的方法及装置
WO2020087230A1 (zh) * 2018-10-29 2020-05-07 深圳市欢太科技有限公司 游戏页面的显示方法及相关产品
CN110708602B (zh) * 2019-10-15 2022-08-19 北京字节跳动网络技术有限公司 视频启动方法、装置、电子设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112417337A (zh) * 2020-11-27 2021-02-26 贝壳技术有限公司 页面跳转的实现方法、装置、电子设备及存储介质
CN112905933A (zh) * 2021-01-29 2021-06-04 挂号网（杭州）科技有限公司 页面跳转方法、装置、电子设备及存储介质
CN113641594A (zh) * 2021-10-15 2021-11-12 杭州涂鸦信息技术有限公司 跨端自动化测试方法以及相关装置
CN114116056A (zh) * 2021-11-19 2022-03-01 京东方科技集团股份有限公司 页面显示方法及装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
ANONYMOUS: "Flutter Hybrid Stack Routing Practice and Optimization", 23 March 2021 (2021-03-23), pages 1 - 5, Retrieved from the Internet <URL:https://new.qq.com/rain/a/20210323a0ah6h00> *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116795356A (zh) * 2023-08-21 2023-09-22 山东为农信息科技有限公司 Flutter与原生平台的混合开发方法、系统及装置
CN116795356B (zh) * 2023-08-21 2023-11-24 山东为农信息科技有限公司 Flutter与原生平台的混合开发方法、系统及装置
CN118051294A (zh) * 2024-04-16 2024-05-17 湖南兴盛优选网络科技有限公司 一种基于Flutter的移动端混合页面的管理方法

Also Published As

Publication number Publication date
CN114116056A (zh) 2022-03-01

Similar Documents

Publication Publication Date Title
WO2023087897A1 (zh) 页面显示方法及装置
US10877826B2 (en) Message processing method and apparatus, storage medium, and computer device
CN111026396B (zh) 页面渲染方法、装置、电子设备及存储介质
CN107831974B (zh) 信息分享方法、装置及存储介质
RU2599541C2 (ru) Расширяемое системное действие для осуществления совместного использования, оставаясь при этом в текущем контексте в фоновом режиме
CN108496198B (zh) 一种图像处理方法及设备
US20140208326A1 (en) File presenting method and apparatus for a smart terminal
AU2021229220B2 (en) Image processing method and device
WO2016107465A1 (zh) 一种卡片式桌面的实现方法、装置和系统
US11314391B2 (en) Navigation bar controlling method and terminal
WO2020206691A1 (zh) 应用程序的处理方法、装置、存储介质及电子设备
CN110874217A (zh) 快应用的界面显示方法、装置及存储介质
CN110297624B (zh) 基于electron框架的Widget系统的实现方法及采用该系统的电视机
CN111338829B (zh) 远程过程调用服务的调用方法及装置
CN110971974B (zh) 配置参数创建方法、装置、终端及存储介质
CN110286954B (zh) 一种应用程序的启动方法、装置及存储介质
US11194598B2 (en) Information display method, terminal and storage medium
CN114035865A (zh) 启动小程序的方法、装置、设备以及存储介质
CN114090118B (zh) 启动小程序的方法、装置、设备以及存储介质
CN113220296B (zh) 安卓系统交互方法及装置
CN111008050B (zh) 页面任务执行方法、装置、终端及存储介质
KR20230086770A (ko) 촬영 방법, 촬영 장치, 전자 기기 및 판독 가능한 저장매체
CN114185845A (zh) 一种文件管理方法、装置、计算机设备及存储介质
WO2023030297A1 (zh) 组件处理方法、装置、电子设备、存储介质和产品
CN116881537A (zh) 网页页面开发方法、装置、终端设备及介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22894435

Country of ref document: EP

Kind code of ref document: A1