Page display method and device, computing device, computer readable storage medium

Abstract

The embodiment of the present specification provides a page display method and device, computing equipment and computer readable storage medium, the method comprises: in response to the display instruction of full screen display target page on the display device, obtaining the display position information and display style information of the target column; based on the display position information of the target column, determine the corresponding display area of the target column in the target page; based on the display style information of the target column and the picture information of the display area, determine the display style characteristics of the target column; full screen rendering is carried out to the target page, and the target column is rendered according to the display style characteristics in the display area; the method can improve the full screen display effect of the page.

Description

Technical Field

[0001] This specification relates to the field of computer technology, and in particular to a page display method; it also relates to a page display device, a computing device, and a computer-readable storage medium. Background Technology

[0002] With the development of computer technology, the requirements for the display effect of display devices are also getting higher and higher.

[0003] Currently, display devices can display the pages of installed applications in full screen. In this display method, icons in the display device's system status bar (such as battery level and signal strength icons) and content in the page's navigation bar (such as the back icon and title) can be displayed together on the application's page.

[0004] The way these icons blend with the application's page can affect the full-screen display effect, and the full-screen display effect of current display devices still needs improvement. Summary of the Invention

[0005] In view of this, embodiments of this specification provide a page display method. One or more embodiments of this specification also relate to a page display device, a computing device, a computer-readable storage medium, and a computer program, which can improve the full-screen display effect of a display device.

[0006] According to one aspect of the embodiments of this specification, a page display method is provided, the method comprising: In response to a display command to display the target page in full screen on a display device, obtain the display position information and display style information of the target bar; Based on the display position information of the target bar, determine the area to be displayed in the target page corresponding to the target bar; Based on the display style information of the target bar and the screen information of the area to be displayed, the display style characteristics of the target bar are determined; The target page is rendered in full screen, and the target bar is rendered in the area to be displayed according to the display style characteristics.

[0007] According to another aspect of the embodiments of this specification, a page display device is provided, the page display device comprising: The acquisition module is used to obtain the display position information and display style information of the target bar in response to the display instruction to display the target page in full screen on the display device; The first determining module is used to determine the area to be displayed in the target page corresponding to the target bar based on the display position information of the target bar; The second determining module is used to determine the display style characteristics of the target bar based on the display style information of the target bar and the screen information of the area to be displayed; The rendering module is used to perform full-screen rendering of the target page and to render the target bar in the area to be displayed according to the display style characteristics.

[0008] According to another aspect of the embodiments of this specification, a computing device is provided, including: a memory and a processor; The memory is used to store computer-executable instructions, and the processor is used to execute the computer-executable instructions, which, when executed by the processor, implement the steps of the above method.

[0009] According to another aspect of the embodiments of this specification, a computer-readable storage medium is provided that stores computer-executable instructions that, when executed by a processor, implement the steps of the above-described method.

[0010] According to another aspect of the embodiments of this specification, a computer program is provided, wherein when the computer program is executed in a computer, it causes the computer to perform the steps of the above-described method.

[0011] In one embodiment of this specification, in response to a display command on a display device to display a target page in full screen, the display command for the target bar to display a target page in full screen on the display device can be obtained. Based on the display position information of the target bar, the screen information of the corresponding display area of ​​the target bar in the target page can be determined. Combined with the display style information of the target bar, the display characteristics of the target bar that are more compatible with the target page can be determined. So that when the target page is rendered in full screen, the target bar is rendered in the display area according to the display characteristics. In this way, the target bar and the target page can be better integrated and displayed, and the full-screen display effect of the page after the target page is rendered in full screen can be better. Attached Figure Description

[0012] Figure 1 This is a flowchart illustrating a page display method provided in one embodiment of this specification; Figure 2 This is a flowchart of another page display method provided in one embodiment of this specification; Figure 3 This is a schematic diagram of a display interface provided in one embodiment of this specification; Figure 4 This is a schematic diagram illustrating a change in the display interface provided in one embodiment of this specification; Figure 5 This is a flowchart illustrating yet another page display method provided in one embodiment of this specification; Figure 6This is a schematic diagram of the structure of a display device provided in one embodiment of this specification; Figure 7 This is a schematic diagram of the structure of a page display device provided in one embodiment of this specification; Figure 8 This is a structural block diagram of a computing device provided in one embodiment of this specification. Detailed Implementation

[0013] Many specific details are set forth in the following description to provide a full understanding of this specification. However, this specification can be implemented in many other ways than those described herein, and those skilled in the art can make similar extensions without departing from the spirit of this specification. Therefore, this specification is not limited to the specific implementations disclosed below.

[0014] The terminology used in one or more embodiments of this specification is for the purpose of describing particular embodiments only and is not intended to limit the scope of one or more embodiments of this specification. The singular forms “a,” “described,” and “the” as used in one or more embodiments of this specification and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used in one or more embodiments of this specification refers to and includes any or all possible combinations of one or more associated listed items. The term “at least one” as used in one or more embodiments of this specification means “one or more,” and “a plurality of” means “two or more.” The term “comprising” is an open-ended description and should be understood as “including but not limiting,” and may include other content in addition to what has been described.

[0015] It should be understood that although the terms “first,” “second,” etc., may be used to describe various information in one or more embodiments of this specification, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from one another. For example, “first” may also be referred to as “second” without departing from the scope of one or more embodiments of this specification, and similarly, “second” may also be referred to as “first.” Depending on the context, the word “if” as used herein may be interpreted as “when,” “in response to a determination,” or “when…”.

[0016] With the development of computer technology, the requirements for page display effects on display devices are becoming increasingly higher, such as the need for immersive display to provide users with an immersive experience. This display device can be a mobile phone or computer, etc. In application usage scenarios, immersive display means that the application's display page completely covers the display device's screen (also known as full-screen display). The content seen by the user and the operable space on the screen are all functions related to that application, with no entry points for other applications. This display method allows users to use the application without being disturbed, ensuring a better user experience.

[0017] Display devices require a system status bar to display system status information. This bar displays information such as battery level, signal strength, time, and currently open applications using various icons. These icons are referred to as objects in the system status bar and are native icons of the display device. The characteristics of the system status bar are determined by the display device's operating system and are typically located as a bar at the top of the screen. The position and shape of the system status bar can vary depending on the display device; for example, it may be located at the bottom or side of the screen and may be oval-shaped. When displaying application pages, the display device also needs to display a navigation bar for those pages. The navigation bar may include control icons (such as a back icon) and the title of the current page. It is typically located as a bar below the system status bar. The position and shape of the navigation bar can also vary depending on the display device or application.

