An application interface development method and device

Abstract

A kind of application interface development method and device, to improve the development efficiency of application interface.Therein method includes: the first electronic equipment sends the code of the application interface to be displayed to the second electronic equipment, the code of the application interface to be displayed includes N code segments, N is the positive integer greater than 1, each code segment corresponds root view or at least one control;When determining that code debugging is needed to the application interface, with the value of i is successively 1 to the integer in N, the following steps are repeatedly executed: send instruction to the second electronic equipment, the instruction is used to indicate the second electronic equipment executes the i th code segment in code, receive the first image data sent by the second electronic equipment, and show the first image data, so, the rendering result corresponding to when the second electronic equipment executes each code segment is shown on the first electronic equipment, facilitate developer to locate the problem occurs in which code segment when rendering result does not meet expectation, to improve the development efficiency of application interface.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of terminal, and in particular, to an application interface development method and device. BACKGROUND

[0002] HarmonyOS is a "future-oriented" operating system developed by Huawei, which is a distributed operating system for all scenarios (such as mobile office, sports health, social communication, media entertainment, etc.). On the basis of the traditional single-device system capability, the HarmonyOS creatively proposes the distributed concept of adapting to multiple terminal forms based on the same set of system capabilities, which can support mobile phones, tablets, televisions, smart cars, wearable devices and other terminal devices. Due to the proposal of the distributed concept of multiple terminal forms, the smart ecological applications that need to adapt to multiple smart terminal devices are also increasing, the application interface development requirements corresponding to different smart terminals are greatly increased, and the application interface development efficiency will have a great influence on the development efficiency of the whole application.

[0003] The current application development technology only supports displaying the final interface effect after the interface development on the smart terminal device, for example, in the interface development process of an Android application, the dependency relationship between each control and layer in the application interface is displayed in the layout inspector window, for example, layer 1 includes control 1, layer 2 includes control 2 and control 3, and the display effect of the final rendering of the application interface is displayed. When the display effect of the final rendering of the application interface does not meet the expectation, it is necessary to locate the problem and debug the code, which requires modifying the code and waiting for the execution of all the codes of the application interface again, and then displaying the display effect of the final rendering of the application interface. This process is very time-consuming, and the development efficiency of the application interface is low. SUMMARY

[0004] The present application provides an application interface development method and device to improve the development efficiency of the application interface.

[0005] In a first aspect, the present application provides a method for developing an application interface, the method is executed by a first electronic device, and the method comprises the following steps: the first electronic device sends code of an application interface to be displayed to a second electronic device, the code of the application interface to be displayed comprises N code segments, N is a positive integer greater than 1, and each code segment corresponds to a root view or at least one control; when the first electronic device determines that code debugging is required for the application interface, the following steps are repeatedly executed: the first electronic device sends indication information to the second electronic device, the indication information is used to instruct the second electronic device to execute an i-th code segment in the code, then the first electronic device receives first image data sent by the second electronic device, and displays the first image data, wherein when i is equal to 1, the first image data is generated by rendering a root view corresponding to the first code segment when the second electronic device executes the first code segment, and when i is greater than 1, the first image data is generated by rendering a root view and / or a control corresponding to at least one code segment from the first code segment to the i-th code segment when the second electronic device executes the i-th code segment.

[0006] Through the method, when the first electronic device needs to debug the code of the application interface to be displayed, the first electronic device instructs the second electronic device to execute the code of the application interface, and the first electronic device displays the rendering result corresponding to the execution of each code segment by the second electronic device, so that the developer can clearly see the rendering sequence of each control on the application interface, without waiting for the entire code of the application interface to be executed as in the prior art, which facilitates the developer to locate the problem in which code segment when the rendering result does not meet the expectation, thereby improving the development efficiency of the application interface.

[0007] In a possible design, the code of the application interface to be displayed can further comprise N breakpoints, and the N breakpoints correspond to the N code segments one by one.

[0008] Through the design, by setting the breakpoints in the code of the application interface by the developer, the second electronic device can stop executing the code segments after each breakpoint when executing the code of the application interface, so that the first electronic device can display the rendering effect of the code segments before each breakpoint when the second electronic device executes to each breakpoint.

[0009] In a possible design, when i is equal to 1, the first code segment comprises an instruction for creating a root view; and the first electronic device displays the first image data, specifically comprising: displaying a root layer, and the root layer comprises the root view.

[0010] Through the design, after the second electronic device executes the instruction for creating the root view, the developer can clearly see the rendering result of the root view displayed on the first electronic device.

[0011] In a possible design, when i is equal to j, j is a positive integer greater than 1 and smaller than N, the jth code segment includes an instruction for creating the first control; and the first electronic device displays the first image data, which can specifically include: displaying the free layer, the free layer including the first control.

[0012] Through the design, after the second electronic device executes the instruction for creating the first control, the developer can clearly see the rendering result of the free layer after the first control is created on the first electronic device.

[0013] In a possible design, when i is equal to j+k, k is a positive integer greater than 1 and smaller than N, and j+k is a positive integer greater than 1 and smaller than N, the j+kth code segment includes an instruction for mounting the first control to the root view; and the first electronic device displays the first image data, which can specifically include: switching from the free layer to the root layer, the root layer including the root view and the first control located on an upper layer of the root view.

[0014] Through the design, after the second electronic device executes the instruction for mounting the first control to the root view, the developer can clearly see the switching process from the free layer to the root layer, the rendering effect of the root layer after the first control is mounted to the root view, and the covering and superimposing relationship between the control and the root view on the first electronic device.

[0015] In a possible design, when i is equal to j+m, m is a positive integer greater than k and smaller than N, and j+m is a positive integer smaller than N, the j+mth code segment includes an instruction for mounting the second control to the first control; and the first electronic device displays the first image data, which can specifically include: displaying the root layer, the root layer further including the second control located on an upper layer of the first control.

[0016] Through the design, after the second electronic device executes the instruction for mounting the second control to the first control, the developer can clearly see the rendering effect of the root layer after the second control is mounted to the first control on the first electronic device, and the covering and superimposing relationship between the first control and the second control.

[0017] In a possible design, when i is equal to j+n, n is a positive integer greater than k and smaller than N, and j+n is a positive integer smaller than N, the j+nth code segment includes an instruction for mounting the third control to the first control; and the first electronic device displays the first image data, which can specifically include: displaying the free layer, the free layer further including the third control located on an upper layer of the first control.

[0018] Through the design, after the second electronic device executes the instruction of mounting the third control to the first control, the developer can clearly see the rendering effect of the root layer after the third control is mounted to the first control and the covering and superimposing relationship between the first control and the third control displayed on the first electronic device.

[0019] In a second aspect, the present application provides an application interface development method, which is executed by a second electronic device, and includes: receiving, by the second electronic device, code of an application interface to be displayed sent by a first electronic device, the code of the application interface including N code segments, N being a positive integer greater than 1, each code segment corresponding to a root view or at least one control; receiving, by the second electronic device, indication information sent by the first electronic device, the indication information being used to indicate the second electronic device to execute an i-th code segment in the code, i being a positive integer less than or equal to N; when i is equal to 1, executing, by the second electronic device, the first code segment, rendering the root view corresponding to the first code segment, and generating second image data, or when i is an integer greater than 1 and less than or equal to N, executing, by the second electronic device, the i-th code segment, and rendering the root view and / or the control corresponding to at least one code segment among the first code segment and the i-th code segment, and generating third image data; and then sending, by the second electronic device, first image data to the first electronic device, the first image data including the second image data or the third image data.

[0020] Through the method, the second electronic device can execute the code of the application interface according to the indication information sent by the first electronic device, and send the rendering result corresponding to the execution of each code segment to the first electronic device, so as to display the image data corresponding to the execution of each code segment by the second electronic device on the first electronic device, thereby enabling the developer to clearly see the rendering sequence of each control on the application interface on the first electronic device, without waiting for the entire code of the application interface to be executed as in the prior art, which facilitates the developer to locate the code segment where the problem occurs when the rendering result does not meet the expectation, thereby improving the development efficiency of the application interface.

