User interface rendering method and apparatus, device, storage medium, and program product

Abstract

A user interface rendering method and apparatus, a device, a storage medium, and a program product, relating to the field of human-computer interaction. The method comprises: displaying a first user interface of an application program, wherein the first user interface is created and rendered by means of a browser framework deployed in the application program, and the first user interface comprises a first interface element acquired by means of a web page address; receiving an interface jump operation, wherein the interface jump operation triggers jumping from the currently displayed first user interface to a second user interface of the application program so as to display a second interface element; and in response to the interface jump operation, creating and rendering the second user interface of the application program by means of a native framework of the application program, wherein the second user interface comprises the second interface element dynamically acquired by the browser framework by means of the web page address.

Description

User interface rendering method, device, equipment, storage medium and program product

[0001] The present application claims priority to the Chinese patent application No. 2024117018203, filed on November 25, 2024, and entitled "Browsing interface control method, device, equipment, storage medium and program product", the whole content of which is incorporated herein by reference. TECHNICAL FIELD

[0002] Embodiments of the present application relate to the field of human-computer interaction, in particular to a user interface rendering method, device, equipment, storage medium and program product. BACKGROUND

[0003] With the development of computer technology, application programs installed on terminals have been widely developed, such as various application programs such as video and television application programs, shopping application programs, game application programs, and reading application programs, which provide users with rich and interesting content.

[0004] In related technologies, in order to provide higher terminal performance and better user experience while providing a certain degree of cross-platform flexibility to present more rich content, a hybrid application program is usually developed by combining a browser framework on the basis of a native framework. The hybrid application realizes dynamic content rendering by combining a WebView container and native capabilities, which can balance performance and cross-platform needs, and at the same time, optimize user experience with pre-compilation and hardware acceleration.

[0005] TECHNICAL CONTENT

[0006] Embodiments of the present application provide a user interface rendering method, device, equipment, storage medium and program product, which can render a second interface element obtained based on an interface jump operation through a web page address on a native interface, and has the advantages of native interface display stability and interface element display timeliness, which helps to provide better feedback to users more efficiently. The technical solution is as follows.

[0007] In one aspect, a user interface rendering method is provided, the method comprising:

[0008] displaying a first user interface of an application program, wherein the first user interface is created and rendered by a browser framework deployed in the application program, and the first user interface includes a first interface element obtained through a web page address;

[0009] receiving an interface jump operation, the interface jump operation triggering a jump from the currently displayed first user interface to a second user interface of the application program to display a second interface element;

[0010] In response to the interface navigation operation, the second user interface is created and rendered using the application's native framework, wherein the second user interface includes second interface elements dynamically obtained by the browser framework through the webpage address.

[0011] On the other hand, a user interface rendering apparatus is provided, the apparatus comprising:

[0012] A first rendering module is used to display a first user interface in the application, wherein the first user interface is created and rendered by a browser framework deployed within the application, and the first user interface includes first interface elements obtained through a web page address.

[0013] A receiving module is used to receive interface jump operations, which trigger a jump from the currently displayed first user interface to the second user interface of the application.

[0014] The second rendering module is used to create and render the second user interface through the native framework of the application in response to the interface jump operation. The second user interface includes second interface elements obtained by the browser framework through the web page address in response to the interface jump operation.

[0015] On the other hand, a computer device is provided, the computer device including a processor and a memory, the memory storing at least one instruction, at least one program, code set or instruction set, the at least one instruction, the at least one program, the code set or instruction set being loaded and executed by the processor to implement the user interface rendering method as described in any of the embodiments of this application above.

[0016] On the other hand, a computer-readable storage medium is provided, wherein at least one instruction, at least one program, code set, or instruction set is stored therein, wherein the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by a processor to implement the user interface rendering method as described in any of the embodiments of this application above.

[0017] On the other hand, a computer program product or computer program is provided, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform any of the user interface rendering methods described in the above embodiments.

[0018] Brief description of the attached figures

[0019] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 is a structural block diagram of a control system provided by some exemplary embodiments of this application;

[0021] Figure 2 is a flowchart of a user interface rendering method provided by some exemplary embodiments of this application;

[0022] Figure 3 is a flowchart of a user interface rendering method provided by some other exemplary embodiments of this application;

[0023] Figure 4 is a schematic diagram of the browser interface provided by some exemplary embodiments of this application;

[0024] Figure 5 is a schematic diagram of the native interface provided by some exemplary embodiments of this application;

[0025] Figure 6 is an interactive schematic diagram of rendering a second interface element provided by some exemplary embodiments of this application;

[0026] Figure 7 is a schematic diagram of an interface displaying other interface elements provided by some exemplary embodiments of this application;

[0027] Figure 8 is a flowchart of a user interface rendering method provided in some exemplary embodiments of this application;

[0028] Figure 9 is an interactive schematic diagram of constructing a rendering tree provided by some exemplary embodiments of this application;

[0029] Figure 10 is a schematic diagram of a rendering tree provided by some exemplary embodiments of this application;

[0030] Figure 11 is a flowchart of a user interface rendering method provided by some exemplary embodiments of this application;

[0031] Figure 12 is a schematic diagram comparing attribute information provided by some exemplary embodiments of this application;

[0032] Figure 13 is a flowchart of a sequence of acquiring and sending instructions provided by some exemplary embodiments of this application;

[0033] Figure 14 is a flowchart of a user interface rendering method provided by some other exemplary embodiments of this application;

[0034] Figure 15 is an execution diagram based on an event dispatcher and an event detector provided by some exemplary embodiments of this application;

[0035] Figure 16 is an interactive flowchart of responding to click events provided by some exemplary embodiments of this application;

[0036] Figure 17 is a schematic diagram of the refresh native component provided by some exemplary embodiments of this application;

[0037] Figure 18 is a schematic diagram of the overall architecture of the user interface rendering method provided in some exemplary embodiments of this application;

[0038] Figure 19 is a structural block diagram of a user interface rendering apparatus provided in some exemplary embodiments of this application;

[0039] Figure 20 is a structural block diagram of a terminal provided by some exemplary embodiments of this application. Detailed Implementation

[0040] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0041] In related technologies, to provide higher terminal performance and a better user experience while offering a certain degree of cross-platform flexibility to display richer content, hybrid applications are often developed by combining native frameworks with browser frameworks. However, native frameworks and browser frameworks typically run in separate environments, which is not conducive to achieving smooth interface switching within the application and affects the user's application experience.

[0042] This application provides a user interface rendering method that renders a second interface element obtained through a webpage address based on an interface navigation operation onto the native interface. This method combines the stability of the native interface display with the timeliness of interface element display, helping to provide users with better feedback more efficiently. Obtaining the second interface element through a webpage address, as mentioned in this application, is not limited to directly requesting the second element in real time via a webpage address; it also includes other non-real-time acquisition methods such as preloading strategies to ensure the timeliness of the second interface element acquisition. The user interface rendering method provided in this application can be applied to various application-related scenarios that simultaneously support native architecture and web technologies, such as mobile application usage scenarios, desktop application usage scenarios, application development scenarios, data visualization scenarios, and education and training scenarios. It is not limited here.

[0043] It should be noted that this application may display prompt interfaces, pop-ups, or output voice prompts before and during the collection of user data. These prompt interfaces, pop-ups, or voice prompts are used to inform the user that their data is being collected. This ensures that the application only begins the steps for collecting user data after receiving confirmation from the user regarding the prompt interface or pop-up; otherwise (i.e., without user confirmation), the steps for collecting user data end, meaning no user data is collected. In other words, all user data collected in this application is collected with the user's consent and authorization, and the collection, use, and processing of related user data must comply with the relevant laws, regulations, and standards of the relevant regions.

[0044] The following describes some of the terms used in the embodiments of this application.

[0045] Browser frameworks, also known as browser components, are non-native application frameworks embedded in applications to extend or replace the functionality of native browsers. These frameworks can be integrated into the host application as components, providing independent rendering engines and web functionality support, thus complementing or replacing native frameworks.

[0046] Native frameworks refer to UI development toolkits that are deeply integrated with a specific operating system, directly calling the system's underlying APIs to implement interface rendering and interaction functions.

[0047] Browser interface: The interface created and rendered by the browser framework deployed within the application.

[0048] Native UI: The UI is created based on the application's native framework.

[0049] Interface elements, also known as web interface elements (UI elements), are the basic units that make up a user interface, used to display information, interact with others, and present visual content. Interface elements can include various types, such as basic content elements (e.g., text, images, hyperlinks), interactive functional elements (e.g., forms, buttons, navigation bars), multimedia and dynamic elements (e.g., video / audio, animations), and layout and structural elements (e.g., tables).

[0050] Atomic components are the smallest UI units based on the atomic design concept. They are indivisible, have independent functions, and standardized interfaces, such as basic elements like buttons and input boxes.

[0051] Native components: Low-level components that are directly rendered by the client (such as the operating system or mini-program framework), such as text boxes and video players, which have platform-specific performance advantages.

[0052] The system architecture involved in the embodiments of this application is described below. The user interface rendering method provided in the embodiments of this application is implemented by the terminal and the server through data interaction. For illustration, please refer to Figure 1. The system involves a terminal 110 and a server 120, wherein the terminal 110 and the server 120 are connected through a communication network 130.

[0053] An application is installed on terminal 110 that supports both native and web technologies; this application can also be called a hybrid application.

[0054] To illustrate, this application can not only use the native framework corresponding to native technologies to build and render the application's native interface, but also support web technologies through a built-in browser framework, building and rendering the browser interface when the application is running, and loading and displaying web content when needed.

[0055] Terminal 110 displays browser interface 111.

[0056] For example, if terminal 110 displays browser interface 111 (also known as first user interface) at a certain moment, browser interface 111 is an interface created and rendered by browser framework deployed in the application; browser interface 111 displays first interface elements, which are obtained through the web address (or simply web address) corresponding to the web link.

[0057] Indicatively, the webpage link is used to indicate a website developed by a data management platform, the webpage address is the address information of the website specifically, and the first interface element contained in the browser interface 111 is a portion of the statistical data collected by the data management platform within a historical time period.

[0058] Receive an interface jump operation (also known as an interface jump trigger operation) to trigger the display of a second interface element; in response to the interface jump operation, create the application's native interface (also known as a second user interface).

[0059] The interface jump operation triggers the display of the second interface element, that is, jumps from the currently displayed browser interface (first user interface) to the native interface (second user interface), which contains the second interface element dynamically obtained through the web address.

[0060] As an illustration, browser interface 111 provides controls for navigating to other interfaces or displaying other windows. Triggering these controls is considered a page navigation operation. For example, in addition to displaying some statistical data compiled by the data management platform within a historical time period, browser interface 111 also displays a data expansion control. This control is used to expand and display more statistical data, and triggering this control is considered a page navigation operation.

[0061] The native interface 112 is an interface created based on the application's native framework. Illustratively, in response to interface transition operations, the application installed on terminal 110 calls the native framework to create the native interface 112. Since the native interface 112 is created based on the application's own native framework, it offers higher performance and smoother operation.

[0062] The second interface elements can be obtained in real time, for example, dynamically retrieved via a webpage address triggered by an interface navigation operation. For instance, the trigger operation for a data expansion control can be used as an interface navigation operation to expand and display more statistical data. Alternatively, the second interface elements can be obtained non-real-time, such as being pre-loaded to ensure timely retrieval.

[0063] After creating the element interface, render and display the second interface element in the native interface.

[0064] Schematic, the native interface 112 is regarded as a container created based on the native framework. Based on the interface jump operation, the terminal 110 (or the application installed on the terminal 110) sends a data acquisition request to the server 120 through the communication network 130. The data acquisition request is used to request the targeted acquisition of at least one interface element corresponding to the interface jump operation as a second interface element in the container. After the server 120 finds the second interface element, it feeds back the second interface element to the terminal 110 (or the application installed on the terminal 110) through the communication network 130, so that the second interface element corresponding to the interface jump operation is displayed in the native interface 112 of the application. The second interface element may be different from the first interface element, and there may be some overlapping interface elements, which is not limited here.