[0018] When a display device displays an application page in full-screen mode, it can show information from the system status bar and navigation bar on that page, allowing users to easily and promptly access system status information and control the page. The display of this system status bar and navigation bar on the application page affects the full-screen display effect, and consequently, the immersive display experience of the display device.

[0019] This specification provides a page display method that allows the target bar to blend well with the page when it is displayed in full-screen mode, thereby improving the full-screen display effect. This specification also relates to a page display device, a computing device, and a computer-readable storage medium, which will be described in detail in the following embodiments.

[0020] Figure 1 This is a flowchart illustrating a page display method according to an embodiment of this specification, which can be applied to display devices. Figure 1 As shown, the method for displaying this page includes the following steps: Step 102: In response to the display instruction to display the target page in full screen on the display device, obtain the display position information and display style information of the target bar.

[0021] A display device can have multiple applications installed. In the embodiments of this specification, the target page can be the page to be displayed for one of the applications installed on the display device. This application can be configured to display the page in full screen. This setting can be set by the developers before the application is released, or it can be set by the user of the display device. Whether the page needs to be displayed in full screen can also be determined by the display device. For example, the display device can default to displaying the pages of all installed applications in full screen.

[0022] For example, when a user clicks the icon of a target application on the display device, the display device runs the target application and needs to display its page, which can be the target page. The target application can be any application installed on the display device. When the display device needs to display the target page, and the target page is set to be displayed in full-screen mode, the display device can determine that it has received a display instruction to display the target page in full-screen mode. Then, the display device can respond to this display instruction and perform subsequent operations to achieve full-screen display of the target page.

[0023] The subsequent operations include obtaining the display position information and display style information of the target bar, and may also include subsequent steps 104 to 108. The target bar includes information about screen content that needs to be displayed on the display device while the target page is being displayed, but which is not part of the target page itself. When the target page is displayed in full screen, the target bar can be overlaid on the target page. For example, the target bar may include the system status bar of the display device, and / or the navigation bar of the application's page. The display position information of the target bar can indicate the display position of the target bar on the screen of the display device, and the display style information of the target bar can indicate information such as the display color and shape of the content in the target bar. Optionally, the target bar may also include other information bars different from the system status bar and navigation bar.

[0024] Step 104: Based on the display position information of the target bar, determine the area to be displayed on the target page corresponding to the target bar.

[0025] The display device can determine the display position of the target bar on the display screen based on the target bar's display position information. Then, the area on the target page that needs to be displayed at that position can be determined as the corresponding display area for the target bar on the target page. After determining this display area, the display device can directly obtain the display information of that area based on the screen information of the target page.

[0026] Step 106: Determine the display style characteristics of the target bar based on the display style information of the target bar and the screen information of the area to be displayed.

[0027] The display device can determine whether the display style information of the target bar matches the screen information of the area to be displayed, and then determine the display style characteristics of the target bar that best match the screen information of the area to be displayed. For example, based on the display style information of the target bar, it can determine whether the target bar can be clearly seen, whether the display is abrupt, and whether it will affect the display of the screen information of the area to be displayed if the target bar is displayed in the area to be displayed according to its default display style, thus determining whether there is a match. This display style characteristic can be the display style characteristic corresponding to the display style information, or it can be other determined display style characteristics. This display style characteristic can ensure that objects in the target bar (such as icons or text) are clearly displayed in the area to be displayed and blend well with the screen information of the area to be displayed, avoiding the object being unclear to the user or being displayed too abruptly.

[0028] Step 108: Render the target page in full screen, and render the target bar in the area to be displayed on the target page according to the display style characteristics.

[0029] After acquiring the display style characteristics of the target bar, the display device can render the target bar according to that style. Specifically, the display device can render the target page in full-screen mode, and then render the target bar within the display area of ​​the full-screen rendered target page. This achieves full-screen display of the target page while ensuring the normal display of information in the target bar. Therefore, while maintaining the complete functionality of the display device, it expands the display boundaries of the page, allowing the target page to blend seamlessly with the phone's native icons, providing users with a better immersive experience.

[0030] In summary, the page display method provided in the embodiments of this specification can respond to a display instruction on a display device to display the target page in full screen, and obtain the display instruction on the target bar to display the target page in full screen on the display device. Based on the display position information of the target bar, the screen information of the corresponding display area of ​​the target bar in the target page can be determined. Combined with the display style information of the target bar, the display characteristics of the target bar that are more compatible with the target page can be determined, so that the target bar can be rendered in the display area according to the display characteristics when the target page is rendered in full screen. In this way, the target bar and the target page can be better integrated and displayed, and the full-screen display effect of the page after the target page is rendered in full screen can be better.

[0031] Figure 2 This is a flowchart illustrating another page display method provided in one embodiment of this specification. This method can be applied to a display device, such as a controller for the display device. Figure 2 As shown, the method for displaying this page includes the following steps: Step 202: After obtaining the information of the target page to be displayed in full screen, confirm that the display instruction to display the target page in full screen on the display device has been received.

[0032] In this embodiment of the specification, the target page in step 202 can be referred to the relevant description in step 102. This embodiment of the specification will not repeat the content described in step 102.

[0033] When a user interacts with a display device (such as launching a target application on the display device) to trigger the display of a target page, the display device can obtain information about the target page. The display device can first obtain the web address of the target page, such as the Uniform Resource Locator (URL) address, and then load the target page information based on that URL address. The target page information may include the page's visual information. After obtaining the target page information, the display device can determine whether the target page needs to be displayed in full-screen mode.

[0034] For example, a display device can determine whether a target page needs to be displayed in full screen based on information about the target page, or it can determine whether the target page needs to be displayed in full screen based on the display device's system settings. In this embodiment, the target page is taken as a page that needs to be displayed in full screen. Since the target page obtained by the display device needs to be displayed in full screen, the display device is essentially receiving a display instruction to display the target page in full screen.

[0035] Step 204: In response to the display command of the full-screen target page, perform full-screen display settings and obtain the display position information and display style information of the target bar.