[0021] In a possible design, the code further includes N breakpoints, the N breakpoints corresponding to the N code segments one by one; and the method can further include: when the second electronic device executes to each breakpoint, stopping the execution of the code segment after the breakpoint.

[0022] Through the design, when the second electronic device executes to each breakpoint, the rendering effect of the code segment before the breakpoint can be displayed to the developer by the first electronic device.

[0023] In a possible design, when i is equal to 1, the first code segment includes an instruction for creating a root view. The second electronic device executes the first code segment, and performs rendering on the root view corresponding to the first code segment to generate second image data, which can include: creating the root view on a root layer, and rendering the root layer to obtain the second image data.

[0024] Through the design, after the second electronic device executes the instruction for creating the root view, the second electronic device can show the rendering result of the root view to the developer through the first electronic device.

[0025] In a possible design, when i is equal to j, and j is a positive integer greater than 1 and smaller than N, the jth code segment includes an instruction for creating a first control. The second electronic device executes the ith code segment, and performs rendering on the control corresponding to at least one of the first code segment to the ith code segment to generate third image data, which can include: creating the first control on a free layer, and then rendering the free layer to obtain the third image data.

[0026] Through the design, after the second electronic device executes the instruction for creating the first control, the second electronic device can show the rendering result of the first control to the developer through the first electronic device.

[0027] In a possible design, when i is equal to j+k, and k is a positive integer greater than 1 and smaller than N, and j+k is a positive integer greater than 1 and smaller than N, the j+kth code segment includes an instruction for mounting the first control to the root view. The second electronic device executes the ith code segment, and performs rendering on the root view and / or the control corresponding to at least one of the first code segment to the ith code segment to generate third image data, which can include: removing the first control from the free layer, and adding the first control to an upper layer of the root view in the root layer, and then rendering the root layer to obtain the third image data.

[0028] Through the design, after the second electronic device executes the instruction for mounting the first control to the root view, the second electronic device can show the rendering result of mounting the first control to the root view and the covering and superimposing relationship between the control and the root view to the developer through the first electronic device.

[0029] In a possible design, when the i is equal to j+m, the m is a positive integer greater than k and smaller than the N, and the j+m is a positive integer smaller than the N, the j+mth code segment includes an instruction of mounting a second control to the first control. The second electronic device performs the ith code segment, and renders the root view and / or the control corresponding to at least one of the 1st code segment to the ith code segment to generate third image data, which can include: removing the second control from the free layer, and adding the second control above the first control in the root layer, and then rendering the root layer to obtain the third image data.

[0030] By this design, after the second electronic device executes the instruction of mounting the second control to the first control, the second electronic device can show the developer the rendering result of mounting the second control to the first control on the root layer, and the overlay relationship between the first control and the second control on the root layer through the first electronic device.

[0031] In a possible design, when the i is equal to j+n, the n is a positive integer greater than k and smaller than the N, and the j+n is a positive integer smaller than the N, the j+nth code segment includes an instruction of mounting a third control to the first control. The second electronic device performs the ith code segment, and renders the control corresponding to at least one of the 1st code segment to the ith code segment to generate third image data, which can include: adding the third control in the free layer above the first control in the free layer, and then rendering the free layer to obtain the third image data.

[0032] By this design, after the second electronic device executes the instruction of mounting the third control to the first control, the second electronic device can show the developer the rendering result of mounting the second control to the first control on the free layer, and the overlay relationship between the first control and the second control on the free layer through the first electronic device.

[0033] In a third aspect, the present application provides an electronic device, which includes a processor, a memory, and a display screen; the display screen is configured to display image data; the memory is configured to store one or more computer programs, when the computer programs are executed by the processor, the electronic device is caused to perform the technical solutions of the first aspect and any possible design of the first aspect, or perform the technical solutions of the second aspect and any possible design of the second aspect.

[0034] In a fourth aspect, the embodiments of the present application further provide an electronic device, which comprises modules / units for executing the method of the first aspect or any possible design of the first aspect, or the method of the second aspect or any possible design of the second aspect; these modules / units can be implemented by hardware, or by hardware executing corresponding software.

[0035] In a fifth aspect, the embodiments of the present application further provide a chip, which is coupled with a memory in an electronic device, and is configured to invoke a computer program stored in the memory and execute the technical solution of the first aspect and any possible design of the first aspect, or execute the technical solution of the second aspect and any possible design of the second aspect; in the embodiments of the present application, "coupled" means that two components are directly or indirectly combined with each other.

[0036] In a sixth aspect, the embodiments of the present application further provide a computer readable storage medium, which comprises computer instructions, and when the computer instructions run on an electronic device, the electronic device is caused to execute the technical solution of the first aspect and any possible design of the first aspect, or execute the technical solution of the second aspect and any possible design of the second aspect.

[0037] In a seventh aspect, the embodiments of the present application further provide a program product, and when the program product runs on an electronic device, the electronic device is caused to execute the technical solution of the first aspect and any possible design of the first aspect, or execute the technical solution of the second aspect and any possible design of the second aspect. BRIEF DESCRIPTION OF DRAWINGS

[0038] Figure 1 A system architecture schematic diagram is provided for the embodiments of the present application;

[0039] Figure 2 A structural schematic diagram of an electronic device is provided for the embodiments of the present application;

[0040] Figure 3 A flowchart of an application interface development method is provided for the embodiments of the present application;

[0041] Figure 4 An example of code of an application interface to be displayed is provided for the embodiments of the present application;

[0042] Figure 5 One of the schematic diagrams of a control tree is provided for the embodiments of the present application;

[0043] Figure 6 One of the schematic diagrams of a rendering process is provided for the embodiments of the present application;

[0044] Figure 7 Fig. 1 is a schematic diagram of a preview interface provided by an embodiment of the present application;

[0045] Figure 8 Fig. 2 is a schematic diagram of a rendering process provided by an embodiment of the present application;

[0046] Figure 9 Fig. 3 is a schematic diagram of a preview interface provided by an embodiment of the present application;

[0047] Figure 10 Fig. 4 is a schematic diagram of a rendering process provided by an embodiment of the present application;

[0048] Figure 11 Fig. 5 is a schematic diagram of a rendering process provided by an embodiment of the present application;

[0049] Figure 12 Fig. 6 is a schematic diagram of a rendering process provided by an embodiment of the present application;

[0050] Figure 13 Fig. 7 is a schematic diagram of a preview interface provided by an embodiment of the present application;

[0051] Figure 14 Fig. 8 is a schematic diagram of a control tree provided by an embodiment of the present application. DETAILED DESCRIPTION

[0052] First, some terms related to the embodiments of the present application are explained to facilitate understanding by those skilled in the art.

[0053] (1) Electronic device: a device that can install various application programs and display objects provided by the installed application programs. Exemplarily, the electronic device can include a device capable of realizing a data processing function (such as a processor or an image processor or other processor), and a device capable of displaying a user interface (such as a display screen). The electronic device can be mobile or fixed. For example, the electronic device can be a smartphone, a tablet computer, various wearable devices, a vehicle-mounted device, a personal digital assistant (PDA), a personal computer (PC), or other electronic devices capable of realizing the above functions.

[0054] (2) User interface: a graphical user interface (GUI) displayed on the display screen of the electronic device, including but not limited to a main interface (also referred to as a desktop), a negative one screen display interface, and a display interface of each application program (APP).

[0055] (3) Application (APP): can be referred to as an application, which is a computer program capable of completing one or more specific functions, which can have a visual display interface and can interact with users, such as settings, WeChat, etc.

[0056] (4) Breakpoint: a point set in a line of program code, when debugging, the program will stop at the line where the breakpoint is located, and then it can be debugged step by step.

[0057] (5) "At least one" refers to one or more, and "multiple" refers to two or more. "And / or" describes the association between the associated objects, indicating that there can be three relationships, for example, A and / or B, which can represent the following situations: A exists alone, A and B exist together, and B exists alone, where A and B can be singular or plural. The character " / " generally represents an "or" relationship between the associated objects. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or multiple items. For example, at least one of a, b, or c, can represent: a, b, c, a-b, a-c, b-c, or a-b-c, where a, b, and c can be single or multiple.

