Interface element display method and device, electronic equipment and storage medium

Abstract

The invention discloses an interface element display method and device, electronic equipment and a storage medium. The interface element display method comprises the steps that a front-end webpage code file corresponding to a target interface element is loaded into a memory; providing the front-end webpage code file in the memory to a rendering engine through a webpage view WebView component; and analyzing and rendering the front-end webpage code file through the rendering engine, and displaying a result obtained by rendering in an interface. The method can improve the flexibility of interface element display.

Description

Technical Field

[0001] The present application relates to the technical field of electronic devices, and more specifically, to a method and device for displaying interface elements, an electronic device, and a storage medium. Background Art

[0002] With the rapid advancement of technology and living standards, electronic devices (such as smartphones and tablets) have become commonplace in people's lives. Currently, users rely on various display interfaces to interact with electronic devices. These interfaces typically contain a variety of interface elements, such as icons, cards, controls, and buttons. However, the solutions used in related art for displaying interface elements on electronic devices lack flexibility. Summary of the Invention

[0003] This application proposes a method, device, electronic device and storage medium for displaying interface elements, which can improve the flexibility of interface element display.

[0004] In the first aspect, an embodiment of the present application provides a method for displaying interface elements, the method comprising: loading the front-end web page code file corresponding to the target interface element into the memory; providing the front-end web page code file in the memory to the rendering engine through the web view WebView component; parsing and rendering the front-end web page code file through the rendering engine, and displaying the rendered result in the interface.

[0005] In the second aspect, an embodiment of the present application provides a device for displaying interface elements, the device comprising: a data loading module, a data transmission module and a data rendering module, wherein the data loading module is used to load the front-end web page code file corresponding to the target interface element into the memory; the data transmission module is used to provide the front-end web page code file in the memory to the rendering engine through the web view WebView component; the data rendering module is used to parse and render the front-end web page code file through the rendering engine, and display the rendered result in the interface.

[0006] In a third aspect, an embodiment of the present application provides an electronic device comprising: one or more processors; a memory; and one or more applications, wherein the one or more applications are stored in the memory and configured to be executed by the one or more processors, and the one or more applications are configured to execute the method for displaying interface elements provided in the first aspect above.

[0007] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, in which program code is stored. The program code can be called by a processor to execute the method for displaying interface elements provided in the first aspect above.

[0008] In a fifth aspect, an embodiment of the present application provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, it implements the method for displaying interface elements provided in the first aspect above.

[0009] The solution provided by this application loads the Hypertext Markup Language front-end web page code file corresponding to the target interface element into memory, provides the front-end web page code file in memory to the rendering engine through the web view WebView component, parses and renders the front-end web page code file, and displays the rendered result in the interface. In this way, the WebView component and the rendering engine can be used to render and display interface elements in the interface, and the front-end web page code file can be used to render the interface elements, making it easy to change the style of the interface elements and improving the flexibility of the interface element display. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0011] Figure 1 A flow chart of a method for displaying interface elements according to an embodiment of the present application is shown.

[0012] Figure 2 A schematic flow chart of a method for displaying interface elements according to another embodiment of the present application is shown.

[0013] Figure 3 A schematic flow chart of a method for displaying interface elements according to yet another embodiment of the present application is shown.

[0014] Figure 4 A flow chart of a method for displaying interface elements according to another embodiment of the present application is shown.

[0015] Figure 5 A schematic flow chart of a method for displaying interface elements according to yet another embodiment of the present application is shown.

[0016] Figure 6 A schematic diagram of a software framework involved in the method for displaying interface elements provided in an embodiment of the present application is shown.

[0017] Figure 7 A schematic diagram showing the principle of a method for displaying interface elements provided in an embodiment of the present application is shown.

[0018] Figure 8 A block diagram of a display device of an interface element is shown according to an embodiment of the present application.

[0019] Figure 9 A block diagram of an electronic device for implementing a display method of an interface element according to an embodiment of the present application.

[0020] Figure 10 A storage unit for storing or carrying program code for implementing a display method of an interface element according to an embodiment of the present application. DETAILED DESCRIPTION

[0021] In order to make persons skilled in the art better understand the scheme of the present application, the technical scheme in the embodiments of the present application will be described clearly and completely below in conjunction with the drawings in the embodiments of the present application.

[0022] An electronic device usually displays interface elements such as icons, cards, controls, etc. in a desktop, and the display of these interface elements is usually implemented by using pre-generated static resources. However, if the pre-generated static resources are used to display the interface elements, and if the interface elements need to be modified, a new version of code needs to be greatly changed and released.

[0023] Moreover, the electronic device may exist in a case of displaying interface elements of a dynamic update style, such as displaying icons of dynamic updates such as a clock and a calendar, which dynamically change the icon content and style according to the events of the device. In the related art, the interface elements of dynamic updates are implemented based on a domain specific language (DSL), but the syntax design of the DSL may not fully consider the future expansion needs in the early stage, resulting in the need to greatly change the compiler or the execution engine when adding new functions subsequently, and the animation and data binding part may not be able to well support complex dynamic scenarios. Moreover, in the rendering architecture based on the DSL, when implementing cross-platform rendering and when upgrading the system version, the system needs to be re-adapted, which is of great workload and difficulty; moreover, the parsing and rendering process of the DSL involves many steps such as lexical analysis, syntax parsing, node conversion, etc., and once there is a problem, it is difficult to quickly locate the error source. Therefore, the related art has the problem of insufficient flexibility when displaying the interface elements.