[0065] For example, the interface jump operation instructs the display of more statistical data based on the partial statistical data (first interface element) collected by the data management platform. The application installed on the terminal 110 sends a data acquisition request to the server 120 (such as the backend server of the data management platform) corresponding to the data management platform through the communication network 130 based on the interface jump operation, so that the server 120 can obtain more statistical data through the web address. Then, the server 120 sends the acquired statistical data as the second interface element to the application installed on the terminal 110. The terminal 110 renders the second interface element into the native interface 112 to display the second interface element in the native interface 112.

[0066] It is worth noting that the aforementioned terminals include, but are not limited to, mobile terminals such as mobile phones, tablets, portable laptops, smart voice interaction devices, smart home appliances, and in-vehicle terminals, and can also be desktop computers, etc.; the aforementioned servers can be independent physical servers, server clusters or distributed systems composed of multiple physical servers, or cloud servers.

[0067] In the solution provided in this application embodiment, in response to receiving an interface jump operation while the first user interface is displayed, a native interface is created, and a second interface element dynamically obtained through the web address corresponding to the first user interface is displayed within the native interface. Even when the first user interface is currently displayed, a more stable native interface can still be created in response to the interface jump operation. Provided the native interface is adapted to the application itself, the second interface element obtained through the web address based on the interface jump operation is rendered on the native interface. This not only leverages the stability advantages of the native interface display but also allows for the more timely acquisition of the second interface element through the web address, thereby helping to provide users with more efficient and better feedback while ensuring a smooth interface transition effect.

[0068] Based on the above-mentioned terminology and application scenarios, the user interface rendering method provided in this application will be described. Taking the application of this method to a terminal as an example, as shown in Figure 2, the method includes the following steps 210 to 230.

[0069] Step 210: Display the first user interface of the application, wherein the first user interface is created and rendered by a browser framework deployed within the application, and the first user interface includes first interface elements obtained via a web address.

[0070] In illustration, an application is a software application installed on devices such as mobile terminals and televisions. The first user interface, also known as the browser interface, is a browser view embedded within the application. While the device is running the application, the user does not need to open an external web browser. They can load and browse web pages through the browser interface to obtain real-time information while using the application. The browser interface is usually displayed on the device screen through the application's graphical user interface (GUI). The browser interface can also be called a WebView interface.

[0071] The first interface element is obtained through the webpage address corresponding to the webpage link; the first interface element is implemented as at least one of multiple interface elements developed for the webpage address.

[0072] For illustrative purposes, a webpage link is the link information indicated by the currently displayed browser interface. It is usually used to uniquely identify the webpage address of a webpage, such as the webpage address corresponding to webpage A being "https: / / www.exampledatahub.com" (this webpage address is a virtual link and cannot be accessed normally; it is only an illustrative example). The webpage address is usually represented as a Uniform Resource Locator (URL). Each webpage has a unique URL. The webpage indicated by the webpage address contains a large amount of data, and the first interface element is displayed in the current browser interface. When retrieving the first interface element from the webpage address, some or all of the data contained in the large amount of data contained in the webpage indicated by the webpage address is selected as the first interface element, and the first interface element is rendered and displayed on the browser interface.

[0073] For example, the webpage link indicates a data management platform that collects a large amount of statistical data. The first element displayed in the browser interface at the current moment is a portion of this statistical data.

[0074] The browser interface is a user interface presented through the browser frame. Therefore, the browser interface is usually displayed when the application is connected to the network. The first interface element is obtained and displayed by the web page address corresponding to the web page link when the application is connected to the network.

[0075] Indicatively, an application being in a network connection state means that the current application can interact with the webpage corresponding to the webpage link via the Internet, such as obtaining the first interface elements from the webpage address corresponding to the webpage link.

[0076] When an application is connected to the network, its built-in browser components (such as WebView) can render and display the browser interface (including the first interface elements) based on the data obtained from the web page address. Conversely, when the application is disconnected from the network, that is, when the application cannot interact with the web page address corresponding to the web page link via the Internet, the application cannot obtain the first interface elements from the web page address through the browser component, nor can it render and display the first interface elements within the browser interface.

[0077] The browser interface is the interface created and displayed by the browser framework deployed within the application.

[0078] To illustrate, in order to provide more immediate information, browser frameworks are often integrated into applications. Browser frameworks allow developers to embed and process web page content within their applications. Browser frameworks typically achieve multiple functions such as web page loading, parsing, rendering, and interaction through multiple integrated components, which is beneficial for obtaining more immediate information.

[0079] To illustrate, the browser framework comprises several components, including a first rendering engine. This first rendering engine characterizes the rendering engine within the browser framework used to render UI elements. The browser framework creates and displays the browser interface within the application by invoking the first rendering engine.

[0080] In other words, an application is a standalone software with specific functions, while a browser interface is the interface within an application used to access various web addresses on the Internet, such as entering a web address by entering a web link. Some applications choose to provide browser services by deploying a browser framework, so that users can easily access real-time information using web technologies on different devices and platforms, providing greater flexibility and convenience.

[0081] Step 220: Receive interface jump operation, which triggers a jump from the first user interface to the second user interface to display the second interface elements.

[0082] The illustrative example illustrates a user interface transition, also known as a transition trigger, which is an operation performed on the browser interface. User interface transitions include various forms of operations such as clicking, long-pressing, swiping, dragging, and voice-triggered actions.

[0083] To illustrate, taking a UI navigation operation triggered by a control as an example, the browser interface displays controls for navigating to other interfaces. If a control trigger operation is received targeting these controls, it is considered a UI navigation operation has been received. For example, the current browser interface displays some statistical data (which can be called the first interface element), and the control indicates navigation to another interface to display more statistical data (which can be called the second interface element), or the control indicates navigation to another interface to display more detailed information about the current statistical data (which can also be called the second interface element). No further limitations are specified here.

[0084] To illustrate, taking a browser interface navigation operation as a region-triggered operation as an example, the browser interface displays at least one trigger region. Each trigger region is used to navigate to a different second interface to display different elements. If a region-triggered operation is received for a specific trigger region, it is considered as receiving a browser interface navigation operation. For example, if the current browser interface displays three trigger regions: trigger region 1 indicates partial statistical data of type A, trigger region 2 indicates partial statistical data of type B, and trigger region 3 indicates partial statistical data of type C, receiving a region-triggered operation for trigger region 1 means that navigation to the second interface corresponding to trigger region 1 is required to display more statistical data of type A, etc., without further limitation.

[0085] To illustrate, let's take a scenario where a specific gesture triggers a page transition. The browser interface displays a designated trigger area. If a specific gesture is received within this area, it's considered a page transition. For example, if the designated trigger area is highlighted region L, receiving a "draw a circle" gesture within L will redirect to another interface displaying more statistics. Alternatively, receiving a "draw a triangle" gesture within L will redirect to another interface displaying more details about the current statistics. No further limitations are specified here.

[0086] Interface switching operations can be performed on a terminal with an installed application. For example, an interface switching operation is pressing a physical button on the terminal while a browser interface is displayed; or, an interface switching operation is shaking the terminal while a browser interface is displayed, etc. There are no restrictions on the form of interface switching operations here.

[0087] Step 230: In response to the interface jump operation, create and render the second user interface through the native framework of the application, wherein the second user interface contains the second user interface elements dynamically obtained by the browser framework through the web page address.

[0088] For illustrative purposes, the interface jump operation indicates the operation of jumping from the current browser interface to display another interface (second interface), such as jumping to display a full-screen interface; or jumping to display a half-screen interface; or jumping to display a floating window, etc., without limitation.

[0089] The interface jump operation is triggered by dynamically obtaining the second interface element through the web address.

[0090] In a schematic sense, dynamic acquisition can refer to the process of retrieving the second interface element from the webpage address in real time after receiving an interface redirection operation. That is, after the interface redirection operation is triggered, the application loads and parses the second interface element from the webpage address in real time. For example, upon receiving an interface redirection operation, the application identifies multiple interface elements associated with the webpage address. These elements are elements related to the website's development, updates, and maintenance. Based on the interface redirection operation, the application determines at least one interface element from these elements that needs to be displayed on the interface as the second interface element.

[0091] The second user interface can be the application's native interface. The native UI typically matches the operating system's user interface style. When the terminal receives a screen navigation operation, it uses native technologies deployed within the application to construct the native interface and displays it on the terminal screen.

[0092] To illustrate, native interfaces are application interfaces developed using specific programming languages ​​and tools, such as Java and Kotlin for Android, and Swift and Objective-C for iOS.

[0093] The native UI is the interface displayed while the application is running; that is, the user interface directly rendered by the application at runtime, and it is composed of native operating system components. The running state includes both network-connected and network-disconnected states, meaning that the application can create and display a native UI regardless of whether it can connect to the internet. Furthermore, the native UI can display local UI elements configured during application development, such as a back control.

[0094] The native interface is the interface created by the application calling the native framework. In other words, the native interface is the user interface directly rendered by the application calling the native framework.

[0095] To illustrate, a native framework is a collection of tools built on native technologies; when the terminal receives a screen navigation operation, the application calls the native framework to build a native interface to display the native interface.

[0096] Similar to browser frameworks, native frameworks also consist of multiple components, such as a second rendering engine for implementing the interface rendering process and native components for assisting in the rendering of interface elements.

[0097] To improve application development efficiency, more and more developers are using open-source native frameworks to build cross-platform applications, enabling them to create applications on multiple operating systems using the same codebase, reducing development and maintenance workload.

[0098] This example uses the open-source native framework React Native (RN) as an example to briefly illustrate the process of building applications and native interfaces using React Native.

[0099] Using React's component-based approach, developers can break down the user interface (UI) into reusable native components, such as native button components, native text components, native list components, native image components, and more. Native components are components of the visual interface elements used in the native framework to assist in rendering (a native component is a UI module that encapsulates platform-specific rendering logic). This allows developers to build cross-platform applications using JavaScript and React.js within the native framework React Native. When it is necessary to render and display the user interface within the application, the native framework React Native constructs the native interface to achieve native interface rendering.

[0100] In illustration, the native interface created by the application's native framework can also be called the local interface. Through the creation process, the native interface is more tightly integrated with the interface style and program functions that the application can express through the operating system. In other words, the native interface can provide a more direct and deeper way to integrate with the operating system during application development, making it easier to improve the localized experience and functionality of the application through the operating system.

[0101] In other words, an application can not only use native frameworks to build native interfaces, but also create browser interfaces through deployed browser frameworks. This allows for the integration of both native and browser interfaces in subsequent rendering processes, making the application a hybrid application. The browser interface is created using a browser framework and its rendering is performed through the browser framework's first rendering engine and atomic components. The native interface is created using a native framework and its rendering is performed through the native framework's second rendering engine and native components. The browser framework and native framework run in different environments; for example, the browser framework runs in a browser environment (webview), while the native framework runs in a native environment. Therefore, browser interfaces and native interfaces differ in terms of technical support and environmental support.

[0102] In response to a UI transition, the native framework constructs and displays a shell interface, but no UI elements are currently displayed. Therefore, the currently constructed and displayed native interface can be considered a shell, with the second UI element dynamically obtained from the webpage address based on the UI transition. In other words, when a UI transition is triggered, the native framework first constructs an empty shell interface (containing only the basic container), and its internal elements (such as buttons and images) need to be rendered by dynamically loading webpage content. This design decouples the UI structure from its content, improving loading efficiency.

[0103] In response to receiving a UI navigation operation, the browser framework is invoked to obtain the UI navigation instruction corresponding to the operation. The UI navigation instruction is triggered to dynamically obtain the second UI element through the webpage address.

[0104] To illustrate, if a browser interface receives a page navigation operation, the browser framework determines the first interface element targeted by the navigation operation from among multiple interface elements contained in the browser interface. The browser interface may include multiple interface elements (including the first interface element), some of which are triggerable interface elements (such as some control interface elements, some image interface elements, etc.), while others are non-triggerable interface elements (such as some text interface elements). The triggerable interface elements may also include elements that navigate to other different interfaces and elements that return to the previous interface. Taking the first interface element as a triggerable interface element that navigates to other interfaces as an example, if the first interface element receives a page navigation operation, then the first interface element is the triggering interface element targeted by the navigation operation. For example, if the first interface element includes interface element 1 and interface element 2, and the page navigation operation targets interface element 2, which can trigger navigation to other interfaces, then interface element 2 is the triggering interface element.

