Page display method, electronic device, and storage medium

Abstract

Embodiments of the present application provide a page display method, an electronic device and a storage medium, and relate to the technical field of communication. The method comprises: in response to an operation of a user opening a quick application, a rendering module loads a quick application page, wherein the quick application page comprises at least one web component; the rendering module sends associated information of the web component to a window management module; the window management module creates a web page window at the position of the web component based on the associated information of the web component, and loads a web page in the web page window, wherein the web page is overlaid on the web component. The method provided by the embodiments of the present application can display a quick application page on a PC, and can effectively improve the efficiency of displaying a quick application page.

Description

Technical Field

[0001] This application relates to the field of communication technology, and in particular to a page display method, electronic device, and storage medium. Background Technology

[0002] Quick Apps are a new type of application that requires no installation. The web component in the Quick App specification can be used to load Hypertext Markup Language (HTML) pages that specify a Uniform Resource Locator (URL).

[0003] Currently, web components are only implemented on the Android platform based on the native Android WebView component. However, there is no corresponding implementation solution on personal computers (PCs), so it is impossible to browse the pages of quick apps on PCs. Summary of the Invention

[0004] This application provides a page display method, an electronic device, and a storage medium to provide a way to display the page of a quick app on a PC, thereby improving the efficiency of browsing quick apps on a PC and thus improving the user experience.

[0005] In a first aspect, embodiments of this application provide a page display method applied to an electronic device, the electronic device including a rendering module and a window management module, comprising:

[0006] In response to a user opening a quick app, the rendering module loads the quick app page, which includes at least one web component. The electronic device can be a laptop or a desktop computer. The rendering module can be a component rendering engine or other modules with rendering capabilities; this application embodiment does not specifically limit the name of the rendering module in actual application. The quick app can be an installation-free application or a mini-program; this application embodiment does not specifically limit the specific form of the quick app.

[0007] The rendering module sends the association information of the web component to the window management module; specifically, the association information of the web component can be used to generate the window that carries the web page.

[0008] The window management module creates a web page window at the location of the web component based on the association information of the web component, and loads the web page in the web page window, where the web page covers the web component.

[0009] In this embodiment, by requesting the window management module to load the webpage when the quick app page is loaded, and then displaying the loaded webpage on the quick app page, the quick app page on the PC can be displayed quickly, and the display efficiency of the quick app page can be improved.

[0010] In order to effectively create a window that carries a webpage, one possible implementation includes associated information such as preset size information, preset positioning information, and preset webpage address.

[0011] In order to determine the hierarchical relationship between web pages and quick app pages, one possible implementation includes page hierarchy information, which is used to characterize the hierarchical relationship between quick app pages and web pages.

[0012] In order to enable web pages to load quickly, one possible implementation is to preset the web page address in the quick application.

[0013] One possible implementation also includes:

[0014] In response to a third event detected by the rendering module, update information for the web component is sent to the window management module; the third event can be a scroll event of the quick app page.

[0015] The window management module updates webpage windows based on update information.

[0016] In this embodiment of the application, by detecting the scrolling event of the quick app page, the content carried in the web component can be updated, thereby synchronizing the content displayed on the quick app page and the web page.

[0017] In one possible implementation, all web components are visible on the quick app page. The update information includes updated positioning information, which represents the position of the web components after scrolling on the quick app page. The window management module updates the web page window based on the update information, including:

[0018] The window management module updates the position of the web page window based on the updated location information and overlays the web page window with the updated position on top of the web component with the updated position.

[0019] In this embodiment, since all web components are visible on the quick app page after scrolling, the rendering module only needs to pass the updated positioning information to the window management module. In other words, the window management module only needs to update the position of the web page window, which reduces information interaction and the amount of computation of the window management module, thereby improving the efficiency of the system.

[0020] In one possible implementation, the web component is partially visible on the quick app page. The update information includes updated positioning information and updated size information. The updated positioning information represents the position of the web component after scrolling on the quick app page, and the updated size information represents the size of the visible portion of the web component after scrolling on the quick app page. The window management module updates the webpage window based on the update information, including:

[0021] The window management module updates the web page window based on the updated positioning and size information, and then overlays the updated web page window onto the web component whose position has been updated.

[0022] In this embodiment, since the web components are partially visible on the quick app page after scrolling, the rendering module needs to pass updated positioning information and updated size information to the window management module. In other words, the window management module needs to update the web page window according to the updated positioning information and updated size information, thereby completing the synchronization between the quick app page and the web page.

[0023] In one possible implementation, the web component is not visible on the quick app page. The update information is used to notify the window management module that the web component is not visible on the quick app page. The window management module updates the web page window based on the update information, including:

[0024] The window management module deletes webpage windows.

[0025] In this embodiment of the application, when the web component is not visible in the quick app page, the window management module can delete the web page window, thereby clearing the cache of the window management module and improving cache efficiency.

[0026] In order to effectively locate web components, one possible implementation includes pre-defined positioning information such as the distance between the web component and the top or bottom border of the quick app page, and the distance between the web component and the left or right border of the quick app page.