[0058] In addition, unless otherwise specified, the ordinal numbers "first", "second", etc. mentioned in the embodiments of the present application are used to distinguish multiple objects, and are not used to limit the order, time sequence, priority or importance of the multiple objects. For example, the first application and the second application are only used to distinguish different applications, and do not mean that the contents, priority, sending order or importance of the two applications are different.

[0059] At present, for the development of the whole-scene smart ecological application of the Hongmeng system, the development efficiency of the application interface is crucial, but as described in the foregoing background art, the current application development technology only supports the final interface effect after the interface development is displayed on the intelligent terminal device, that is, only the corresponding layer of the application interface can be displayed, and the rendering process of each control in the application interface cannot be clearly and accurately displayed. When the final display effect of the application interface does not meet the expectations, it is necessary to locate the problem and debug the code, which requires modifying the code and waiting for the complete application interface code to be executed again, and then displaying the final display effect of the application interface. This process is very time-consuming, and the development efficiency of the application interface is low.

[0060] In view of this, the application provides an application interface development method, which combines the rendering process of each control in the application interface with the code debugging process. Specifically, when the first electronic device needs to perform code debugging on the application interface to be displayed, the second electronic device is instructed to execute the code of the application interface, and the rendering result corresponding to the execution of each code segment by the second electronic device is displayed on the first electronic device, so that the developer can clearly see the rendering sequence of each control in the application interface, and the developer can locate the code segment where the problem occurs when the rendering result does not meet the expectation, and then execute the modified code segment, and then display the rendering result corresponding to the modified code segment on the first electronic device, thereby improving the development efficiency of the application interface.

[0061] Figure 1 An exemplary system architecture diagram provided by an embodiment of the application is shown.

[0062] As Figure 1 shown, the system architecture includes an application integrated development environment (IDE) and a HarmonyOS previewer engine. The IDE aims to provide a unified development platform for developers to develop HarmonyOS distributed applications.

[0063] The IDE includes a debugger, which includes a protocol handler for processing functions related to a debugging adapter protocol (DAP). In a specific implementation, after the debugger is started by the IDE, the debugger can be connected to a debugging server through the DAP, and the debugger can send the code of the application interface to be displayed to the debugging server through the connection.

[0064] The HarmonyOS previewer engine includes a debugging server, which is configured to execute the code of the application interface to be displayed according to the indication information when receiving the indication information, and synchronously create a control tree, each control in the code corresponding to a node in the control tree, and render the nodes (for example, a root view, a control, etc.) in the control tree.

[0065] In the debugging state, the display result is divided into a root layer and a free layer, where the root layer represents the layer of the control added to the root view, and the free layer represents the layer of the control not yet added to the root view. Each time a control is created, the control is rendered and added to the free layer. When a certain control is added to the root node and the child node of the root, the control is deleted from the free layer and added to the root layer.

[0066] When a node is created, for example, the node is a root view, the root view is displayed in the root layer, and for another example, the node is a control, the control is first displayed in the free layer. When the debugging server executes a code segment including an instruction of loading the control into the root view, the control is removed from the free layer and mounted in the root layer for display. The debugging server transmits the rendered interface (including the root layer or the free layer) to the IDE through an image pipeline.

[0067] The IDE also includes a previewer. After the IDE receives image data corresponding to the rendered interface, the previewer displays the image data, so that the developer can clearly see the entire process of control rendering and loading.

[0068] It should be noted that the first electronic device and the second electronic device in the embodiments of the present application can be the same electronic device or different electronic devices, and the present application does not limit this. When the first electronic device and the second electronic device are the same electronic device, the distributed application development platform is arranged in the same first electronic device; when the first electronic device and the second electronic device are different electronic devices, the distributed application development platform is arranged in the first electronic device, and the Harmony system preview engine is arranged in the second electronic device. The following embodiments take the first electronic device and the second electronic device as different electronic devices as an example for description.

[0069] The hardware structures of the first electronic device and the second electronic device will be further described below with reference to the accompanying drawings.

[0070] The hardware structure schematic diagram of the electronic device 100 can be seen from Figure 2 , Figure 2 Only the hardware structure schematic diagram of an electronic device provided in the embodiments of the present application is shown, and Figure 2 on the basis of the above, other variant structure modes can also exist.

[0071] For example, Figure 2As shown, the electronic device 100 can include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 151, a wireless communication module 152, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset jack 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc.

[0072] The processor 110 can include one or more processing units, for example: the processor 110 can include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units can be independent devices, or can be integrated in one or more processors. The controller can be the nervous center and command center of the electronic device 100. The controller can generate operation control signals according to instruction operation codes and timing signals, and complete the control of fetching instructions and executing instructions. A memory can also be provided in the processor 110, for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory can save instructions or data that have just been used or are repeatedly used by the processor 110. If the processor 110 needs to use the instructions or data again, it can directly call them from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thereby improving the efficiency of the system. In the embodiments of the present application, the processor 110 can run software codes / modules corresponding to the application interface development method, execute the corresponding processes, and the specific processes will be described later.

[0073] The display screen 194 is used to display image data received by the electronic device 100 from other devices, for example, when the electronic device 100 is the first electronic device described above, the electronic device 100 can receive the first image data sent by the second electronic device and display the first image data.

[0074] The display screen 194 includes a display panel. The display panel can adopt a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light emitting diode (AMOLED), a flex light-emitting diode (FLED), a Miniled, a MicroLed, a Micro-oLed, a quantum dot light emitting diodes (QLED), or the like. In some embodiments, the electronic device 100 can include one or N display screens 194, where N is a positive integer greater than 1.

[0075] The internal memory 121 can be used to store computer executable program codes including instructions. The processor 110 performs various functions of the electronic device 100 and data processing by running the instructions stored in the internal memory 121. The internal memory 121 can include a program storage area and a data storage area. The program storage area can store an operating system, at least one application program required by a function (such as settings, WeChat), and the like. The data storage area can store data created during use of the electronic device 100, and the like. In addition, the internal memory 121 can include a high-speed random access memory, and can further include a non-volatile memory such as at least one of a magnetic disk storage device, a flash memory device, a universal flash storage (UFS), and the like.

[0076] The sensor module 180 can include a pressure sensor 180A, a gyro sensor 180B, a barometric sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, and the like.

[0077] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 151, the wireless communication module 152, the modem processor, and the baseband processor, and the like.

[0078] Antennas 1 and 2 are used for transmitting and receiving electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization of antennas. For example, antenna 1 can be multiplexed as a diversity antenna for wireless local area networks. In some other embodiments, antennas can be used in combination with tuning switches.

[0079] Mobile communication module 151 can provide solutions for wireless communication including 2G / 3G / 4G / 5G, etc. applied on electronic device 100. Mobile communication module 151 can include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. Mobile communication module 151 can receive electromagnetic waves by antenna 1, and perform filtering, amplification, etc. on the received electromagnetic waves, and transmit the processed signals to a modem processor for demodulation. Mobile communication module 151 can also amplify signals modulated by the modem processor, and convert the signals into electromagnetic waves radiated by antenna 1. In some embodiments, at least part of the functional modules of mobile communication module 151 can be arranged in processor 110. In some embodiments, at least part of the functional modules of mobile communication module 151 can be arranged in the same device as at least part of the modules of processor 110.

[0080] Wireless communication module 152 can provide solutions for wireless communication including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, etc. applied on electronic device 100. Wireless communication module 152 can be one or more devices integrated with at least one communication processing module. Wireless communication module 152 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering processing on the electromagnetic wave signals, and transmits the processed signals to processor 110. Wireless communication module 152 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification on the signals, and convert the signals into electromagnetic waves radiated by antenna 2.

[0081] The electronic device 100 can further include a peripheral interface for providing various interfaces for external input / output devices (e.g., a keyboard, a mouse, an external display, an external memory, a user identification module card, etc.). For example, the peripheral interface can be used to couple the above-mentioned external input / output peripheral devices to the processor 110 and the internal memory 121, for example, by connecting a mouse through a universal serial bus (USB) interface 130 and connecting a SIM card provided by a carrier through metal contacts on a card slot of the user identification module card.

