CN120762802A - Method, device, electronic device and storage medium for displaying interface elements - Google Patents

Abstract

The application discloses a display method, a device, electronic equipment and a storage medium of an interface element, wherein the display method of the interface element comprises the steps of loading a front-end webpage code file corresponding to a target interface element into a memory; and analyzing and rendering the front-end webpage code file by the rendering engine, and displaying a rendering result in an interface. The method can promote the flexibility of interface element display.

Description

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

Technical Field

The present application relates to the field of electronic devices, and in particular, to a method and apparatus for displaying an interface element, an electronic device, and a storage medium.

Background

With rapid progress in the technological level and the living standard, electronic devices (such as smartphones, tablet computers, etc.) have become one of the commonly used electronic products in people's lives. Currently, users interact with electronic devices by relying on various display interfaces, and various interface elements, such as icons, cards, controls, buttons, etc., are typically present in the interface displayed by the electronic device. The schemes employed by the electronic devices to display interface elements in the related art are not flexible enough.

Disclosure of Invention

The application provides a display method and device of interface elements, electronic equipment and a storage medium, which can promote the flexibility of interface element display.

In a first aspect, an embodiment of the present application provides a method for displaying an interface element, where the method includes loading a front-end webpage code file corresponding to a target interface element into a memory, providing the front-end webpage code file in the memory to a rendering engine through a webpage view WebView component, analyzing and rendering the front-end webpage code file through the rendering engine, and displaying a rendering result in an interface.

In a second aspect, the embodiment of the application provides a display device of an interface element, which comprises a data loading module, a data transmission module and a data rendering module, wherein the data loading module is used for loading a front-end webpage code file corresponding to a target interface element into a memory, the data transmission module is used for providing the front-end webpage code file in the memory to a rendering engine through a webpage view WebView component, and the data rendering module is used for analyzing and rendering the front-end webpage code file through the rendering engine and displaying a rendering result in an interface.

In a third aspect, an embodiment of the present application provides an electronic device, including one or more processors, a memory, and one or more application programs, where the one or more application programs are stored in the memory and configured to be executed by the one or more processors, and the one or more application programs are configured to perform the method for displaying an interface element provided in the first aspect.

In a fourth aspect, an embodiment of the present application provides a computer readable storage medium having stored therein program code that is callable by a processor to perform the method for displaying an interface element provided in the first aspect.

In a fifth aspect, an embodiment of the present application provides a computer program product, where the computer program product includes a computer program, and the computer program when executed by a processor implements the method for displaying an interface element provided in the first aspect.

According to the scheme provided by the application, the front-end webpage code file of the hypertext markup language corresponding to the target interface element is loaded into the memory, the front-end webpage code file in the memory is provided to the rendering engine through the webpage view WebView component, the front-end webpage code file is analyzed and rendered through the rendering engine, and the rendering result is displayed in the interface. Therefore, the rendering and the display of the interface elements in the interface can be realized through the WebView component and the rendering engine, and the rendering of the interface elements can be realized by utilizing the front-end webpage code file, so that the style of the interface elements can be easily changed, and the flexibility of the display of the interface elements can be improved.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the description of the embodiments will be briefly described below, it being obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 shows a flow diagram of a method of displaying interface elements according to one embodiment of the application.

Fig. 2 is a flow chart of a method for displaying interface elements according to another embodiment of the application.

Fig. 3 is a flow chart of a method for displaying interface elements according to still another embodiment of the present application.

Fig. 4 is a flow chart of a method for displaying interface elements according to still another embodiment of the present application.

Fig. 5 shows a flow chart of a method for displaying interface elements according to yet another embodiment of the application.

Fig. 6 is a schematic diagram of a software framework related to a display method of an interface element according to an embodiment of the present application.

Fig. 7 is a schematic diagram of a display method of an interface element according to an embodiment of the present application.

FIG. 8 illustrates a block diagram of a display device of interface elements according to one embodiment of the application.

Fig. 9 is a block diagram of an electronic device for performing a display method of an interface element according to an embodiment of the present application.

Fig. 10 is a memory unit for storing or carrying program codes for implementing a display method of an interface element according to an embodiment of the present application.

Detailed Description

In order to enable those skilled in the art to better understand the present application, the following description will make clear and complete descriptions of the technical solutions according to the embodiments of the present application with reference to the accompanying drawings.

Electronic devices typically display interface elements such as icons, cards, controls, etc. in a desktop, which are typically implemented using pre-generated static resources when displaying the interface elements. However, when the interface element is displayed by using the pre-generated static resource, if the interface element needs to be modified, the code of the new version needs to be greatly changed and issued.

Further, the electronic device may display interface elements of a dynamic update style, such as dynamically updated icons of a clock, a calendar, etc., which dynamically change icon contents and styles according to events of the device. In the related art, dynamically updated interface elements are implemented based on a domain-specific language (Domain Specific Language, DSL), but the syntax design of DSL may not fully consider future expansion requirements in early stages, resulting in the need to greatly change a compiler or an execution engine when new functions are added later, and the animation and data binding part may not support a complex dynamic scenario well. In addition, the DSL analysis and rendering process involves more steps such as lexical analysis, grammar analysis, node conversion and the like, and once problems occur, the error sources are difficult to quickly locate. Therefore, there is a problem in the related art that flexibility is insufficient in displaying interface elements.

