User interface editing method and device, electronic equipment and readable storage medium

Abstract

The application discloses a user interface editing method and device, electronic equipment and a readable storage medium, comprising: displaying a target user interface to be edited; in response to an interface editing event of the target user interface sent by an interface editor, obtaining editing target information corresponding to the interface editing event; according to component identification information, obtaining component attribute information of a target interface component from a game server corresponding to the interface editor; according to the component attribute information and an event type corresponding to the interface editing event, editing a web page node of the target user interface to obtain an edited web page node, so as to display the edited target interface component in the target user interface. The method edits the web page node, realizes real-time preview of interface component modification in a browser client, and does not need to refresh the web page, so that the method can realize real-time viewing of visual effects of the edited target user interface, and improves editing efficiency of the user interface.

Description

Technical Field

[0001] This application relates to the field of game technology, specifically to a user interface editing method, apparatus, electronic device, and readable storage medium. Background Technology

[0002] H5 games, as a type of web-based game, present the game's user interface to players through a webpage. During the development of H5 games, user interface developers can use interface editors to design, edit, and preview the game's user interface.

[0003] However, due to the asynchronous resource mechanism of H5 games, when game resources are modified, the browser client needs to reload the game resources and refresh the webpage to see the effect of the changes. Therefore, when modifying the user interface of an H5 game, frequent reloading and refreshing are required, resulting in low efficiency in editing the user interface. Summary of the Invention

[0004] This application provides a user interface editing method, apparatus, electronic device, and readable storage medium, aiming to solve the technical problem of low editing efficiency of existing user interface editing methods.

[0005] Firstly, this application provides a user interface editing method, including:

[0006] Display the target user interface to be edited;

[0007] In response to an interface editing event sent by the interface editor for the target user interface, the editing target information corresponding to the interface editing event is obtained, wherein the editing target information includes component identification information of the target interface component in the target user interface;

[0008] Based on the component identification information, the component attribute information of the target interface component is obtained from the game server corresponding to the interface editor, wherein the game server is used to deploy the user interface to be edited by the interface editor, and each interface component in the user interface to be edited.

[0009] Based on the component attribute information and the event type corresponding to the interface editing event, the web page node of the target user interface is edited to obtain the edited web page node, so as to display the edited target interface component corresponding to the edited web page node in the target user interface.

[0010] Secondly, this application provides a user interface editing device, comprising:

[0011] The display unit is used to display the target user interface to be edited.

[0012] The first acquisition unit is configured to respond to an interface editing event sent by the interface editor to the target user interface and acquire the editing target information corresponding to the interface editing event, wherein the editing target information includes component identification information of the target interface component in the target user interface;

[0013] The second acquisition unit is used to acquire component attribute information of the target interface component from the game server corresponding to the interface editor based on the component identification information, wherein the game server is used to deploy the user interface to be edited by the interface editor, and each interface component in the user interface to be edited.

[0014] The editing unit is used to edit the web page nodes of the target user interface according to the component attribute information and the event type corresponding to the interface editing event, so as to obtain the edited web page nodes and display the edited target interface components corresponding to the edited web page nodes in the target user interface.

[0015] Thirdly, this application also provides an electronic device, which includes a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor calls the computer program in the memory, it executes the steps in any of the user interface editing methods provided in this application.

[0016] Fourthly, this application also provides a readable storage medium storing a computer program, which, when executed by a processor, implements the steps in any of the user interface editing methods provided in this application.

[0017] In summary, the user interface editing method provided in this application includes: displaying a target user interface to be edited; responding to an interface editing event sent by an interface editor for the target user interface, obtaining editing target information corresponding to the interface editing event, wherein the editing target information includes component identification information of target interface components in the target user interface; obtaining component attribute information of the target interface components from a game server corresponding to the interface editor based on the component identification information, wherein the game server is used to deploy the user interface to be edited by the interface editor and each interface component in the user interface to be edited; editing the web page nodes of the target user interface according to the component attribute information and the event type corresponding to the interface editing event to obtain the edited web page nodes, so as to display the edited target interface components corresponding to the edited web page nodes in the target user interface.

[0018] As can be seen, the user interface editing method provided in this application embodiment can achieve real-time preview of the modified interface components in the browser client by editing web page nodes, without refreshing the web page. Therefore, the method provided in this application embodiment can view the visual effect of the edited target user interface in real time, improving the editing efficiency of the user interface. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 This is a schematic diagram illustrating an application scenario of the user interface editing method provided in the embodiments of this application;

[0021] Figure 2 This is a flowchart illustrating a user interface editing method provided in an embodiment of this application;

[0022] Figure 3 This is a flowchart illustrating one of the events for listening to the interface editing provided in this application embodiment;

[0023] Figure 4 This is a schematic diagram of a process for obtaining component attribute information provided in an embodiment of this application;

[0024] Figure 5 This is a schematic diagram of a process for obtaining the target game address provided in an embodiment of this application;

[0025] Figure 6 This is a schematic diagram of a user interface editing system provided in the embodiments of this application;

[0026] Figure 7 This is a schematic diagram of an embodiment of the user interface editing device provided in this application.

[0027] Figure 8 This is a schematic diagram of an embodiment of the electronic device provided in this application. Detailed Implementation

[0028] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0029] In the description of the embodiments of this application, it should be understood that the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Therefore, features defined with "first" and "second" may explicitly or implicitly include one or more of the stated features. In the description of the embodiments of this application, "multiple" means two or more, unless otherwise explicitly specified.

[0030] To enable any person skilled in the art to implement and use this application, the following description is provided. In this description, details are set forth for purposes of explanation. It should be understood that those skilled in the art will recognize that this application can be implemented without using these specific details. In other instances, well-known processes will not be described in detail to avoid obscuring the description of the embodiments of this application with unnecessary detail. Therefore, this application is not intended to be limited to the embodiments shown, but is consistent with the broadest scope of the principles and features disclosed in the embodiments of this application.

[0031] This application provides a user interface editing method, apparatus, electronic device, and readable storage medium. The user interface editing apparatus can be integrated into an electronic device, which may be a server or a terminal, etc.