[0082] The electronic device 100 can further include a charging management module 140 (e.g., a battery 142 and a power management module 141) for supplying power to various components. The battery 142 can be logically connected to the processor 110 through the power management module 141, so that the charging management module 140 can perform functions such as management of charging, discharging, and power consumption management.

[0083] In addition, the electronic device 100 can implement audio functions through an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset interface 170D, an application processor, etc. For example, music playback, recording, etc. The electronic device 100 can receive key 190 inputs and generate key signal inputs related to user settings and function control of the electronic device 100. The electronic device 100 can generate vibration prompts (e.g., incoming call vibration prompts) using a motor 191. An indicator 192 in the electronic device 100 can be an indicator light that can be used to indicate charging status, power changes, and can also be used to indicate messages, missed calls, notifications, etc. A SIM card interface 195 in the electronic device 100 is used to connect a SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to achieve contact and separation with the electronic device 100.

[0084] It can be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 can include more or fewer components than those illustrated, or combine certain components, or split certain components, or different component arrangements. The illustrated components can be implemented in hardware, software, or a combination of software and hardware.

[0085] In combination with the above embodiments and the accompanying drawings, the embodiments of the present application provide an application interface development method, which can be implemented in an electronic device 100 having a hardware structure as shown in the accompanying drawings. As shown in the accompanying drawings, the method includes the following steps: Figure 2 Figure 3 The method includes the following steps:

[0086] In step 301, the first electronic device sends the code of an application interface to be displayed to the second electronic device. Correspondingly, the second electronic device receives the code of the application interface to be displayed sent by the first electronic device.​

[0087] The code of the application interface to be displayed can include N code segments, N being a positive integer greater than 1, and each code segment corresponding to a root view or at least one control.

[0088] It should be understood that one code segment can include one line of code or multiple lines of code, which is not limited in the present application.

[0089] At step 302, when the first electronic device determines that the application interface needs to be debugged, the following process is repeatedly executed with i taking values of integers from 1 to N in turn. For details, see steps 303, 306, and 307.

[0090] At step 303, the first electronic device sends indication information to the second electronic device, the indication information being used to instruct the second electronic device to execute the i-th code segment in the code, i being a positive integer less than or equal to N.

[0091] Correspondingly, the second electronic device receives the indication information sent by the first electronic device.

[0092] For example, the indication information can include a code segment identifier or other information that can uniquely identify each code segment, which is not limited herein.

[0093] For example, taking N equal to 3 as an example, i takes values of 1, 2, and 3 in turn, and steps 303, 306, and 307 are repeatedly executed. Specifically, when i takes a value of 1, the first electronic device sequentially executes: sending indication information to the second electronic device, the indication information being used to instruct the second electronic device to execute the first code segment in the code, receiving first image data sent by the second electronic device, and displaying the first image data; the first image data is generated by the second electronic device by rendering the root view corresponding to the first code segment when executing the first code segment; when i takes a value of 2, the first electronic device sequentially executes: sending indication information to the second electronic device, the indication information being used to instruct the second electronic device to execute the second code segment in the code, receiving first image data sent by the second electronic device, and displaying the first image data; the first image data is generated by the second electronic device by rendering the root view and / or controls corresponding to at least one of the first code segment and the second code segment when executing the second code segment; when i takes a value of 3, the first electronic device sequentially executes: sending indication information to the second electronic device, the indication information being used to instruct the second electronic device to execute the third code segment in the code, receiving first image data sent by the second electronic device, and displaying the first image data; the first image data is generated by the second electronic device by rendering the root view and / or controls corresponding to at least one of the first code segment to the third code segment when executing the third code segment.

[0094] Step 304, when i is equal to 1, the second electronic device executes the first code segment according to the indication information, renders the root view corresponding to the first code segment, and generates second image data; or when i is an integer greater than 1 and less than or equal to N, the second electronic device executes the i th code segment according to the indication information, and renders the root view and / or the control corresponding to at least one of the first code segment to the i th code segment, and generates third image data.

[0095] Here, the second electronic device executes the i th code segment according to the indication information, and renders the root view and / or the control corresponding to at least one of the first code segment to the i th code segment, which can be understood as that the second electronic device renders the control corresponding to the i th code segment, and the root view and / or the control related to the instructions included in the i th code segment and executed before the i th code segment.

[0096] In the embodiments of the present application, each code segment includes one or more instructions, and the following embodiments take one instruction as an example. For example, the i th code segment includes an instruction of creating a control 1, and then the root view and / or the control related to the instructions included in the i th code segment and executed before the i th code segment can be specifically understood as the control that has been created on the free layer and not removed.

[0097] For another example, the i th code segment includes an instruction of mounting a newly created control 1 to the root view on the root layer, and then the root view and / or the control related to the instructions included in the i th code segment and executed before the i th code segment can be specifically understood as the root view and the control in the root layer.

[0098] For another example, the i th code segment includes an instruction of mounting a newly created control 1 to the control 2 in the root layer, and then the root view and / or the control related to the instructions included in the i th code segment and executed before the i th code segment can be specifically understood as the root view and the control in the root layer.

[0099] For another example, the i th code segment includes an instruction of mounting a newly created control 1 to the control 3 in the free layer, and then the root view and / or the control related to the instructions included in the i th code segment and executed before the i th code segment can be specifically understood as various controls in the free layer, wherein the various controls at least include the control 1 and the control 3, and if the free layer further includes other controls, the various controls further include the other controls.

[0100] In the embodiments of this application, the above step 304 can have various possible implementation manners. When i is equal to 1, the first code segment includes instructions for creating a root view. The second electronic device executes the first code segment and renders the root view corresponding to the first code segment to generate second image data, which can be achieved by creating a root view on a root layer, rendering the root layer, and obtaining the second image data.

[0101] In the embodiments of this application, the above step 304 can have various possible implementation manners. When i is equal to 1, the first code segment includes instructions for creating a root view. The second electronic device executes the first code segment and renders the root view corresponding to the first code segment to generate second image data, which can be achieved by creating a root view on a root layer, rendering the root layer, and obtaining the second image data.

[0102] In the embodiments of this application, the above step 304 can have various possible implementation manners. When i is equal to 1, the first code segment includes instructions for creating a root view. The second electronic device executes the first code segment and renders the root view corresponding to the first code segment to generate second image data, which can be achieved by creating a root view on a root layer, rendering the root layer, and obtaining the second image data.

[0103] The following provides several examples for detailed description.

[0104] In the embodiments of this application, the above step 304 can have various possible implementation manners. When i is equal to 1, the first code segment includes instructions for creating a root view. The second electronic device executes the first code segment and renders the root view corresponding to the first code segment to generate second image data, which can be achieved by creating a root view on a root layer, rendering the root layer, and obtaining the second image data.

[0105] In the embodiments of this application, the above step 304 can have various possible implementation manners. When i is equal to 1, the first code segment includes instructions for creating a root view. The second electronic device executes the first code segment and renders the root view corresponding to the first code segment to generate second image data, which can be achieved by creating a root view on a root layer, rendering the root layer, and obtaining the second image data.

[0106] It should be noted that the execution result of the instruction for creating the control in the embodiments of the present application is to create the control on the free layer. The control on the free layer can be mounted on the root view or other controls. The mounting on the root view can be mounting on the root view in the root layer, as described in the following embodiment A3. The mounting on other controls can include two cases: one case is mounting on the control in the root layer, as described in the following embodiment A4; the other case is mounting on the control in the free layer, as described in the following embodiment A5.

[0107] In the embodiment A3, based on the embodiment A2, when i is equal to j+k, k is a positive integer greater than 1 and less than N, j+k is a positive integer greater than 1 and less than N, and the j+kth code segment includes an instruction for mounting the first control on the root view. The second electronic device executes the ith code segment, and renders the root view and / or the control corresponding to at least one of the first code segment to the ith code segment to generate third image data. Specifically, the first control can be removed from the free layer and added to the upper layer of the root view in the root layer, and the root layer is rendered to obtain the third image data.

