Navigation bar rendering method, apparatus, device, and medium

By obtaining target address information and parsing display parameters during page development, and utilizing native and web development components to collaboratively render the navigation bar, the interface rendering problem caused by configuration file distribution failure was solved, achieving a highly efficient navigation bar rendering effect.

CN115840859BActive Publication Date: 2026-05-05HANGZHOU NETEASE ZAIGU TECH CO LTD
View PDF 3 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
HANGZHOU NETEASE ZAIGU TECH CO LTD
Filing Date
2022-11-01
Publication Date
2026-05-05

AI Technical Summary

Technical Problem

In existing technologies, the distribution, updating, and parsing of configuration files are prone to failure, which can lead to incorrect rendering of the interface and affect the smooth completion of interface development.

Method used

By obtaining the target address information from the initiating page and using the development component to parse the display parameters, the navigation bar is rendered directly from the target address information, avoiding the process of distributing, updating, and parsing configuration files. The navigation bar is rendered collaboratively using native and web development components.

Benefits of technology

It improves the success rate of interface rendering, ensures the correct rendering of the navigation bar in full-screen mode, and enhances the reliability of interface development.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN115840859B_ABST
    Figure CN115840859B_ABST
Patent Text Reader

Abstract

This disclosure provides a navigation bar rendering method, apparatus, device, and medium. It offers a function to add navigation bar display parameters to target address information. After obtaining the target address information through the initiating page, a development component parses the display parameters of the target address information to obtain display information. The development component then renders the navigation bar based on this display information. This eliminates the need for a separate configuration file, and thus avoids updating or parsing the configuration file. The display parameters can be directly obtained from the target address information, thereby improving the success rate of interface rendering.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The embodiments of this disclosure relate to the field of page development technology, and more specifically, the embodiments of this disclosure relate to a navigation bar rendering method, apparatus, device and medium. Background Technology

[0002] This section is intended to provide background or context for the embodiments of this disclosure as set forth in the claims. The description herein is not intended to be a prior art simply because it is included in this section.

[0003] With the development of mobile technology and the improvement of terminal device performance, the interfaces of mobile apps are becoming more and more diverse, and full-screen interfaces are appearing more and more frequently.

[0004] In related technologies, interface development is mainly achieved through Web (web page) development technology. However, interfaces developed by Web development technology by default have a native navigation bar at the top. To develop a full-screen interface, it is necessary to distribute a configuration file that can declare the navigation bar style, and then render the corresponding navigation bar style through Native (native) development technology.

[0005] However, failures may occur in the distribution, updating, and parsing of configuration files, resulting in the corresponding interface failing to render correctly, and thus preventing the interface development from being completed smoothly. Summary of the Invention

[0006] Given that failures may occur in the distribution, updating, and parsing of configuration files in related technologies, resulting in the inability to render the corresponding interface correctly, the embodiments of this disclosure provide at least one navigation bar rendering method, apparatus, device, and medium.

[0007] In a first aspect of this disclosure, a navigation bar rendering method is provided, the method comprising:

[0008] The target address information is obtained through the initiation page, which provides the input function for the target address information, including display parameters used to indicate the display style of the navigation bar.

[0009] The display parameters of the target address information are parsed by developing a component to obtain the display information;

[0010] By developing components, the navigation bar can be rendered based on the displayed information.

[0011] In some embodiments, development components include native development components and web development components;

[0012] By developing components, the navigation bar is rendered based on the displayed information, including:

[0013] By using native development components, the navigation bar is rendered based on the display information to obtain the native navigation bar;

[0014] When the display information indicates that the native navigation bar should be hidden, screen parameters and display parameters are sent to the web development component through the native development component. The screen parameters are obtained from the system configuration file.

[0015] By using web development components, the native navigation bar is rendered based on screen and display parameters to obtain the rendered navigation bar.

[0016] In some embodiments, the native navigation bar is rendered using a web development component based on screen parameters and display parameters to obtain a rendered navigation bar, including:

[0017] By using web page development components, the display parameters are parsed to obtain the display information;

[0018] When the display message indicates that the native navigation bar should be hidden, a placeholder block is generated using a web development component.

[0019] By using web development components, the native navigation bar is rendered based on screen parameters and display information to obtain the rendered navigation bar.

[0020] Using web development components, the rendered navigation bar is inserted into a placeholder block.

[0021] In some embodiments, the method further includes:

[0022] When the display message indicates that the native navigation bar should be hidden, a back control is generated using native development components. This back control is then displayed at a specified position in the navigation bar.

[0023] In some embodiments, the display parameters of the target address information are parsed by a development component to obtain display information, including:

[0024] The display parameters of the target address information are parsed using native development components to obtain the display information.

[0025] In some embodiments, the target address information is a Uniform Resource Locator (URL) address, the native development component is a Native component, and the web development component is an H5 component.

[0026] In a second aspect of this disclosure, a navigation bar rendering apparatus is provided, the apparatus comprising:

[0027] The acquisition module is used to obtain target address information through the initiation page. The initiation page provides input functionality for the target address information, which includes display parameters used to indicate the display style of the navigation bar.

[0028] The parsing module is used to parse the display parameters of the target address information through the development component to obtain the display information;

[0029] The rendering module is used to render the navigation bar based on the displayed information by developing components.

[0030] In some embodiments, development components include native development components and web development components;

[0031] The rendering module, when used to render the navigation bar based on display information through developed components, is used for:

[0032] By using native development components, the navigation bar is rendered based on the display information to obtain the native navigation bar;

[0033] When the display information indicates that the native navigation bar should be hidden, screen parameters and display parameters are sent to the web development component through the native development component. The screen parameters are obtained from the system configuration file.

[0034] By using web development components, the native navigation bar is rendered based on screen and display parameters to obtain the rendered navigation bar.

[0035] In some embodiments, when the rendering module renders the native navigation bar using web development components based on screen parameters and display parameters to obtain the rendered navigation bar, it is used to:

[0036] By using web page development components, the display parameters are parsed to obtain the display information;

[0037] When the display message indicates that the native navigation bar should be hidden, a placeholder block is generated using a web development component.

[0038] By using web development components, the native navigation bar is rendered based on screen parameters and display information to obtain the rendered navigation bar.

[0039] Using web development components, the rendered navigation bar is inserted into a placeholder block.

[0040] In some embodiments, the apparatus further includes:

[0041] The generation module is used to generate a return control using native development components when the display information indicates that the native navigation bar should be hidden. The return control is used to display at a set position in the navigation bar.

[0042] In some embodiments, when the parsing module parses the display parameters of the target address information through the development component to obtain display information, it is used for:

[0043] The display parameters of the target address information are parsed using native development components to obtain the display information.

[0044] In some embodiments, the target address information is a Uniform Resource Locator (URL) address, the native development component is a Native component, and the web development component is an H5 component.

[0045] In a third aspect of the present disclosure, a computer device is provided, the computer device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to perform the operations performed by the navigation bar rendering method provided in the first aspect and any embodiment of the first aspect.

[0046] In a fourth aspect of this disclosure, a computer-readable storage medium is provided, on which a program is stored, the program being executed by a processor as performed by the navigation bar rendering method provided in the first aspect and any embodiment of the first aspect.

[0047] In a fifth aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, performs the operations performed by the navigation bar rendering method provided in the first aspect and any embodiment of the first aspect.

[0048] This disclosure provides a function to add navigation bar display parameters to the target address information. After obtaining the target address information through the initiating page, the display parameters of the target address information are parsed by the development component to obtain the display information. Then, the navigation bar is rendered based on the display information by the development component. There is no need to separately distribute the configuration file, and there is no need to update or parse the configuration file. Instead, the display parameters can be obtained directly from the target address information, thereby improving the success rate of interface rendering. Attached Figure Description

[0049] The above and other objects, features, and advantages of this disclosure will become readily apparent from the following detailed description of exemplary embodiments, taken in conjunction with the accompanying drawings. Several embodiments of this disclosure are illustrated in the drawings by way of example and not limitation, in which:

[0050] Figure 1 This is a schematic diagram illustrating a navigation bar rendering effect according to an embodiment of the present disclosure;

[0051] Figure 2This is a flowchart illustrating a navigation bar rendering method according to an embodiment of the present disclosure;

[0052] Figure 3 This is a flowchart illustrating a native navigation bar rendering process according to an embodiment of the present disclosure;

[0053] Figure 4 This is a flowchart illustrating a navigation bar rendering process according to an embodiment of the present disclosure;

[0054] Figure 5 This is a block diagram illustrating a navigation bar rendering apparatus according to an embodiment of the present disclosure;

