Interface display method based on component reuse and electronic equipment

Abstract

The invention provides a component reuse method and electronic equipment, and the method comprises the steps: creating a plurality of components of a first interface, and storing reusable components in the plurality of components; displaying the first interface according to the plurality of components and the first component tree; when it is determined that the first interface is updated into a second interface, the attributes needing to be updated and the types of the components corresponding to the attributes needing to be updated are recognized; taking out the same type of components from the plurality of reusable components, and mounting the same type of components to a second component tree; the second interface is displayed according to the second component tree, the components on the second component tree and the rendering result corresponding to the attribute which does not need to be updated, the attribute which needs to be updated and the attribute which does not need to be updated can be decoupled, the previous rendering result can be reused for the attribute which does not need to be updated, the number of times of cross-language scheduling is reduced, and the user experience is improved. And when the second interface is rendered, the previously stored components can be reused, so that the time for creating the components is saved, and the rendering efficiency is improved.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of electronic devices, and more specifically, to an interface display method based on component reuse and an electronic device. Background Art

[0002] There are currently multiple mainstream operating system (OS) platforms, such as IOS, Android, Harmony OS, MacOS, Linux, and Openharmony. Therefore, it is very important to enable applications to run across OS platforms and reduce the cost of application development and adaptation across OS platforms. There are many cross-OS platform development frameworks in the industry, such as the Flutter development framework and the React Native development framework. However, there are many problems with the above development frameworks. For example, when the application interface is updated, the response speed of the electronic device is slow, and the display effect of the same application on different OS platforms is inconsistent.

[0003] Based on this, how to improve the performance of applications across OS platforms has become an urgent problem to be solved. Summary of the invention

[0004] The present application provides an interface display method and an electronic device based on component reuse. When the interface is updated, the properties that need to be updated and the properties that do not need to be updated are decoupled. For the properties that do not need to be updated, the previous rendering results can be reused, which reduces the number of cross-language scheduling and can reuse previously saved components, saving the time of creating components and improving rendering efficiency.

[0005] In a first aspect, a method for displaying an interface based on component reuse is provided, which is applied to an electronic device and is characterized in that the method comprises: creating multiple components of a first interface, wherein the multiple components correspond to a first component tree, and the first interface is an interface to be rendered of a cross-platform application; saving reusable components among the multiple components, and the reusable components are used for reuse between different interfaces; displaying the first interface according to the multiple components and the first component tree; determining a type of a first updated component in response to updating the first interface to a second interface; determining a second component tree according to the type of the first updated component and the reusable component, and the second component tree is a component tree corresponding to the second interface; and displaying the second interface according to the second component tree, components on the second component tree, and attributes of the multiple components that do not need to be updated.

[0006] It should be understood that the reusable component is obtained by screening from multiple components.

[0007] Exemplarily, components marked with @Reuse in the code file are determined as reusable components.

[0008] It should be noted that the first update component can be understood as a collection of multiple update components. For example, in response to the first interface being updated to the second interface, there may be 100 update components, and then the types of the 100 update components are determined.

[0009] In an embodiment of the present application, when the electronic device displays the first interface of the application, it can save the reusable components in the first interface. When the first interface needs to be updated to the second interface, the properties that need to be updated and the properties that do not need to be updated are decoupled, and the previous rendering results can be reused for the properties that do not need to be updated, thereby reducing the number of cross-language scheduling. When rendering the second interface, the previously saved components can be reused, saving the time of creating components and improving rendering efficiency.

[0010] In combination with the first aspect, in some implementations of the first aspect, the attributes of the multiple components include attributes that need to be updated and attributes that do not need to be updated, and the first update component is a component corresponding to the attributes that need to be updated.

[0011] In combination with the first aspect, in certain implementations of the first aspect, the second component tree is determined based on the type of the first update component and the reusable component, including: when the type of the reusable component includes all types of the first update component, mounting the components of the reusable component that are of the same type as the update component to the second component tree.

[0012] In combination with the first aspect, in certain implementations of the first aspect, the method also includes: determining a second component tree based on the type of the first update component and the reusable component, including: when the type of the reusable component is partially the same as the type of the first update component, mounting the components of the reusable component that are the same type as the first update component to the second component tree; creating r components and mounting the r components to the second component tree, wherein the types of the r components are different from the type of the reusable component, and the type of the first update component includes the types of all the r components.

[0013] It should be understood that when the reusable components do not completely include the type of the first updated component, the electronic device can create a new component and mount it on the second component tree, and the type of the new component is a type not included in the reusable components.

[0014] In an embodiment of the present application, when the electronic device displays the first interface of the application, it can save the reusable components in the first interface. When the first interface needs to be updated to the second interface, the properties that need to be updated and the properties that do not need to be updated are decoupled, and the previous rendering results can be reused for the properties that do not need to be updated, thereby reducing the number of cross-language scheduling. When rendering the second interface, the previously saved components can be reused, saving the time of creating components and improving rendering efficiency.

[0015] In combination with the first aspect, in certain implementations of the first aspect, the method also includes: in response to updating the second interface to a third interface, determining the type of a second updated component; when the type of the reusable component is different from the type of the second updated component, creating f components and mounting the f components to the third component tree, wherein the type of the second updated component is the same as the type of the f components; and displaying the third interface based on the attributes that do not need to be updated among the attributes of the third component tree, the f components, and the components on the second component tree.

[0016] It should be understood that when the n reusable components do not include the types of s components, the electronic device can create a new component and mount it on the second component tree.

[0017] In an embodiment of the present application, when the electronic device displays the first interface of the application, it can save the reusable components in the first interface. When the first interface needs to be updated to the second interface, the properties that need to be updated and the properties that do not need to be updated are decoupled, and the previous rendering results can be reused for the properties that do not need to be updated, thereby reducing the number of cross-language scheduling and improving rendering efficiency.

[0018] In combination with the first aspect, in some implementations of the first aspect, the method further includes: creating objects of the multiple components and the first component tree at runtime; and binding properties of the multiple components to the multiple components according to the objects at runtime.