[0036] The display device can respond to the display command of the target page for full-screen display and perform full-screen display; for example, the rendering mode of the page can be set so that subsequent rendering of the page is full-screen rendering. In the embodiments of this specification, the display position information and display style information of the target bar in step 204 can be referred to the relevant description in step 102. The contents described in step 102 will not be repeated in the embodiments of this specification.

[0037] The target bar can include multiple objects to be displayed, each reflecting a type of information. For example, objects in the target bar can include icons or text. The text can include text in various languages ​​and numbers. The target bar includes the display device's system status bar and / or the application's page navigation bar. Figure 3 This is a schematic diagram of a display interface provided in one embodiment of this specification. For example... Figure 3As shown, the display interface includes a target page M1 and a target bar M2. The target bar M2 includes a system status bar M21 and a navigation bar M22. The objects in the system status bar M21 may include icons representing information such as battery level, signal strength, time, and currently open applications. The objects in the navigation bar M22 may include a back icon t1 and the title of the current page t2 (as shown in "9 / 10").

[0038] The display position information for the target bar can include the height and position information of the system status bar, and it can also include the height and position information of the navigation bar. For example, the system status bar's position information indicates that the system status bar is located at the very top of the screen, and its height information indicates that the system status bar's height is 0.5 cm. The navigation bar's position information indicates that the navigation bar is adjacent to the system status bar, and its height information indicates that the navigation bar's height is 0.5 cm. The navigation bar's position information can also indicate the height of the navigation bar from the top of the screen.

[0039] The display style information of the target bar can include the default color and default shape information of the objects in the target bar, and can also include the default background color of the objects in the target bar. For example, the default color of the objects in the target bar is black, and the default background color is white. The default color and default shape information of all objects in the target bar can be the same. Optionally, the default color information, default shape information, and default background color of the objects in the system status bar and navigation bar can be different.

[0040] Step 206: Based on the display position information of the target bar, determine the area to be displayed on the target page corresponding to the target bar.

[0041] In the embodiments of this specification, step 206 can refer to the relevant description in step 104. The contents described in step 104 will not be repeated in the embodiments of this specification.

[0042] The display device can determine the area to be displayed on the target page based on the height of the target bar. The display device can also determine the areas to be displayed for the system status bar and navigation bar respectively, based on their respective heights. Please refer to [link / reference needed]. Figure 3 The area to be displayed in the target page corresponding to the target bar M2 is... Figure 3 The area covered by the target bar M2 in the target page M1.

[0043] After determining the area to be displayed corresponding to the target bar on the target page, the display device can directly obtain the color of the image in that area. For example, the color of the image in the area to be displayed might be a first color. Or, the color of the first sub-area within the area to be displayed might be the first color, and the color of the second sub-area might be the second color. In the embodiments of this specification, the display device can render the target page using an offline canvas container, and can obtain the color of the image in the area to be displayed by calling the canvas's public getImageData interface.

[0044] Step 208: Determine whether the default color of the object in the target column and the color of the screen in the area to be displayed meet the color conflict condition.

[0045] In this embodiment of the specification, step 208 can refer to the relevant description in step 106, and the content described in step 106 will not be repeated here. Step 208 is to perform color conflict detection. In one optional implementation, multiple correspondences between screen color features and object color features in the target bar can be set. Color conflict conditions may include: the screen color features of the area to be displayed do not satisfy the correspondence with the color features of the default color.

[0046] The default colors of all objects in the target bar are usually the same. The display device can determine the target screen color in the area to be displayed, and then determine whether the default colors of the objects in the target bar and the target screen color meet the color conflict condition. Thus, in step 210, a unified display style feature is determined for all objects in the target bar. For example, the target screen color is the color that occupies the largest area in the area to be displayed, or it can be the color obtained by integrating the screen colors of various positions in the area to be displayed.

[0047] Optionally, the display device may determine whether the default color of each object in the target column meets the color conflict condition with the screen color of the object's location in the display area, and then determine the corresponding display style characteristics for each object in step 210.

[0048] If the display device determines that the color characteristics of the area to be displayed and the default color of the object in the target bar satisfy the above correspondence, then it can be determined that the default color of the object in the target bar and the color of the area to be displayed do not meet the color conflict condition. In this case, the object in the target bar can be displayed directly according to the default color, and the subsequent step 210 is no longer executed.

[0049] Step 210: If the color conflict condition is met, determine the display style characteristics of the objects in the target bar based on the colors of the screen in the area to be displayed.

[0050] In this embodiment of the specification, step 210 can refer to the relevant description in step 106, and this embodiment of the specification will not repeat the content described in step 106. The display style characteristics of the object in the target bar include at least color characteristics. For example, the color characteristic can be black, white, gray, green, blue, red or other colors, and this embodiment of the specification does not limit it. Optionally, the display style characteristics may also include icon shape characteristics. Alternatively, the display style characteristics may also include font characteristics.

[0051] In one implementation, the display device can analyze the color of each pixel in the display area to obtain target color parameters. Then, based on these target color parameters, display style characteristics of objects in the target bar can be generated. For example, the display device can obtain the average color value (AVG) of each pixel in the display area, and then process this average color value according to set rules to determine the average color value of objects in the target bar, thereby determining the color characteristics of the objects based on this average color value.

[0052] For example, the four color channel values ​​of the color average are RGBA (200, 220, 230, 1), which can represent a relatively saturated color that is close to white (its value is 255, 255, 255, 1). The display device can then process this color average based on a set rule (such as extreme inversion) and determine the color characteristic of the object in the target bar as black based on the processed color value.

[0053] In another implementation, multiple correspondences between screen color features and display style features can be set. Based on these correspondences and the screen color features of the area to be displayed, the display style features of the objects in the target bar are determined. These correspondences include the correspondence between screen color features and object color features in step 208, and may also include the correspondence between screen color features and icon shape features, as well as the icon shape features and font features corresponding to the screen color features.

[0054] Step 212: Render the target page in full screen, and render the target bar in the area to be displayed on the target page according to the display style characteristics.

[0055] After determining the display style characteristics of the objects in the target bar, the display device can render the target page and the target bar to achieve full-screen display. Since the display device has already set up full-screen display in step 204, the rendering of the target page here is full-screen rendering. The display device can set the background of the target bar to a transparent background and render the objects in the target bar on the display area of ​​the target page according to the aforementioned display style characteristics to ensure that the target bar blends naturally into the target page.