[0024] To address the above issues, the inventors have proposed the interface element display method, device, electronic device, and storage medium provided in the embodiments of this application. These methods can render and display interface elements in an interface through the WebView component and rendering engine. They can also render interface elements using front-end web page code files, making it easy to change the style of interface elements and improving the flexibility of interface element display. The specific interface element display method will be described in detail in subsequent embodiments.

[0025] The following is a detailed description of the method for displaying interface elements provided in the embodiments of the present application in conjunction with the accompanying drawings.

[0026] See also Figure 1 , Figure 1 A flow chart of a method for displaying interface elements provided by an embodiment of the present application is shown. In a specific embodiment, the method for displaying interface elements is applied to Figure 8 The display device 600 of the interface element and the electronic device 100 equipped with the display device 600 of the interface element ( Figure 9 ). The following will take electronic devices as an example to illustrate the specific process of this embodiment. Of course, it can be understood that the electronic devices used in this embodiment can be smart phones, tablet computers, smart watches, e-books, etc., which are not limited here. Figure 1 The process shown is described in detail, and the method for displaying interface elements may specifically include the following steps: Step S110: Load the front-end webpage code file corresponding to the target interface element into the memory.

[0027] In an embodiment of the present application, when it is necessary to display the target interface element in the interface, the front-end web page code file of the target interface element can be obtained and loaded into the memory. Among them, the interface elements are the basic components of the user interface (UI). They are the visual and functional units that the user directly contacts and operates when interacting with the electronic device. The interface elements may include icons, cards, buttons, text boxes, etc. The target interface element can be any element that needs to be displayed in the interface; the above interface can be an interface of a non-web page, such as a desktop, a task management interface, an address book interface, a memo interface, etc. The front-end web page code file is a code set composed of specific grammatical rules and data. The front-end web page code file is used to realize the display of the above target interface elements.

[0028] In some embodiments, the front-end web page code file includes at least one of Hypertext Markup Language (HTML) data, Cascading Style Sheets (CSS) data, and JavaScript (JS) data. HTML is a markup language used to create web pages, defining document content through a tag structure and defining the content and layout framework of interface elements. CSS is a style sheet language used to describe the appearance and format of HTML documents, controlling layout, color, fonts, spacing, and other styles. JS is a high-level, dynamic programming language widely used in web development that supports event-driven and asynchronous programming, enabling dynamic interactive capabilities.

[0029] In one possible implementation, the front-end web page code file described above can be generated based on the style description of the interface element using HTML, CSS, JS, etc., and can implement the style, animation logic, etc. of the interface element. For example, if the interface element is an icon, the icon structure (such as shape and hierarchy) can be defined using HTML; the icon style (such as color, shadow, transparency) and animation effects can be controlled using CSS; and animation logic (such as timed refresh and event monitoring) and dynamic interaction can be implemented using JS. During the development phase of the front-end web page code file described above, a template library can also be provided. The template library can include HTML, CSS, and JS examples of common icon styles and animation logic to improve development efficiency.

[0030] In some embodiments, the architecture for implementing the display of interface elements may include a business layer, an application library layer, and a framework layer. The business layer may load the front-end web page code file corresponding to the target interface element into memory, so as to subsequently trigger the WebView component to render the interface element according to the front-end web page code file. The business layer may be a layer directly oriented to user needs or business goals, responsible for converting user behavior and business rules into specific function execution processes. The business layer may decide the execution path based on the information of the interface elements, such as choosing to load local resources or remote resources. The application library layer and the framework layer will be explained in subsequent steps.

[0031] In one possible implementation, the business layer can inherit the Drawable class to ensure that the business layer can be directly replaced and used without changing the existing calling logic in the operating system, and make the Drawable class the core entry point to unify the drawing logic of the management interface elements. For example, when drawing icons, the business layer can load the above front-end web page code file into memory and create icon types, including static icons and dynamic icons. The icon drawing logic can be optimized as follows: if the icon is a static icon, then after rendering is completed, the content is drawn to a bitmap. In the draw() method, the Bitmap drawing is directly called to avoid repeated rendering, which can significantly reduce rendering overhead; if the icon is a dynamic icon that changes dynamically, then real-time rendering can be performed, and complex animation and interaction requirements can be supported. Drawable is the base class of the graphics system in the operating system. All graphics resources (such as bitmaps, shapes, and animations) implement a unified drawing interface through its derived classes. After the business layer inherits Drawable, the WebView's rendering logic is encapsulated as a standard Drawable and can be directly integrated into the View through methods such as setImageDrawable(), without changing the current UI-related code in the operating system.

[0032] In one possible implementation, the business layer can also maintain the loading status of static elements, such as loading, completed, and failed, as well as business-related status such as cache hits. The business layer can also coordinate the capabilities of the application library layer and the framework layer, such as triggering icon loading and handling redraw logic after dynamic updates.

[0033] Step S120: providing the front-end web page code file in the memory to the rendering engine through the web view WebView component.

[0034] In an embodiment of the present application, when implementing the rendering and display of interface elements, after the front-end web page code file corresponding to the target interface element is loaded into the memory, the front-end web page code file in the memory can be provided to the rendering engine through the web view (WebView) component, so that the rendering engine can render the target interface element according to the front-end web page code file.

[0035] In some embodiments, in the aforementioned architecture for implementing the display of interface elements, the application library layer may pass the front-end web page code file in memory to the WebView component for reading. Furthermore, the WebView component communicates and interacts with the rendering engine to provide the front-end web page code file to the rendering engine. The application library layer may be an adapter and tool set between the business layer and the framework layer, responsible for encapsulating the underlying capabilities of the framework layer (such as the rendering engine and graphics processor interfaces) into high-level application programming interfaces (APIs) that can be directly called by the business layer, and solving common cross-layer issues (such as caching and network requests).