[0055] Figure 6 This is a schematic diagram illustrating a computer-readable storage medium according to an embodiment of the present disclosure;

[0056] Figure 7 This is a schematic diagram of the structure of a computer device according to an embodiment of the present disclosure;

[0057] In the accompanying drawings, the same or corresponding reference numerals indicate the same or corresponding parts. Detailed Implementation

[0058] The principles and spirit of this disclosure will now be described with reference to several exemplary embodiments. It should be understood that these embodiments are given merely to enable those skilled in the art to better understand and implement this disclosure, and are not intended to limit the scope of this disclosure in any way. Rather, these embodiments are provided to make this disclosure more thorough and complete, and to fully convey the scope of this disclosure to those skilled in the art.

[0059] Those skilled in the art will recognize that embodiments of this disclosure can be implemented as a system, apparatus, device, method, or computer program product. Therefore, this disclosure can be specifically implemented in the following forms: entirely hardware, entirely software (including firmware, resident software, microcode, etc.), or a combination of hardware and software.

[0060] According to the embodiments of this disclosure, a navigation bar rendering method is proposed for rendering the navigation bar during page development.

[0061] Optionally, the navigation bar rendering method provided in this disclosure can be used to render the navigation bar of various types of app display interfaces. For example, the navigation bar rendering method provided in this disclosure can be used to render the shopping festival activity interface of an e-commerce app, see [link to relevant documentation]. Figure 1 , Figure 1 This is a schematic diagram illustrating a navigation bar rendering effect according to an embodiment of the present disclosure. The navigation bar rendering method provided in this disclosure can render a navigation bar as shown in the diagram. Figure 1The full-screen interface shown has a transparent background for the navigation bar section, allowing the background of the active interface to be fully displayed on the screen.

[0062] The above-mentioned navigation bar rendering method can be executed by a computer device, which can be a desktop computer, a portable computer, a laptop computer, a tablet computer, a smartphone, etc. This disclosure does not limit the type of computer device.

[0063] It should be noted that the above application scenarios are shown only to facilitate understanding of the spirit and principles of this disclosure. The implementation of this disclosure is not limited in any way; on the contrary, the implementation of this disclosure can be applied to any applicable scenario.

[0064] To facilitate understanding, some terms used in this disclosure will be explained first.

[0065] Native development technology: In mobile client development, native development technology refers to a type of native development technology relative to web development technology, etc. It is used to develop applications on mobile platforms such as Android (Android) operating system and iOS (iPhone OS, Apple operating system) by using the development languages ​​and libraries provided by the platform.

[0066] WebView: WebView is a native control in a client system that displays web pages based on an open-source browser engine (such as the Webkit engine).

[0067] URL (Universal Resource Locator): Commonly known as a web address or simply a website address, it is the standard address of a resource on the Internet, like a house number on the network.

[0068] JsBridge: A mechanism that enables bidirectional communication between the native and web ends by using a JS (JavaScript, a programming language) engine or WebView container as a medium and agreeing on a protocol.

[0069] Status bar: The area at the top of the mobile device that displays information such as carrier, signal strength, and time.

[0070] Navigation bar: On mobile devices, this is the area below the status bar that displays the page title. The navigation bar usually has commonly used functions such as back and close. The default background of the native navigation bar is a solid color. Hiding the navigation bar means that the interface to be rendered is a full-screen interface.

[0071] Next, refer to Figure 2 This describes a navigation bar rendering method provided according to exemplary embodiments of the present disclosure.

[0072] See Figure 2 , Figure 2 This is a flowchart illustrating a navigation bar rendering method according to an embodiment of the present disclosure, the method comprising:

[0073] S201. Obtain target address information through the initiation page. The initiation page is used to provide input function for target address information, which includes display parameters used to indicate the display style of the navigation bar.

[0074] The initiating page can be any type of interface, as long as it provides input functionality for the target address information. For example, the initiating page can provide an input control (such as an input box) so that relevant technical personnel can input the target address information, thereby enabling computer devices to obtain the target address information through the initiating page.

[0075] S202. The display parameters of the target address information are parsed by developing components to obtain the display information.

[0076] Optionally, after obtaining the target address information through the initiating page, the initiating page can send the target address information to the development component so that the development component can obtain the target address information, parse the display parameters included in the obtained target address information, and obtain the display information.

[0077] S203. Render the navigation bar based on the displayed information by developing components.