Aiming at the problems, the inventor provides the display method, the device, the electronic equipment and the storage medium for the interface elements, which are provided by the embodiment of the application, the rendering and the display of the interface elements in the interface can be realized through the WebView component and the rendering engine, and the rendering of the interface elements can be realized by utilizing the front-end webpage code file, so that the style of the interface elements can be easily changed, and the flexibility of the display of the interface elements can be improved. The specific method for displaying the interface element is described in detail in the following embodiments.

The following describes in detail the method for displaying the interface element according to the embodiment of the present application with reference to the accompanying drawings.

Referring to fig. 1, fig. 1 is a flow chart illustrating a method for displaying interface elements according to an embodiment of the application. In a specific embodiment, the method for displaying an interface element is applied to the display device 600 of an interface element as shown in fig. 8 and the electronic apparatus 100 (fig. 9) configured with the display device 600 of an interface element. The specific flow of the embodiment will be described below by taking an electronic device as an example, and it will be understood that the electronic device applied in the embodiment may be a smart phone, a tablet computer, a smart watch, an electronic book, etc., which is not limited herein. The following details about the flow shown in fig. 1 will be described, and the display method of the interface element may specifically include the following steps:

step S110, loading the front-end webpage code file corresponding to the target interface element into the memory.

In the embodiment of the application, under the condition that the target interface element is required to be displayed in the interface, the front-end webpage code file of the target interface element can be acquired and loaded into the memory. The Interface elements are basic components forming a User Interface (UI), are visual and functional units which are directly contacted and operated when a User interacts with the electronic equipment, and can comprise icons, cards, buttons, text boxes and the like, the target Interface elements can be any element needing to be displayed in the Interface, and the Interface can be an Interface of a non-webpage page, such as a desktop, a task management Interface, an address book Interface, a memo Interface and the like. The front-end webpage code file is a code set composed of specific grammar rules and data, and is used for realizing the display of the target interface elements.

In some implementations, the above front-end web page code file includes at least one of hypertext markup language (HyperText Markup Language, HTML) data, cascading style sheet (CASCADING STYLE SHEETS, CSS) data, and JS (JavaScript) data. The HTML is a markup language for creating a webpage, document content is defined through a tag structure, content and layout frames of interface elements are defined, the CSS is a style sheet language for describing the appearance and format of the HTML document and controlling patterns such as layout, color, fonts, spacing, layout and the like, the JS is a high-level dynamic programming language which is widely used for webpage development and supports event-driven and asynchronous programming, and dynamic interaction functions can be endowed.

In one possible implementation, the front-end web page code file may be described according to the style of the interface element, and obtained using HTML, CSS, JS, etc., and may implement the style of the interface element, animation logic, etc., where the interface element is an icon, for example, the structure (e.g., shape, hierarchy) of the icon may be defined by HTML, the style (e.g., color, shade, transparency) and animation effect may be controlled by CSS, and animation logic (e.g., timed refresh, event monitoring) and dynamic interaction may be implemented by JS. In the development stage of the front-end webpage code file, a template library can be further provided, and the template library can comprise HTML, CSS, JS examples of common icon styles and animation logic so as to improve development efficiency.

In some implementations, an architecture that enables display of interface elements may include a business layer, an application library layer, and a framework layer. The business layer can load the front-end webpage code file corresponding to the target interface element into the memory so as to trigger the WebView component to render the interface element according to the front-end webpage code file. The business layer may be a hierarchy directly facing to user requirements or business targets, and is responsible for converting user behaviors and business rules into specific function execution flows, and the business layer may determine execution paths according to information of interface elements, for example, select to load local resources or remote resources. The application library layer and the framework layer will be described in the subsequent steps.

In one possible implementation, the business layer may inherit the class of renderable objects (Drawable) to ensure that the business layer can be directly replaced and used without changing the existing call logic in the operating system, and make Drawable class a core portal, uniformly managing the rendering logic of interface elements. The business layer can load the front-end webpage code file to the memory and create the icon types, wherein the icon types comprise static icons and dynamic icons, and the drawing logic of the icons can be optimized to draw the content to a Bitmap (Bitmap) after the icon is the static icon, and directly call Bitmap drawing in a draw () method to avoid repeated rendering, so that the rendering cost can be obviously reduced, and real-time rendering can be performed and complex animation and interaction requirements can be supported if the icon is the dynamic icon which is dynamically changed. Drawable is a base class of a graphics system in an operating system, all graphics resources (such as bitmaps, shapes and animations) realize a unified drawing interface through derived classes thereof, after a business layer inherits Drawable, the rendering logic of WebView is encapsulated into a standard Drawable, and can be directly integrated into View through setImageDrawable () and other methods without changing the current UI related codes in the operating system.

In one possible implementation, the service layer may also maintain a loading state of static elements, such as a state in the middle of loading, completion, failure, etc., and may also maintain a service-related state such as a cache hit. The business layer may also coordinate the capabilities of the application library layer and the framework layer, e.g., triggering icon loading, handling dynamically updated redrawing logic.

Step S120, providing the front end webpage code file in the memory to a rendering engine through a webpage view WebView component.

In the embodiment of the application, when the rendering and the display of the interface element are realized, after the front-end webpage code file corresponding to the target interface element is loaded into the memory, the front-end webpage code file in the memory can be provided to the rendering engine through the webpage view (WebView) component, so that the rendering engine can render the target interface element according to the front-end webpage code file.

In some embodiments, in the foregoing architecture for implementing display of interface elements, the application library layer may forward the front-end web code file in the memory to the WebView component for reading. And, the WebView component communicatively interacts with the rendering engine, providing 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 (e.g., interfaces of rendering engines, graphics processors) into a high-level application programming interface (Application Programming Interface, API) that the business layer can directly call, and solving cross-layer generic problems (e.g., caching, network requests, etc.).

