Page editing method, device and apparatus, and storage medium

CN114385162BActive Publication Date: 2026-08-28TENCENT TECHNOLOGY (SHENZHEN) CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202011108244.3
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2020-10-16
Publication Date
2026-08-28
Estimated Expiration
2040-10-16

AI Technical Summary

Technical Problem

[0004]上述方法中,每当编辑组件时,均需要重启应用再注入以实现页面更新,耗时较长

Benefits of technology

[0021]本申请实施例中,在得到编译文件后,直接根据编译文件对基础库中相关的实例进行替换,这样实例替换后,无需重新启动应用,即可自动对页面编辑界面所显示的页面进行更新,因而不会耗费很多时间,且不涉及到应用重启,直接在目标页面中显示组件更新,也就不涉及到页面跳转,或者从应用的主页面重新操作跳转至子页面等情况,减少了用户操作,编辑方法的效率得到了有效提升。

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114385162B_ABST
    Figure CN114385162B_ABST
Patent Text Reader

Abstract

The application discloses a page editing method and device, equipment and a storage medium, and belongs to the technical field of computers. In the embodiment of the application, after obtaining a compilation file, relevant instances in a basic library are directly replaced according to the compilation file, so that after the instances are replaced, the page displayed on the page editing interface can be automatically updated without restarting the application, thereby avoiding a waste of much time and application restarting, directly displaying component updating in a target page, and avoiding page jumping or reoperating from a main page of the application to jump to a subpage, reducing user operation and effectively improving the efficiency of the editing method.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page editing method, apparatus, device, and storage medium. Background Technology

[0002] With the development of computer technology, web applications can display pages and components to showcase content or provide users with access to or options for various functions. After a web application is deployed, changes in user needs may necessitate editing of the page components, altering their content, display style, or functionality.

[0003] Currently, the page editing method typically involves technicians updating the component's page file, then calling a compilation tool to compile the page file, caching the edited file, and then restarting the application. During the restart process, the cached compilation results are injected.

[0004] In the methods described above, each time a component is edited, the application needs to be restarted and injected again to update the page, which is time-consuming. Furthermore, if the component being modified is located in a subpage of the application, the main page will be displayed after restarting and updating, requiring technicians to manually navigate back to the subpage, which is cumbersome and inefficient. Summary of the Invention

[0005] This application provides a page editing method, apparatus, device, and storage medium, which can reduce time consumption, reduce user operations, and improve efficiency. The technical solution is as follows: On the one hand, a page editing method is provided, the method including: In response to the editing operation of the first component in the target page displayed in the page editing interface, the first page file containing the first component is edited to obtain a second page file containing the second component; The second page file is compiled to obtain the compiled file of the second page file; According to the compiled file, replace the instance corresponding to the first page file in the base library with the instance corresponding to the second page file; Based on the replaced example, in the target page displayed in the page editing interface, the first component is updated to the second component.

[0006] On one hand, a page editing device is provided, the device comprising: The editing module is used to respond to the editing operation of the first component in the target page displayed in the page editing interface, and to edit the first page file containing the first component to obtain a second page file containing the second component; The compilation module is used to compile the second page file to obtain a compiled file of the second page file; The replacement module is used to replace the instance corresponding to the first page file in the base library with the instance corresponding to the second page file, based on the compiled file. The display module is used to display the first component updated to the second component on the target page displayed in the page editing interface, based on the replaced instance.

[0007] In some embodiments, the replacement module includes a generation unit and a replacement unit; The generation unit is used to generate an instance corresponding to the second page file based on the compiled file; The replacement unit is used to replace the instance corresponding to the first page file in the base library with the instance corresponding to the second page file.

[0008] In some embodiments, the replacement unit includes a calling subunit, a searching subunit, and a replacement subunit; The calling subunit is used to call the node update interface of the basic library; The search subunit is used to search for an instance corresponding to the first page file in the basic library based on the node update interface. The replacement subunit is used to replace the instance obtained from the search with the instance corresponding to the second page file.

[0009] In some embodiments, the search subunit is used to search for an instance corresponding to the first page file in the base library based on the node update interface and through a depth-first search.

[0010] In some embodiments, the node update interface carries path parameters and content parameters; the calling subunit is used to assign the path of the compiled file to the path parameter of the node update interface, and to assign the compiled file to the content parameter; The search subunit is used to search for an instance corresponding to the first page file in the basic library based on the path parameters carried by the node update interface. The replacement subunit is used to replace the searched instance based on the content parameters carried by the node update interface.

[0011] In some embodiments, the generation unit is configured to generate a node tree corresponding to the instance of the second page file based on the compiled file; The replacement unit is used to replace all direct child nodes under the root node in the node tree of the instance corresponding to the first page file in the basic library with all direct child nodes under the root node in the node tree of the instance corresponding to the second page file.

[0012] In some embodiments, the replacement unit is used for: Remove all direct child nodes under the root node in the node tree of the instance corresponding to the first page file in the base library; Move all direct child nodes under the root node in the node tree of the instance corresponding to the second page file to the root node in the node tree of the instance corresponding to the first page file.

[0013] In some embodiments, the replacement module and the display module are configured to perform the instance replacement step and the display step of updating the first component to the second component in response to the hot reload function being enabled.

[0014] In some embodiments, the apparatus further includes: The restart module is used to restart the current application in response to the hot reload function being turned off. During the restart process, the compiled file is injected into the base library of the current application.

[0015] In some embodiments, the compilation module is used to call the Windows Control Center tool to compile the second page file to obtain a compiled file of the second page file.

[0016] In some embodiments, the compilation module is configured to execute the compilation step in response to a storage instruction for the second page file, thereby obtaining a compiled file of the second page file.

[0017] In some embodiments, the apparatus further includes: A caching module is used to cache the compiled files.

[0018] On one hand, an electronic device is provided, the electronic device including one or more processors and one or more memories, the one or more memories storing at least one piece of program code, the at least one piece of program code being loaded and executed by the one or more processors to implement various optional implementations of the above-described page editing method.

[0019] On the one hand, a computer-readable storage medium is provided, wherein at least one piece of program code is stored therein, the at least one piece of program code being loaded and executed by a processor to implement various optional implementations of the above-described page editing method.