[0032] The execution subject of the user interface editing method in this application embodiment can be the user interface editing device provided in this application embodiment, or different types of electronic devices such as server equipment, physical host, or user equipment (UE) that integrate the user interface editing device. The user interface editing device can be implemented in hardware or software. The UE can be a terminal device such as a smartphone, tablet computer, laptop computer, handheld computer, desktop computer, or personal digital assistant (PDA).

[0033] The electronic device can operate independently or in a cluster.

[0034] See Figure 1 , Figure 1 This is a schematic diagram of a user interface editing system provided in an embodiment of this application. The user interface editing system may include an electronic device 100, which integrates a user interface editing device.

[0035] In addition, such as Figure 1 As shown, the user interface editing system may also include a memory 200 for storing data, such as text data.

[0036] It should be noted that, Figure 1 The schematic diagram of the user interface editing system shown is merely an example. The user interface editing system and scenario described in this application are for the purpose of more clearly illustrating the technical solutions of this application and do not constitute a limitation on the technical solutions provided in this application. As those skilled in the art will know, with the evolution of user interface editing systems and the emergence of new business scenarios, the technical solutions provided in this invention are also applicable to similar technical problems.

[0037] The following describes the user interface editing method provided in this application embodiment. In this application embodiment, an electronic device is used as the execution subject. For simplicity and ease of description, the execution subject will be omitted in the subsequent method embodiments. The user interface editing method includes: displaying a target user interface to be edited; responding to an interface editing event sent by an interface editor for the target user interface, obtaining editing target information corresponding to the interface editing event, wherein the editing target information includes component identification information of target interface components in the target user interface; obtaining component attribute information of the target interface components from a game server corresponding to the interface editor based on the component identification information, wherein the game server is used to deploy the user interface to be edited by the interface editor and each interface component in the user interface to be edited; editing the web page nodes of the target user interface according to the component attribute information and the event type corresponding to the interface editing event to obtain the edited web page nodes, so as to display the edited target interface components corresponding to the edited web page nodes in the target user interface.

[0038] Reference Figure 2 , Figure 2 This is a flowchart illustrating a user interface editing method provided in an embodiment of this application. It should be noted that although a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than that shown here. Specifically, the user interface editing method may include the following steps 201-204, wherein:

[0039] 201. Display the target user interface to be edited.

[0040] The target user interface (UI) refers to the user interface to be edited. In this embodiment, to facilitate UI developers in checking the editing progress of the target UI at any time, the electronic device can display the target UI in real time in the browser client. Therefore, for example, the target UI can refer to the UI currently displayed in the browser client when UI editing is being performed. For instance, when a UI developer of a web game needs to edit the task interface of the web game, they can operate the already opened web game in the browser client, open the task interface, and then edit the task interface using a tool for editing the user interface, and check the editing progress of the task interface from the browser client at any time.

[0041] To facilitate subsequent understanding, it should first be noted that the user interface in this embodiment includes at least one interface component. For example, a task interface may include a first interface component for displaying the task name, a second interface component for displaying task details, a third interface component for deleting the task, and a fourth interface component for closing the task interface. When editing the user interface, the actual process involves editing the attributes of each interface component, such as its position, length, and width, to change the display effect of the interface components in the user interface.

[0042] 202. In response to an interface editing event sent by the interface editor for the target user interface, obtain the editing target information corresponding to the interface editing event, wherein the editing target information includes component identification information of the target interface component in the target user interface.

[0043] A UI editor is a tool used to edit user interfaces. For example, a UI editor can refer to user interface editing tools such as CocoStudio and Egret UI Editor.

[0044] Interface editing events refer to computer events sent by the interface editor after a user interface developer edits the target user interface. For example, if the target user interface is a user interface displayed in real-time on a browser client, then an interface editing event is a computer event sent by the interface editor to the browser client after the user interface developer edits the target user interface. For ease of understanding, unless otherwise specified, the target user interface will be assumed to be a user interface displayed in real-time on a browser client in the following text.

[0045] Among them, interface editing events can refer to either add events or modify events. Add events refer to adding a new interface component to the target user interface, while modify events refer to modifying the properties of an existing interface component in the target user interface. For a description of the properties of interface components, please refer to the above text.

[0046] The information carried in the interface editing event includes information about the editing target, i.e., the editing target information. It is understood that the editing target information includes the component identification information of the target interface component being edited. The electronic device can identify the target interface component based on the component identification information. The component identification information can refer to the name information of the target interface component, or pre-set field information used to identify the target interface component, etc., and this application embodiment does not impose any limitations on this.

[0047] For example, a communication connection between the browser client and the interface editor can be pre-established before executing step 201. When the user interface developer edits the target interface component in the interface editor, the interface editor can generate an interface editing event based on the component identification information of the target interface component, and send the interface editing event to the browser client through the aforementioned communication connection, so that the browser client can obtain the editing target information and determine the target interface component to be edited. In some embodiments, a game server corresponding to the interface editor can be pre-built to deploy the user interface to be edited by the interface editor. For example, when editing the user interface of a web game, an HttpServer corresponding to the interface editor can be pre-built in the electronic device based on the game source code of the web game pre-stored in the electronic device, and the game resources of the web game can be deployed in the HttpServer to obtain the game server and the Uniform Resource Locator (URL) address of the game server. After the game server is built, the browser client can load the local data deployed in the game server (the user interface to be edited, and the various interface components in the user interface to be edited) through the game server. It is understood that the game resources of the web game include the user interface of the web game. Then, based on server information such as the game server's port information, IP (Internet Protocol) address, and URL address, a communication connection is established between the browser client and the interface editor. Next, a target game address is constructed based on the game source code's URL (GameURL) and the game server's URL (LocalURL). This target game address is sent to the browser client to allow the game server to access local data and run the web game on the browser client, using the user interface contained in the local data as the game's user interface. Since the browser client displays the default pages such as the login screen when running the web game through the target game address, the user interface developer can perform page selection operations on the browser client to display the target user interface to be edited in the web game (i.e., execute step 201). Therefore, each time the user interface developer edits the target user interface deployed on the game server using the interface editor, the user interface developer can see the visual effect of the edited target user interface on the browser client.

