Mobile terminal Web container configuration multi-page display method and device

Abstract

The invention relates to the technical field of computers, and particularly provides a mobile terminal Web container configuration multi-page display method and device, the device comprises a Container Model, a TaskStackManagement agent and an EventManagement agent, the Container Model interacts with the TaskStackManagement agent and the EventManagement agent respectively, the Container Model interacts with the TaskStackManagement agent, and the EventManagement agent interacts with the TaskStackManagement agent and the EventManagement agent respectively. The Container Model comprises a Model Loader, a Global Variable, an LRUCache, a Container Render, an InjectCompents, a Message Receiver and a NativeAPI (Application Program Interface), and the InjectCompents, the Message Receiver and the NativeAPI are connected with the Container Model and the InjectCompents and the InjectCompents and the InjectCompents and the InjectCompents and the InjectCompents and the InjectCompents. In the TaskStackManagement, when a plurality of pages are loaded in a container, only one foreground page exists in each container, and the rest pages are in the background; when a page in the EventManagement moves forwards and backwards, the page can be refreshed again and loaded. Compared with the prior art, the method and the device have the advantages that smooth page switching experience can be realized, and a user can feel operation 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 constantly expanding, and it has gradually become a driving force for innovation in many fields. In addition, with the popularization of 5G networks and the improvement of hardware device performance, the potential of H5 technology will be further released. One of the biggest 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 everywhere" feature greatly reduces the cost of development and maintenance. In addition, Web applications do not require users to download and install, users only need to access them through a browser. This approach avoids the cumbersome approval process of the app store, while also saving users' storage space and device resources.

[0003] However, as the business develops, H5 applications not only stay at the basic web page display level, but gradually take on more complex business logic, striving to be close to native APP in user experience. In terms of technical implementation, the single-page application (SPA) architecture can be used to enable H5 applications to dynamically update content when users interact with the application without reloading the entire page. This method avoids the delay of traditional page loading and makes the user experience smoother. However, this method is only suitable for new business development, and the application needs to be placed in an HTML project. For historical applications and multi-page HTML, dynamic non-refresh updates and message communication cannot be achieved. The page can only be reloaded when the page moves forward and backward; compared with the user experience of native APP, it is far from it. Summary of the invention

[0004] The present invention aims at the above-mentioned deficiencies of the prior art and provides a highly practical method for configuring a multi-page display method for 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 reasonably 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 of a mobile terminal Web container includes ContainerModel, TaskStackManagement and EventManagement, wherein the ContainerModel interacts with TaskStackManagement and EventManagement respectively;

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

[0009] In the TaskStackManagement, when multiple pages are loaded in a container, they are stacked according to the first-in, last-out algorithm, and the last page stacked is at the top, that is, each container will only have one foreground page, and the rest of the pages 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 for container loading initialization data and environment information, 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 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;

[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 property is used to control display and hiding, 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 the page is switched. Animation Render is used to render the transition animation.

[0016] Furthermore, the InjectComponents will maintain some unified components to keep the consistency of UI, and can also inject some components into the 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, the page exists in the form of an iframe tag. The iframe instance is obtained through the window global variable, and the postMessageAPI is used to communicate with the container host. MessageReceiver supports message registration and message forwarding.

[0019] In addition to forwarding messages, Message Receive also includes 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 used to store a machine-readable program;

[0025] 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.

[0026] Compared with the prior art, the method and device for configuring multiple pages display in a mobile terminal Web container of the present invention have the following outstanding beneficial effects:

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

[0028] Because the pages are loaded independently, when the page needs to be switched, only the corresponding <iframe>That’s it, without having to reload the entire app 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 still 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 drawings required for use in the embodiments or the description of the prior art are briefly introduced below. 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 here is a schematic flowchart of a method for configuring multi-page display in a mobile web container;

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

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

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

[0036] 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 of them. 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 is 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. 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 used to load and initialize data and environment information for the container, including the creation of all variables, the initialization of the cache pool, the initialization of page layout and interaction animations, the initialization of message receivers, 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: 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 is used to control display and hiding; and each page is mounted on the root Dom. Unified pop-up windows, authorization generally maintains 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 pages, and Animation Render is mainly used for rendering transition animations.

[0045] InjectComponents: Some unified components will be maintained inside the container, similar to toast pop-up windows and Dialog in APP, to maintain the consistency of UI. At the same time, some components can also be injected into the sub-page, such as monitoring information components, to facilitate the monitoring of the entire system and the location of interface problems.

[0046] MessageReceiver: a message receiver, a bridge for information communication between pages. Two independent HTML pages cannot communicate directly. When a page is placed inside a WEB container, the page exists in the form of an iframe tag. The iframe instance can be obtained through the window global variable. With the help of the postMessage API, the container host can be used to communicate. 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 evokes page B. Page B wants to send a message to A, and internally calls a method to send 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 state 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] In addition to being responsible for message forwarding, Message Receive also includes message registration and destruction. The routing table is also maintained by this module, and the specific implementation details are not repeated here.

[0049] NativeAPI: It 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, the task stack management, when multiple pages are loaded in a container, they will be pushed onto the stack according to the last-in-first-out algorithm. The last page pushed onto the stack 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 the pushing and popping of pages, it is also possible to push and pop multiple pages continuously. The adaptation of various scenarios is all adapted 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 present 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 is possible to 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. The above specific implementations 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 implementations. Any technical solution that complies with the above specific implementations of the present invention and any appropriate changes or replacements made by ordinary technicians in the relevant technical field shall fall within the patent protection scope of the present invention.

[0058] Although 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 mobile terminal Web container to display multiple pages, characterized in that: It includes ContainerModel, TaskStackManagement and EventManagement, wherein 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 in a container, they are stacked according to the first-in, last-out algorithm, and the last page stacked is at the top, that is, each container will only have one foreground page, and the rest of the pages 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.

2. According to claim 1, a method for configuring a mobile terminal Web container to display multiple pages is characterized in that: The ModelLoader is used for container loading initialization data and environment information, including the creation of all variables, initialization of the cache pool, initialization of page layout and interactive animation, and initialization of message receivers; The GlobalVariable contains some basic parameter initializations, providing context variables for the web pages in the container.

3. A method for configuring a mobile terminal Web container to display multiple pages according to claim 2, 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 property is used to control display and hiding, and each page is mounted on the root Dom. 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 the page is switched. Animation Render is used to render the transition animation.

4. A method for configuring a mobile terminal Web container to display multiple pages according to claim 3, characterized in that: The InjectComponents will maintain some unified components to keep the consistency of UI, and 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.

5. A method for configuring a mobile terminal Web container to display multiple pages according to claim 4, 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, the page exists in the form of an iframe tag. The iframe instance is obtained through the window global variable, and the postMessageAPI is used to communicate with the container host. MessageReceiver supports message registration and message forwarding. In addition to forwarding messages, Message Receive also includes message registration, destruction, and routing table maintenance.

6. A method for configuring a mobile terminal Web container to display multiple pages according to claim 5, characterized in that: 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.

7. A method for configuring a mobile terminal Web container to display multiple pages according to claim 6, characterized in that: 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.

8. 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 used 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 7.

Images