In one possible implementation, the application library layer may encapsulate complex operations (e.g., rendering instruction delivery) in the framework layer into a simple interface, the application library layer may also implement cross-service generic functions (e.g., caching policies for interface elements, HTML file verification, lifecycle management for WebView, etc.), and the application library layer may also mask underlying details of the framework layer (e.g., c++ interface for rendering engine, drive invocation for graphics processor), avoiding the business layer from directly relying on underlying implementations.

And 130, analyzing and rendering the front-end webpage code file through the rendering engine, and displaying a rendering result in an interface.

In the embodiment of the application, after the rendering engine acquires the data in the front-end webpage code file, the front-end webpage code file can be analyzed, rendering is performed according to the analyzed result, and the rendered result is displayed in the interface. The rendering engine may be a web page rendering engine such as Chromium, webKit, gecko, and the rendering engine is responsible for parsing HTML, CSS, JS data and driving graphics rendering.

In some embodiments, the rendering engine may parse the data in the render front-end web page code file, and invoke the graphics library to write drawing commands to the graphics processor based on the parsed data, thereby completing the rendering.

In one possible implementation, the HTML structure in the front-end webpage code file can be analyzed by a rendering engine, a document object model (Document Object Model, DOM) tree can be constructed according to the analysis result, in addition, the CSS can be analyzed to construct CSSOM tree which is finally combined into a rendering tree (RENDER TREE), the position (layout) and the style (drawing) of each node are calculated according to the rendering tree, a Bitmap (Bitmap) or a vector graphic instruction is generated, and then the rendering engine transmits the final rendering result (Bitmap or graphic instruction) to a graphic processor through a Surface of an operating system to be finally displayed on a screen.

In the above embodiment, when parsing the HTML data and building the DOM tree, the HTML parser (HTML PARSER) reads the HTML byte stream, converts it into the DOM tree according to rules (e.g., tag nesting, attributes), and corresponds to one DOM node for each HTML tag. In parsing the CSS build CSSOM tree, the CSS parser reads the CSS style sheet (inline/external), parses the selectors, attributes, and values, generates CSSOM tree, describes the style rules (e.g., color, size, position) for each DOM node. The JavaScript engine executes the script, possibly dynamically modifying the DOM or CSSOM, triggering reparse and structural updates.

In the above embodiment, after parsing to obtain DOM and CSSOM, the colorium needs to calculate the exact position and size of each element on the screen, i.e., make layout calculations. When performing layout calculation, DOM and CSSOM can be combined, invisible elements are filtered out, a rendering tree (only including visible elements and patterns thereof) is generated, the rendering tree is recursively traversed from a root node, and the layout attribute of each node is calculated.

After the layout is completed, visual properties (such as color and frame) of each rendering node need to be converted into specific drawing instructions for drawing. To optimize performance, the rendering tree may be divided into multiple synthetic layers, each of which draws independently, and each of which generates specific drawing instructions through a graphics library that describe "where to draw what" (e.g., coordinates, colors, shapes). After the drawing instruction is generated, the layers are combined into a final screen image through a synthesizer, final image data is transmitted to a display controller (Display Controller) of the screen through a graphic interface, and the final image data is scanned and displayed on physical pixel points line by line according to the refreshing rate of the screen.

In some embodiments, in the foregoing architecture for implementing display of interface elements, the front-end web page code file may be parsed and rendered by a rendering engine in the framework layer. The framework layer is responsible for interacting with an operating system, hardware, or third party library (e.g., chrome), providing the underlying core capabilities (e.g., rendering, networking, process management, etc.), and providing a unified abstract interface for the upper layers. The framework layer may encapsulate the APIs of the operating system, rendering engine, drivers of the graphics processor, etc., and may also manage system level resources (e.g., memory, threads in the processor, etc.). In the above architecture, the WebView component and the rendering engine are cooperative relationships between the application layer component and the underlying rendering engine, and the WebView component and the rendering engine may form an instance, that is, each WebView component corresponds to one rendering engine.

The display method of the interface element can realize the rendering and display of the interface element in the interface through the WebView component and the rendering engine, and can realize the rendering of the interface element by utilizing the HTML file, so that the style of the interface element is easy to change, the flexibility of the display of the interface element can be improved, and when the method is used for realizing the display of the dynamic interface element, the front-end webpage code file can provide perfect label, attribute and animation support, so that the content of the dynamic icon can be customized more flexibly.

Referring to fig. 2, fig. 2 is a flow chart illustrating a method for displaying interface elements according to another embodiment of the application. The method for displaying the interface element is applied to the electronic device, and will be described in detail with respect to the flow shown in fig. 2, where the method for displaying the interface element specifically includes the following steps:

step S210, loading the front-end webpage code file corresponding to the target interface element into the memory.

Step S220, the front-end webpage code file in the memory is provided to a rendering engine through a webpage view WebView component.

In the embodiment of the present application, the step S210 and the step S220 may refer to the contents of other embodiments, which are not described herein.

And step S230, if the target interface element is a dynamic interface element, analyzing and rendering the front-end webpage code file through the rendering engine, and displaying a rendering result in an interface.

In the embodiment of the application, the rendering of the interface element can be optimized in consideration of the performance problem when the interface element is displayed. The interface elements can be divided into static interface elements and dynamic interface elements, wherein the static interface elements refer to interface elements which cannot be updated in the display process, and the dynamic interface elements refer to interface elements which cannot be updated in the display process. For the dynamic interface element, since the dynamic interface element is generally required to be updated in real time, the front-end webpage code file can be parsed and rendered by the rendering engine in real time, and the rendering result can be displayed in the interface.