[0108] In the example a3, taking j equal to 2 and k equal to 2 as an example, that is, the fourth code segment includes an instruction for mounting the first control on the root view. The first control is button 1, and the free layer includes button 1, as described in the above example a1. After the second electronic device receives the indication information for indicating the execution of the fourth code segment, the fourth code segment is executed, and the control corresponding to the fourth code segment and the root view corresponding to the first code segment are rendered to generate third image data. Specifically, the first control button 1 is removed from the free layer and added to the upper layer of the root view in the root layer, and the root layer including the first control button 1 and the root view and the first control button 1 located in the upper layer of the root view is rendered, so as to obtain the third image data.

[0109] In the embodiment A4, based on the embodiment A3, when i is equal to j+m, m is a positive integer greater than k and less than N, j+m is a positive integer less than N, and the j+mth code segment includes an instruction for mounting the second control on the first control. The second electronic device executes the ith code segment, and renders the root view and / or the control corresponding to at least one of the first code segment to the ith code segment to generate third image data. Specifically, the second control can be removed from the free layer and added to the upper layer of the first control in the root layer, and then the root layer is rendered to obtain the third image data.

[0110] Example a4, taking j equal to 2 and m equal to 3 as an example, i.e., the fifth code segment includes instructions for mounting the second control to the first control. Continuing with the above example a1, i.e., the free layer includes the first control button 1. Taking the free layer including the second control button 2 as an example, after the second electronic device receives the indication information for indicating execution of the fifth code segment, the fifth code segment is executed, and the controls corresponding to the fifth code segment and the controls corresponding to the second code segment are rendered to generate third image data. Specifically, button 2 is removed from the free layer and added to the upper layer of button 1 in the root layer, and then the root layer including button 1 and button 2 with button 2 on the upper layer of button 1 is rendered to obtain the third image data.

[0111] Embodiment A5, based on embodiment A2, when i is equal to j+n, n is a positive integer greater than k and less than N, j+n is a positive integer less than N, and the j+n code segment includes instructions for mounting the third control to the first control. The second electronic device executes the i-th code segment and renders the controls corresponding to at least one of the first code segment to the i-th code segment to generate third image data, which can be achieved by the following way: adding the third control in the free layer to the upper layer of the first control in the free layer, and then rendering the free layer to obtain the third image data.

[0112] Example a5, taking j equal to 2 and n equal to 4 as an example, i.e., the sixth code segment includes instructions for mounting the third control to the first control. Continuing with the above example a1, i.e., the free layer includes the first control button 1. Taking the free layer including the third control button 3 as an example, after the second electronic device receives the indication information for indicating execution of the sixth code segment, the sixth code segment is executed, and the controls corresponding to the sixth code segment and the controls corresponding to the second code segment are rendered to generate third image data. Specifically, button 3 in the free layer is added to the upper layer of button 1 in the free layer, and then the free layer including button 1 and button 3 with button 3 on the upper layer of button 1 is rendered to obtain the third image data.

[0113] Step 305, the second electronic device sends the first electronic device the first image data, which includes the second image data or the third image data.

[0114] Step 306, the first electronic device receives the first image data sent by the second electronic device, wherein when i is equal to 1, the first image data is the second image data, and when i is greater than 1, the first image data is the third image data.

[0115] Step 307, the first electronic device displays the first image data.

[0116] In the embodiments of the present application, the manner of step 307 can have various possible implementation manners, which will be described in detail below by means of possible implementation manners B1 to B5.

[0117] Implementation manner B1, based on the implementation manner A1, the first electronic device displays the first image data, which can specifically include: displaying the root layer, and the root layer includes the root view. In this way, after the second electronic device executes the instruction of creating the root view, the developer can clearly see the rendering result of the root view displayed on the first electronic device.

[0118] Implementation manner B2, based on the implementation manner A2, when i is equal to j, j is a positive integer greater than 1 and less than N, the jth code segment includes an instruction of creating the first control. The first electronic device displays the first image data, which can specifically include: displaying the free layer, and the free layer includes the first control. In this way, after the second electronic device executes the instruction of creating the first control, the developer can clearly see the rendering result of the free layer after the first control is created and displayed on the first electronic device.

[0119] Implementation manner B3, based on the implementation manner A3, when i is equal to j+k, k is a positive integer greater than 1 and less than N, and j+k is a positive integer greater than 1 and less than N, the j+kth code segment includes an instruction of mounting the first control to the root view.

[0120] The first electronic device displays the first image data, which can specifically include: switching from the free layer to display the root layer, and the root layer includes the root view and the first control located on the upper layer of the root view. In this way, after the second electronic device executes the instruction of mounting the first control to the root view, the developer can clearly see the process of switching from the free layer to the root layer displayed on the first electronic device, the rendering effect of the root layer after the first control is mounted to the root view, and the covering and superimposing relationship between the control and the root view.

[0121] Implementation method B4, based on implementation method A4 above, when i equals j+m, m is a positive integer greater than k and less than N, and j+m is a positive integer less than N, the j+m-th code segment includes an instruction to mount the second control to the first control; the first electronic device displays the first image data, specifically including: displaying a root layer, the root layer also including a second control located on top of the first control. Thus, after the second electronic device executes the instruction to mount the second control to the first control, the developer can clearly see the rendering effect of the root layer displayed on the first electronic device after mounting the second control to the first control, as well as the overlapping relationship between the first control and the second control.

[0122] Implementation method B5, based on implementation method A5 above, where i equals j+n, n is a positive integer greater than k and less than N, and j+n is a positive integer less than N, the j+n-th code segment includes an instruction to mount the third control to the first control; the first electronic device displays the first image data, specifically including: displaying a detached layer, the detached layer also including the third control located on top of the first control. Thus, after the second electronic device executes the instruction to mount the third control to the first control, the developer can clearly see the rendering effect of the root layer displayed on the first electronic device after mounting the third control to the first control, as well as the overlapping relationship between the first control and the third control.

[0123] In this embodiment, when debugging the code of the application interface to be displayed, the first electronic device can instruct the second electronic device to execute the code of the application interface, and the rendering result corresponding to each code segment executed by the second electronic device can be displayed on the first electronic device. This allows developers to clearly see the rendering order of each control on the application interface, instead of having to wait for the entire application interface code to be executed before displaying the rendering result, as in the prior art. This makes it easier for developers to locate the code segment where the problem occurs when the rendering result does not meet expectations, thereby improving the development efficiency of the application interface.

[0124] In one possible implementation, in step 301 above, the code for the application interface to be displayed may further include N breakpoints, with each breakpoint corresponding to one of the N code segments. When the second electronic device executes to each breakpoint, it stops executing the code segment following the breakpoint.

[0125] For example, breakpoints can be set at the beginning of each code segment. When the second electronic device executes the code, it stops executing the code segment after each breakpoint. For instance, if a breakpoint is set at the beginning of the first code segment, the second electronic device will stop executing at that breakpoint after receiving an instruction. After receiving the next instruction, it will continue executing the code after the breakpoint until it stops at the next breakpoint.

[0126] With this implementation method, developers can set breakpoints in the application interface code. When the second electronic device executes the application interface code and reaches each breakpoint, it can display the rendering effect of the code segment before the breakpoint to the developer through the first electronic device.

[0127] In this application embodiment, the second electronic device can execute the code of the application interface to be displayed in various ways.

[0128] In one possible implementation, a single-step execution method is used, whereby the second electronic device receives an instruction, begins executing a code segment, stops executing subsequent code segments after the code segment is completed, and waits for the first electronic device to send the next instruction. When the second electronic device receives the next instruction, it continues executing the next code segment.

[0129] In another possible implementation, execution is carried out using a breakpoint method. When the second electronic device receives an instruction, it begins to execute a code segment until it reaches a breakpoint, at which point it stops executing subsequent code and waits for the first electronic device to send the next instruction. When the second electronic device receives the next instruction, it continues to execute the code until it reaches the next breakpoint.

