H5 page immersion navigation bar adaptation method and system

Abstract

The application provides a H5 page immersion navigation bar adaptation method and system. When a native application module on a device loads a H5 page, the height of a device status bar is added to a uniform resource locator. A H5 module parses the uniform resource locator to obtain the height of the status bar, and the actual height of a navigation bar is rendered when the H5 page is displayed according to the height of the status bar. Compared with the traditional H5 page which displays a default navigation bar height and then renders the navigation bar after obtaining the height of the device status bar through interaction, the actual height of the navigation bar is obtained, the navigation bar is rendered according to the actual height, the interactive communication process of the H5 page and the device is reduced, shaking and flickering during rendering is avoided, and user experience is improved.

Description

Technical Field

[0001] This invention relates to the field of mobile terminal development technology, and in particular to a method and system for adapting an immersive navigation bar based on an H5 page. Background Technology

[0002] In hybrid development models, a key factor in adapting immersive navigation for H5 pages is the device's status bar height. However, different models, sizes, and resolutions of devices correspond to different status bar heights. Typically, H5 obtains the device's status bar height through interactive methods and adapts the navigation bar rendering accordingly. Communication between H5 and the native app involves three existing technical solutions: JavaScript Bridge, URL Scheme, and Native SDK. Obtaining the status bar height using these three methods is a time-consuming process. Before obtaining the status bar height, the navigation bar displays a default height. After obtaining the device's status bar height, the actual navigation bar height is rendered. During this short period, a jittering or flickering phenomenon occurs, affecting the user experience. Summary of the Invention

[0003] To address the aforementioned issues, this invention provides a method and system for adapting an immersive navigation bar on an H5 page, aiming to resolve the jitter and flickering problems that occur during the rendering process of adapting the H5 navigation bar.

[0004] A method for adapting an immersive navigation bar on an H5 page includes:

[0005] Step A1: When the native application module on the device loads the H5 page, add the height of the device status bar to the Uniform Resource Locator.

[0006] Step A2: The H5 module parses the Uniform Resource Locator to obtain the height of the status bar;

[0007] In step A3, when the H5 module displays the H5 page based on the height of the status bar, it renders the actual height of the navigation bar.

[0008] Furthermore, in step A1, the native application module adds the height of the status bar as a parameter to the query string of the Uniform Resource Locator.

[0009] Furthermore, the navigation bar is located below the status bar.

[0010] Furthermore, in step A3, the H5 module renders the sum of the status bar height and the default navigation bar height as the actual height of the navigation bar.

[0011] An H5-based immersive navigation bar adaptation system, characterized in that it includes a method for performing the aforementioned H5-based immersive navigation bar adaptation, comprising:

[0012] The information addition module is used to add the height of the device status bar to the Uniform Resource Locator when the native application module loads the H5 page;

[0013] The H5 module is used to: parse the Uniform Resource Locator (URL), obtain the height of the status bar, and render the actual height of the navigation bar on the device when displaying the H5 page based on the status bar height.

[0014] Furthermore, in step A1, the native application module adds the height of the status bar as a parameter to the query string of the Uniform Resource Locator.

[0015] Furthermore, the rendered navigation bar is located below the status bar.

[0016] Furthermore, the H5 module renders the actual height of the navigation bar as the sum of the status bar's height and the navigation bar's default height.

[0017] The beneficial technical effects of this invention are as follows: Compared with traditional H5 pages that first display the default navigation bar height and then obtain the device status bar height through interaction before rendering, this invention adds the status bar height parameter to the URL when loading the H5 page. The H5 page parses the status bar height in the URL, then obtains the actual height of the navigation bar, and renders the navigation bar according to the actual height. This reduces the interaction and communication process between the H5 page and the device, avoids jitter and flickering during rendering, and improves the user experience. Attached Figure Description

[0018] Figure 1 This is a flowchart illustrating the steps of an immersive navigation bar adaptation method based on an H5 page according to the present invention.

[0019] Figure 2-3 This is a schematic diagram illustrating the navigation bar adaptation process in existing technologies.

[0020] Figure 4 This is a schematic diagram illustrating the actual height calculated according to the present invention. Detailed Implementation

[0021] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0022] It should be noted that, unless otherwise specified, the embodiments and features described in the present invention can be combined with each other.

[0023] The present invention will be further described below with reference to the accompanying drawings and specific embodiments, but this is not intended to limit the scope of the invention.

[0024] See Figure 1 This invention provides a method for adapting an immersive navigation bar based on an H5 page, comprising:

[0025] Step A1: When the native application module on the device loads the H5 page, add the height of the device status bar to the Uniform Resource Locator URL;

[0026] Step A2: The H5 module parses the Uniform Resource Locator to obtain the height of the status bar;

[0027] In step A3, when the H5 module displays the H5 page based on the height of the status bar, it renders the actual height of the navigation bar.

[0028] Compared to traditional H5 pages that first display the default navigation bar height and then obtain the device status bar height through interaction before rendering, this invention adds the status bar height parameter to the URL when loading the H5 page. The H5 page parses the status bar height from the URL, obtains the actual height of the navigation bar, and renders the navigation bar based on the actual height. This reduces the interaction and communication process between the H5 page and the device, avoids jitter and flickering during rendering, and improves the user experience. Furthermore, in step A1, the native application module adds the status bar height as a parameter to the query string of the Uniform Resource Locator (URL).