[0027] One possible implementation also includes:

[0028] In response to a first event detected by the window management module, a notification message is sent to the rendering module, wherein the notification message is used to notify the rendering module that the webpage has failed to load; wherein the first event may be a webpage loading failure event.

[0029] The rendering module displays notification messages on the Quick App page.

[0030] In this embodiment of the application, by displaying the event of webpage loading failure on the quick app page, the user can be effectively reminded that the webpage has failed to load, thereby saving the user's waiting time and improving the user experience.

[0031] One possible implementation also includes:

[0032] In response to a second event detected by the window management module, the loading progress of the webpage is sent to the rendering module; the second event may be an event that monitors the loading progress of the webpage.

[0033] The rendering module displays the loading progress on the Quick App page.

[0034] In this embodiment of the application, by displaying the webpage loading progress on the quick app page, the user can be reminded of the current loading progress of the webpage, thereby improving the user experience.

[0035] Secondly, embodiments of this application provide an apparatus, comprising:

[0036] The rendering module is used to respond to the user's action of opening a quick app, load the quick app page, wherein the quick app page includes at least one web component; and send the association information of the web component to the window management module;

[0037] The window management module is used to create web page windows at the location of web components based on the association information of web components, and load web page pages in the web page windows, where the web page pages are overlaid on the web components.

[0038] In one possible implementation, the associated information includes preset size information, preset positioning information, and preset webpage address.

[0039] In one possible implementation, the associated information also includes page hierarchy information, which is used to characterize the hierarchical relationship between the quick app page and the web page.

[0040] In one possible implementation, the preset webpage address is pre-defined in the quick app.

[0041] In one possible implementation, the rendering module is also used to send update information of the web component to the window management module in response to a third event; the window management module is also used to update the web page window based on the update information.

[0042] In one possible implementation, all web components are visible on the quick app page. The update information includes updated location information, which is used to represent the position of the web component after scrolling on the quick app page. The window management module is also used to update the position of the web page window based on the updated location information and overlay the web component with the updated position of the web page window.

[0043] In one possible implementation, the web component is partially visible on the quick app page. The update information includes updated positioning information and updated size information. The updated positioning information is used to represent the position of the web component after scrolling on the quick app page, and the updated size information is used to represent the size of the visible part of the web component after scrolling on the quick app page. The window management module is also used to update the web page window based on the updated positioning information and updated size information, and to overlay the updated web page window on the web component whose position has been updated.

[0044] In one possible implementation, the web component is not visible on the quick app page. The update information is used to notify the window management module that the web component is not visible on the quick app page. The window management module is also used to delete the web page window.

[0045] In one possible implementation, the preset positioning information includes the distance between the web component and the top or bottom border of the quick app page, and the distance between the web component and the left or right border of the quick app page.

[0046] In one possible implementation, the window management module is also used to send a notification message to the rendering module in response to the first event it has listened to. The notification message is used to notify the rendering module that the webpage has failed to load. The rendering module is also used to display the notification message on the quick app page.

[0047] In one possible implementation, the window management module is also used to send the loading progress of the web page to the rendering module in response to the second event it has been listening for; the rendering module is also used to display the loading progress on the quick app page.

[0048] Thirdly, embodiments of this application provide an electronic device, including:

[0049] The memory is used to store computer program code, which includes instructions. The electronic device also includes a rendering module and a window management module. When the electronic device reads the instructions from the memory, it causes the electronic device to perform the following steps:

[0050] In response to a user opening a quick app, the rendering module loads the quick app page, which includes at least one web component.

[0051] The rendering module sends the association information of the web components to the window management module;

[0052] The window management module creates a web page window at the location of the web component based on the association information of the web component, and loads the web page in the web page window, where the web page covers the web component.

[0053] In one possible implementation, when the above instructions are executed by the electronic device, the electronic device further performs the following steps:

[0054] In response to a third event detected by the rendering module, update information for the web component is sent to the window management module.

[0055] The window management module updates webpage windows based on update information.

[0056] In one possible implementation, all web components are visible on the quick app page. The update information includes updated positioning information, which represents the position of the web components after scrolling on the quick app page. When the above instruction is executed by the electronic device, the steps of the window management module of the electronic device to update the web page window based on the update information include:

[0057] The window management module updates the position of the web page window based on the updated location information and overlays the web page window with the updated position on top of the web component with the updated position.

[0058] In one possible implementation, the web component is partially visible on the quick app page. The update information includes updated positioning information and updated size information. The updated positioning information represents the position of the web component after scrolling on the quick app page, and the updated size information represents the size of the visible portion of the web component after scrolling on the quick app page. When the above instruction is executed by the electronic device, the steps of the window management module updating the web page window based on the update information include:

[0059] The window management module updates the web page window based on the updated positioning and size information, and then overlays the updated web page window onto the web component whose position has been updated.

[0060] In one possible implementation, the web component is not visible on the quick app page. The update information is used to notify the window management module that the web component is not visible on the quick app page. When the above instruction is executed by the electronic device, the steps for the electronic device to execute the window management module to update the web page window based on the update information include:

[0061] The window management module deletes webpage windows.

[0062] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when run on a computer, causes the computer to perform the method described in the first aspect.

[0063] Fifthly, embodiments of this application provide a computer program that, when executed by a computer, performs the method described in the first aspect.

[0064] In one possible design, the program in the fifth aspect can be stored wholly or partially on a storage medium packaged with the processor, or it can be stored wholly or partially on a memory not packaged with the processor. Attached Figure Description

[0065] Figure 1 This is a schematic diagram illustrating an application scenario provided in the embodiments of this application;

[0066] Figure 2 A schematic diagram of the system architecture of the electronic device provided in the embodiments of this application;

[0067] Figure 3 A schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application;

[0068] Figure 4 A flowchart illustrating an embodiment of the page display method provided in this application;

[0069] Figure 5 This is a schematic diagram illustrating the page overlay display effect provided in an embodiment of this application;

[0070] Figure 6 This is a schematic diagram of the structure of one embodiment of the page display device provided in this application. Detailed Implementation

[0071] The technical solutions of the embodiments of this application will be described below with reference to the accompanying drawings. In the description of the embodiments of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B; the term "and / or" in this document is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone.

[0072] Hereinafter, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of embodiments of this application, unless otherwise stated, "a plurality of" means two or more.

[0073] Currently, there are two ways to display Quick App pages on a PC:

[0074] Method 1: Implemented based on iframe

[0075] In method one, the server resource usually specifies the domain name that requests the resource. Therefore, if a website from another domain loads the resource, the page will show an error. In other words, method one cannot solve the cross-domain problem.

[0076] Method 2: Implementation based on the WebView component

[0077] In method two, the aforementioned WebView component can typically be provided by the NW.js or Electron framework. Both NW.js and Electron frameworks provide the WebView tag based on Google's Chromium WebView implementation. However, the use of this WebView tag is not recommended in Google's official documentation. Therefore, navigation, event routing, and other functionalities may encounter problems, and long-term stable availability cannot be guaranteed, leading to stability issues.

[0078] To address the aforementioned problems, this application proposes a page display method, which is applied to an electronic device 100. The electronic device 100 may be a PC.

[0079] The following is combined with Figures 1-4 The above page display method is explained.

[0080] Figure 1 This is an application scenario architecture diagram of an embodiment of this application. For example... Figure 1As shown, Quick App Developer 10 can be a developer who develops Quick Apps. After completing any Quick App, Quick App Developer 10 can upload it to Developer Portal 20, which can be a website storing the Quick Apps and providing different Quick Apps to users. Then, users can request a Quick App from Developer Portal 20 through a client (e.g., Application Management 31) installed on Terminal Device 30 (e.g., PC). Upon receiving the Quick App request from Terminal Device 30, Developer Portal 20 can send the Quick App resource package to Terminal Device 30. After receiving the Quick App resource package from Developer Portal 20, Application Management 31 on Terminal Device 30 can decompress the Quick App resource package and instruct Component Rendering Engine 32 on Terminal Device 30 to parse the page data and render the components, thereby generating a Quick App page. It is understood that the Quick App can be a novel, installation-free application or a mini-program; this embodiment does not specifically limit the presentation format of Quick Apps.

[0081] It should be noted that when the developers develop Quick Apps, they can specify a domain name (e.g., https: / / www.huawei.com) for the web components of the Quick App page. This allows the component rendering engine 32 to request the window management module 33 in the terminal device 30 to load and render the page with the specified domain name when rendering the component.

[0082] Figure 2 The system architecture of the terminal device 30 described above can be the electronic device 100 described above. The terminal device 30 can be, for example, a portable computer or a desktop computer. The terminal device 30 can run a corresponding operating system, such as Windows, Linux, or macOS.

[0083] like Figure 2As shown, the terminal device 30 may include an application management 31, a component rendering engine 32, and a window management module 33. The application management 31 can be used to download, verify signatures, decompress files, and parse page files for quick apps. It is understood that the above example only illustrates some of the functions of the application management 31; in some embodiments, the application management 31 may include more functions. The component rendering engine 32 can be used to load quick app pages and render the components within those pages. These components may include common components (e.g., button components and text components) and web components, which can be used to host the page loaded by the window management module 33. The window management module 33 can load a webpage corresponding to a specified domain name, render that webpage, and then overlay the rendered page onto the corresponding position of the web component in the quick app page.

[0084] In specific implementation, the aforementioned window management module 33 can adopt a browser view framework, which is a window capable of loading web pages. However, this does not constitute a limitation on the embodiments of this application; in some embodiments, other frameworks capable of loading web pages may also be used.

[0085] The following is combined with Figure 3 First, we introduce the exemplary electronic devices provided in the following embodiments of this application. Figure 3 A schematic diagram of the structure of the electronic device 100 is shown. For example... Figure 3 As shown, the electronic device 100 includes a processor 110, a display screen 120, a memory 130, an I / O subsystem 140, and other input devices 150.