[0056] Optionally, during the rendering of the target bar, the display device can render the system status bar and navigation bar separately. The display device can render objects in the system status bar based on its height within the corresponding display area. Similarly, the display device can render objects in the system status bar based on the navigation bar's height and its distance from the top of the screen within the corresponding display area. Since the system status bar height varies significantly across different display devices, obtaining the system status bar height for subsequent rendering ensures better compatibility with most display devices on the market, thereby improving the user's visual experience.

[0057] Optionally, the display device can also modify the navigation bar, such as changing the area where the navigation bar is displayed on the target page.

[0058] In addition to achieving full-screen display through the steps described above, the display device performs further page display steps to enhance page display flexibility, improve display quality, and optimize the user's visual experience. For example, the display device can perform customized content display on the target page through steps 214 and 216 below, and can also adaptively adjust the target bar when the content to be displayed on the page changes through steps 218 and 220 below, thereby improving the full-screen display effect when content changes and enhancing the user experience.

[0059] Step 214: Obtain the rendering instructions for the auxiliary icons to be displayed on the target page; wherein, the rendering instructions carry the style information and rendering position information of the auxiliary icons.

[0060] During the development of the target application, auxiliary icons can be developed, and their display timing, style information, and rendering position information can be set. For example, the display timing can be set to show the icon on the target page, and the style information can include the auxiliary icon's shape and color, etc. Figure 3 The styles of auxiliary icons include watermelon and banana styles, etc. The rendering location information can include whether the auxiliary icon is located in the navigation bar area, at the top, bottom, or middle of the page. When the display device confirms the timing for displaying the auxiliary icon, it can obtain the rendering instructions for the auxiliary icon and get its style and rendering location information.

[0061] Optionally, auxiliary icons can also represent certain information, and these information can be displayed through text. For example... Figure 3 The watermelon icon represents duration, and the banana icon represents quantity. Optionally, animated view effects can be set for the auxiliary icons. When the conditions corresponding to any animated visual effect are met, the display content of the auxiliary icon is adjusted to present that animated visual effect.

[0062] Step 216: In response to the rendering command of the auxiliary icon, render the auxiliary icon at the corresponding rendering position on the target page according to the style information of the auxiliary icon.

[0063] After obtaining the style information and rendering position of the auxiliary icon, the display device can render the auxiliary icon at the corresponding rendering position on the target page according to the style information. Figure 3 The illustration shows the effect of a display device rendering auxiliary icons in watermelon and banana styles. In the embodiments described in this specification, the full-screen display of the display device can provide users with a deeply customized immersive experience.

[0064] Step 218: If an up swipe operation is detected on the target page, reduce the display transparency of the target bar's background.

[0065] When the display device displays the target page in full screen, the background of the target bar is set to a transparent background. At this time, the display transparency of the target bar background is at its highest (e.g., 1) and the opacity is at its lowest (e.g., 0). When an upward swipe operation is detected on the target page, it can be determined that information that was originally hidden at the bottom of the target page needs to be displayed. At this time, the display transparency of the target bar background can be reduced (that is, the opacity is increased), making the background of the target bar semi-transparent.

[0066] The display device can continuously reduce the transparency of the target bar's background as the target page is scrolled up, until the scrolling distance of the target page exceeds a distance threshold. This distance threshold could be a height of 50 pixels on the screen. Alternatively, the display device can reduce the transparency to an auxiliary transparency only when it detects the start of scrolling towards the target page, and maintain this auxiliary transparency when the scrolling distance is less than or equal to the distance threshold.

[0067] Step 220: If the swipe distance of the target page is greater than the distance threshold, adjust the display transparency of the background of the target bar to the target transparency.

[0068] The target transparency can be 0, meaning the target bar can be set to an opaque background. Alternatively, the target transparency can also be any other value between 0 and 1, which is not limited in the embodiments described in this specification.

[0069] In the embodiments of this specification, during the upward scrolling of the target page, the background color of the target bar can be the default background color; after the upward scrolling distance of the target page exceeds a distance threshold, the objects in the target bar can be displayed according to their default display style. Optionally, the background color of the target bar can also be a color determined based on the color of the screen in the display area of ​​the target page, and after the upward scrolling distance of the target page exceeds a distance threshold, the objects in the target bar can still be displayed according to the display style characteristics when not scrolling. Optionally, during the upward scrolling of the target page, the background color of the target bar and the display style characteristics of the objects in the target bar can also be determined in real time according to the changes in the screen in the display area of ​​the target page.

[0070] Figure 4 This is a schematic diagram illustrating a change in the display interface provided in one embodiment of this specification. Figure 4 Display interface J1 is the display interface when no swipe is made up on the target page; display interface J2 is the display interface when the target page is swiped up and the swipe distance is less than or equal to a distance threshold; display interface J3 is the display interface when the swipe distance on the target page exceeds the distance threshold or the swipe stops. In this embodiment of the specification, when the user swipes up on the target page, the target bar can display a gradual effect, which can avoid the screen discontinuity caused by changes in the content to be displayed and improve the page display effect.

[0071] Steps 218 and 220 above can be implemented by the display device by listening to page scroll events. Below is a code snippet implementing steps 218 and 220: export const useScroll = (limit: number) =>{ const [progress, setProgress] = useState <number>(0); const handleScroll = useCallback( throttle(() =>{ const scrollY = window.scrollY || window.pageYOffset; if (scrollY<= 0) { setProgress(0); } else if (scrollY<= limit) { const opacity = (scrollY / limit).toFixed(1); setProgress(Number(opacity)); } else { setProgress(1); } }, 50), [limit], ); useEffect(() =>{ window.addEventListener('scroll', handleScroll); return () =>{ window.removeEventListener('scroll', handleScroll); }; }, [handleScroll]); return { progress}; }; Here, "scrollY" refers to scrolling in the y-direction, which is the vertical direction of the display screen. "EventListener" refers to the event listener used to listen for page scrolling events. "opacity" refers to opacity, and "limit" represents the distance threshold. "const opacity = (scrollY / limit).toFixed(1);setProgress(Number(opacity))" means that as the scrolling distance is less than or equal to the distance threshold, the opacity is adjusted according to the ratio of the scrolling distance to the distance threshold until the ratio is 1 (i.e., the scrolling distance is greater than the distance threshold). In this code, the distance threshold is set to 50.