[0020] In one aspect, a computer program product or computer program is provided, the computer program product or computer program comprising one or more lines of program code stored in a computer-readable storage medium. One or more processors of an electronic device are capable of reading the one or more lines of program code from the computer-readable storage medium, and the one or more processors execute the one or more lines of program code, enabling the electronic device to perform the page editing method of any of the above possible embodiments.

[0021] In this embodiment, after obtaining the compiled file, the relevant instances in the base library are directly replaced according to the compiled file. After the instances are replaced, the page displayed in the page editing interface can be automatically updated without restarting the application, thus saving a lot of time and avoiding application restart. The component update is directly displayed on the target page, which also avoids page navigation or re-operation from the main page of the application to the subpage, reducing user operations and effectively improving the efficiency of the editing method. Attached Figure Description

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

[0023] Figure 1 This is a schematic diagram of the implementation environment of a page editing method provided in an embodiment of this application; Figure 2 This is a flowchart of a page editing method provided in an embodiment of this application; Figure 3 This is a flowchart of a page editing method provided in an embodiment of this application; Figure 4 This is a schematic diagram of a function switch control for a hot reload function provided in an embodiment of this application; Figure 5 This is a schematic diagram of a page editing interface of a page editing application provided in an embodiment of this application; Figure 6 This is a schematic diagram of a depth-first search provided in an embodiment of this application; Figure 7 This is a schematic diagram of an instance replacement process provided in an embodiment of this application; Figure 8 This is a schematic diagram of a page editing interface of a page editing application provided in an embodiment of this application; Figure 9This is a flowchart of a page editing method provided in an embodiment of this application; Figure 10 This is a schematic diagram of the structure of a page editing device provided in an embodiment of this application; Figure 11 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application; Figure 12 This is a structural block diagram of a terminal provided in an embodiment of this application; Figure 13 This is a schematic diagram of the structure of a server provided in an embodiment of this application. Detailed Implementation

[0024] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0025] In this application, the term "at least one" means one or more, and the term "multiple" means two or more. For example, multiple data packets means two or more data packets.

[0026] It should be understood that the terminology used in the description of the various examples herein is for the purpose of describing particular examples only and is not intended to be limiting. As used in the description of the various examples and the appended claims, the singular forms “a” and “the” are intended to include the plural forms as well, unless the context clearly indicates otherwise.

[0027] It should also be understood that the term "and / or" as used herein refers to and covers any and all possible combinations of one or more of the associated listed items. The term "and / or" describes an association between related objects, indicating that three relationships can exist; for example, A and / or B can represent: A alone, A and B simultaneously, and B alone. Additionally, the character " / " in this application generally indicates that the preceding and following related objects are in an "or" relationship.

[0028] It should also be understood that, in the various embodiments of this application, the sequence number of each process does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0029] It should also be understood that determining B based on A does not mean determining B solely based on A; it is also possible to determine B based on A and / or other information.

[0030] It should also be understood that the term “comprising” (also referred to as “inCludes”, “inCluding”, “Comprises”, and / or “Comprising”) as used in this specification specifies the presence of the stated features, integers, steps, operations, elements, and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0031] It should also be understood that the term "if" can be interpreted as meaning "when" or "upon" or "in response to determination" or "in response to detection." Similarly, depending on the context, the phrases "if determination..." or "if detection [the stated condition or event]" can be interpreted as meaning "when determination..." or "in response to determination..." or "when detection [the stated condition or event]" or "in response to detection [the stated condition or event]."

[0032] The implementation environment of this application is described below.

[0033] Figure 1 This is a schematic diagram of an implementation environment for a page editing method provided in this application embodiment. The implementation environment includes a terminal 101, or it includes a terminal 101 and a page editing platform 102. The terminal 101 is connected to the page editing platform 102 via a wireless network or a wired network.

[0034] Terminal 101 can be at least one of a smartphone, game console, desktop computer, tablet computer, e-book reader, MP3 (Moving Picture Experts Group Audio Layer III) player or MP4 (Moving Picture Experts Group Audio Layer IV) player, or laptop computer. Terminal 101 has an application installed and running that supports page editing; for example, the application can be a system application, page editing application, instant messaging application, news push application, shopping application, online video application, or social application.

[0035] For example, the terminal 101 can complete this task independently, or it can provide data services through the page editing platform 102. This application embodiment does not limit this aspect.

[0036] The page editing platform 102 includes at least one of a single server, multiple servers, a cloud computing platform, and a virtualization center. The page editing platform 102 provides background services for applications supporting page editing. Optionally, the page editing platform 102 undertakes the primary processing task, and the terminal 101 undertakes secondary processing tasks; or, the page editing platform 102 undertakes secondary processing tasks, and the terminal 101 undertakes the primary processing tasks; or, the page editing platform 102 or the terminal 101 can each independently undertake processing tasks. Alternatively, the page editing platform 102 and the terminal 101 can collaborate on computation using a distributed computing architecture.

[0037] Optionally, the page editing platform 102 includes at least one server 1021 and a database 1022. The database 1022 is used to store data. In this embodiment, the database 1022 can store compiled files or page configuration files (e.g., page files) to provide data services to at least one server 1021.

[0038] Servers can be standalone physical servers, server clusters or distributed systems composed of multiple physical servers, or cloud servers that provide basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. Terminals can be smartphones, tablets, laptops, desktop computers, smart speakers, smartwatches, etc., but are not limited to these.

[0039] Those skilled in the art will understand that the number of terminals 101 and servers 1021 can be more or less. For example, there may be only one terminal 101 or server 1021, or there may be dozens or hundreds of terminals 101 or servers 1021, or even more. The embodiments of this application do not limit the number or type of terminals or servers.

[0040] Figure 2 This is a flowchart illustrating a page editing method provided in an embodiment of this application. The method is applied to an electronic device, which may be a terminal or a server. (See also...) Figure 2 The method includes the following steps.

[0041] 201. In response to an editing operation on a first component in a target page displayed in a page editing interface, the electronic device edits a first page file containing the first component to obtain a second page file containing a second component.

[0042] If a user wants to edit a component on a target page, they can perform an editing operation on that component. Once the electronic device detects the editing operation, it can perform the corresponding editing processing on the page file containing that component.