[0130] In practice, different buttons can be set on the first electronic device, allowing developers to instruct the second electronic device to execute code in either a single-step or breakpoint-based manner by clicking different buttons. During code execution on the second electronic device, the execution mode can also be changed, triggered on the first electronic device.

[0131] The following provides a specific example to illustrate the difference between the two implementation methods described above.

[0132] For example, taking the application interface code to be displayed as having 10 code segments, each code segment consists of one line of code. A breakpoint is set at the beginning of line 3 and at the beginning of line 6. If the execution is done step by step, the first electronic device sends an instruction message once, the second electronic device executes line 1 of code and stops when it finishes. Then, the first electronic device sends an instruction message again, the second electronic device executes line 2 of code and stops when it finishes. The first electronic device sends an instruction message again, the second electronic device executes line 3 of code and stops when it finishes, and so on. The first electronic device needs to send a total of 10 instruction messages. The second electronic device executes one line of code each time it receives an instruction message and stops after executing that line of code, until the 10th line is executed. If execution follows the breakpoints, the first electronic device sends an instruction message once, and the second electronic device starts executing from line 1 until it stops after executing line 2. The first electronic device sends another instruction, and the second electronic device starts executing from line 3 until it stops after executing line 5. The first electronic device sends another instruction, and the second electronic device starts executing from line 6 until it stops after executing line 10.

[0133] In this embodiment of the application, the second electronic device can execute code in either a step-by-step execution mode or a breakpoint execution mode. Compared with the former, the step-by-step execution mode has a better effect, that is, it shows the rendering effect of the control corresponding to each code segment to the developer, which is more effective for the development efficiency of the application interface.

[0134] In other embodiments, the first image data may further include the execution time of the i-th code segment and the rendering time after the i-th code segment is executed. The first electronic device may also display the execution time of the i-th code segment and the rendering time after the i-th code segment is executed. This allows developers to see the rendering time required for each control on the first electronic device. Thus, developers can perceive the rendering speed of different controls.

[0135] To more clearly illustrate the application interface development method provided in the embodiments of this application, a specific application interface development example is provided, taking a code segment consisting of one line of code as an example.

[0136] Figure 4 An example of the code for the application interface to be displayed provided in the embodiments of this application.

[0137] First, the first electronic device sends a message to the second electronic device, such as... Figure 4 The code for the application interface to be displayed is shown. The second electronic device will be used as an example to illustrate the execution of the code in a single-step execution mode.

[0138] The second electronic device receives such Figure 4 After the code for the application interface to be displayed is shown, it will receive multiple instruction messages. For each instruction message received, a line of code is executed, and a control tree is created during the code execution. Each node generated is rendered. Then, the second electronic device sends the rendering result to the first electronic device, so that the first electronic device can display the rendering result through a preview interface. Developers can clearly see the rendering process of each control.

[0139] The following describes the execution of each line of code and the rendering process of the second electronic device.

[0140] When the second electronic device executes line 1: create root view, it creates, as shown in the image. Figure 5 The root node of the control tree is the root view, and a root view is created on the root layer, resulting in the following: Figure 6 The root layer ① shown in (A) is then processed as follows: Figure 6 The root layer ① shown in (A) is rendered, and the rendering result is sent to the first electronic device for display as shown in the image. Figure 7 The preview interface shown in (A) is as follows: Figure 7 The preview interface shown in (A) displays the root layer, which includes the root view.

[0141] When the second electronic device executes line 2 of code: `create frame layout`, it creates a layout like... Figure 5 The leaf node of the control tree: a frame layout, and a frame layout is created on a detached layer, resulting in the following: Figure 6 As shown in (B) below, the detached layer ① is not mounted at this time. Therefore, the frame layout is recorded as a detached layer in the detached layer list (see [link]). Figure 6 (Middle (B) left side). Then the second electronic device is as follows: Figure 6 The free layer ① shown in (B) is rendered, and the rendering result is sent to the first electronic device, where it is displayed as shown. Figure 7 The preview interface shown in (B) is as follows: Figure 7 The preview interface shown in (B) displays a free layer including a frame layout.

[0142] When the second electronic device executes line 3: `add frame layout to root view`, it attaches the leaf node frame layout to the root node (i.e., the root view) in the control tree, removes the frame layout from the detached layer ①, and attaches it to the root view in the root layer ①, resulting in the following... Figure 6 As shown in (C), the root layer ② is now empty, and the frame layout in the free layer ① is also removed. Then the second electronic device...Figure 6 The root layer ② shown in (C) is rendered, and the rendering result is sent to the first electronic device for display as shown in the image. Figure 7 The preview interface shown in (C) is as follows: Figure 7 The preview interface shown in (C) includes a root view and a frame layout located above the root view.

[0143] When the second electronic device executes line 4 of code: create button, it creates something like... Figure 5 The leaf node shown is "button", and a button is created on the detached layer, resulting in the following: Figure 8 As shown in (A), the detached layer ① is not mounted at this time, so the frame layout is recorded as a detached layer in the detached layer list (see [link]). Figure 8 (Middle (A) left side). Then the second electronic device is as follows: Figure 8 The free layer ① shown in (A) is rendered, and the rendering result is sent to the first electronic device for display. Figure 9 The preview interface shown in (A) is as follows. Figure 9 The preview interface shown in (A) displays a free layer that includes a button.

[0144] It should be understood that when the second electronic device finishes executing line 4 of the code, the created control tree will look like this: Figure 5 As shown, since the button is not attached to the root node or leaf node of the control tree, the button is an independent node at this time.

[0145] When the second electronic device executes line 5 of the code: button.setbackground(yellow), as shown... Figure 8 As shown in (B), fill the background of the button on the detached layer ① with a yellow background color. Figure 8 (The example in the middle is filled with yellow diagonal stripes). Then the second electronic device is as follows: Figure 8 The free layer ① shown in (B) is rendered, and the rendering result is sent to the first electronic device for display. Figure 9 The preview interface shown in (B) is as follows. Figure 9 The preview interface shown in (B) displays a free layer including a button filled with the background color (yellow).

[0146] When the second electronic device executes line 6: create container, it creates a container like... Figure 5 The leaf nodes (containers) of the control tree shown are used to create containers on the detached layer, resulting in the following: Figure 8As shown in (C), the container is not mounted at this time, so it is recorded as a free layer in the free layer list (see [link]). Figure 8 (C) Left side). Then the second electronic device is as follows: Figure 8 The free layers ① and ② shown in (C) are rendered, and the rendering results are sent to the first electronic device for display. Figure 9 The preview interface shown in (C) is as follows. Figure 9 The preview interface shown in (C) displays a free layer including a button filled with the background color (yellow) and a container.

[0147] When the second electronic device executes line 7 of code: `add button to container`, it attaches the leaf node button to the leaf node (i.e., container) in the control tree, and attaches the button on detached layer ① to the container in detached layer ②, resulting in the following... Figure 8 The free layer ② shown in (D) is then processed by the second electronic device as follows: Figure 8 The free layer ② shown in (D) is rendered, and the rendering result is sent to the first electronic device, where it is displayed as shown. Figure 9 The preview interface shown in (D) is as follows. Figure 9 The preview interface shown in (D) displays a free layer including a container and a button on top of the container that is filled with the background color (yellow).

[0148] When the second electronic device executes line 8: `create text`, it creates a leaf node (text) in the control tree and creates text (text) on the detached layer, resulting in the following: Figure 8 As shown in (E), the detached layer ① is not currently mounted, so it is recorded as a detached layer in the detached layer list (see [link]). Figure 8 (Middle (E) left side). Then the second electronic device is as follows: Figure 8 The free layers ① and ② shown in (E) are rendered, and the rendering results are sent to the first electronic device for display. Figure 9 The preview interface shown in (E) in 9, as shown in (E) in 9, displays a free layer including text, container, and a button filled with the background color (yellow) located on top of the container.