In some embodiments, when some dynamic interface elements are displayed, real-time dynamic data may need to be relied on for display, and then before the dynamic interface elements are rendered by the rendering engine, real-time dynamic data corresponding to the dynamic interface elements can also be obtained by the WebView component and provided to the rendering engine. When the rendering engine renders the dynamic interface element, the front-end webpage code file and the real-time dynamic data can be analyzed and rendered, and the rendering result is displayed in the interface. For example, when the dynamic interface element is a weather icon in the desktop, then the weather data needs to be acquired in real time, and the weather icon is updated according to the weather data, so that the weather icon can be updated in real time in the above manner.

Step S240, if the target interface element is a static interface element and the static interface element is rendered for the first time, analyzing and rendering the front-end webpage code file through the rendering engine, and displaying a rendering result in an interface.

In the embodiment of the application, for the static interface element, since no update occurs in the display process, whether the static interface element is rendered for the first time can be determined under the condition that the target interface element is the static interface element, and if the static interface element is rendered for the first time, the front-end webpage code file is analyzed and rendered by the rendering engine, and the rendering result is displayed in the interface.

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

Step S250, if the target interface element is a static interface element and a bitmap which is rendered for the static interface element for the first time exists currently, displaying the bitmap in an interface through the rendering engine.

In the embodiment of the 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 may be a bitmap rendered for the static interface element for the first time. And under the condition that the bitmap which is rendered for the static interface element for the first time exists, the static interface element does not need to be rendered any more, so that the bitmap can be directly displayed in the interface.

The display method of the interface element can realize the rendering and display of the interface element in the interface through the WebView component and the rendering engine, and can realize the rendering of the interface element by utilizing the front-end webpage code file, so that the style of the interface element is easy to change, the flexibility of the display of the interface element can be improved, in addition, the optimization is carried out on the type of the interface element, the rendering cost can be reduced, and the rendering efficiency is improved.

Referring to fig. 3, fig. 3 is a flow chart illustrating a method for displaying interface elements according to another embodiment of the application. The method for displaying the interface element is applied to the electronic device, and will be described in detail with respect to the flow shown in fig. 3, where the method for displaying the interface element specifically includes the following steps:

Step S310, loading the front-end webpage code file corresponding to the target interface element into the memory.

Step 320, providing the front end webpage code file in the memory to a rendering engine through a webpage view WebView component.

In the embodiment of the present application, the step S310 and the step S320 may refer to the contents of other embodiments, which are not described herein.

And step S330, transmitting a rendering instruction corresponding to the target interface element to the rendering engine through the WebView component.

In the embodiment of the application, when the target interface element is rendered, a rendering instruction can be generated by the WebView component to the rendering engine so as to instruct the rendering engine to render. It is to be appreciated that the WebView component can be considered a client and the rendering engine can be considered a server, and that the WebView component enables rendering of the interface element by initiating a rendering instruction to the rendering engine.

In some embodiments, considering that there may be a case where multiple interface elements need to be rendered at the same time, there may be rendering instructions corresponding to multiple different interface elements, if each rendering instruction is separately transmitted, the number of Inter-process communications (Inter-process communication, IPC) between the WebView component and the rendering engine is more, so that the rendering efficiency may be affected, so that when there is currently a rendering instruction corresponding to multiple different interface elements, the multiple rendering instructions may be transmitted to the rendering engine in batches through the WebView component, where the multiple rendering instructions include rendering instructions corresponding to the above target interface elements, that is, while transmitting rendering instructions corresponding to the target interface elements to the rendering engine, rendering instructions corresponding to other interface elements may be transmitted.

In a possible implementation manner, when rendering instructions corresponding to a plurality of different dynamic interface elements exist, the WebView component transfers the plurality of rendering instructions to the rendering engine in batches, so that the rendering of the dynamic interface elements can be effectively optimized, and the rendering efficiency is improved.

And step 340, analyzing and rendering the front-end webpage code file by the rendering engine in response to the rendering instruction, and displaying a rendering result in an interface.

In the embodiment of the application, after the rendering instruction corresponding to the target interface element is transmitted to the rendering engine through the WebView component, correspondingly, the rendering engine can obtain the rendering instruction, and the rendering engine can respond to the rendering instruction to analyze and render the front-end webpage code file and display the rendering result in the interface.

The display method of the interface element can realize the rendering and display of the interface element in the interface through the WebView component and the rendering engine, and can realize the rendering of the interface element by utilizing the front-end webpage code file, so that the style of the interface element is easy to change, the flexibility of the display of the interface element can be improved, in addition, the transmission of the rendering instruction is optimized, the rendering instruction can be transmitted in batches, the frequency of inter-process communication is reduced, and the rendering efficiency is improved.

Referring to fig. 4, fig. 4 is a flow chart illustrating a method for displaying interface elements according to still another embodiment of the application. The method for displaying the interface element is applied to the electronic device, and will be described in detail with respect to the flow shown in fig. 4, where the method for displaying the interface element specifically includes the following steps:

step S410, loading the front-end webpage code file corresponding to the target interface element into the memory.

Step S420, providing the front end webpage code file in the memory to a rendering engine through a webpage view WebView component.

In the embodiment of the present application, step S410 and step S420 may refer to the content of other embodiments, which are not described herein.

And step S430, analyzing the front-end webpage code file through the rendering engine to obtain an analysis result.