[0048] It should be noted that the game server constructed above is only used by user interface developers when editing the user interface. The process of calling local data through the game server can be understood as running a test version of the web game in the browser client. When players actually play the web game, the game server they access can be stored on a remote server. Even if the user interface developers edit the user interface during the development process, if they do not confirm and upload the data from the game server to the remote server, it will not change the user interface that players see when they actually play the web game. Therefore, this method will not affect the player's gaming experience.

[0049] 203. Based on the component identification information, obtain the component attribute information of the target interface component from the game server corresponding to the interface editor, wherein the game server is used to deploy the user interface to be edited by the interface editor, and each interface component in the user interface to be edited.

[0050] For details on the game server, please refer to step 202; further explanation will not be provided here.

[0051] Component attribute information refers to the attribute information of a target UI component after it has been edited. For example, if the attribute information of a UI component includes length and position, and a UI developer edits a target UI component that already exists in the target UI, then the component attribute information can refer to the length and position of the target UI component after editing. Another example is when a UI developer adds a target UI component to the target UI; the component attribute information refers to the length of the target UI component to be added and the position of the target UI component to be added to the target UI.

[0052] After obtaining the component identification information of the target interface component in the browser client, the component attribute information of the target interface component after editing by the interface editor can be loaded based on the component identification information through the connection established in step 202.

[0053] For example, when editing the target user interface in a web game, the user interface file of the target user interface can be obtained from the game server. This file contains component identification information and component attribute information for each interface component. The user interface file is then parsed to obtain the correspondence between component identification information and each interface component, as well as the component attribute information, forming a resource retrieval table. Based on the component identification information of the target interface component, the component attribute information of the target interface component is retrieved from the resource retrieval table. For instance, when using Egret UI Editor to edit the user interface, the user interface file refers to the EXML file corresponding to the user interface. In step 203, the EXML file corresponding to the target user interface in the game server can be parsed to obtain all nodes. The browser client traverses the EXML file tree structure, using component attribute information and interface component identification information as values, to update the dictionary data skinMap (i.e., the aforementioned resource retrieval table) used to store the component attribute information of the interface components, and then queries the skinMap to obtain the component attribute information of the target interface component.

[0054] It should be noted that the above steps for parsing EXML only need to be performed when the target user interface is edited for the first time. If the target user interface is not edited for the first time, the skinMap in the game server already contains the parsed component attribute information and identification information of the interface components. The component attribute information of the target interface components can be obtained directly from the skinMap.

[0055] 204. Based on the component attribute information and the event type corresponding to the interface editing event, edit the web page node of the target user interface to obtain the edited web page node, so as to display the edited target interface component corresponding to the edited web page node in the target user interface.

[0056] A webpage node refers to the element node (Element) corresponding to a webpage game opened by a browser client.

[0057] The event type corresponding to the interface editing event can be either "add" or "modify" as mentioned above.

[0058] After obtaining the component attribute information, the webpage nodes of the target user interface in the browser client can be edited. For example, when the event type corresponding to the interface editing event is "add," an element node can be added to the webpage node based on the component attribute information of the target interface component to display the target interface component in the target user interface. As another example, when the event type corresponding to the interface editing event is "modify," the target element node corresponding to the target interface component can be obtained, and the component attribute information of the target interface component obtained in step 203 can be used to replace the currently recorded component attribute information in the target element node. It is understood that since this embodiment directly edits the webpage nodes, the edited target interface component can be displayed in the target user interface after editing. It is also understood that the component attribute information of other interface components in the target user interface, besides the target interface component, is the same in the webpage node before and after editing; therefore, the visual effect of other interface components will not change.

[0059] It should be noted that the interface editing events sent by the interface editor also include deletion events. Deletion events refer to the removal of interface components from the target user interface. If the event type corresponding to the interface editing event is a deletion event, the target element node corresponding to the target interface component can be directly deleted from the web page node of the target user interface to remove the target interface component from the target user interface.

[0060] As can be seen, in this embodiment of the application, editing web page nodes enables real-time preview of the modified interface components in the browser client. In contrast, traditional methods require refreshing the preview interface, such as refreshing the browser client to reset the web game and refresh the display effect of the target user interface. Therefore, the method provided in this embodiment of the application can view the visual effect of the edited target user interface in real time, improving the efficiency of user interface editing.

[0061] In summary, the user interface editing method provided in this application includes: displaying a target user interface to be edited; responding to an interface editing event sent by an interface editor for the target user interface, obtaining editing target information corresponding to the interface editing event, wherein the editing target information includes component identification information of target interface components in the target user interface; obtaining component attribute information of the target interface components from a game server corresponding to the interface editor based on the component identification information, wherein the game server is used to deploy the user interface to be edited by the interface editor and each interface component in the user interface to be edited; editing the web page nodes of the target user interface according to the component attribute information and the event type corresponding to the interface editing event to obtain the edited web page nodes, so as to display the edited target interface components corresponding to the edited web page nodes in the target user interface.

[0062] As can be seen, the user interface editing method provided in this application embodiment can achieve real-time preview of the modified interface components in the browser client by editing web page nodes, without refreshing the web page. Therefore, the method provided in this application embodiment can view the visual effect of the edited target user interface in real time, improving the editing efficiency of the user interface.

[0063] While the method described in steps 201-204 can efficiently edit the user interface, in actual user interface editing processes, developers perform editing operations frequently, resulting in a large number of interface editing events. Therefore, to achieve real-time display of the editing effects, this method places high demands on the data transmission rate between the browser client and the interface editor. To meet these requirements, this application also provides a method for data transmission between the browser client and the interface editor based on an instant messaging application. (Reference) Figure 3 At this point, before the step "in response to the interface editing event sent by the interface editor to the target user interface, obtain the editing target information corresponding to the interface editing event", the following steps are included:

[0064] 301. Listen to the interface editor based on a preset instant messaging application to obtain the interface editing event of the target user interface sent by the interface editor.

[0065] Instant messaging applications are applications capable of efficiently transmitting data. In this embodiment, the pre-defined instant messaging application can be built based on Scoket.IO.

[0066] SocketIO is a bidirectional communication data exchange technology that establishes a connection between a client and a server.

[0067] For example, an instant messaging application can be constructed by the following steps:

[0068] (1.1) Receive the target game address of the game to be edited, wherein the target game address includes the local resource address of the game server corresponding to the interface editor.

[0069] The game to be edited can refer to the web game currently open on the browser client, that is, the web game to which the target user interface belongs.

[0070] The target game address is the webpage address of the game to be edited, which is accessed by calling the game server corresponding to the interface editor. As explained in step 202, the target game address can be generated based on the URL address of the game's source code and the URL address of the game server.

[0071] The local resource address refers to the URL address of the game server mentioned above, i.e., LocalURL.

[0072] In some embodiments, the user interface developers are not internal staff of the game company to which the game to be edited belongs. Therefore, if the game source code is stored on the device where the game server is located, i.e., an electronic device, it may lead to the leakage of the game source code and affect its security. To avoid this problem, the game source code can be stored on the target device, separating the device where the game server is located from the target device. The user interface deployed on the game server, as well as the various interface components within the user interface, can be loaded across platforms to solve the problem of relying on local game source code, thereby improving the security of the game source code and reducing the risk of leakage. The target device can refer to a device used internally by the game company. In this embodiment, the target device can first compile and run the game source code to obtain the game source code's URL address, GameURL. Then, the target device can send GameURL to the electronic device, or the electronic device can request GameURL from the target device. After obtaining GameURL, the electronic device uses an interface editor to combine GameURL with the local game server's URL address, LocalURL, to form the target game address. For example, it can be combined into a target game address in the format GameURL?local=LocalURL, and then the combined target game address is sent to the browser client.

[0073] It should be noted that the game server called by the player when actually playing the game to be edited in step 202 can also be stored on the target device. When the player actually plays the game to be edited, the game server on the target device can be called based on the game source code on the target device.

[0074] (1.2) Parse the target game address to obtain the local resource address.

[0075] During parsing, the local field in the target game address can be queried, and the address contained in the local field can be used as the local resource address. For example, for the target game address in the format GameURL?local=LocalURL, the address contained in the local field "local=" can be queried, and the found address can be used as the local resource address.

[0076] (1.3) Based on the local resource address, construct an instant messaging application between the game server and the game server.

[0077] For example, if the instant messaging application is built on Socket.IO, then during step (1.3), the game server's IP address and port information can be used as parameters to generate an IOSocket. On the browser client side, a websocket connection is established using the game server's LocalURL URL to construct the instant messaging application between the browser client and the game server. Through the instant messaging application, the interface editor can send interface editing events to the browser client using the `emit` function within the instant messaging application. The browser client can listen for these interface editing events using the `on` function within the instant messaging application.

[0078] As can be seen, the method in step 301 enables efficient data transmission via instant messaging applications, improving the efficiency of user interface editing. Furthermore, this method allows the game source code to be deployed on remote target devices, separating the game server from the game source code, thus enhancing the security of the game source code and reducing the risk of leakage.

[0079] In some embodiments, multiple user interfaces to be edited are deployed on the game server. Therefore, the game server will contain multiple user interface files corresponding to these user interfaces. The parsed resource retrieval table will contain the identification information and component attribute information of the interface components in these multiple user interfaces. To obtain the component attribute information of the target interface component, the identification information and component attribute information of the interface components in each user interface can be associated with the identification information of the user interface file of each user interface when constructing the resource retrieval table. At this time, the editing target information also includes the interface identification information corresponding to the target user interface, as referenced... Figure 4 The step "obtaining the component attribute information of the target interface component from the game server corresponding to the interface editor based on the component identification information" includes:

[0080] 401. Obtain the resource retrieval table in the game server corresponding to the interface editor, wherein the resource retrieval table is used to store the interface resource information of each user interface to be edited and the identification information of each user interface, and the interface resource information of each user interface includes the identification information and component attribute information of each interface component in the user interface.

[0081] In some embodiments, the user interface identification information may refer to the path information of the user interface file stored in the game server, and the interface component identification information may refer to the name information of the interface component. To improve the efficiency of user interface editing, when opening a web game on a browser client, the user interface files corresponding to all user interfaces in the web game can be parsed first to construct a resource retrieval table. Then, when editing the user interface of the web game, the constructed resource retrieval table can be directly obtained from the game server, and the component attribute information of the target interface component can be loaded from it. At this time, before the step "obtaining the resource retrieval table in the game server corresponding to the interface editor", the following steps are included:

[0082] (2.1) Obtain the user interface files corresponding to each user interface in the game to be edited, as well as the resource path information of each user interface file.

[0083] Resource path information refers to the path information of the user interface files stored in the game server.

[0084] Understandably, the user interface files corresponding to each user interface can be stored on the electronic device before the game server is built. After the game server is built, the user interface developers deploy them to the game server, or the game server automatically retrieves the user interface files stored on the electronic device for deployment. When performing step (2.1), the user interface files corresponding to each user interface can be retrieved from the game server, along with the resource path information of each user interface file.

[0085] (2.2) Parse each of the user interface files to obtain the component name information of each interface component in each user interface file, and the component attribute information of each interface component in each user interface file.

[0086] For detailed explanations of the analysis, please refer to step 203; further details will not be provided here.

[0087] (2.3) Construct a resource retrieval table based on the resource path information of the user interface file corresponding to each user interface, the component name information of each interface component in the user interface file of each user interface, and the component attribute information of each interface component in the user interface file of each user interface, and store the resource retrieval table in the game server corresponding to the interface editor.

[0088] The electronic device can associate the resource path information of the user interface file corresponding to each user interface, the component name information of each interface component in the user interface file of each user interface, and the component attribute information of each interface component in the user interface file of each user interface to construct a resource retrieval table, and store the constructed resource retrieval table in the game server for easy retrieval later.

[0089] For example, when using Egret UI Editor to edit the user interface, the user interface file refers to the EXML file corresponding to the user interface. When building the resource retrieval table, the EXML corresponding to each user interface in the game server can be parsed to obtain all the nodes in each EXML. The browser client traverses the tree structure of each EXML file, using the resource address information of each user interface file as the key and the component attribute information and the identification information of the interface component as the value, to build a dictionary data skinMap (i.e., the resource retrieval table mentioned above) to store the identification information and component attribute information of the interface components.