[0149] When the second electronic device executes line 9: `add text to frame layout`, it attaches the leaf node `text` to the leaf node (i.e., the frame layout) in the control tree, as shown below. Figure 8 The text on the free layer ① shown in (E) is removed, resulting in the following: Figure 10 The detached layer shown in (A) is used to mount the text removed from the detached layer ① to a layer as shown in (A). Figure 6 On the frame layout of the root layer shown in (C), the following is obtained: Figure 10 The root layer ③ is shown in (B). Then the second electronic device... Figure 10 The root layer ③ shown in (B) is rendered, and the rendering result is sent to the first electronic device for display as shown in the image. Figure 13 The preview interface shown in (A) is as follows: Figure 13 The preview interface shown in (A) displays a root layer that includes a frame layout and a text layer above that frame layout.

[0150] When the second electronic device executes line 10: `add container to frame layout`, it attaches the leaf node `container` to the leaf node (i.e., the frame layout) in the control tree, as shown below. Figure 10 Remove the container on the free layer ② shown in (A), and mount the removed container to a location such as... Figure 10 On the frame layout of the root layer ③ shown in (B), the following is obtained: Figure 11 The root layer ④ is shown. Then the second electronic device is as follows: Figure 11 The root layer ④ shown is rendered, and the rendering result is sent to the first electronic device for display as shown. Figure 13 The preview interface shown in (B) is as follows: Figure 13 The preview interface shown in (B) displays a root layer that includes a frame layout, a text layer above the frame layout, a container layer above the frame layout, and a button layer above the container that is filled with a background color (yellow).

[0151] When the second electronic device executes line 11: `create list view`, it creates the leaf node (list view) of the control tree and creates a list view on the detached layer, resulting in the following... Figure 12As shown in (A) ①, the list view is not mounted at this time, so the list view is recorded in the list of detached layers (see...). Figure 12 (middle (A) left side). Then, the second electronic device is as follows: Figure 12 The free layer ① shown in (A) is rendered, and the rendering result is sent to the first electronic device for display. Figure 13 The preview interface shown in (C) is as follows: Figure 13 The preview interface shown in (C) displays a list view within a detached layer.

[0152] When the second electronic device executes line 12: `add list view to container`, it attaches the leaf node list view to the leaf node (i.e., the container) in the control tree, as shown below. Figure 12 Remove the list view from the detached layer ① shown in (A), and mount the removed list view to a layer such as... Figure 11 On the container in the root layer ④ shown, we get the following: Figure 12 The root layer ⑤ is shown in (B). Then, the second electronic device... Figure 12 The root layer ⑤ shown in (B) is rendered, and the rendering result is sent to the first electronic device for display as shown. Figure 13 The preview interface shown in (D) is as follows: Figure 13 The preview interface shown in (D) displays a root layer that includes a frame layout, a text layer above the frame layout, a container layer above the frame layout, a button layer above the container that is filled with a yellow background color, and a list view layer above the container.

[0153] After all the code has been executed, all controls created by the second electronic device have been merged into the root layer, with no detached layers. At this point, the created control tree looks like this: Figure 14 As shown.

[0154] In some other embodiments, Figure 4 In the code of the application interface shown, assuming a breakpoint is set on the create button, if the second electronic device executes the application interface code according to the breakpoint, then after receiving an instruction, the second electronic device will stop executing at the create button, and then continue executing the create button after receiving the next instruction until the code is completed.

[0155] In the embodiments of this application, Figure 4 Taking the application interface code shown as an example, if the rendering result of one or more code segments does not meet expectations, the developer can modify those code segments, execute the modified code segments on the second electronic device to generate the corresponding rendering result, and then display the rendering result on the first electronic device. For example, after the second electronic device executes line 5 of code: button.setbackground(yellow), and sends the corresponding rendering result to the first electronic device, the developer sees that the rendering result displayed on the first electronic device does not meet expectations. The developer can modify line 5 of code on the first electronic device, for example, to: button.setbackground(blue). Then, the first electronic device can send the modified line 5 of code to the second electronic device, which will execute the modified line 5 of code and send the corresponding rendering result back to the first electronic device for display.

[0156] In the embodiments provided above, the methods provided by the present application are described from the perspective of electronic devices (first electronic device, second electronic device) as the executing entity. To implement the functions of the methods provided in the embodiments of the present application, the electronic device may include hardware structures and / or software modules, implementing the above functions in the form of hardware structures, software modules, or a combination of hardware structures and software modules. Whether a particular function is executed in the form of hardware structures, software modules, or a combination of hardware structures and software modules depends on the specific application and design constraints of the technical solution.

[0157] In the above embodiments, the terms "when..." or "after..." can be interpreted, depending on the context, as meaning "if...", "after...", "in response to determining...", or "in response to detecting...". Similarly, the phrases "when..." or "if (the stated condition or event) is detected" can be interpreted, depending on the context, as meaning "if...", "in response to determining...", "when (the stated condition or event) is detected", or "in response to detecting (the stated condition or event)". Furthermore, in the above embodiments, relational terms such as "first" and "second" are used to distinguish one entity from another, without limiting any actual relationship or order between these entities.

[0158] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0159] In the above embodiments, implementation can be achieved entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented entirely or partially in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of the present invention are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state disk (SSD)). Where there is no conflict, the solutions in the above embodiments can be combined.

[0160] It should be noted that a portion of this patent application contains copyrighted material. The copyright holder retains all rights except for making copies of the contents of patent documents or records from the patent office.

Claims

1. A method for developing an application interface, characterized in that, include: The first electronic device sends the code of the application interface to be displayed to the second electronic device. The code includes N code segments, each of which corresponds to a root view or at least one control, where N is a positive integer greater than 1. When the first electronic device determines that code debugging of the application interface is required, the following process is repeated, with the value of i ranging from 1 to N: Send instruction information to the second electronic device, the instruction information being used to instruct the second electronic device to execute the i-th code segment in the code; The device receives first image data sent by the second electronic device, wherein when i equals 1, the first image data is generated by rendering the root view corresponding to the first code segment when the second electronic device executes the first code segment, and when i is greater than 1, the first image data is generated by rendering the root view and / or control corresponding to at least one of the first to the i-th code segments when the second electronic device executes the i-th code segment; Display the first image data; Wherein, when i equals j, and j is a positive integer greater than 1 and less than N, the j-th code segment includes instructions for creating the first control; The display of the first image data includes: Display a detached layer, the detached layer including the first control.

2. The method as described in claim 1, characterized in that, The code also includes N breakpoints, each of which corresponds to one of the N code segments.

3. The method as described in claim 1 or 2, characterized in that, When i equals 1, the first code segment includes instructions to create the root view; The display of the first image data includes: Display the root layer, which includes the root view.

4. The method as described in claim 1, characterized in that, When i equals j+k, k is a positive integer greater than 1 and less than N, and j+k is a positive integer greater than 1 and less than N, the j+k code segment includes an instruction to mount the first control to the root view; The display of the first image data includes: Switch from the detached layer to the displayed root layer, the root layer including the root view and the first control located on top of the root view.

5. The method as described in claim 4, characterized in that, When i equals j+m, m is a positive integer greater than k and less than N, and j+m is a positive integer less than N, the j+m code segment includes an instruction to mount the second control to the first control; The display of the first image data includes: The root layer is displayed, and the root layer also includes a second control located above the first control.

6. The method as described in claim 4, characterized in that, When i equals j+n, n is a positive integer greater than k and less than N, and j+n is a positive integer less than N, the j+n code segment includes instructions to mount the third control to the first control; The display of the first image data includes: The display includes a free layer, which further includes the third control located above the first control.