[0019] In an embodiment of the present application, when a cross-platform application is started, a communication channel is established between the cross-platform application and the native language side, objects of components and component trees on the native language side are created, and based on the objects on the native language side, properties of multiple components and multiple components are bound. This can mask the differences between different platforms, achieve consistency in component rendering on different platforms, and improve code reuse.

[0020] In combination with the first aspect, in certain implementations of the first aspect, the first interface is an interface of a first application, and the creation of multiple components of the first interface includes: creating the multiple components based on an executable file of the first application, and the executable file is used to indicate the reusable components.

[0021] In combination with the first aspect, in certain implementations of the first aspect, the reusable component is determined based on a reuse identifier in the executable file.

[0022] In combination with the first aspect, in some implementations of the first aspect, the attribute that does not need to be updated is one or more of a literal value, an enumeration value, and a non-state variable.

[0023] In a second aspect, an electronic device is provided, comprising: one or more processors; one or more memories; the one or more memories storing one or more computer programs, the one or more computer programs comprising instructions, which, when executed by the one or more processors, enable the electronic device to execute the first aspect or any possible implementation of the first aspect.

[0024] According to a third aspect, a computer-readable storage medium is provided, which includes a computer program or instructions. When the computer program or instructions are executed on a computer, the first aspect and any possible implementation method of the first aspect are executed.

[0025] According to a fourth aspect, a computer program product is provided. The computer program product includes a computer program or instructions. When the computer program or instructions are run on a computer, the first aspect and any possible implementation method of the first aspect are executed.

[0026] In a fifth aspect, a computer program is provided, which, when executed on a computer, enables the method in the first aspect and any possible implementation thereof to be executed.

[0027] In the sixth aspect, an electronic device is provided, which includes modules / units for executing the above aspects or any possible design method of the above aspects; these modules / units can be implemented by hardware, or the corresponding software can be implemented by hardware.

[0028] Among them, for the beneficial effects of the second to sixth aspects, please refer to the beneficial effects of the first aspect, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] Figure 1 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application.

[0030] Figure 2 It is a software structure block diagram of the electronic device provided in the embodiment of the present application.

[0031] Figure 3 It is a schematic diagram of the module framework provided in the embodiment of the present application.

[0032] Figure 4It is a schematic flow chart of an interface display method based on component reuse provided in an embodiment of the present application.

[0033] Figure 5 It is a schematic flow chart of an interface display method based on component reuse provided in an embodiment of the present application.

[0034] Figure 6 It is a schematic flow chart of an interface display method based on component reuse provided in an embodiment of the present application.

[0035] Figure 7 It is a schematic flow chart of an interface display method based on component reuse provided in an embodiment of the present application.

[0036] Figure 8 It is a schematic flow chart of an interface display method based on component reuse provided in an embodiment of the present application.

[0037] Fig. 9 It is a schematic flow chart of an interface display method based on component reuse provided in an embodiment of the present application.

[0038] Fig.10 It is a schematic flow chart of an interface display method based on component reuse provided in an embodiment of the present application.

[0039] Fig.11 It is a schematic flow chart of an interface display method based on component reuse provided in an embodiment of the present application. DETAILED DESCRIPTION

[0040] The technical solutions in the embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0041] The terms used in the following embodiments are only for the purpose of describing specific embodiments, and are not intended to be used as limitations on the present application. As used in the specification and the appended claims of the present application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to also include expressions such as "one or more", unless there is a clear contrary indication in the context. It should also be understood that in the following embodiments of the present application, "at least one", "one or more" refer to one, two or more. The term "and / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist; for example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the objects associated before and after are in an "or" relationship.

[0042] References to "one embodiment" or "some embodiments" etc. described in this specification mean that a particular feature, structure or characteristic described in conjunction with the embodiment is included in one or more embodiments of the present application. Thus, the phrases "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear at different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0043] The following describes an electronic device, a user interface for such an electronic device, and embodiments for using such an electronic device. In some embodiments, the electronic device may be a portable electronic device that also includes other functions such as a personal digital assistant and / or a music player function, such as a mobile phone, a tablet computer, a wearable electronic device with wireless communication function (such as a smart watch), etc. Exemplary embodiments of portable electronic devices include but are not limited to devices equipped with Or a portable electronic device with other operating systems. The portable electronic device may also be other portable electronic devices, such as a laptop computer, etc. It should also be understood that in some other embodiments, the electronic device may not be a portable electronic device, but a desktop computer.

[0044] For example, Figure 1 1 shows a schematic diagram of the structure of the electronic device 100. The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0045] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0046] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0047] The controller may be the nerve center and command center of the electronic device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0048] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0049] In some embodiments, the processor 110 may include one or more interfaces. The interface may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0050] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0051] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0052] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0053] The modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be sent into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a receiver 170B, etc.), or displays an image or video through a display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0054] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the frequency of the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency of it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0055] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-CDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite based augmentation system (SBAS).

[0056] The electronic device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0057] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0058] The electronic device 100 can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.

[0059] ISP is used to process the data fed back by camera 193. For example, when taking a photo, the shutter is opened, and the light is transmitted to the camera photosensitive element through the lens. The light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to ISP for processing and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on the noise, brightness, and skin color of the image. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, ISP can be set in camera 193.

[0060] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In some embodiments, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0061] The digital signal processor is used to process digital signals, and can process not only digital image signals but also other digital signals. For example, when the electronic device 100 is selecting a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0062] Video codecs are used to compress or decompress digital videos. The electronic device 100 may support one or more video codecs. Thus, the electronic device 100 may play or record videos in a variety of coding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0063] NPU is a neural network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and can also continuously self-learn. Through NPU, applications such as intelligent cognition of electronic device 100 can be realized, such as image recognition, face recognition, voice recognition, text understanding, etc.

[0064] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function, such as storing music, video and other files in the external memory card.