[0043] Here, the terms "first" and "second" are used only to distinguish the state of the component before and after editing. In this application, the terms "first," "second," etc., are used to distinguish identical or similar items with essentially the same function. It should be understood that there is no logical or temporal dependency between "first," "second," and "nth," nor is there any limitation on quantity or execution order. It should also be understood that although the following description uses the terms "first," "second," etc., to describe various elements, these elements should not be limited by the terms. These terms are merely used to distinguish one element from another. Here, the component before editing is referred to as the first component, and the component after editing is referred to as the second component.

[0044] 202. The electronic device compiles the second page file to obtain the compiled file of the second page file.

[0045] Compilation is the process of converting a high-level language into binary language that a computer can understand. Computers only recognize 1s and 0s; a compiler translates a human-familiar language into binary code. The compilation process can be implemented using a compiler, which translates a source program into a target program. This process can be divided into five stages: lexical analysis; syntax analysis; semantic checking and intermediate code generation; code optimization; and target code generation. The target code is, in essence, binary code. Lexical and syntax analysis are also known as source program analysis. During this analysis, if syntax errors are found, warning messages can be provided. Therefore, the compilation process can also correct errors in the source language, prompting the user to make corrections.

[0046] In step 304, after the electronic device receives the updated second page file, it can compile it to convert the high-level language into a computer-recognizable binary language. This allows the electronic device to recognize the contents of the second page file and determine how to process the instances in the base library.

[0047] 203. Based on the compiled file, the electronic device replaces the instance corresponding to the first page file in the base library with the instance corresponding to the second page file.

[0048] In object-oriented programming, a "class" is called an "instance" after it is instantiated. A "class" is static and does not occupy process memory, while an "instance" has dynamic memory. In databases, an instance represents a collection of programs. For example, in Oracle, an instance is a collection of database programs that support the operation of the database.

[0049] In this embodiment, once the electronic device determines the page file that needs to be updated, it can directly perform instance replacement. Once the instance is replaced, the content displayed by the running instance will be updated.

[0050] 204. Based on the replaced instance, the electronic device displays the first component updated to the second component on the target page shown in the page editing interface.

[0051] By replacing the instance step, the page is updated without restarting the application, saving the time required to start the application. In addition, users can see the effect of the edit in real time, which can improve editing efficiency.

[0052] In this embodiment, after obtaining the compiled file, the relevant instances in the base library are directly replaced according to the compiled file. After the instances are replaced, the page displayed in the page editing interface can be automatically updated without restarting the application, thus saving a lot of time and avoiding application restart. The component update is directly displayed on the target page, which also avoids page navigation or re-operation from the main page of the application to the subpage, reducing user operations and effectively improving the efficiency of the editing method.

[0053] Figure 3 This is a flowchart of a page editing method provided in an embodiment of this application. See also... Figure 3 The method includes the following steps.

[0054] 301. The electronic device responds to the launch command of the page editing application and displays the page editing interface of the page editing application.

[0055] Electronic devices can provide page editing applications, offering users page editing functionality. If a user wants to edit a component on a page, they can launch the page editing application. Upon receiving this launch command, the electronic device can activate the application, displaying its page editing interface on the screen.

[0056] In one possible implementation, the page editing application can be a developer tool. This developer tool is used by developers to update the application's code and edit its components. For example, the application can be a mini-program, and the developer tool can be a mini-program developer tool. This mini-program developer tool helps developers easily and efficiently develop and debug mini-programs.

[0057] The page editing method provided in this application embodiment can provide a hot reload function or a hot update function. By applying this hot reload function or hot update function, code updates can be achieved without restarting the application each time a component is edited, and the page update status can be directly displayed.

[0058] For the hot reload or hot update function, a function switch control can be provided to indicate whether the hot reload or hot update function is turned on or off. Users can operate this function switch control according to their own usage habits to choose whether to apply the hot reload or hot update function. Specifically, the electronic device can enable the hot reload function in response to the on command of the function switch control, at which point the hot reload function is in the on state. The electronic device can also disable or turn off the hot reload function in response to the off command of the function switch control, at which point the hot reload function is in the off state.

[0059] In some embodiments, the hot reload function may support files of the target format but not some other file formats. For example, the hot reload function may support files other than JSON (JavaScript Object Notation) files but not JSON files. The target format, etc., can be set by relevant technicians according to their needs, and this application embodiment does not limit it in this way.

[0060] For example, such as Figure 4 As shown, the electronic device can provide a hot reload function switch control 401 in the developer tool interface. The display content of the function switch control 401 can be "Enable automatic code hot reload (JSON files are not supported, page editor X or higher basic library version required)". This interface can be an editing interface or a settings interface, which is not limited in this application. A status indicator 402 can be provided in the area surrounding the function switch control 401. When the status indicator 402 is displayed as "√", it indicates that the hot reload function is in the enabled state. When the status indicator 402 is empty, it indicates that the hot reload function is in the disabled state. Figure 4 The image shows the state when the hot reload function is enabled.

[0061] The electronic device processes the compiled file obtained after compiling the page file differently depending on the state of the hot reload function. For details, please refer to step 304 below, which will not be elaborated on here.

[0062] 302. In response to the display operation of the target page, the electronic device displays the target page in the preview display area of ​​the page editing interface and displays the corresponding components of the target page in the target page.

[0063] When a user wants to edit a page, they can first display the target page, which will then be shown in the preview area of ​​the page editing interface. The corresponding components will also be displayed on the target page. Based on the preview of the target page and the components on that page, the user can edit the components. After the electronic device has edited the components, the edited components will be displayed on the target page.

[0064] For example, such as Figure 5 As shown, the electronic device can display a page editing interface 501 of a page editing application. The target page is displayed in the preview display area 502 of the page editing interface 501. The page file 503 of the target page is also displayed in the page editing interface 501, and the page file 503 can contain configuration files for multiple components. When editing a configuration file, the edited content 504 can also be displayed in the page editing interface 501.

[0065] 303. In response to an editing operation on the first component in the target page, the electronic device edits the first page file of the first component to obtain the second page file of the second component.

[0066] If a user wants to edit a component on a target page, they can perform an edit operation on that component. The electronic device detects this edit operation and then performs the corresponding editing processing on the component's page file. Here, "first" and "second" are used to distinguish the state of the component before and after editing.