7. An application interface development method, characterized in that, include: The second electronic device receives the code of the application interface to be displayed sent by the first electronic device. The code includes N code segments, each of which corresponds to a root view or at least one control, where N is a positive integer greater than 1. The second electronic device receives instruction information sent by the first electronic device, the instruction information being used to instruct the second electronic device to execute the i-th code segment in the code, where i is a positive integer less than or equal to N; When i equals 1, the second electronic device executes the first code segment and renders the root view corresponding to the first code segment to generate second image data; or, when i is an integer greater than 1 and less than or equal to N, the second electronic device executes the i-th code segment and renders the root view and / or control corresponding to at least one of the code segments from the first code segment to the i-th code segment to generate third image data. The second electronic device sends first image data to the first electronic device, the first image data including the second image data or the third image data; Wherein, when i equals j, and j is a positive integer greater than 1 and less than N, the j-th code segment includes instructions for creating the first control; The second electronic device executes the i-th code segment and renders the root view and / or control corresponding to at least one of the code segments from the first code segment to the i-th code segment to generate third image data, including: Create the first control on the detached layer; The detached layer is rendered to obtain the third image data.

8. The method as described in claim 7, characterized in that, The code also includes N breakpoints, each of which corresponds one-to-one with one of the N code segments; the method further includes: When the second electronic device reaches each of the breakpoints, execution of the code segment following the breakpoint is stopped.

9. The method as described in claim 7 or 8, characterized in that, When i equals 1, the first code segment includes instructions to create a root view; The execution of the first code segment and the rendering of the root view corresponding to the first code segment to generate the second image data include: Create the root view on the root layer; Render the root layer to obtain the second image data.

10. The method as described in claim 7, characterized in that, When i equals j+k, k is a positive integer greater than 1 and less than N, and j+k is a positive integer greater than 1 and less than N, the j+k code segment includes an instruction to mount the first control to the root view; The second electronic device executes the i-th code segment and renders the root view and / or control corresponding to at least one of the code segments from the first code segment to the i-th code segment to generate third image data, including: Remove the first control from the detached layer and add the first control to the top layer of the root view in the root layer; The root layer is rendered to obtain the third image data.

11. The method as described in claim 10, characterized in that, When i equals j+m, m is a positive integer greater than k and less than N, and j+m is a positive integer less than N, the j+m code segment includes an instruction to mount the second control to the first control; The second electronic device executes the i-th code segment and renders the root view and / or control corresponding to at least one of the code segments from the first code segment to the i-th code segment to generate third image data, including: Remove the second control from the detached layer and add the second control above the first control in the root layer; The root layer is rendered to obtain the third image data.

12. The method as described in claim 10, characterized in that, When i equals j+n, n is a positive integer greater than k and less than N, and j+n is a positive integer less than N, the j+n code segment includes an instruction to mount the third control to the first control; The second electronic device executes the i-th code segment and renders the root view and / or control corresponding to at least one of the code segments from the first code segment to the i-th code segment to generate third image data, including: Add the third control in the detached layer to the top of the first control in the detached layer; The detached layer is rendered to obtain the third image data.

13. An electronic device, characterized in that, This includes the processor, memory, and display screen; The display screen is used to display image data; The memory is used to store one or more computer programs, which, when executed by the processor, cause the electronic device to perform the following: Send the code of the application interface to be displayed to the second electronic device. The code includes N code segments, each of which corresponds to a root view or at least one control, where N is a positive integer greater than 1. When it is determined that code debugging of the application interface is required, the following steps are repeated, with the value of i ranging from 1 to N: Send instruction information to the second electronic device, the instruction information being used to instruct the second electronic device to execute the i-th code segment in the code; The device receives first image data sent by the second electronic device, wherein when i equals 1, the first image data is generated by rendering the root view corresponding to the first code segment when the second electronic device executes the first code segment, and when i is greater than 1, the first image data is generated by rendering the root view and / or control corresponding to at least one of the first to the i-th code segments when the second electronic device executes the i-th code segment; The first image data is displayed on the screen. Where i equals j, and j is a positive integer greater than 1 and less than N, the j-th code segment includes instructions for creating the first control; when the computer program is executed by the processor, the electronic device specifically executes: Display a detached layer, the detached layer including the first control.

14. The electronic device as claimed in claim 13, characterized in that, The code also includes N breakpoints, each of which corresponds to one of the N code segments.

15. The electronic device as claimed in claim 13 or 14, characterized in that, When i equals 1, the first code segment includes instructions to create the root view; When the computer program is executed by the processor, the electronic device specifically performs the following: Display the root layer, which includes the root view.

16. The electronic device as claimed in claim 13, characterized in that, When i equals j+k, k is a positive integer greater than 1 and less than N, and j+k is a positive integer greater than 1 and less than N, the (j+k)th code segment includes an instruction to mount the first control to the root view; when the computer program is executed by the processor, the electronic device specifically executes: Switch from the detached layer to the displayed root layer, the root layer including the root view and the first control located on top of the root view.

17. The electronic device as claimed in claim 16, characterized in that, When i equals j+m, where m is a positive integer greater than k and less than N, and j+m is a positive integer less than N, the j+m-th code segment includes instructions to mount the second control to the first control; when the computer program is executed by the processor, the electronic device specifically executes: The root layer is displayed, and the root layer also includes a second control located above the first control.

18. The electronic device as claimed in claim 16, characterized in that, When i equals j+n, where n is a positive integer greater than k and less than N, and j+n is a positive integer less than N, the j+n-th code segment includes instructions to mount the third control to the first control; when the computer program is executed by the processor, the electronic device specifically executes: The display includes a free layer, which further includes the third control located above the first control.

19. An electronic device for developing application interfaces, characterized in that, Including processor and memory: The memory is used to store one or more computer programs, which, when executed by the processor, cause the electronic device to perform the following: The system receives code for an application interface to be displayed sent by a first electronic device. The code includes N code segments, each of which corresponds to a root view or at least one control, where N is a positive integer greater than 1. The device receives instruction information sent by the first electronic device, the instruction information being used to instruct the second electronic device to execute the i-th code segment in the code, where i is a positive integer less than or equal to N; When i equals 1, the first code segment is executed, and the root view corresponding to the first code segment is rendered to generate the second image data; or, when i is an integer greater than 1 and less than or equal to N, the i-th code segment is executed, and the root view and / or control corresponding to at least one of the first to the i-th code segments are rendered to generate the third image data. Send first image data to the first electronic device, wherein the first image data includes the second image data or the third image data; Wherein, when i equals j, and j is a positive integer greater than 1 and less than N, the j-th code segment includes instructions for creating the first control; When the computer program is executed by the processor, the electronic device specifically performs the following: Create the first control on the detached layer; The detached layer is rendered to obtain the third image data.

20. The electronic device as claimed in claim 19, characterized in that, The code also includes N breakpoints, each of which corresponds one-to-one with one of the N code segments; When the computer program is executed by the processor, the electronic device also performs: When execution reaches each breakpoint, execution of the code segment following that breakpoint is stopped.

21. The electronic device as claimed in claim 19 or 20, characterized in that, When i equals 1, the first code segment includes instructions to create a root view; When the computer program is executed by the processor, the electronic device specifically performs the following: Create the root view on the root layer; Render the root layer to obtain the second image data.

22. The electronic device as claimed in claim 19, characterized in that, When i equals j+k, k is a positive integer greater than 1 and less than N, and j+k is a positive integer greater than 1 and less than N, the j+k code segment includes an instruction to mount the first control to the root view; When the computer program is executed by the processor, the electronic device specifically performs the following: Remove the first control from the detached layer and add the first control to the top layer of the root view in the root layer; The root layer is rendered to obtain the third image data.

23. The electronic device as claimed in claim 22, characterized in that, When i equals j+m, m is a positive integer greater than k and less than N, and j+m is a positive integer less than N, the j+m code segment includes an instruction to mount the second control to the first control; When the computer program is executed by the processor, the electronic device specifically performs the following: Remove the second control from the detached layer and add the second control above the first control in the root layer; The root layer is rendered to obtain the third image data.

24. The electronic device as claimed in claim 22, characterized in that, When i equals j+n, where n is a positive integer greater than k and less than N, and j+n is a positive integer less than N, the (j+n)th code segment includes instructions to mount the third control to the first control; when the computer program is executed by the processor, the electronic device specifically executes: Add the third control in the detached layer to the top of the first control in the detached layer; The detached layer is rendered to obtain the third image data.

25. A computer-readable storage medium, characterized in that, Includes computer instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1-6, or to perform the method as described in any one of claims 7-12.

Images