[0065] The internal memory 121 can be used to store computer executable program codes, which include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area may store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.), etc. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0066] The electronic device 100 can implement audio functions such as music playing and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0067] The audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. The audio module 170 can also be used to encode and decode audio signals. In some embodiments, the audio module 170 can be arranged in the processor 110, or some functional modules of the audio module 170 can be arranged in the processor 110.

[0068] The speaker 170A, also called a "speaker", is used to convert an audio electrical signal into a sound signal. The electronic device 100 can listen to music or listen to a hands-free call through the speaker 170A.

[0069] The receiver 170B, also called a "earpiece", is used to convert audio electrical signals into sound signals. When the electronic device 100 receives a call or voice message, the voice can be received by placing the receiver 170B close to the human ear.

[0070] Microphone 170C, also called "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can speak by putting their mouth close to microphone 170C to input the sound signal into microphone 170C. The electronic device 100 can be provided with at least one microphone 170C. In other embodiments, the electronic device 100 can be provided with two microphones 170C, which can not only collect sound signals but also realize noise reduction function. In other embodiments, the electronic device 100 can also be provided with three, four or more microphones 170C to collect sound signals, reduce noise, identify the sound source, realize directional recording function, etc.

[0071] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A can be set on the display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc. The capacitive pressure sensor can be a parallel plate including at least two conductive materials. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the intensity of the pressure based on the change in capacitance. When a touch operation acts on the display screen 194, the electronic device 100 detects the touch operation intensity according to the pressure sensor 180A. The electronic device 100 can also calculate the touch position based on the detection signal of the pressure sensor 180A. In some embodiments, touch operations acting on the same touch position but with different touch operation intensities can correspond to different operation instructions. For example, when a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on the alarm application icon, an instruction to create a new alarm is executed.

[0072] The fingerprint sensor 180H is used to collect fingerprints. The electronic device 100 can use the collected fingerprint characteristics to realize fingerprint unlocking, access application locks, fingerprint photography, fingerprint answering calls, etc. For example, when the mobile phone detects a user's touch operation on the lock screen interface, the mobile phone can collect the user's fingerprint information through the fingerprint sensor 180H, and match the collected fingerprint information with the fingerprint information preset in the mobile phone. If the match is successful, the mobile phone can enter the non-lock screen interface from the lock screen interface.

[0073] The touch sensor 180K is also called a "touch panel". The touch sensor 180K can be set on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180K can also be set on the surface of the electronic device 100, which is different from the position of the display screen 194.

[0074] Figure 2 1 is a software structure diagram of the electronic device 100 of the embodiment of the present application. The layered architecture divides the software into several layers, each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, namely, the application layer, the application framework layer, the Android runtime (Android runtime) and the system library, and the kernel layer. The application layer can include a series of application packages.

[0075] like Figure 2 As shown, the application layer may include camera, settings, third-party applications, etc. Among them, the third-party applications may include gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc.

[0076] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer may include some predefined functions.

[0077] like Figure 2 As shown, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and the like.

[0078] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc. The content provider is used to store and obtain data and make the data accessible to applications. The data may include video, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0079] The view system includes visual controls, such as controls for displaying text, controls for displaying pictures, etc., such as the indication information for prompting a virtual shutter key in the embodiment of the present application. The view system can be used to build applications. The display interface can be composed of one or more views. For example, a display interface including a text message notification icon can include a view for displaying text and a view for displaying pictures.

[0080] The phone manager is used to provide communication functions of the electronic device 100, such as management of call status (including connecting, hanging up, etc.).

[0081] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0082] The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications of applications running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is displayed in the status bar, a prompt sound is emitted, an electronic device vibrates, an indicator light flashes, etc.

[0083] Android runtime includes core libraries and virtual machines. Android runtime is responsible for scheduling and management of the Android system.

[0084] The core library consists of two parts: one part is the function that needs to be called by the Java language, and the other part is the Android core library.

[0085] The application layer and the application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0086] The system library may include multiple functional modules, such as surface manager, media libraries, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0087] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

[0088] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0089] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0090] A 2D graphics engine is a drawing engine for 2D drawings.

[0091] In addition, the system library may also include status monitoring service modules, such as a physical status recognition module for analyzing and identifying user gestures; a sensor service module for monitoring sensor data uploaded by various sensors at the hardware layer to determine the physical status of the electronic device 100.

[0092] The kernel layer is the layer between hardware and software. The kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.

[0093] The hardware layer can include various types of sensors, such as Figure 1 The various types of sensors introduced in the present application include acceleration sensors, gyroscope sensors, touch sensors, etc.

[0094] Combined with the above Figure 1 and Figure 2 The electronic device introduced, in the embodiment of the present application, the physical devices involved in the electronic device 100 mainly include hardware components such as sensors, decision support systems (DSS) display chips, touch screens, fingerprint recognition modules, etc.; as well as kernel software layers such as screen management modules, display drivers, fingerprint drivers, and anti-mistouch; application framework layer functions such as anti-mistouch input, screen control, always on display (AOD) services, power management, etc.; as well as application layer services such as special adaptation applications (camera), third-party applications, system sleep, and AOD.

[0095] There are currently multiple mainstream OS platforms, such as IOS, Android, Harmony OS, Mac OS, Linux, and Openharmony. These OS platforms will coexist for a long time. Therefore, it is very important to enable applications to run across OS platforms and reduce the cost of developing and adapting applications across OS platforms. There are many cross-OS platform development frameworks in the industry, such as the Flutter development framework and the React Native development framework.

[0096] The Flutter development framework uses its own underlying rendering engine to draw frame components, eliminating the process of converting to native components, and can ensure the consistency of the user interface (UI) of the application on different OS platforms. However, the Flutter development framework uses a three-tree architecture to calculate node differences. When the UI interface of the application is updated, the component tree needs to be created repeatedly, and the update efficiency is low, which will give users a sense of lag and reduce the user experience. In addition, the Flutter development framework is compatible with the Javascript (JS) ecosystem, and requires additional bridging, which will further reduce performance and increase memory, which may cause more serious lag.

