A method and device for configuring multi-page display in a mobile web container

Abstract

The present invention relates to the field of computer technology and specifically provides a method and device for configuring a multi-page display in a mobile web container. The method and device include a ContainerModel, TaskStackManagement, and EventManagement. The ContainerModel interacts with TaskStackManagement and EventManagement, respectively. The ContainerModel includes a ModelLoader, a Global Variable, an LRUCache, a Container Renderer, an InjectComponents, a MessageReceiver, and a NativeAPI. In TaskStackManagement, when multiple pages are loaded in a container, each container only has one foreground page, with the remaining pages in the background. In EventManagement, pages are refreshed and loaded when moving forward or backward. Compared with existing technologies, the present invention can achieve a smooth page switching experience, allowing users to experience an operating experience close to that of a native app.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and specifically provides a method and device for configuring a mobile terminal Web container to display multiple pages. Background Art

[0002] With the rapid development of mobile internet technology, the application scenarios of H5 (HTML5) technology in mobile applications are continuously expanding, gradually becoming a driving force for innovation in many fields. Furthermore, the widespread adoption of 5G networks and the improvement of hardware device performance will further unleash the potential of H5 technology. One of the greatest advantages of web applications is their cross-platform compatibility. Through modern browsers, web applications can run on different operating systems and devices, including Windows, macOS, iOS, and Android, without the need for separate development for each platform. This "develop once, run anywhere" feature significantly reduces development and maintenance costs. Furthermore, web applications do not require users to download and install; users can simply access them through a browser. This approach avoids the cumbersome approval process of app stores and also saves users' storage space and device resources.

[0003] However, as businesses evolve, H5 applications are moving beyond basic web page display to incorporate more complex business logic, striving to provide a user experience similar to native apps. Technically, a single-page application (SPA) architecture can be used, enabling H5 applications to dynamically update content as users interact with the application without reloading the entire page. This approach avoids the latency associated with traditional page loads, resulting in a smoother user experience. However, this approach is only suitable for new business development, and the application must be placed within a single HTML project. Dynamic, non-refresh updates and messaging between legacy applications and multiple HTML pages are not possible. Pages can only be reloaded when moving forward or backward, significantly inferior to the user experience of native apps. Summary of the Invention

[0004] The present invention aims to address the above-mentioned deficiencies in the prior art and provides a highly practical method for configuring a multi-page display in a mobile terminal Web container.

[0005] A further technical task of the present invention is to provide a multi-page display device configured for a mobile terminal Web container that is rationally designed, safe and applicable.

[0006] The technical solution adopted by the present invention to solve its technical problem is:

[0007] A method for configuring a multi-page display in a mobile web container includes a ContainerModel, a TaskStackManagement, and an EventManagement, wherein the ContainerModel interacts with the TaskStackManagement and the EventManagement respectively;

[0008] The ContainerModel includes ModelLoader, Global Variable, LRUCache, ContainerRender, InjectComponents, MessageReceiver and NativeAPI;

[0009] In the TaskStackManagement, when multiple pages are loaded into a container, they are stacked according to the first-in, last-out algorithm. The last page stacked is at the top. That is, each container only has one foreground page, and the rest are in the background.

[0010] Each independent HTML page in the EventManagement cannot coexist in the browser, that is, the page will be refreshed and loaded when moving forward or backward.

[0011] Furthermore, the ModelLoader is used to load initialization data and environment information into the container, including the creation of all variables, initialization of the cache pool, initialization of the page layout and interactive animation, and initialization of the message receiver;

[0012] The Global Variable includes initialization of some basic parameters and provides context variables for the web pages in the container.

[0013] Furthermore, when the LRUCache reaches a threshold, it will unload the least frequently used web pages according to the least recently used algorithm (LRU), so that the pages are maintained in a relatively stable range.

[0014] The Container Render includes page layout rendering and interactive animation rendering. Each WebView can only display one page. When multiple pages coexist, the display and hiding are controlled by the display property, and each page is mounted on the root Dom.