[0029] To add the device status bar height (statusBarHeight) as a parameter to the URL query string, you can add a parameter named "statusBarHeight" to the query parameters of the URL, with the value being the height of the device status bar. For example, the URL could be in the form of: http: / / example.com / h5page?statusBarHeight=XXX, where XXX represents the actual height of the device status bar.

[0030] Furthermore, the navigation bar is located below the status bar.

[0031] Furthermore, in step A3, the H5 module renders the sum of the status bar height and the default navigation bar height as the actual height of the navigation bar.

[0032] In this invention, the device status bar is system-level, displaying information about the device status (such as battery level, signal strength, etc.).

[0033] The default height of the navigation bar refers to the height of the navigation bar itself on the H5 page. Due to the existence of the device status bar, the navigation bar in an immersive H5 page needs to adapt to the height of the device status bar to ensure correct display. Therefore, the actual height of the navigation bar needs to be the sum of the height of the device status bar and the default height of the navigation bar. Figure 2-3 As shown, according to the existing technology, in Figure 2 In some H5 modules, when rendering the navigation bar, if the height of the device's status bar is not obtained, the default rendering may result in the navigation bar overlapping the status bar, causing it to display incorrectly. This indicates a lack of device adaptation. By interacting with the device and obtaining the status bar height before rendering the page, device adaptation is achieved. Figure 3 As shown, this process can result in flickering and other issues, leading to a poor user experience. This invention directly obtains the device status bar height before rendering the page, and combines this with the default height of the H5 page's navigation bar and the status bar height to determine the actual height of the navigation bar. The actual height of the navigation bar is then displayed during rendering, reducing interaction with the device and eliminating the need to re-adapt the navigation bar height. This reduces time and resource consumption, and eliminates flickering and other issues, significantly improving the user experience.

[0034] See Figure 4 Assuming the height of the device status bar is H1 and the default height of the navigation bar is H2, the actual height of the navigation bar is calculated to be H3, where H3 = H1 + H2.

[0035] Specifically, in step A2, the H5 module can use existing URL parsing methods or a custom parsing method.

[0036] Specifically, the native application of this invention is a mobile application, such as Android and iOS applications.

[0037] This invention also provides an H5-based immersive navigation bar adaptation system, used to execute the aforementioned H5-based immersive navigation bar adaptation method, including:

[0038] The information addition module is used to add the height of the device status bar to the Uniform Resource Locator when the native application module loads the H5 page;

[0039] The H5 module is used to: parse the Uniform Resource Locator (URL), obtain the height of the status bar, and render the actual height of the navigation bar on the device when displaying the H5 page based on the status bar height.

[0040] Furthermore, in step A1, the native application module adds the height of the status bar as a parameter to the query string of the Uniform Resource Locator.

[0041] Furthermore, the rendered navigation bar is located below the status bar.

[0042] Furthermore, the H5 module renders the actual height of the navigation bar as the sum of the status bar's height and the navigation bar's default height.

[0043] The above are merely preferred embodiments of the present invention and are not intended to limit the implementation methods and protection scope of the present invention. Those skilled in the art should recognize that any equivalent substitutions and obvious changes made based on the description and illustrations of the present invention should be included within the protection scope of the present invention.

Claims

1. A method for adapting an immersive navigation bar based on an H5 page, characterized in that, include: Step A1: When the native application module on the device loads the H5 page, add the height of the device status bar to the Uniform Resource Locator. Step A2: The H5 module parses the Uniform Resource Locator to obtain the height of the status bar; Step A3: When the H5 module displays the H5 page according to the height of the status bar, it adapts to the actual height of the navigation bar.

2. The method for adapting an immersive navigation bar based on an H5 page as described in claim 1, characterized in that, In step A1, the native application module adds the height of the status bar as a parameter to the query string of the Uniform Resource Locator.

3. The method for adapting an immersive navigation bar based on an H5 page as described in claim 1, characterized in that, The navigation bar is located below the status bar.

4. The method for adapting an immersive navigation bar based on an H5 page as described in claim 3, characterized in that, In step A3, the H5 module renders the actual height of the navigation bar as the sum of the height of the status bar and the default height of the navigation bar.

5. A navigation bar adaptation system based on H5 pages, characterized in that, A method for implementing an immersive navigation bar adaptation method based on an H5 page as described in any one of claims 1-4, comprising: The information addition module is used to add the height of the device status bar to the Uniform Resource Locator when the native application module loads the H5 page; The H5 module is used to: parse the Uniform Resource Locator to obtain the height of the status bar, and render the actual height of the navigation bar on the device when displaying the H5 page based on the height of the status bar.

6. The immersive navigation bar adaptation system based on H5 pages as described in claim 5, characterized in that, In step A1, the native application module adds the height of the status bar as a parameter to the query string of the Uniform Resource Locator.

7. The H5-based immersive navigation bar adaptation system as described in claim 6, characterized in that, After rendering, the navigation bar is located below the status bar.

8. The immersive navigation bar adaptation system based on H5 pages as described in claim 7, characterized in that, The H5 module renders the actual height of the navigation bar as the sum of the height of the status bar and the default height of the navigation bar.

Images