[0086] The processor 110 is the control center of the electronic device 100. It connects various parts of the electronic device 100 via various interfaces and lines. By running or executing software programs and / or modules stored in the memory 130, and by calling data stored in the memory 130, it performs various functions and processes data of the electronic device 100, thereby providing overall monitoring of the electronic device 100. Optionally, the processor 110 may include one or more processing units; preferably, the processor 110 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the modem processor may not be integrated into the processor 110.

[0087] The display screen 120 can be used to display information input by the user or information provided to the user, as well as various menus of the electronic device 100, and can also accept user input. Specifically, the display screen 120 may include a display panel 121 and a touch panel 122. The display panel 121 can be configured using a liquid crystal display (LCD), organic light-emitting diode (OLED), or other similar methods. The touch panel 122, also known as a touch screen or touch-sensitive screen, can collect user touch or non-touch operations on or near it (such as operations performed by the user using a finger, stylus, or any suitable object or accessory on or near the touch panel 122; it can also include motion sensing operations; these operations include single-point control operations, multi-point control operations, etc.), and drive corresponding connected devices according to a pre-set program. Optionally, the touch panel 122 may include a touch detection device and a touch controller. The touch detection device detects the user's touch position and posture, and detects the signals generated by the touch operation, transmitting the signals to the touch controller. The touch controller receives touch information from the touch detection device, converts it into information that the processor can process, and sends it to the processor 110. It can also receive and execute commands from the processor 110. Furthermore, the touch panel 122 can be implemented using various types of technologies, such as resistive, capacitive, infrared, and surface acoustic waves, or any future-developed technology. Further, the touch panel 122 can cover the display panel 121. The user can operate on or near the touch panel 122 covered by the display panel 121 based on the content displayed on the display panel 121 (including but not limited to a soft keyboard, virtual mouse, virtual buttons, icons, etc.). After detecting the operation on or near the touch panel 122, the touch panel 122 transmits it to the processor 110 through the I / O subsystem 140 to confirm the user input. Subsequently, the processor 110 provides corresponding visual output on the display panel 121 based on the user input through the I / O subsystem 140. Although... Figure 3 In this embodiment, the touch panel 122 and the display panel 121 are two separate components to realize the input and output functions of the electronic device 100. However, in some embodiments, the touch panel 122 and the display panel 121 can be integrated to realize the input and output functions of the electronic device 100.

[0088] The memory 130 can be used to store software programs and modules. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the software programs and modules stored in the memory 130. The memory 130 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function, etc.; the data storage area may store data created based on the use of the electronic device 100, etc. In addition, the memory 130 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0089] The I / O subsystem 140 controls external devices for input and output, and may include an other input device controller 141 and a display controller 142. Optionally, one or more other input device controllers 141 receive signals from and / or send signals to other input devices 150. Other input devices 150 may include physical buttons (press buttons, rocker buttons, etc.), dial pads, slide switches, joysticks, click wheels, and optical mice (optical mice are touch-sensitive surfaces that do not display visual output, or extensions of touch-sensitive surfaces formed by touchscreens). It is worth noting that the other input device controller 141 can be connected to any one or more of the above-mentioned devices. The display controller 142 in the I / O subsystem 140 receives signals from and / or sends signals to the display screen 120. After the display screen 120 detects user input, the display controller 142 converts the detected user input into interaction with user interface objects displayed on the display screen 120, thus realizing human-computer interaction.

[0090] Other input devices 150 can be used to receive input numeric or character information, and to generate key signal inputs related to user settings and function control of electronic device 100. Specifically, other input devices 150 may include, but are not limited to, one or more of the following: physical keyboard, function keys (such as volume control buttons, power buttons, etc.), trackball, mouse, joystick, optical mouse (an optical mouse is a touch-sensitive surface that does not display visual output, or an extension of the touch-sensitive surface formed by a touch screen). Other input devices 150 are connected to other input device controllers 141 of I / O subsystem 140, and interact with processor 110 under the control of other input device controllers 141.

[0091] Figure 4 A flowchart illustrating one embodiment of the page display method provided in this application includes:

[0092] Step 401: In response to the user's action, component rendering engine 32 loads the quick app page.

[0093] Specifically, the component rendering engine 32 can be integrated into or stand independently of the Quick App Center, which can be an application installed on the electronic device 100. Users can operate on the electronic device 100; for example, a user can select and click a Quick App on the Quick App Center page displayed on the screen 120 of the electronic device 100 to download it. In response to the user's operation, the component rendering engine 32 can load the Quick App page, which may include at least one web component. Optionally, the Quick App page may also include one or more commonly used components. These commonly used components may include button components, text components, etc.

[0094] In practical implementation, in response to user actions, application management 31 can download the quick app requested by the user and decompress it after downloading. Then, application management 31 can instruct component rendering engine 32 to parse the data of the quick app page, thereby loading the quick app page.

[0095] It is understood that the above-described click operation only exemplifies the operation of downloading the aforementioned quick app and loading the quick app page. In some embodiments, the aforementioned quick app can also be downloaded and the quick app page can be loaded by other user operations.