[0036] In one possible implementation, the application library layer can encapsulate complex operations in the framework layer (such as rendering instruction transmission) into simple interfaces; the application library layer can also implement common functions across businesses (such as caching strategies for interface elements, HTML file verification, WebView lifecycle management, etc.); the application library layer can also shield the underlying details of the framework layer (such as the C++ interface of the rendering engine, the driver call of the graphics processor), avoiding the business layer from directly relying on the underlying implementation.

[0037] Step S130: parsing and rendering the front-end web page code file through the rendering engine, and displaying the rendered result in the interface.

[0038] In an embodiment of the present application, after obtaining the data in the front-end web page code file, the rendering engine can parse the front-end web page code file, render according to the parsed result, and display the rendered result in the interface. The rendering engine can be a web rendering engine such as Chromium, WebKit, Gecko, etc. The rendering engine is responsible for parsing data such as HTML, CSS, JS, etc. and driving graphics rendering.

[0039] In some implementations, the rendering engine may parse data in the rendering front-end web page code file, and based on the parsed data, call a graphics library to write drawing commands to a graphics processor, thereby completing the rendering.

[0040] In one possible implementation, the HTML structure in the front-end webpage code file can be parsed by a rendering engine, and a Document Object Model (DOM) tree can be constructed according to a parsing result. In addition, a CSSOM tree can be constructed by parsing CSS, and finally merged into a render tree. According to the render tree, the position (layout) and style (painting) of each node are calculated to generate bitmap or vector graphics instructions. Then, the rendering engine delivers the final rendering result (bitmap or graphics instructions) to a graphics processor through a Surface of an operating system, and finally displays on the screen.

[0041] In the above implementation, when parsing the HTML data and constructing the DOM tree, the HTML parser reads the HTML byte stream, converts it into the DOM tree according to the syntax rules (such as tag nesting, attribute), and each HTML tag corresponds to a DOM node. When parsing the CSS to construct the CSSOM tree, the CSS parser reads the CSS style sheet (inline / external), parses the selector, attribute and value, generates the CSSOM tree, and describes the style rules (such as color, size, position) of each DOM node. The JavaScript engine executes the script, which can dynamically modify the DOM or CSSOM, triggering re-parsing and structure updating.

[0042] In the above implementation, after parsing the DOM and CSSOM, Chromium needs to calculate the accurate position and size of each element on the screen, that is, to perform layout calculation. When performing layout calculation, the DOM and CSSOM can be combined, and invisible elements can be filtered out to generate a render tree (only containing visible elements and their styles). Starting from the root node, the render tree is recursively traversed to calculate the layout properties of each node.

[0043] After the layout is completed, the visual properties (such as color, border) of each render node need to be converted into specific drawing instructions for drawing. To optimize performance, the render tree can be divided into multiple composite layers, and each layer is independently drawn. Each composite layer generates specific drawing instructions through a graphics library, which describes "where to draw what" (such as coordinates, color, shape). After the drawing instructions are generated, the layers are combined into the final screen image by a compositor, and the final image data is transmitted to the display controller of the screen through a graphics interface, and is displayed to the physical pixel points row by row according to the refresh rate of the screen.

[0044] In some embodiments, in the aforementioned architecture for implementing the display of interface elements, the rendering engine in the framework layer may parse and render the front-end web page code file. The framework layer is responsible for interacting with the operating system, hardware, or third-party libraries (such as Chromium), providing underlying core capabilities (such as rendering, networking, process management, etc.), and providing a unified abstract interface for the upper layer. The framework layer can encapsulate the operating system's API, rendering engine, graphics processor driver, etc.; the framework layer can also manage system-level resources (such as memory, threads in the processor, etc.). In the above architecture, the WebView component and the rendering engine are a collaborative relationship between the application layer component and the underlying rendering engine. The WebView component and the rendering engine can constitute an instance, that is, each WebView component corresponds to a rendering engine.

[0045] The method for displaying interface elements provided in the embodiment of the present application can realize the rendering and display of interface elements in the interface through the WebView component and the rendering engine, and can use HTML files to realize the rendering of interface elements, so that it is easy to change the style of interface elements and the flexibility of interface element display can be improved; when used to realize the display of dynamic interface elements, since the front-end web page code file can provide complete tags, attributes and animation support, the dynamic icon content can be customized more flexibly.

[0046] See also Figure 2 , Figure 2 The flow chart of the method for displaying interface elements provided by another embodiment of the present application is shown. The method for displaying interface elements is applied to the above electronic device. Figure 2 The process shown is described in detail, and the method for displaying interface elements may specifically include the following steps: Step S210: Load the front-end webpage code file corresponding to the target interface element into the memory.

[0047] Step S220: providing the front-end web page code file in the memory to the rendering engine through the web view WebView component.

[0048] In the embodiment of the present application, step S210 and step S220 can refer to the contents of other embodiments and will not be repeated here.

[0049] Step S230: If the target interface element is a dynamic interface element, the front-end web page code file is parsed and rendered by the rendering engine, and the rendered result is displayed in the interface.

[0050] In an embodiment of the present application, the rendering of interface elements can be optimized to address performance issues when displaying interface elements. Interface elements can be divided into static interface elements and dynamic interface elements. Static interface elements refer to interface elements that will not be updated during the display process, while dynamic interface elements refer to interface elements that will be updated during the display process. For dynamic interface elements, since dynamic interface elements usually need to be updated in real time, the front-end web page code file can be parsed and rendered in real time by a rendering engine, and the rendered results can be displayed in the interface.