[0105] Each triggerable interface element corresponds to a jump instruction. The jump instruction is used to obtain the interface elements displayed in the interface after the jump. For example, triggerable interface element 1 corresponds to jump instruction m, which is used to obtain statistical data of type M. Triggerable interface element 2 corresponds to jump instruction n, which is used to obtain statistical data of type N, and so on. If the trigger interface element that receives the interface jump operation is triggerable interface element 1, the browser framework obtains jump instruction m as the interface jump instruction to obtain statistical data of type M, etc.

[0106] A webpage link points to a webpage. Based on the interface navigation operation, the browser framework determines at least one interface element from multiple interface elements developed by the webpage as the second interface element. In other words, when a user performs an interface navigation operation, the browser framework parses the webpage link and selects at least one element from multiple predefined candidate interface elements corresponding to the link as the second interface element for rendering.

[0107] In illustrative terms, the second interface element includes at least one of several types of interface elements, such as text interface elements, button interface elements, and image interface elements. A webpage is pre-developed with multiple interface elements, and these elements can be added, removed, or adjusted during the webpage's operation based on the developer's real-time update process.

[0108] This example illustrates how multiple UI elements in a webpage are selectively chosen based on a navigation operation to select at least one element that matches the navigation operation as the second UI element. The second UI element may differ from the first UI element displayed in the browser interface, and may also have some overlapping content.

[0109] For example: If the first interface element is a statistical data of type N, and a trigger operation is received for triggerable interface element 1 in the browser interface as an interface jump operation, after the browser framework obtains the jump instruction m as an interface jump operation, it uses the jump instruction m to obtain statistical data of type M from multiple interface elements, and therefore uses the statistical data of type M as the second interface element. The first interface element and the second interface element are different.

[0110] Alternatively, the first interface element is a partial statistical data of type M. If a trigger operation is received for the triggerable interface element 1 in the browser interface as an interface jump operation, the browser framework obtains the jump instruction m as the interface jump instruction. Based on the jump instruction m, it is used to obtain all statistical data of type M from multiple interface elements. Therefore, all statistical data of type M is used as the second interface element. The first interface element and the second interface element have some overlap, which is not limited here.

[0111] Render and display the second interface elements within the native interface.

[0112] Considering the high flexibility of interface elements obtained through webpage links via browser technology, the flexible methods of writing or deleting information, and the timely updates of information, the native interface is combined with the advantages of display stability and timely dynamic acquisition of interface elements. After constructing the native interface, the browser framework is called to analyze the interface elements developed in the webpage links corresponding to the browser interface, and selects the second interface element that needs to be displayed according to the interface jump operation (e.g., if the interface jump operation indicates the acquisition of 100 data items of type A, then the 100 data items of type A are used as the second interface element), so that the native framework can receive the second interface element sent by the browser framework.

[0113] The browser framework sends the second UI element to the native framework. The browser framework obtains the UI transition command corresponding to the UI transition operation through the first rendering engine, determines the second UI element based on the UI transition command, and sends the second UI element to the second rendering engine of the native framework; this process is not limited here.

[0114] Then, the native framework renders the received second interface element onto the native interface, thereby displaying the second interface element within the native interface and realizing the native rendering process based on the native framework.

[0115] For example, a webpage link indicates a data management platform that collects a large amount of statistical data. The first interface element in the browser window that was previously displayed contains a portion of this statistical data. If the interface jump operation indicates that more statistical data is to be obtained, then after the native framework builds and displays the native interface, the native framework receives more statistical data sent by the browser framework as the second interface element, thereby rendering more statistical data in the native interface.

[0116] It is worth noting that the above are merely illustrative examples, and the embodiments of this application are not limited thereto.

[0117] In summary, even when the browser interface is currently displayed, a more stable native interface can still be created in response to interface transition operations. Provided that the native interface is adapted to the application itself, the second interface elements obtained through the web address based on the interface transition operation are rendered on the native interface. This not only leverages the advantages of the native interface's display stability but also allows for the more timely acquisition of the second interface elements through the web address. This helps to provide users with more efficient and better feedback while ensuring a smooth interface transition effect.

[0118] The native framework creates the application's native interface based on the interface jump operation and obtains the interface identifier corresponding to the native interface. The browser framework determines the interface elements displayed within the native interface as indicated by the interface jump operation. The browser framework then generates rendering instructions based on the received interface identifier and interface elements, and instructs the native framework to render the interface elements within the native interface by sending the rendering instructions to the native framework. This results in at least one interface element being displayed within the native interface as a second interface element. As illustrated in Figure 3, the method provided in this embodiment can also be implemented as follows: steps 310 to 360.

[0119] Step 310: Display the application's browser interface, which includes a first interface element obtained via a web address.

[0120] Among them, the browser interface is the interface (also known as the user interface, UI) created and displayed by the browser framework deployed within the application; the browser framework is a program framework other than the native framework embedded within the application.

[0121] As an illustration, a browser frame is additionally embedded within the developed application. The browser frame is used to supplement the native application with the flexibility of web technologies, so that the content of web page links can be flexibly viewed while the application is running.

[0122] The browser frame includes at least one interface setting parameter for displaying the browser interface.

[0123] This illustration demonstrates how a browser framework provides at least one of several browser functionalities, including browser interface creation, browser element rendering, and browser element display. The browser framework is a program framework derived from code, which includes at least one interface setting parameter. These parameters are code parameters used to implement at least one function. For example, some interface setting parameters control or manage browser interface creation, some control or manage browser element rendering, and some control or manage browser element display.

[0124] A typical browser framework consists of multiple components that implement different browser functions, and each component includes at least one UI setting parameter.

[0125] To illustrate, the browser framework comprises several components, including the primary rendering engine. This primary rendering engine is the browser's core engine, responsible for parsing and rendering the content of linked web pages. It includes at least one UI setting parameter, enabling the rendering of browser elements. For example, the primary rendering engine is responsible for parsing HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript into UI elements that the user can see and interact with.

[0126] A webpage link is the address indicated by the currently displayed browser interface, and is usually used to uniquely identify a webpage.

[0127] The browser interface is the interface rendered and displayed by the first rendering engine built into the application. The first rendering engine is the rendering engine used by the browser framework to render interface elements within the browser interface. Therefore, the browser interface focuses more on expressing the interface built by calling the browser framework when the application is in a network connection state. Web page links may or may not be displayed in the browser interface, which is not limited here.

[0128] Figure 4 shows a schematic diagram of a browser interface, which includes a function selection list 410. The current function selection list 410 is in a collapsed style (it can also be adjusted to an expanded style), and the selected function item in the current function selection list 410 is "A" (e.g., project management). The function item includes at least one sub-function item, such as "B1" (e.g., project requirement list) and "B2" (e.g., project requirement submission form) under "A". Under "B1" there are multiple areas (e.g., requirement areas), such as area 411 corresponding to "C1" (e.g., confirm user requirements), area 412 corresponding to "C2" (e.g., feasibility analysis), area 413 corresponding to "C3" (e.g., cost accounting), etc. Each area is used to display relevant information.

[0129] Indicatively, the browser interface shown in Figure 4 corresponds to a webpage link. This webpage link is used to indicate a webpage. Although the webpage link is not directly displayed in the browser interface, the information displayed in the browser interface (i.e., multiple interface elements, including the first interface element) is a visual representation of the webpage including at least one renderable interface element. That is, the multiple interface elements include at least the aforementioned function selection list 410 (e.g., rendered by native list components, native button components, etc. in native components), multiple sub-function items (e.g., rendered by native text components, etc. in native components), and multiple areas (e.g., rendered by native text components, native control components, etc. in native components), etc., without limitation here.

[0130] Step 320: Receive an interface jump operation, which is used to trigger a jump from the currently displayed browser interface to the native interface, so as to display the second interface elements in the native interface.

[0131] This is an illustrative example of an interface transition operation performed on the browser interface. Interface transition operations include various forms such as clicking, long-pressing, swiping, dragging, and voice-triggered actions on the browser interface.

[0132] Step 330: In response to the interface transition operation, create the application's native interface through the second rendering engine, and display the native interface.

[0133] Among them, the interface jump operation is triggered by dynamically obtaining the second interface element through the web address, and by jumping from the current browser interface to other interfaces.

[0134] This is an illustrative example of how interface navigation involves switching from the current browser window to another window. Interface navigation includes various actions such as clicking, long-pressing, swiping, dragging, and voice-triggered actions within the browser window.

[0135] Taking interface navigation as an example of a region-triggered operation, as shown in Figure 4, performing a region-triggered operation on any of regions C1-C3 will display the corresponding detailed information for that region. For instance, if a region-triggered operation is received for region C1 411, then detailed information related to "C1" will be displayed. This could include displaying additional information while retaining the content contained in region 411 (such as "task content," "priority," etc.); or, the content contained in region 411 (such as "task content," "priority," etc.) could be removed and other additional information could be displayed.

[0136] Taking the interface jump operation as a control trigger operation as an example, as shown in Figure 4, the control 420 is added to perform the control trigger operation, thereby adding a new area, etc., which is not limited here.

[0137] Among them, the native interface is the interface created based on the application's native framework; the native framework is the program framework used when developing an application.

[0138] As an illustration, a native framework can provide an application with a relatively unified architectural design and organizational structure, making it easy to reuse the native framework to implement at least one of the following functions: native interface creation, native interface element rendering, and native interface element display.

[0139] The native framework includes at least one native setting parameter for displaying the native interface.

[0140] In illustration, a native framework is typically a program framework provided by the operating system or platform, consisting of a large amount of existing code. For example, developers flexibly apply existing code by writing business logic code to run the application, thus obtaining a native framework. Native setting parameters are code parameters used to control or manage at least one native function. For example, some native setting parameters are used to control or manage native interface creation functions, some native setting parameters are used to control or manage native interface element rendering functions, and some native setting parameters are used to control or manage native interface element display functions, etc.

[0141] A native framework typically includes multiple components that implement different native functionalities, and each component includes at least one native setting parameter.

[0142] To illustrate, multiple components within the native framework include a second rendering engine. The second rendering engine is a rendering engine within the native framework used to render interface elements within the native interface. The second rendering engine includes at least one native setting parameter, and the rendering function of native interface elements is implemented through the second rendering engine.

[0143] If the browser receives a page navigation request, it sends a call message to the native framework, instructing the framework to create the application's native interface using a second rendering engine.

[0144] In response to interface navigation operations, the native framework can be invoked to generate a native interface that has a navigation link with the browser interface; the native interface of the application can be displayed.

[0145] This is an illustrative example of a jump link between the browser interface and the native interface. The jump link indicates that the native interface is the next jump node in the interface flow from the browser interface.

[0146] Interface flow is used to characterize the data flow between interfaces. For example, a pre-defined interface flow can indicate the other interfaces to be displayed after jumping from any interface. For instance, the interface flow indicates that after performing an interface jump operation on control A in interface 1, the interface element indicated by control A should be displayed in the interface 2 that is jumped to. The native interface that the browser interface responds to in response to the interface jump operation is the interface that needs to display the second interface element.

[0147] In response to interface transitions, a full-screen interface built using the native framework can be displayed as the native interface.

[0148] This is illustrative; the browser interface may be in at least one of several forms, such as full-screen or half-screen.

[0149] In response to interface transitions, a half-screen interface built using the native framework can be displayed as the native interface.

[0150] For illustrative purposes, the browser interface may be in at least one of several forms, such as full-screen or half-screen. If a redirection operation is received and the interface redirection operation is determined, a half-screen interface is constructed using the native framework as the native interface. For illustrative purposes, the half-screen interface can occupy half, most, or a small portion of the screen; that is, there is no limitation on the area occupied by the half-screen interface.