In the embodiment of the application, when the rendering engine is used for analyzing and rendering the front-end webpage code file, the rendering engine can be used for analyzing the front-end webpage code file to obtain an analysis result.

In some embodiments, the above parsing results may include parsing results for HTML structures, parsing results for CSS, and the like. Of course, the specific analysis result may not be limited in the embodiment of the present application.

And step S440, generating a drawing instruction based on the analysis result.

In the embodiment of the application, after the front-end webpage code file is analyzed and the analysis result is obtained, a corresponding drawing instruction can be generated based on the analysis result.

In some embodiments, a DOM tree may be built based on the parsing result for the HTML structure, CSSOM trees may be built based on the parsing result for the CSS, and the tree may be rendered based on the combination of the DOM tree and CSSOM tree, the position and style of each node may be calculated based on the rendering tree, and corresponding drawing instructions may be generated.

And step S450, submitting the drawing instruction to a Graphic Processor (GPU) so that the GPU responds to the drawing instruction to draw, and displaying a drawing result in an interface.

In the embodiment of the application, after the drawing instruction is generated, the drawing instruction can be submitted to the GPU, and the GPU can obtain the drawing result according to the drawing instruction and display the drawing result on the screen.

In some embodiments, for rendering the target interface element, there may be multiple drawing instructions, and in order to improve communication efficiency, in a case that the number of drawing instructions is multiple, the multiple drawing instructions may be merged and submitted to the GPU. Illustratively, the drawing instructions may include SetGlobalMatrix, setGlobalFloat/Vector, setGlobalTexture, setRenderTarget, etc., setGlobalMatrix for updating the rotation/scaling matrix to achieve dynamic transformation effects of the icon, setGlobalFloat/Vector for delivering time parameters to drive dynamic effects in the loader (e.g., pulsed light effects, color gradation), setGlobalTexture for binding the icon map, setPass for activating the loader containing animation logic (e.g., UV offset/dissolve effects), setendertarget for specifying rendering targets (e.g., frame buffer or texture), dynamic icons typically requiring off-screen rendering to temporary textures.

In one possible implementation, multiple drawing instructions may be merged and committed to the GPU via a Command Buffer (Command Buffer) mechanism. The method comprises the steps of constructing a command buffer, writing the plurality of drawing instructions into the command buffer in sequence, merging the drawing instructions into a single submitting unit, avoiding calling a graphic API frame by frame, and submitting data in the command buffer to a GPU queue through multiple threads to realize drawing and logic thread separation.

In some embodiments, in the thread of the rendering engine, for example, in RENDERTHREAD of the color, the task queue may be used to separate the data reading and writing operation and the drawing operation into different tasks, and different cores of the processor are used to process the different tasks, so that the multi-core processor is fully utilized, and the rendering efficiency is further improved.

In some embodiments, EGL (Embedded OpenGL) commands can be used to optimize the drawing process of the icons, and the rendering performance of the complex animation can be improved through Vulkan or OpenGL ES.

In some embodiments, the WebView component may run in an independent process, thereby being isolated from the process of the host application, and further ensuring that anomalies in the rendering process do not affect the stability of the host application.

The display method of the interface element can realize the rendering and display of the interface element in the interface through the WebView component and the rendering engine, and can realize the rendering of the interface element by utilizing the front-end webpage code file, so that the style of the interface element is easy to change, the flexibility of the display of the interface element can be improved, and in addition, when a drawing instruction is transmitted, the drawing instruction is transmitted in batches, so that the rendering efficiency can be improved.

Referring to fig. 5, fig. 5 is a flow chart illustrating a method for displaying interface elements according to still another embodiment of the present application. The method for displaying the interface element is applied to the electronic device, and will be described in detail with respect to the flow shown in fig. 5, where the method for displaying the interface element specifically includes the following steps:

step S510, loading the front-end webpage code file corresponding to the target interface element into the memory.

In some embodiments, the front-end web page code file may be dynamically loaded from a specified path, which may be any path, such that loading the front-end web page code file from any storage location into memory may be achieved.

In one possible implementation, a caching mechanism (e.g., LRU cache) may be used to store common front end web page code files to reduce latency of dynamic loading. In addition, if the front-end webpage code file is a network resource, the resource can be cached in advance, so that the rendering efficiency of the interface element is improved, for example, a Service workbench is used for caching the resource in advance.

Step S520, calling a class Drawable of the renderable object to call the WebView component, wherein the WebView component is packaged in the class Drawable.

In the embodiment of the application, the WebView component can be packaged into Drawable classes, so that the external call of the WebView component is not different from the call of the ordinary Drawable, and the integration difficulty is reduced. When the WebView component is called, drawable classes encapsulating the WebView component can be called, so that the call to the WebView component is realized, and the content drawing of the interface element is proxied through the onDraw () method of the WebView component.

In some implementations, in the architecture described in the foregoing examples that implements display of interface elements, webView components may be packaged in the Drawable classes in the application library layer. For the design of the interface layer, the business layer can provide the interface layer to expose the data of the operating system to the JavaScript of the WebView, and it can be understood that the data in the front-end webpage code file can indicate to acquire the local data, for example, the weather icon needs to acquire real-time weather data, the business layer can provide and inject the corresponding JavaScript interface to acquire the weather data, and the method in the operating system is directly called by the support JS by utilizing the addJavascriptInterface () method of the WebView.

Step S530, providing the front end webpage code file in the memory to a rendering engine through a webpage view WebView component.