[0051] In some embodiments, when displaying some dynamic interface elements, it may be necessary to rely on real-time dynamic data for display. Therefore, before rendering the dynamic interface elements through the rendering engine, the real-time dynamic data corresponding to the dynamic interface elements can also be obtained through the WebView component, and the real-time dynamic data can be provided to the rendering engine. When the rendering engine renders the dynamic interface elements, it can parse and render the front-end web page code files and real-time dynamic data, and display the rendered results in the interface. For example, when the dynamic interface element is a weather icon on the desktop, it is necessary to obtain weather data in real time and update the weather icon based on the weather data. The above method can achieve real-time update of the weather icon.

[0052] Step S240: If the target interface element is a static interface element and the static interface element is rendered for the first time, the front-end web page code file is parsed and rendered by the rendering engine, and the rendered result is displayed in the interface.

[0053] In an embodiment of the present application, for static interface elements, since no updates will occur during the display process, when the target interface element is a static interface element, it can be determined whether the static interface element is rendered for the first time. If the static interface element is rendered for the first time, the front-end web page code file is parsed and rendered through the rendering engine, and the rendered result is displayed in the interface.

[0054] In some embodiments, when the rendering engine renders the above static interface element for the first time, the rendered content is drawn onto a bitmap, and the bitmap can be cached as a rendering result so that in the subsequent process of continuously displaying the static interface element, the cached bitmap can be directly used to display the static interface element.

[0055] Step S250: If the target interface element is a static interface element, and there is currently a bitmap obtained by rendering the static interface element for the first time, the bitmap is displayed in the interface through the rendering engine.

[0056] In the embodiment of the present application, in the case that the target interface element is a static interface element, after determining whether the static interface element is rendered for the first time, if the static interface element is not rendered for the first time, there can be a bitmap rendered for the first time for the static interface element. And in the case that it is determined that there is a bitmap rendered for the first time for the static interface element, the static interface element does not need to be rendered again, and thus the bitmap can be directly displayed in the interface.

[0057] The display method of the interface element provided by the embodiment of the present application can realize the rendering and display of the interface element in the interface through the WebView component and the rendering engine, can realize the rendering of the interface element by using the front-end web page code file, thus being easy to change the style of the interface element, and can improve the flexibility of the display of the interface element. In addition, the optimization of the rendering of the type of the interface element can reduce the rendering cost and improve the rendering efficiency.

[0058] Please refer to Figure 3 , Figure 3 A flowchart of a display method of an interface element provided by another embodiment of the present application is shown. The display method of the interface element is applied to the electronic device described above, and the following will be described in detail with respect to the flowchart shown in Figure 3 The display method of the interface element can specifically include the following steps: Step S310: loading a front-end web page code file corresponding to a target interface element into a memory.

[0059] Step S320: providing the front-end web page code file in the memory to a rendering engine through a web view WebView component.

[0060] In the embodiment of the present application, step S310 and step S320 can refer to the content of other embodiments, which will not be described here again.

[0061] Step S330: transmitting a rendering instruction corresponding to the target interface element to the rendering engine through the WebView component.

[0062] In the embodiment of the present application, when rendering the target interface element, the rendering instruction can be transmitted from the WebView component to the rendering engine to instruct the rendering engine to render. Understandably, the WebView component can be regarded as a client, and the rendering engine can be regarded as a server. The WebView component transmits the rendering instruction to the rendering engine, thus realizing the rendering of the interface element.

[0063] In some embodiments, considering that there may be a situation where multiple interface elements need to be rendered at the same time, there will be multiple rendering instructions corresponding to different interface elements. If each rendering instruction is transmitted separately, the number of inter-process communications (IPC) between the WebView component and the rendering engine will be large, which will affect the rendering efficiency. Therefore, when there are multiple rendering instructions corresponding to different interface elements, the multiple rendering instructions can be batch-delivered to the rendering engine through the WebView component. The multiple rendering instructions include the rendering instructions corresponding to the above target interface elements. That is, while transmitting the rendering instructions corresponding to the target interface element to the rendering engine, the rendering instructions corresponding to other interface elements can be transmitted.

[0064] In one possible implementation, when there are multiple rendering instructions corresponding to different dynamic interface elements, the multiple rendering instructions can be delivered in batches to the rendering engine through the WebView component, thereby effectively optimizing the rendering of dynamic interface elements and improving rendering efficiency.

[0065] Step S340: The rendering engine parses and renders the front-end web page code file in response to the rendering instruction, and displays the rendered result in the interface.

[0066] In an embodiment of the present application, after the rendering instruction corresponding to the target interface element is passed to the rendering engine through the WebView component, the rendering engine can obtain the rendering instruction accordingly. The rendering engine can respond to the rendering instruction, parse and render the above front-end web page code file, and display the rendered result in the interface.

[0067] The method for displaying interface elements provided in the embodiment of the present application can realize the rendering and display of interface elements in the interface through the WebView component and the rendering engine, and can use the front-end web page code file to realize the rendering of interface elements, so that it is easy to change the style of interface elements and the flexibility of interface element display can be improved; in addition, the transmission of rendering instructions is optimized, and rendering instructions can be transmitted in batches, reducing the number of inter-process communications, thereby improving rendering efficiency.

[0068] See also Figure 4 , Figure 4 A flow chart of a method for displaying interface elements provided by another embodiment of the present application is shown. The method for displaying interface elements is applied to the above electronic device. Figure 4 The process shown is described in detail, and the method for displaying interface elements may specifically include the following steps: Step S410: Load the front-end webpage code file corresponding to the target interface element into the memory.

