Interface display method based on component reusing, and electronic device

Abstract

An interface display method based on component reusing, and an electronic device. The method comprises: creating a plurality of components of a first interface (S701); saving reusable components among the plurality of components, wherein the reusable components are used for being reused between different interfaces (S702); displaying the first interface according to the plurality of components and a first component tree (S703); in response to updating the first interface to a second interface, determining the type of first updated components (S704); determining a second component tree according to the type of the first update components and the reusable components (S705); and displaying the second interface according to the second component tree, components on the second component tree, and attributes which do not need to be updated (S706). For attributes which do not need to be updated, a previous rendering result can be reused, so that the number of instances of cross-language scheduling is reduced; and during the rendering of a second interface, previously saved components can be reused, so that the time for creating components is reduced, thereby improving the efficiency of rendering.

Description

Interface display method based on component reuse and electronic device

[0001] This application claims priority to the Chinese patent application filed with the China Patent Office on July 14, 2023, with application number 202310868719.6 and application name “An interface display method and electronic device based on component reuse”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] 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

[0003] There are currently multiple mainstream operating system (OS) platforms, such as iOS, Android, Harmony OS, macOS, Linux, and Openharmony. Therefore, enabling applications to run across multiple OS platforms and reducing the cost of developing and adapting applications across these platforms is crucial. Numerous cross-OS development frameworks exist in the industry, such as Flutter and React Native. However, these frameworks present numerous challenges. For example, electronic devices may experience slow response times when updating the application interface, and the same application may display inconsistently across different OS platforms.

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

[0005] Summary of the Invention

[0006] The present application provides an interface display method and 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.

[0007] 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 includes: 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 for a cross-platform application; saving reusable components among the multiple components, and the reusable components are used to be reused between different interfaces; displaying the first interface according to the multiple components and the first component tree; determining the type of the 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, the components on the second component tree, and the attributes of the multiple components that do not need to be updated.

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

[0009] Exemplarily, components marked with @Reuse in the code file are determined to be reusable components.

[0010] 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 the types of the 100 update components are then determined.

[0011] 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.

[0012] 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.

[0013] 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, the components of the reusable component that are of the same type as the update component are mounted to the second component tree.

[0014] In combination with the first aspect, in certain implementations of the first aspect, the method further includes: determining a second component tree based on the type of the first updated component and the reusable component, including: when the type of the reusable component is partially the same as the type of the first updated component, mounting the components of the reusable component that are the same type as the first updated 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.

[0015] 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. The type of the new component is not included in the reusable components.

[0016] 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.

[0017] In combination with the first aspect, in certain implementations of the first aspect, the method further includes: in response to updating the second interface to a third interface, determining the type of the 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 properties that do not need to be updated among the properties of the third component tree, the f components, and the components on the second component tree.

[0018] 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.

[0019] 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.

[0020] 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 based on the runtime objects.

[0021] 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 based on the objects on the native language side, the properties of multiple components are bound to multiple components. This can mask the differences between different platforms, achieve component rendering consistency on different platforms, and improve code reuse rate.

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

[0023] 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.

[0024] In combination with the first aspect, in certain 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.

[0025] 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.

[0026] In a third aspect, a computer-readable storage medium is provided, which 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.

[0027] In a fourth aspect, a computer program product is provided, which 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.

[0028] 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.

[0029] 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 through hardware, or corresponding software implementations can be executed through hardware.

[0030] 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

[0031] FIG1 is a schematic structural diagram of an electronic device provided in an embodiment of the present application.

[0032] FIG2 is a block diagram of the software structure of the electronic device provided in an embodiment of the present application.

[0033] FIG3 is a schematic diagram of a module framework provided in an embodiment of the present application.

[0034] FIG4 is a schematic flowchart of an interface display method based on component reuse provided in an embodiment of the present application.

[0035] FIG5 is a schematic flowchart of an interface display method based on component reuse provided in an embodiment of the present application.

[0036] FIG6 is a schematic flowchart of an interface display method based on component reuse provided in an embodiment of the present application.

[0037] FIG7 is a schematic flowchart of an interface display method based on component reuse provided in an embodiment of the present application.

[0038] FIG8 is a schematic flowchart of an interface display method based on component reuse provided in an embodiment of the present application.

[0039] FIG9 is a schematic flowchart of an interface display method based on component reuse provided in an embodiment of the present application.

[0040] FIG10 is a schematic flowchart of an interface display method based on component reuse provided in an embodiment of the present application.