[0078] This disclosure provides a function to add navigation bar display parameters to the target address information. After obtaining the target address information through the initiating page, the display parameters of the target address information are parsed by the development component to obtain the display information. Then, the navigation bar is rendered based on the display information by the development component. There is no need to separately distribute the configuration file, and there is no need to update or parse the configuration file. Instead, the display parameters can be obtained directly from the target address information, thereby improving the success rate of interface rendering.

[0079] After introducing the basic principles of this disclosure, various non-limiting embodiments of this disclosure will be described in detail below.

[0080] In some embodiments, the target address information can be a URL address, and the display parameters in the URL address can be represented as "?navigationStyle=1_1_1", where different types of display parameters are separated by special symbols (i.e., "_").

[0081] It should be noted that different types of display parameters are used to indicate different display information, thereby indicating the display style of the navigation bar.

[0082] Taking the example of a URL with the display parameter "?navigationStyle=1_1_1", the following is an introduction to the display parameters corresponding to each position:

[0083] The first digit indicates whether to hide the navigation bar to make the Webview full-screen; 1 means hide, 0 means not hide (default).

[0084] The second digit indicates whether to hide the WebView progress bar (that is, the scrollable progress bar located on the right side of the interface). 1 means hidden, and others mean not hidden.

[0085] The third character indicates the color mode of the system time carrier text icon at the top of the navigation bar. 1 indicates dark mode, and others indicate light mode.

[0086] After obtaining the display parameters shown above through the initiation page, you can use S201 to parse the display parameters of the target address information through the development component to obtain the display information.

[0087] The development components can include native development components and web development components (i.e., Web development components).

[0088] In one possible implementation, for S202, when parsing the display parameters of the target address information to obtain the display information through the development component, the display parameters of the target address information can also be parsed through a native development component to obtain the display information. Optionally, the native development component can be a native component, such as a native container page.

[0089] It should be noted that the correspondence between the different values ​​of the display parameters at different locations and the display information is pre-set. When parsing the display parameters through the native development component, the display information corresponding to the values ​​of the display parameters at different locations is determined based on the correspondence between the values ​​of the display parameters at different locations and the display information.

[0090] By parsing the display parameters, the values ​​of different types of display parameters can be obtained from the target address information. For any display parameter, different values ​​correspond to different display information. Taking the display parameter "?navigationStyle=1_1_1" as an example, the display information corresponding to the first value of "1" is to hide the navigation bar, the display information corresponding to the second value of "1" is to hide the Webview progress bar, and the display information corresponding to the third value of "1" is to set the system time carrier text icon at the top of the navigation bar to dark mode.

[0091] By specifying whether to hide the navigation bar in the display parameters, the navigation bar is rendered in full-screen mode only when full-screen display is required, thereby achieving dynamic display of the full-screen H5 page and ensuring that most users can access it.

[0092] It should be noted that in some embodiments, the target address information may not include display parameters. In this case, the native development component can directly use the default display parameters as the display parameters of the navigation bar. The requirement for the default display parameters is generally that the navigation bar is not hidden, that is, the interface to be rendered is a non-full-screen interface. In this case, the native navigation bar can be rendered by the web development component in accordance with the general method of rendering the navigation bar in related technologies. This disclosure will not elaborate on this.

[0093] After the display information is parsed from the native development component, both the native development component and the web development component can render the navigation bar according to the parsed display information.

[0094] In some embodiments, for S203, when rendering the navigation bar based on display information using a developed component, the following steps can be taken:

[0095] S2031. By using native development components, the navigation bar is rendered based on the display information to obtain the native navigation bar.

[0096] In one possible implementation, a native navigation bar can be obtained by using native development components to render the navigation bar sequentially based on the position of different types of display information in the display parameters, according to the display position from front to back.

[0097] Additionally, it should be noted that when the display information indicates that the native navigation bar should be hidden, a native back control (such as a back button) can be generated using native development components, so that the back control can be displayed at the set position in the navigation bar.

[0098] By generating a persistent back control in the navigation bar using native development components, the navigation bar can still provide users with the ability to return to the previous page even if the web development component fails to render the navigation bar.