[0069] Step S420: providing the front-end web page code file in the memory to the rendering engine through the web view WebView component.

[0070] In the embodiment of the present application, step S410 and step S420 can refer to the contents of other embodiments and will not be repeated here.

[0071] Step S430: parsing the front-end webpage code file through the rendering engine to obtain a parsing result.

[0072] In an embodiment of the present application, when the above front-end web page code file is parsed and rendered by a rendering engine, the front-end web page code file can be parsed by the rendering engine to obtain a parsing result.

[0073] In some implementations, the above parsing results may include parsing results for HTML structure, parsing results for CSS, etc. Of course, the specific parsing results may not be limited in the embodiments of the present application.

[0074] Step S440: generating a drawing instruction based on the analysis result.

[0075] In an embodiment of the present application, after parsing the front-end web page code file and obtaining the parsing result, corresponding drawing instructions can be generated based on the parsing result.

[0076] In some embodiments, a DOM tree can be constructed based on the parsing results of the HTML structure; a CSSOM tree can be constructed based on the parsing results of the CSS, and a rendering tree can be performed based on merging the DOM tree and the CSSOM tree; the position and style of each node can be calculated based on the rendering tree, and corresponding drawing instructions can be generated.

[0077] Step S450: submitting the drawing instruction to a graphics processor (GPU), so that the GPU responds to the drawing instruction, performs drawing, and displays the drawing result in an interface.

[0078] In an embodiment of the present application, after a drawing instruction is generated, the drawing instruction can be submitted to a graphics processor (GPU). The GPU can obtain a drawing result according to the drawing instruction and display the drawing result on the screen.

[0079] In some embodiments, there may be multiple drawing instructions for rendering the target interface element. In order to improve communication efficiency, when there are multiple drawing instructions, the multiple drawing instructions can be merged and submitted to the GPU. For example, the drawing instructions may include SetGlobalMatrix, SetGlobalFloat / Vector, SetGlobalTexture, SetRenderTarget, etc. SetGlobalMatrix is ​​used to update the rotation / scaling matrix to achieve dynamic transformation effects of icons; SetGlobalFloat / Vector is used to pass time parameters to drive dynamic effects in Shader (such as pulse light effects, color gradients); SetGlobalTexture is used to bind icon maps, and SetPass activates Shaders containing animation logic (such as UV offset / dissolve effects); SetRenderTarget is used to specify a rendering target (such as a frame buffer or texture). Dynamic icons usually need to be rendered off-screen to a temporary texture.

[0080] In one possible implementation, multiple drawing instructions can be combined and submitted to the GPU through a command buffer mechanism. A command buffer can be constructed, and the multiple drawing instructions can be written sequentially into the command buffer and combined into a single submission unit, avoiding the need to call the graphics API frame by frame. The data in the command buffer can then be submitted to the GPU queue through multiple threads, achieving separation of drawing and logical threads.

[0081] In some embodiments, in the thread of the rendering engine, such as Chromium's RenderThread, a task queue can also be used to separate data reading and writing operations from drawing operations into different tasks; and different cores of the processor can be used to process different tasks, thereby fully utilizing the multi-core processor and further improving rendering efficiency.

[0082] In some implementations, EGL (Embedded OpenGL) commands may be used to optimize the icon drawing process; and Vulkan or OpenGL ES may be used to improve the rendering performance of complex animations.

[0083] In some implementations, the WebView component can run in an independent process, thereby being isolated from the main application process, thereby ensuring that anomalies in the rendering process do not affect the stability of the main application.

[0084] The method for displaying interface elements provided in the embodiment of the present application can realize the rendering and display of interface elements in the interface through the WebView component and the rendering engine, and can use the front-end web page code file to realize the rendering of interface elements, so that it is easy to change the style of interface elements and the flexibility of interface element display can be improved; in addition, when passing drawing instructions, the rendering efficiency can be improved by batch passing the drawing instructions.

[0085] See also Figure 5 , Figure 5 A flow chart of a method for displaying interface elements provided by another embodiment of the present application is shown. The method for displaying interface elements is applied to the above electronic device. Figure 5 The process shown is described in detail, and the method for displaying interface elements may specifically include the following steps: Step S510: Load the front-end webpage code file corresponding to the target interface element into the memory.

[0086] In some implementations, the front-end web page code file can be dynamically loaded from a specified path, where the specified path can be any path, thereby enabling the front-end web page code file to be loaded into the memory from any storage location.

[0087] In one possible implementation, a caching mechanism (e.g., LRU caching) can be used to store frequently used front-end web page code files to reduce dynamic loading delays. Furthermore, if the front-end web page code files are network resources, these resources can be pre-cached to improve the rendering efficiency of interface elements, for example, by using a Service Worker to pre-cache resources.

[0088] Step S520: calling the drawable object Drawable class to call the WebView component, wherein the WebView component is encapsulated in the Drawable class.

[0089] In the embodiments of the present application, the WebView component can be encapsulated into a Drawable class, making external calls to the WebView component indistinguishable from calls to ordinary Drawables, thus reducing the difficulty of integration. When calling the WebView component, the Drawable class that encapsulates the WebView component can be called to implement the call to the WebView component, and the content drawing of the interface elements can be delegated through the WebView component's onDraw() method.