[0015] Unified pop-up windows and authorizations generally maintain a unified style. LayoutRender has two functions: one is to layout the display position of each page, and the other is to encapsulate unified components and provide them to sub-pages for calling. There is generally a transition animation when switching pages, and Animation Render is used to render the transition animation.

[0016] Furthermore, the InjectComponents will maintain some unified components to maintain UI consistency, and can also inject some components into sub-pages to facilitate monitoring and interface problem location;

[0017] The NativeAPI encapsulates some APIs that interface with the host, allowing its sub-applications to easily access the host hardware capabilities.

[0018] Furthermore, the MessageReceiver is a bridge for information communication between pages. Two independent HTML pages cannot communicate directly. When a page is placed inside a WEB container, it exists in the form of an iframe tag. The iframe instance is obtained through the window global variable, and the postMessage API is used to communicate with the container host. The MessageReceiver supports message registration and message forwarding.

[0019] In addition to forwarding messages, Message Receive also handles message registration, destruction, and routing table maintenance.

[0020] Furthermore, in TaskStackManagement, each page will execute the onCreate, onStart and onResume life cycles when it is created, and the onStop and onDestroy life cycles when it is destroyed; when the current page is destroyed, the previous page will enter the foreground.

[0021] Furthermore, in EventManagement, each independent HTML page cannot coexist in the browser, that is, the page will be refreshed and loaded when moving forward or backward;

[0022] If HTML pages are loaded in a container, although each page is independent of each other, they all communicate with the host container. The postMessage method provided by the HTML5 specification can be used to achieve cross-domain communication between the child page and the host container; with the help of the host's capabilities, mutual communication between pages can be achieved.

[0023] A mobile terminal web container configuration multi-page display device, comprising: at least one memory and at least one processor;

[0024] The at least one memory is configured to store a machine-readable program;

[0025] The at least one processor is configured to call the machine-readable program to execute a method for configuring a mobile terminal Web container to display multiple pages.

[0026] Compared with the prior art, the method and device for configuring a multi-page display in a mobile web container of the present invention have the following outstanding beneficial effects:

[0027] By controlling the display and hiding of pages, the present invention can simulate the multi-page task stack in the native APP, achieve a smooth page switching experience, and allow users to experience an operating experience close to that of the native APP.

[0028] Because the page is loaded independently, when the page needs to be switched, only the corresponding <iframe>There is no need to reload the entire application or page resources, resulting in faster response and a smoother experience.

[0029] Support multi-tasking management and page status persistence.<iframe> The state of the page is retained when it is hidden. Users can switch between different pages without losing the previous operation state. Users can easily switch tasks and view the content of different pages, which enhances the usability and operation experience of the application.

[0030] This approach is based on Web technology, can run on all modern browsers, has good cross-platform compatibility, and is not dependent on a specific operating system or device type. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0032] Figure 1 attached is a schematic flowchart of a method for configuring multi-page display in a mobile web container;

[0033] Figure 2 attached is a schematic framework diagram of ContainerModel in a method for configuring multi-page display in a mobile web container;

[0034] Figure 3 attached is a schematic framework diagram of TaskStackManagement in a method for configuring multi-page display in a mobile web container;

[0035] Figure 4 attached is a schematic framework diagram of EventManagement in a method for configuring multi-page display in a mobile web container. Specific implementation mode

[0036] In order to enable those skilled in the art to better understand the solution of the present invention, the present invention will be further described in detail below in conjunction with specific implementation modes. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts fall within the scope of protection of the present invention.

[0037] The following presents a best embodiment:

[0038] As shown in Figure 1, a method for configuring multi-page display in a mobile Web container in this embodiment includes ContainerModel, TaskStackManagement, and EventManagement, and ContainerModel interacts with TaskStackManagement and EventManagement respectively.

[0039] As shown in Figure 2, ContainerModel (container model):