[0097] The React Native development framework introduces mechanisms such as data binding and the virtual document object model (DOM) into the design of the front-end development framework. Developers declare the corresponding data and UI binding, and then the framework tracks the data changes and finds the change points by comparing the virtual DOM tree to automatically update the interface without the need for developers to manually program based on DOM. The React Native development framework directly bridges JS components to the native components of the OS platform to achieve a partial native rendering experience. However, the user experience (UX) specifications of different OS platforms are inconsistent, which makes the rendering effects of applications developed by the React Native development framework inconsistent on different OS platforms. With the update of the OS platform version, developers need to constantly deal with the differences between different OS platforms, and the cost of development and maintenance will also increase greatly.

[0098] In summary, the existing cross-OS platform development framework has problems such as slow response speed of electronic devices when the application interface needs to be updated, and inconsistent display effects of the same application on different OS platforms.

[0099] For ease of understanding, Figure 3The module framework used in the embodiment of the present application is shown. It mainly includes a cross-platform application startup module, a cross-platform compilation tool chain conversion module, a cross-platform engine parsing module, a cross-platform component attribute update module, a cross-platform component reuse module, and a cross-platform rendering module. The functions of each of the above modules are introduced below.

[0100] A cross-platform application startup module, used for package management, lifecycle management, permission manager, resource management, etc. of cross-platform applications.

[0101] A cross-platform compilation toolchain conversion module is used to compile and convert to generate executable files and parse abstract syntax tree (AST) nodes, insert adaptation state management frameworks according to different UI paradigm usage scenarios, run parsed prefabricated code, etc., where compilation conversion includes but is not limited to conversion of components, UI decorators, API paradigms, and resource paradigms.

[0102] The cross-platform component property update module is responsible for determining whether the properties of the called component have been updated. If the properties of the component do not have updated values, it will be skipped during redrawing, and the UI rendering backend will be notified to reuse the drawing result corresponding to the property. If the properties of the component have been updated, the component and its subtree will be reused or recreated, and the new properties will be updated to the component, triggering the UI rendering backend to update the component rendering interface.

[0103] A cross-platform engine parsing module, used to parse executable files, create components, and complete the binding of component styles and properties.

[0104] The cross-platform component reuse module is responsible for the management and update of reused components. During initialization, the location and information of the component and its subtree are saved in the cache. For components marked as reusable, re-creation can be avoided during update. Instead, components of the same type are obtained from the cache, and the update amount is updated to the corresponding component through the cross-platform component attribute update module, and re-mounted on the component node tree according to the recorded component node information.

[0105] The cross-platform rendering module is responsible for creating and updating the rendering nodes corresponding to the components, providing a unified cross-platform rendering engine mechanism, supporting cross-platform graphics drawing interfaces, rendering property setting interfaces, and animation setting interfaces to achieve consistency in self-rendering on different OS platforms.

[0106] In some other embodiments of the present application, in addition to the above-mentioned modules, the module framework used in the embodiments of the present application also includes a cross-platform application programming interface (API) extension module.

[0107] The cross-platform API extension module is responsible for shielding the differences between OS platforms, ensuring the consistent use of applications on different OS platforms, and enabling fast data transfer between the same application and different OS platforms. This eliminates the need for cross-platform application developers to do a lot of additional code adaptation, thereby increasing code reuse rate.

[0108] Figure 4 A schematic flow chart of an interface display method 400 based on component reuse provided in an embodiment of the present application is shown. Figure 4 As shown, the method includes:

[0109] S401, a cross-platform application startup module sends a developer code to a cross-platform compilation tool chain conversion module.

[0110] The cross-platform application startup module can parse the application package, load the dependent libraries and resources corresponding to the application package, and pass the developer code to the cross-platform compilation tool conversion module.

[0111] In the embodiment of the present application, there is no limitation on the language of the developer code. For example, the developer code may be written in JS language.

[0112] Exemplarily, the developer code may be written in C++ language.

[0113] Exemplarily, the developer code may be written in Objective C language.

[0114] Exemplarily, the developer code may be in ets (extended typescript) format.

[0115] Exemplarily, the developer code may be in c format.

[0116] The developer code may be marked with reusable components, for example, by some decorators, which is not limited in the present embodiment. The reusable components in the present embodiment may also be referred to as reusable components.

[0117] Exemplarily, in the embodiments of the present application, the @Reuse decorator can be used to identify reusable components, that is, reusable components.

[0118] For example, the developer code is:

[0119]

[0120] There is a text component in the above developer code. The name of the text component is Child. The @Reuse decorator is used in the developer code to identify the text component to indicate that the text component is a reusable component.

[0121] In some embodiments of the present application, the reusable components may be developer-defined.

[0122] S402, the cross-platform compilation tool chain conversion module generates an executable file according to the developer code.

[0123] After receiving the developer code, the cross-platform compilation tool chain conversion module can rely on the conversion rules to generate an executable file based on the developer code. Since reusable components are identified in the developer code, the reusable components have a reuse identifier in the executable file generated by the cross-platform compilation tool chain conversion module, that is, the executable file can be used to indicate the reusable components.

[0124] For example, taking the developer code in the above text as an example, the executable file code generated by the cross-platform compilation tool chain conversion module is as follows:

[0125]

[0126] The createReuse in the above executable file can be understood as a reuse identifier. The createReuse code includes the first parameter, the second parameter, the third parameter and the fourth parameter. The code segment of the first parameter is:

[0127] reuseNode

[0128] ? reuseNode

[0129] :new Child(this,{},undefined,elmtId),

[0130] The first parameter is used to indicate that the component is a reusable component.

[0131] The code snippet for the second parameter is:

[0132] reuseNode! ==null,

[0133] The second parameter is used to indicate that the current creation process is not in the reuse cache component.

[0134] The code snippet for the third parameter is:

[0135] "Child",

[0136] The third parameter is used to indicate the name of the reusable component.

[0137] The code snippet for the fourth parameter is:

[0138] reuseNode.onReuse({});

[0139] reuseNode.rerender();

[0140] The code segment of the fourth parameter is used to indicate the reuse update object of the reusable component.

[0141] S403, the cross-platform compilation tool chain conversion module sends the executable file to the cross-platform engine parsing module.