[0090] In some implementations, in the architecture for displaying interface elements described in the aforementioned embodiments, the WebView component can be encapsulated in a Drawable class in the application library layer. Regarding the interface layer design, the business layer can provide an interface layer to expose operating system data to the WebView JavaScript. Understandably, the data in the front-end web page code file may indicate the need to obtain local data. For example, if a weather icon requires real-time weather data, the business layer can provide and inject a corresponding JavaScript interface to obtain weather data. The WebView addJavascriptInterface() method enables JS to directly call methods in the operating system.

[0091] Step S530: providing the front-end web page code file in the memory to the rendering engine through the web view WebView component.

[0092] In some embodiments, to enhance security, before the WebView component provides the front-end web page code file in memory to the rendering engine, it can also verify the loaded front-end web page code file and obtain a verification result. Based on the verification result, if the front-end web page code file passes the verification, the WebView component provides the front-end web page code file in memory to the rendering engine. Verification of the front-end web page code file can include at least one of: hash value comparison, source credibility verification, format validity verification, and content security verification.

[0093] Step S540: parsing and rendering the front-end web page code file through the rendering engine, and displaying the rendered result in the interface.

[0094] In the embodiment of the present application, step S540 can refer to the content of the aforementioned embodiment and will not be repeated here.

[0095] The method for displaying interface elements provided in the embodiment of the present application can realize the rendering and display of interface elements in the interface through the WebView component and the rendering engine, and can use the front-end web page code file to realize the rendering of interface elements, so that it is easy to change the style of interface elements and the flexibility of interface element display can be improved; in addition, by encapsulating the WebView component in the Drawable class, the WebView component can be called without changing the calling logic, which simplifies the interaction with the operating system's API, reduces the adaptation and maintenance costs caused by version upgrades, and improves the stability of the system.

[0096] The following describes the method for displaying interface elements involved in the aforementioned embodiment in conjunction with a scenario where an electronic device displays icons on a desktop.

[0097] like Figure 6 As shown, the front-end web page code file can be input into the business layer. The front-end web page code file can include HTML, CSS, JS and other data. The front-end web page code file can be obtained by the developer based on the designer's description of the icon. When obtaining the front-end web page code file, the template library can also be referred to.

[0098] In the business layer, CustomDrawable can inherit from the Drawable class to ensure that the business layer can be directly replaced and used without changing the current calling logic in the operating system. In the business layer, the rendering logic of static icons and dynamic icons can be optimized so that after the WebView rendering is completed, the static icon will draw the content onto the Bitmap. In the draw() method, the Bitmap drawing is directly called to avoid repeated rendering of the WebView and significantly reduce the rendering overhead. For dynamic icons, WebView can be used for real-time rendering, and complex animation and interaction requirements can be supported.

[0099] In the application library layer, performance is improved and loading efficiency is enhanced by encapsulating WebView, and a data interaction mechanism that supports dynamic scenarios exists. WebView is encapsulated in Drawable for unified management, and the icon content drawing is delegated through the onDraw() method of WebView. The application library layer can provide an interface layer, and the operating system data can be exposed to the JavaScript of WebView. The addJavascriptInterface() method of WebView is used to support JS to directly call Android methods, so that JS code can directly call the methods exposed by native objects in WebView to achieve seamless interaction with native functions. There is a caching mechanism in the application library layer that can store commonly used front-end web page code files, and network resources can be cached in advance through Service Worker to improve the efficiency of icon rendering. The application library layer can also support dynamic loading of front-end web page code files from a specified path, and can perform security verification on the front-end web page code files.

[0100] At the framework level, batching rendering commands optimizes the performance of the Chromium rendering engine and reduces IPC call overhead. GPU acceleration is also implemented, utilizing EGL (Embedded OpenGL) commands to optimize the icon drawing process and improving the rendering performance of complex animations through Vulkan or OpenGL ES. Task queues are also used to separate data reading and writing operations from drawing operations, allowing different cores to handle different tasks, fully utilizing multi-core processors. Furthermore, the WebView component can run in a separate process, isolating it from the main application process.

[0101] See also Figure 7 After the icon's HTML, CSS, and JS files are loaded into memory, the encapsulated Drawable class can be called to execute the optimized static icon and dynamic icon drawing logic; by calling the WebView component and using the Chromium rendering engine, the icon rendering and animation control can be achieved.

[0102] The method for displaying interface elements provided by the embodiments of the present application uses standard HTML, CSS, and JS, which has good versatility and flexibility, facilitating subsequent functional expansion. In addition, designers and developers can easily add new styles and animations as needed without significantly changing the overall architecture. When used to implement the display of dynamic interface elements, since the front-end web page code file can provide complete tag, attribute, and animation support, dynamic icon content can be more flexibly customized. Based on general Web technology, it can naturally support multiple platforms (such as iOS and Web), reducing the workload of rewriting adaptation layers for different platforms and improving the efficiency of cross-platform development. Using a standardized technology stack and with the help of developer tools (such as browser debugging tools), developers can quickly locate and fix problems, reducing the complexity of debugging. Through unified WebView encapsulation, interaction with the operating system API is simplified, the adaptation and maintenance costs caused by version upgrades are reduced, and the stability of the system is improved. Through optimized rendering logic and GPU acceleration, the rendering efficiency of static and dynamic icons is improved, the performance bottleneck caused by DSL parsing is reduced, and a smooth experience is ensured in scenarios with high-frequency icon updates. By adopting Web technology, the browser's graphics processing capabilities can be fully utilized, avoiding Canvas on low-performance devices. API limitations, improving the performance of animation and dynamic rendering.