[0090] In other embodiments, the user interface file corresponding to the user interface can be parsed each time the user interface is first opened. The component name information, component attribute information, and resource path information of the user interface file obtained after parsing are associated and updated in the resource retrieval table. This can balance the computational load when the electronic device parses the user interface file and avoid parsing too many user interface files at once. For example, when using Egret UI Editor to edit the user interface, the user interface file refers to the EXML file corresponding to the user interface. When the user interface developer opens the target user interface, the EXML corresponding to the target user interface in the game server can be parsed to obtain all the nodes in the EXML. The browser client traverses the EXML file tree structure, using the resource address information of the target user interface file as the key and the component attribute information and the identification information of the interface components as the value, to update the dictionary data skinMap (i.e., the resource retrieval table mentioned above) used to store the identification information and component attribute information of the interface components.

[0091] In practice, one of the two methods for constructing the resource retrieval table described above can be selected, and this application embodiment does not impose any restrictions on this.

[0092] 402. Based on the interface identification information, retrieve the interface resource information corresponding to the target user interface from the resource retrieval table.

[0093] The interface resource information for each user interface includes the identification information and component attribute information of the interface components in each user interface.

[0094] For example, the corresponding value can be obtained by querying based on the interface identification information and the key of the skinmap. The obtained value is the interface resource information corresponding to the target user interface.

[0095] 403. Based on the component identification information, retrieve the component attribute information of the target interface component from the interface resource information.

[0096] The specific query process will not be described in detail.

[0097] As explained in step 202, the game server corresponding to the interface editor (hereinafter referred to as the first game server for ease of understanding) is different from the game server called by the player when actually playing the game to be edited (hereinafter referred to as the second game server for ease of understanding). Therefore, when the game source code is deployed on a remote target device, in order to enable the browser client to distinguish between the first game address used to call the first game server and the second game address used to call the second game server, this application also provides a method that can determine whether the game address is used to call the first game server or the second game server based on the local field in the received game address. Reference Figure 5 At this point, the step "Receive the target game address of the game to be edited" includes:

[0098] 501. Receive the initial address of the game to be edited.

[0099] The initial address refers to the received game address, before it is determined whether it is used to call the first resource data or the second game server. For example, an electronic device can use the game address of each game to be edited received by the browser client as the initial address of the game to be edited.

[0100] 502. Detect whether the local field of the initial address contains a local resource address.

[0101] The local field is a field used to store the local address of the electronic device, as shown in the example in step (1.2).

[0102] Taking the initial address format as GameURL?local=LocalURL as an example, when executing step 502, it can be checked whether the local field "local=" in the initial address contains a local resource address. If it does, the initial address can be used as the target game address for the game to be edited, and the first game server can be called based on this initial address. If it does not contain it, it means that the second game server needs to be called based on this initial address. That is, after step "checking whether the local field of the initial address contains a local resource address", the following steps are also included:

[0103] If the local field does not contain a local resource address, then the game user interface in the target device, as well as the interface components in each of the game user interfaces, are loaded according to the initial address.

[0104] 503. If the local field contains a local resource address, then the initial address is set to the target game address of the game to be edited.

[0105] After editing the target user interface using the methods described above, if the user interface developer confirms from the browser client that the target user interface has met the requirements, a confirmation operation can be issued to upload the component attribute information of each interface component deployed in the game server corresponding to the interface editor to the target device. When the player plays the game to be edited, they can see the edited target user interface. That is, after the step "editing the web page nodes of the target user interface according to the component attribute information and the event type corresponding to the interface editing event to obtain the edited web page nodes, so as to display the edited target interface components corresponding to the edited web page nodes in the target user interface," it also includes:

[0106] In response to the confirmation operation of the edited target interface component, the component attribute information of each interface component deployed in the game server is uploaded to the target device.

[0107] For ease of understanding, please refer to Figure 6 This application also provides a user interface editing system 600, which includes:

[0108] The target device 601 and the local device 602, the local device 602 including the browser client 6021, the interface editor 6022 and the first game server 6023.

[0109] A second game server 6011 and game source code 6012 are deployed in the target device 601.

[0110] First, let's explain the construction of the first game server 6023: When editing the user interface, the target device 601 first compiles and runs the game source code 6012 to obtain the game source code address GameURL, and sends the game source code address GameURL to the local device 602. The local device 602 constructs the first game server 6023 based on the GameURL.

[0111] After the first game server 6023 is set up, the local device 602 combines the GameURL and the LocalURL of the first game server 6023 into the target game address and sends the target game address to the browser client 6021. The browser client 6021 first checks whether the local field of the received target game address contains the local resource address. Understandably, in this example, the local field of the target game address received by the browser client 6021 contains the local resource address LocalURL. At this time, the browser client 6021 parses the target game address and obtains the local resource address LocalURL. The local device 602 builds an instant messaging application between the browser client 6021 and the first game server 6023 based on Socket.IO, and generates an IOSocket with the IP address and port information of the first game server 6023 as parameters. On the browser client 6021 side, a websocket connection is established through the local resource address LocalURL to build an instant messaging application between the browser client 6021 and the interface editor 6022. The interface editor 6022 can send interface editing events to the browser client 6021 using the `emit` function in the instant messaging application. The browser client 6021 can listen for these interface editing events using the `on` function in the instant messaging application. Simultaneously, the browser client 6021 runs the game to be edited based on the target game address and displays the target user interface to be edited in response to the user interface developer's page selection operation.

[0112] When the browser client 6021 listens to the interface editing event sent by the interface editor 6022, it obtains the editing target information corresponding to the interface editing event. Based on the component name information and resource path information in the editing target information, it obtains the component attribute information of the target interface component from the first game server 6023. Based on the component attribute information of the target interface component and the event type corresponding to the interface editing event, it edits the web page node of the target user interface to obtain the edited web page node, so as to display the edited target interface component corresponding to the edited web page node in the target user interface.

[0113] After confirmation by the user interface developers, the data in the first game server 6023 can be uploaded to the second game server 6011.

[0114] To better implement the user interface editing method in the embodiments of this application, based on the user interface editing method, the embodiments of this application also provide a user interface editing device, such as... Figure 7The diagram shown is a schematic representation of an embodiment of the user interface editing device 700 in this application. The user interface editing device 700 includes:

[0115] Display unit 701 is used to display the target user interface to be edited;

[0116] The first acquisition unit 702 is configured to respond to an interface editing event sent by the interface editor to the target user interface and acquire the editing target information corresponding to the interface editing event, wherein the editing target information includes component identification information of the target interface component in the target user interface;

[0117] The second acquisition unit 703 is used to acquire the component attribute information of the target interface component from the game server corresponding to the interface editor according to the component identification information, wherein the game server is used to deploy the user interface to be edited by the interface editor, and each interface component in the user interface to be edited.

[0118] The editing unit 704 is used to edit the web page node of the target user interface according to the component attribute information and the event type corresponding to the interface editing event, so as to obtain the edited web page node and display the edited target interface component corresponding to the edited web page node in the target user interface.

[0119] In one possible implementation of this application, the first acquisition unit 702 is further configured to:

[0120] The interface editor is monitored by a preset instant messaging application to obtain interface editing events sent by the interface editor for the target user interface.

[0121] In one possible implementation of this application, the display unit 701 is further configured to:

[0122] Receive the target game address of the game to be edited, wherein the target game address includes the local resource address of the game server corresponding to the interface editor;

[0123] Parse the target game address to obtain the local resource address;

[0124] Based on the local resource address, an instant messaging application is built that communicates with the interface editor.

[0125] In one possible implementation of this application, the target game address further includes the game source code address of the game source code in the target device, and the target device is different from the device where the game server is located.

[0126] In one possible implementation of this application, the display unit 701 is further configured to:

[0127] Receive the initial address of the game to be edited;

[0128] Detect whether the local field of the initial address contains a local resource address;

[0129] If the local field contains a local resource address, then the initial address is set to the target game address of the game to be edited.

[0130] In one possible implementation of this application, the display unit 701 is further configured to:

[0131] If the local field does not contain a local resource address, then the game user interface in the target device, as well as the interface components in each of the game user interfaces, are loaded according to the initial address.

[0132] In one possible implementation of this application, the editing target information further includes interface identification information corresponding to the target user interface, and the second acquisition unit 703 is further configured to:

[0133] Obtain the resource retrieval table in the game server corresponding to the interface editor. The resource retrieval table is used to store the interface resource information of each user interface to be edited and the identification information of each user interface. The interface resource information of each user interface includes the identification information and component attribute information of each interface component in the user interface.

[0134] Based on the interface identification information, the interface resource information corresponding to the target user interface is obtained from the resource retrieval table;

[0135] Based on the component identification information, the component attribute information of the target interface component is obtained from the interface resource information.

[0136] In one possible implementation of this application, the identification information of the user interface is the resource path information of the user interface file corresponding to the user interface, and the identification information of the interface component is the component name information.

[0137] The second acquisition unit 703 is also used for:

[0138] Obtain the user interface files corresponding to each user interface in the game to be edited, as well as the resource path information of each user interface file;

[0139] Parse each of the user interface files to obtain the component name information of each interface component in each user interface file, as well as the component attribute information of each interface component in each user interface file;

[0140] Based on the resource path information of the user interface file corresponding to each user interface, the component name information of each interface component in the user interface file of each user interface, and the component attribute information of each interface component in the user interface file of each user interface, a resource retrieval table is constructed and stored in the game server corresponding to the interface editor.

[0141] In one possible implementation of this application, the editing unit 704 is further configured to:

[0142] In response to the confirmation operation of the edited target interface component, the component attribute information of each interface component deployed in the game server is uploaded to the target device.

[0143] In practice, the above modules can be implemented as independent entities or combined in any way to be implemented as the same or several entities. For the specific implementation of the above modules, please refer to the previous method implementation examples, which will not be repeated here.

[0144] Since the user interface editing device can execute the steps in the user interface editing method in any embodiment, it can achieve the beneficial effects that the user interface editing method in any embodiment of this application can achieve, as detailed in the preceding description, and will not be repeated here.

[0145] Furthermore, to better implement the user interface editing method in the embodiments of this application, based on the user interface editing method, the embodiments of this application also provide an electronic device, see below. Figure 8 , Figure 8 This illustration shows a structural diagram of an electronic device according to an embodiment of this application. Specifically, the electronic device provided in this embodiment includes a processor 801. The processor 801 is used to execute a computer program stored in a memory 802 to implement the steps of the user interface editing method in any embodiment; or, the processor 801 is used to execute a computer program stored in a memory 802 to implement, for example... Figure 7 The functions of each module in the corresponding embodiment are as follows:

[0146] Display the target user interface to be edited;

[0147] In response to an interface editing event sent by the interface editor for the target user interface, the editing target information corresponding to the interface editing event is obtained, wherein the editing target information includes component identification information of the target interface component in the target user interface;

[0148] Based on the component identification information, the component attribute information of the target interface component is obtained from the game server corresponding to the interface editor, wherein the game server is used to deploy the user interface to be edited by the interface editor, and each interface component in the user interface to be edited.

[0149] Based on the component attribute information and the event type corresponding to the interface editing event, the web page node of the target user interface is edited to obtain the edited web page node, so as to display the edited target interface component corresponding to the edited web page node in the target user interface.

[0150] In one possible implementation of this application, the processor 801 is further configured to:

[0151] The interface editor is monitored by a preset instant messaging application to obtain interface editing events sent by the interface editor for the target user interface.

[0152] In one possible implementation of this application, the processor 801 is further configured to:

[0153] Receive the target game address of the game to be edited, wherein the target game address includes the local resource address of the game server corresponding to the interface editor;

[0154] Parse the target game address to obtain the local resource address;

[0155] Based on the local resource address, an instant messaging application is built that communicates with the interface editor.

[0156] In one possible implementation of this application, the target game address further includes the game source code address of the game source code in the target device, and the target device is different from the device where the game server is located.

[0157] In one possible implementation of this application, the processor 801 is further configured to:

[0158] Receive the initial address of the game to be edited;

[0159] Detect whether the local field of the initial address contains a local resource address;

[0160] If the local field contains a local resource address, then the initial address is set to the target game address of the game to be edited.

[0161] In one possible implementation of this application, the processor 801 is further configured to:

[0162] If the local field does not contain a local resource address, then the game user interface in the target device, as well as the interface components in each of the game user interfaces, are loaded according to the initial address.

[0163] In one possible implementation of this application, the editing target information further includes interface identification information corresponding to the target user interface, and the processor 801 is further configured to:

[0164] Obtain the resource retrieval table in the game server corresponding to the interface editor. The resource retrieval table is used to store the interface resource information of each user interface to be edited and the identification information of each user interface. The interface resource information of each user interface includes the identification information and component attribute information of each interface component in the user interface.

[0165] Based on the interface identification information, the interface resource information corresponding to the target user interface is obtained from the resource retrieval table;

[0166] Based on the component identification information, the component attribute information of the target interface component is obtained from the interface resource information.

[0167] In one possible implementation of this application, the identification information of the user interface is the resource path information of the user interface file corresponding to the user interface, and the identification information of the interface component is the component name information.

[0168] Processor 801 is also used for:

[0169] Obtain the user interface files corresponding to each user interface in the game to be edited, as well as the resource path information of each user interface file;

[0170] Parse each of the user interface files to obtain the component name information of each interface component in each user interface file, as well as the component attribute information of each interface component in each user interface file;

[0171] Based on the resource path information of the user interface file corresponding to each user interface, the component name information of each interface component in the user interface file of each user interface, and the component attribute information of each interface component in the user interface file of each user interface, a resource retrieval table is constructed and stored in the game server corresponding to the interface editor.

[0172] In one possible implementation of this application, the processor 801 is further configured to:

[0173] In response to the confirmation operation of the edited target interface component, the component attribute information of each interface component deployed in the game server is uploaded to the target device.

[0174] For example, a computer program may be divided into one or more modules / units, one or more of which are stored in memory 802 and executed by processor 801 to complete the embodiments of this application. One or more modules / units may be a series of computer program instruction segments capable of performing a specific function, which describe the execution process of the computer program in a computer device.

[0175] The electronic device may include, but is not limited to, processor 801 and memory 802. Those skilled in the art will understand that the illustrations are merely examples of an electronic device and do not constitute a limitation on the device. It may include more or fewer components than illustrated, or combine certain components, or use different components.

[0176] The processor 801 can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor. The processor is the control center of the electronic device, connecting various parts of the electronic device through various interfaces and lines.

[0177] The memory 802 can be used to store computer programs and / or modules. The processor 801 implements various functions of the computer device by running or executing the computer programs and / or modules stored in the memory 802 and by calling the data stored in the memory 802. The memory 802 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, application programs required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the electronic device (such as audio data, video data, etc.). In addition, the memory may include high-speed random access memory, and may also include non-volatile memory, such as hard disk, RAM, plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0178] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the user interface editing device, electronic device and its corresponding modules described above can be referred to the description of the user interface editing method in any embodiment, and will not be repeated here.

[0179] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by instructions, or by instructions controlling related hardware. These instructions can be stored in a readable storage medium and loaded and executed by a processor.

[0180] Therefore, embodiments of this application provide a readable storage medium storing a computer program. When executed by a processor, this computer program performs the steps of the user interface editing method in any embodiment of this application. Specific operations can be found in the description of the user interface editing method in any embodiment, for example:

[0181] Display the target user interface to be edited;

[0182] In response to an interface editing event sent by the interface editor for the target user interface, the editing target information corresponding to the interface editing event is obtained, wherein the editing target information includes component identification information of the target interface component in the target user interface;

[0183] Based on the component identification information, the component attribute information of the target interface component is obtained from the game server corresponding to the interface editor, wherein the game server is used to deploy the user interface to be edited by the interface editor, and each interface component in the user interface to be edited.

[0184] Based on the component attribute information and the event type corresponding to the interface editing event, the web page node of the target user interface is edited to obtain the edited web page node, so as to display the edited target interface component corresponding to the edited web page node in the target user interface.

[0185] In one possible implementation of this application, the readable storage medium is further used for:

[0186] The interface editor is monitored by a preset instant messaging application to obtain interface editing events sent by the interface editor for the target user interface.

[0187] In one possible implementation of this application, the readable storage medium is further used for:

[0188] Receive the target game address of the game to be edited, wherein the target game address includes the local resource address of the game server corresponding to the interface editor;

[0189] Parse the target game address to obtain the local resource address;

[0190] Based on the local resource address, an instant messaging application is built that communicates with the interface editor.

[0191] In one possible implementation of this application, the target game address further includes the game source code address of the game source code in the target device, and the target device is different from the device where the game server is located.

[0192] In one possible implementation of this application, the readable storage medium is further used for:

[0193] Receive the initial address of the game to be edited;

[0194] Detect whether the local field of the initial address contains a local resource address;

[0195] If the local field contains a local resource address, then the initial address is set to the target game address of the game to be edited.

[0196] In one possible implementation of this application, the readable storage medium is further used for:

[0197] If the local field does not contain a local resource address, then the game user interface in the target device, as well as the interface components in each of the game user interfaces, are loaded according to the initial address.

[0198] In one possible implementation of this application, the editing target information further includes interface identification information corresponding to the target user interface, and the readable storage medium is further used for:

[0199] Obtain the resource retrieval table in the game server corresponding to the interface editor. The resource retrieval table is used to store the interface resource information of each user interface to be edited and the identification information of each user interface. The interface resource information of each user interface includes the identification information and component attribute information of each interface component in the user interface.

[0200] Based on the interface identification information, the interface resource information corresponding to the target user interface is obtained from the resource retrieval table;

[0201] Based on the component identification information, the component attribute information of the target interface component is obtained from the interface resource information.

[0202] In one possible implementation of this application, the identification information of the user interface is the resource path information of the user interface file corresponding to the user interface, and the identification information of the interface component is the component name information.

[0203] Readable storage media are also used for:

[0204] Obtain the user interface files corresponding to each user interface in the game to be edited, as well as the resource path information of each user interface file;

[0205] Parse each of the user interface files to obtain the component name information of each interface component in each user interface file, as well as the component attribute information of each interface component in each user interface file;