[0040] It includes ModelLoader, Global Variable, LRUCache, ContainerRender, InjectComponents, MessageReceiver, and NativeAPI;

[0041] ModelLoader: A module loader for the container to load initialization data and environment information, including the creation of all variables, the initialization of the cache pool, the initialization of page layout and interaction animations, the initialization of the message receiver, etc.

[0042] Global Variable: Global variables, including the initialization of some basic parameters, providing context variables for the web pages in the container.

[0043] LRUCache: An LRU cache pool. Considering performance, it is impossible to create pages in the container without limit. When the threshold is reached, the least recently used WEB page will be unloaded according to the least recently used algorithm (LRU) to keep the number of pages within a relatively stable range.

[0044] Container Render: The core rendering module, including page layout rendering and interactive animation rendering. Each WebView can only display one page. When multiple pages coexist, the display attribute controls display and hiding. Each page is mounted on the root DOM. Unified pop-up windows and authorization generally maintain a unified style. LayoutRender has two functions: one is to layout the display position of each page, and the other is to encapsulate unified components and provide them to sub-page calls. There is generally a transition animation when switching between pages. Animation Render is mainly used to render transition animations.

[0045] InjectComponents: The container maintains some unified components, similar to toast pop-ups and dialogs in apps, to maintain UI consistency. It can also inject some components, such as monitoring information components, into sub-pages to facilitate monitoring of the entire system and locating interface problems.

[0046] MessageReceiver: A message receiver that bridges information communication between pages. Two independent HTML pages cannot communicate directly. When a page is placed inside a WEB container, it exists in the form of an iframe tag. The iframe instance can be obtained through the window global variable. The postMessage API can be used to communicate with the container host. MessageReceiver supports message registration and message forwarding.

[0047] For example, a page registers a message listener, and refreshes the content update interface after receiving a message callback. At this time, page A internally calls page B, and page B wants to send a message to A. It internally calls the method of sending a message to MessageReceiver. MessageReceiver parses the content, determines which page the message is sent to, and queries the routing table maintained internally. If the corresponding page is found, the message will be forwarded. At this time, the status of page A is maintained by the container model, and the instance still exists. After receiving the event callback, the update operation will be executed immediately without refreshing the entire page.

[0048] Message Receive is responsible for message forwarding, message registration, and destruction. The routing table is also maintained by this module, and the specific implementation details are not repeated here.

[0049] NativeAPI: Packages some APIs that interface with the host, such as the mobile terminal obtaining location information, obtaining album content, obtaining camera, scanning code, etc., so that its sub-applications can easily access the host hardware capabilities.

[0050] As shown in Figure 3, for TaskStackManagement, task stack management, when multiple pages are loaded in a container, they will be stacked according to the last-in-first-out algorithm. The last page to be stacked is on the top layer, that is, there will be only one foreground page in each container, and the rest of the pages are in the background. When each page is created, the onCreate, onStart, and onResume life cycles will be executed, and when destroyed, the onStop and onDestroy life cycles will be executed; when the current page is destroyed, the previous page will enter the foreground.

[0051] For page stacking and unstacking, it is also possible to stack and unstack multiple pages continuously. The adaptation for various scenarios is all done in the current module, and the specific implementation will not be elaborated here.

[0052] As shown in Figure 4, for EventManagement, each independent HTML page cannot coexist in the browser, that is, the page will be refreshed and loaded again when moving forward or backward. If the HTML page is loaded in a container, although each page is independent of each other, they can all communicate with the host container.

[0053] The invention can achieve cross-domain communication between the sub-page and the host container through the postMessage method provided by the HTML5 specification; with the help of the capabilities of the host, it can achieve mutual communication between pages; as shown in Figure 4, the page and the EventManagement module communicate through the bridge, and its core implementation is based on the postMessage method.

[0054] Based on the above method, a mobile terminal web container configuration multi-page display device in this embodiment includes: at least one memory and at least one processor;