[0072] In summary, the page display method provided in this embodiment can respond to a display instruction on the display device to display the target page in full screen, and obtain the display instruction for the target bar to display the target page in full screen on the display device. Based on the display position information of the target bar, the screen information of the corresponding display area of ​​the target bar in the target page can be determined. Combined with the display style information of the target bar, the display characteristics of the target bar that match the target page can be determined, so that the target bar can be rendered in the display area according to the display characteristics when the target page is rendered in full screen. In this way, the target bar and the target page can be better integrated and displayed, and the full-screen display effect of the page after the target page is rendered in full screen can be better.

[0073] This manual demonstrates how to develop applications using both native and web development components. If there are functional iterations or modifications to the application's immersive style (such as the aforementioned display style features), the iterative features and modified immersive styles can be quickly released and take effect in real time. On display devices, the application's full-screen display can be achieved through the combination of the corresponding native and web development components. The native development components are responsible for enabling client-side capabilities, while the web development components are primarily responsible for using these capabilities to create an immersive experience.

[0074] This specification allows for the definition of a communication protocol between native development components and web development components, enabling bidirectional communication. A communication service can be created on the display device, listening on a local communication port. This port address can be similar to "ws: / / localhost:[port]", where localhost represents the local device (current display device) and port represents the communication port number. Native and web development components can exchange information through this communication port. For example, this specification uses a WebSocket full-duplex communication scheme to provide communication stability. Messages exchanged between native and web development components use protobuf binary format, simplifying the information parsing process.

[0075] This communication protocol can include a full-screen communication protocol, a target bar communication protocol, and a custom style communication protocol for icons. Native and web development components can interact through this full-screen communication protocol to set full-screen display and transmit the display style characteristics of the target bar. Native and web development components can interact through this target bar communication protocol to obtain the target bar's display position and style information. Native and web development components can interact through this custom style communication protocol to render auxiliary icons.

[0076] The protocol content of this full-screen communication protocol may include the following code: / ** * Set up an immersive navigation bar * Parameters: * naviTransparent: *true: 1. Navigation bar and status bar are transparent. *2. The navigation bar is located above the z-axis of the web app, in an overlapping relationship. *false: 1. Navigation bar and status bar are opaque, default color. *2. The navigation bar and webApp z-index are the same; the webApp area is directly below the navigation bar. * * controlStyle: Status bar style *DEFAULT: System default *LIGHT: White *DARK: Black * * Callback: * WSetImmersiveNavigationCallback: Returns the height of the web navigation bar and status bar. * * typecode = 107 / message WSetImmersiveNavigation { enum StatusBarStyle { DEFAULT = 0; LIGHT = 1; DARK = 2; } required bool naviTransparent = 1; optional StatusBarStyle controlStyle = 2; optional string callbackName = 3; } In this code, "naviTransparent" represents the parameter that triggers full-screen display, and "StatusBarStyle" represents the system status bar style. Native development components and web development components can send full-screen display commands for the target page by passing WSetImmersiveNavigation information. The WSetImmersiveNavigation information can carry the display style characteristics of the system status bar. The first field in the WSetImmersiveNavigation information represents the parameter that triggers full-screen display, and the second field represents the display style characteristics of the system status bar. This code only sets three color characteristics (default, white, and black), but more other color characteristics can also be set.

[0077] The protocol content of the target column communication protocol may include the following code: / ** * WSetImmersiveNavigation returns the height of the web navigation bar and status bar. * * Parameters: * naviHeight: Navigation bar height in pixels (px) * controlHeight: Status bar height in pixels (px) / message WSetImmersiveNavigationCallback { required int32 naviHeight = 1; required int32 controlHeight = 2; } In this code, "WSetImmersiveNavigationCallback" represents the callback information for WSetImmersiveNavigation, "naviHeight" represents the height of the navigation bar, and "controlHeight" represents the height of the system status bar. Native development components and web development components can exchange this callback information to obtain the heights of the navigation bar and the system status bar, which is essentially the display position information of the target bar. The first field in this callback information represents the height of the navigation bar, and the second field represents the height of the system status bar. This code only demonstrates the acquisition of height information; it can be further extended to obtain the display style information of the target bar.

[0078] The protocol content of a customized communication protocol can include the following code: / ** * AI Spoken English * Customize a transparent background item bar that floats above the webview. * * Parameters: * enable: True displays, false hides * watermelonEndTimestamp: The time stamp indicating the end of the watermelon item's countdown. * bananaCount: The number of bananas displayed (a string processed by the server). * addBananaCount: The number of bananas added this time, used to trigger the animation. No animation will be triggered if the count is less than or equal to 0. * * Callback: * Trigger a callback to notify the web application when the incentive playback ends: callbackFn(WAiStudyControlPropCallback, null) * * This interface can be used to display, update, hide, and play item incentives in the inventory. Fields not provided will remain unchanged by default and will not be updated in the UI. * * typecode = 105 / message WAiStudyControlProp { required bool enable = 1; optional int64 watermelonEndTimestamp = 2; optional string bananaCount = 3; optional int32 addBananaCount = 4; optional string callbackName = 5; } / ** * WAiStudyControlProp callback after animation finishes playing / message WAiStudyControlPropCallback { } Native development components and web development components can obtain information about watermelon and banana icons by passing the WAiStudyControlProp information in this protocol, and then render dynamic effects based on this information.

[0079] The interaction process between native development components and web development components will be described below with reference to the accompanying diagrams. Figure 5 This is a flowchart illustrating another page display method provided in one embodiment of this specification. For example... Figure 5 As shown, the method may include: Step 502: The native development component sends the web address of the target page to the web development component.

[0080] Step 504: The web page development component loads the target page information based on the web page address.

[0081] Step 506: The web development component sends a display instruction to the native development component to display the target page in full screen on the display device.

[0082] In this embodiment of the specification, steps 502 to 506 can refer to the relevant description in step 202, and the content described above will not be repeated here. In step 506, the web development component can send the protocol information WSetImmersiveNavigation from the full-screen communication protocol to the native development component, requesting the native development component to enable full-screen display.

[0083] Step 508: The native development component responds to the display command and sets up full-screen display.

[0084] Native development components can call the display device's Application Programming Interface (API) to configure full-screen display settings through the display device's system. These settings can include changes to display control parameters. Native development components can also respond to these display commands by setting the system status bar background to transparent.