[0151] In response to interface navigation, a native window built using the native framework can be displayed on the browser interface as the native interface.

[0152] For illustrative purposes, the browser interface may be at least one of several forms, such as full-screen or half-screen. If a page navigation operation is received, a native window is constructed using the native framework as the native interface. For illustrative purposes, the native window may be a floating window in a fixed position on the browser interface, a window whose position changes (a window whose position changes on the browser interface), etc., and is not limited here.

[0153] If a first interface navigation request is received, a full-screen interface can be built using the native framework as the native interface; if a second interface navigation request is received, a half-screen interface can be built using the native framework as the native interface; if a third interface navigation request is received, a native window can be built using the native framework as the native interface.

[0154] This is illustrative; the first, second, and third interface navigation operations indicate different types of operations. For example, the first interface navigation operation is a click operation, and the second interface navigation operation is a long press operation. Different native interfaces are displayed depending on the type of operation received. For example, clicking on control A within the browser interface displays a full-screen native interface; long-pressing control A within the browser interface displays a half-screen native interface, etc. There are no restrictions here.

[0155] As shown in Figure 5, taking the native interface as a full-screen example, after creating the native interface 510 of the application using the native framework, the created native interface 510 is displayed on the terminal where the application is installed. If no second interface element is rendered, the native interface 510 appears blank on the terminal interface; or, if no second interface element is rendered, the native interface 510 displays a prompt message (such as record details 520) on the terminal interface to indicate the approximate appearance of the second interface element to be displayed; this process continues until the second interface element is displayed on the terminal interface based on subsequent processes, without limitation here.

[0156] Step 340: Obtain the interface identifier corresponding to the native interface through the first rendering engine.

[0157] Indicatively, the second rendering engine is used to generate the native interface and the corresponding interface identifier within the native framework. In addition to rendering and displaying the native interface on the terminal interface, the second rendering engine also sends the interface identifier to the first rendering engine so that the first rendering engine can obtain the interface identifier corresponding to the native interface.

[0158] The second rendering engine can generate an interface identifier corresponding to the native interface while creating the application's native interface; or, in response to an interface navigation operation, the second rendering engine can generate an interface identifier corresponding to the native interface after creating the application's native interface.

[0159] The interface identifier (id) uniquely indicates the native interface created by the second rendering engine based on the interface navigation operation. For example, a hash value may be randomly generated as the interface identifier when the native interface is created; alternatively, a decimal value may be randomly generated, etc., without limitation.

[0160] Step 350: The first rendering engine sends a rendering instruction to the second rendering engine, the rendering instruction including the interface identifier and the second interface element.

[0161] After obtaining the interface identifier, the first rendering engine executes the virtual rendering process. Virtual rendering refers to the process of abstracting the interface rendering process into rendering instructions. Therefore, the first rendering engine can generate rendering instructions containing the interface identifier.

[0162] After the browser receives a page navigation operation, the first rendering engine determines the second page element that needs to be displayed in the native page based on the page navigation operation. Then, the first rendering engine generates rendering instructions by combining the page elements and page identifiers, and sends the rendering instructions to the second rendering engine.

[0163] Among them, dynamic acquisition focuses on describing the process of flexibly acquiring second interface elements from timely updated web pages based on interface jump operations.

[0164] As an illustration, the webpage corresponding to the webpage link has multiple interface elements developed within it, which are used to display on the terminal interface. When a page jump operation is received, the first rendering engine determines at least one interface element from the multiple interface elements as the second interface element (i.e., at least one interface element to be rendered as indicated by the page jump operation), and then generates a rendering instruction by combining at least one interface element and the interface identifier, and sends the rendering instruction to the second rendering engine.

[0165] The first and second rendering engines can communicate through a JavaScript bridge. The JavaScript bridge is a communication channel between the native framework and the browser framework. The first rendering engine can pass rendering instructions to the second rendering engine under the native framework through the JavaScript bridge. In addition, the native framework can also pass the trigger events corresponding to the interface trigger operations received by the native interface to the browser framework, so that the browser framework can simulate the execution of the corresponding response behavior through the trigger events. This will be discussed in detail later.

[0166] Step 360: The second rendering engine renders the second interface elements in the native interface based on rendering instructions.

[0167] In a schematic way, after receiving a rendering instruction, the second rendering engine can analyze and determine the interface identifier and the included interface elements from the rendering instruction. In this way, it can determine the native interface and the second interface elements that need to be rendered through the interface identifier, thereby achieving the purpose of rendering the second interface elements within the constructed native interface based on the interface jump operation.

[0168] During the rendering of the second interface elements by the second rendering engine, native components deployed under the native framework can be used to render the second interface elements. For example, when the second interface element is a text interface element (interface element in the form of text), it is rendered through the text native component in the native component; when the second interface element is a control interface element (interface element in the form of a button), it is rendered through the button native component in the native component; when the second interface element is an image interface element (interface element in the form of an image), it is rendered through the image native component in the native component, and so on. This makes the rendered second interface elements more compatible with the native interface itself, and the display consistency is stronger.

[0169] In other words, the process of rendering the second interface element involves providing the second interface element based on the browser framework, and rendering the second interface element using native technology through the native framework. This is not limited here.

[0170] As shown in Figure 6, the process of creating a native interface and rendering interface elements based on interface identifiers is introduced, taking browser framework 620 and native framework 630 as the main execution entities.

[0171] When a browser interface is displayed on the terminal, if user 610 performs an interface jump operation on the browser interface (such as clicking to open a new interface), upon receiving the interface jump operation, browser framework 620 calls native framework 630 to create native interface.

[0172] To illustrate, the native framework 630 randomly creates a native interface (or shell page: an interface without rendered display elements) through the second rendering engine and generates an interface identifier (interface ID) corresponding to the native interface. There is a one-to-one correspondence between the native interface and the interface identifier. Afterward, the native interface is displayed on the terminal interface. The native framework 630 also sends the interface identifier to the browser framework 620, such as the native framework 630 sending the interface identifier to the first rendering engine of the browser framework 620 through the second rendering engine.

[0173] The first rendering engine of the browser framework 620 performs a virtual rendering process based on the interface identifier and determines the interface elements that need to be rendered and displayed according to the interface jump operation instruction. It then generates rendering instructions that include the interface elements and the interface identifier and sends the rendering instructions to the second rendering engine of the native framework 630.

[0174] Subsequently, the second rendering engine of the native framework 630 determines the native interface to be rendered based on the interface identifier in the rendering instructions, and renders and displays a second interface element including at least one interface element within the native interface based on the interface elements, thereby displaying the second interface element within the native interface of the application.

[0175] As shown in Figure 5, the interface elements are rendered on the native interface 510 based on the displayed native interface, thereby displaying the second interface element 530.

[0176] If an interface trigger operation is performed on the second interface element, the browser framework can be called to analyze the trigger event corresponding to the interface trigger operation, thereby displaying the interface 710 shown in Figure 7 on the terminal. This interface displays other interface elements 720 (which will be the subsequent fifth interface element) based on the interface trigger operation. The process of displaying the fifth interface element based on the interface trigger operation will be explained later.

[0177] It is worth noting that the above are merely illustrative examples, and the embodiments of this application are not limited thereto.

[0178] In summary, even when the browser interface is currently displayed, a more stable native interface can still be created in response to interface transition operations. Provided that the native interface is adapted to the application itself, the second interface elements obtained through the web address based on the interface transition operation are rendered on the native interface. This not only leverages the advantages of the native interface's display stability but also allows for the more timely acquisition of the second interface elements through the web address. This helps to provide users with more efficient and better feedback while ensuring a smooth interface transition effect.

[0179] In this embodiment, a second rendering engine of the native framework sends the interface identifier of the native interface to the first rendering engine of the browser framework. This allows the second rendering engine to render and display second interface elements on the native interface based on rendering instructions. The interface identifier helps the browser framework specifically determine the second interface elements to be rendered on the native interface. This allows the browser framework to send rendering instructions containing the second interface elements and the interface identifier to the native framework, enabling the native framework to render the second interface elements within the native interface. This improves the accuracy of content rendering during interaction between the browser framework and the native framework. By leveraging the browser framework to obtain more up-to-date interface elements and rendering and displaying the second interface elements within the native interface using the native technology corresponding to the native framework, the advantages of native technology stability and web technology timeliness are combined, enhancing the user's application experience.

[0180] The first rendering engine provided by the browser framework can construct a rendering tree using the interface elements within the webpage corresponding to the webpage link, thereby guiding the native framework to display the second interface elements in the native interface through the rendering tree. Illustratively, as shown in Figure 8, step 220 shown in Figure 2 above can also be implemented as steps 810 to 830.

[0181] Step 810: The first rendering engine determines the second interface element indicated by the interface jump operation from multiple interfaces of the webpage corresponding to the webpage link, and constructs the rendering tree corresponding to the second interface element.

[0182] As an illustration, the webpage corresponding to the webpage link has multiple interface elements, which together constitute the overall layout and function of the webpage. These interface elements include at least one of various styles such as text interface elements, image interface elements, button interface elements, form interface elements, and video interface elements. Text interface elements describe text information, image interface elements describe image information, button interface elements describe button information, form interface elements describe table or list information, and video interface elements describe video information, etc.

[0183] Developing multiple interface elements within a webpage allows you to render at least one interface element onto the terminal interface for display. For example, a browser interface can display a subset of multiple interface elements; or a webpage can have 100 interface elements, with the first interface element being 25 of those elements.

[0184] When developing multiple UI elements within a webpage, a rendering tree can be constructed based on the hierarchical relationship of these elements. This illustration shows how multiple UI elements collectively construct a rendering tree, which includes element nodes corresponding to each UI element. The hierarchical relationship between these element nodes reflects the overall UI hierarchy within the webpage.

[0185] The rendering tree can be constructed based on the reception of interface navigation operations. Therefore, if different interface navigation operations indicate the display of different interface elements, different rendering trees will be constructed.

[0186] Upon receiving a UI navigation operation, at least one UI element (the second UI element) to be rendered as indicated by the UI navigation operation can be determined from multiple UI elements developed within the webpage. A rendering tree is constructed based on the hierarchical relationship of the at least one UI element, thereby obtaining the rendering tree corresponding to the second UI element to be displayed. The second UI element includes at least one UI element.

[0187] In a schematic manner, after obtaining multiple interface elements developed in the webpage corresponding to the webpage link through the first rendering engine, if the browser interface receives an interface jump operation, the first rendering engine determines at least one interface element (second interface element) to be rendered and displayed as indicated by the interface jump operation from the multiple interface elements, and constructs a rendering tree according to the hierarchical relationship of at least one interface element.

[0188] The rendering tree includes element nodes (i.e. rendering nodes) corresponding to interface elements (i.e., visible interface elements). When there are at least two interface elements, the hierarchical relationship between element nodes is used to indicate the interface hierarchy relationship of at least two interface elements.

[0189] Indicatively, each interface element corresponds to an element node. If the rendering tree is used to indicate at least one interface element (including a second interface element) that needs to be displayed on the native interface, the rendering tree is constructed by combining the element nodes corresponding to at least one interface element. The hierarchical relationship of the element nodes in the rendering tree represents the hierarchical relationship between at least two interface elements.

[0190] Interface elements can be rendered by calling atomic components through the first rendering engine. Interface elements are visual elements. Atomic components are component-based design concepts described by web technology. They represent small, independent UI components that can be reused. For example, text interface elements can be rendered by text atomic components.

[0191] As an illustration, atomic components can be written using React technology within the web-side runtime environment of a browser. Alternatively, other web development technologies such as Vue can also be used. Atomic components possess the attributes of reproducibility, encapsulation, and single-function. Reproducibility means that atomic components can be reused; encapsulation means that the internal implementation details of an atomic component are hidden from the outside, exposing only interfaces or application programming interfaces (APIs), such as props and events; and single-function means that each atomic component focuses on a small function or behavior, typically having a single responsibility.