In some embodiments, in order to improve security, before the WebView component provides the front-end webpage code file in the memory to the rendering engine, the loaded front-end webpage code file may be further checked to obtain a check result, and if the front-end webpage code file is checked, the front-end webpage code file in the memory is provided to the rendering engine through the WebView component according to the check result. The verification of the front-end webpage code file can comprise at least one of hash value comparison, source credibility verification, format validity verification, content security verification and the like.

And S540, analyzing and rendering the front-end webpage code file through the rendering engine, and displaying a rendering result in an interface.

In the embodiment of the present application, step S540 may refer to the content of the foregoing embodiment, and is not described herein.

The display method of the interface element can realize the rendering and display of the interface element in the interface through the WebView component and the rendering engine, and can realize the rendering of the interface element by utilizing the front-end webpage code file, so that the style of the interface element can be easily changed, the flexibility of the display of the interface element can be improved, in addition, the WebView component is packaged in Drawable types, so that the WebView component can be called under the condition that calling logic is not changed, the interaction with the API of an operating system is simplified, the adaptation and maintenance cost caused by version upgrading is reduced, and the stability of the system is improved.

The method for displaying the interface element according to the foregoing embodiment will be described with reference to a scenario in which the electronic device displays an icon on a desktop.

As shown in fig. 6, the front-end web page code file may be input to the business layer, where the front-end web page code file may include HTML, CSS, JS data, and the front-end web page code file may be obtained by a developer according to a description of an icon by a designer, and may also refer to a template library when obtaining the front-end web page code file.

In the business layer CustomDrawable can inherit from Drawable class, ensure that the business layer can be directly replaced and used without changing the current calling logic in an operating system, optimize the rendering logic of static icons and dynamic icons in the business layer, enable the static icons to draw contents onto a Bitmap after the WebView rendering is completed, directly call Bitmap drawing in a draw () method, avoid repeated rendering of WebView, obviously reduce the rendering cost, and enable WebView real-time rendering to be used for dynamic icons and support complex animation and interaction requirements.

In the application library layer, the performance is improved by packaging WebView, the loading efficiency is enhanced, and a data interaction mechanism supporting dynamic scenes exists. WebView is packaged Drawable for unified management, and content rendering of the icons is proxied through the onDraw () method of WebView. The application library layer can be provided with an interface layer, data of an operating system can be exposed to JavaScript of the WebView, and a addJavascriptInterface () method of the WebView is utilized to support JS to directly call an Android method, so that JS codes can directly call a method for exposing a native object in the WebView, and seamless interaction with a native function is realized. The application library layer is provided with a caching mechanism, so that a common front-end webpage code file can be stored, and network resources can be cached in advance through a Service workbench to improve the efficiency of icon rendering. The application library layer can also support dynamic loading of the front-end webpage code file from the appointed path, and can carry out security verification on the front-end webpage code file.

In the framework layer, the performance of the chromoum rendering engine is optimized by transmitting rendering instructions in batches, and the cost of IPC calling is reduced. And GPU acceleration is performed, and the rendering performance of the complex animation is improved through Vulkan or OpenGL ES by utilizing EGL (Embedded OpenGL) command to optimize the drawing flow of the icon. The task queue is also utilized to separate the data reading and writing operation and the drawing operation into different tasks, and different cores of the processor are utilized to process the different tasks, so that the multi-core processor is fully utilized. In addition, the WebView component may run in a separate process, thereby isolating from the process of the host application.

Referring to FIG. 7, after HTML, CSS, JS files of the icons are loaded into the memory, the encapsulated Drawable class can be called to execute the drawing logic of the optimized static icons and dynamic icons, and the rendering and animation control of the icons are realized by calling the WebView component and utilizing the chrome rendering engine.

The display method of the interface element provided by the embodiment of the application adopts standard HTML, CSS and JS, has good universality and flexibility, is convenient for subsequent function expansion, can be used for easily adding new styles and animations according to requirements without greatly changing the whole framework by designers and developers, can flexibly customize dynamic icon contents due to the fact that front-end webpage code files can provide perfect labels, attributes and animation support when being used for realizing the display of dynamic interface elements, can naturally support multiple platforms (such as iOS and Web) based on a universal Web technology, reduces the workload of rewriting adaptation layers for different platforms, improves the development efficiency of cross-platform, uses a standardized technical stack, can quickly position and repair problems by virtue of developer tools (such as debugging tools of browsers), reduces the debugging complexity, simplifies the interaction with an operating system API through unified WebView packaging, reduces the adaptation and maintenance cost caused by upgrading, improves the stability of the system, improves the rendering logic and acceleration of the system, improves the rendering efficiency of static icons and dynamic icons, improves the rendering performance of the dynamic icons, and the graphics context is fully avoided by adopting the dynamic graphics context, and the dynamic graphics context is fully improved by adopting the low-resolution performance of the dynamic graphics device CANVAS API.

Referring to fig. 8, a block diagram of a display device 600 with interface elements according to an embodiment of the application is shown. The display device 600 of the interface element is applied to the electronic device, and the display device 600 of the interface element includes a data loading module 610, a data transmitting module 620 and a data rendering module 630, wherein 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 transmitting module 620 is configured to provide the front-end webpage code file in the memory to a rendering engine through a webpage view component, and the data rendering module 630 is configured to parse and render the front-end webpage code file through the rendering engine, and display a rendering result in an interface.

In some embodiments, the data rendering module 630 may be specifically configured to parse and render the front-end webpage code file by the rendering engine and display a result obtained by rendering in an interface if the target interface element is a dynamic interface element, or parse and render the front-end webpage code file by the rendering engine and display a result obtained by rendering in an interface if the target interface element is a static interface element and the static interface element is rendered for the first time.