[0103] See also Figure 8FIG. 6 is a structural block diagram of an interface element display device 600 according to an embodiment of the present application. The interface element display device 600 is applied to the electronic device described above. The interface element display device 600 comprises a data loading module 610, a data transmission module 620, and a data rendering module 630. The data loading module 610 is configured to load a front-end webpage code file corresponding to a target interface element into a memory. The data transmission module 620 is configured to provide the front-end webpage code file in the memory to a rendering engine through a webpage view WebView component. The data rendering module 630 is configured to parse and render the front-end webpage code file through the rendering engine, and display the result of the rendering in an interface.

[0104] In some embodiments, the data rendering module 630 can be specifically configured to: if the target interface element is a dynamic interface element, parse and render the front-end webpage code file through the rendering engine, and display the result of the rendering in an interface; or if the target interface element is a static interface element and the static interface element is rendered for the first time, parse and render the front-end webpage code file through the rendering engine, and display the result of the rendering in an interface.

[0105] In a possible implementation, the data rendering module 630 can also be configured to: if the target interface element is a static interface element and a bitmap rendered for the first time for the static interface element currently exists, display the bitmap in the interface through the rendering engine.

[0106] In a possible implementation, the data transmission module 620 can also be configured to: before the if the target interface element is a dynamic interface element, parse and render the front-end webpage code file through the rendering engine, and display the result of the rendering in an interface, acquire real-time dynamic data corresponding to the dynamic interface element through the WebView component, and provide the real-time dynamic data to the rendering engine. The data rendering module 630 can be specifically configured to: parse and render the front-end webpage code file and the real-time dynamic data through the rendering engine, and display the result of the rendering in an interface.

[0107] In some embodiments, the data transmission module 620 can also be used to parse and render the front-end web page code file through the rendering engine, and before displaying the rendered result in the interface, pass the rendering instruction corresponding to the target interface element to the rendering engine through the WebView component; the data rendering module 630 can be specifically used to: parse and render the front-end web page code file through the rendering engine in response to the rendering instruction, and display the rendered result in the interface.

[0108] In one possible implementation, the data transfer module 620 can be specifically used to: if there are currently multiple rendering instructions corresponding to different interface elements, then the multiple rendering instructions are batch-transferred to the rendering engine through the WebView component, and the multiple rendering instructions include the rendering instructions corresponding to the target interface element.

[0109] In some embodiments, the data rendering module 630 can be specifically used to: parse the front-end web page code file through the rendering engine to obtain a parsing result; generate a drawing instruction based on the parsing result; submit the drawing instruction to the graphics processor GPU, so that the GPU responds to the drawing instruction to draw, and displays the drawing result in the interface.

[0110] In a possible implementation, the data rendering module 630 may be specifically configured to: if there are multiple drawing instructions, merge the multiple drawing instructions and submit them to the GPU.

[0111] In some embodiments, the interface element display device 600 may further include a component calling module. The component calling module is configured to call a drawable object Drawable class to call the WebView component before providing the front-end webpage code file in the memory to the rendering engine via the WebView component, wherein the WebView component is encapsulated in the Drawable class.

[0112] In some embodiments, the interface element display device 600 may further include a file verification module. The file verification module may be configured to verify the front-end webpage code file corresponding to the target interface element before loading the front-end webpage code file into the memory; the data loading module 610 may be configured to load the front-end webpage code file corresponding to the target interface element into the memory if the front-end webpage code file passes the verification.

[0113] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and modules can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0114] In several embodiments provided in this application, the coupling between modules may be electrical, mechanical or other forms of coupling.

[0115] In addition, the functional modules in the various embodiments of the present application may be integrated into a processing module, or each module may exist physically separately, or two or more modules may be integrated into a single module. The above-mentioned integrated modules may be implemented in the form of hardware or software functional modules.

[0116] In summary, the solution provided by this application is to load the Hypertext Markup Language front-end web page code file corresponding to the target interface element into memory, provide the front-end web page code file in memory to the rendering engine through the web view WebView component, parse and render the front-end web page code file through the rendering engine, and display the rendered result in the interface. In this way, it is possible to render and display the interface elements in the interface through the WebView component and the rendering engine, and to render the interface elements using the front-end web page code file, thereby facilitating the change of the style of the interface elements and improving the flexibility of the display of the interface elements.

[0117] Please refer to Figure 9 , which shows a structural block diagram of an electronic device provided in an embodiment of the present application. The electronic device 100 can be an electronic device capable of running applications, such as a smartphone, tablet computer, smart watch, e-book, etc. The electronic device 100 in the present application may include one or more of the following components: a processor 110, a memory 120, and one or more applications, wherein the one or more applications may be stored in the memory 120 and configured to be executed by one or more processors 110, and the one or more applications are configured to execute the method described in the aforementioned method embodiment.

[0118] The processor 110 may include one or more processing cores. The processor 110 utilizes various interfaces and circuits to connect various components within the electronic device 100. It executes instructions, programs, code sets, or instruction sets stored in the memory 120, and accesses data stored in the memory 120 to perform various functions and process data within the electronic device 100. Optionally, the processor 110 may be implemented using at least one of the following hardware forms: a digital signal processing (DSP), a field-programmable gate array (FPGA), or a programmable logic array (PLA). The processor 110 may integrate one or a combination of a central processing unit (CPU), a graphics processing unit (GPU), and a modem. The CPU primarily processes the operating system, user interface, and application programs; the GPU is responsible for rendering and drawing display content; and the modem handles wireless communications. It is understood that the modem may not be integrated into the processor 110 and may instead be implemented via a separate communications chip.