[0067] For example, in a specific example, the first component is a view tag on the target page, whose content is "wxml auto-hot reload". This editing operation is used to change the content of the first component to "wxml auto-hot reload test". After the change, the component with the content "wxml auto-hot reload test" is referred to as the second component.

[0068] In a specific example, the current application is a mini-program, and the first and second page files mentioned above are wxml files. wxml (WeiXin Markup Language) is a tag language designed for the mini-program framework. Combined with basic components and the event system, it can construct the structure of mini-program pages.

[0069] 304. In response to the storage instruction for the second page file, the electronic device compiles the second page file to obtain a compiled file of the second page file.

[0070] In step 304, after the electronic device receives the updated second page file, it can compile it, converting the high-level language into computer-recognizable binary language. This allows the electronic device to understand the content of the second page file and perform subsequent processing. For example, after a user edits and saves the second page file, the electronic device can be triggered to compile it. The compiled results can then be used to replace instances in the base library. After replacing the instances related to the first component, the edited second component can be displayed based on the new instances.

[0071] In some embodiments, this compilation process can be implemented using a compilation tool. This compilation tool can be a Windows Control Center tool. Specifically, in step 304, the electronic device calls the Windows Control Center tool to compile the second page file, obtaining a compiled file of the second page file. The Windows Control Center tool is WCC (Windows Control Center, WinCC). It is the first process monitoring system to use the latest 32-bit technology, possessing good openness and flexibility.

[0072] In a specific example, the first and second page files mentioned above are wxml files, and the compiled file can be a js (JavaScript) file. JavaScript is a lightweight, interpreted or just-in-time compiled high-level programming language with a function-first approach. It can be used as a scripting language for developing Web (World Wide Web) pages, as well as in other non-browser environments. JavaScript is a prototype-based, multi-paradigm, dynamic scripting language that supports object-oriented, imperative, and declarative (such as functional programming) styles.

[0073] After step 304, the electronic device can also cache the compiled file. In subsequent steps of instance replacement and page component refresh based on the compiled file, the compiled file can be extracted from the cached data.

[0074] Step 304 involves compiling the second page file to obtain a compiled file of the second page file. The above process only illustrates the case where the compilation step is triggered when the second page file is saved after editing. In some embodiments, the compilation step can also be triggered in other ways. In one possible implementation, the page file obtained in real time can be compiled. For example, the edited page file can be compiled after each editing operation.

[0075] The electronic device may execute steps 305 to 309 below in response to the hot reload function being enabled. If the hot reload function is disabled, the electronic device may restart the current application in response to this disabling, injecting the compiled file into the application's base library during the restart process. Steps 305 to 309 are not executed by the electronic device.

[0076] 305. Electronic devices call the node update interface of this basic library.

[0077] Once the electronic device has determined the second page file after the editing operation and compiled it into a computer-recognizable binary file, it can update the corresponding data in the base library. In this way, the data in the base library is the data of the updated second page file, and the display result obtained by executing the corresponding program based on the base library is naturally the effect after the editing operation.

[0078] Generally, electronic devices cannot directly modify the base library; they need to call the interfaces provided by the base library to access or modify data within it. In this embodiment, the base library provides a node update interface, through which the electronic device can update nodes in the base library.

[0079] In some embodiments, the node update interface carries path parameters and content parameters. Accordingly, in step 305, the electronic device assigns the path of the compiled file to the path parameter of the node update interface and assigns the compiled file to the content parameter. The path parameter indicates the path of the node to be updated, or the location of the node to be updated in the base library. The content parameter indicates the updated content. Thus, when the electronic device calls the node update interface, it can pass data to the base library based on the node update interface, informing the base library of the nodes that need to be updated and the content to be updated. In this embodiment, the first component has been updated to the second component, and the electronic device needs to update the instances related to the first component in the base library to instances related to the second component.

[0080] In some embodiments, the above page editing method can be applied to a mini-program scenario, the target page is a page in the mini-program, and the node update interface can be the updateWxAppCode interface.

[0081] 306. The electronic device updates the interface based on this node and searches for the instance corresponding to the first page file in the basic library.

[0082] After the electronic device calls the node update interface, it can pass data to the base library based on the node update interface. In this embodiment, the first component has been updated to the second component, and the electronic device needs to update the instances related to the first component in the base library. The electronic device can replace the corresponding instances according to the compiled file of the page file, so that the instances related to the first component are updated to the instances related to the second component. Therefore, in step 306, the electronic device can search for the instances corresponding to the first page file that need to be replaced in the base library based on the node update interface, so as to replace these instances.

[0083] This search process can be implemented using any search method. In some embodiments, the search process is implemented using DFS (Depth-First Search). Specifically, the electronic device updates the interface based on the node and searches for the instance corresponding to the first page file in the base library using depth-first search. For DFS, depth-first search is a method that was commonly used in the early stages of web crawler development. Its goal is to reach the leaf nodes of the searched structure (i.e., those HTML files that do not contain any hyperlinks). In a Hyper Text Markup Language (HTML) file, when a hyperlink is selected, the linked HTML file will perform a depth-first search, that is, completely search a single chain before searching the results of other hyperlinks. The depth-first search follows the hyperlinks on the HTML file until it cannot go any deeper, then returns to an HTML file and continues to select other hyperlinks in that HTML file. When there are no more other hyperlinks to select, the search has ended. In fact, depth-first search is a type of graph algorithm. In short, its process involves going deeper into every possible branch path until it cannot go any deeper, and each node can only be visited once. For example: Figure 6 As shown, if a depth-first search is initiated from point A (the following access order is not unique; the second point can be B, C, or D), the following access process may be obtained: A->B->E (no path, backtrack to A)->C->F->H->G->D (no path, eventually backtrack to A, and A has no unvisited adjacent nodes, so the search ends).

[0084] Briefly explain the characteristics of depth-first search: Each depth-first search result is necessarily a connected component of the graph. Depth-first search can be initiated from multiple points. If we sort the "end time" of each node during the depth-first search process (specifically, by creating a list, adding the node to the end of the list when all its neighboring nodes have been visited, and then reversing the entire list), we can obtain what is called a "topological sort."

[0085] Of course, this search process can also be performed in other ways, such as breadth-first search, A... Algorithms, backtracking algorithms, Monte Carlo tree search, etc., are not limited to these in the embodiments of this application.

[0086] During this search process, all instances related to the first component can be found, such as instances of the first component, instances of other components that use the first component, or instances of other pages that use the first component.