[0192] As an illustration, an application typically deploys multiple atomic components, such as text atomic components, button atomic components, image atomic components, etc. Since atomic components can be reused, each atomic component can be deployed individually, and diverse UI element rendering processes can be achieved by repeatedly calling atomic components. Alternatively, multiple identical atomic components can be deployed, with each atomic component corresponding to a UI element, thereby simplifying the rendering tree constructed from UI elements.

[0193] There can be a one-to-one relationship between multiple atomic components and multiple interface elements, that is, one interface element is rendered through one atomic component, such as text interface element T being rendered through text atomic component 1; or, there can be a one-to-many relationship between multiple atomic components and multiple interface elements, that is, multiple interface elements are rendered through one atomic component, such as text interface element T1 being rendered through text atomic component 1, and text interface element T2 also being rendered through text atomic component 1 (reusing text atomic component 1). There is no limitation on the relationship between the two here.

[0194] In React, atomic components are the basic units of React components, typically created to achieve a specific function or present a certain UI. For example, a button, an input field, or an icon can all be considered atomic components. UI elements can be understood as the UI implementation of atomic components, usually described using HTML tags, component names, etc. Multiple UI elements are transformed into a Document Object Model (DOM) tree during rendering.

[0195] Figure 9 shows the interactive flowchart of building and updating the render tree using React technology. It includes atomic components 910 (which can also be understood as the visible interface elements rendered by atomic components, referred to as React Element), the first rendering engine 920 (the rendering engine under web technology, referred to as Render Rngine) and the render tree 930 (Virtual DOM).

[0196] Taking an atomic component corresponding to a UI element as an example; when a React component is rendered for the first time, the first rendering engine 920 will recursively parse from the root node, find all atomic components, and call the createInstance method to create an element node of the rendering tree. This element node contains the element attribute information required for its own rendering, and then uses the appendChild method to add this element node to its parent node, finally generating a complete rendering tree structure 930.

[0197] In addition, when React components are updated, the first rendering engine 920 needs to calculate the differences for each UI element rendered by the atomic component. When the element attribute information of the UI element is updated, the updateProps method is used to update the corresponding information on the render tree. When the child nodes of the UI element change (such as adding or deleting a node), the updateChild method is used to update the child nodes of the UI element. The relevant content about the update information of the UI elements will be shown below.

[0198] As shown in Figure 10, there is a list element 1020 (ListView) under the root node 1010 (Root). The list element contains three text elements, namely text element 1031, text element 1032, and text element 1033. This means that there is a list on the page with three lines of text. The rendering tree in actual applications will be more complex.

[0199] Indicatively, each element node in the rendering tree corresponds to a UI element. Different UI elements of the same type can be rendered from different atomic components of the same type, such as text atomic component 1 rendering text element 1031, text atomic component 2 rendering text element 1032, and text atomic component 3 rendering text element 1033; or, different UI elements of the same type can be rendered from a single atomic component of the same type, such as a text atomic component being used 3 times to render and display text elements 1031, 1032, and 1033.

[0200] Step 820: The first rendering engine generates rendering instructions containing the view structure.

[0201] The view structure includes a rendering tree.

[0202] In a schematic way, after the first rendering engine obtains the second interface elements, it comprehensively analyzes the element distribution of the second interface elements (which may include at least one interface element) during display to obtain the view structure. That is, the view structure is used to characterize the distribution display of at least one interface element during rendering.

[0203] Indicatively, the first rendering engine generates a view structure based on the rendering tree and generates rendering instructions containing the view structure to be sent to the second rendering engine; or, the first rendering engine generates rendering instructions containing interface identifiers and view structure to be sent to the second rendering engine.

[0204] The first rendering engine can analyze the element attribute information and hierarchical relationship corresponding to the element nodes in the rendering tree to generate layout information.

[0205] The layout information is used to characterize the layout features of the interface elements; the view structure also includes layout information. Illustratively, the layout information is used to characterize the element distribution of at least one interface element during rendering and display.

[0206] After constructing the rendering tree corresponding to the second interface elements, the first rendering engine traverses each interface node of the rendering tree from the root node in a specific order (usually from top to bottom and from left to right) to obtain the layout information corresponding to the rendering tree.

[0207] The first rendering engine can obtain the element attribute information corresponding to each element node in the rendering tree.

[0208] As an illustration, in the process of obtaining the view structure through the first rendering engine, considering that each element node in the rendering tree corresponds to an element attribute information, the first rendering engine obtains the element attribute information corresponding to each element node in the rendering tree, and then obtains the layout information corresponding to the rendering tree by analyzing the element attribute information.

[0209] Element attribute information describes the style, layout, and other rendering-related characteristics of the UI element corresponding to the element node. Element attribute information includes at least one of the following: style attributes, layout attributes, effect attributes, interaction attributes, stacking order attributes, and custom attributes.

[0210] Indicatively, style attributes are used to characterize the style of UI elements displayed in the interface. Style attributes include color (such as text color, background color, etc.), font (such as font type, font size, font weight, font style, etc.), border (such as border style, border width, border color, etc.), padding (such as the inner margin between UI elements and borders, etc.), margin (such as the margin between UI elements and other UI elements), and size (usually used to characterize the width and height of UI elements).

[0211] Indicatively, layout attributes are used to characterize the layout of interface elements within the interface. Layout attributes include position (such as the positioning method of interface elements—static, absolute, relative, fixed, etc.), coordinates (such as the specific position of interface elements when displayed, usually determined by an established interface coordinate system), float (the floating state of interface elements, used to determine the fluidity of interface elements during layout), alignment (such as text alignment, block-level element alignment, etc.), etc.

[0212] Indicatively, effect attributes are used to characterize the special effects of interface elements when displayed in the interface. Effect attributes include transparency (the transparency level of the interface element) and shadow effect (the attribute that adds shadow to the interface element).

[0213] Indicatively, interactive properties are used to characterize the interactive behavior of UI elements when they receive a triggered operation in the interface. Interactive properties include pseudo-class states (describing the style changes of UI elements under different interactive states, etc.) and event handling states (usually representing information related to JavaScript event handling, etc.).

[0214] Indicatively, the stacking order attribute is used to characterize the stacking order of different interface elements, and to determine the front and back positions of interface elements in three-dimensional space.

[0215] As an illustration, custom attributes are properties that developers can add to store additional information, etc.

[0216] The above element attribute information is only an illustrative example and is not limited to the embodiments of this application.

[0217] When the first rendering engine obtains layout information, it usually first sets an initial interface coordinate system, typically with the top left corner of the terminal interface as the origin. Then, the first rendering engine traverses the rendering tree and comprehensively analyzes the hierarchical relationship between parent and child elements, as well as focusing on analyzing the style and layout attributes in the element attribute information.

[0218] In a schematic way, for each interface node, considering the width and height of the parent element, the width and height of the corresponding interface element are calculated; considering the layout of adjacent interface elements, the distribution of inline elements is analyzed; the absolute positioning coordinates and fixed positioning coordinates of the child element are determined based on the coordinates of the parent element, thereby calculating a region box for each interface element. This region box includes the position of the interface element (identified by x, y coordinates) and its size (represented by width and height), thus obtaining the layout information.

[0219] The first rendering engine can record the calculated layout information in the rendering tree. The layout information of each element node is matched with its element attribute information, and the layout information and the rendering tree are combined to form the view structure.

[0220] The first rendering engine can synthesize the rendering tree and layout information to obtain the view structure, and then send the view structure to the second rendering engine under the native framework.

[0221] To illustrate, the first rendering engine can send the view structure as a rendering instruction to the second rendering engine under the native framework via the JavaScript Bridge; or, the first rendering engine can combine the view structure and the corresponding interface identifier of the native interface into a rendering instruction, and then send the rendering instruction to the second rendering engine via the JavaScript Bridge.

[0222] Step 830: The second rendering engine renders the second interface elements in the native interface based on the view structure.

[0223] As an illustration, after obtaining the view structure, the second rendering engine can perform a targeted rendering process based on the view structure, since the view structure represents the overall layout and hierarchical relationship of interface elements on the interface.

[0224] The second rendering engine can determine the first atomic component used to render interface elements from the view structure.

[0225] To illustrate, an atomic component is a component deployed within an application that can be reused and rendered to display UI elements. Typically, multiple atomic components are deployed within an application, such as text atomic components, button atomic components, image atomic components, etc. Because atomic components can be reused, each atomic component can be deployed individually or in multiples of the same type.

[0226] The first atomic component can be at least one atomic component used to render at least one interface element; after obtaining the view structure, the atomic component used to render each interface element is determined by the interface elements represented by the view structure, and at least one atomic component capable of rendering at least one interface element is obtained as the first atomic component.

[0227] To illustrate, suppose there are two interface elements: interface element 1 and interface element 2. Since element attribute information can characterize the type of interface element, it can be determined through element attribute information that interface element 1 is rendered by a text atomic component and interface element 2 is rendered by an image atomic component. Then the first atomic component includes a text atomic component and an image atomic component.

[0228] For example: Suppose the view structure indicates the display of multiple interface elements within a form, including input boxes, submit buttons, and information prompts within the form; in this case, reading the element attribute information of the interface elements determines that the input box (used to complete text input, password input, etc.) corresponds to text atomic component 1, the submit button (used to trigger) corresponds to button atomic component, and the information prompt (used to display text and receive triggers) corresponds to text atomic component 2, etc.

[0229] Based on the correspondence between the atomic components configured in the browser framework and the native components configured in the native framework, the second rendering engine can determine the first native component corresponding to the first atomic component.

[0230] In illustrative terms, an atomic component is a component deployed within an application and invoked by the primary rendering engine to render UI elements in the browser interface. Typically, there is a one-to-one correspondence between atomic components corresponding to browser frames and native components corresponding to native frames; for example, a text atomic component corresponds to a native text component, and a button atomic component corresponds to a native button component, etc.

[0231] Therefore, after determining the first atomic component for rendering interface elements through the view structure, at least one native component can be determined as the first native component through the first atomic component.

[0232] The second rendering engine can render the second interface elements through the first native component and display the second interface elements in the native interface.

[0233] Indicatively, the view structure represents the relative display of multiple interface elements. Therefore, the native framework can render at least one interface element in accordance with the view structure through the first native component corresponding to the first atomic component, thereby displaying a second interface element including at least one interface element within the native interface.

[0234] In the process of rendering multiple interface elements by calling the first native component through the view structure, the second rendering engine uses the native technology corresponding to the native framework. Therefore, although the second interface elements displayed in the native interface are rendered and displayed through the interface elements provided by the browser framework, they have stronger stability.

[0235] It is worth noting that the above are merely illustrative examples, and the embodiments of this application are not limited thereto.

[0236] In summary, even when the browser interface is currently displayed, a more stable native interface can still be created in response to interface transition operations. Provided that the native interface is adapted to the application itself, the second interface elements obtained through the web address based on the interface transition operation are rendered on the native interface. This not only leverages the advantages of the native interface's display stability but also allows for the more timely acquisition of the second interface elements through the web address. This helps to provide users with more efficient and better feedback while ensuring a smooth interface transition effect.

[0237] In this embodiment, a rendering tree is generated by a first rendering engine based on a user interface navigation operation, and a view structure is obtained and sent to a second rendering engine. The first rendering engine is the rendering engine corresponding to the browser framework. It can obtain the interface elements determined based on the user interface navigation operation and realize the real-time construction process of the rendering tree, generating a more timely rendering tree. This allows the view structure to reflect the latest situation of the webpage to the greatest extent and to express the interface hierarchy of interface elements in a more standardized way, improving the standardization of rendering instructions. The rendering instructions, including the view structure, are sent to the second rendering engine so that the second rendering engine can implement a more standardized and targeted rendering process on the native interface based on the view structure. This makes the rendering process of the second interface elements more timely and stable, improving the user experience of using the application.

[0238] If the first rendering engine detects that the first information has been written, it obtains the element difference information corresponding to multiple interface elements and generates update information. This allows the second rendering engine to be prompted to update the displayed second interface element to a third interface element based on the update information sent by the first rendering engine after the second interface element is displayed in the native interface. As illustrated in Figure 11, the embodiment shown in Figure 2 may further include steps 1110 to 1130.