[0099] Taking the display parameter "?navigationStyle=1_1_1" as an example, the process of rendering the native navigation bar based on the display information corresponding to this display parameter can be found in [link to documentation]. Figure 3 , Figure 3 This is a flowchart illustrating a native navigation bar rendering process according to an embodiment of this disclosure, such as... Figure 3As shown, for the display parameters in the target address information, the value of the first parameter determines whether to hide the navigation bar. If it is determined that the navigation bar needs to be hidden, then there is no need to draw the navigation bar; instead, a back control is permanently placed in the designated position in the corresponding area of ​​the navigation bar. If it is determined that the navigation bar does not need to be hidden, then the navigation bar is drawn, and a back control is drawn inside the drawn navigation bar so that the drawn navigation bar contains the back control. Based on the value of the second parameter, it determines whether to hide the WebView progress bar. If it is determined that the WebView progress bar needs to be hidden, then there is no need to draw the progress bar; otherwise, the progress bar is drawn. Finally, based on the value of the third parameter, the status bar text color is determined. If the status bar is in dark mode, the navigation bar text color is drawn as white; if the status bar is in light mode, the navigation bar text color is drawn as black. At this point, the native navigation bar drawing is complete.

[0100] S2032. When the display information indicates that the native navigation bar should be hidden, screen parameters and display parameters are sent to the web development component through the native development component. The screen parameters are obtained from the system configuration file.

[0101] When the display message indicates that the native navigation bar should be hidden, the interface invokes a web development component via a native development component. Once invoked, the web development component sends a parameter retrieval request to the native development component to obtain screen and display parameters. Upon receiving the request, the native development component sends the screen and display parameters back to the web development component. This web development component can be an H5 component, such as an H5 page.

[0102] Among them, screen parameters can be used to indicate the system version of the computer device, the size of the screen, the height of the screen status bar, whether it is an irregularly shaped screen, etc. Optionally, screen parameters can also be used to indicate other types of screen-related information, which are not limited in this disclosure.

[0103] Optionally, communication between native development components and web development components can be achieved using JsBridge technology. In other words, when a native development component sends display parameters to a web development component, it can do so using JsBridge technology. Specifically, a web development component can send parameter retrieval requests to a native development component via JsBridge technology, and the native development component can send display parameters to a web development component via JsBridge technology.

[0104] It should be noted that the format of screen parameters and display parameters sent from the native development component to the web development component can be as follows:

[0105] {

[0106] "version": 6.7.0, / / app version

[0107] "system": "android", / / Is the system Android or iOS?

[0108] "screenWidth": 1080, / / screen width

[0109] "screenHeight": 1920, / / screen height

[0110] "fullScreen": 1, / / Whether to hide the navigation bar in full-screen mode

[0111] "safeAreaStatusBar": 100, / / Height of top status bar

[0112] "safeAreaBottomOffset": 0, / / Height of the bottom virtual back bar

[0113] "notchScreen": 1, / / Whether it's a non-circular screen

[0114] "darkMode": 1 / / Status bar color mode

[0115] }

[0116] S2033. Using web development components, the native navigation bar is rendered based on screen parameters and display parameters to obtain the rendered navigation bar.

[0117] In one possible implementation, step S2033 can be achieved through the following steps:

[0118] S2033-1. Use web page development components to parse display parameters and obtain display information.

[0119] The process of parsing the display parameters can be found in the above embodiments, and will not be repeated here.

[0120] S2033-2. When the display information indicates that the native navigation bar should be hidden, a placeholder block is generated using a web development component.

[0121] By pre-generating a placeholder block for inserting the navigation bar when the display information indicates that the native navigation bar is hidden (that is, when the interface is full-screen), we can avoid the interface from being noticeably jittery when the rendered navigation bar is inserted into the top of the interface after rendering is complete.

[0122] S2033-3. Using web development components, the native navigation bar is rendered based on screen parameters and display information to obtain the rendered navigation bar.

[0123] S2033-4. Insert the rendered navigation bar into the placeholder block using web page development components.

[0124] The navigation bar rendering process provided in the above embodiments can be found in [reference needed]. Figure 4 , Figure 4 This is a flowchart illustrating a navigation bar rendering process according to an embodiment of the present disclosure, such as... Figure 4 As shown, the initiating page can send target address information, including display parameters, to the native container page. The native container page can render the native navigation bar according to the display parameters and launch the H5 page. After the H5 page is loaded, it requests the navigation bar display parameters from the native container page. The native container page returns the navigation bar display parameters to the H5 page so that the H5 page can insert a placeholder block in full-screen style. Then, when the navigation bar is rendered, the rendered navigation bar is inserted into the placeholder block to achieve the rendering of the navigation bar in the full-screen interface.