[0119] The memory 120 may include random access memory (RAM) or read-only memory (ROM). The memory 120 may be used to store instructions, programs, code, code sets, or instruction sets. The memory 120 may include a program storage area and a data storage area. The program storage area may store instructions for implementing an operating system, instructions for implementing at least one function (such as a touch function, a sound playback function, an image playback function, etc.), instructions for implementing the various method embodiments described below, and the like. The data storage area may also store data created by the electronic device 100 during use (such as a phone book, audio and video data, and chat history data).

[0120] Please refer to Figure 10 , which shows a block diagram of a computer-readable storage medium provided in an embodiment of the present application. The computer-readable medium 800 stores program code, which can be called by a processor to execute the method described in the above method embodiment.

[0121] Computer-readable storage medium 800 may be an electronic memory such as flash memory, EEPROM (Electrically Erasable Programmable Read-Only Memory), EPROM, a hard disk, or ROM. Alternatively, computer-readable storage medium 800 may comprise a non-transitory computer-readable storage medium. Computer-readable storage medium 800 has storage space for program code 810 for executing any of the method steps described above. This program code can be read from or written to one or more computer program products. Program code 810 may be compressed, for example, in a suitable format.

[0122] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, it implements the method for displaying interface elements provided in the above embodiment.

[0123] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A method for displaying interface elements, characterized in that: The method comprises: Load the front-end web page code file corresponding to the target interface element into memory; Providing the front-end web page code file in the memory to the rendering engine through the web view WebView component; The front-end web page code file is parsed and rendered by the rendering engine, and the rendered result is displayed in the interface.

2. The method according to claim 1, characterized in that The parsing and rendering of the front-end webpage code file by the rendering engine and displaying the rendered result in the interface include: If the target interface element is a dynamic interface element, the front-end web page code file is parsed and rendered by the rendering engine, and the rendered result is displayed in the interface; or If the target interface element is a static interface element and the static interface element is rendered for the first time, the front-end web page code file is parsed and rendered by the rendering engine, and the rendered result is displayed in the interface.

3. The method according to claim 2, characterized in that The method further comprises: If the target interface element is a static interface element and there is currently a bitmap obtained by rendering the static interface element for the first time, the bitmap is displayed in the interface through the rendering engine.

4. The method according to claim 2, characterized in that If the target interface element is a dynamic interface element, the method includes parsing and rendering the front-end webpage code file by the rendering engine and displaying the rendered result in the interface: Acquire real-time dynamic data corresponding to the dynamic interface element through the WebView component, and provide the real-time dynamic data to the rendering engine; The parsing and rendering of the front-end webpage code file by the rendering engine and displaying the rendered result in the interface include: The front-end web page code file and the real-time dynamic data are parsed and rendered by the rendering engine, and the rendered results are displayed in the interface.

5. The method according to claim 1, wherein Before the rendering engine parses and renders the front-end webpage code file and displays the rendered result in the interface, the method further includes: Passing the rendering instruction corresponding to the target interface element to the rendering engine through the WebView component; The parsing and rendering of the front-end webpage code file by the rendering engine and displaying the rendered result in the interface include: The rendering engine responds to the rendering instruction to parse and render the front-end web page code file, and displays the rendered result in the interface.

6. The method according to claim 5, characterized in that The delivering the rendering instruction corresponding to the target interface element to the rendering engine through the WebView component includes: If there are currently multiple rendering instructions corresponding to different interface elements, the multiple rendering instructions are batch-delivered to the rendering engine through the WebView component, and the multiple rendering instructions include the rendering instructions corresponding to the target interface element.

7. The method according to claim 1, characterized in that The parsing and rendering of the front-end webpage code file by the rendering engine and displaying the rendered result in the interface include: Parsing the front-end web page code file by the rendering engine to obtain a parsing result; generating a drawing instruction based on the analysis result; The drawing instruction is submitted to a graphics processing unit (GPU), so that the GPU performs drawing in response to the drawing instruction and displays the drawing result in an interface.

8. The method according to claim 7, characterized in that Submitting the drawing instruction to a graphics processor (GPU) includes: If there are multiple drawing instructions, the multiple drawing instructions are merged and then submitted to the GPU.

9. The method according to claim 1, characterized in that The front-end web page code file includes at least one of Hypertext Markup Language HTML data, Cascading Style Sheet CSS data and JS data.

10. The method according to any one of claims 1 to 9, characterized in that Before providing the front-end webpage code file in the memory to the rendering engine through the WebView component, the method includes: The drawable object Drawable class is called to call the WebView component, wherein the WebView component is encapsulated in the Drawable class.

11. The method according to any one of claims 1 to 9, characterized in that Before providing the front-end webpage code file in the memory to the rendering engine through the webpage view WebView component, the method further includes: Verifying the front-end web page code file; Providing the front-end web page code file in the memory to the rendering engine through the web view WebView component includes: When the front-end web page code file is verified to be passed, the front-end web page code file in the memory is provided to the rendering engine through the web view WebView component.

12. A display device for interface elements, characterized in that: The device includes: a data loading module, a data transmission module and a data rendering module, wherein: The data loading module is used to load the front-end web page code file corresponding to the target interface element into the memory; The data transfer module is used to provide the front-end web page code file in the memory to the rendering engine through the web view WebView component; The data rendering module is used to parse and render the front-end web page code file through the rendering engine, and display the rendered results in the interface.

13. An electronic device, characterized in that: include: one or more processors; Memory; One or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, and the one or more programs are configured to perform the method according to any one of claims 1 to 11.

14. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores program code, which can be called by a processor to execute the method according to any one of claims 1 to 11.

15. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 11 is implemented.

Images