[0096] Step 402: The component rendering engine 32 obtains the preset size information, preset positioning information, and preset web page address of the web component in the quick app page.

[0097] Specifically, when the component rendering engine 32 loads the quick app page, it can also obtain the preset size information, preset positioning information, and preset web page address of the web component. The web component can be used to host the web page loaded and displayed by the window management module 33. The preset web page address can be a preset domain name in the quick app (e.g., https: / / www.huawei.com). For example, developers can preset this web page address when developing the quick app, so that when a user opens the quick app and loads the quick app page, they can request the window management module 33 to load the web page corresponding to the preset web page address.

[0098] It is understandable that the number of the aforementioned web components can be one or more, and each web component can contain a corresponding preset web page address. Next, we will take the example of a quick app page containing one web component (for ease of explanation, this web component will be referred to as the "first web component" below). The scenario where the quick app page contains multiple web components can refer to the method of the first web component mentioned above, and will not be repeated here.

[0099] The size information of the first web component may include its width and height. The positioning information of the first web component may include the distance between the first web component and the top edge of the quick app page, the distance between the first web component and the bottom edge of the quick app page, the distance between the first web component and the left edge of the quick app page, and the distance between the first web component and the right edge of the quick app page.

[0100] It is understood that the positioning information of the first web component may include even less information. For example, the positioning information of the first web component may include the distance between the first web component and the top edge of the quick app page and the distance between the first web component and the left edge of the quick app page.

[0101] In a specific implementation, the distance between the first web component and the top edge of the quick app page can be the distance between the center of the first web component and the top edge of the quick app page; the distance between the first web component and the bottom edge of the quick app page can be the distance between the center of the first web component and the bottom edge of the quick app page; the distance between the first web component and the left edge of the quick app page can be the distance between the center of the first web component and the left edge of the quick app page; and the distance between the first web component and the right edge of the quick app page can be the distance between the center of the first web component and the right edge of the quick app page.

[0102] Optionally, the distance between the first web component and the top edge of the quick app page can also be the distance between the top edge of the first web component and the top edge of the quick app page; the distance between the first web component and the bottom edge of the quick app page can also be the distance between the bottom edge of the first web component and the bottom edge of the quick app page; the distance between the first web component and the left edge of the quick app page can also be the distance between the left edge of the first web component and the left edge of the quick app page; the distance between the first web component and the right edge of the quick app page can also be the distance between the right edge of the first web component and the right edge of the quick app page.

[0103] It is understood that the method described above for determining the location between the first web component and the quick app page does not constitute a limitation on the embodiments of this application. In some embodiments, the location information between the first web component and the quick app page can also be determined by other distance calculation methods.

[0104] In step 403, the component rendering engine 32 sends the preset size information, preset positioning information and preset web page address of the first web component to the window management module 33.

[0105] Specifically, the window management module 33 can be integrated into the Quick App Center or operate independently of it. To enable the window management module 33 to load web pages, the component rendering engine 32 can send the preset size information, preset positioning information, and preset web page address of the first web component to the window management module 33. This allows the window management module 33 to create a corresponding web page window based on the preset size and positioning information, and to load web page data within that window.

[0106] Optionally, the component rendering engine 32 can also send page hierarchy information to the window management module 33. This page hierarchy information is used to identify the hierarchical relationship between the web page and the quick app page. For example, the web page can be located on top of the quick app page, thereby allowing the web page to overlay the quick app page.

[0107] It is understood that when the component rendering engine 32 sends the aforementioned preset size information, preset positioning information, preset webpage address, and page hierarchy information to the window management module 33, one possible approach is that the component rendering engine 32 can send the aforementioned preset size information, preset positioning information, preset webpage address, and page hierarchy information to the application management 31 in the electronic device 100, and the application management 31 can then send the aforementioned preset size information, preset positioning information, preset webpage address, and page hierarchy information to the window management module 33. The application management 31 can be integrated into the Quick App Center, or it can be independent of the Quick App Center. This application embodiment does not limit the method by which the component rendering engine 32 sends the aforementioned preset size information, preset positioning information, preset webpage address, and page hierarchy information to the window management module 33 to a single implementation.

[0108] In step 404, the window management module 33 receives the preset size information, preset positioning information and preset web page address of the first web component sent by the component rendering engine 32, and loads the web page corresponding to the preset web page address in the quick app page based on the preset size information and preset positioning information.

[0109] Specifically, when the window management module 33 receives the preset size information, preset positioning information and preset web page address of the first web component sent by the component rendering engine 32, it can create a web page window of the same size as the preset size information of the first web component at the position corresponding to the preset positioning information.

[0110] Next, the window management module 33 can load and render the web page data based on the preset web page address in the web page window created above, thereby obtaining the web page, and can overlay the web page on the position of the first web component in the quick app page based on the page hierarchy information.