[0125] Figure 4 This is merely a procedural description of the navigation bar rendering process. For the specific implementation of each step, please refer to the above embodiments, which will not be repeated here.

[0126] Having introduced the navigation bar rendering method according to exemplary embodiments of the present disclosure, the structure of the navigation bar rendering apparatus and the computer device for implementing the navigation bar rendering method according to exemplary embodiments of the present disclosure will now be described.

[0127] See Figure 5 , Figure 5 This is a block diagram illustrating a navigation bar rendering apparatus according to an embodiment of the present disclosure, the apparatus comprising:

[0128] The acquisition module 501 is used to acquire target address information through the initiating page. The initiating page is used to provide input function for target address information, which includes display parameters used to indicate the display style of the navigation bar.

[0129] The parsing module 502 is used to parse the display parameters of the target address information through the development component to obtain the display information;

[0130] Rendering module 503 is used to render the navigation bar based on display information by developing components.

[0131] In some embodiments, development components include native development components and web development components;

[0132] Rendering module 503, when used to render a navigation bar based on display information via a developed component, is used for:

[0133] By using native development components, the navigation bar is rendered based on the display information to obtain the native navigation bar;

[0134] When the display information indicates that the native navigation bar should be hidden, screen parameters and display parameters are sent to the web development component through the native development component. The screen parameters are obtained from the system configuration file.

[0135] By using web development components, the native navigation bar is rendered based on screen and display parameters to obtain the rendered navigation bar.

[0136] In some embodiments, the rendering module 503, when rendering the native navigation bar based on screen parameters and display parameters using web development components, is used to:

[0137] By using web page development components, the display parameters are parsed to obtain the display information;

[0138] When the display message indicates that the native navigation bar should be hidden, a placeholder block is generated using a web development component.

[0139] By using web development components, the native navigation bar is rendered based on screen parameters and display information to obtain the rendered navigation bar.

[0140] Using web development components, the rendered navigation bar is inserted into a placeholder block.

[0141] In some embodiments, the device further includes:

[0142] The generation module is used to generate a return control using native development components when the display information indicates that the native navigation bar should be hidden. The return control is used to display at a set position in the navigation bar.

[0143] In some embodiments, the parsing module 502, when used to parse the display parameters of the target address information through the development component to obtain display information, is used for:

[0144] The display parameters of the target address information are parsed using native development components to obtain the display information.

[0145] In some embodiments, the target address information is a Uniform Resource Locator (URL) address, the native development component is a Native component, and the web development component is an H5 component.

[0146] It should be noted that although several modules of the navigation bar rendering device have been mentioned in the detailed description above, this division is merely exemplary and not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules described above can be embodied in one module. Conversely, the features and functions of one module described above can be further divided and embodied by multiple modules.

[0147] This disclosure also provides a computer-readable storage medium. Figure 6 This is a schematic diagram illustrating a computer-readable storage medium according to embodiments of the present disclosure, such as... Figure 6 As shown, the storage medium stores a computer program 601, which, when executed by a processor, can perform the navigation bar rendering method provided in any embodiment of this disclosure.

[0148] This disclosure also provides a computer device, which may include a memory and a processor. The memory stores computer instructions that can run on the processor, and the processor, when executing the computer instructions, implements the navigation bar rendering method provided in any embodiment of this disclosure. See also Figure 7 , Figure 7 This is a schematic diagram of the structure of a computer device according to an embodiment of the present disclosure. The computer device 700 may include, but is not limited to, a processor 710, a memory 720, and a bus 730 connecting different system components (including the memory 720 and the processor 710).

[0149] The memory 720 stores computer instructions that can be executed by the processor 710, enabling the processor 710 to perform the navigation bar rendering method provided in any embodiment of this disclosure. The memory 720 may include a random access memory (RAM) 721, a cache memory 722, and / or a read-only memory (ROM) 723. The memory 720 may also include a program tool 725 having a set of program modules 724, including but not limited to: an operating system, one or more application programs, other program modules, and program data. One or more combinations of these program modules may include an implementation of a network environment.

[0150] Bus 730 may include, for example, a data bus, an address bus, and a control bus. The computer device 700 can also communicate with external devices 750 via I / O interface 740, such as a keyboard or a Bluetooth device. The computer device 700 can also communicate with one or more networks via network adapter 760, such as a local area network (LAN), a wide area network (WAN), or a public network. Figure 7 As shown, the network adapter 760 can also communicate with other modules of the computer device 700 via the bus 730.