[0142] Correspondingly, the cross-platform engine parsing module receives the executable file sent by the cross-platform compilation tool chain conversion module.

[0143] S404, the cross-platform engine parsing module compiles the executable file to create multiple components and a first component tree.

[0144] S405, the cross-platform engine parsing module binds the attributes and events to multiple components.

[0145] S406, the cross-platform component reuse module saves the reusable components.

[0146] The cross-platform engine parsing module parses the executable file sent by the cross-platform compilation tool chain conversion module, and can create multiple components, which can constitute a first component tree, and the multiple components include reusable components. The cross-platform engine parsing module can also bind attributes and events to multiple components. When it is determined that the multiple components obtained by parsing include reusable components, the cross-platform component node reuse module can save the reusable components.

[0147] In other embodiments of the present application, the cross-platform engine parsing module may also save reusable components.

[0148] For example, taking the code described above as an example, the code in the executable file uses creatReuse to identify the component node as a reusable component. When the cross-platform engine parsing module creates the reusable component, the reusable component can be saved, or the cross-platform component node reuse module can save the reusable component.

[0149] It should be noted that, in the embodiment of the present application, the storage location of the reusable component is not limited, and the reusable component can be stored in the cache by way of example. In addition, the reusable component can also be stored in the main memory.

[0150] S407, the cross-platform rendering module displays the first interface of the application according to the multiple components and the first component tree.

[0151] The cross-platform rendering module can perform component layout calculation and generation of drawing instructions according to multiple components and the first component tree, and then perform rasterization and unified rendering to display the first interface of the application.

[0152] In some embodiments of the present application, Figure 5 As shown, when it is determined that the application is switched from the first interface to the second interface, the method further includes:

[0153] S408: The cross-platform component attribute update module determines attributes that need to be updated and attributes that do not need to be updated.

[0154] When an electronic device is running an application, the interface of the application can send an update and switch from a first interface to a second interface. When the interface of the application is updated, the cross-platform component property update module can identify properties bound to multiple components and determine the properties that need to be updated and those that do not need to be updated.

[0155] For example, multiple components of the first interface are bound to q attributes, of which k attributes need to be updated and t attributes do not need to be updated, where q≥1, k≥1, t≥1, q=t+k, and q, t, k are integers.

[0156] In the embodiment of the present application, the attributes that need to be updated and the attributes that do not need to be updated can be determined by preset rules.

[0157] Exemplarily, when a component attribute is one of a literal value, an enumeration value, and a non-state variable, the component attribute may not be updated when the interface is updated. When a component attribute is not one of the above, the component attribute needs to be updated when the interface is updated.

[0158] It should be noted that the above rules are only examples and should not be understood as specific limitations on the embodiments of the present application. Developers can determine the attributes that need to be updated and the attributes that do not need to be updated according to their needs.

[0159] S409, the cross-platform component attribute updating module sends instruction information #1 to the cross-platform engine parsing module.

[0160] Correspondingly, the cross-platform engine parsing module receives indication information #1 sent by the cross-platform component attribute updating module, where the indication information #1 is used to indicate attributes that do not need to be updated and attributes that need to be updated.

[0161] After receiving indication information #1, the cross-platform engine parsing module can determine the attributes that do not need to be updated and the attributes that need to be updated. When calling the re-rendering function, the cross-platform engine parsing module can add the functions of the attributes that need to be updated to the update object, and will not add the functions of the attributes that do not need to be updated to the update object.

[0162] S410, the cross-platform component attribute updating module sends indication information #1 to the cross-platform rendering module.

[0163] Correspondingly, the cross-platform rendering module receives the indication information #1 sent by the cross-platform component attribute updating module.

[0164] The cross-platform rendering module determines the attributes that do not need to be updated and the attributes that need to be updated according to the indication information #1, and determines the rendering results corresponding to the attributes that do not need to be updated. When displaying the updated interface, the rendering results corresponding to the attributes that do not need to be updated can be reused.

[0165] S411, the cross-platform engine parsing module determines the type of component corresponding to the property that needs to be updated.

[0166] There are s components corresponding to the property to be updated, where s≥0 and is an integer. The cross-platform engine parsing module can determine the types of the s components and the positions of the s components on the first component tree.

[0167] For example, the s components include component #1 and component #2, the type of component #1 is a text component, and the type of component #2 is an image component.

[0168] S412: The cross-platform engine parsing module determines whether the reusable components in the cache include components of the same type as the component corresponding to the attribute that needs to be updated.

[0169] After the cross-platform engine parsing module determines the type of component corresponding to the property that needs to be updated, it can search whether there is a component of the same type in the reusable components in the cache. If there is a component of the same type, step S413 is executed; if there is no component of the same type, step S414 is executed.

[0170] For this step, there are several possible situations that can be included.

[0171] In one possible case, the type of the reusable component includes all types of the s components.

[0172] For example, the types of the reusable component include component type #1, component type #2, component type #3, and component type #4, and the types of the s components include component type #1 and component type #2, that is, the type of the reusable component includes all types of the s components.

[0173] In this case, step S413 may be executed.

[0174] In one possible case, the type of the reusable component is partially the same as the types of the s components.

[0175] For example, the types of the reusable component include component type #1, component type #2, and component type #4, and the types of the s components include component type #1 and component type #3, that is, the type of the reusable component is partially the same as the types of the s components.

[0176] In this case, steps S413 and S414 may be performed.

[0177] One possible situation is that the type of the reusable component is different from the types of the s components.

[0178] For example, the type of the reusable component includes component type #1 and component type #2, and the types of the s components include component type #3 and component type #4, that is, the type of the reusable component is different from the types of the s components.

[0179] In this case, step S414 may be executed.

[0180] S413, the cross-platform engine parsing module takes out a component of the same type as the component corresponding to the attribute to be updated from the reusable components in the cache and mounts it on the second component tree.

[0181] If the cross-platform engine parsing module determines that there are components of the same type in the cached reusable components, it can take out the components of the same type from the reusable components and then mount the components of the same type on the second component tree, where the second component tree is the component tree corresponding to the second interface.