[0111] Now combined Figure 5 The loading of the above webpage will be explained. For example... Figure 5 As shown, the Quick App page 500 includes components 501, 502, and 503. Components 501 and 502 are commonly used components, meaning they can be directly rendered by the component rendering engine 32. Component 503 is a web component, meaning it doesn't necessarily display any content directly. In this case, the window management module 33 can create a webpage window at the location of component 503. This webpage window is typically the same size as component 503, covering it, and loads and renders the webpage data within it to obtain webpage 510. This allows component 503 to display webpage 510, thus avoiding cross-domain display issues when users open the Quick App page on the electronic device 100 and improving the stability of the Quick App page display.

[0112] Optionally, the window management module 33 can also create a corresponding webpage window based on the aforementioned preset size information, and load webpage data corresponding to the preset webpage address into the webpage window. Then, the window management module 33 can send the webpage data to the component rendering engine 32, which will then render the webpage data in the first web component, thereby enabling the first web component to display the webpage.

[0113] Step 405: The window management module 33 listens for the first event and notifies the component rendering engine 32 to display the result based on the listening result.

[0114] Optionally, during the loading of the aforementioned webpage, the window management module 33 can also listen for a first event. This first event can be an error event, which could be caused by an error occurring during the loading process of the webpage by the window management module 33, resulting in a loading failure.

[0115] In practical implementation, if the window management module 33 detects the aforementioned first event, that is, if the window management module 33 detects a webpage loading error, it can send a notification message. This notification message can be used to notify the component rendering engine 32 that the webpage loading has failed. After receiving the notification message sent by the window management module 33, the component rendering engine 32 can display the notification message on the aforementioned quick app page, so that the user can understand the current loading status of the webpage, thereby improving the user experience.

[0116] Step 406: The window management module 33 listens for the second event and notifies the component rendering engine 32 to display the result based on the listening result.

[0117] Optionally, during the loading of the aforementioned webpage, the window management module 33 can also listen for a second event. This second event could be the loading progress of the webpage.

[0118] In its implementation, the window management module 33 can continuously listen for the second event. This means the window management module 33 can continuously monitor the loading progress of the webpage and send this progress information to the component rendering engine 32. Once the component rendering engine 32 receives the loading progress information from the window management module 33, it can display the progress on the quick application page, allowing users to understand the current loading status of the webpage and thus improving the user experience.

[0119] Step 407: The component rendering engine 32 listens for the third event and sends updated positioning information to the window management module 33 based on the listening result.

[0120] Optionally, the aforementioned third event can be a scrolling event of the quick app page, which can be triggered by the user. For example, the user can scroll the quick app page, thereby triggering the third event. When the component rendering engine 32 detects that the quick app page has scrolled, that is, when the component rendering engine 32 detects the aforementioned third event, it can recalculate the positioning information of the first web component in the quick app page. At this time, the recalculated positioning information can include the following three scenarios.

[0121] Scenario 1: The first web component is fully visible on the Quick App page.

[0122] When a user scrolls through the Quick App page, if the first web component is fully visible within the Quick App page, the component rendering engine 32 can recalculate the current positioning information of the first web component within the Quick App page to obtain updated positioning information. This updated positioning information can then be sent to the window management module 33. Upon receiving this updated positioning information, the window management module 33 can delete the original window, recreate the window, and overlay the recreated window onto the first web component with its updated position based on the updated positioning information. The new web page will then be reloaded and rendered within the recreated window. Preferably, upon receiving the updated positioning information, the window management module 33 may not need to delete the original window. For example, it can reset the positioning information of the original window to obtain an updated window, which can then be overlaid onto the first web component with its updated position based on the updated positioning information. It is understood that since the first web component is fully visible within the Quick App page, its size and displayed content remain unchanged; only its position changes.

[0123] Scenario 2: The first web component is partially visible on the Quick App page.

[0124] When a user scrolls the Quick App page, if the first web component is partially visible within the Quick App page, the component rendering engine 32 can calculate the positioning and size information of the visible portion of the first web component within the Quick App page to obtain updated positioning and size information. This updated positioning and size information can then be sent to the window management module 33. Upon receiving this updated positioning and size information, the window management module 33 can delete the original window, recreate the window based on the updated size information, and overlay the recreated window onto the first web component with the updated position based on the updated positioning information. The webpage is then reloaded and rendered within the recreated window. Preferably, upon receiving the updated positioning and size information, the window management module 33 may not need to delete the original window. For example, it can reset the positioning and size information of the original window to obtain an updated window, which is then overlaid onto the first web component with the updated position based on the updated positioning information. Understandably, since the first web component is partially visible in the quick app page, and the position, size, and displayed content of the first web component have changed, the window management module 33 can overlay the window with the updated size onto the first web component with the updated position.

[0125] Scenario 3: The first web component is not visible on the quick app page.

[0126] When a user scrolls through the Quick App page, if the first web component becomes invisible, the component rendering engine 32 can send a notification message to the window management module 33. This notification message informs the window management module 33 that the first web component is not visible on the Quick App page. Upon receiving this notification message, the window management module 33 can delete the original window. Since the first web component is no longer visible on the Quick App page, the window management module 33 does not need to recreate the webpage window.