[0239] Step 1110: If the presence of first information writing is detected, the first rendering engine obtains the element difference information corresponding to the second interface element.

[0240] In illustrative terms, the first information is the information written to the webpage link. If the first rendering engine detects that new first information has been written to the webpage link and needs to update the second interface element, the first rendering engine can analyze at least one interface element included in the second interface element to obtain the element difference information corresponding to each of the at least one interface element.

[0241] If the interface elements do not change, they can be considered as having no element difference information or having zero element difference information. If the interface elements change, the differences between the attribute information corresponding to the original interface elements and the attribute information corresponding to the new interface elements are analyzed to determine the element difference information corresponding to the interface elements.

[0242] Among them, element difference information is used to characterize the influence of the first information on the interface elements; element difference information characterizes at least one of the subordinate differences between multiple interface elements and the information differences corresponding to element attribute information.

[0243] Element difference information includes at least one of various information representing changes, such as element attribute change information, element deletion information, element addition information, and element hierarchy change information.

[0244] Element attribute change information is used to characterize changes in the attribute information of interface elements, such as style changes, font changes, etc.; element deletion information is used to characterize the deletion of interface elements; element addition information is used to characterize the addition of new interface elements; element hierarchy change information is used to indicate the hierarchy changes between interface elements, etc. Element deletion information, element addition information, and element hierarchy change information can be collectively referred to as the hierarchical differences between multiple interface elements.

[0245] When the first rendering engine detects that the first information has been written, it obtains the preview data (second attribute information of the third interface element) corresponding to the second interface element. The second interface element corresponds to the first attribute information. The preview data includes the second attribute information of the second interface element generated after the first information is written, simulating the effect of the first information being written, and containing the expected rendering effect.

[0246] The third interface element (simulated update result) is the interface element after the change based on the first information. The simulated update result may be the same as the second interface element, or it may differ from it. That is, the second interface element and the simulated update result are used to indicate the same interface element before and after the first information is written. When the first information does not affect the display of the second interface element, the second interface element is the same as the simulated update result; when the first information affects the display of the second interface element, there is a difference between the second interface element and the simulated update result.

[0247] The second interface element corresponds to the first attribute information. The preview data includes the second attribute information of the second interface element after the simulated update result (third interface element) after the first information is written. The first attribute information is the information of the interface element (second interface element) before the first information is written, and the second attribute information is the information of the interface element (third interface element) after the first information is written.

[0248] The element difference information corresponding to the second interface element is generated based on the difference between the first attribute information and the second attribute information.

[0249] The differences between the first attribute information and the second attribute information include differences in at least one of the following dimensions: string type dimension, list dimension, and element style dimension. Therefore, the element difference information corresponding to the second interface element can be obtained from at least one of the following dimensions: string type dimension, list dimension, and element style dimension.

[0250] The string type dimension is used to obtain the name information of the atomic component that renders the UI element; the list dimension is used to obtain the dependency information of the UI element; and the element style dimension is used to obtain the display style of the UI element on the UI. When one atomic component corresponds to one UI element, the string type dimension is used to obtain the name information of the atomic component, the list dimension is used to obtain the dependency information of the atomic component, and the element style dimension is used to obtain the display style of the atomic component on the UI.

[0251] Based on at least one of the following results: the first comparison result obtained from the string type dimension, the second comparison result obtained from the list dimension, and the third comparison result obtained from the element style dimension, obtain the element difference information corresponding to the second interface element.

[0252] To illustrate, after obtaining the string type identifier, list information, and element style corresponding to the second interface element and the simulated update result (third interface element), the same information is compared horizontally to obtain the differences in element attributes.

[0253] As shown in Figure 12, the first attribute information 1210 (old attribute list) corresponding to the second interface element and the second attribute information 1220 (new attribute list) corresponding to the third interface element are shown; wherein the first attribute information 1210 includes a first string type identifier 1211, a first list information 1212 and a first element style 1213; the second attribute information 1220 includes a second string type identifier 1221, a second list information 1222 and a second element style 1223.

[0254] The method for obtaining the first comparison result includes: obtaining the first string type identifier corresponding to the second interface element from the first attribute information, obtaining the second string type identifier of the third interface element (the simulated update result of the second interface element after the first information is written) from the second attribute information, and obtaining the first comparison result based on the difference between the first string type identifier and the second string type identifier.

[0255] The first string type identifier is used to indicate the component identifier of the atomic component that renders the second interface element, and the second string type identifier is used to indicate the component identifier of the atomic component that renders the third interface element (simulated update result).

[0256] As an illustration, when comparing the first string type identifier and the second string type identifier, since the string type identifier represents the name of the atomic component used when rendering the interface element, if the first string type identifier and the second string type are the same, it is determined that the dimension of the string type identifier has not changed; if the first string type identifier and the second string type are different, it is determined that the dimension of the string type identifier has changed, as shown in Figure 12, where the first string type identifier 1211 and the second string type identifier 1221 are different (shown in bold). In the case where the first string type identifier and the second string type identifier are different, first difference information is generated.

[0257] The second comparison result is obtained by: obtaining the first list information corresponding to the second interface element from the first attribute information, obtaining the second list information corresponding to the third interface element (simulated update result) from the second attribute information, and obtaining the second comparison result based on the difference between the first list information and the second list information.

[0258] The first list information is used to indicate subordinate interface elements that belong to the second interface element; the second list information is used to indicate subordinate interface elements that belong to the third interface element (simulated update result).

[0259] Schematic illustration: When comparing the first list information and the second list information, since the list information indicates the subordinate relationships between interface elements, if at least one piece of information differs between the first list information and the second list information (i.e., the subordinate sub-elements differ), it indicates a change in the list information dimension, as shown in Figure 12, where the first list information 1212 and the second list information 1222 are identical. When the interface elements in the first list information that are subordinate to the second interface element differ from the interface elements in the second list information that are subordinate to the third interface element, a second difference information is generated; this includes at least one of a difference in the number of subordinate elements and a difference in the numerical value of the subordinate elements.

[0260] The third comparison result is obtained by: obtaining the first element style corresponding to the second interface element from the first attribute information, obtaining the second element style corresponding to the third interface element (simulated update result) from the second attribute information, and obtaining the third comparison result based on the difference between the first element style and the second element style.

[0261] The first element style is used to indicate the display style of the second interface element on the interface, and the second element style is used to indicate the display style of the third interface element (simulated update result) on the interface.

[0262] To illustrate, when comparing the first element style and the second element style, since the element style indicates the style changes between interface elements, each element corresponds to at least one style, and each style corresponds to an attribute value. Therefore, if at least one attribute value differs between the first element style and the second element style, it indicates a change in the element style dimension, generating the third difference information. As shown in Figure 12, the second element style 1213 is different from the second element style 1223 (shown in bold).

[0263] By combining at least one of the first comparison results, the second comparison results, and the third comparison results, element difference information corresponding to the second interface element is generated to characterize the attribute differences analyzed in the string type dimension, list dimension, and element style dimension.

[0264] Step 1120: Based on the element difference information, the first rendering engine generates update information.

[0265] In a schematic manner, the element difference information corresponding to at least one interface element included in the second interface element is obtained. It is possible that some interface elements correspond to element difference information, which means that the first information has changed the interface elements, while other interface elements do not correspond to element difference information or the element difference information is zero; or, the first information has changed all interface elements, then multiple interface elements correspond to non-zero element difference information, etc.

[0266] Based on the element difference information corresponding to at least one interface element, the first rendering engine can generate update information, which is used to instruct the second rendering engine to update the display of the interface elements.

[0267] Indicatively, the update information includes at least one of element addition information, element deletion information, and attribute update information. Element addition information is used to indicate the addition of a new interface element, element deletion information is used to indicate the deletion of an interface element, and attribute update information is used to indicate changes in the attributes of the interface element (such as style changes, font changes, position changes, etc.).

[0268] Step 1130: The second rendering engine updates the second interface elements to the third interface elements in the native interface based on the update information.

[0269] To illustrate, the first rendering engine sends update information to the second rendering engine. The update information includes the changed interface elements. Based on the update information, the second rendering engine adjusts the display of at least one of the changed interface elements in the native interface to display the third interface element. The third interface element has at least one change in the display of the interface element compared to the second interface element, such as a change in the style of the interface element or a change in the font of the interface element, etc., which are not limited here.

[0270] Update information indicating changes in attributes can be defined as a set of instructions. When a certain number of instructions are reached, or when the rendering tree finishes an update, this set of instructions is serialized and passed to the second rendering engine on the native side (the runtime environment of the native framework) using the JavaScript Bridge.

[0271] The definition of instruction types and their parameters includes at least one of the following.

[0272] (1) Create UI elements: When creating UI elements, determine the unique component identifier of the atomic component used to render the UI element and the initial element attribute information (i.e., the element addition information in the element difference information).

[0273] (2) Add child nodes: It needs to include at least one of the element identifiers of the parent element and the child element (i.e., the element hierarchy change information in the element difference information);

[0274] (3) Delete child nodes: It needs to include at least one of the element identifiers of the parent element and the child element (i.e., the element deletion information in the element difference information);

[0275] (4) Update attributes: This needs to include the element identifier of the interface element and the attribute information of the different elements (i.e., the element attribute change information in the element difference information).

[0276] As shown in Figure 13, taking the update information implementation as an example of an instruction sequence, the process of sending the instruction sequence to the native side includes the following steps.

[0277] Step 1310: Generate instructions.

[0278] Indicatively, update information indicating a change in attributes is defined as instructions, resulting in multiple instructions representing the update information.

[0279] Step 1320: Is the update complete?

[0280] For illustration purposes, if the rendering tree has not yet finished updating, proceed to step 1330; if the rendering tree has finished updating and the instruction sequence sending process has not been executed according to the condition that a certain number of instructions have been reached, proceed to step 1350.

[0281] Step 1330, add to the queue.

[0282] To illustrate, if the render tree has not yet finished updating, instructions are added to the queue to obtain the instruction sequence.

[0283] Step 1340: Has the queue reached the threshold?

[0284] For illustrative purposes, if the instruction sequence sending process is executed based on a certain number of instructions in the instruction sequence, and the number of instructions in the current instruction sequence reaches a preset threshold, then step 1350 is executed; if the number of instructions in the instruction sequence does not reach the preset threshold, the process ends.

[0285] Step 1350: Send the instruction sequence to the native side.

[0286] This illustrates how a sequence of instructions representing update information is sent to the native side, enabling the native side to update the second interface element to the third interface element within the native interface based on the instruction sequence. For example, the instruction sequence can be sent to the second rendering engine within the native framework, so that the second rendering engine can update the second interface element to the third interface element within the native interface.

[0287] It is worth noting that the above are merely illustrative examples, and the embodiments of this application are not limited thereto.

[0288] In summary, even when the browser interface is currently displayed, a more stable native interface can still be created in response to interface transition operations. Provided that the native interface is adapted to the application itself, the second interface elements obtained through the web address based on the interface transition operation are rendered on the native interface. This not only leverages the advantages of the native interface's display stability but also allows for the more timely acquisition of the second interface elements through the web address. This helps to provide users with more efficient and better feedback while ensuring a smooth interface transition effect.

[0289] This application describes a process for generating update information based on element difference information to quickly update second interface elements. When a webpage has a first information write operation, the element difference information corresponding to each interface element is analyzed, and update information is generated by combining the element difference information. This allows the second rendering engine to receive the update information sent by the first rendering engine and realize the update display process of the interface elements. This process fully utilizes the flexibility of the browser framework, and while maintaining a stable display of interface elements based on the native interface, it adjusts the display of interface elements in a targeted and timely manner, improving the timeliness and accuracy of the second interface element updates and enhancing the flexibility of content display.