[0087] In some embodiments, in the implementation where the node update interface carries path and content parameters in step 305 above, the electronic device searches for an instance corresponding to the first page file in the base library based on the path parameter carried by the node update interface. In this method, the electronic device passes the path of the first page file or the path of the second page file to the base library. If the component being updated can be found in the base library, then the instance related to that component can be found. If the path of the first page file is the same as the path of the second page file, that is, the electronic device has modified the first page file at that path to obtain the second page file; at this point, the page file at that path is the second page file.

[0088] 307. The electronic device generates an instance corresponding to the second page file based on the compiled file.

[0089] After an electronic device compiles a new compiled file, it needs to replace the original first page file with the new compiled file. For these components, electronic devices typically generate various instances and store these instances in a base library. This way, when displaying the components later, the instances in the base library can be directly called to implement the corresponding display or operation functions.

[0090] In step 307, the process of generating an instance of the electronic device is called the instantiation process. In object-oriented programming, instantiation refers to the process of creating an object from a class. The instantiation process is the process of making an abstract concept class concrete into an actual object of that class. The instantiation process is generally composed of ClassNameObjectName = newClassName(parameter1, parameter2, ..., parametern), where n is an integer greater than 2.

[0091] In some embodiments, the above instances can be in the form of a node tree. Each component is a node. Different components have usage and being used relationships, and therefore, there are relationships between nodes, so each instance can take the form of a node tree. Accordingly, in step 307, the electronic device generates a node tree for the instance corresponding to the second page file based on the compiled file. This node tree is generated based on the relationships between the various components in the compiled file.

[0092] 308. The electronic device replaces the instance found in the search with the instance corresponding to the second page file.

[0093] Once an electronic device receives a new instance, it can replace the old one. This instance replacement method eliminates the need to restart the current application or perform injection after a restart. Instead, the page is updated simply by passing the new instance to the base library through the aforementioned node update interface.

[0094] In the implementation of storing instances in the form of a node tree in step 307 above, the electronic device replaces all direct child nodes under the root node of the node tree of the instance corresponding to the first page file in the basic library with all direct child nodes under the root node of the node tree of the instance corresponding to the second page file.

[0095] The replacement process can first remove the existing direct child nodes, and then move the newly generated direct child nodes over. Specifically, the electronic device can remove all direct child nodes under the root node of the node tree of the instance corresponding to the first page file in the base library, and move all direct child nodes under the root node of the node tree of the instance corresponding to the second page file to the root node of the node tree of the instance corresponding to the first page file.

[0096] For example, such as Figure 7 As shown in (a) of the example, before replacement, all direct child nodes under the shadowRoot of this instance include the div, span, and image tags. The span tag is used to group inline elements in the document. shadowRoot is an interface in HTML. The image tag defines an image in an HTML page. During replacement, these direct child nodes can be removed directly, such as... Figure 7 As shown in (b), after the replacement, all direct child nodes under shadowRoot are directly replaced with all direct child nodes of the new instance. The new direct child nodes include div tags, h1 tags, and div tags.

[0097] In the implementation of the node update interface carrying path parameters and content parameters in step 305 above, the electronic device replaces the searched instance based on the content parameters carried by the node update interface.

[0098] It should be noted that steps 305 to 308 above refer to the process of replacing the instance corresponding to the first page file in the base library with the instance corresponding to the second page file based on the compiled file. Specifically, steps 305, 306, and 308 are processes of replacing the instance corresponding to the first page file in the base library with the instance corresponding to the second page file. The execution order of steps 305 and 306 with the generation process of step 307 can be arbitrary. That is, the electronic device can execute steps 305 and 306 first, followed by step 307, according to the above execution order. Alternatively, the electronic device can execute step 307 first, followed by steps 305 and 306. Or, steps 307, as well as steps 305 and 306, can be executed simultaneously; this embodiment of the application does not limit this.

[0099] 309. Based on the replaced instance, the electronic device displays the first component updated to the second component on the target page displayed in the page editing interface.

[0100] After the electronic device replaces the instance in the base library, it can execute the instance to update the target page. Originally, the target page displayed the first component; after the update, the target page displays the second component. It should be noted that before and after editing, the electronic device continuously displays the page editing interface of the application, which always shows the target page; only the content of the target page is updated.

[0101] For example, such as Figure 5 and Figure 8 As shown, the electronic device can display an editing interface 501 for a page editing application. The target page is displayed in a preview display area 502 within the editing interface 501. The editing interface 501 also displays a page file 503 for the target page, which contains configuration files for multiple components. When editing the configuration file of a component, the edited content 504 can be displayed in the editing interface 501. Before being edited, the page file 503 corresponds to... Figure 5 Component 505 in the code contains the message "wxml auto-hot reload". After replacement, as shown below... Figure 8 As shown, the content of component 505 has been updated to "wxml automatic hot reload test". The page automatically refreshes without restarting the mini-program; the page remains on the current page (i.e., the target page). This makes development more convenient.

[0102] In a specific example, such as Figure 9As shown, the above page editing process can be implemented in the developer tools. By default, hot reloading is not enabled in the developer tools. Hot reloading logic is only enabled when the developer checks "Enable automatic code hot reloading." After the developer finishes editing the wxml code and saves the wxml file, the developer tools' hot reloading logic is triggered. Specifically, this page editing process can include the following six steps.

[0103] Step 1. Developers enable "Hot Reload" in the developer tools.

[0104] Step 2. The developer tools begin monitoring changes to the wxml code.

[0105] Step 3. The developer modifies the wxml.

[0106] Step 4. When the developer tools detect changes in the wxml code, they perform two actions: first, they compile the wxml and cache the compilation result; second, they call the updateWxAppCode interface provided by the base library to perform a hot update.

[0107] In steps 1 through 4, the developer tools determine the file code to be edited and processed for hot updates, use wcc to compile the wxml file into a js (JavaScript) file, and cache the compilation result. JavaScript is a lightweight, interpreted or just-in-time compiled high-level programming language with a function-first approach.

[0108] Step 5. The base library receives the `updateWxAppCode` call and can do two things. First, it performs a depth-first search (DFS) to find all instances of this component across all pages. Second, it replaces the old instance with the new node instance generated by the new wxml file. Then, it calls the `updateWxAppCode(PATH, CONTENT)` interface provided by the base library to perform a hot code update, passing the parameters PATH and CONTENT. PATH represents the address of the wxml file, and CONTENT represents the compiled content of the wxml component.