[0127] It is understood that in the above embodiments, steps 401-407 are optional steps. In other possible embodiments, more or fewer steps than steps 401-407 may be included, and the execution order between the steps may be adjusted where feasible. This application does not limit this.

[0128] Figure 6 This is a schematic diagram of the structure of one embodiment of the page display device of this application, as shown below. Figure 6 As shown, the page display device 60 may include: a rendering module 61 and a window management module 62; wherein,

[0129] The rendering module 61 is used to load the quick app page in response to the user's operation of opening the quick app, wherein the quick app page includes at least one web component; and to send the association information of the web component to the window management module 62.

[0130] The window management module 62 is used to create a web page window at the location of the web component based on the association information of the web component, and load the web page in the web page window, wherein the web page overlays the web component.

[0131] In one possible implementation, the associated information includes preset size information, preset positioning information, and preset webpage address.

[0132] In one possible implementation, the associated information also includes page hierarchy information, which is used to characterize the hierarchical relationship between the quick app page and the web page.

[0133] In one possible implementation, the preset webpage address is pre-defined in the quick app.

[0134] In one possible implementation, the rendering module 61 is also used to send update information of the web component to the window management module 62 in response to a third event; the window management module 62 is also used to update the web page window based on the update information.

[0135] In one possible implementation, all web components are visible on the quick app page. The update information includes updated location information, which is used to represent the position of the web component after scrolling on the quick app page. The window management module 62 is also used to update the position of the web page window based on the updated location information and overlay the web component with the updated position of the web page window.

[0136] In one possible implementation, the web component is partially visible in the quick app page. The update information includes updated positioning information and updated size information. The updated positioning information is used to represent the position of the web component after scrolling on the quick app page, and the updated size information is used to represent the size of the visible part of the web component after scrolling on the quick app page. The window management module 62 is also used to update the web page window based on the updated positioning information and updated size information, and to overlay the updated web page window on the web component whose position has been updated.

[0137] In one possible implementation, the web component is not visible on the quick app page, and the update information is used to notify the window management module 62 that the web component is not visible on the quick app page. The window management module 62 is also used to delete the web page window.

[0138] In one possible implementation, the preset positioning information includes the distance between the web component and the top or bottom border of the quick app page, and the distance between the web component and the left or right border of the quick app page.

[0139] In one possible implementation, the window management module 62 is also used to send a notification message to the rendering module 61 in response to the first event it has listened to. The notification message is used to notify the rendering module 61 that the webpage has failed to load. The rendering module 61 is also used to display the notification message on the quick app page.

[0140] In one possible implementation, the window management module 62 is also used to send the loading progress of the web page to the rendering module 61 in response to the second event it has been listening for; the rendering module 61 is also used to display the loading progress on the quick app page.

[0141] Figure 6 The page display device 60 provided in the illustrated embodiment can be used to execute this application. Figures 1-5 The implementation principle and technical effects of the method embodiment shown can be further referred to the relevant description in the method embodiment.

[0142] The above should be understood Figure 6The division of modules in the illustrated page display device is merely a logical functional division. In actual implementation, they can be fully or partially integrated into a single physical entity, or they can be physically separated. These modules can be implemented entirely in software via processing element calls; they can be fully implemented in hardware; or some modules can be implemented in software via processing element calls, while others are implemented in hardware. For example, the detection module can be a separate processing element or integrated into a chip in the electronic device. The implementation of other modules is similar. Furthermore, these modules can be fully or partially integrated together, or implemented independently. During implementation, each step of the above method or each of the above modules can be completed through integrated logic circuits in the hardware of the processor element or through software instructions.

[0143] For example, these modules can be one or more integrated circuits configured to implement the above methods, such as one or more Application Specific Integrated Circuits (ASICs), one or more Digital Signal Processors (DSPs), or one or more Field Programmable Gate Arrays (FPGAs). Alternatively, these modules can be integrated together as a System-On-a-Chip (SOC).

[0144] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0145] It is understood that the aforementioned electronic devices, etc., include hardware structures and / or software modules corresponding to the execution of each function in order to achieve the above-mentioned functions. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein, the embodiments of this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed by hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the embodiments of this application.

[0146] This application embodiment can divide the above-mentioned electronic device into functional modules according to the method example described above. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. It should be noted that the module division in this application embodiment is illustrative and only represents one logical functional division. In actual implementation, there may be other division methods.

[0147] Through the above description of the embodiments, those skilled in the art will clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device, and unit described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0148] In the embodiments of this application, the functional units can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0149] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, essentially, or the parts that contribute to the prior art, or all or part of the technical solutions, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as flash memory, portable hard disk, read-only memory, random access memory, magnetic disk, or optical disk.

[0150] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A page display method, applied to an electronic device, the electronic device comprising a rendering module and a window management module, characterized in that, The method includes: In response to a user opening a quick app, the rendering module loads the quick app page, wherein the quick app page includes at least one web component; The rendering module sends the association information of the web component to the window management module; The window management module creates a webpage window at the location of the web component based on the association information of the web component, and loads the webpage in the webpage window, wherein the webpage covers the web component; The associated information includes preset size information, preset location information, and preset webpage address, which is preset in the quick application.