[0290] When a fourth interface element (such as the second or third interface element mentioned above) is displayed in the native interface, if an interface trigger operation is received for the fourth interface element, since the fourth interface element is rendered and controlled by the native framework under the guidance of the browser framework, the native framework needs to generate a trigger event after receiving the interface trigger operation in the native interface. Therefore, the browser framework needs to analyze the trigger event sent by the native framework, and then display the fifth interface element based on the analyzed event execution information. Illustratively, as shown in Figure 14, the method provided in this embodiment may further include steps 1410 to 1430.

[0291] Step 1410: In response to receiving an interface trigger operation for a fourth interface element in the native interface, generate a trigger event for a second native component used to render the fourth interface element.

[0292] The triggering event includes at least one of the following: the native component identifier of the second native component, the event name of the interface triggering operation, and the operation data corresponding to the interface triggering operation.

[0293] To illustrate, when a fourth interface element (such as a second interface element or an updated third interface element) is displayed in the native interface, if the fourth interface element in the native interface receives an interface trigger operation such as a click operation or a long press operation, a trigger event is generated through the second native component corresponding to the fourth interface element.

[0294] Since the fourth interface element displayed within the native interface is displayed with the assistance of the browser framework, the native framework cannot determine the changes of the interface element based on the interface trigger operation on its own. After the native interface receives the interface trigger operation, it determines the second native component that received the interface trigger operation under the native framework according to the fourth interface element targeted by the interface trigger operation. The second native component then determines at least one of the following: the native component identifier of the second native component, the event name of the interface trigger operation, and the operation data corresponding to the interface trigger operation. It then generates a trigger event and sends it to the browser framework, so that the browser framework determines how the fourth interface element changes.

[0295] That is, the triggering event includes at least one of the following: the native component identifier of the second native component targeted by the interface triggering operation, the event name of the interface triggering operation, and the operation data corresponding to the interface triggering operation.

[0296] Indicatively, the interface triggering operation is usually targeted at at least one interface element displayed within the native interface. Since an interface element is rendered by at least one native component, the native component used to render the interface element can be determined as the second native component based on the interface element targeted by the interface triggering operation, and the component identifier of the second native component can be determined. This component identifier is used to uniquely identify the second native component.

[0297] For illustrative purposes, each interface-triggered operation corresponds to an operation event. The operation event is used to indicate the name of the event triggered by the interface-triggered operation. Operation events can have various styles, such as clicking control A, swiping the screen, clicking the left mouse button, and double-clicking the right mouse button, etc., and are not limited here.

[0298] For illustrative purposes, the operation data is used to indicate the data information entered for the interface-triggered operation. For example, if the interface-triggered operation is to enter a piece of text in the input box, then the operation data includes that piece of text; or, if the interface-triggered operation is to upload an image, then the operation data includes that image, etc. There is no limitation here.

[0299] The second native component can be invoked to send the triggered event to the event dispatcher, which in turn sends the triggered event to the event detector.

[0300] To illustrate, an event dispatcher is deployed on the native side corresponding to the native framework. The event dispatcher is used to interact with the event detector under the browser framework to send the generated triggering events to the event detector.

[0301] Step 1420: Call the event detector to analyze the triggering event and obtain the event execution information.

[0302] The event detector analyzes the triggering event to obtain the event execution information after the triggering event is executed. The event execution information is used to indicate the response result to the interface triggering operation.

[0303] The event detector can determine the first response behavior that matches the event name and native component identifier in the triggering event.

[0304] The received trigger events can be analyzed by the event detector to extract the event name and native component identifier, and then the first response behavior can be determined based on the event name and native component identifier.

[0305] The behavior call table can be obtained through the event detector. The behavior call table is stored in the form of key-value pairs, where the value is the response behavior and the key is the atomic component identifier and event name used to implement the response behavior.

[0306] Indicatively, the behavior call table is bound to the event detector, with at least one atomic component identifier and an event name as the key, the behavior completed by at least one atomic component identifier and an event name as the response behavior, and the response behavior as the value, so that a unique response behavior can be determined based on the atomic component identifier and the event name.

[0307] The event detector can be invoked to query the behavior call table based on the event name and native component identifier to obtain the first response behavior that matches the event name and native component identifier.

[0308] As an illustration, the event name and native component identifier can be used as query keys to query the behavior call table, and the response behavior that matches the event name and native component can be used as the first response behavior.

[0309] Based on the correspondence between atomic components and native components, the first response behavior can be simulated by the second atomic component corresponding to the second native component, and event execution information can be generated.

[0310] As an illustration, based on the correspondence between native components and atomic components, the corresponding second atomic component can be determined within the browser framework based on the second native component. The second atomic component is then called to complete the first response behavior that matches the event name, such as "jump to interface A to display information P", etc. There are no restrictions here.

[0311] Figure 15 illustrates the process of implementing event notification based on event dispatcher and event detector.

[0312] Among them, an event dispatcher 1510 is deployed on the native side. The native side usually refers to the content and functions deployed within the application. The native side can be understood as the execution environment corresponding to the native framework. The event dispatcher 1510 is a component deployed on the native side to distribute triggered events. An event detector 1520 is deployed on the web side. The web side can be understood as the execution environment corresponding to the browser framework. The event detector 1520 is a component used to obtain triggered events and analyze them.

[0313] During the process of calling the first rendering engine to perform virtual rendering through atomic components based on the interface jump operation, the event names corresponding to the events that the atomic components can realize are analyzed. The atomic component identifier and the event name are used as the keys in the key-value pair, and the response behaviors that the atomic components and event names can realize are used as the values ​​in the key-value pair. The behavior call table is then sent to the web-side event detector 1520 to bind the behavior call table to the web-side event detector 1520.

[0314] When a UI trigger operation is received on the native UI, the UI element (fourth UI element) indicated by the UI trigger operation can be analyzed on the native side, and at least one of the native component identifier, operation event and operation data of the second native component corresponding to the UI element can be determined to generate a trigger event, such as the native framework calling the native component to generate a trigger event; then the trigger event is sent to the event dispatcher 1510.

[0315] Event dispatcher 1510 sends event callbacks to event detector 1520 on the web side via JavaScript Bridge. Event detector determines at least one of native component identifier, operation event and operation data based on behavior call table parsing. Based on the native component identifier, it determines the atomic component identifier of the second atomic component corresponding to the second native component, and determines the first response behavior based on the atomic component identifier and event name. The first response behavior is then executed to generate event execution information.

[0316] As shown in Figure 16, the following explanation uses the event notification process of browser framework 1620 and native framework 1630 as examples.

[0317] First, the browser framework 1620 binds the behavior call table to the web-side event detector and notifies the native framework 1630 to render the native component (i.e., render and display the second interface element within the native interface based on the native component). Then, when the user 1610 performs an interface-triggered operation (such as clicking a button) within the native interface, the native component of the native framework 1630 generates a trigger event (such as a click event) and sends the trigger event to the event detector of the browser framework 1620 through the event dispatcher, thereby determining the first response behavior through the behavior call table. After that, the event detector can call the first rendering engine to use the atomic component to perform the first response behavior (such as responding to the click event), thereby obtaining the event execution information.

[0318] Step 1430: Display the fifth interface element based on the event execution information.

[0319] When the event execution information indicates that the native framework is to execute it, the browser framework sends the event execution information to the native framework, thereby calling the native framework to render the event execution information and display the fifth interface element; or, when the event execution information indicates that the browser framework is to execute it, the browser framework renders the event execution information and displays the fifth interface element, etc., without limitation here.

[0320] The fifth interface element is an interface element displayed within the native interface; or, the fifth interface element is an interface element displayed within another interface outside the native interface, such as the previous browser interface, other browser interfaces, other native interfaces, etc., which are not limited here.

[0321] As an illustration, the native framework calls the second rendering engine to render and restore the view structure through native components, parsing attribute information and responding to changes.

[0322] The second rendering engine can be designed as a state-responsive mode. Each native component called by the second rendering engine corresponds to a model, which records the child node relationships and attribute information of the current native component (equivalent to a state).

[0323] Figure 17 shows a flowchart illustrating how the native framework calls the second rendering engine to perform rendering.

[0324] Step 1710: Receive rendering instructions.

[0325] To illustrate, the native framework's second rendering engine receives rendering instructions from the browser framework's first rendering engine.

[0326] Step 1720: parse the rendering instructions.

[0327] As an illustration, the native framework calls the second rendering engine to parse rendering instructions in order to determine the rendering of UI elements through native components.

[0328] Step 1730: Update the model status.

[0329] For illustration, if the parsing result indicates that the model state of the corresponding native component should be updated, such as if the received rendering instruction is a sequence of instructions indicating update information, then the model updates the child node relationship and attribute information according to the rendering instruction and generates a new state. This can be regarded as adjusting at least one interface element in the second interface element based on the above update information. If an interface element corresponds to a native component, then the model state of the native component corresponding to the interface element is adjusted based on the interface element affected by the update information.

[0330] Step 1740 triggers a refresh of the native component.

[0331] This illustrates how triggering a native component refresh renders the UI elements onto the screen according to the latest model state, thus displaying UI elements with timely updated information.

[0332] It is worth noting that the above are merely illustrative examples, and the embodiments of this application are not limited thereto.

[0333] In summary, even when the browser interface is currently displayed, a more stable native interface can still be created in response to interface transition operations. Provided that the native interface is adapted to the application itself, the second interface elements obtained through the web address based on the interface transition operation are rendered on the native interface. This not only leverages the advantages of the native interface's display stability but also allows for the more timely acquisition of the second interface elements through the web address. This helps to provide users with more efficient and better feedback while ensuring a smooth interface transition effect.

[0334] In this embodiment, considering that the interface elements displayed in the native interface are displayed with the assistance of the browser framework, the native framework cannot determine the changes of interface elements based on the interface trigger operation. Based on the interface trigger operation received by the native interface, a trigger event is generated and sent to the event detector of the browser framework. The event detector then calls the corresponding atomic component to execute the first response behavior, and the fifth interface element is rendered and displayed by the corresponding framework based on the indication of the event execution information, thereby improving the flexibility of interface display.

[0335] The overall structure of the UI rendering technology based on React technology is explained, as shown in Figure 18, which is a schematic diagram of the overall architecture for executing the UI rendering method.

[0336] The web-side component 1810 includes an open-source JavaScript library (React JavaScript, React JS) for building user interfaces. React JS on the web-side provides atomic components that correspond one-to-one with the native components in the native-side component 1820, such as button atomic components, text atomic components, and list atomic components. Web developers use these atomic components to implement or encapsulate higher-order components based on these atomic components.

[0337] The Web Render Engine (WME) is the primary rendering engine for the web side. It is used to parse the properties and hierarchy of React atomic components and bind various callback behaviors.

[0338] The web-side 1810 and the native-side 1820 communicate via a JavaScript Bridge. This communication channel not only transmits the parsing results (view structure) of the first rendering engine of the web-side 1810 to the native-side 1820, but also transmits the click behavior of the native-side 1820 to the web-side 1810.

[0339] The second rendering engine on the native side 1820 is used to receive the view structure sent by the first rendering engine on the web side 1810 from the JavaScript Bridge, and to render the actual view on the native side 1820 according to this view structure.

[0340] The native side 1820 includes native components, which are atomic components provided to Web side 1810 developers in the corresponding React JS implementation in the native side 1820, and are called by the rendering engine of the native side 1820 to render the page.

[0341] It is worth noting that the above are merely illustrative examples, and the embodiments of this application are not limited thereto.

[0342] In summary, even when the browser interface is currently displayed, a more stable native interface can still be created in response to interface transition operations. Provided that the native interface is adapted to the application itself, the second interface elements obtained through the web address based on the interface transition operation are rendered on the native interface. This not only leverages the advantages of the native interface's display stability but also allows for the more timely acquisition of the second interface elements through the web address. This helps to provide users with more efficient and better feedback while ensuring a smooth interface transition effect.

[0343] In this embodiment, a hybrid rendering scheme using native and browser frameworks enables React-based development to achieve native-like results. This hybrid architecture allows developers to rapidly iterate and update pages without relying on longer application release cycles, which is crucial for quickly responding to market changes and user feedback. Furthermore, the use of atomic components in the browser framework allows for maximum code reuse within the native framework, significantly reducing development costs.