[0151] This disclosure also provides a computer program product, which includes a computer program. When the program is executed by the processor 710 of the computer device 700, it can implement the navigation bar rendering method provided in any embodiment of this disclosure.

[0152] Furthermore, although the operations of the methods disclosed herein are described in a specific order in the accompanying drawings, this does not require or imply that these operations must be performed in that specific order, or that all of the operations shown must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step, and / or one step may be broken down into multiple steps.

[0153] While the spirit and principles of this disclosure have been described with reference to several specific embodiments, it should be understood that this disclosure is not limited to the disclosed specific embodiments, and the division of aspects does not imply that features in these aspects cannot be combined for benefit; such division is merely for convenience of expression. This disclosure is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

Claims

1. A method for rendering a navigation bar, characterized in that, The method includes: The target address information is obtained through an initiation page, which provides an input function for the target address information. The target address information includes display parameters for indicating the display style of the navigation bar; the target address information is a Uniform Resource Locator (URL) address. The display parameters of the target address information are parsed using native development components to obtain the display information; When the display information indicates that the native navigation bar should not be hidden, the native development component renders the navigation bar based on the display information to obtain the native navigation bar. When the display information indicates that the native navigation bar should be hidden, the screen parameters and the display parameters are sent to the web development component through the native development component. The screen parameters are obtained from the system configuration file. A return control is generated through the native development component. The return control is used to display at a set position in the navigation bar. Using the web page development component, the native navigation bar is rendered based on the screen parameters and the display parameters to obtain the rendered navigation bar.

2. The method according to claim 1, characterized in that, The step of rendering the native navigation bar using the web page development component based on the screen parameters and the display parameters to obtain the rendered navigation bar includes: The display parameters are parsed using the web page development component to obtain the display information; When the display information indicates that the native navigation bar should be hidden, a placeholder block is generated using the web development component. Using the web development component, the native navigation bar is rendered based on the screen parameters and the display information to obtain the rendered navigation bar. The rendered navigation bar is inserted into the placeholder block using the web page development component.

3. The method according to claim 1, characterized in that, The native development component is a Native component, and the web page development component is an H5 component.

4. A navigation bar rendering device, characterized in that, The device includes: The acquisition module is used to acquire target address information through an initiating page. The initiating page provides an input function for the target address information, which includes display parameters for indicating the display style of the navigation bar. The target address information is a Uniform Resource Locator (URL) address. The parsing module is used to parse the display parameters of the target address information using native development components to obtain the display information; The rendering module is used for: When the display information indicates that the native navigation bar should not be hidden, the native development component renders the navigation bar based on the display information to obtain the native navigation bar. When the display information indicates that the native navigation bar should be hidden, the screen parameters and the display parameters are sent to the web development component through the native development component, and the screen parameters are obtained from the system configuration file; Using the web development component, the native navigation bar is rendered based on the screen parameters and the display parameters to obtain the rendered navigation bar. A generation module is used to generate a return control using native development components when the display information indicates that the native navigation bar should be hidden. The return control is used to be displayed at a set position in the navigation bar.

5. The apparatus according to claim 4, characterized in that, The rendering module, when used to render the native navigation bar based on the screen parameters and the display parameters using the web page development component to obtain the rendered navigation bar, is configured to: The display parameters are parsed using the web page development component to obtain the display information; When the display information indicates that the native navigation bar should be hidden, a placeholder block is generated using the web development component. Using the web development component, the native navigation bar is rendered based on the screen parameters and the display information to obtain the rendered navigation bar. The rendered navigation bar is inserted into the placeholder block using the web page development component.

6. The apparatus according to claim 4, characterized in that, The native development component is a Native component, and the web page development component is an H5 component.

7. A computer device, characterized in that, The computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to perform the operations performed by the navigation bar rendering method as described in any one of claims 1 to 3.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a program that is executed by a processor as described in any one of claims 1 to 3, performing the operations performed by the navigation bar rendering method.

Citation Information

Patent Citations

  • Method and device for displaying web system page, and web system

    CN105912328A

  • Page display control method and device, client and storage medium

    CN111581561A

  • Page rendering method and device, electronic equipment and readable storage medium

    CN113297522A