2. The method according to claim 1, characterized in that, The associated information also includes page hierarchy information, which is used to characterize the hierarchical relationship between the quick app page and the web page.

3. The method according to claim 1, characterized in that, The method further includes: In response to a third event detected by the rendering module, update information of the web component is sent to the window management module; The window management module updates the webpage window based on the update information.

4. The method according to claim 3, characterized in that, All web components are visible on the quick app page. The update information includes updated location information, which indicates the position of the web components after scrolling on the quick app page. The window management module updates the webpage window based on the update information, including: The window management module updates the position of the webpage window based on the updated positioning information, and overlays the webpage window with the updated position onto the web component with the updated position.

5. The method according to claim 3, characterized in that, The web component is partially visible on the quick app page. The update information includes updated positioning information and updated size information. The updated positioning information represents the position of the web component after scrolling on the quick app page. The updated size information represents the size of the visible portion of the web component after scrolling on the quick app page. The window management module updates the webpage window based on the update information, including: The window management module updates the webpage window based on the updated positioning information and updated size information, and overlays the updated webpage window onto the web component whose position has been updated.

6. The method according to claim 3, characterized in that, The web component is not visible on the quick app page. The update information is used to notify the window management module that the web component is not visible on the quick app page. The window management module updates the web page window based on the update information, including: The window management module deletes the webpage window.

7. The method according to claim 1, characterized in that, The preset positioning information includes the distance between the web component and the top or bottom border of the quick app page, and the distance between the web component and the left or right border of the quick app page.

8. The method according to any one of claims 1-7, characterized in that, The method further includes: In response to a first event detected by the window management module, a notification message is sent to the rendering module, wherein the notification message is used to notify the rendering module that the webpage has failed to load; The rendering module displays the notification message on the quick app page.

9. The method according to any one of claims 1-7, characterized in that, The method further includes: In response to the second event detected by the window management module, the loading progress of the webpage is sent to the rendering module; The rendering module displays the loading progress on the quick app page.

10. An electronic device, characterized in that, The electronic device includes: a memory for storing computer program code, the computer program code including instructions; a rendering module and a window management module; and a method for the electronic device to perform the following steps when it reads the instructions from the memory: In response to a user opening a quick app, the rendering module loads the quick app page, wherein the quick app page includes at least one web component; The rendering module sends the association information of the web component to the window management module; The window management module creates a webpage window at the location of the web component based on the association information of the web component, and loads the webpage in the webpage window, wherein the webpage covers the web component; The associated information includes preset size information, preset location information, and preset webpage address, which is preset in the quick application.

11. The electronic device according to claim 10, characterized in that, When the instruction is executed by the electronic device, the electronic device further performs the following steps: In response to a third event detected by the rendering module, update information of the web component is sent to the window management module; The window management module updates the webpage window based on the update information.

12. The electronic device according to claim 11, characterized in that, All web components are visible on the quick app page. The update information includes update positioning information, which represents the position of the web components after scrolling on the quick app page. When the instruction is executed by the electronic device, the electronic device performs the step of updating the web page window based on the update information by the window management module, including: The window management module updates the position of the webpage window based on the updated positioning information, and overlays the webpage window with the updated position onto the web component with the updated position.

13. The electronic device according to claim 11, characterized in that, The web component is partially visible on the quick app page. The update information includes update positioning information and update size information. The update positioning information is used to characterize the position of the web component after scrolling on the quick app page. The update size information is used to characterize the size of the visible portion of the web component after scrolling on the quick app page. When the instruction is executed by the electronic device, the electronic device performs the step of updating the web page window based on the update information by the window management module, including: The window management module updates the webpage window based on the updated positioning information and updated size information, and overlays the updated webpage window onto the web component whose position has been updated.

14. The electronic device according to claim 11, characterized in that, The web component is not visible on the quick app page. The update information is used to notify the window management module that the web component is not visible on the quick app page. When the instruction is executed by the electronic device, the electronic device performs the step of having the window management module update the web page window based on the update information, including: The window management module deletes the webpage window.

15. The electronic device according to claim 10, characterized in that, When the instruction is executed by the electronic device, the electronic device further performs the following steps: In response to a first event detected by the window management module, a notification message is sent to the rendering module, wherein the notification message is used to notify the rendering module that the webpage has failed to load; The rendering module displays the notification message on the quick app page.

16. The electronic device according to claim 10, characterized in that, When the instruction is executed by the electronic device, the electronic device further performs the following steps: In response to the second event detected by the window management module, the loading progress of the webpage is sent to the rendering module; The rendering module displays the loading progress on the quick app page.

17. A computer-readable storage medium, characterized in that, Includes computer instructions that, when executed on the electronic device, cause the electronic device to perform the method as described in any one of claims 1-9.

18. A computer program product, characterized in that, When the computer program product is run on a computer, it causes the computer to perform the method as described in any one of claims 1-9.

Images