[0041] FIG11 is a schematic flowchart of an interface display method based on component reuse provided in an embodiment of the present application. DETAILED DESCRIPTION

[0042] The technical solutions in the embodiments of the present application will be described below with reference to the accompanying drawings.

[0043] The terms used in the following embodiments are only for the purpose of describing specific embodiments and are not intended to limit the present application. As used in the specification of this application and the appended claims, the singular expressions "a", "an", "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 can exist; for example, A and / or B can mean: 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 previous and subsequent associated objects are in an "or" relationship.

[0044] References to "one embodiment" or "some embodiments" in this specification mean that a particular feature, structure, or characteristic described in conjunction with that embodiment is included in one or more embodiments of the present application. Thus, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," and "in yet other embodiments" appearing in various places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more but not all embodiments," unless otherwise specifically emphasized. The terms "including," "comprising," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0045] 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, such as a mobile phone, a tablet computer, a wearable electronic device with wireless communication functions (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. It should also be understood that in some other embodiments, the electronic device may not be a portable electronic device, but a desktop computer.

[0046] 1 shows a schematic structural diagram of an 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 194, and a subscriber identification module (SIM) card interface 195. 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.

[0047] It should be understood that the structures illustrated in the embodiments of the present application do 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, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0048] 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 processing unit (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). The different processing units may be independent devices or integrated into one or more processors.

[0049] 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.

[0050] Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 110. If processor 110 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 110 latency, and thus improves system efficiency.

[0051] In some embodiments, the processor 110 may include one or more interfaces. The interfaces 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.

[0052] 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.

[0053] 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 antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In other embodiments, the antennas can be used in conjunction with a tuning switch.

[0054] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G 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.

[0055] The modem processor may include a modulator and a demodulator. The modulator is used to modulate the low-frequency baseband signal to be transmitted 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 being processed by the baseband processor, the low-frequency baseband signal is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to the speaker 170A, the receiver 170B, etc.) or displays an image or video through the 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.

[0056] 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 that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, frequency modulate it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0057] 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 a network and other devices through wireless communication technologies. The wireless communication technologies 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).

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

[0059] Display screen 194 is used to display images, videos, and the like. 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 (AMOLED), a flexible light-emitting diode (FLED), a MiniLED, a MicroLED, a Micro-oLed, or a quantum dot light-emitting diode (QLED). In some embodiments, electronic device 100 may include one or N display screens 194, where N is a positive integer greater than one.

[0060] The electronic device 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.

[0061] The ISP processes data fed back by camera 193. For example, when taking a photo, the shutter is opened, and light is transmitted through the lens to the camera's photosensitive element. The light signal is converted into an electrical signal, which is then passed to the ISP for processing and converted into a visible image. The ISP can also perform algorithmic optimization on image noise, brightness, and skin tone. It can also optimize parameters such as exposure and color temperature of the captured scene. In some embodiments, the ISP can be located within camera 193.

[0062] 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 light signal into an electrical signal, and then passes the electrical signal to the ISP for conversion 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.

[0063] The digital signal processor is used to process digital signals. In addition to processing digital image signals, it can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0064] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. This allows electronic device 100 to play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, and MPEG4.

[0065] The NPU is a neural network (NN) computing processor. Drawing on the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, it rapidly processes input information and can continuously self-learn. The NPU can enable intelligent cognitive applications in electronic device 100, such as image recognition, face recognition, speech recognition, and text comprehension.

[0066] 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 via the external memory interface 120 to implement data storage functions. For example, files such as music and videos can be stored on the external memory card.

[0067] 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 can 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 can 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.

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

[0069] 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 provided in the processor 110, or some functional modules of the audio module 170 can be provided in the processor 110.

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

[0071] The receiver 170B, also called a "handset", is used to convert audio electrical signals into sound signals. When the electronic device 100 receives a call or a voice message, the user can place the receiver 170B close to the ear to hear the voice.

[0072] Microphone 170C, also known as "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 the microphone 170C to input the sound signal into the 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 source of sound, realize directional recording function, etc.

[0073] The pressure sensor 180A is used to sense pressure signals and convert them into electrical signals. 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. A capacitive pressure sensor can be a device comprising at least two parallel plates with 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 intensity of the touch operation based on the pressure sensor 180A. The electronic device 100 can also calculate the position of the touch 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, the instruction to create a new alarm is executed.