[0206] Based on the resource path information of the user interface file corresponding to each user interface, the component name information of each interface component in the user interface file of each user interface, and the component attribute information of each interface component in the user interface file of each user interface, a resource retrieval table is constructed and stored in the game server corresponding to the interface editor.

[0207] In one possible implementation of this application, the readable storage medium is further used for:

[0208] In response to the confirmation operation of the edited target interface component, the component attribute information of each interface component deployed in the game server is uploaded to the target device.

[0209] The readable storage medium may include: read-only memory (ROM), random access memory (RAM), magnetic disk or optical disk, etc.

[0210] Since the instructions stored in the readable storage medium can execute the steps of the user interface editing method in any embodiment of this application, the beneficial effects that the user interface editing method in any embodiment of this application can achieve can be realized, as detailed in the preceding description, and will not be repeated here.

[0211] The foregoing has provided a detailed description of a user interface editing method, apparatus, storage medium, and electronic device provided in the embodiments of this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A user interface editing method, characterized in that, include: Receive the initial address of the game to be edited; The local field of the initial address is checked to see if it contains a local resource address, which points to a game server deployed on a local device. The game source code of the game to be edited is deployed on a target device that is different from the local device. If the local field contains a local resource address, the target user interface to be edited is displayed; In response to an interface editing event sent by the interface editor for the target user interface, the editing target information corresponding to the interface editing event is obtained, wherein the editing target information includes component identification information of the target interface component in the target user interface, and interface identification information corresponding to the target user interface; Based on the component identification information, the component attribute information of the target interface component is obtained from the game server corresponding to the interface editor. The game server is used to deploy the user interface to be edited by the interface editor, and each interface component within the user interface to be edited. The method for obtaining the component attribute information includes: Obtain the resource retrieval table in the game server corresponding to the interface editor. The resource retrieval table is used to store the interface resource information of each user interface to be edited and the identification information of each user interface. The interface resource information of each user interface includes the identification information and component attribute information of each interface component in the user interface. Based on the interface identification information, the interface resource information corresponding to the target user interface is obtained from the resource retrieval table; Based on the component identification information, the component attribute information of the target interface component is obtained from the interface resource information; Based on the component attribute information and the event type corresponding to the interface editing event, the web page node of the target user interface is edited to obtain the edited web page node, so as to display the edited target interface component corresponding to the edited web page node in the target user interface.

2. The user interface editing method according to claim 1, characterized in that, Before obtaining the editing target information corresponding to the interface editing event in response to the interface editor sending an interface editing event for the target user interface, the method further includes: The interface editor is monitored by a preset instant messaging application to obtain interface editing events sent by the interface editor for the target user interface.

3. The user interface editing method according to claim 2, characterized in that, Before displaying the target user interface to be edited, the following is also included: Receive the target game address of the game to be edited, wherein the target game address includes the local resource address of the game server corresponding to the interface editor; Parse the target game address to obtain the local resource address; Based on the local resource address, an instant messaging application is built that communicates with the interface editor.

4. The user interface editing method according to claim 3, characterized in that, The target game address also includes the game source code address in the target device, and the target device is different from the device where the game server is located.

5. The user interface editing method according to claim 1, characterized in that, After detecting whether the local field of the initial address contains a local resource address, the method further includes: If the local field does not contain a local resource address, then the game user interface in the target device, as well as the interface components in each of the game user interfaces, are loaded according to the initial address.

6. The user interface editing method according to claim 1, characterized in that, The user interface's identification information is the resource path information of the user interface file corresponding to the user interface, and the interface component's identification information is the component name information. Before obtaining the resource retrieval table from the game server corresponding to the interface editor, the process includes: Obtain the user interface files corresponding to each user interface in the game to be edited, as well as the resource path information of each user interface file; Parse each of the user interface files to obtain the component name information of each interface component in each user interface file, as well as the component attribute information of each interface component in each user interface file; Based on the resource path information of the user interface file corresponding to each user interface, the component name information of each interface component in the user interface file of each user interface, and the component attribute information of each interface component in the user interface file of each user interface, a resource retrieval table is constructed and stored in the game server corresponding to the interface editor.

7. The user interface editing method according to any one of claims 1-6, characterized in that, After editing the webpage node of the target user interface according to the component attribute information and the event type corresponding to the interface editing event to obtain the edited webpage node, and displaying the edited target interface component corresponding to the edited webpage node in the target user interface, the method further includes: In response to the confirmation operation of the edited target interface component, the component attribute information of each interface component deployed in the game server is uploaded to the target device.

8. A user interface editing device, characterized in that, include: The display unit is used to receive the initial address of the game to be edited; The local field of the initial address is checked to see if it contains a local resource address, which points to a game server deployed on a local device. The game source code of the game to be edited is deployed on a target device that is different from the local device. If the local field contains a local resource address, the target user interface to be edited is displayed; The first acquisition unit is configured to respond to an interface editing event sent by the interface editor to the target user interface and acquire the editing target information corresponding to the interface editing event, wherein the editing target information includes component identification information of the target interface component in the target user interface and interface identification information corresponding to the target user interface; The second acquisition unit is configured to acquire component attribute information of the target interface component from the game server corresponding to the interface editor based on the component identification information. The game server is used to deploy the user interface to be edited by the interface editor, and each interface component within the user interface to be edited. The method for acquiring the component attribute information includes: Obtain the resource retrieval table in the game server corresponding to the interface editor. The resource retrieval table is used to store the interface resource information of each user interface to be edited and the identification information of each user interface. The interface resource information of each user interface includes the identification information and component attribute information of each interface component in the user interface. Based on the interface identification information, the interface resource information corresponding to the target user interface is obtained from the resource retrieval table; Based on the component identification information, the component attribute information of the target interface component is obtained from the interface resource information; The editing unit is used to edit the web page nodes of the target user interface according to the component attribute information and the event type corresponding to the interface editing event, so as to obtain the edited web page nodes and display the edited target interface components corresponding to the edited web page nodes in the target user interface.

9. An electronic device, characterized in that, The electronic device includes a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the user interface editing method as described in any one of claims 1 to 7.

10. A readable storage medium, characterized in that, The readable storage medium stores a computer program that, when executed by a processor, implements the steps of the user interface editing method according to any one of claims 1 to 7.

Images