[0109] Step 6. After updating the instance of the base library, you can see the effect of hot reloading on the page.

[0110] In the context of editing mini-program pages, after the developer tools complete the compilation of the wxml code, they pass the changed file paths and corresponding compilation results to the mini-program base library. Upon receiving this, the base library directly clears the internal nodes of the page or component and then reconstructs the internal node tree based on the new wxml, thus achieving a hot update effect. This solution improves the speed of mini-program development, making code editing and debugging smoother and increasing development efficiency.

[0111] In this embodiment, after obtaining the compiled file, the relevant instances in the base library are directly replaced according to the compiled file. After the instances are replaced, the page displayed in the page editing interface can be automatically updated without restarting the application, thus saving a lot of time and avoiding application restart. The component update is directly displayed on the target page, which also avoids page navigation or re-operation from the main page of the application to the subpage, reducing user operations and effectively improving the efficiency of the editing method.

[0112] All of the above-mentioned optional technical solutions can be combined in any way to form optional embodiments of this application, and will not be described in detail here.

[0113] Figure 10 This is a schematic diagram of the structure of a page editing device provided in an embodiment of this application. See also... Figure 10 The device includes: The editing module 1001 is used to respond to the editing operation of the first component in the target page displayed in the page editing interface, and to edit the first page file containing the first component to obtain a second page file containing the second component; Compiler module 1002 is used to compile the second page file to obtain a compiled file of the second page file; Replacement module 1003 is used to replace the instance corresponding to the first page file in the base library with the instance corresponding to the second page file based on the compiled file; Display module 1004 is used to display the first component updated to the second component on the target page displayed in the page editing interface, based on the replaced instance.

[0114] In some embodiments, the replacement module 1003 includes a generation unit and a replacement unit; This generation unit is used to generate an instance of the second page file based on the compiled file; This replacement unit is used to replace the instance corresponding to the first page file in the base library with the instance corresponding to the second page file.

[0115] In some embodiments, the replacement unit includes a calling subunit, a searching subunit, and a replacement subunit; This call subunit is used to call the node update interface of the base library; This search subunit is used to search for the instance corresponding to the first page file in the base library based on the node update interface. This replacement subunit is used to replace the instance obtained from the search with the instance corresponding to the second page file.

[0116] In some embodiments, the search subunit is used to search for the instance corresponding to the first page file in the base library based on the node update interface and through a depth-first search.

[0117] In some embodiments, the node update interface carries path parameters and content parameters; the calling subunit is used to assign the path of the compiled file to the path parameter of the node update interface and to assign the compiled file to the content parameter. This search subunit is used to search for the instance corresponding to the first page file in the basic library based on the path parameter carried by the node update interface. This replacement subunit is used to replace the searched instance based on the content parameter carried by the node update interface.

[0118] In some embodiments, the generation unit is used to generate a node tree corresponding to the instance of the second page file based on the compiled file; The replacement unit is used to replace all direct child nodes under the root node in the node tree of the instance corresponding to the first page file in the base library with all direct child nodes under the root node in the node tree of the instance corresponding to the second page file.

[0119] In some embodiments, the replacement unit is used for: Remove all direct child nodes under the root node in the node tree of the instance corresponding to the first page file in the base library; Move all direct child nodes under the root node in the node tree of the instance corresponding to the second page file to the root node in the node tree of the instance corresponding to the first page file.

[0120] In some embodiments, the replacement module 1003 and the display module 1004 are configured to perform the instance replacement step and the display step of updating the first component to the second component in response to the hot reload function being enabled.

[0121] In some embodiments, the device further includes: The restart module is used to restart the current application in response to the hot reload function being disabled. During the restart process, the compiled file is injected into the base library of the current application.

[0122] In some embodiments, the compilation module 1002 is used to call the window control center tool to compile the second page file and obtain a compiled file of the second page file.

[0123] In some embodiments, the compilation module 1002 is used to perform the compilation step in response to a storage instruction for the second page file, to obtain a compiled file of the second page file.

[0124] In some embodiments, the device further includes: The caching module is used to cache the compiled file.

[0125] In this embodiment, after obtaining the compiled file, the relevant instances in the base library are directly replaced according to the compiled file. After the instances are replaced, the page displayed in the page editing interface can be automatically updated without restarting the application, thus saving a lot of time and avoiding application restart. The component update is directly displayed on the target page, which also avoids page navigation or re-operation from the main page of the application to the subpage, reducing user operations and effectively improving the efficiency of the editing method.

[0126] It should be noted that the page editing device provided in the above embodiments is only illustrated by the division of the above functional modules when editing a page. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the page editing device can be divided into different functional modules to complete all or part of the functions described above. In addition, the page editing device and the page editing method embodiments provided in the above embodiments belong to the same concept, and the specific implementation process can be found in the method embodiments, which will not be repeated here.

[0127] Figure 9 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. See also... Figure 9 The electronic device 900 can vary considerably depending on its configuration or performance. It may include one or more Central Processing Units (CPUs) 901 and one or more memories 902. The memory 902 stores at least one line of program code, which is loaded and executed by the processor 901 to implement the page editing methods provided in the various method embodiments described above. The electronic device may also include other components for implementing device functions. For example, it may have wired or wireless network interfaces and input / output interfaces for input / output. Further details regarding the embodiments described in this application are omitted here.

[0128] The electronic device in the above method embodiments can be implemented as a terminal. For example, Figure 12This is a structural block diagram of a terminal provided in an embodiment of this application. The terminal 1100 can be a portable mobile terminal, such as a smartphone, tablet computer, MP3 (Moving Picture Experts Group Audio Layer III) player, MP4 (Moving Picture Experts Group Audio Layer IV) player, laptop computer, or desktop computer. The terminal 1100 may also be referred to as user equipment, portable terminal, laptop terminal, desktop terminal, or other names.

[0129] Typically, terminal 1100 includes a processor 1101 and a memory 1102.

[0130] Processor 1101 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1101 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). Processor 1101 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1101 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 1101 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0131] The memory 1102 may include one or more computer-readable storage media, which may be non-transitory. The memory 1102 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1102 are used to store at least one program code, which is executed by the processor 1101 to implement the page editing method provided in the method embodiments of this application.