[0085] Step 510: The native development component responds to the display instruction by sending the display position information and display style information of the target bar to the web development component. The target bar includes the system status bar of the display device and the navigation bar of the target page.

[0086] In the embodiments of this specification, step 510 can refer to the relevant description in step 204. The contents described above will not be repeated in the embodiments of this specification.

[0087] Native development components can use the WSetImmersiveNavigation protocol information to send callback information for the target bar communication protocol back to the web development component. This callback information carries the target bar's display position and style information, allowing the web development component to process the request accordingly.

[0088] Step 512: Based on the display position information of the target bar, the web development component determines the area to be displayed on the target page corresponding to the target bar.

[0089] In the embodiments of this specification, step 512 can refer to the relevant description in step 206. The contents described above will not be repeated in the embodiments of this specification.

[0090] Step 514: The web development component determines whether the default color of the object in the target bar and the color of the screen in the area to be displayed meet the color conflict condition.

[0091] In the embodiments of this specification, step 514 can refer to the relevant description in step 208, and will not be repeated here.

[0092] Step 516: When the color conflict condition is met, the web development component determines the display style characteristics of the objects in the target bar based on the color of the screen in the area to be displayed.

[0093] In the embodiments of this specification, step 516 can refer to the relevant description in step 210, and will not be repeated here.

[0094] Step 518: The web development component sends the display style feature to the native development component.

[0095] The web development component can again send the protocol information WSetImmersiveNavigation from the full-screen communication protocol to the native development component, and make this protocol information carry the display style characteristics of the target bar. For example, the second field "controlStyle" in this protocol information is equal to Dark. The native development component can then process accordingly based on this protocol information.

[0096] Step 520: The native development component renders the system status bar in the area to be displayed on the target page according to the display style characteristics.

[0097] Native development components can call the display device system's Application Programming Interface (API) to render objects in the system status bar (such as the display device's native icons) according to the display style characteristics of the display device system.

[0098] Step 522: The web development component renders the target page in full screen, and renders the navigation bar on the area to be displayed on the target page according to the display style characteristics.

[0099] In the embodiments of this specification, steps 520 and 522 can be referred to the relevant description in step 212, and will not be repeated here. The web development component can render the navigation bar based on the height information of the navigation bar in the received callback information.

[0100] Step 524: The web development component sends a rendering instruction for the auxiliary icon to be displayed on the target page to the native development component; wherein, the rendering instruction carries the style information and rendering position information of the auxiliary icon.

[0101] In this embodiment of the specification, step 524 can refer to the relevant description in step 214, and will not be repeated here. Since the auxiliary icons present some complex animated view effects, which cannot be achieved through web development components or are too costly to implement, in this embodiment of the specification, the web development component notifies the native development component to perform customized rendering of the auxiliary icons to ensure a complete page effect.

[0102] Step 526: The native development component responds to the rendering instruction and renders the auxiliary icon at the rendering location according to the style information.

[0103] In the embodiments of this specification, step 524 can refer to the relevant description in step 216, and will not be repeated here.

[0104] Step 528: When the web development component detects an upward swipe operation on the target page, it reduces the display transparency of the target bar's background until the upward swipe distance on the target page exceeds a distance threshold, at which point the display transparency is adjusted to the target transparency.

[0105] In the embodiments of this specification, step 528 can refer to the relevant descriptions in steps 218 and 220, and will not be repeated here.

[0106] Figure 6 This is a schematic diagram of the structure of a display device provided in one embodiment of this specification. Figure 6 As shown, the display device can include native development components and web development components. Native development components include a communication module, an immersive module, a status bar module, a full-screen settings module, and a custom style module. Web development components include a communication module, an immersive module, a target bar module, an automatic detection module, and a page rendering module. The immersive module acts as a manager, controlling other modules within the corresponding development components to perform immersive display-related tasks. The immersive modules in both native and web development components control the communication modules to communicate based on a defined communication protocol.

[0107] The immersive module in the native development components also controls the status bar module, obtaining the display position and style information of the system status bar; controls the full-screen setting module to call the system API to set the page to full-screen; and controls the custom style module to render auxiliary icons, and the page content output by the custom style module includes the auxiliary icons.

[0108] The immersive module in the web development components also controls the target bar module to perform target bar-related operations, such as obtaining the target bar's display position and style information, determining the target bar's background, identifying objects within the target bar, and determining the target bar's gradient display effect during page scrolling. The immersive module also controls the automatic detection module to perform color conflict detection, executing steps 514 and 516 above. Finally, the immersive module controls the page rendering module to render the target page.

