WO2023241544A1 - 组件预览的方法和电子设备 - Google Patents

组件预览的方法和电子设备 Download PDF

Info

Publication number
WO2023241544A1
WO2023241544A1 PCT/CN2023/099838 CN2023099838W WO2023241544A1 WO 2023241544 A1 WO2023241544 A1 WO 2023241544A1 CN 2023099838 W CN2023099838 W CN 2023099838W WO 2023241544 A1 WO2023241544 A1 WO 2023241544A1
Authority
WO
WIPO (PCT)
Prior art keywords
preview
component
node
rendering
electronic device
Prior art date
Application number
PCT/CN2023/099838
Other languages
English (en)
French (fr)
Inventor
陈本智
兰守忍
李�浩
吴海滨
杨建东
余枝强
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Publication of WO2023241544A1 publication Critical patent/WO2023241544A1/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • Embodiments of the present application relate to the field of electronic equipment, and more specifically, to a method for component preview and an electronic equipment.
  • PC preview is a technology that displays page rendering content in the PC window. This technology does not require connecting multiple physical electronic devices when debugging the UI of multiple electronic devices. Developers can quickly build application UI interfaces for multiple electronic devices through PC preview technology. This can improve the experience of Hongmeng application development, attract more Hongmeng application developers, and further expand the ecosystem of Hongmeng applications.
  • Page preview refers to previewing all components on the entire page.
  • the page can include one or more components.
  • Component preview refers to a separate preview of the components on the page. Developers can view the overall UI effect of the design in real time through page preview, but some component properties in the page will have a greater impact on the layout of other components on the page. When developers configure the properties of a specified component on the page, sometimes they cannot see the expected UI effect of the component. This will cause trouble for developers in their debugging work and make application development less efficient. The current page preview cannot meet the needs of developers for debugging applications.
  • the embodiment of the present application provides a component preview method, which can improve the efficiency of component preview.
  • a method of component preview is provided.
  • the method is applied to an electronic device and includes: determining a first preview component according to a code file.
  • the code file includes a plurality of components, and the first preview component is one of the plurality of components. one; determine a first drawing layer according to the first preview component, the first drawing layer includes a first drawing instruction; determine a first texture picture according to the first drawing instruction.
  • the first preview component is selected from multiple preview components.
  • the operating system compilation tool chain preprocesses the code file, generates an executable file, and treats the components marked @Preview in the code file as is the preview component. Create a separate drawing layer for each preview component, rasterize the drawing instructions in the drawing layer, and then obtain the texture image corresponding to the preview component.
  • the preview component is filtered out, a corresponding drawing layer is created for the preview component, and finally the drawing command in the drawing layer is rasterized to obtain a texture picture. It can improve the efficiency of component preview and make it easier for developers to obtain better component preview effects during the component preview process.
  • a second preview component is determined according to the code file, the second preview component is one of the plurality of components, and the second preview component is the same as the first preview component.
  • the components are different; the second drawing layer is determined according to the second preview component, the second drawing layer is different from the first drawing layer, and the second drawing layer includes a second drawing instruction; determined according to the second drawing instruction Second texture image.
  • the second preview component is another component marked with @Preview in addition to the first preview component in the code file.
  • the electronic device can also process the filtered second preview component and create a drawing layer corresponding to the second preview component.
  • the drawing layer corresponding to the second preview component is different from the drawing layer corresponding to the first preview component.
  • the drawing layers corresponding to different preview components are different, and correspondingly, the drawing instructions corresponding to different preview components are also different. Therefore, the electronic device can rasterize different drawing instructions to obtain different texture pictures.
  • the texture corresponding to the preview component is obtained. picture.
  • the drawing layer corresponding to each preview component can be processed independently, thereby obtaining independent preview results for each preview component. This allows different preview components stacked together to be fully previewed, improving the efficiency of component preview.
  • a first preview picture is displayed according to the first texture picture; or a second preview picture is displayed according to the second texture picture.
  • preview images corresponding to different preview components may be displayed.
  • the preview images corresponding to different preview components are obtained through independent processing. Therefore, when there are multiple components stacked together, each preview component can be processed separately to obtain a final preview image that is independent of each other.
  • determining the first drawing layer according to the first preview component includes: determining a first component node according to the first preview component, and the first component node is Data representing the first preview component; determining a first element node according to the first component node; determining a first rendering node according to the first element node, and the first element node is used to associate the first component node and the third A rendering node; the first rendering layer is determined according to the first rendering node, and the first rendering instruction in the first rendering layer is determined by the first rendering node.
  • the data of the first preview component may be one or more of the properties, events or methods of the first preview component.
  • the data of the first preview component may be used to describe the appearance of the first preview component.
  • the element node corresponding to the first preview component eg, the first element node
  • the rendering node can be used to determine the corresponding drawing layer and drawing instructions, and the drawing instructions can be carried on the drawing layer.
  • Rendering nodes can also be used to maintain the rendering information (or drawing information) of the corresponding preview component, including layout information, drawing instructions, etc.
  • each preview component can be created with corresponding drawing layers and drawing instructions. Because independent drawing layers and drawing instructions are created, preview images of different preview components can be obtained through the component preview method in the embodiment of the present application.
  • the method before determining the first rendering layer according to the first rendering node, the method further includes: determining first layout information according to the first rendering node, The first layout information includes first size information or first position information, and the first drawing layer includes the first layout information.
  • layout information is used to indicate the initial size or position of the preview component.
  • the layout information can be calculated by the electronic device or can be an initial value set by default. Both layout information and drawing information can be in drawing layers.
  • the first preview component is bound to the data of the first preview component; when a change in data of the first preview component is detected, the first preview component is The data change of the preview component determines the second component node; the second element node is determined according to the second component node; the second rendering node is determined according to the second element node, and the second element node is used to associate the second component node and The second rendering node; determine second layout information according to the second rendering node, the second layout information includes second size information or second position information; determine a third rendering layer according to the second rendering node, the third The drawing layer includes a third drawing instruction and the second layout information, and the third drawing instruction is determined by the second rendering node.
  • the component node corresponding to the preview component when the data of the preview component changes, the component node corresponding to the preview component can be re-created, and the corresponding element node, rendering node and layout information can be updated. Then new drawing layers and drawing instructions can be determined based on the updated information. That is to say, when the data of the preview component is detected to change, the relevant drawing information of the preview component can be updated in real time, so that the preview image corresponding to the preview component can be updated in real time as the data changes, allowing developers to dynamically learn about the preview Changes to the component's preview effect.
  • a third texture picture is determined according to the third drawing instruction, and the third texture picture is different from the first texture picture.
  • a third preview picture is displayed according to the third texture picture, and the third preview picture is an updated picture of the first preview picture.
  • a changed texture picture can be obtained, that is, an updated third texture picture can be obtained, so that the updated third preview picture can be displayed.
  • monitoring the data change of the first preview component includes: in response to the developer's operation on the first preview image, associating the data change with the first preview image. A first preview component; when the data change is associated with the first preview component, the data change of the first preview component is monitored.
  • the developer's click operation on the first preview image it can be determined that the data of the first preview component has changed at this time, so that the changed third preview image can be directly obtained on the preview interface.
  • developers can implement dynamic preview for any preview component. For example, a first preview component or a second preview component among multiple preview components.
  • the first drawing layer includes a first canvas, the first canvas includes the first layout information and the first drawing instruction; the third drawing layer A second canvas is included, and the second canvas includes the second layout information and the third drawing instruction.
  • drawing layer corresponding to the preview component may also include a canvas, and layout information and drawing instructions may be recorded on the canvas.
  • an electronic device including: one or more processors; one or more memories; the One or more memories store one or more computer programs.
  • the one or more computer programs include instructions that, when executed by the one or more processors, cause the electronic device to perform the following steps: determine according to the code file A first preview component.
  • the code file includes a plurality of components.
  • the first preview component is one of the plurality of components.
  • a first drawing layer is determined according to the first preview component.
  • the first drawing layer includes a first drawing layer. Instruction; determine the first texture picture according to the first drawing instruction.
  • a second preview component is determined according to the code file, the second preview component is one of the plurality of components, and the second preview component is the same as the first preview component.
  • the components are different; the second drawing layer is determined according to the second preview component, the second drawing layer is different from the first drawing layer, and the second drawing layer includes a second drawing instruction; determined according to the second drawing instruction Second texture image.
  • the electronic device when the instruction is executed by the one or more processors, the electronic device is caused to perform the following steps: display a first preview picture according to the first texture picture; Or display a second preview picture according to the second texture picture.
  • the first drawing layer is determined according to the first preview component, and when the instruction is executed by the one or more processors, the The electronic device performs the following steps: determine a first component node according to the first preview component, the first component node is used to represent data of the first preview component; determine a first element node according to the first component node; The element node determines the first rendering node, and the first element node is used to associate the first component node and the first rendering node; the first rendering layer is determined according to the first rendering node, and the first rendering layer in the The first drawing instruction is determined by the first rendering node.
  • the electronic The device before the first rendering layer is determined according to the first rendering node, when the instruction is executed by the one or more processors, the electronic The device performs the following steps: determining first layout information according to the first rendering node, the first layout information including first size information or first position information, and the first drawing layer including the first layout information.
  • the first preview component is bound to the data of the first preview component; when a change in data of the first preview component is detected, the first preview component is The data change of the preview component determines a second component node; a second element node is determined based on the second component node; a second rendering node is determined based on the second element node, and the second element node is used to associate the second component node with the a second rendering node; determining second layout information according to the second rendering node, the second layout information including second size information or second position information; determining a third rendering layer according to the second rendering node, the third rendering The layer includes a third drawing instruction and the second layout information, and the third drawing instruction is determined by the second rendering node.
  • the electronic device when the instruction is executed by the one or more processors, the electronic device is caused to perform the following steps: determine a third texture picture according to the third drawing instruction, The third texture picture is different from the first texture picture.
  • the electronic device when the instruction is executed by the one or more processors, the electronic device is caused to perform the following steps: display a third preview picture according to the third texture picture, The third preview picture is an updated picture of the first preview picture.
  • the data change of the first preview component is monitored, and when the instruction is executed by the one or more processors, the electronic device performs the following steps: In response to the developer's operation on the first preview image, the data change is associated with the first preview component; when the data change is associated with the first preview component, the data change of the first preview component is monitored.
  • the first drawing layer includes a first canvas, and the first canvas includes the first layout information of the first preview component and the first drawing instruction;
  • the third drawing layer includes a second canvas, and the second canvas includes the second layout information and the third drawing instruction.
  • a computer-readable storage medium includes a computer program or instructions.
  • the computer program or instructions are run on a computer, any possibility of the first aspect and the first aspect is achieved.
  • the implemented method is executed.
  • a computer program product includes a computer program or instructions.
  • the computer program product includes a computer program or instructions.
  • the first aspect and any possible implementation method of the first aspect are implemented. implement.
  • a fifth aspect provides a computer program that, when run on a computer, causes the method in the first aspect and any possible implementation thereof to be executed.
  • Figure 1 is a schematic structural diagram of an electronic device.
  • Figure 2 is a software structure block diagram of an electronic device provided by an embodiment of the present application.
  • Figure 3 is a schematic diagram that does not support dynamic preview of components provided by an embodiment of the present application.
  • FIG. 4 is a schematic diagram of a preview image corresponding to a single component that cannot be fully previewed and displayed independently according to an embodiment of the present application.
  • Figure 5 is a schematic diagram of the Swift UI component preview.
  • Figure 6 is a schematic diagram of the Jetpack Compose component preview.
  • FIG. 7 is a systematic framework diagram of an electronic device provided by an embodiment of the present application.
  • Figure 8 is a module frame diagram of an electronic device provided by an embodiment of the present application.
  • Figure 9 is a schematic flow chart of a component preview method 900 provided by an embodiment of the present application.
  • Figure 10 is a schematic flow chart of another component preview method 1000 provided by an embodiment of the present application.
  • Figure 11 is a schematic diagram of the component preview effect provided by the embodiment of the present application.
  • Figure 12 is a schematic diagram of another component preview effect provided by an embodiment of the present application.
  • Figure 13 is a schematic comparison diagram of the component preview method provided by the embodiment of the present application.
  • Figure 14 is a schematic flow chart of a component preview method 1400 provided by an embodiment of the present application.
  • 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 functions (such as a smart watch) wait.
  • portable electronic devices include, but are not limited to, carrying Or portable electronic devices with other operating systems.
  • the above-mentioned portable electronic device may also be other portable electronic devices, such as a laptop computer (Laptop). It should also be understood that in some other embodiments, the above-mentioned electronic device may not be a portable electronic device, but a desktop computer.
  • FIG. 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 , mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone interface 170D, sensor module 180, button 190, motor 191, indicator 192, camera 193, display screen 194, and Subscriber identification module (SIM) card interface 195, etc.
  • SIM Subscriber identification module
  • the sensor module 180 may include a pressure sensor 180A, a gyro 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, and ambient light. Sensor 180L, bone conduction sensor 180M, etc.
  • the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100 .
  • the electronic device 100 may include more or fewer components than shown in the figures, or some components may be combined, some components may be separated, or some components may be arranged differently.
  • the components illustrated may be implemented in hardware, software, or a combination of software and hardware.
  • the processor 110 may include one or more processing units.
  • the processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processing unit (GPU), and an image signal processor. (image signal processor, ISP), controller, memory, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural-network processing unit (NPU) wait.
  • application processor application processor, AP
  • modem processor graphics processing unit
  • GPU graphics processing unit
  • image signal processor image signal processor
  • ISP image signal processor
  • controller memory
  • video codec digital signal processor
  • DSP digital signal processor
  • baseband processor baseband processor
  • NPU neural-network processing unit
  • different processing units can be independent devices or integrated in one or more processors.
  • the controller may be the nerve center and command center of the electronic device 100 .
  • the controller can generate operation control signals based on the instruction operation code and timing signals to complete the control of fetching and executing instructions.
  • the processor 110 may also be provided with a memory for storing instructions and data.
  • the memory in processor 110 is cache memory. This memory may hold instructions or data that have been recently used or recycled by processor 110 . If the processor 110 needs to use the instructions or data again, it can be called directly from the memory. Repeated access is avoided and the waiting time of the processor 110 is reduced, thus improving the efficiency of the system.
  • processor 110 may include one or more interfaces.
  • Interfaces may include integrated circuits (inter-integrated circuit, I2C) interface, integrated circuit built-in audio (inter-integrated circuit sound, I2S) interface, pulse code modulation (PCM) interface, universal asynchronous receiver/transmitter (UART) ) interface, mobile industry processor interface (MIPI), general-purpose input/output (GPIO) interface, subscriber identity module (SIM) interface, and/or universal serial Bus (universal serial bus, USB) interface, etc.
  • I2C integrated circuits
  • I2S integrated circuit built-in audio
  • PCM pulse code modulation
  • UART universal asynchronous receiver/transmitter
  • MIPI mobile industry processor interface
  • GPIO general-purpose input/output
  • SIM subscriber identity module
  • USB universal serial Bus
  • 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.
  • Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Each antenna in electronic device 100 may 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 LAN. In other embodiments, antennas may be used in conjunction with tuning switches.
  • the mobile communication module 150 can provide solutions for wireless communication including 2G/3G/4G/5G applied on the electronic device 100 .
  • the mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.
  • the mobile communication module 150 can receive electromagnetic waves through the antenna 1, perform filtering, amplification and other processing on the received electromagnetic waves, and transmit them to the modem processor for demodulation.
  • the mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves through the antenna 1 for radiation.
  • at least part of the functional modules of the mobile communication module 150 may be disposed in the processor 110 .
  • at least part of the functional modules of the mobile communication module 150 and at least part of the modules of the processor 110 may be provided in the same device.
  • a modem processor may include a modulator and a demodulator.
  • 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.
  • the application processor outputs sound signals through audio devices (not limited to speaker 170A, receiver 170B, etc.), or displays images or videos through display screen 194.
  • the modem processor may be a stand-alone device.
  • the modem processor may be independent of the processor 110 and may be provided in the same device as the mobile communication module 150 or other functional modules.
  • the wireless communication module 160 can provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) network), Bluetooth (bluetooth, BT), and global navigation satellites.
  • WLAN wireless local area networks
  • System global navigation satellite system, GNSS
  • frequency modulation frequency modulation, FM
  • near field communication technology near field communication, NFC
  • infrared technology infrared, IR
  • the wireless communication module 160 may be one or more devices integrating 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 through the antenna 2 for radiation.
  • 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), broadband Code division multiple access (wideband code division multiple access, WCDMA), Time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and/or IR technology, etc.
  • the GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), Beidou navigation satellite system (BDS), quasi-zenith satellite system (quasi -zenith satellite system (QZSS) and/or satellite based augmentation systems (SBAS).
  • GPS global positioning system
  • GLONASS global navigation satellite system
  • BDS Beidou navigation satellite system
  • QZSS quasi-zenith satellite system
  • SBAS satellite based augmentation systems
  • the electronic device 100 implements display functions through a GPU, a display screen 194, an application processor, and the like.
  • the GPU is an image processing microprocessor and is connected to the display screen 194 and the application processor. GPUs are 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 alter display information.
  • the display screen 194 is used to display images, videos, etc.
  • Display 194 includes a display panel.
  • the display panel can use 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 (active-matrix organic light emitting diode).
  • LCD liquid crystal display
  • OLED organic light-emitting diode
  • AMOLED organic light-emitting diode
  • FLED flexible light-emitting diode
  • Miniled MicroLed, Micro-oLed, quantum dot light emitting diode (QLED), etc.
  • the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.
  • the electronic device 100 can implement the shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, and the like.
  • the ISP is used to process the data fed back by the camera 193. For example, when taking a photo, the shutter is opened, the light is transmitted to the camera sensor through the lens, the optical signal is converted into an electrical signal, and the camera sensor passes the electrical signal to the ISP for processing, and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on image noise, brightness, and skin color. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, the ISP may be provided in the camera 193.
  • Camera 193 is used to capture still images or video.
  • the object passes through the lens to produce an optical image that is projected onto the photosensitive element.
  • the photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor.
  • CMOS complementary metal-oxide-semiconductor
  • the photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to convert it into a digital image signal.
  • ISP outputs digital image signals to DSP for processing.
  • DSP converts digital image signals into standard RGB, YUV and other format image signals.
  • the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.
  • Digital signal processors are used to process digital signals. In addition to digital image signals, they 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.
  • Video codecs are used to compress or decompress digital video.
  • Electronic device 100 may support one or more video codecs. In this way, the electronic device 100 can play or record videos in multiple encoding formats, such as moving picture experts group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.
  • MPEG moving picture experts group
  • MPEG2 MPEG2, MPEG3, MPEG4, etc.
  • NPU is a neural network (NN) computing processor.
  • NN neural network
  • Intelligent cognitive applications of the electronic device 100 can be implemented through the NPU, such as image recognition, face recognition, speech recognition, text understanding, etc.
  • 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 the data storage function. Such as saving music, videos, etc. files in external memory card.
  • Internal memory 121 may be used to store computer executable program code, which includes instructions.
  • the processor 110 executes instructions stored in the internal memory 121 to execute various functional applications and data processing of the electronic device 100 .
  • the internal memory 121 may include a program storage area and a data storage area. Among them, the stored program area can store an operating system, at least one application program required for a function (such as a sound playback function, an image playback function, etc.).
  • the storage data area may store data created during use of the electronic device 100 (such as audio data, phone book, etc.).
  • the internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.
  • the electronic device 100 can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone interface 170D, and the application processor. Such as music playback, recording, etc.
  • 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. Audio module 170 may also be used to encode and decode audio signals. In some embodiments, the audio module 170 may be provided in the processor 110 , or some functional modules of the audio module 170 may be provided in the processor 110 .
  • Speaker 170A also called “speaker” is used to convert audio electrical signals into sound signals.
  • the electronic device 100 can listen to music through the speaker 170A, or listen to hands-free calls.
  • Receiver 170B also called “earpiece” is used to convert audio electrical signals into sound signals.
  • the electronic device 100 answers a call or a voice message, the voice can be heard by bringing the receiver 170B close to the human ear.
  • 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 close to the microphone 170C with the human mouth and input the sound signal to the microphone 170C.
  • the electronic device 100 may be provided with at least one microphone 170C. In other embodiments, the electronic device 100 may be provided with two microphones 170C, which in addition to collecting sound signals, may also implement a 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 sound sources, and implement directional recording functions, etc.
  • the pressure sensor 180A is used to sense pressure signals and can convert the pressure signals into electrical signals.
  • pressure sensor 180A may be disposed on display screen 194 .
  • pressure sensors 180A there are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc.
  • a capacitive pressure sensor may include at least two parallel plates of conductive material.
  • the electronic device 100 determines the intensity of the pressure based on the change in capacitance.
  • the electronic device 100 detects the intensity of the touch operation according to the pressure sensor 180A.
  • the electronic device 100 may also calculate the touched position based on the detection signal of the pressure sensor 180A.
  • touch operations acting on the same touch location but with different touch operation intensities may 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 clock application icon, an instruction to create an alarm clock is executed.
  • Fingerprint sensor 180H is used to collect fingerprints.
  • the electronic device 100 can use the collected fingerprint characteristics to achieve fingerprint unlocking, access to application locks, fingerprint photography, fingerprint answering of incoming calls, etc. For example, when the mobile phone detects the 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 phone can enter the non-lock screen interface from the lock screen interface.
  • Touch sensor 180K also called “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, which is also called a "touch screen”.
  • the touch sensor 180K is used to detect a touch operation on or near the touch sensor 180K.
  • the touch sensor can pass the detected touch operation to the application processor to determine the touch event type.
  • Visual output related to the touch operation may be provided through display screen 194 .
  • the touch sensor 180K may also be disposed on the surface of the electronic device 100 at a location different from that of the display screen 194 .
  • FIG. 2 is a software structure block diagram of the electronic device 100 according to the embodiment of the present application.
  • the layered architecture divides the software into several layers, and each layer has clear roles and division of labor.
  • the layers communicate through software interfaces.
  • the Android system is divided into four layers, from top to bottom: application layer, application framework layer, Android runtime and system libraries, and kernel layer.
  • the application layer can include a series of application packages.
  • the application layer can include cameras, settings, skin modules, user interface (UI), third-party applications, etc.
  • third-party applications can include gallery, calendar, calls, maps, navigation, WLAN, Bluetooth, music, video, short messages, etc.
  • the application framework layer provides an application programming interface (API) and programming framework for applications in the application layer.
  • API application programming interface
  • the application framework layer can include some predefined functions.
  • the application framework layer can include a window manager, content provider, view system, phone manager, resource manager, notification manager, etc.
  • a window manager is used to manage window programs.
  • the window manager can obtain the display size, determine whether there is a status bar, lock the screen, capture the screen, etc.
  • Content providers are used to store and retrieve data and make this data accessible to applications. Said data can include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.
  • the view system includes visual controls, such as controls for displaying text, controls for displaying pictures, etc., such as indication information for prompting a virtual shutter key in the embodiment of the present application.
  • a view system can be used to build applications.
  • the display interface can be composed of one or more views.
  • a display interface including a text message notification icon may include a view for displaying text and a view for displaying pictures.
  • the phone manager is used to provide communication functions of the electronic device 100 .
  • call status management including connected, hung up, etc.
  • the resource manager provides various resources to applications, such as localized strings, icons, pictures, layout files, video files, etc.
  • the notification manager allows applications to display notification information in the status bar, which can be used to convey notification-type messages and can automatically disappear after a short stay without user interaction.
  • the notification manager is used to notify download completion, message reminders, etc.
  • the notification manager can also be notifications that appear in the status bar at the top of the system in the form of charts or scroll bar text, such as notifications for applications running in the background, or notifications that appear on the screen in the form of conversation windows. For example, text information is prompted in the status bar, a beep sounds, the electronic device vibrates, the indicator light flashes, etc.
  • Android runtime includes core libraries and virtual machines. Android runtime is responsible for the scheduling and management of the Android system.
  • the core library contains two parts: one is the functional functions that need to be called by the Java language, and the other is the core library of Android.
  • the application layer and application framework layer run in virtual machines.
  • the virtual machine executes the java files of the application layer and application framework layer into binary files.
  • the virtual machine is used to perform object life cycle management, stack management, and threads Management, security and exception management, as well as garbage collection and other functions.
  • System libraries can include multiple functional modules. For example: surface manager (surface manager), media libraries (media libraries), 3D graphics processing libraries (for example: OpenGL ES), 2D graphics engines (for example: SGL), etc.
  • the surface manager is used to manage the display subsystem and provides the fusion of 2D and 3D layers for multiple applications.
  • 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.
  • the 3D graphics processing library is used to implement 3D graphics drawing, image rendering, composition, and layer processing.
  • 2D Graphics Engine is a drawing engine for 2D drawing.
  • system library can also include status monitoring service modules, etc., such as the physical status recognition module, which is used to analyze and recognize user gestures; the sensor service module, which is used to monitor the sensor data uploaded by various sensors in the hardware layer, and determine the electronic The physical state of device 100.
  • status monitoring service modules such as the physical status recognition module, which is used to analyze and recognize user gestures; the sensor service module, which is used to monitor the sensor data uploaded by various sensors in the hardware layer, and determine the electronic The physical state of device 100.
  • 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.
  • the hardware layer may include various types of sensors, such as the various types of sensors introduced in Figure 1, acceleration sensors, gyroscope sensors, touch sensors, etc. involved in the embodiment of this application.
  • the physical devices involved in the electronic device 100 mainly include sensors, decision support systems (decision support systems, DSS) display chips, touch screens, and fingerprint recognition modules. and other hardware components; as well as screen management module, display driver, fingerprint driver, anti-accidental touch and other kernel software layers; anti-accidental touch input, screen control, screen-off display (always on display, AOD) service, power management and other application framework layers functions; as well as application layer services such as special adaptation applications (camera), third-party applications, system hibernation, and AOD.
  • DSS decision support systems
  • DSS decision support systems
  • DSS decision support systems
  • touch screens touch screens
  • fingerprint recognition modules and other hardware components
  • screen management module display driver, fingerprint driver, anti-accidental touch and other kernel software layers
  • anti-accidental touch input, screen control, screen-off display (always on display, AOD) service power management and other application framework layers functions
  • application layer services such as special adaptation applications (camera), third-party applications, system hibernation, and AOD.
  • component preview is favored by many developers.
  • component preview does not require previewing the entire page. Developers can customize the components that need to be previewed according to actual needs and set the corresponding properties of the components. When previewing these components, the layout of these components will not be affected by other components, and the expected component user interface (UI) preview effect can be obtained.
  • UI component user interface
  • Component preview loads different custom components at runtime.
  • JS Bundle JavaScript Bundle
  • page preview if you need to preview different custom components at the same time, you need to load multiple different JS Bundle files. Therefore, when the preview page contains multiple custom components, component preview will be faster and more efficient than page preview.
  • Swift UI which is a new way of building UI and a new coding style. It can be used for the development of application UI for Apple products such as watchOS, tvOS, macOS, etc., unifying the UI framework of Apple platforms.
  • Jetpack Compose a new toolkit that can be used to build native Android interfaces, which can simplify interface development on Android.
  • APIs application programming interfaces
  • Figure 3 illustrates an inability to support Schematic diagram of dynamic preview of components.
  • the existing solution binds a click event to the text component (for example, as shown in Figure 3, the text content is Component Preview) to modify the text color.
  • the click event is triggered, the text color will not be modified. If you need to modify the font color of the text, you need to recompile the tool chain, generate an executable file, and then regenerate the rendered image.
  • Figure 4 a schematic diagram is shown in which a preview image corresponding to a single component cannot be fully previewed and displayed individually.
  • the picture includes a preview image corresponding to the text component (for example, Flower) and an image corresponding to the image component.
  • the preview images corresponding to these two components are stacked together.
  • the preview image corresponding to the image component includes a white area, which is cropped
  • the preview image corresponding to the text component is left behind.
  • the text component and the image component are displayed on the same layer, and are rasterized together to generate a texture image.
  • the above process will result in the failure to fully display the preview image of the text component and the preview image of the image component.
  • the preview image corresponding to the text component as shown in Figure 4 includes a part of the preview image corresponding to the picture component, the preview image corresponding to the picture component and the preview image corresponding to the text component cannot be previewed completely and separately.
  • FIG. 5 a schematic diagram of a Swift UI component preview is shown. You can define the previewed component content through the PreviewProvider code snippet, calculate the layout of each component on the page, and rasterize all components on the page to generate static images. Then, according to the component layout, the static image corresponding to each component is intercepted from the static image, thereby realizing the preview of a single component.
  • the component preview shown in Figure 5 does not support the preview of multiple stacked components, nor does it support dynamic preview of components.
  • this solution is also limited by the number of preview components.
  • Swift UI component preview only supports previewing 10 components at a time. If there are more than 10 components, a compilation error will be reported. Therefore, for pages containing many components in large applications, the number of components often exceeds 10, and the scenarios for Swift UI component preview applications are more restricted.
  • Jetpack Compose component preview is shown.
  • This solution can define the previewed component content through the code snippet specified by the @Preview annotation, rasterize all components on the page at the same time, generate static images, and then screenshot the static image corresponding to each component according to the layout of the component, and display it on the preview interface.
  • Jetpack Compose component preview is similar to Swift UI component preview. It does not support preview of multiple stacked components, nor does it support dynamic preview of components.
  • the executable file needs to be regenerated, and the component information cannot be dynamically updated in real time, thereby dynamically updating the UI interface of the component, resulting in low component debugging efficiency.
  • this application provides a component preview method that can independently preview multiple stacked components while also dynamically previewing components in real time, thereby improving the efficiency of component preview.
  • the layout process is to calculate the relative space of each rendering node (RenderNode) through various layout algorithms. actual size and location.
  • RenderNode rendering node
  • it will mark itself as a node that needs layout (needLayout), and mark it all the way up to the layout boundary (LayoutParam) and pass it to the child nodes, and the child nodes will calculate the size and position from the bottom up. .
  • Drawing is a deep traversal process that calls the drawing method of each rendering node. At this time, the drawing is only based on the size and position calculated by the layout, and the drawing command of each node is recorded in the current drawing context.
  • drawing can be divided into the following steps: 1. Create a drawing context and provide a canvas that can record drawing commands; 2. Record the drawing commands of the background on the current canvas; 3. Recursively call the drawing method of the child node and record the child node. The drawing command of the node; 4. Record the drawing command of the foreground on the current canvas.
  • Rasterization is the process of converting vertex data into fragments. It has the function of converting a graph into an image composed of rasters. The characteristic is that each element corresponds to a pixel in the frame buffer.
  • the system framework applied in the embodiment of the present application is shown.
  • the system framework may include various modules or units in Figure 7.
  • the main modules are component rasterization and component preview.
  • Component rasterization is responsible for individually rasterizing the drawing instructions in the drawing layer corresponding to the preview component to obtain the texture image, and sending the rasterized result to the previewer for display.
  • Component preview is responsible for obtaining the data needed to preview the component to display texture images, etc.
  • Figure 8 shows the module framework applied in the embodiment of the present application. It mainly includes previewer front-end module, previewer back-end module, application framework management module, declarative JS engine management module, node management module, component state management module, component rasterization module and previewer callback management module.
  • the functions of each of the above modules are introduced below.
  • the previewer front-end module is used to obtain component preview data from the previewer back-end, display the texture image corresponding to the component, process interface events, JS debugging, etc.
  • the previewer back-end module is used to communicate with the UI engine of the application framework, send data acquisition instructions to the UI engine of the application framework, and obtain the texture image corresponding to the preview component rendered by the UI engine of the application framework.
  • the previewer callback management module is used for previewer rendering result callback management, and distributes the results of the rendering component of the UI engine of the application framework to the previewer backend in real time.
  • the application framework management module is used for application framework UI engine initialization, life cycle management, event distribution, loading preview components, routing jumps and graphics library framework (Graphics Library Framework, GLFW) window management, etc.
  • graphics library framework is used to create Open Graphics Library (OpenGL) context, and third-party libraries for operating windows.
  • the declarative JS engine management module is used to initialize the declarative engine instance, load the contents of the JS Bundle, compile it into bytecode, and distribute it to the JS engine for execution, etc.
  • Declarative front-end management module used for page and resource loading, routing jumps, page life cycle management, event interaction with JS engine, etc.
  • the node management module is used to create and manage the component nodes, element nodes, and drawing nodes corresponding to each component.
  • the component node can correspond to one or more items of information such as properties, events or methods of the bound component.
  • Element nodes can connect components and render nodes.
  • Element nodes and component nodes correspond one to one.
  • Render nodes include nodes that can be displayed in the user interface. And because the rendering tree is bound to the information of these nodes, the layout, style, etc. of the user interface can be obtained through the rendering nodes, and the drawing commands can be generated based on the rendering tree to render the user interface.
  • the component state management module is used for event processing, two-way data binding of components, component state updates, and distributing updated data to the UI rendering pipeline of the application framework, etc.
  • the component rasterization module is used to individually rasterize the drawing instructions in the layer corresponding to the component to generate a texture image, and pass the rasterized texture image to the previewer for display.
  • FIG. 9 a schematic flow chart of a component preview method 900 provided by the embodiment of the present application is shown. The method 900 will be described in detail below with reference to FIG. 9 .
  • the previewer backend module registers a callback with the previewer callback management module.
  • the declarative front-end management module sends the tool chain parsed result to the declarative JS engine management module.
  • the declarative JS engine management module sends the style parsing and updated results to the application framework management module.
  • the application framework management module sends the created rendering node to the node management module.
  • the previewer callback management module registers a callback with the application framework management module.
  • the declarative JS engine management module parses the developer's code, that is, the operating system's compilation tool chain preprocesses the code. For example, the decorator @Preview preprocessing.
  • the declarative front-end management module loads the executable file (JS Bundle) of the preview component.
  • the declarative front-end management module sends the parsed results to the application framework management module.
  • the application framework management module binds the components marked with @Preview and registers the rendering texture data callback with the previewer backend module.
  • the application framework management module sends the component and the attribute information of the component to the node management module.
  • the node management module creates component nodes, element nodes and rendering nodes corresponding to components marked with @Preview.
  • the node management module sends the generated drawing instruction and the rasterization result to the component rasterization module.
  • the component rasterization module calls back the acquired texture image to the previewer callback management module.
  • the previewer callback management module distributes the rasterization result to the previewer back-end module.
  • the previewer back-end module sends the texture data to the previewer front-end module.
  • the node management module sends the generated drawing instructions to the component rasterization module.
  • the component rasterizer module determines the texture image based on the drawing instructions.
  • the component rasterization module sends the texture image to the previewer callback management module.
  • the previewer callback management module asynchronously sends the texture image to the previewer back-end module, and the previewer back-end module can send the texture image to the previewer front-end module through IPC.
  • the previewer front-end module completes the on-screen display of preview component images.
  • the above steps are processes in which the data does not change.
  • the rendering nodes and layout corresponding to the preview components are calculated.
  • the preview component is rasterized separately to generate a texture image.
  • the preview image corresponding to the preview component can be displayed independently on the previewer.
  • the declarative JS engine management module monitors data updates.
  • the declarative JS engine management module sends the detected changes in component properties to the component state management module.
  • the component status management module sends the created new component node to the node management module.
  • the node management module sends the updated rendering data to the component rasterization module.
  • the component rasterization module sends the updated rendering data to the previewer callback management module.
  • the previewer callback management module sends the updated rendering data to the previewer backend module.
  • the previewer back-end module sends the updated rendering texture image to the previewer front-end module.
  • the declarative front-end management module learns that the data on the JS side has changed, the component properties change, and the corresponding data binding function (getter/setter function) is triggered. Furthermore, the declarative front-end management module notifies the component status management module of the above learned content.
  • the component state management module associates data with changed components and recreates corresponding component nodes.
  • the component status management module sends the re-created component node to the node management module.
  • the node management module updates the element node information and further sends it to the component rasterization module.
  • the component rasterization module regenerates the drawing instructions, re-rasterizes the drawing instructions, generates updated texture images, and sends the rendered results to the previewer callback management module.
  • the previewer callback management module asynchronously sends the callback to the previewer backend management module.
  • the previewer back-end management module distributes the rendering results (texture images) to the previewer front-end module through IPC communication, and the previewer front-end module completes the update of the preview component image and displays it on the screen.
  • the embodiment of the present application provides a component preview method.
  • you can separately rasterize the drawing instructions corresponding to the preview component (component marked @Preview) to obtain the texture image corresponding to the preview component, and finally display the preview image corresponding to the preview component on the screen.
  • This method can realize independent display of preview images corresponding to multiple stacked components, improving the efficiency of component preview.
  • this method associates components with data. When the data changes, the component nodes associated with the data will be re-created, the element node information and rendering information (rendering data) will be updated, and the corresponding drawing instructions (rendering instructions) will be generated. The regenerated drawing instructions are rasterized to obtain the texture image.
  • This method can realize dynamic preview of the preview component, so that developers can obtain the display effect of the preview component in real time when previewing the component, further improving the efficiency of component preview.
  • this method only needs to calculate the layout and generate drawing instructions for the preview component (the component marked with @Preview), without processing all components of the page. This will avoid other unnecessary previews when processing the preview component. Component impact, which will also increase the speed of component previews.
  • FIG. 10 a schematic flow chart of a component preview method 1000 provided by an embodiment of the present application is shown. The method 1000 will be described in detail below with reference to Figure 10 .
  • the developer's application UI code is compiled through the tool chain.
  • the decorator (@Preview) is parsed and the application UI code is compiled to obtain an executable file.
  • the executable file is a JS Bundle, which contains instruction information on how to build the component interface.
  • node management module in the electronic device binds the properties and methods of the component marked with @Preview and sends it to the entrance of the preview component (for example, loadDocument).
  • the C++ preview component node of the preview component can be generated through the cross-language interface from JS to C++, and the element node can be generated through the preview component.
  • element nodes can be used to connect components and rendering nodes, and are also used for local updates when data changes.
  • each displayable element node will create a corresponding rendering node.
  • Each rendering node corresponds to the display information of a preview component node.
  • Each rendering node is used to maintain the information that the corresponding preview component node needs to use when rendering, including layout, drawing instructions, etc.
  • the data when the data changes, the data is associated with the changed preview component, a new preview component node is re-created for the preview component, and the element node information and the corresponding rendering node information are updated. That is to say, When the data changes, the drawing instructions of the preview component associated with the data also change. At this point, follow the subsequent steps to achieve a dynamic preview of the component.
  • the corresponding drawing context is created in the drawing function of the rendering node corresponding to the preview component, and an independent drawing layer is generated. You can also provide a canvas in the drawing layer, which is used to record the drawing information corresponding to the preview component node.
  • the drawing information can include layout, color, drawing instructions, etc.
  • rasterization processes the drawing instructions corresponding to each preview component node.
  • rasterization processes the drawing instructions in DisplayList.
  • DisplayList is a cache area that caches drawing instructions.
  • the cache area records the sequence of drawing instructions to be executed.
  • the color values of the pixels are generated on a pixel buffer (the pixels may be stored in the texture's computer graphics memory).
  • the texture image corresponding to the preview component node is obtained.
  • the texture image (texture data) can be transmitted to the previewer backend through the callback function.
  • the object of rasterization processing is the drawing instruction corresponding to the preview component node.
  • the drawing instructions can be processed by separate rasterization to generate the texture image corresponding to the preview component.
  • the texture image corresponding to each preview component is also independent.
  • the previewer backend can transmit the texture image corresponding to the preview component to the previewer frontend through IPC communication.
  • the previewer frontend sends texture images (rendered results) to the compositor.
  • the synthesizer further sends the relevant data of the texture image to the frame buffer, and the display can read the relevant data of the texture image from the frame buffer. Finally, the image of the preview component is displayed on the screen.
  • the preview component as a text component as an example to introduce a specific example of a component preview method provided by the embodiment of the present application.
  • the code snippet looks like this:
  • the initial display of the text component is "Good morning".
  • the corresponding data binding function getter/setter function
  • Number associates the new text content to the changed component.
  • the corresponding preview component node is re-created, the information of the element node and the corresponding rendering node are updated, and the drawing instructions are generated.
  • the drawing instruction is re-rasterized to generate an updated texture image, and finally the updated preview image corresponding to the text component is displayed on the interface of the previewer. As shown in the above code, the displayed result is: "Good afternoon”.
  • FIG. 11 shows a schematic diagram of the component preview provided by the embodiment of the present application.
  • the component preview method provided by the embodiment of the present application binds data and components.
  • the data changes for example, when the developer clicks on the preview image corresponding to the preview component
  • the interface update of the preview component will be triggered, and the interface of the preview component will be updated directly.
  • the properties of the preview component can be changed dynamically without recompiling to obtain the executable file.
  • the preview image corresponding to the changed preview component can be directly rendered at runtime.
  • FIG. 12 shows a schematic diagram of another component preview provided by an embodiment of the present application.
  • the preview component is a text component (the content is "Component Preview").
  • the text background color change of the text component is automatically sensed, and the corresponding update range of the minimized preview component is determined, so that the text background color of the text component can be modified in real time.
  • the preview component includes a picture component (the content is landscape) and a text component (the content is "Flowers"). Picture components and text components are stacked. By creating independent drawing layers for picture components and text components respectively, and rasterizing them respectively to obtain texture pictures, the obtained texture pictures are distributed to the previewer, and finally the preview pictures corresponding to the stacked picture components can be displayed individually. Preview image corresponding to the text component.
  • FIG. 13 shows a comparative diagram of two component preview methods.
  • Figure 13(b) shows the component preview method provided by the embodiment of the present application.
  • the steps within the dashed box are the differences between the two methods. Both methods require the developer's code to be compiled to obtain an executable file.
  • the electronic device then processes only the preview component rather than all components. Specifically, the electronic device calculates the layout of the selected preview component, further generates a drawing layer corresponding to the preview component and a corresponding drawing instruction, and rasterizes the drawing instruction to obtain a texture image.
  • the image of the preview component can be displayed independently on the previewer. In the existing solution, all components are drawn on the same layer, and the rasterized object is only the same layer. If you need to display some components, the obtained texture image needs to be cropped. Therefore, the cropped image may not fully display each component.
  • a component preview method 1400 provided by an embodiment of the present application is shown. This method can be applied to the system architecture of the electronic device shown in Figure 8. The detailed steps are as follows:
  • the code file includes multiple components, and the first preview component is one of the multiple components. That is to say, the first preview component is filtered from the multiple components.
  • the operating system compilation tool chain preprocesses the code files and generates executable files (JS Bundle). For example, components marked with @Preview in the code file are regarded as preview components.
  • S1402 Determine the first drawing layer according to the first preview component, and the first drawing layer includes the first drawing instruction.
  • each preview component generates a corresponding drawing layer, that is to say, the drawing layers corresponding to each preview component are independent of each other.
  • the determination of the independent drawing layer clarifies that the subsequent processing objects (drawing instructions on the drawing layer) are also independent, which can further obtain the final preview effect of the complete preview component. This makes the preview results obtained through the component preview method provided by the embodiment of the present application more accurate, and improves the efficiency of component preview for developers.
  • the first component node is determined according to the first preview component, and the first component node is used to represent data of the first preview component; the first element node is determined according to the first component node; and the first element node is determined according to the first element node.
  • Rendering node the first element node is used to associate the first component node and the first rendering node; the first drawing layer is determined according to the first rendering node, and the first drawing instruction in the first drawing layer is determined by the first rendering node of.
  • the data of the first preview component may be one or more of the properties, events or methods of the first preview component.
  • the data of the first preview component may be used to describe the appearance of the first preview component.
  • the element node corresponding to the first preview component (first element node) can be used to create a corresponding rendering node (first rendering node).
  • the rendering node can be used to determine the corresponding drawing layer and drawing instructions, and the drawing instructions can be carried on the drawing layer.
  • Rendering nodes can also be used to maintain the rendering information (or drawing information) of the corresponding preview component, including layout information, drawing instructions, etc.
  • the first layout information is determined according to the first rendering node, the first layout information includes first size information or first position information, and the first drawing layer includes the first layout information.
  • layout information is used to indicate the initial size or position of the preview component.
  • the layout information can be calculated by the electronic device, or it can be an initial value set by default. This application does not specifically limit this. Both layout information and drawing instructions can be in drawing layers.
  • the second preview component is determined according to the code file, the second preview component is one of multiple components, and the second preview component is different from the first preview component; the second drawing layer is determined according to the second preview component, The second drawing layer is different from the first drawing layer in that the second drawing layer includes a second drawing instruction; and the second texture picture is determined according to the second drawing instruction.
  • the second preview component is another component marked with @Preview in addition to the first preview component in the code file.
  • the electronic device will also process the second preview component, and the drawing layer corresponding to the generated second preview component and the drawing layer corresponding to the first preview component are independent drawing layers respectively. In other words, the drawing layers corresponding to different preview components are independent.
  • the electronic device can process the drawing instructions in the independent drawing layer to obtain different texture pictures. Among them, the process of processing drawing instructions to obtain texture images is rasterization.
  • the first preview picture is displayed according to the first texture picture; or the second preview picture is displayed according to the second texture picture.
  • preview images corresponding to different preview components will be displayed.
  • the preview images corresponding to different preview components are not cropped from the same preview image, but are obtained by processing independent drawing layers separately. Therefore, the component preview method provided by the embodiment of the present application can completely display preview images corresponding to different preview components. When multiple components are stacked together, the mutual influence of multiple stacked components can be avoided, so that each stacked component can display a complete and accurate preview image.
  • the first preview component is bound to the data of the first preview component; when the data change of the first preview component is monitored, the second component node is determined according to the data change of the first preview component; according to the first preview component
  • the second component node determines the second element node; the second rendering node is determined according to the second element node, and the second element node is used to associate the second group component node and the second rendering node; determine the second layout information according to the second rendering node, and the second layout information includes second size information or second position information; determine the third rendering layer according to the second rendering node, and the third rendering graph
  • the layer includes a third drawing instruction and second layout information, and the third drawing instruction is determined by the second rendering node.
  • the data change in response to the developer's operation on the first preview image, is associated with the first preview component; when the data change is associated with the first preview component, the data change of the first preview component is monitored.
  • a third texture picture is determined based on the third drawing instruction, and the third texture picture is different from the first texture picture.
  • a third preview picture is displayed according to the third texture picture, and the third preview picture is an updated picture of the first preview picture.
  • the preview component is bound to the data of the component.
  • the component node corresponding to the preview component is re-created, the corresponding element node and rendering node are updated, and the layout information and drawing instructions are further updated. Regenerate the texture image according to the updated drawing instructions to obtain the preview image after the preview component data is updated.
  • element nodes can also be used to update data. That is to say, when the data of the preview component changes, the element node updates the changed data to the rendering node accordingly, realizing the rebinding of the rendering node and the changed data.
  • the first drawing layer includes a first canvas, and the first canvas includes first layout information and a first drawing instruction; the third drawing layer includes a second canvas, and the second canvas includes second layout information and a first drawing instruction.
  • An embodiment of the present application provides a component preview method.
  • a preview component is obtained.
  • the corresponding texture image is displayed.
  • the drawing layer corresponding to each preview component can be processed separately, so that the different preview components stacked together can be fully previewed.
  • the relevant drawing information of the preview component can be updated in real time, thereby obtaining a preview image corresponding to the preview component that can be updated in real time as the data changes. This allows developers to dynamically learn about changes in the preview effect of the preview component.
  • the preview component method in this application only the preview component is processed, and there is no need to process all components on the page. This allows the electronic device to process the layout information or drawing information of the preview component on demand, avoids the impact of components that do not need to be processed on the preview component, and improves the speed and preview effect of component preview.
  • Embodiments of the present application provide a computer program product.
  • the computer program product When the computer program product is run on an electronic device, it causes the electronic device to execute the technical solutions in the above embodiments.
  • the implementation principles and technical effects are similar to the above-mentioned method-related embodiments, and will not be described again here.
  • Embodiments of the present application provide a readable storage medium.
  • the readable storage medium contains instructions.
  • the instructions When the instructions are run on an electronic device, the electronic device executes the technical solutions of the above embodiments.
  • the implementation principles and technical effects are similar and will not be described again here.
  • Embodiments of the present application provide a chip.
  • the chip is used to execute instructions.
  • the technical solutions in the above embodiments are executed.
  • the implementation principles and technical effects are similar and will not be described again here.
  • the disclosed systems, devices and methods can be implemented in other ways.
  • the device embodiments described above are only illustrative.
  • the division of the units is only a logical function division. In actual implementation, there may be other division methods.
  • multiple units or components may be combined or can be integrated into another system, or some features can be ignored, or not implemented.
  • the coupling or direct coupling or communication connection between each other shown or discussed may be through some interfaces, and the indirect coupling or communication connection of the devices or units may be in electrical, mechanical or other forms.
  • 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 they may be distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.
  • each functional unit in each embodiment of the present application can be integrated into one processing unit, each unit can exist physically alone, or two or more units can be integrated into one unit.
  • 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.
  • the technical solutions of the embodiments of the present application are essentially or the part that contributes to the existing technology 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 several instructions to cause a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of this application.
  • the aforementioned storage media include: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), magnetic disk or optical disk and other media that can store program code. .

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例提供了一种组件预览的方法和电子设备，该方法应用于电子设备，包括：根据代码文件确定第一预览组件，代码文件包括多个组件，第一预览组件为多个组件中的一个；根据第一预览组件确定第一绘制图层，第一绘制图层包括第一绘制指令；根据第一绘制指令确定第一纹理图片。本申请提供的组件预览的方法和电子设备，能够完整预览堆叠在一起的组件，并支持组件的动态预览，进而在提高组件预览效率的同时，也能获得更好的组件预览效果。

Description

组件预览的方法和电子设备
本申请要求于2022年6月16日提交中国专利局、申请号为202210721061.1、申请名称为“组件预览的方法和电子设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请实施例涉及电子设备领域，并且更加具体地，涉及一种组件预览的方法和电子设备。
背景技术
当前应用开发者在开发不同电子设备的应用的用户界面(user interface，UI)时，需要连接不同实体的电子设备(例如，手机、平板电脑、电视、汽车或智能手表等)。在需要同时调测多个电子设备的UI时，开发者需要连接多个不同的电子设备。这会使得开发成本增加，开发效率较低。
个人电脑(personal computer，PC)预览是一种将页面渲染内容显示于PC窗口的技术。该技术不需要在调测多个电子设备的UI时，连接多个实体的电子设备。开发者通过PC预览技术可以快速构建多个电子设备的应用UI界面。这能够提升鸿蒙应用开发的体验，可以吸引更多的鸿蒙应用开发者，更进一步拓展鸿蒙应用的生态。
当前PC预览主要分为两类：页面预览和组件预览。页面预览是指预览整个页面上的所有组件，页面可以包括一个或者多个组件。组件预览是指单独预览页面上的组件。开发者可以通过页面预览实时查看所设计的整体UI效果，但页面中的有些组件属性会对页面的其他组件的布局产生较大影响。当开发者在页面中配置指定组件的属性时，有时无法看到组件预期的UI效果。这将对开发者的调测工作带来困扰，使得应用开发的效率较低，当前的页面预览无法满足开发者调测应用的需求。
因此，如何获得一种高效的组件预览的方法，以满足开发者调测应用的需求，是目前亟待解决的问题。
发明内容
本申请实施例提供一种组件预览的方法，该方法可以提高预览组件的效率。
第一方面，提供了一种组件预览的方法，该方法应用于电子设备，包括：根据代码文件确定第一预览组件，该代码文件包括多个组件，该第一预览组件为该多个组件中的一个；根据该第一预览组件确定第一绘制图层，该第一绘制图层包括第一绘制指令；根据该第一绘制指令确定第一纹理图片。
应理解，第一预览组件是从多个预览组件中筛选得到的。示例性的，操作系统编译工具链对代码文件进行预处理，生成可执行文件，将代码文件中标记有@Preview的组件视 为预览组件。为每个预览组件单独创建绘制图层，对绘制图层中的绘制指令进行光栅化处理，进而获得与预览组件对应的纹理图片。
本申请实施例中，通过筛选出预览组件，并对预览组件创建相对应的绘制图层，最终对绘制图层中的绘制命令进行光栅化处理得到纹理图片。能够提高组件预览的效率，更便于开发者在组件预览过程中获得更好的组件预览效果。
结合第一方面，在第一方面的某些实现方式中，根据该代码文件确定第二预览组件，该第二预览组件为该多个组件中的一个，该第二预览组件与该第一预览组件不同；根据该第二预览组件确定第二绘制图层，该第二绘制图层与该第一绘制图层不同，该第二绘制图层包括第二绘制指令；根据该第二绘制指令确定第二纹理图片。
应理解，第二预览组件是代码文件中除了第一预览组件之外，另一标记有@Preview的组件。电子设备也可以对筛选出的第二预览组件进行处理，创建第二预览组件对应的绘制图层。第二预览组件对应的绘制图层和第一预览组件的对应绘制图层是不同的。也就是说，不同的预览组件所对应的绘制图层是不同的，相应的，不同的预览组件对应的绘制指令也是不同的。因此，电子设备可以对不同的绘制指令进行光栅化处理，进而获得不同的纹理图片。
本申请实施例中，通过筛选一个或者多个预览组件，并对每个预览组件生成独立的绘制图层，光栅化每个预览组件对应的绘制图层中的绘制指令，获得预览组件对应的纹理图片。当多个堆叠组件需要预览时，使得每个预览组件对应的绘制图层能够被单独处理，进而获得每个预览组件独立的预览结果。使得堆叠在一起的不同预览组件能够完整预览，提高了组件预览的效率。
结合第一方面，在第一方面的某些实现方式中，根据该第一纹理图片显示第一预览图片；或者根据该第二纹理图片显示第二预览图片。
应理解，在组件预览的界面上，可以显示不同预览组件对应的预览图片。不同预览组件对应的预览图片是通过独立处理所得到的。因此，当具有多个组件堆叠在一起的情况时，能够将各个预览组件分别处理，以得到最终相互独立的预览图片。
本申请实施例中，通过分别对不同预览组件的处理，能够最终得到相互独立的预览图片。这样，能够避免多个组件预览时的相互影响，从而进一步使得每个预览组件都能完整、准确地显示出预览图片。
结合第一方面，在第一方面的某些实现方式中，该根据该第一预览组件确定第一绘制图层，包括：根据该第一预览组件确定第一组件节点，该第一组件节点用于表示该第一预览组件的数据；根据该第一组件节点确定第一元素节点；根据该第一元素节点确定第一渲染节点，该第一元素节点用于关联该第一组件节点和该第一渲染节点；根据该第一渲染节点确定该第一绘制图层，该第一绘制图层中的该第一绘制指令是由该第一渲染节点确定的。
应理解，第一预览组件的数据可以是第一预览组件的属性、事件或者方法中的一项或者多项。第一预览组件的数据可以用来描述第一预览组件的外观。第一预览组件对应的元素节点(例如第一元素节点)可用于创建对应的渲染节点。组件节点、元素节点和渲染节点之间具有对应关系。渲染节点(例如第一渲染节点)可用于确定对应的绘制图层和绘制指令，绘制指令可承载于绘制图层上。渲染节点还可用于维护所对应的预览组件的渲染信息(或者绘制信息)，包括布局信息、绘制指令等。
本申请实施例中，每个预览组件都可以被创建与之对应的绘制图层和绘制指令。正因为创建了独立的绘制图层和绘制指令，通过本申请实施例中的组件预览的方法，能够获得不同预览组件的预览图片。
结合第一方面，在第一方面的某些实现方式中，在该根据该第一渲染节点确定该第一绘制图层之前，该方法还包括：根据该第一渲染节点确定第一布局信息，该第一布局信息包括第一尺寸信息或第一位置信息，该第一绘制图层包括该第一布局信息。
应理解，布局信息用于指示预览组件的初始大小或位置。布局信息可以是电子设备计算得到的，也可以默认设定的初始值。布局信息和绘制信息都可以处于绘制图层中。
结合第一方面，在第一方面的某些实现方式中，将该第一预览组件与该第一预览组件的数据绑定；当监测到该第一预览组件的数据变化时，根据该第一预览组件的数据变化确定述第二组件节点；根据该第二组件节点确定第二元素节点；根据该第二元素节点确定第二渲染节点，该第二元素节点用于关联该第二组件节点和该第二渲染节点；根据该第二渲染节点确定第二布局信息，该第二布局信息包括第二尺寸信息或第二位置信息；根据该第二渲染节点确定第三绘制图层，该第三绘制图层包括第三绘制指令和该第二布局信息，该第三绘制指令是由该第二渲染节点确定的。
本申请实施例中，当预览组件的数据发生变化时，可以重新创建预览组件所对应的组件节点，并更新所对应的元素节点、渲染节点和布局信息。进而能够根据更新之后的信息确定新的绘制图层和绘制指令。也就是说，当监测到预览组件的数据发生变化时，能够对预览组件的相关绘制信息进行实时更新，从而能够随着数据变化，实时更新预览组件对应的预览图片，使得开发者能够动态获知预览组件的预览效果的变化。
结合第一方面，在第一方面的某些实现方式中，根据该第三绘制指令确定第三纹理图片，该第三纹理图片与该第一纹理图片不同。
结合第一方面，在第一方面的某些实现方式中，根据该第三纹理图片显示第三预览图片，该第三预览图片为该第一预览图片更新后的图片。
应理解，当第一预览组件的数据发生变化时，可以获得变化后的纹理图片，也就是获得更新后的第三纹理图片，从而可以显示更新后的第三预览图片。
结合第一方面，在第一方面的某些实现方式中，该监测到该第一预览组件的数据变化，包括：响应于开发者对该第一预览图片的操作，将该数据变化关联到该第一预览组件；当该数据变化关联到该第一预览组件时，监测到该第一预览组件的数据变化。
示例性的，可以通过开发者对第一预览图片的点击操作，确定此时第一预览组件的数据发生变化，从而能够在预览界面直接获得变化后第三预览图片。
应理解，开发者可以对任一预览组件实现动态预览。例如，多个预览组件中的第一预览组件或第二预览组件。
结合第一方面，在第一方面的某些实现方式中，该第一绘制图层包括第一画布，该第一画布包括该第一布局信息和该第一绘制指令；该第三绘制图层包括第二画布，该第二画布包括该第二布局信息和该第三绘制指令。
应理解，预览组件对应的绘制图层上还可以包括画布，画布上可以记录有布局信息和绘制指令。
第二方面，提供了一种电子设备，包括：一个或多个处理器；一个或多个存储器；该 一个或多个存储器存储有一个或多个计算机程序，该一个或多个计算机程序包括指令，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据代码文件确定第一预览组件，该代码文件包括多个组件，该第一预览组件为该多个组件中的一个；根据该第一预览组件确定第一绘制图层，该第一绘制图层包括第一绘制指令；根据该第一绘制指令确定第一纹理图片。
结合第二方面，在第二方面的某些实现方式中，根据该代码文件确定第二预览组件，该第二预览组件为该多个组件中的一个，该第二预览组件与该第一预览组件不同；根据该第二预览组件确定第二绘制图层，该第二绘制图层与该第一绘制图层不同，该第二绘制图层包括第二绘制指令；根据该第二绘制指令确定第二纹理图片。
结合第二方面，在第二方面的某些实现方式中，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第一纹理图片显示第一预览图片；或者根据该第二纹理图片显示第二预览图片。
结合第二方面，在第二方面的某些实现方式中，其特征在于，该根据该第一预览组件确定第一绘制图层，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第一预览组件确定第一组件节点，该第一组件节点用于表示该第一预览组件的数据；根据该第一组件节点确定第一元素节点；根据该第一元素节点确定第一渲染节点，该第一元素节点用于关联该第一组件节点和该第一渲染节点；根据该第一渲染节点确定该第一绘制图层，该第一绘制图层中的该第一绘制指令是由该第一渲染节点确定的。
结合第二方面，在第二方面的某些实现方式中，在该根据该第一渲染节点确定该第一绘制图层之前，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第一渲染节点确定第一布局信息，该第一布局信息包括第一尺寸信息或第一位置信息，该第一绘制图层包括该第一布局信息。
结合第二方面，在第二方面的某些实现方式中，将该第一预览组件与该第一预览组件的数据绑定；当监测到该第一预览组件的数据变化时，根据该第一预览组件的数据变化确定第二组件节点；根据该第二组件节点确定第二元素节点；根据该第二元素节点确定第二渲染节点，该第二元素节点用于关联该第二组件节点和该第二渲染节点；根据该第二渲染节点确定第二布局信息，该第二布局信息包括第二尺寸信息或第二位置信息；根据该第二渲染节点确定第三绘制图层，该第三绘制图层包括第三绘制指令和该第二布局信息，该第三绘制指令是由该第二渲染节点确定的。
结合第二方面，在第二方面的某些实现方式中，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第三绘制指令确定第三纹理图片，该第三纹理图片与该第一纹理图片不同。
结合第二方面，在第二方面的某些实现方式中，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：根据该第三纹理图片显示第三预览图片，该第三预览图片为该第一预览图片更新后的图片。
结合第二方面，在第二方面的某些实现方式中，该监测到该第一预览组件的数据变化，当该指令被该一个或多个处理器执行时，使得该电子设备执行以下步骤：响应于开发者对该第一预览图片的操作，将该数据变化关联到该第一预览组件；当该数据变化关联到该第一预览组件时，监测到该第一预览组件的数据变化。
结合第二方面，在第二方面的某些实现方式中，该第一绘制图层包括第一画布，该第一画布包括该第一预览组件第一布局信息和该第一绘制指令；该第三绘制图层包括第二画布，该第二画布包括该第二布局信息和该第三绘制指令。
第三方面，提供了一种计算机可读存储介质，该计算机可读存储介质包括计算机程序或指令，当该计算机程序或指令在计算机上运行时，使得第一方面及第一方面的任一可能实现的方法被执行。
第四方面，提供了一种计算机程序产品，该计算机程序产品包括计算机程序或指令，当该计算机程序或指令在计算机上运行时，使得第一方面及第一方面的任一可能实现的方法被执行。
第五方面，提供了一种计算机程序，当其在计算机上运行时，使得如第一方面及其任一种可能的实现方式中的方法被执行。
附图说明
图1是一种电子设备的结构示意图。
图2是本申请实施例提供的电子设备的软件结构框图。
图3是本申请实施例提供的一种不支持组件动态预览的示意图。
图4是本申请实施例提供的一种不能单独完整预览显示单个组件对应的预览图片的示意图。
图5是Swift UI组件预览的示意图。
图6是Jetpack Compose组件预览的示意图。
图7是本申请实施例所提供的电子设备的系统化框架图。
图8是本申请实施例提供的电子设备的模块框架图。
图9是本申请实施例提供的一种组件预览的方法900示意性流程图。
图10是本申请实施例提供的另一种组件预览的方法1000示意性流程图。
图11是本申请实施例提供的组件预览效果示意图。
图12是本申请实施例提供的另一组件预览效果示意图。
图13是本申请实施例提供的组件预览方法的对比示意图。
图14是本申请实施例提供的一种组件预览的方法1400示意性流程图。
具体实施方式
下面将结合附图，对本申请实施例中的技术方案进行描述。
以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个、两个或两个以上。术语“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系；例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A、B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。
在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。
以下介绍电子设备、用于这样的电子设备的用户界面、和用于使用这样的电子设备的实施例。在一些实施例中，电子设备可以是还包含其它功能诸如个人数字助理和/或音乐播放器功能的便携式电子设备，诸如手机、平板电脑、具备无线通讯功能的可穿戴电子设备(如智能手表)等。便携式电子设备的示例性实施例包括但不限于搭载 或者其它操作系统的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备，诸如膝上型计算机(Laptop)等。还应当理解的是，在其他一些实施例中，上述电子设备也可以不是便携式电子设备，而是台式计算机。
示例性的，图1示出了电子设备100的结构示意图。电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户身份识别(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。
可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processing unit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。
其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。
处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。
在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路 (inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuit sound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purpose input/output，GPIO)接口，用户身份识别(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。
在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(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-SCDMA)，长期演进(long term evolution，LTE)，BT，GNSS，WLAN，NFC，FM，和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system，GPS)，全球导航卫星系统(global navigation satellite system，GLONASS)，北斗卫星导航系统(beidou navigation satellite system，BDS)，准天顶卫星系统(quasi-zenith satellite system，QZSS)和/或星基增强系统(satellite based augmentation systems，SBAS)。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emitting diode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot light emitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。
电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。
ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点，亮度，肤色进行算法优化。ISP还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或N个摄像头193，N为大于1的正整数。
数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1，MPEG2，MPEG3，MPEG4等。
NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别，人脸识别，语音识别，文本理解等。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。
电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。
音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。
扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐，或收听免提通话。
受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时，可以通过将受话器170B靠近人耳接听语音。
麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中，电子设备100可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。
压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如，当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于闹钟应用图标时，执行新建闹钟的指令。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。例如，当手机在锁屏界面检测到用户的触控操作时，手机可以通过指纹传感器180H采集用户的指纹信息，并通过采集的指纹信息与手机中预置的指纹信息进行匹配。若匹配成功，则手机可以从锁屏界面进入非锁屏界面。
触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。
图2是本申请实施例的电子设备100的软件结构框图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。应用程序层可以包括一系列应用程序包。
如图2所示，应用程序层可以包括相机、设置、皮肤模块、用户界面(user interface，UI)、三方应用程序等。其中，三方应用程序可以包括图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface，API)和编程框架。应用程序框架层可以包括一些预先定义的函数。
如图2所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。
视图系统包括可视控件，例如显示文字的控件，显示图片的控件等，例如本申请实施例中的用于提示虚拟快门键的指示信息等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。
Android runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。
核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程 管理，安全和异常的管理，以及垃圾回收等功能。
系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(media libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。
三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
此外，系统库还可以包括状态监测服务模块等，例如物理状态识别模块，用于对用户手势进行分析和识别；传感器服务模块，用于对硬件层各类传感器上传的传感器数据进行监测，确定电子设备100的物理状态。
内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。
硬件层可以包括各类传感器，例如图1中介绍的各类传感器，在本申请实施例中涉及的加速度传感器、陀螺仪传感器、触摸传感器等。
结合以上图1和图2介绍的电子设备，在本申请实施例中，电子设备100涉及的物理器件主要包括传感器、决策支持系统(decision support systems，DSS)显示芯片、触摸显示屏、指纹识别模块等硬件组件；以及屏幕管理模块、显示驱动、指纹驱动、防误触等内核软件层；防误触输入、屏幕控制、灭屏显示(always on display，AOD)服务、电源管理等应用程序框架层功能；以及特殊适配应用(camera)、三方应用、系统休眠、AOD等应用层业务。
组件预览作为当前PC(personal computer)预览的一种，受到较多开发者的青睐。一方面，组件预览无需预览整个页面，开发者可根据实际需要，自定义需要预览的组件，并设置组件所对相应的属性。当预览这些组件时，这些组件的布局不会受到其他组件的影响，能够得到预期的组件用户界面(user interface，UI)预览效果。这种组件预览的方式，相比于页面预览，具有更好的开发调试效率，开发者可以更加方便地调试应用UI界面。
另一方面，组件预览是运行时加载不同的自定义组件。能够基于一个JavaScript Bundle(JS Bundle)文件，同时完成多个自定义组件预览。相比于页面预览，如果需要同时预览不同的自定义组件，则需要加载多个不同的JS Bundle文件。因此，当预览页面中包含多个自定义组件时，组件预览相比与页面预览的速度会更快，更有效率。
下面介绍两种预览组件的方式。其一是Swift UI，这是一种新的构件UI的方式和全新的编码风格。可用于watchOS、tvOS、macOS等苹果旗下产品的应用UI的开发，统一了苹果平台的UI框架。其二是Jetpack Compose，可用于构建原生Android界面的新工具包，可简化Android上的界面开发。能够使用更少的代码、强大的工具和直观的应用程序接口(application programming interface，API)，快速构建UI。
一方面，上述两种预览调测工具只能对组件进行静态预览，如果需要支持动态预览，需要工具链重新编译，渲染引擎重新进行渲染。可见，上述两种预览调测工具不支持预览组件的动态更新，开发者体验感较差，开发调试的效率较低。如图3示出了一种不能支持 组件动态预览的示意图。现有方案在文本组件(例如图3所示，文本内容为Component Preview)绑定一个点击事件，用以修改文本颜色。当点击事件触发后，不会修改文本颜色。如果需要修改文本的字体颜色，需要工具链重新编译，生成可执行文件，再重新生成渲染图片。
另一方面，Swift UI和Jetpack Compose都是光栅化页面中的所有组件和组件布局。当通过光栅化页面中所有组件以及组件布局来裁剪组件图片，这会导致无法完整预览堆叠在一起的组件。如图4所示，示出一种不能单独完整预览显示单个组件对应的预览图片的示意图。图中包括文本组件对应的预览图片(例如，Flower)和图片组件对应的图片，这两个组件对应的预览图片堆叠在一起，图片组件对应的预览图片中包括一块白色区域，该区域是裁剪出文本组件对应的预览图片所留下的。由于文本组件和图片组件在同一图层进行显示，并且一起经过光栅化处理后生成了纹理图片。上述过程会导致无法完整显示出文本组件的预览图片和图片组件的预览图片。又因为如图4所示的文本组件对应的预览图片包含了图片组件对应的预览图片的一部分，进而无法完整单独地预览出图片组件对应的预览图片和文本组件对应的预览图片。
为了便于理解，下面更进一步介绍以上两种组件预览的方案。如图5所示，示出了Swift UI组件预览的示意图。可以通过PreviewProvider代码片段定义预览的组件内容，计算页面上每个组件的布局，并且光栅化该页面上的所有组件，生成静态图像。随后根据组件布局，从静态图像中截取每个组件所对应的静态图片，从而实现对单个组件的预览。显然，图5示出的组件预览不支持多个堆叠组件的预览，也不支持对组件的动态预览。另外，该方案还受到预览组件个数的限制。通常而言，Swift UI组件预览一次性仅支持同时预览10个组件，超过10个组件时会编译报错。因此，对于大型应用中包含较多组件的页面，组件的个数往往超过10个，Swift UI组件预览应用的场景受到较多限制。
如图6所示，示出了Jetpack Compose组件预览的示意图。该方案可以通过@Preview注解指定的代码片段定义预览的组件内容，同时光栅化页面上所有组件，生成静态图像、随后根据组件的布局，截图每个组件对应的静态图像，显示在预览界面上。显然，Jetpack Compose组件预览与Swift UI组件预览类似，也不支持对多个堆叠组件的预览，也不支持对组件的动态预览。当组件的数据发生变化时，需要重新生成可执行文件，不能实时动态更新组件的信息，从而动态更新组件的UI界面，从而具有较低的组件调试效率。
综上所述，针对现有组件预览方案存在的问题，本申请提供一种组件预览的方法，在能够独立预览多个堆叠组件的同时，还能实时动态预览组件，进而提高组件预览的效率。
以下，对本申请实施例中的部分用语进行解释说明，以便于本领域技术人员理解。
组件动态预览
在预览器界面，可在预览器中操作应用的交互动作，例如点击事件，与应用运行在真机电子设备上的交互体验一致。
JS Bundle
是应用开发者编写的JS应用程序打包后获得的文件，包括如何构件组件界面的指令流。
布局
布局的过程是通过各类布局的算法，计算出每个渲染节点(RenderNode)在相对空间 上真实的大小和位置。当某个节点的内容发生变化时，就会标记自己为需要布局(needLayout)的节点，并一直向上标记到布局边界(LayoutParam)传给子节点，子节点自底向上据此计算得到大小和位置。
绘制
绘制是一个深度遍历的过程，遍历调用每个渲染节点的绘制方法，此时的绘制只是根据布局算出来的大小和位置，在当前绘制的上下文记录每个节点的绘制命令。
对于每个节点，绘制可分为以下步骤：1、创建绘制上下文，提供可以记录绘制命令的画布；2、在当前画布上记录背景的绘制命令；3、递归调用子节点的绘制方法，记录子节点的绘制命令；4、在当前的画布上记录前景的绘制命令。
光栅化
光栅化是将顶点数据转换为片元的过程，具有将图转化为一个个栅格组成的图像的作用，特点是每个元素对应帧缓冲区的像素。
如图7所示，示出了本申请实施例所应用的系统框架。该系统框架可以包括图7中的各个模块或者单元。其中，主要的模块为组件光栅化和组件预览。组件光栅化负责对预览组件对应的绘制图层中的绘制指令单独进行光栅化处理，用以获得纹理图片，并将光栅化处理之后的结果发送至预览器显示。组件预览负责获得预览组件所需要的数据，从而显示纹理图片等。
为了便于理解，图8示出了本申请实施例所应用的模块框架。主要包括预览器前端模块、预览器后端模块、应用框架管理模块、声明式JS引擎管理模块、节点管理模块、组件状态管理模块、组件光栅化模块和预览器回调管理模块。下面分别对上述各个模块的功能进行介绍。
预览器前端模块，用于从预览器后端获取组件预览数据，显示组件对应的纹理图片、处理界面事件、JS调试等。
预览器后端模块，用于与应用框架的UI引擎通讯，发送获取数据指令给应用框架的UI引擎，获取应用框架UI引擎渲染的预览组件对应的纹理图片，进程间通讯(inter process communication，IPC)等。
预览器回调管理模块，用于预览器渲染结果回调管理，将应用框架的UI引擎的渲染组件的结果实时分发给预览器后端。
应用框架管理模块，用于应用框架UI引擎初始化，生命周期管理，事件分发，加载预览组件，路由跳转和图形库框架(Graphics Library Framework，GLFW)窗口管理等，其中，图形库框架用于创建开放图形库(Open Graphics Library，OpenGL)上下文，以及操作窗口的第三方库。
声明式JS引擎管理模块，用于初始化声明式引擎实例，加载JS Bundle的内容，编译成字节码，并分发给JS引擎执行等。
声明式前端管理模块，用于页面和资源加载，路由跳转，页面生命周期管理，事件与JS引擎交互等。
节点管理模块，用于创建和管理每个组件对应的组件节点，元素节点，绘制节点。其中，组件节点可以对应绑定组件的属性、事件或方法等信息中的一项或多项。元素节点可以联结组件和渲染节点。元素节点和组件节点一一对应。当组件节点出现数据变化后，元 素节点可以将该节点变化后的数据对应更新到渲染树中对应的节点，实现将渲染树中节点和数据的重新绑定，进而可以基于更新后的渲染树渲染出变化后的用户界面。渲染节点中包括可显示在用户界面的节点。并且由于渲染树绑定了这些节点的信息，通过渲染节点可获取用户界面的布局、样式等，可基于渲染树生成绘制命令渲染出用户界面。
组件状态管理模块，用于事件处理，组件的双向数据绑定、组件状态更新，并将更新的数据分发给应用框架的UI渲染管线等。
组件光栅化模块，用于对组件对应的图层中的绘制指令单独进行光栅化生成纹理图片，并将光栅化生成的纹理图片传给预览器进行显示。
如图9所示，示出了本申请实施例提供的一种组件预览的方法900示意性流程图。下面结合图9，对该方法900进行详细描述。
S901，预览器后端模块向预览器回调管理模块注册回调。
S902，声明式前端管理模块将工具链解析后的结果发送至声明式JS引擎管理模块。
S903，声明式JS引擎管理模块将样式解析及更新后的结果发送至应用框架管理模块。
S904，应用框架管理模块将创建的渲染节点发送至节点管理模块。
S905，预览器回调管理模向应用框架管理模块注册回调。
应理解，当开启组件预览时，声明式JS引擎管理模块将开发者的代码进行解析，也就是操作系统的编译工具链对代码进行预处理。示例性的，装饰器@Preview预处理。声明式前端管理模块加载出预览组件的可执行文件(JS Bundle)。声明式前端管理模块将解析后的结果发送至应用框架管理模块。应用框架管理模块将标记有@Preview的组件进行绑定，并向预览器后端模块注册渲染纹理数据回调。应用框架管理模块将组件和组件的属性信息发送至节点管理模块。节点管理模块创建标记有@Preview的组件所对应的组件节点、元素节点和渲染节点。
S906，节点管理模块将生成的绘制指令及光栅化处理后的结果发送至组件光栅化模块。
S907，组件光栅化模块向预览器回调管理模块回调获取的纹理图片。
S908，预览器回调管理模块将光栅化结果分发给预览器后端模块。
S909，预览器后端模块将纹理数据发送至预览器前端模块。
示例性的，节点管理模块将生成的绘制指令发送至组件光栅化模块。组件光栅化模块根据绘制指令确定纹理图片。进而，组件光栅化模块将纹理图片发送至预览器回调管理模块。预览器回调管理模块将纹理图片异步发送至预览器后端模块，预览器后端模块可以通过IPC将纹理图片发送至预览器前端模块。预览器前端模块完成预览组件图片的上屏显示。
需要说明的是，上述步骤为数据未发生变化的过程。根据实际需要预览的组件，计算出预览组件对应的渲染节点和布局。并对预览组件单独进行光栅化处理，生成纹理图片。最后在预览器上可以独立显示预览组件对应的预览图片。当数据发生变化时，电子设备可执行后续步骤，以实现动态预览组件。
S910，声明式JS引擎管理模块监测数据更新。
S911，声明式JS引擎管理模块将检测到的组件属性的变化发送至组件状态管理模块。
S912，组件状态管理模块将创建的新的组件节点发送至节点管理模块。
S913，节点管理模块将更新后的渲染数据发送至组件光栅化模块。
S914，组件光栅化模块将更新后的渲染数据发送至预览器回调管理模块。
S915，预览器回调管理模块将更新后的渲染数据发送至预览器后端模块。
S916，预览器后端模块将更新后的渲染纹理图片发送至预览器前端模块。
示例性的，当开发者点击预览组件绑定的区域时，声明式前端管理模块获知JS侧的数据发生了变化，组件属性更改，触发相应的数据绑定函数(getter/setter函数)。进而，声明式前端管理模块将上述获知的内容通知组件状态管理模块。组件状态管理模块将数据关联至变化的组件，并且重新创建对应的组件节点。组件状态管理模块将重新创建的组件节点发送至节点管理模块。节点管理模块更新元素节点信息，并进一步发送至组件光栅化模块。组件光栅化模块重新生成绘制指令，重新对绘制指令进行光栅化，生成更新后的纹理图片，并将渲染之后的结果发送至预览器回调管理模块。预览器回调管理模块异步发送至预览器后端管理模块。最后，预览器后端管理模块将渲染结果(纹理图片)通过IPC通讯分发至预览器前端模块，预览器前端模块完成预览组件的图片的更新上屏显示。
可见，本申请实施例提供一种组件预览的方法。其一，可以通过对预览组件(标记有@Preview的组件)对应的绘制指令进行单独光栅化处理，进而获取预览组件对应的纹理图片，最后实现对预览组件对应的预览图片的上屏显示。该方法可以实现堆叠的多个组件对应的预览图片的独立显示，提高了组件预览的效率。其二，该方法将组件与数据关联，当数据发生变化，会重新创建与数据关联的组件节点，并且更新元素节点信息和渲染信息(渲染数据)，生成对应的绘制指令(渲染指令)，对重新生成的绘制指令进行光栅化处理获得纹理图片。该方法可以实现对预览组件的动态预览，使得开发者在预览组件时能够实时获得预览组件的显示效果，进一步提高了组件预览的效率。其三，该方法可以只需要对预览组件(标记有@Preview的组件)计算布局，并生成绘制指令，无需对页面的所有组件都进行处理，这样会避免处理预览组件时受到其他不必要预览的组件的影响，这也会提高组件预览的速度。
如图10所示，示出了本申请实施例提供的一种组件预览的方法1000示意性流程图。下面结合图10，对该方法1000进行详细描述。
S1001，生成可执行文件。
应理解，将开发者的应用UI代码通过工具链，进行编译。示例性的，对装饰器(@Pr eview)进行解析，编译应用UI代码获得可执行文件。例如，可执行文件为JS Bundle，包含如何构建组件界面的指令信息。
S1002，绑定预览组件。
应理解，电子设备中的节点管理模块将标记有@Preview的组件进行属性，方法的绑定，并发送至预览组件的入口(例如，loadDocument)。
S1003，确定组件节点、元素节点和渲染节点。
应理解，可以通过JS到C++的跨语言接口生成预览组件的C++预览组件节点，并通过预览组件生成元素节点。其中，元素节点可用于联结组件和渲染节点，还用于数据变化时的局部更新。通常而言，每个可显示的元素节点会创建对应的渲染节点。每个渲染节点对应一个预览组件节点的显示信息，每个渲染节点用于维护所对应的预览组件节点在渲染时所需要用到的信息，包括布局、绘制指令等。
示例性的，当数据发生变化时，将数据关联至发生变化的预览组件，并对该预览组件重新创建新的预览组件节点，并更新元素节点信息和对应的渲染节点的信息。也就是说， 当数据发生变化时，与数据关联的预览组件的绘制指令也会发生变化。此时，接着执行后续步骤，便可实现对组件的动态预览。
S1004，生成独立的绘制图层。
应理解，在预览组件对应的渲染节点的绘制函数中创建对应的绘制上下文，并生成独立的绘制图层。还可以在绘制图层中提供一个画布，该画布用于记录该预览组件节点对应的绘制信息，绘制信息可以包括布局、颜色、绘制指令等。
S1005，光栅化绘制指令。
应理解，光栅化处理每个预览组件节点对应的绘制指令。具体的，光栅化处理DisplayList中的绘制指令。其中，DisplayList是一个缓存绘制指令的缓存区，该缓存区记录了将要执行的绘制指令序列。示例性的，在像素缓冲区上生成像素的颜色值(像素可以保存在纹理的计算机图形内存中)。光栅化处理后得到预览组件节点所对应的纹理图片。进一步触发预览器回调事件，可以通过回调函数，将纹理图片(纹理数据)传输至预览器后端。
应理解，光栅化处理的对象为预览组件节点对应的绘制指令。首先，并不是对所有的组件都进行光栅化处理，仅对开发者需要预览的组件进行光栅化处理。其次，由于每个预览组件节点会有相对应的渲染节点，因此绘制指令也是与预览组件一一对应的。因此可以通过单独光栅化处理绘制指令，从而生成与预览组件对应的纹理图片。每个预览组件所对应的纹理图片也是独立的。
S1006，显示预览组件的图片。
应理解，预览器后端可以通过IPC通讯将预览组件对应的纹理图片传输至预览器前端。预览器前端将纹理图片(渲染结果)发送至合成器。合成器进一步将纹理图片的相关数据发送至帧缓存区，显示器便可以从帧缓存区中读取纹理图片的相关数据，最后，将预览组件的图片显示在屏幕上。
为了方便理解，下面以预览组件为文字组件为例，介绍了本申请实施例提供的一种组件预览方法的具体实例。代码段如下所示：
上述代码段中存在一个文本组件，该文本组件的初始显示为“Good morning”。当开发者点击该预览的文本组件对应的预览图片时，会触发相应的数据绑定函数(getter/setter函 数)将新的文本内容关联到该变化的组件上。同时，重新创建了与之对应的预览组件节点，更新了元素节点的信息和对应的渲染节点的信息，并生成了绘制指令。对该绘制指令重新进行光栅化处理，生成更新后的纹理图片，最终将更新好的该文本组件对应的预览图片显示在预览器的界面上。如上段代码所示，显示结果为：“Good afternoon”。
为了方便理解，图11示出了本申请实施例提供的组件预览的效果示意图。当开发者点击文本组件对应的预览图片(内容为“Flowers”)时，该文本的字体会变大，直接显示在预览的界面上。可见，本申请实施例提供的组件预览的方法，通过数据与组件的绑定，当数据发生变化时(例如，通过开发者点击预览组件对应的预览图片)，会触发预览组件的界面更新，直接显示出更新之后预览组件对应的预览图片。可以动态更改预览组件的属性，无需重新编译获得可执行文件，能够在运行时直接渲染出改变属性后的预览组件对应的预览图片。
为了方便理解，图12示出了本申请实施例提供的另一组件预览的效果示意图。如图12(a)所示，预览组件为文本组件(内容为“Component Preview”)。当监测到数据发生变化时，实现该文本组件的文本底色变化的自动感知，并且确定出相应的最小化预览组件的更新范围，可以实时修改文本组件的文本底色。如图12(b)所示，预览组件包括图片组件(内容为风景图)和文本组件(内容为“Flowers”)。图片组件与文字组件堆叠。通过分别对图片组件和文字组件创建独立的绘制图层，并分别进行光栅化处理得到纹理图片，将得到的纹理图片分发至预览器，最后能够单独显示出堆叠在一起的图片组件对应的预览图片和文字组件对应的预览图片。
更进一步地，为了便于理解本申请实施例提供的组件预览方法的进一步改进，图13示出了两种组件预览方法的对比示意图。其中，图13(b)示出了本申请实施例提供的组件预览方法。虚线框内的步骤是两种方法的不同之处。这两种方法均需要对开发者的代码进行编译，以获得可执行文件。随后，电子设备仅对预览组件进行处理，而非对所有组件都进行处理。具体的，电子设备计算筛选出的预览组件的布局，并进一步生成预览组件对应的绘制图层以及相应的绘制指令，对该绘制指令进行光栅化处理从而得到纹理图片。最终，能够在预览器上独立显示预览组件的图片。而现有方案中所有的组件绘制在同一图层，光栅化的对象也仅是该同一图层，如果需要显示部分组件，则需要将获得的纹理图片进行裁剪。因此，裁剪之后的图片可能会出现无法完整显示各个组件的问题。
如图14所示，示出了本申请实施例提供的一种组件预览的方法1400，该方法可应用于如图8所示的电子设备的系统架构中，详细步骤如下：
S1401，根据代码文件确定第一预览组件。
应理解，代码文件中包括多个组件，第一预览组件为多个组件中的一个，也就是说，第一预览组件是从多个组件中筛选得到的。操作系统编译工具链对代码文件进行预处理，生成可执行文件(JS Bundle)。示例性的，将代码文件中标记有@Preview的组件视为预览组件。
需要说明的是，从代码文件的多个组件中筛选出预览组件，从而仅需要对预览组件执行后续的处理，能够提高组件预览的速度和效率。同时，也可以尽量避免其他不需要预览组件被处理时，对预览组件处理过程造成的影响，能够提高组件预览的效果。
S1402，根据第一预览组件确定第一绘制图层，第一绘制图层包括第一绘制指令。
应理解，每个预览组件会生成相应的绘制图层，也就是说，每个预览组件对应的绘制图层是相互独立的。独立绘制图层的确定，明确了后续处理的对象(绘制图层上的绘制指令)也是独立的，能够更进一步获得完整的预览组件的最终预览效果。使得通过本申请实施例提供的组件预览方法获得的预览结果更加准确，提升了开发者组件预览的效率。
在一些实施例中，根据第一预览组件确定第一组件节点，第一组件节点用于表示第一预览组件的数据；根据第一组件节点确定第一元素节点；根据第一元素节点确定第一渲染节点，第一元素节点用于关联第一组件节点和第一渲染节点；根据第一渲染节点确定第一绘制图层，第一绘制图层中的第一绘制指令是由第一渲染节点确定的。
应理解，第一预览组件的数据可以是第一预览组件的属性、事件或方法中的一项或者多项。第一预览组件的数据可以用来描述第一预览组件的外观。第一预览组件对应的元素节点(第一元素节点)可用于创建对应的渲染节点(第一渲染节点)。组件节点、元素节点和渲染节点之间具有对应关系。渲染节点可以用于确定对应的绘制图层和绘制指令，绘制指令可承载于绘制图层上。渲染节点还可以用于维护所对应的预览组件的渲染信息(或者绘制信息)，包括布局信息、绘制指令等。
在一些实施例中，根据第一渲染节点确定第一布局信息，第一布局信息包括第一尺寸信息或第一位置信息，第一绘制图层包括第一布局信息。
应理解，布局信息用于指示预览组件的初始大小或者位置。布局信息可以是电子设备计算得到的，也可以是默认设定的初始值。本申请对此不作具体限定。布局信息和绘制指令都可以处于绘制图层中。
S1403，根据第一绘制指令确定第一纹理图片。
在一些实施例中，根据代码文件确定第二预览组件，第二预览组件为多个组件中的一个，第二预览组件与第一预览组件不同；根据第二预览组件确定第二绘制图层，第二绘制图层与第一绘制图层不同，第二绘制图层包括第二绘制指令；根据第二绘制指令确定第二纹理图片。
应理解，第二预览组件是代码文件中除了第一预览组件之外，另一标记有@Preview的组件。电子设备也会对第二预览组件进行处理，生成的第二预览组件对应的绘制图层，与第一预览组件对应的绘制图层分别是独立的绘制图层。也就是说，不同预览组件对应的绘制图层是独立的。电子设备可以对独立绘制图层中的绘制指令进行处理，用以获得不同的纹理图片。其中，对绘制指令进行处理，用以获得纹理图片的过程是光栅化。
在一些实施例中，根据所第一纹理图片显示第一预览图片；或者根据第二纹理图片显示第二预览图片。
应理解，在组件预览的界面上，会显示不同预览组件对应的预览图片。不同预览组件对应的预览图片不是从同一预览图片上裁剪而成的，而是对独立的绘制图层分别处理得到的。因此，本申请实施例提供的组件预览的方法，能够完整显示不同预览组件对应的预览图片。当具有多个组件堆叠在一起的情况时，能够避免多个堆叠组件的相互影响，使得每个堆叠的组件都能完整、准确地显示出预览图片。
在一些实施例中，将第一预览组件与第一预览组件的数据绑定；当监测到第一预览组件的数据变化时，根据第一预览组件的数据变化确定述第二组件节点；根据第二组件节点确定第二元素节点；根据第二元素节点确定第二渲染节点，第二元素节点用于关联第二组 件节点和第二渲染节点；根据第二渲染节点确定第二布局信息，第二布局信息包括第二尺寸信息或第二位置信息；根据第二渲染节点确定第三绘制图层，第三绘制图层包括第三绘制指令和第二布局信息，第三绘制指令是由第二渲染节点确定的。
在一些实施例中，响应于开发者对第一预览图片的操作，将数据变化关联到第一预览组件；当数据变化关联到第一预览组件时，监测到第一预览组件的数据变化。
在一些实施例中，根据第三绘制指令确定第三纹理图片，第三纹理图片与第一纹理图片不同。
在一些实施例中，根据第三纹理图片显示第三预览图片，第三预览图片为第一预览图片更新后的图片。
应理解，预览组件与该组件的数据进行绑定。当该预览组件的数据发生变化时，重新创建该预览组件对应的组件节点，并更新所对应的元素节点和渲染节点，进一步更新布局信息和绘制指令。根据更新后的绘制指令重新生成纹理图片，从而获得预览组件数据更新之后的预览图片。
需要说明的是，元素节点还可以用于数据的更新。也就是说，当发生预览组件的数据变化时，元素节点将变化后的数据对应更新至渲染节点，实现渲染节点和变化后数据的重新绑定。
在一些实施例中，第一绘制图层包括第一画布，第一画布包括第一布局信息和第一绘制指令；第三绘制图层包括第二画布，第二画布包括第二布局信息和第三绘制指令。
本申请实施例提供的一种组件预览的方法，通过筛选预览组件，并对每个预览组件生成独立绘制图层，光栅化每个预览组件对应的独立绘制图层中的绘制指令，获得预览组件对应的纹理图片并进行显示。当多个堆叠组件需要预览时，能够分别对每个预览组件对应的绘制图层进行处理，进而能够完整预览堆叠在一起的不同预览组件。此外，还可以通过预览组件与数据的绑定，当监测到数据发生变化时，对预览组件的相关绘制信息进行实时更新，从而获得能够随着数据变化，实时更新的预览组件对应的预览图片。使得开发者能够动态获知预览组件的预览效果的变化。更进一步地，由于本申请中的预览组件的方法，仅对预览组件进行处理，不需要对页面上所有组件都进行处理。这使得电子设备可以按需处理预览组件的布局信息或绘制信息，也能够避免不需要处理的组件对预览组件的影响，能够提高组件预览的速度和预览效果。
本申请实施例提供一种计算机程序产品，当所述计算机程序产品在电子设备运行时，使得电子设备执行上述实施例中的技术方案。其实现原理和技术效果与上述方法相关实施例类似，此处不再赘述。
本申请实施例提供一种可读存储介质，所述可读存储介质包含指令，当所述指令在电子设备运行时，使得所述电子设备执行上述实施例的技术方案。其实现原理和技术效果类似，此处不再赘述。
本申请实施例提供一种芯片，所述芯片用于执行指令，当所述芯片运行时，执行上述实施例中的技术方案。其实现原理和技术效果类似，此处不再赘述。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可 以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请实施例的范围。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请实施例的具体实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请实施例的保护范围之内。因此，本申请实施例的保护范围应以所述权利要求的保护范围为准。

Claims (22)

  1. 一种组件预览的方法，其特征在于，所述方法应用于电子设备，包括：
    根据代码文件确定第一预览组件，所述代码文件包括多个组件，所述第一预览组件为所述多个组件中的一个；
    根据所述第一预览组件确定第一绘制图层，所述第一绘制图层包括第一绘制指令；
    根据所述第一绘制指令确定第一纹理图片。
  2. 根据权利要求1所述的方法，其特征在于，所述方法还包括：
    根据所述代码文件确定第二预览组件，所述第二预览组件为所述多个组件中的一个，所述第二预览组件与所述第一预览组件不同；
    根据所述第二预览组件确定第二绘制图层，所述第二绘制图层与所述第一绘制图层不同，所述第二绘制图层包括第二绘制指令；
    根据所述第二绘制指令确定第二纹理图片。
  3. 根据权利要求2所述的方法，其特征在于，所述方法还包括：
    根据所述第一纹理图片显示第一预览图片；或者
    根据所述第二纹理图片显示第二预览图片。
  4. 根据权利要求1至3中任一项所述的方法，其特征在于，所述根据所述第一预览组件确定第一绘制图层，包括：
    根据所述第一预览组件确定第一组件节点，所述第一组件节点用于表示所述第一预览组件的数据；
    根据所述第一组件节点确定第一元素节点；
    根据所述第一元素节点确定第一渲染节点，所述第一元素节点用于关联所述第一组件节点和所述第一渲染节点；
    根据所述第一渲染节点确定所述第一绘制图层，所述第一绘制图层中的所述第一绘制指令是由所述第一渲染节点确定的。
  5. 根据权利要求4所述的方法，其特征在于，在所述根据所述第一渲染节点确定所述第一绘制图层之前，所述方法还包括：
    根据所述第一渲染节点确定第一布局信息，所述第一布局信息包括第一尺寸信息或第一位置信息，所述第一绘制图层包括所述第一布局信息。
  6. 根据权利要求1至5中任一项所述的方法，其特征在于，所述方法还包括：
    将所述第一预览组件与所述第一预览组件的数据绑定；
    当监测到所述第一预览组件的数据变化时，根据所述第一预览组件的数据变化确定述第二组件节点；
    根据所述第二组件节点确定第二元素节点；
    根据所述第二元素节点确定第二渲染节点，所述第二元素节点用于关联所述第二组件节点和所述第二渲染节点；
    根据所述第二渲染节点确定第二布局信息，所述第二布局信息包括第二尺寸信息或第二位置信息；
    根据所述第二渲染节点确定第三绘制图层，所述第三绘制图层包括第三绘制指令和所述第二布局信息，所述第三绘制指令是由所述第二渲染节点确定的。
  7. 根据权利要求6所述的方法，其特征在于，所述方法还包括：
    根据所述第三绘制指令确定第三纹理图片，所述第三纹理图片与所述第一纹理图片不同。
  8. 根据权利要求7所述的方法，其特征在于，所述方法还包括：
    根据所述第三纹理图片显示第三预览图片，所述第三预览图片为所述第一预览图片更新后的图片。
  9. 根据权利要求6至8中任一项所述的方法，其特征在于，所述监测到所述第一预览组件的数据变化，包括：
    响应于开发者对所述第一预览图片的操作，将所述数据变化关联到所述第一预览组件；
    当所述数据变化关联到所述第一预览组件时，监测到所述第一预览组件的数据变化。
  10. 根据权利要求6至9中任一项所述的方法，其特征在于，所述第一绘制图层包括第一画布，所述第一画布包括所述第一布局信息和所述第一绘制指令；
    所述第三绘制图层包括第二画布，所述第二画布包括所述第二布局信息和所述第三绘制指令。
  11. 一种电子设备，其特征在于，包括：
    一个或多个处理器；
    一个或多个存储器；
    所述一个或多个存储器存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    根据代码文件确定第一预览组件，所述代码文件包括多个组件，所述第一预览组件为所述多个组件中的一个；
    根据所述第一预览组件确定第一绘制图层，所述第一绘制图层包括第一绘制指令；
    根据所述第一绘制指令确定第一纹理图片。
  12. 根据权利要求11所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    根据所述代码文件确定第二预览组件，所述第二预览组件为所述多个组件中的一个，所述第二预览组件与所述第一预览组件不同；
    根据所述第二预览组件确定第二绘制图层，所述第二绘制图层与所述第一绘制图层不同，所述第二绘制图层包括第二绘制指令；
    根据所述第二绘制指令确定第二纹理图片。
  13. 根据权利要求12所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    根据所述第一纹理图片显示第一预览图片；或者
    根据所述第二纹理图片显示第二预览图片。
  14. 根据权利要求11至13中任一项所述的电子设备，其特征在于，所述根据所述第一预览组件确定第一绘制图层，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    根据所述第一预览组件确定第一组件节点，所述第一组件节点用于表示所述第一预览组件的数据；
    根据所述第一组件节点确定第一元素节点；
    根据所述第一元素节点确定第一渲染节点，所述第一元素节点用于关联所述第一组件节点和所述第一渲染节点；
    根据所述第一渲染节点确定所述第一绘制图层，所述第一绘制图层中的所述第一绘制指令是由所述第一渲染节点确定的。
  15. 根据权利要求14所述的电子设备，其特征在于，在所述根据所述第一渲染节点确定所述第一绘制图层之前，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    根据所述第一渲染节点确定第一布局信息，所述第一布局信息包括第一尺寸信息或第一位置信息，所述第一绘制图层包括所述第一布局信息。
  16. 根据权利要求11至15中任一项所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    将所述第一预览组件与所述第一预览组件的数据绑定；
    当监测到所述第一预览组件的数据变化时，根据所述第一预览组件的数据变化确定第二组件节点；
    根据所述第二组件节点确定第二元素节点；
    根据所述第二元素节点确定第二渲染节点，所述第二元素节点用于关联所述第二组件节点和所述第二渲染节点；
    根据所述第二渲染节点确定第二布局信息，所述第二布局信息包括第二尺寸信息或第二位置信息；
    根据所述第二渲染节点确定第三绘制图层，所述第三绘制图层包括第三绘制指令和所述第二布局信息，所述第三绘制指令是由所述第二渲染节点确定的。
  17. 根据权利要求16所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    根据所述第三绘制指令确定第三纹理图片，所述第三纹理图片与所述第一纹理图片不同。
  18. 根据权利要求17所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    根据所述第三纹理图片显示第三预览图片，所述第三预览图片为所述第一预览图片更新后的图片。
  19. 根据权利要求16至18中任一项所述的电子设备，其特征在于，所述监测到所述第一预览组件的数据变化，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    响应于开发者对所述第一预览图片的操作，将所述数据变化关联到所述第一预览组件；
    当所述数据变化关联到所述第一预览组件时，监测到所述第一预览组件的数据变化。
  20. 根据权利要求16至19中任一项所述的电子设备，其特征在于，所述第一绘制图层包括第一画布，所述第一画布包括所述第一预览组件第一布局信息和所述第一绘制指令；
    所述第三绘制图层包括第二画布，所述第二画布包括所述第二布局信息和所述第三绘制指令。
  21. 一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括计算机程序或指令，当所述计算机程序或指令在计算机上运行时，使得如权利要求1至10中任一项所述的方法被执行。
  22. 一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序或指令，当所述计算机程序或指令在计算机上运行时，使得如1至10中任一项所述的方法被执行。
PCT/CN2023/099838 2022-06-16 2023-06-13 组件预览的方法和电子设备 WO2023241544A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210721061.1A CN117290004A (zh) 2022-06-16 2022-06-16 组件预览的方法和电子设备
CN202210721061.1 2022-06-16

Publications (1)

Publication Number Publication Date
WO2023241544A1 true WO2023241544A1 (zh) 2023-12-21

Family

ID=89192269

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/099838 WO2023241544A1 (zh) 2022-06-16 2023-06-13 组件预览的方法和电子设备

Country Status (2)

Country Link
CN (1) CN117290004A (zh)
WO (1) WO2023241544A1 (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130127899A1 (en) * 2011-11-21 2013-05-23 Jiunn-Sheng Yan Apparatus and method for dynamic film review on an e-book
CN108388444A (zh) * 2018-03-05 2018-08-10 重庆邮电大学 一种基于React组件的前端页面配置方法及系统
CN111679827A (zh) * 2020-04-28 2020-09-18 平安国际智慧城市科技股份有限公司 H5页面生成方法、装置、设备及存储介质
CN112286513A (zh) * 2019-07-23 2021-01-29 北京京东尚科信息技术有限公司 基于组件元数据的可视化设计方法和装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130127899A1 (en) * 2011-11-21 2013-05-23 Jiunn-Sheng Yan Apparatus and method for dynamic film review on an e-book
CN108388444A (zh) * 2018-03-05 2018-08-10 重庆邮电大学 一种基于React组件的前端页面配置方法及系统
CN112286513A (zh) * 2019-07-23 2021-01-29 北京京东尚科信息技术有限公司 基于组件元数据的可视化设计方法和装置
CN111679827A (zh) * 2020-04-28 2020-09-18 平安国际智慧城市科技股份有限公司 H5页面生成方法、装置、设备及存储介质

Also Published As

Publication number Publication date
CN117290004A (zh) 2023-12-26

Similar Documents

Publication Publication Date Title
CN110597512B (zh) 显示用户界面的方法及电子设备
WO2021103981A1 (zh) 分屏显示的处理方法、装置及电子设备
WO2021036571A1 (zh) 一种桌面的编辑方法及电子设备
WO2021115194A1 (zh) 一种应用图标的显示方法及电子设备
WO2020155875A1 (zh) 电子设备的显示方法、图形用户界面及电子设备
WO2021135838A1 (zh) 一种页面绘制方法及相关装置
CN113986070B (zh) 一种应用卡片的快速查看方法及电子设备
WO2023130921A1 (zh) 一种适配多设备的页面布局的方法及电子设备
CN114115619A (zh) 一种应用程序界面显示的方法及电子设备
US20230367464A1 (en) Multi-Application Interaction Method
WO2024001810A1 (zh) 设备交互方法、电子设备及计算机可读存储介质
CN118103809A (zh) 页面显示方法、电子设备及计算机可读存储介质
CN114444000A (zh) 页面布局文件的生成方法、装置、电子设备以及可读存储介质
CN113867657A (zh) 跨设备桌面管理方法、第一电子设备及第二电子设备
WO2023005751A1 (zh) 渲染方法及电子设备
WO2023016014A1 (zh) 视频编辑方法和电子设备
WO2023241544A1 (zh) 组件预览的方法和电子设备
CN115964231A (zh) 基于负载模型的评估方法和装置
CN115599565A (zh) 发送剪贴板数据的方法和装置
CN115543276A (zh) 一种用于实现软件开发的方法、系统以及电子设备
CN114257502A (zh) 一种日志上报方法及装置
WO2024046010A1 (zh) 一种界面显示方法、设备及系统
CN116088715B (zh) 消息提醒方法及电子设备
CN116700555B (zh) 动效处理方法及电子设备
WO2024036998A1 (zh) 显示方法、存储介质及电子设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 23823112

Country of ref document: EP

Kind code of ref document: A1