[0132] In some embodiments, the terminal 1100 may also optionally include a peripheral device interface 1103 and at least one peripheral device. The processor 1101, memory 1102, and peripheral device interface 1103 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 1103 via a bus, signal line, or circuit board. Specifically, the peripheral device includes at least one of the following: a radio frequency circuit 1104, a display screen 1105, a camera assembly 1106, an audio circuit 1107, and a power supply 1109.

[0133] Peripheral device interface 1103 can be used to connect at least one I / O (Input / Output) related peripheral device to processor 1101 and memory 1102. In some embodiments, processor 1101, memory 1102 and peripheral device interface 1103 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 1101, memory 1102 and peripheral device interface 1103 can be implemented on separate chips or circuit boards, which is not limited in this embodiment.

[0134] The radio frequency (RF) circuit 1104 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 1104 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 1104 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals back into electrical signals. Optionally, the RF circuit 1104 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, etc. The RF circuit 1104 can communicate with other terminals via at least one wireless communication protocol. This wireless communication protocol includes, but is not limited to: the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and / or WiFi (Wireless Fidelity) networks. In some embodiments, the RF circuit 1104 may also include circuitry related to NFC (Near Field Communication), which is not limited in this application.

[0135] Display screen 1105 is used to display a UI (User Interface). This UI may include graphics, text, icons, videos, and any combination thereof. When display screen 1105 is a touch display screen, it also has the ability to collect touch signals on or above its surface. These touch signals can be input as control signals to processor 1101 for processing. In this case, display screen 1105 can also be used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there may be one display screen 1105, disposed on the front panel of terminal 1100; in other embodiments, there may be at least two display screens, disposed on different surfaces of terminal 1100 or in a folded design; in still other embodiments, display screen 1105 may be a flexible display screen, disposed on a curved or folded surface of terminal 1100. Furthermore, display screen 1105 may be configured as a non-rectangular, irregular shape, i.e., a non-rectangular screen. The display screen 1105 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

[0136] The camera assembly 1106 is used to acquire images or videos. Optionally, the camera assembly 1106 includes a front-facing camera and a rear-facing camera. Typically, the front-facing camera is located on the front panel of the terminal, and the rear-facing camera is located on the back of the terminal. In some embodiments, there are at least two rear-facing cameras, which are any one of a main camera, a depth-sensing camera, a wide-angle camera, and a telephoto camera, to achieve background blurring by fusion of the main camera and the depth-sensing camera, panoramic shooting by fusion of the main camera and the wide-angle camera, VR (Virtual Reality) shooting, or other fusion shooting functions. In some embodiments, the camera assembly 1106 may also include a flash. The flash can be a single-color temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to a combination of a warm light flash and a cool light flash, which can be used for light compensation at different color temperatures.

[0137] The audio circuit 1107 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, converting the sound waves into electrical signals that are input to the processor 1101 for processing, or input to the radio frequency circuit 1104 for voice communication. For stereo sound acquisition or noise reduction purposes, multiple microphones may be used, each located at a different part of the terminal 1100. The microphone may also be an array microphone or an omnidirectional microphone. The speaker is used to convert electrical signals from the processor 1101 or the radio frequency circuit 1104 into sound waves. The speaker may be a conventional diaphragm speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can convert electrical signals not only into audible sound waves but also into inaudible sound waves for purposes such as distance measurement. In some embodiments, the audio circuit 1107 may also include a headphone jack.

[0138] Power supply 1109 is used to power the various components in terminal 1100. Power supply 1109 can be AC ​​power, DC power, a disposable battery, or a rechargeable battery. When power supply 1109 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged via a wired line, and a wireless rechargeable battery is a battery that is charged via a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0139] In some embodiments, the terminal 1100 further includes one or more sensors 1110. The one or more sensors 1110 include, but are not limited to: an acceleration sensor 1111, a gyroscope sensor 1112, a pressure sensor 1113, an optical sensor 1115, and a proximity sensor 1116.

[0140] Accelerometer 1111 can detect the magnitude of acceleration along the three axes of a coordinate system established with terminal 1100. For example, accelerometer 1111 can be used to detect the components of gravitational acceleration along the three axes. Processor 1101 can control display screen 1105 to display the user interface in either a landscape or portrait view based on the gravitational acceleration signal acquired by accelerometer 1111. Accelerometer 1111 can also be used for collecting motion data from games or users.

[0141] The gyroscope sensor 1112 can detect the orientation and rotation angle of the terminal 1100. The gyroscope sensor 1112 can work in conjunction with the accelerometer sensor 1111 to collect the user's 3D movements on the terminal 1100. Based on the data collected by the gyroscope sensor 1112, the processor 1101 can perform the following functions: motion sensing (e.g., changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

[0142] The pressure sensor 1113 can be disposed on the side bezel of the terminal 1100 and / or on the lower layer of the display screen 1105. When the pressure sensor 1113 is disposed on the side bezel of the terminal 1100, it can detect the user's grip signal on the terminal 1100, and the processor 1101 can perform left / right hand recognition or quick operation based on the grip signal collected by the pressure sensor 1113. When the pressure sensor 1113 is disposed on the lower layer of the display screen 1105, the processor 1101 can control the operable controls on the UI interface based on the user's pressure operation on the display screen 1105. The operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

[0143] An optical sensor 1115 is used to collect ambient light intensity. In one embodiment, the processor 1101 can control the display brightness of the display screen 1105 based on the ambient light intensity collected by the optical sensor 1115. Specifically, when the ambient light intensity is high, the display brightness of the display screen 1105 is increased; when the ambient light intensity is low, the display brightness of the display screen 1105 is decreased. In another embodiment, the processor 1101 can also dynamically adjust the shooting parameters of the camera assembly 1106 based on the ambient light intensity collected by the optical sensor 1115.

[0144] The proximity sensor 1116, also known as a distance sensor, is typically mounted on the front panel of the terminal 1100. The proximity sensor 1116 is used to detect the distance between the user and the front of the terminal 1100. In one embodiment, when the proximity sensor 1116 detects that the distance between the user and the front of the terminal 1100 is gradually decreasing, the processor 1101 controls the display screen 1105 to switch from a screen-on state to a screen-off state; when the proximity sensor 1116 detects that the distance between the user and the front of the terminal 1100 is gradually increasing, the processor 1101 controls the display screen 1105 to switch from a screen-off state to a screen-on state.