[0344] Figure 19 is a structural block diagram of a user interface rendering apparatus provided in an exemplary embodiment of this application. As shown in Figure 19, the apparatus includes the following parts:

[0345] The first rendering module 1910 is used to display a first user interface in the application, wherein the first user interface is created and rendered by a browser frame deployed within the application, and the first user interface includes first interface elements obtained through a web page address.

[0346] The receiving module 1920 is used to receive a screen jump operation, which triggers a jump from the currently displayed first user interface to the second user interface of the application to display second interface elements.

[0347] The second rendering module 1930 is used to create and render the second user interface through the native framework of the application in response to the interface jump operation, wherein the second user interface includes the second interface elements dynamically obtained by the browser framework through the web page address.

[0348] It should be noted that the user interface rendering apparatus provided in the above embodiments is only an example of the division of the above functional modules. In actual 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. In addition, the user interface rendering apparatus and the user interface rendering method embodiments provided in the above embodiments belong to the same concept, and their specific implementation process can be found in the method embodiments, which will not be repeated here.

[0349] Figure 20 shows a structural block diagram of an electronic device 2000 provided in an exemplary embodiment of this application. The electronic device 2000 can be a portable mobile terminal, such as a smartphone, in-vehicle terminal, tablet computer, MP3 player (Moving Picture Experts Group Audio Layer III), MP4 player (Moving Picture Experts Group Audio Layer IV), laptop computer, or desktop computer. The electronic device 2000 may also be referred to as a user device, portable terminal, laptop terminal, desktop terminal, or other names.

[0350] Typically, electronic device 2000 includes a processor 2001 and a memory 2002.

[0351] Processor 2001 may include one or more processing cores, such as a quad-core processor or an octa-core processor. Processor 2001 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). Processor 2001 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. Processor 2001 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content required to be displayed on the screen. In some embodiments, processor 2001 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0352] The memory 2002 may include one or more computer-readable storage media, which may be non-transitory. The memory 2002 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. The non-transitory computer-readable storage media in the memory 2002 are used to store at least one instruction, which is executed by the processor 2001 to implement the user interface rendering method provided in the method embodiments of this application.

[0353] The electronic device 2000 also includes one or more sensors. These sensors include, but are not limited to, proximity sensors, gyroscope sensors, and pressure sensors.

[0354] A proximity sensor, also known as a distance sensor, is typically located on the front panel of an electronic device 2000. The proximity sensor is used to detect the distance between the user and the front of the electronic device 2000.

[0355] The gyroscope sensor can detect the orientation and rotation angle of the electronic device 2000. The gyroscope sensor can work in conjunction with the accelerometer sensor to collect 3D motion data from the user on the electronic device 2000. Based on the data collected by the gyroscope sensor, the processor 2001 can perform the following functions: motion sensing (e.g., changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

[0356] The pressure sensor can be installed on the side bezel and / or the lower layer of the display screen of the electronic device 2000. When the pressure sensor is installed on the side bezel of the electronic device 2000, it can detect the user's grip signal on the electronic device 2000, and the processor 2001 can perform left / right hand recognition or quick operation based on the grip signal collected by the pressure sensor. When the pressure sensor is installed on the lower layer of the display screen, the processor 2001 can control the operable controls on the UI interface based on the user's pressure operation on the display screen. Operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

[0357] The electronic device 2000 also includes other component parts. Those skilled in the art will understand that the structure shown in FIG20 does not constitute a limitation on the electronic device 2000, and may include more or fewer components than shown, or combine certain components, or adopt different component arrangements.

[0358] Embodiments of this application also provide a computer device, which can be implemented as a terminal or server as shown in FIG2. The computer device includes a processor and a memory, the memory storing at least one instruction, at least one program, code set, or instruction set, the at least one instruction, at least one program, code set, or instruction set being loaded and executed by the processor to implement the user interface rendering method provided in the above-described method embodiments.

[0359] Embodiments of this application also provide a computer-readable storage medium storing at least one instruction, at least one program, code set, or instruction set, wherein the at least one instruction, at least one program, code set, or instruction set is loaded and executed by a processor to implement the user interface rendering method provided in the above-described method embodiments.

[0360] Embodiments of this application also provide a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform any of the user interface rendering methods described in the above embodiments.

[0361] The computer-readable storage medium may include: read-only memory (ROM), random access memory (RAM), solid-state drives (SSDs), or optical discs, etc. The random access memory may include resistive random access memory (ReRAM) and dynamic random access memory (DRAM). The sequence numbers of the embodiments described above are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0362] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware, or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk. The above descriptions are merely optional embodiments of this application and are not intended to limit the application. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of this application should be included within the scope of protection of this application.

Claims

1. A user interface rendering method, performed by an electronic device, the method comprising: Displaying a first user interface of the application, wherein the first user interface is created and rendered by a browser framework deployed within the application, and the first user interface includes first interface elements obtained via a web page address; Receive a screen jump operation, which triggers a jump from the currently displayed first user interface to the second user interface of the application to display the second interface elements; In response to the interface navigation operation, the second user interface is created and rendered using the application's native framework, wherein the second user interface includes second interface elements dynamically obtained by the browser framework through the webpage address.

2. The method according to claim 1, wherein the browser framework is a program framework embedded in the application other than the native framework; the native framework is a program framework used when developing the application.

3. The method according to claim 1 or 2, wherein the browser framework includes a first rendering engine, and the native framework includes a second rendering engine; The method further includes: After creating the second user interface through the native framework, the interface identifier corresponding to the second user interface is obtained through the first rendering engine; The first rendering engine sends rendering instructions to the second rendering engine, the rendering instructions including the interface identifier and the second interface element; The second rendering engine renders the second interface elements in the second user interface based on the rendering instructions.

4. The method according to claim 3, further comprising, before sending rendering instructions to the second rendering engine through the first rendering engine: Using the first rendering engine, the second interface element indicated by the interface jump operation is determined from multiple interface elements of the webpage corresponding to the webpage link, and a rendering tree corresponding to the second interface element is constructed, wherein the rendering tree includes the rendering node corresponding to the second interface element. The rendering instructions, which include a view structure, are generated by the first rendering engine, and the view structure includes the rendering tree.

5. The method according to claim 4, further comprising, before sending the rendering instruction containing the view structure to the second rendering engine through the first rendering engine: The first rendering engine analyzes the element attribute information and hierarchical relationship corresponding to the rendering node in the rendering tree to generate layout information, which is used to characterize the layout features of the second interface element; wherein, the view structure also includes the layout information.

6. The method according to claim 4, wherein rendering the second interface element in the second user interface based on the rendering instructions using the second rendering engine comprises: The second rendering engine is invoked to render the second interface elements in the second user interface based on the view structure.

7. The method according to claim 6, wherein calling the second rendering engine to render the second interface element in the second user interface based on the view structure comprises: The second rendering engine is invoked to determine a first atomic component for rendering the second interface element from the view structure, the first atomic component being configured in the browser frame; Based on the correspondence between atomic components and native components, the second rendering engine determines the first native component corresponding to the first atomic component, and the first native component is configured in the native framework; The second rendering engine is invoked to render the second interface element through the first native component.

8. The method according to any one of claims 3 to 7, further comprising: When the first rendering engine detects that the first information has been written, the first rendering engine is called to obtain the element difference information corresponding to the second interface element. The element difference information is used to characterize the changes of the second interface element before and after the first information is written. Based on the element difference information, update information is generated through the first rendering engine; After displaying the second user interface of the application, it also includes: The second rendering engine is invoked to update the second interface elements to third interface elements based on the update information.

9. The method according to claim 8, wherein when the first rendering engine detects the existence of first information writing, calling the first rendering engine to obtain element difference information corresponding to the second interface element includes: If the first information is detected to be written by the first rendering engine, the second attribute information of the third interface element is obtained, and the second interface element corresponds to the first attribute information. Based on the differences between the first attribute information and the second attribute information, element difference information corresponding to the second interface element is generated.

10. The method according to claim 9, wherein the difference between the first attribute information and the second attribute information includes a difference in at least one of the following dimensions: string type dimension, list dimension, and element style dimension; The step of generating element difference information corresponding to the second interface element based on the difference between the first attribute information and the second attribute information includes: Based on at least one of the first comparison result obtained from the string type dimension, the second comparison result obtained from the list dimension, and the third comparison result obtained from the element style dimension, the element difference information corresponding to the second interface element is obtained. The method for obtaining the first comparison result includes: obtaining the first string type identifier corresponding to the second interface element from the first attribute information, obtaining the second string type identifier of the third interface element from the second attribute information, and obtaining the first comparison result based on the difference between the first string type identifier and the second string type identifier; The method for obtaining the second comparison result includes: obtaining the first list information corresponding to the second interface element from the first attribute information, obtaining the second list information of the third interface element from the second attribute information, and obtaining the second comparison result based on the difference between the first list information and the second list information; The method for obtaining the third comparison result includes: obtaining the first element style corresponding to the second interface element from the first attribute information, obtaining the second element style of the third interface element from the second attribute information, and obtaining the third comparison result based on the difference between the first element style and the second element style.

11. The method according to any one of claims 1 to 7, wherein: The second user interface has a jump link relationship with the first user interface, and the jump link relationship is used to indicate that the second interface is the next jump node of the first interface in the interface flow.

12. The method according to any one of claims 1 to 11, wherein the browser framework includes an event detector; After rendering the second user interface of the application, the process further includes: In response to receiving an interface trigger operation for a fourth interface element in the second user interface, a trigger event is generated for a second native component used to render the fourth interface element. The trigger event includes at least one of the following: the native component identifier of the second native component, the event name of the interface trigger operation, and operation data corresponding to the interface trigger operation. The event detector is invoked to analyze the triggering event and obtain event execution information, which is used to indicate the response result to the interface triggering operation; The native framework displays the fifth interface element based on the event execution information.

13. The method according to claim 12, wherein the native framework includes an event dispatcher; Before calling the event detector to analyze the triggering event and obtain event execution information, the method further includes: The second native component is invoked to send the triggering event to the event dispatcher; The triggering event is sent to the event detector via the event dispatcher.

14. The method according to claim 12, wherein calling the event detector to analyze the triggering event and obtain event execution information includes: Based on the event name and native component identifier in the triggering event, the event detector determines a first response behavior that matches the event name and native component identifier; Based on the correspondence between atomic components and native components, the first response behavior is simulated by the second atomic component corresponding to the second native component, and the event execution information is generated.

15. The method of claim 14, wherein determining the first response behavior matching the event name and the native component identifier by the event detector comprises: The event detector obtains a behavior call table, which is stored in the form of key-value pairs, where the value is the response behavior and the key is the atomic component identifier and event name used to implement the response behavior. The event detector is invoked to query the behavior call table based on the event name and the native component identifier to obtain the first response behavior that matches the event name and the native component identifier.

16. The method according to any one of claims 1 to 15, wherein the second user interface comprises any one of the following: A full-screen interface built using the aforementioned native framework; or... A half-screen interface built using the native framework; or... The native window displayed on the first interface, constructed using the native framework.

17. A user interface rendering apparatus, the apparatus comprising: A first rendering module is used to display a first user interface in the application, wherein the first user interface is created and rendered by a browser framework deployed within the application, and the first user interface includes first interface elements obtained through a web page address. A receiving module is used to receive interface jump operations, which trigger a jump from the currently displayed first user interface to the second user interface of the application. The second rendering module is used to create and render the second user interface through the native framework of the application in response to the interface jump operation. The second user interface includes second interface elements obtained by the browser framework through the web page address in response to the interface jump operation.

18. A computer device comprising a processor and a memory, the memory storing at least one program, the at least one program being loaded and executed by the processor to implement the user interface rendering method as claimed in any one of claims 1 to 16.

19. A computer-readable storage medium storing at least one program, said at least one program being loaded and executed by a processor to implement the user interface rendering method as described in any one of claims 1 to 16.

20. A computer program product comprising computer instructions that, when executed by a processor, implement the user interface rendering method as described in any one of claims 1 to 16.

Images