[0055] The at least one memory is used to store a machine-readable program;

[0056] The at least one processor is used to call the machine-readable program to execute a method for configuring a mobile terminal web container to display multiple pages.

[0057] The above specific embodiments are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above specific embodiments. Any technical solution recorded in the above specific embodiments of the present invention and any appropriate changes or replacements made by ordinary technicians in the technical field should fall within the patent protection scope of the present invention. Although the embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to these embodiments without departing from the principles and spirit of the present invention , and that the scope of the present invention is defined by the appended claims and their equivalents.< / iframe>

Claims

1. A method for configuring a multi-page display in a mobile web container, characterized in that: Includes ContainerModel, TaskStackManagement and EventManagement, and the ContainerModel interacts with TaskStackManagement and EventManagement respectively; The ContainerModel includes ModelLoader, Global Variable, LRUCache, ContainerRender, InjectComponents, MessageReceiver and NativeAPI; In the TaskStackManagement, when multiple pages are loaded into a container, they are stacked according to the first-in, last-out algorithm. The last page stacked is at the top. That is, each container only has one foreground page, and the rest are in the background. Each independent HTML page in the EventManagement cannot coexist in the browser, that is, the page will be refreshed and loaded when moving forward or backward; The ModelLoader is used to load initialization data and environment information in the container, including the creation of all variables, initialization of the cache pool, initialization of page layout and interactive animation, and initialization of message receivers; The Global Variable contains some basic parameter initializations, providing context variables for the web pages in the container; In TaskStackManagement, each page will execute the onCreate, onStart and onResume lifecycles when it is created, and the onStop and onDestroy lifecycles when it is destroyed; when the current page is destroyed, the previous page will enter the foreground; In EventManagement, each independent HTML page cannot coexist in the browser, that is, the page will be refreshed and loaded when moving forward or backward; If HTML pages are loaded in a container, although each page is independent of each other, they all communicate with the host container. The postMessage method provided by the HTML5 specification can be used to achieve cross-domain communication between the child page and the host container; with the help of the host's capabilities, mutual communication between pages can be achieved.

2. A method for configuring a mobile terminal web container to display multiple pages according to claim 1, characterized in that: When the LRUCache reaches the threshold, it will unload the least frequently used web pages according to the least recently used algorithm LRU, so that the pages are maintained in a relatively stable range; The Container Render includes page layout rendering and interactive animation rendering. Each WebView can only display one page. When multiple pages coexist, the display and hiding are controlled by the display property, and each page is mounted on the root Dom. Unified pop-up windows and authorization will maintain a unified style. LayoutRender has two functions: one is to layout the display position of each page, and the other is to encapsulate unified components and provide them to sub-pages for calling. There will be a transition animation when the page is switched. AnimationRender is used to render the transition animation.

3. A method for configuring a mobile terminal web container to display multiple pages according to claim 2, characterized in that: The InjectComponents will maintain some unified components internally to maintain UI consistency. At the same time, it can also inject some components into the sub-pages to facilitate monitoring and interface problem location; The NativeAPI encapsulates some APIs that interface with the host, allowing its sub-applications to easily access the host hardware capabilities.

4. A method for configuring a mobile terminal web container to display multiple pages according to claim 3, characterized in that: The MessageReceiver is a bridge for information communication between pages. Two independent HTML pages cannot communicate directly. When a page is placed inside a WEB container, it exists in the form of an iframe tag. The iframe instance is obtained through the window global variable, and the postMessage API is used to communicate with the container host. The MessageReceiver supports message registration and message forwarding. In addition to forwarding messages, Message Receive also handles message registration, destruction, and routing table maintenance.

5. A mobile terminal web container configuration multi-page display device, characterized in that: include: at least one memory and at least one processor; The at least one memory is configured to store a machine-readable program; The at least one processor is configured to call the machine-readable program to execute the method according to any one of claims 1 to 4.

Images