[0109] In related technologies, application functions are presented to users using a single page, often neglecting to leverage full-screen display on the device to enhance the product experience, thereby improving product quality and increasing user engagement. However, most users prefer larger screens, such as large-screen phones and giant movie theater experiences. Therefore, this manual addresses these two points by utilizing a hybrid development model to achieve full-screen display of the target page without sacrificing product functionality (fully utilizing the mobile terminal's file storage, audio and video capabilities, etc.). This expands the original display boundaries of the product and integrates the target page with the phone's native icons (battery, signal strength, time, etc.), providing a better large-screen user experience for the application.

[0110] Currently, there are three main approaches to application development. The first is to develop mobile applications using the native programming language of the platform. For example, Android uses Java, while iOS uses Objective-C or Swift. The second is a hybrid development model combining native and web development languages. The native language provides the platform's basic capabilities and container capabilities, while the web scripts run within the container to develop the application's product and business logic. The third is to develop web applications using web development languages.

[0111] If immersive display is implemented using native development languages, the product's business logic is also developed using native languages. This limits rapid product iteration and makes application review and release time-consuming. Furthermore, after a new version of the application is approved and released, users need to manually update to use the latest product features, which undoubtedly increases time costs. If immersive display is implemented using a traditional hybrid development model, the native development language simply makes the container full-screen; the web business code runs entirely in a sandbox environment, and the immersive display is entirely handled by the web development components. In this approach, the web development components have weak awareness of different mobile phones, operating systems, screen sizes, etc., and cannot perfectly adapt to the page display. For example, icons for time and signal strength on the phone may conflict with the content on the webpage, resulting in a poor user experience. If immersive display is implemented solely using web development, because the web application is limited by the host environment it loads (i.e., the browser application), some cannot provide a full-screen experience, and others cannot resolve conflicts with native phone icons (signal strength, battery level, time, etc.). In addition, it cannot provide access to some terminal capabilities of mobile applications, such as file access and storage capabilities, volume control, etc. Therefore, the product's functionality is not complete, which detracts from the user experience.

[0112] This specification employs a hybrid approach of native and web development languages ​​for application development, ensuring rapid deployment and real-time effectiveness of application functionality. Native development components can call system APIs, enabling access to various client-side capabilities within the mobile application. During immersive display, native and web development components communicate and work together to achieve this effect. The web development component performs color conflict detection and directs the acquisition and rendering of system status bar information via the native development component, ensuring efficient and stable display of objects in the system status bar. Furthermore, the display style characteristics of the target bar can be determined based on the page layout, ensuring better integration of objects in the target bar with the page; customized styles are also possible, providing users with a deeply customized immersive experience.

[0113] Corresponding to the above method embodiments, this specification also provides embodiments of page display devices. Figure 7 This is a schematic diagram of the structure of a page display device provided in one embodiment of this specification. Figure 7 As shown, the page display device includes: The acquisition module 701 is used to acquire the display position information and display style information of the target bar in response to the display instruction to display the target page in full screen on the display device; The first determining module 702 is used to determine the area to be displayed in the target page corresponding to the target bar based on the display position information of the target bar; The second determining module 703 is used to determine the display style characteristics of the target bar based on the display style information of the target bar and the screen information of the area to be displayed. The first rendering module 704 is used to perform full-screen rendering of the target page and render the target bar in the area to be displayed according to the display style characteristics.

[0114] Optionally, the display style information of the target bar includes the default color of the objects in the target bar, and the image information of the area to be displayed includes the color of the image in the area to be displayed; the second determining module 703 is used for: If the default color of an object in the target bar meets the color conflict condition with the color of the image in the area to be displayed, the display style characteristics of the object in the target bar are determined based on the color of the image in the area to be displayed; wherein, the display style characteristics include color characteristics.

[0115] Optionally, the second determining module 703 is used for: The color of each pixel in the area to be displayed is analyzed to obtain the target color parameters; Based on the target color parameters, generate the display style characteristics of objects in the target column.

[0116] Optionally, the objects in the target bar include icons, and the display style features also include icon shape features; And / or, the objects in the target column include text, and the display style features also include font features.

[0117] Optionally, the second determining module 703 is used for: determining the display style characteristics of the target bar by the web development component; wherein the target bar includes the system status bar of the display device and the navigation bar of the target page; The page display device also includes: The first sending module is used for web development components to send display style features to native development components; The first rendering module 704 includes: The first rendering submodule is used by natively developed components to render the system status bar in the area to be displayed according to the display style characteristics. The second rendering submodule is used by web development components to render the navigation bar in the area to be displayed according to the display style characteristics.

[0118] Optionally, the first rendering submodule is used for: the native development component to set the background of the system status bar to a transparent background, and to render the icons in the system status bar according to the display style characteristics.

[0119] Optionally, the acquisition module 701 is used for: The web development component sends a display instruction to the native development component to display the target page in full screen on the display device; The native development component responds to the display command, sets the screen to full-screen, and sends the display position and style information of the target bar to the web development component.

[0120] Optionally, the page display device further includes: The adjustment module is used to reduce the display transparency of the target bar's background after the target page is rendered in full screen and the target bar is rendered in the area to be displayed according to the display style characteristics. When an upward swipe operation is detected on the target page, the module reduces the display transparency of the target bar's background until the upward swipe distance on the target page is greater than a distance threshold, at which point the display transparency is adjusted to the target transparency.

[0121] Optionally, the page display device further includes: The second sending module is used for the web development component to send rendering instructions for the auxiliary icon to be displayed on the target page to the native development component; wherein, the rendering instructions carry the style information and rendering position information of the auxiliary icon; The second rendering module is used by natively developed components to respond to rendering commands and render auxiliary icons at the rendering location according to style information.

[0122] In summary, the page display device provided in the embodiments of this specification can respond to a display command on a display device to display the target page in full screen and obtain a display command on the display device for the target bar to display the target page in full screen. Based on the display position information of the target bar, the screen information of the corresponding display area of ​​the target bar in the target page can be determined. Combined with the display style information of the target bar, the display characteristics of the target bar that are more compatible with the target page can be determined. When the target page is rendered in full screen, the target bar is rendered in the display area according to the display characteristics. In this way, the target bar and the target page can be better integrated and displayed, and the full-screen display effect of the page after the target page is rendered in full screen can be better.

[0123] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the page display device is basically similar to the page display method embodiments, so the description is relatively simple; relevant parts can be referred to in the description of the page display method embodiments.

[0124] Figure 8 This is a structural block diagram of a computing device according to an embodiment of this specification. The components of the computing device 800 include, but are not limited to, a memory 810 and a processor 820. The processor 820 is connected to the memory 810 via a bus 830, and a database 850 is used to store data.

[0125] The computing device 800 also includes an access device 840, which enables the computing device 800 to communicate via one or more networks 860. Examples of these networks include Public Switched Telephone Network (PSTN), Local Area Network (LAN), Wide Area Network (WAN), Personal Area Network (PAN), or combinations of communication networks such as the Internet. The access device 840 may include one or more of any type of wired or wireless network interface (e.g., a network interface card (NIC)), such as an IEEE 802.11 Wireless Local Area Network (WLAN) wireless interface, a Wi-MAX (Worldwide Interoperability for Microwave Access) interface, an Ethernet interface, a Universal Serial Bus (USB) interface, a cellular network interface, a Bluetooth interface, or a Near Field Communication (NFC) interface.

[0126] In one embodiment of this specification, the above-described components of the computing device 800 and Figure 8 Other components, not shown, can also be connected to each other, for example, via a bus. It should be understood that... Figure 8 The block diagram of the computing device shown is for illustrative purposes only and is not intended to limit the scope of this specification. Those skilled in the art can add or replace other components as needed.

[0127] The computing device 800 can be any type of stationary or mobile computing device, including mobile computers or mobile computing devices (e.g., tablet computers, personal digital assistants, laptop computers, notebook computers, netbooks, etc.), mobile phones (e.g., smartphones), wearable computing devices (e.g., smartwatches, smart glasses, etc.) or other types of mobile devices, or stationary computing devices such as desktop computers or personal computers (PCs). The computing device 800 can also be a mobile or stationary server.

[0128] The processor 820 is configured to execute the following computer-executable instructions, which, when executed by the processor, implement the above-mentioned... Figure 1 , Figure 2 or Figure 5 The method shown.

[0129] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the computing device embodiments are basically similar to the page display method embodiments, so the description is relatively simple; relevant parts can be referred to in the description of the page display method embodiments.

[0130] This specification also provides a computer-readable storage medium storing computer instructions that, when executed by a processor, implement the steps of the page display method described above. The computer instructions include computer program code, which may be in the form of source code, object code, executable file, or some intermediate form. The computer-readable storage medium may include any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a portable hard drive, a magnetic disk, an optical disk, a computer memory, a read-only memory (ROM), a random access memory (RAM), an electrical carrier signal, a telecommunication signal, and a software distribution medium, etc. It should be noted that the content included in the computer-readable storage medium may be appropriately added to or subtracted according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, the computer-readable storage medium may not include electrical carrier signals and telecommunication signals.

[0131] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the computer-readable storage medium embodiments are basically similar to the page display method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions of the page display method embodiments.

[0132] This specification also provides a computer program in one embodiment, wherein when the computer program is executed in a computer, it causes the computer to perform the steps of the above-described page display method.

[0133] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the computer program embodiments are basically similar to the page display method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions of the page display method embodiments.

[0134] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.

[0135] It should be noted that the above description describes specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in a different order than that shown in the embodiments and still achieve the desired results. Furthermore, the processes depicted in the drawings do not necessarily require a specific or sequential order to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous. Secondly, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to the embodiments of this specification.

[0136] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0137] The preferred embodiments disclosed above are merely illustrative of this specification. The optional embodiments do not exhaustively describe all details, nor do they limit the invention to the specific implementations described. Clearly, many modifications and variations can be made based on the embodiments described herein. These embodiments are selected and specifically described in this specification to better explain the principles and practical applications of the embodiments, thereby enabling those skilled in the art to better understand and utilize this specification. This specification is limited only by the claims and their full scope and equivalents.< / number>