[0145] Those skilled in the art will understand that Figure 12 The structure shown does not constitute a limitation on terminal 1100 and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0146] The electronic device in the above method embodiments can be implemented as a server. For example, Figure 13This is a schematic diagram of a server structure provided in an embodiment of this application. The server 1200 can vary significantly due to different configurations or performance. It can include one or more Central Processing Units (CPUs) 1201 and one or more memories 1202. The memory 1202 stores at least one line of program code, which is loaded and executed by the processor 1201 to implement the page editing methods provided in the various method embodiments described above. Of course, the server can also have wired or wireless network interfaces and input / output interfaces for input / output. The server can also include other components for implementing device functions, which will not be elaborated here.

[0147] In an exemplary embodiment, a computer-readable storage medium is also provided, such as a memory including at least one line of program code, which is executable by a processor to perform the page editing method in the above embodiments. For example, the computer-readable storage medium can be a read-only memory (ROM), a random access memory (RAM), a compact disc read-only memory (CD-ROM), magnetic tape, floppy disk, and optical data storage device, etc.

[0148] In an exemplary embodiment, a computer program product or computer program is also provided, comprising one or more lines of program code stored in a computer-readable storage medium. One or more processors of an electronic device are capable of reading the one or more lines of program code from the computer-readable storage medium, and the one or more processors execute the one or more lines of program code, enabling the electronic device to perform the page editing method described above.

[0149] It should be understood that in the various embodiments of this application, the order of the above-mentioned processes does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0150] It should be understood that determining B based on A does not mean determining B solely based on A; it also means determining B based on A and / or other information.

[0151] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0152] The above description is only an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A page editing method, characterized in that, The method includes: In response to the editing operation of the first component in the target page displayed in the page editing interface, the first page file containing the first component is edited to obtain a second page file containing the second component; The second page file is compiled to obtain the compiled file of the second page file; Based on the relationships between the components in the compiled file, a node tree is generated for the instance corresponding to the second page file, where each component is a node; The path of the compiled file is assigned to the path parameter of the node update interface, and the compiled file is assigned to the content parameter of the node update interface. The node update interface is used to update the nodes in the base library. The path parameter is used to indicate the path of the node to be updated, or to indicate the position of the node to be updated in the base library. The content parameter is used to indicate the updated content. Based on the path parameters carried by the node update interface, search for the instance corresponding to the first page file in the basic library; Based on the content parameters carried by the node update interface, all direct child nodes under the root node in the node tree of the instance corresponding to the first page file in the basic library are replaced with all direct child nodes under the root node in the node tree of the instance corresponding to the second page file. Based on the replaced example, in the target page displayed in the page editing interface, the first component is updated to the second component.

2. The method according to claim 1, characterized in that, The step of searching for an instance corresponding to the first page file in the base library based on the node update interface includes: Based on the node update interface, a depth-first search is used to search for the instance corresponding to the first page file in the base library.

3. The method according to claim 1 or 2, characterized in that, The step of replacing all direct child nodes under the root node of the node tree of the instance corresponding to the first page file in the base library with all direct child nodes under the root node of the node tree of the instance corresponding to the second page file includes: Remove all direct child nodes under the root node in the node tree of the instance corresponding to the first page file in the base library; Move all direct child nodes under the root node in the node tree of the instance corresponding to the second page file to the root node in the node tree of the instance corresponding to the first page file.

4. The method according to claim 1, characterized in that, The method further includes: In response to the hot reload function being enabled, the instance replacement step and the display step of updating the first component to the second component are executed.

5. The method according to claim 4, characterized in that, After compiling the second page file to obtain the compiled file of the second page file, the method further includes: In response to the hot reload function being disabled, the current application is restarted, and during the restart process, the compiled file is injected into the base library of the current application.

6. The method according to claim 1, characterized in that, The process of compiling the second page file to obtain a compiled file of the second page file includes: Use the Windows Control Center tool to compile the second page file, resulting in a compiled file of the second page file.

7. The method according to claim 1, characterized in that, The process of compiling the second page file to obtain a compiled file of the second page file includes: In response to the storage instruction for the second page file, the compilation step is performed to obtain the compiled file of the second page file.

8. The method according to claim 1, characterized in that, After compiling the second page file to obtain a compiled file of the second page file, the method further includes: caching the compiled file.

9. A page editing device, characterized in that, The device includes: The editing module is used to respond to the editing operation of the first component in the target page displayed in the page editing interface, and to edit the first page file containing the first component to obtain a second page file containing the second component; The compilation module is used to compile the second page file to obtain a compiled file of the second page file; The replacement module is used to generate a node tree corresponding to the instance of the second page file based on the relationships between the components in the compiled file, where each component is a node; assign the path of the compiled file to the path parameter of the node update interface, and assign the compiled file to the content parameter of the node update interface. The node update interface is used to update the nodes in the base library. The path parameter is used to indicate the path of the node to be updated, or to indicate the position of the node to be updated in the base library; the content parameter is used to indicate the updated content; based on the path parameter carried by the node update interface, search for the instance corresponding to the first page file in the base library; based on the content parameter carried by the node update interface, replace all direct child nodes under the root node in the node tree of the instance corresponding to the first page file in the base library with all direct child nodes under the root node in the node tree of the instance corresponding to the second page file. The display module is used to display the first component updated to the second component on the target page displayed in the page editing interface, based on the replaced instance.

10. An electronic device, characterized in that, The electronic device includes one or more processors and one or more memories, wherein at least one piece of program code is stored in the one or more memories, and the at least one piece of program code is loaded and executed by the one or more processors to implement the page editing method as described in any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, The storage medium stores at least one piece of program code, which is loaded and executed by a processor to implement the page editing method as described in any one of claims 1 to 8.

12. A computer program product, characterized in that, It includes computer instructions that, when executed by a processor, implement the page editing method as described in any one of claims 1 to 8.

Citation Information

Patent Citations

  • Page editing method and device, electronic equipment and storage medium

    CN111045645A

  • Code debugging method and device, electronic equipment and storage medium

    CN111723002A