[0182] Taking the example that the type of the reusable component includes all types of the s components, the s components include component #1, component #2 and component #3, the type of component #1 is component type #1, and the types of component #2 and component #3 are component type #2, wherein the reusable component includes components of component type #1, component type #2 and component type #3, then the components of component type #1 and component type #2 can be taken out from the reusable component, and then the components of component type #1 and component type #2 can be mounted on the second component tree.

[0183] Taking the example that the type of the reusable component is partially the same as the types of the s components, the s components include component #1, component #2 and component #3, the type of component #1 is component type #1, the type of component #2 is component type #2, and the type of component #3 is component type #3, wherein the reusable component includes components of component type #1 and component type #2, then the components of component type #1 and component type #2 can be taken out from the reusable component, and then the components of component type #1 and component type #2 can be mounted on the second component tree.

[0184] In some embodiments, the second component tree may be generated based on the first component tree.

[0185] In some embodiments, the second component tree may be regenerated.

[0186] S414, the cross-platform engine parsing module creates a component of the same type as the component corresponding to the property that needs to be updated and mounts it to the second component tree.

[0187] It is understandable that, for the several possible situations described above, the number of components created by the cross-platform engine parsing module may be different.

[0188] In some embodiments, the type of the reusable component is partially the same as the type of the s components. The cross-platform engine parsing module can create r components and mount the r components on the second component tree, r≥1 and is an integer, wherein the type of the r components is different from the type of the reusable component, and the types of the s components include the types of the r components.

[0189] For example, the s components include component #1, component #2 and component #3, the type of component #1 is component type #1, the type of component #2 is component type #2, and the type of component #3 is component type #3, wherein the reusable component includes components of component type #1 and component type #2, then the components of component type #1 and component type #2 can be taken out from the reusable component, and then the components of component type #1 and component type #2 can be mounted on the second component tree, and then the cross-platform engine parsing module can create r components, and the type of the r components is component type #3.

[0190] In some embodiments, the type of the reusable component is different from the type of the s components, and the cross-platform engine parsing module can create f components and mount the f components on the second component tree, where f≥1 and is an integer.

[0191] For example, the s components include component #1, component #2 and component #3, the type of component #1 is component type #1, the type of component #2 is component type #2, and the type of component #3 is component type #3, wherein the reusable component includes a component of component type #4, then the cross-platform engine parsing module can create f components, the types of the f components include component type #1, component type #2 and component type #3.

[0192] S415, the cross-platform engine parsing module binds the updated properties and the updated events to the components of the second component tree.

[0193] The description of S415 can be found above, and for the sake of brevity, it will not be repeated here.

[0194] S416, the cross-platform rendering module displays the second interface of the application according to the rendering results corresponding to the second component tree, the components on the second component tree, and the t attributes that do not need to be updated.

[0195] In an embodiment of the present application, when the electronic device displays the first interface of the application, it can save the reusable components in the first interface. When the first interface needs to be updated to the second interface, the properties that need to be updated and the properties that do not need to be updated are decoupled, and the previous rendering results can be reused for the properties that do not need to be updated, thereby reducing the number of cross-language scheduling. When rendering the second interface, the previously saved components can be reused, saving the time of creating components and improving rendering efficiency.

[0196] In some other embodiments of the present application, the module framework used in the present application also includes a cross-platform API extension module, such as Figure 6 As shown, the method also includes:

[0197] S417, the cross-platform API extension module creates multiple components and objects of the first component tree on the native language side.

[0198] S418, the cross-platform API extension module binds the properties of the multiple components to the multiple components according to the objects on the native language side.

[0199] In the runtime environment, the cross-platform API extension module can create objects corresponding to the native language for the multiple components and the first component tree, and bind the properties of the multiple components to the multiple components according to the objects created at runtime, wherein the native language may include one or more languages ​​mainly used by the operating system. In other words, the cross-platform API extension module creates objects corresponding to the multiple components and the first component tree at runtime, and then binds the properties of the multiple components to the multiple components according to the objects at runtime.

[0200] Taking a cross-platform application developed using JS language and one or more languages ​​used by the Android platform as an example, the cross-platform API extension module can realize the communication from JS to C++ through the native application programming interface (NAPI) mechanism, and then realize the communication from C++ to Java through the Java Native Interface (JNI) mechanism, so as to realize the message transmission between the cross-platform application and the Android platform. After realizing the message transmission between the cross-platform application and the Android platform, in the runtime environment, the electronic device can create objects corresponding to the native language for the multiple components and the first component tree, and then bind the properties of the multiple components and the multiple components according to the created objects.

[0201] Taking the case where a cross-platform application is developed using the JS language and the native language side is one or more languages ​​used by the IOS platform as an example, the cross-platform API extension module can implement communication from JS to C++ through the NAPI mechanism, and then call Object C through the C++ side, so as to implement message transmission between the cross-platform application and the IOS platform. After implementing message transmission between the cross-platform application and the IOS platform, in the runtime environment, the electronic device can create objects corresponding to the native language for the multiple components and the first component tree, and then bind the properties of the multiple components and the multiple components according to the created objects.

[0202] It should be noted that the above only takes the case where a cross-platform application is developed using the JS language, and the native language side is one or more languages ​​used by the Android platform and the IOS platform as an example, but it is not limited to this. For example, a cross-platform application is developed using the Java language, and the native language side is one or more languages ​​used by the Openharmony platform. The message transmission between the cross-platform application and the Openharmony platform can also be achieved by referring to the method described above.

[0203] In an embodiment of the present application, when a cross-platform application is started, a communication channel is established between the cross-platform application and the native language side, objects of components and component trees on the native language side are created, and based on the objects on the native language side, properties of multiple components and multiple components are bound. This can shield differences between different platforms, achieve consistency in component rendering on different platforms, and improve code reuse rate.

[0204] In some embodiments of the present application, when it is determined that the application is switched from the first interface to the second interface, the method further includes:

[0205] The cross-platform API extension module creates a second component tree and objects of the components on the second component tree on the native language side.

[0206] The cross-platform API extension module binds the properties of the components on the second component tree with the components on the second component according to the objects on the native language side.

[0207] It is understandable that, in order to realize the above functions, the electronic device includes a hardware structure and / or software module corresponding to the execution of each function. Those skilled in the art should easily realize that, in combination with the steps of each example described in the embodiments disclosed herein, the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0208] The embodiment of the present application can divide the electronic device into functional modules (or units) according to the above method example. For example, each functional module (or unit) can be divided corresponding to each function, or two or more functions can be integrated into one module (or unit). The above integrated module (or unit) can be implemented in the form of hardware or in the form of software functional modules (or units). It should be noted that the division of modules (or units) in the embodiment of the present application is schematic, which is only a logical function division, and there may be other division methods in actual implementation.

[0209] Figure 7 A schematic flow chart of an interface display method 700 based on component reuse provided in an embodiment of the present application is shown. Figure 7 As shown, the method includes:

[0210] S701, creating multiple components of a first interface.

[0211] When the electronic device starts the application, it can create multiple components of the first interface, which can constitute a first component tree. The first interface is the interface to be rendered, and the multiple components include reusable components, which are stored in the cache. The reusable components can also be called reusable components.

[0212] In some embodiments, the application is a cross-platform application.

[0213] The electronic device may launch an application in response to a user's operation, or may automatically launch an application, which is not limited in the embodiments of the present application.

[0214] S702, saving a reusable component among the multiple components, where the reusable component is used for reuse among different interfaces.

[0215] For example, reusable components can be stored in a cache.

[0216] For example, reusable components may be stored in main memory.

[0217] S703, displaying a first interface according to the multiple components and the first component tree.

[0218] After the electronic device creates multiple components and a first component tree, it can render according to the multiple components and the first component tree to display a first interface.

[0219] S704: In response to updating the first interface to the second interface, determine the type of the first update component.

[0220] When the electronic device updates the first interface to the second interface, the type of the first update component can be determined.

[0221] Exemplarily, the electronic device may identify the attributes that need to be updated and the attributes that do not need to be updated among the attributes of multiple components, and then determine the component corresponding to the attribute that needs to be updated as the first update component.

[0222] It should be noted that the first update component may be a collection of multiple update components.

[0223] S705: Determine a second component tree according to the type of the first update component and the reusable components.

[0224] When the electronic device creates the second component tree of the second interface, it can determine whether there are components of the same type as the first updated component among the reusable components. When there are components of the same type, the components of the same type can be reused. When there are components of different types, new components can be recreated.

[0225] S706: Display a second interface according to the second component tree, the components on the second component tree, and the attributes of the multiple components that do not need to be updated.

[0226] The electronic device binds the new attribute to the component on the second component tree, and then displays the second interface according to the rendering results corresponding to the second component tree, the component on the second component tree, and the attribute that does not need to be updated.

[0227] In some embodiments, the first interface may be an interface of a cross-platform application.

[0228] In an embodiment of the present application, when the electronic device displays the first interface of the application, it can save the reusable components in the first interface. When the first interface needs to be updated to the second interface, the properties that need to be updated and the properties that do not need to be updated are decoupled, and the previous rendering results can be reused for the properties that do not need to be updated, thereby reducing the number of cross-language scheduling. When rendering the second interface, the previously saved components can be reused, saving the time of creating components and improving rendering efficiency.

[0229] Figure 8 An exemplary flow chart of another interface display method based on component reuse provided in an embodiment of the present application is shown. Figure 8 As shown, in some embodiments, S705, determining a second component tree according to the type of the first update component and the reusable component includes:

[0230] S7051: When the types of the reusable components include all types of the first updated components, mount the components of the reusable components that are of the same type as the first updated components to the second component tree.

[0231] For example, the first updated component type includes component type #1 and component type #2, and the reusable component includes components of component type #1, component type #2, and component type #3. Then, the components of component type #1 and component type #2 can be taken out from the reusable component, and then the components of component type #1 and component type #2 can be mounted on the second component tree.

[0232] Fig. 9 An exemplary flow chart of another interface display method based on component reuse provided in an embodiment of the present application is shown. Fig. 9 As shown, in some embodiments, S705, determining a second component tree according to the type of the first update component and the reusable component includes:

[0233] S7052: When the type of the reusable component is partially identical to the type of the first updated component, mount the components of the reusable component that are identical to the type of the first updated component to the second component tree.

[0234] S7053, create r components and mount the r components to the second component tree, wherein the types of the r components are different from the types of the reusable components, and the types of the first updated components include all types of the r components.

[0235] For example, the first update component includes component #1, component #2 and component #3, the type of component #1 is component type #1, the type of component #2 is component type #2, and the type of component #3 is component type #3, wherein the reusable component includes components of component type #1 and component type #2, then the components of component type #1 and component type #2 can be taken out from the reusable component, and then the components of component type #1 and component type #2 can be mounted on the second component tree. At the same time, create a component of component type #3, and mount the component of component type #3 on the second component tree.

[0236] In an embodiment of the present application, when the electronic device displays the first interface of the application, it can save the reusable components in the first interface. When the first interface needs to be updated to the second interface, the properties that need to be updated and the properties that do not need to be updated are decoupled, and the previous rendering results can be reused for the properties that do not need to be updated, thereby reducing the number of cross-language scheduling. When rendering the second interface, the previously saved components can be reused, saving the time of creating components and improving rendering efficiency.

[0237] Fig.10 An exemplary flow chart of another interface display method based on component reuse provided in an embodiment of the present application is shown. Fig.10 As shown, in some embodiments the method further comprises:

[0238] S707: In response to updating the second interface to the third interface, determine the type of the second update component.

[0239] S708: When the type of the reusable component is different from the type of the second updated component, create f components and mount the f components to the third component tree.

[0240] S709, displaying the third interface according to the attributes that do not need to be updated among the attributes of the third component tree, the f components, and the components on the second component tree.