In one possible implementation, the data rendering module 630 may be further configured to, if the target interface element is a static interface element and there is currently a bitmap that is rendered for the static interface element for the first time, display the bitmap in an interface through the rendering engine.

In a possible implementation manner, the data transfer module 620 may be further configured to, when the target interface element is a dynamic interface element, parse and render the front-end webpage code file by the rendering engine, and before displaying the rendered result in the interface, obtain real-time dynamic data corresponding to the dynamic interface element by the WebView component, and provide the real-time dynamic data to the rendering engine, and the data rendering module 630 may be specifically configured to parse and render the front-end webpage code file and the real-time dynamic data by the rendering engine, and display the rendered result in the interface.

In some embodiments, the data transfer module 620 may be further configured to parse and render the front-end webpage code file by the rendering engine and transfer, by the WebView component, a rendering instruction corresponding to the target interface element to the rendering engine before the rendering result is displayed in the interface, and the data rendering module 630 may be specifically configured to parse and render, by the rendering engine, the front-end webpage code file and display the rendering result in the interface in response to the rendering instruction.

In one possible implementation, the data transfer module 620 may be specifically configured to, if there are currently rendering instructions corresponding to a plurality of different interface elements, transfer, by the WebView component, a plurality of rendering instructions to the rendering engine in batches, where the plurality of rendering instructions includes rendering instructions corresponding to the target interface element.

In some embodiments, the data rendering module 630 may be specifically configured to parse the front-end webpage code file by the rendering engine to obtain a parsing result, generate a drawing instruction based on the parsing result, and submit the drawing instruction to a graphics processor GPU, so that the GPU responds to the drawing instruction to draw, and display the drawing result in an interface.

In one possible implementation, the data rendering module 630 may be specifically configured to combine and submit a plurality of the drawing instructions to the GPU if the number of the drawing instructions is a plurality of the drawing instructions.

In some implementations, the display device 600 of the interface element can also include a component invocation module. The component calling module is configured to call a class Drawable of the renderable objects to call the WebView component before the front-end webpage code file in the memory is provided to a rendering engine by the WebView component, where the WebView component is encapsulated in the class Drawable.

In some embodiments, the display device 600 of the interface element may further include a file verification module. The file verification module may be configured to verify the front-end webpage code file before the hypertext markup language front-end webpage code file corresponding to the target interface element is loaded into the memory, and the data loading module 610 may be configured to load the hypertext markup language front-end webpage code file corresponding to the target interface element into the memory if the front-end webpage code file is verified.

It will be clearly understood by those skilled in the art that, for convenience and brevity of description, the specific working process of the apparatus and modules described above may refer to the corresponding process in the foregoing method embodiment, which is not repeated herein.

In several embodiments provided by the present application, the coupling of the modules to each other may be electrical, mechanical, or other.

In addition, each functional module in each embodiment of the present application may be integrated into one processing module, or each module may exist alone physically, or two or more modules may be integrated into one module. The integrated modules may be implemented in hardware or in software functional modules.

In summary, according to the scheme provided by the application, the hypertext markup language front-end webpage code file corresponding to the target interface element is loaded into the memory, the front-end webpage code file in the memory is provided to the rendering engine through the webpage view WebView component, the front-end webpage code file is analyzed and rendered through the rendering engine, and the rendering result is displayed in the interface. Therefore, the rendering and the display of the interface elements in the interface can be realized through the WebView component and the rendering engine, and the rendering of the interface elements can be realized by utilizing the front-end webpage code file, so that the style of the interface elements can be easily changed, and the flexibility of the display of the interface elements can be improved.

Referring to fig. 9, a block diagram of an electronic device according to an embodiment of the present application is shown. The electronic device 100 may be an electronic device capable of running an application program, such as a smart phone, a tablet computer, a smart watch, an electronic book, etc. The electronic device 100 of the present application may include one or more processors 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 the one or more processors 110, the one or more applications configured to perform the methods as described in the foregoing method embodiments.

Processor 110 may include one or more processing cores. The processor 110 utilizes various interfaces and lines to connect various portions of the overall electronic device 100, perform various functions of the electronic device 100, and process data by executing or executing instructions, programs, code sets, or instruction sets stored in the memory 120, and invoking data stored in the memory 120. Alternatively, the processor 110 may be implemented in at least one hardware form of digital signal Processing (DIGITAL SIGNAL Processing, DSP), field-Programmable gate array (Field-Programmable GATE ARRAY, FPGA), programmable logic array (Programmable Logic Array, PLA). The processor 110 may integrate one or a combination of several of a central processing unit (Central Processing Unit, CPU), a graphics processor (Graphics Processing Unit, GPU), and a modem, etc. The CPU mainly processes an operating system, a user interface, an application program and the like, the GPU is used for rendering and drawing display contents, and the modem is used for processing wireless communication. It will be appreciated that the modem may not be integrated into the processor 110 and may be implemented solely by a single communication chip.

Memory 120 may include random access Memory (Random Access Memory, RAM) or Read-Only Memory (ROM). Memory 120 may be used to store instructions, programs, code, sets of codes, or sets of instructions. The memory 120 may include a stored program area and a stored data area, wherein the stored program area may store instructions for implementing an operating system, instructions for implementing at least one function (such as a touch function, a sound playing function, an image playing function, etc.), instructions for implementing the various method embodiments described below, etc. The storage data area may also store data created by the electronic device 100 in use (e.g., phonebook, audiovisual data, chat log data), and the like.