[0074] Fingerprint sensor 180H is used to collect fingerprints. Electronic device 100 can use the collected fingerprint characteristics to implement fingerprint unlocking, accessing application locks, taking photos with fingerprints, answering calls with fingerprints, and so on. For example, when the phone detects a user's touch operation on the lock screen, the phone can collect the user's fingerprint information through fingerprint sensor 180H and match the collected fingerprint information with the fingerprint information pre-set in the phone. If the match is successful, the phone can enter the non-lock screen interface from the lock screen interface.

[0075] The touch sensor 180K is also called a "touch panel." The touch sensor 180K can be disposed on the display screen 194. 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 applied thereto or in the vicinity thereof. The touch sensor can transmit the detected touch operations to the application processor to determine the type of touch event. Visual output related to the touch operations can be provided via the display screen 194. In other embodiments, the touch sensor 180K can also be disposed on the surface of the electronic device 100, in a location different from that of the display screen 194.

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

[0077] As shown in Figure 2, 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.

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

[0079] As shown in FIG2 , the application framework layer may include a window manager, a content provider, a view system, a telephony manager, a resource manager, a notification manager, and the like.

[0080] The window manager manages windowed applications. It can determine the display size, determine whether a status bar is present, lock the screen, and take screenshots. Content providers store and retrieve data and make it accessible to applications. This data can include video, images, audio, incoming and outgoing calls, browsing history and bookmarks, and phone books.

[0081] The view system includes visual controls, such as controls for displaying text and images, such as the instructions for prompting a virtual shutter button in the embodiments of this application. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images.

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

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

[0084] The Notification Manager allows applications to display notifications in the status bar. These messages can be displayed briefly and then disappear automatically without user interaction. For example, the Notification Manager is used to notify users of completed downloads and message reminders. The Notification Manager can also display notifications in the top status bar of the system as icons or scrolling text, such as notifications from background applications, or as dialog windows on the screen. Examples include text messages in the status bar, beeps, vibrations on electronic devices, and flashing indicator lights.

[0085] The Android runtime includes the core library and the virtual machine. The Android runtime is responsible for scheduling and management of the Android system.

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

[0087] The application layer and application framework layer run in a virtual machine. The virtual machine executes Java files in the application layer and application framework layer as binary files. The virtual machine manages object lifecycles, stack management, thread management, security and exception management, and garbage collection.

[0088] The system library can 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.

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

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

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

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

[0093] In addition, the system library can 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.

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

[0095] The hardware layer may include various sensors, such as the various sensors introduced in FIG. 1 , the acceleration sensor, gyroscope sensor, touch sensor, etc. involved in the embodiments of the present application.

[0096] In combination with the electronic devices introduced in Figures 1 and 2 above, 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, and power management; and application layer services such as special adaptation applications (camera), third-party applications, system hibernation, and AOD.

[0097] Currently, there are multiple mainstream OS platforms, such as iOS, Android, Harmony OS, Mac OS, Linux, and Openharmony. These platforms will coexist for a long time. Therefore, enabling cross-OS application runtimes and reducing the cost of developing and adapting applications across these platforms has become crucial. The industry currently offers numerous cross-OS development frameworks, such as the Flutter and React Native frameworks.

[0098] The Flutter development framework uses its own underlying rendering engine to draw frame components, eliminating the need to convert to native components and ensuring consistent user interfaces (UIs) across different OS platforms. However, the Flutter development framework uses a three-tree architecture to calculate node differences. When an application's UI is updated, the component tree must be repeatedly recreated, resulting in inefficient updates and a perceived lag, degrading the user experience. Furthermore, the Flutter development framework is compatible with the JavaScript (JS) ecosystem, requiring additional bridging, which further reduces performance and increases memory usage, potentially causing even more lag.

[0099] The React Native development framework incorporates mechanisms such as data binding and the virtual document object model (DOM) into its front-end development framework design. Developers declare the corresponding data and UI bindings, and the framework then tracks data changes and identifies change points by comparing virtual DOM trees, automatically updating the interface without the developer having to manually program with the DOM. The React Native development framework directly bridges JS components to the native components of the OS platform, achieving a partial native rendering experience. However, the inconsistent user experience (UX) specifications of different OS platforms mean that applications developed using the React Native development framework will have inconsistent rendering effects on different OS platforms. Furthermore, with each OS platform version update, developers need to constantly deal with the differences between different OS platforms, significantly increasing development and maintenance costs.

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