[0241] It should be understood that the description of S707-S709 can be found above, and for the sake of brevity, it will not be repeated here.

[0242] In an embodiment of the present application, when the electronic device displays the first interface of the application, it can save the reusable components in the first interface. When the first interface needs to be updated to the second interface, the properties that need to be updated and the properties that do not need to be updated are decoupled, and the previous rendering results can be reused for the properties that do not need to be updated, thereby reducing the number of cross-language scheduling and improving rendering efficiency.

[0243] Fig.11 An exemplary flow chart of another interface display method based on component reuse provided in an embodiment of the present application is shown. Fig.11 As shown, in some embodiments, the method further includes:

[0244] S710: Create multiple components and objects of the first component tree on the native language side.

[0245] S711: Bind the properties of the multiple components to the multiple components according to the objects on the native language side.

[0246] In the runtime environment, the electronic device can create objects corresponding to the native language for the multiple components and the first component tree, and bind the properties of the multiple components to the multiple components according to the objects of the native language. In other words, the electronic device creates objects of the multiple components and the first component tree at runtime, and then binds the properties of the multiple components to the multiple components according to the objects at runtime.

[0247] In an embodiment of the present application, when a cross-platform application is started, a communication channel is established between the cross-platform application and the native language side, objects of components and component trees are created on the native language side, and the properties of the components are bound to the components according to the objects on the native language side. This can mask the differences between different platforms, achieve consistency in component rendering on different platforms, and improve code reuse.

[0248] In some embodiments, the first interface is an interface of a first application program, and S701, creating multiple components of the first interface includes:

[0249] The plurality of components are created based on an executable file of the first application, where the executable file is used to indicate reusable components.

[0250] In some embodiments, the reusable component is determined based on a reuse identifier in the executable file.

[0251] For example, createReuse in the above executable file code can be understood as a reuse identifier, and the electronic device can determine a reusable component among multiple components according to the reuse identifier.

[0252] The embodiment of the present application provides a computer program product, when the computer program product is run on an electronic device, the electronic device executes the technical solution in the above embodiment. Its implementation principle and technical effect are similar to those of the above method-related embodiments, and will not be repeated here.

[0253] The embodiment of the present application provides a readable storage medium, the readable storage medium contains instructions, when the instructions are executed in an electronic device, the electronic device executes the technical solution of the above embodiment. The implementation principle and technical effect are similar, and will not be repeated here.

[0254] The embodiment of the present application provides a chip, the chip is used to execute instructions, when the chip is running, the technical solution in the above embodiment is executed. The implementation principle and technical effect are similar, and will not be repeated here.

[0255] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the embodiments of the present application.

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

[0257] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0258] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0259] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0260] If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program code.

[0261] The above is only a specific implementation of the embodiment of the present application, but the protection scope of the embodiment of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or replacements within the technical scope disclosed in the embodiment of the present application, which should be included in the protection scope of the embodiment of the present application. Therefore, the protection scope of the embodiment of the present application should be based on the protection scope of the claims.

Claims

1. An interface display method based on component reuse, applied to electronic equipment, characterized in that: The method comprises: Creating a plurality of components of a first interface, wherein the plurality of components correspond to a first component tree, and the first interface is an interface to be rendered of a cross-platform application; Saving reusable components among the multiple components, wherein the reusable components are used for reuse among different interfaces; Displaying the first interface according to the multiple components and the first component tree; In response to updating the first interface to a second interface, determining a type of a first update component; Determine a second component tree according to the type of the first update component and the reusable component, where the second component tree is a component tree corresponding to the second interface; The second interface is displayed according to the second component tree, the components on the second component tree, and the attributes of the multiple components that do not need to be updated.

2. The method according to claim 1, characterized in that The determining the second component tree according to the type of the first update component and the reusable component includes: When the types of the reusable components include all types of the first update components, the components of the reusable components that are of the same type as the first update components are mounted to the second component tree.

3. The method according to claim 1, characterized in that The determining the second component tree according to the type of the first update component and the reusable component includes: When the type of the reusable component is partially the same as the type of the first update component, mounting the components of the reusable component that are the same as the first update component in the second component tree; Create r components and mount the r components to the second component tree, wherein types of the r components are different from a type of the reusable component, and a type of the first update component includes all types of the r components.

4. The method according to claim 1, characterized in that The method further comprises: In response to updating the second interface to a third interface, determining a type of a second update component; When the type of the reusable component is different from the type of the second updated component, create f components and mount the f components to a third component tree, wherein the third component tree is a component tree corresponding to the third interface, and the type of the second updated component is the same as the type of the f components; The third interface is displayed based on the attributes that do not need to be updated among the attributes of the third component tree, the f components, and the components on the second component tree.

5. The method according to any one of claims 1 to 4, characterized in that The method further comprises: Creating runtime objects of the plurality of components and the first component tree; According to the runtime object, the properties of the multiple components are bound to the multiple components.

6. The method according to any one of claims 1 to 5, characterized in that The first interface is an interface of a first application program, and the multiple components for creating the first interface include: The plurality of components are created based on an executable file of a first application, wherein the executable file is used to indicate the reusable components.

7. The method according to claim 6, characterized in that The reusable component is determined based on a reuse identifier in the executable file.

8. The method according to any one of claims 1 to 7, characterized in that The attributes that do not need to be updated are one or more of literals, enumeration values, and non-state variables.

9. The method according to any one of claims 1 to 8, characterized in that When the first interface is updated to the second interface, the attributes of the multiple components include attributes that need to be updated and attributes that do not need to be updated, and the first update component is a component corresponding to the attribute that needs to be updated.

10. An electronic device, characterized in that: include: one or more processors; one or more memories; The one or more memories store one or more computer programs, and the one or more computer programs include instructions, which, when executed by the one or more processors, enable the electronic device to perform the method as claimed in any one of claims 1 to 9.

11. A computer-readable storage medium, characterized in that: The computer-readable storage medium comprises a computer program or instructions, and when the computer program or instructions are run on a computer, the method according to any one of claims 1 to 9 is executed.

Images