Claims

1. A page display method, characterized in that, The method includes: In response to a display command to display the target page in full screen on a display device, obtain the display position information and display style information of the target bar; Based on the display position information of the target bar, determine the area to be displayed in the target page corresponding to the target bar; Based on the display style information of the target bar and the screen information of the area to be displayed, the display style characteristics of the target bar are determined; The target page is rendered in full screen, and the target bar is rendered in the area to be displayed according to the display style characteristics; The display style information of the target bar includes the default color of the objects in the target bar, and the image information of the area to be displayed includes the color of the image in the area to be displayed; determining the display style characteristics of the target bar based on the display style information of the target bar and the image information of the area to be displayed includes: If the default color of the object in the target bar meets the color conflict condition with the color of the image in the area to be displayed, the color of each pixel in the area to be displayed is analyzed to obtain the target color parameter; based on the target color parameter, the display style feature of the object in the target bar is generated; wherein, the display style feature includes color feature.

2. The method according to claim 1, characterized in that, The objects in the target bar include icons, and the display style features also include icon shape features; And / or, the objects in the target bar include text, and the display style features also include font features.

3. The method according to claim 1, characterized in that, Determining the display style characteristics of the target bar includes: The web development component determines the display style characteristics of the target bar; wherein, the target bar includes the system status bar of the display device and the navigation bar of the target page; The method further includes: The web development component sends the display style features to the native development component; The step of rendering the target bar in the area to be displayed according to the display style features includes: The native development component renders the system status bar in the area to be displayed according to the display style characteristics; The web page development component renders the navigation bar in the area to be displayed according to the display style characteristics.

4. The method according to claim 3, characterized in that, The native development component renders the system status bar in the area to be displayed according to the display style characteristics, including: The native development component sets the background of the system status bar to a transparent background and renders the icons in the system status bar according to the display style characteristics.

5. The method according to claim 1, characterized in that, The step of responding to a display instruction to display the target page in full-screen mode on a display device, and obtaining the display position information and display style information of the target bar, includes: The web development component sends a display instruction to the native development component to display the target page in full screen on the display device; The native development component responds to the display command, sets up full-screen display, and sends the display position information and display style information of the target bar to the web development component.

6. The method according to any one of claims 1 to 5, characterized in that, After rendering the target page in full screen and rendering the target bar in the area to be displayed according to the display style characteristics, the method further includes: Upon detecting an upward swipe operation on the target page, the display transparency of the target bar's background is reduced until the upward swipe distance on the target page exceeds a distance threshold, at which point the display transparency is adjusted to the target transparency.

7. The method according to any one of claims 1 to 5, characterized in that, The method further includes: The web development component sends a rendering instruction for an auxiliary icon to be displayed on the target page to the native development component; wherein the rendering instruction carries the style information and rendering position information of the auxiliary icon; The native development component responds to the rendering instruction and renders the auxiliary icon at the rendering position according to the style information.

8. A page display device, characterized in that, The page display device includes: The acquisition module is used to obtain the display position information and display style information of the target bar in response to the display instruction to display the target page in full screen on the display device; The first determining module is used to determine the area to be displayed in the target page corresponding to the target bar based on the display position information of the target bar; The second determining module is used to determine the display style characteristics of the target bar based on the display style information of the target bar and the screen information of the area to be displayed; The rendering module is used to perform full-screen rendering of the target page and to render the target bar in the area to be displayed according to the display style characteristics; The display style information of the target bar includes the default color of the objects in the target bar, and the image information of the area to be displayed includes the color of the image in the area to be displayed; the second determining module is used for: If the default color of the object in the target bar meets the color conflict condition with the color of the image in the area to be displayed, the color of each pixel in the area to be displayed is analyzed to obtain the target color parameter; based on the target color parameter, the display style feature of the object in the target bar is generated; wherein, the display style feature includes color feature.

9. A computing device, characterized in that, include: Memory and processor; The memory is used to store computer-executable instructions, and the processor is used to execute the computer-executable instructions, which, when executed by the processor, implement the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The device stores computer-executable instructions that, when executed by a processor, implement the method according to any one of claims 1 to 7.

Images