[0101] For ease of understanding, Figure 3 shows the module framework used in the embodiments of this application. It primarily includes a cross-platform application startup module, a cross-platform compilation toolchain conversion module, a cross-platform engine parsing module, a cross-platform component property update module, a cross-platform component reuse module, and a cross-platform rendering module. The functions of each of these modules are described below.

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

[0103] A cross-platform compilation toolchain conversion module is used to compile and convert to generate executable files and parse abstract syntax tree (AST) nodes. It inserts an adaptation state management framework and runs pre-made parsed code according to different UI paradigm usage scenarios. Compilation and conversion include but are not limited to conversion of components, UI decorators, API paradigms, and resource paradigms.

[0104] The cross-platform component property update module is responsible for determining whether the properties of the called component have been updated. If the property of the component does not have an updated value, it will be skipped during redrawing and the UI rendering backend will be notified to reuse the corresponding drawing result of the property. If the property of the component has an updated value, 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.

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

[0106] The cross-platform component reuse module is responsible for managing and updating reusable components. During initialization, the location and information of the component and its subtree are stored in a cache. For components marked as reusable, re-creation is avoided during updates. Instead, components of the same type are retrieved from the cache. The cross-platform component property update module updates the updated value to the corresponding component and re-mounts it on the component node tree based on the recorded component node information.

[0107] 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.

[0108] In 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.

[0109] The cross-platform API extension module is responsible for shielding the differences between OS platforms, ensuring that the application's usage effect is consistent 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 improving code reuse.

[0110] FIG4 shows a schematic flow chart of an interface display method 400 based on component reuse provided in an embodiment of the present application. As shown in FIG4 , the method includes:

[0111] S401: The cross-platform application startup module sends a developer code to the cross-platform compilation tool chain conversion module.

[0112] 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.

[0113] 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.

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

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

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

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

[0118] Developer code can be marked with reusable components, for example, through some decorators to mark, the embodiment of the present application is not limited to this. The reusable components in the embodiment of the present application can also be called reusable components.

[0119] For example, in the embodiment of the present application, the @Reuse decorator can be used to identify reusable components, that is, reusable components.

[0120] For example, the developer code is:

[0121] In the above developer code, there is a text component named Child. The @Reuse decorator is used to identify the text component to indicate that the text component is a reusable component.

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

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

[0124] 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 the developer code identifies reusable components, 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.

[0125] For example, taking the developer code above as an example, the executable file code generated by the cross-platform compilation toolchain conversion module is as follows:

[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 does not have a component in the reuse cache.

[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 segment 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 to create multiple components. The multiple components can form a first component tree, and the multiple components include reusable components. The cross-platform engine parsing module can also bind attributes and events to the multiple components. When it is determined that the multiple components obtained by parsing include a reusable component, the cross-platform component node reuse module can save the reusable component.

[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. For example, the reusable component can be stored in a cache. 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 program 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 based on multiple components and the first component tree, then perform rasterization, and then perform unified rendering to display the first interface of the application.

[0152] In some embodiments of the present application, as shown in FIG5 , 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 updates and switch from the first interface to the second interface. When the interface of the application is updated, the cross-platform component property update module can identify the properties bound to multiple components and determine the properties that need to be updated and the properties 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] For example, when a component property is a literal, an enumeration value, or a non-state variable, the component property may not be updated when the interface is updated. When a component property is not one of the above, the component property 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 update module sends instruction information #1 to the cross-platform engine parsing module.

[0160] Correspondingly, the cross-platform engine parsing module receives the 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 update module sends instruction 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 based on 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 the component corresponding to the property that needs to be updated.

[0166] There are s components corresponding to the property that needs to be updated, where s is an integer and is greater than or equal to 0. 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 a component of the same type as the component corresponding to the property 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 for components of the same type in the reusable components in the cache. If there are components of the same type, step S413 is executed; if there are no components of the same type, step S414 is executed.

[0170] For this step, there are several possible situations.

[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 types of the reusable component include 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] In one possible case, the type of the reusable component is different from the types of the s components.

[0178] For example, the types of the reusable component include 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 extracts a component of the same type as the component corresponding to the property 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, where the type of the r components is different from the type of the reusable component, and the type of the s components includes the type 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. 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 in 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 further includes a cross-platform API extension module, as shown in FIG6 , and the method further 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 multiple components to the multiple components based on the objects on the native language side.

[0199] In the runtime environment, the cross-platform API extension module can create objects corresponding to native languages ​​for the multiple components and the first component tree, and bind the properties of the multiple components to the multiple components based on the objects created at runtime, where the native language can include one or more languages ​​primarily 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 based on the objects at runtime.

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

[0201] For example, if a cross-platform application is developed using JavaScript and its native language is one or more languages ​​used by the iOS platform, the cross-platform API extension module can implement communication from JavaScript to C++ through the NAPI mechanism, and then call Object C from the C++ side 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, the electronic device can create native language objects for the multiple components and the first component tree at runtime, and then bind the properties of the multiple components to the multiple components based on the created objects.

[0202] It should be noted that the above example only uses a cross-platform application developed in JS, with one or more languages ​​used by the Android and iOS platforms as the native language, but is not limited to this. For example, a cross-platform application developed in Java, with one or more languages ​​used by the Openharmony platform as the native language, can also implement messaging between the cross-platform application and the Openharmony platform using the methods 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 are created on the native language side, and based on the objects on the native language side, the properties of multiple components are bound to multiple components. This can shield the differences between different platforms, achieve component rendering consistency 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 implement the above functions, the electronic device includes hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should easily realize that, in combination with the steps of the various examples 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-mentioned 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 and is only a logical function division. There may be other division methods in actual implementation.

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

[0210] S701: Create multiple components of the first interface.

[0211] When launching an application, an electronic device may create multiple components of a first interface, which may constitute a first component tree. The first interface is the interface to be rendered. The multiple components include reusable components, which are stored in a cache. The reusable components may also be referred to as 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 it may launch an application automatically, which is not limited in the embodiments of the present application.

[0214] S702: Save 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 can be stored in main memory.

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

[0218] After the electronic device creates multiple components and the first component tree, it can render according to the multiple components and the first component tree to display the 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 attributes that need to be updated and 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 updated 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 created.

[0225] S706: Display a second interface based on 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] FIG8 shows an exemplary flow chart of another interface display method based on component reuse provided by an embodiment of the present application. As shown in FIG8 , in some embodiments, S705, determining a second component tree based on the type of the first update component and the reusable components, 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] FIG9 shows an exemplary flow chart of another interface display method based on component reuse provided by an embodiment of the present application. As shown in FIG9 , in some embodiments, S705, determining a second component tree based on the type of the first update component and the reusable components, 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 first updated component in the type 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. The reusable component includes components of component type #1 and component type #2. Then, you can remove components of component type #1 and component type #2 from the reusable component, and then mount the components of component type #1 and component type #2 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] FIG10 shows an exemplary flow chart of another interface display method based on component reuse provided in an embodiment of the present application. As shown in FIG10 , in some embodiments, the method further includes:

[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 a third component tree.

[0240] S709: Display 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] FIG11 shows an exemplary flow chart of another interface display method based on component reuse provided by an embodiment of the present application. As shown in FIG11 , 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 multiple components to the multiple components based on the objects on the native language side.

[0246] In the runtime environment, the electronic device may 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 based on the native language objects. In other words, the electronic device creates runtime objects for the multiple components and the first component tree, and then binds the properties of the multiple components to the multiple components based on the runtime objects.

[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 based on the objects on the native language side. This can mask the differences between different platforms, achieve component rendering consistency on different platforms, and improve code reuse rate.

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

[0249] The plurality of components are created based on an executable file of a 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 the reusable component among the multiple components according to the reuse identifier.

[0252] The present application provides a computer program product that, when executed on an electronic device, enables the electronic device to execute the technical solution in the above embodiment. The implementation principle and technical effects are similar to those of the above method-related embodiments and will not be described in detail here.

[0253] The embodiment of the present application provides a readable storage medium, which contains instructions. When the instructions are executed on 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 present application provides a chip for executing instructions. When the chip is running, the technical solution of the above embodiment is executed. The implementation principle and technical effect are similar and will not be described here.

[0255] Those skilled 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 this application.

[0256] Those skilled in the art will 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 this 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 merely schematic. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, 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 separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[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 functions are implemented in the form of software functional units and sold or used as independent products, they 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 for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0261] The above description is merely a specific implementation of the embodiments of the present application, but the scope of protection of the embodiments of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in the embodiments of the present application should be included in the scope of protection of the embodiments of the present application. Therefore, the scope of protection of the embodiments of the present application should be based on the scope of protection 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, wherein the one or more computer programs include instructions. When the instructions are executed by the one or more processors, the electronic device executes the method as described 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