Referring to fig. 10, a block diagram of a computer readable storage medium according to an embodiment of the present application is shown. The computer readable medium 800 has stored therein program code which can be invoked by a processor to perform the methods described in the method embodiments described above.

The computer readable storage medium 800 may be an electronic memory such as a flash memory, an EEPROM (electrically erasable programmable read only memory), an EPROM, a hard disk, or a ROM. Optionally, the computer readable storage medium 800 comprises a non-volatile computer readable medium (non-transitory computer-readable storage medium). The computer readable storage medium 800 has storage space for program code 810 that performs any of the method steps described above. The 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 form.

The embodiment of the application also provides a computer program product, which comprises a computer program, and the computer program is executed by a processor to realize the display method of the interface element provided by the embodiment.

It should be noted that the above-mentioned embodiments are merely for illustrating the technical solution of the present application and not for limiting the same, and although the present application has been described in detail with reference to the above-mentioned embodiments, it will be understood by those skilled in the art that the technical solution described in the above-mentioned embodiments may be modified or some technical features may be equivalently replaced, and these modifications or replacements do not drive the essence of the corresponding technical solution to deviate from the spirit and scope of the technical solution of the embodiments of the present application.

Claims (15)

1. A method for displaying an interface element, the method comprising:

Loading a front-end webpage code file corresponding to the target interface element into a memory;

Providing the front-end webpage code file in the memory to a rendering engine through a webpage view component;

and analyzing and rendering the front-end webpage code file through the rendering engine, and displaying a rendering result in an interface.

2. The method of claim 1, wherein the parsing and rendering the front-end web page code file by the rendering engine and displaying the rendered result in an interface comprises:

If the target interface element is a dynamic interface element, analyzing and rendering the front-end webpage code file through the rendering engine, and displaying a rendering result 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, analyzing and rendering the front-end webpage code file through the rendering engine, and displaying a rendering result in an interface.

3. The method according to claim 2, wherein the method further comprises:

and if the target interface element is a static interface element and a bitmap which is rendered for the static interface element for the first time exists currently, displaying the bitmap in an interface through the rendering engine.

4. The method of claim 2, wherein before the parsing and rendering of the front-end web page code file by the rendering engine and displaying the rendered result in an interface if the target interface element is a dynamic interface element, the method comprises:

Acquiring real-time dynamic data corresponding to the dynamic interface element through the WebView component, and providing the real-time dynamic data to the rendering engine;

The analyzing and rendering the front-end webpage code file through the rendering engine, and displaying the rendering result in an interface, including:

and analyzing and rendering the front-end webpage code file and the real-time dynamic data through the rendering engine, and displaying a rendering result in an interface.

5. The method of claim 1, wherein the parsing and rendering of the front-end web page code file by the rendering engine occurs and prior to displaying the rendered results in an interface, the method further comprising:

transmitting a rendering instruction corresponding to the target interface element to the rendering engine through the WebView component;

The analyzing and rendering the front-end webpage code file through the rendering engine, and displaying the rendering result in an interface, including:

and responding to the rendering instruction through the rendering engine, analyzing and rendering the front-end webpage code file, and displaying a rendering result in an interface.

6. The method of claim 5, wherein the passing, by the WebView component, the rendering instruction corresponding to the target interface element to the rendering engine comprises:

And if a plurality of rendering instructions corresponding to different interface elements exist currently, transmitting the rendering instructions to the rendering engine in batches through the WebView component, wherein the rendering instructions comprise the rendering instructions corresponding to the target interface elements.

7. The method of claim 1, wherein the parsing and rendering the front-end web page code file by the rendering engine and displaying the rendered result in an interface comprises:

analyzing the front-end webpage code file through the rendering engine to obtain an analysis result;

generating a drawing instruction based on the analysis result;

and submitting the drawing instruction to a Graphic Processor (GPU) so that the GPU responds to the drawing instruction to draw, and displaying a drawing result in an interface.

8. The method of claim 7, wherein said submitting the drawing instruction to a graphics processor GPU comprises:

if the number of the drawing instructions is multiple, the drawing instructions are merged and then submitted to the GPU.

9. The method of claim 1, wherein 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 of any of claims 1-9, wherein prior to the providing, by a WebView component, the front-end web code file in the memory to a rendering engine, the method comprises:

A renderable object Drawable class is invoked to invoke the WebView component, wherein the WebView component is encapsulated in the Drawable class.

11. The method of any of claims 1-9, wherein prior to the providing the front-end web code file in the memory to a rendering engine via a web view WebView component, the method further comprises:

checking the front-end webpage code file;

The providing, by the web view WebView component, the front-end web code file in the memory to a rendering engine includes:

and under the condition that the verification of the front-end webpage code file is passed, providing the front-end webpage code file in the memory to a rendering engine through a webpage view WebView component.

12. A display device of interface elements is characterized by comprising a data loading module, a data transmission module and a data rendering module, wherein,

The data loading module is used for loading the front-end webpage code file corresponding to the target interface element into the memory;

the data transfer module is used for providing the front-end webpage code file in the memory to a rendering engine through a webpage view WebView component;

The data rendering module is used for analyzing and rendering the front-end webpage code file through the rendering engine and displaying a rendering result in an interface.

13. An electronic device, comprising:

One or more processors;

A 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, the one or more programs configured to perform the method of any of claims 1-11.

14. A computer readable storage medium, characterized in that the computer readable storage medium has stored therein a program code, which is callable by a processor for executing the method according to any one of claims 1-11.

15. A computer program product, characterized in that the computer program product comprises a computer program which, when executed by a processor, implements the method according to any of claims 1-11.