A page data transmission method, device, system and medium

Abstract

The present invention discloses a method, device, system and medium for transmitting page data. The method includes: in response to the debugging operation of the edited page on the target interface, embedding a preset sub-page on the target interface to display the simulated running effect of the edited page; when the running data of the preset sub-page changes, calling the preset message sending function to send a first message event to the target observation page, the first message event includes the running data to be sent; calling the preset monitoring function to monitor the first message event, and when the first message event is monitored, updating the running data in the first message event on the target observation page. In the process of debugging the edited page, when the running data changes, the message event directly including the running data is actively sent to the target observation page, so that the target observation page can monitor and update the changes of the running data in real time, which effectively improves the efficiency and real-time performance of data monitoring during application debugging.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a page data transmission method, device, system and medium. Background Art

[0002] Currently, after editing a corresponding APP user interface in an APP (application) editor, it is often necessary to simulate the running effect of the APP user interface on a corresponding platform and perform function debugging according to data changes during the simulation running process.

[0003] The existing simulation run data acquisition solution usually uses the function document.getElementById('domId') to obtain the display data on the simulation run user interface. If the data status needs to be displayed in real time, a timer needs to be added to continuously obtain the value of the DOM (document object model) element.

[0004] That is, when the existing solution monitors the data of the APP simulation operation, it is necessary to continuously query and display the DOM elements, which consumes a lot of performance and is inefficient. In addition, since it takes a long time to update the display content of the DOM elements, the update when monitoring the data is also slowed down accordingly, affecting the real-time performance of data transmission during debugging.

[0005] Therefore, the prior art still needs to be improved and developed. Summary of the invention

[0006] In view of the above-mentioned deficiencies in the prior art, an object of the present invention is to provide a page data transmission method, device, system and medium, aiming to solve the problems of poor data monitoring efficiency and real-time performance during application debugging in the prior art.

[0007] The technical solution of the present invention is as follows:

[0008] A page data transmission method, comprising:

[0009] In response to a debugging operation on an edited page on a target interface, embedding a preset sub-page on the target interface to display a simulated running effect of the edited page;

[0010] When the operation data of the preset sub-page changes, calling a preset message sending function to send a first message event to the target observation page, wherein the first message event includes the operation data to be sent;

[0011] A preset monitoring function is called to monitor the first message event. When the first message event is monitored, the operation data in the first message event is updated on the target observation page.

[0012] In one embodiment, in response to the debugging operation on the edited page on the target interface, before embedding a preset sub-page on the target interface to display the simulated running effect of the edited page, the method further includes:

[0013] When the editing data of the edited page changes, calling a preset message sending function to send a second message event to the target observation page, wherein the second message event includes the editing data to be sent;

[0014] A preset monitoring function is called to monitor the second message event, and when the second message event is monitored, the editing data in the second message event is updated on the target observation page.

[0015] In one embodiment, in response to the debugging operation on the edited page on the target interface, before embedding a preset sub-page on the target interface to display the simulated running effect of the edited page, the method further includes:

[0016] In response to a page editing operation on a preset component library and a preset building block library on a target interface, a corresponding edited page is displayed on the target interface.

[0017] In one embodiment, the page data transmission method further includes:

[0018] In response to a data editing operation on the target observation page, an attribute of the received data in the target observation page is adjusted.

[0019] In one embodiment, in response to the debugging operation on the edited page on the target interface, embedding a preset sub-page on the target interface to display the simulated running effect of the edited page includes:

[0020] In response to a debugging operation on an edited page on a target interface, embedding an Iframe subpage corresponding to a target terminal in the debugging operation on the target interface;

[0021] The running status of the edited page on the target terminal is displayed on the Iframe subpage.

[0022] In one embodiment, calling a preset message sending function to send a first message event to a target observation page specifically includes:

[0023] Call the PostMessage function to send the first message event to the target observation page.

[0024] In one embodiment, calling a preset monitoring function to monitor the first message event specifically includes:

[0025] Call the addEventListener function to listen to the first message event.

[0026] A page data transmission device, comprising:

[0027] A debugging module, configured to, in response to a debugging operation on an edited page on a target interface, embed a preset sub-page on the target interface to display a simulated running effect of the edited page;

[0028] A first message sending module, configured to call a preset message sending function to send a first message event to a target observation page when the operation data of the preset sub-page changes, wherein the first message event includes the operation data to be sent;

[0029] The first message monitoring module is used to call a preset monitoring function to monitor the first message event, and when the first message event is monitored, update the operation data in the first message event on the target observation page.

[0030] A page data delivery system, the system comprising at least one processor; and

[0031] a memory communicatively connected to the at least one processor; wherein,

[0032] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the above-mentioned page data transmission method.

[0033] Another embodiment of the present invention further provides a non-volatile computer-readable storage medium, wherein the non-volatile computer-readable storage medium stores computer-executable instructions, which, when executed by one or more processors, enable the one or more processors to execute the above-mentioned page data transfer method.

[0034] Beneficial effects: The present invention discloses a page data transmission method, device, system and medium. Compared with the prior art, during the debugging of an edited page, when the running data changes, a message event directly including the running data is actively sent to a target observation page, so that the target observation page can monitor and update the changes of the running data in real time, effectively improving the efficiency and real-time performance of data monitoring during application debugging. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] The present invention will be further described below with reference to the accompanying drawings and embodiments, in which:

[0036] Figure 1 A flow chart of a page data transmission method provided by an embodiment of the present invention;

[0037] Figure 2 A schematic diagram of a target interface in a page data transmission method provided by an embodiment of the present invention;

[0038] Figure 3 A schematic diagram of a preset sub-interface in the page data transmission method provided by an embodiment of the present invention;

[0039] Figure 4 Another flow chart of the page data transmission method provided by an embodiment of the present invention;

[0040] Figure 5 A schematic diagram of another target interface in the page data transmission method provided by an embodiment of the present invention;

[0041] Figure 6 A page structure block diagram of an APP editor in the page data transmission method provided in an embodiment of the present invention;

[0042] Figure 7 A schematic diagram of functional modules of a page data transmission device provided by an embodiment of the present invention;

[0043] Figure 8 A schematic diagram of the hardware structure of a page data transmission system provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0044] In order to make the purpose, technical solution and effect of the present invention clearer and more specific, the present invention is further described in detail below. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention. The embodiments of the present invention are described below in conjunction with the accompanying drawings.

[0045] See also Figure 1 , Figure 1A flow chart of an embodiment of a page data transmission method provided by the present invention. The page data transmission method provided in this embodiment is applicable to the case of data monitoring and transmission during APP (application) debugging runtime, and is specifically applied to development and debugging equipment, which can realize the development, construction and debugging of APP by software and / or hardware, and can be optionally applied to a system consisting of development and debugging equipment, a network and a server, wherein the network is a medium for providing a communication link between the development and debugging equipment and the server, which can include various connection types, such as wired, wireless communication links or optical fiber cables, etc.; the operating system on the development and debugging equipment can include a handheld device operating system (iPhone operating system, iOS system), Android system, Microsoft operating system or other operating system, and the development and debugging equipment is connected to the server through the network to realize interaction, so as to perform operations such as receiving or sending data, and can specifically be various electronic devices with a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, portable computers and desktop servers, etc.

[0046] like Figure 1 As shown, the method specifically comprises the following steps:

[0047] S101, in response to a debugging operation on an edited page on a target interface, embedding a preset sub-page on the target interface to display a simulated running effect of the edited page;

[0048] In this embodiment, APP editing and debugging operations are performed through an APP editor pre-installed on a PC or mobile terminal, or the APP editor is loaded after jumping to a specified link through a web browser to perform APP editing and debugging operations. This embodiment takes the use of the APP editor in a web browser as an example to implement web (world wideweb, global wide area network)-based APP editing and debugging.

[0049] When the user jumps to the specified link, the APP editor will be loaded. There is a target interface in the APP editor, and the user can perform page editing operations of the APP user interface on the target interface, including the design layout, style adjustment and logic code editing of UI (user interface) components on the user interface. In this embodiment, the operation logic of the UI component can be described in a graphical programming manner, which effectively improves the efficiency and convenience of APP editing, and then an edited page with corresponding logical functions is obtained on the target interface, that is, the edited page is a user interface with corresponding interactive functions. When the edited page needs to be functionally debugged, the user can input corresponding debugging operations on the edited page, such as clicking a preset debugging button, etc., and a preset sub-page is embedded in the target interface to simulate the operation of the edited page and display the simulated operation effect, thereby realizing efficient and convenient page operation effect preview.

[0050] Furthermore, in response to the debugging operation on the edited page on the target interface, embedding a preset sub-page on the target interface to display the simulated running effect of the edited page includes:

[0051] In response to a debugging operation on an edited page on a target interface, embedding an Iframe subpage corresponding to a target terminal in the debugging operation on the target interface;

[0052] The running status of the edited page on the target terminal is displayed on the Iframe subpage.

[0053] In this embodiment, when the debugging of the edited page is triggered, Figure 2 and Figure 3 As shown, after the edited page is generated, further debugging operations can be entered, for example, by clicking Figure 2 At the same time, the debugging operation further includes a target terminal, which includes a smart phone, a tablet computer, a portable computer, etc., that is, different target terminals can be selected when triggering the debugging operation, thereby simulating the interface effect of the edited page on different target terminals.

[0054] Specifically, an Iframe subpage corresponding to the target terminal will be embedded in the target interface. Iframe is an HTML (hyper text markup language) tag, which acts as a document in a document, or a floating frame (FRAME). The Iframe element will create an inline frame containing another document, such as Figure 3As shown, the target terminal included in the current debugging operation is a smart phone. When the user clicks the "Run" button, an Iframe subpage is embedded in the target interface and rendered according to the appearance attributes of the smart phone. The running status of the edited page on the target terminal is displayed on the Iframe subpage, so that the running effect of the edited page on the smart phone can be simulated in the APP editor through the Iframe subpage, thereby realizing intuitive and efficient debugging of the APP user interface.

[0055] It is understandable that the Iframe subpage is only a feasible embedded page display method, and other simulation operation display methods can also be used, such as creating a DIV (division) container on the target interface to display the simulation operation effect, which can also realize the debugging operation effect display of the edited page. This embodiment does not limit this.

[0056] S102: When the operation data of the preset sub-page changes, calling a preset message sending function to send a first message event to a target observation page, wherein the first message event includes the operation data to be sent;

[0057] When simulating the operation in the preset sub-page and displaying the operation effect of the edited page, if the operation number of the preset sub-page changes as the code runs or according to the user input, the preset message sending function is actively called to send the first message event to the target observation page, that is, the target interface also includes the target observation page (such as Figure 5 As shown in the right area, it can be understood that the position of the target observation page can be within the display area of ​​the screen, and the specific position is not limited, such as it can be in the left area). The target observation page is used to display the real-time changes of the operating data in the preset sub-page. Unlike the existing solution that requires continuous acquisition of the display content in the preset sub-page, in this embodiment, when the preset sub-page of the simulated operation has data changes, the preset message sending function is actively called to send a first message event to the target observation page. The first message event includes the operating data to be sent, that is, the latest real-time operating data, so that the data changes can be timely and efficiently transmitted to the target observation page in the form of message events, avoiding a large number of invalid data queries and effectively improving the efficiency of page data transmission during application debugging.

[0058] Specifically, the PostMessage function is called to send the first message event to the target observation page, where the PostMessage function is a function in the Windows API (application programming interface), which is used to put (send) a message into the message queue associated with the thread created by the specified window, and returns without waiting for the thread to process the message. It is an asynchronous message mode. The PostMessage method is added in HTML5, and PostMessage can safely implement cross-source communication. In this embodiment, when the running data of the preset sub-page changes, the PostMessage function is actively called, and the running data to be sent is used as the message parameter in the first message event. The message parameter represents the data to be sent to other windows, which will be serialized by the structured cloning algorithm, that is, the data object can be safely transmitted to the target window without restriction without serialization itself, thus saving the processing process of data transmission; and the address of the target observation page is used as the targetOrigin parameter in the first message event. The targetOrigin parameter is used to specify which target windows can receive the message event, and its value can be the string "" (indicating unlimited) or a URL (uniform resource locator). The URL includes the protocol, host address and port. When sending a message event, if any of the three items of the protocol, host address or port of the target window does not match the value provided by targetOrigin, the message will not be sent, thereby ensuring the security of message event transmission and avoiding data leakage.

[0059] It is understandable that the PostMessage function is only a feasible message event sending function. In other embodiments, other cross-domain message sending methods can also be used, such as sending message events through the WebSocket protocol, which can also achieve cross-domain message sending. This embodiment does not limit this.

[0060] S103: Call a preset monitoring function to monitor the first message event. When the first message event is monitored, update the operation data in the first message event on the target observation page.

[0061] When the preset sub-page changes its running data, it calls the preset message sending function to send the first message event to the target observation page. The target observation page listens to the first message event by calling the preset listening function. When the first message event is listened, the first message event is received and parsed to obtain the running data contained in the first message event. After parsing the running data transmitted by the preset sub-page, it is synchronously updated and displayed on the target observation page to achieve an efficient and real-time data monitoring process. That is, in this embodiment, the target observation page does not need to continuously query and update the native DOM elements in the preset sub-page. It only needs to call the preset listening function to capture the first message event sent by the preset sub-page to achieve an efficient data transmission process between pages, which effectively improves the efficiency and real-time performance of data monitoring during application debugging.

[0062] Specifically, the addEventListener function is called to listen to the first message event, wherein the addEventListener function is a function that can listen to events and process the events accordingly. By registering the specified listener to EventTarget, when the object triggers the specified event, the specified callback function will be executed. EventTarget (event target) can be an element Element on a document, Document and Window or any other object that supports events. Efficient and real-time data monitoring can be achieved by calling the addEventListener function.

[0063] Optionally, in this embodiment, after the addEventListener function is called to listen to the first message event, the source attribute of the first message event is further verified, that is, when sending the first message event, the source attribute of the message event is configured through the origin attribute in the message parameter, and when receiving the message, the source attribute is verified to confirm whether the source attribute of the first message event is a preset sub-page. If so, the verification is successful, otherwise the verification fails. When the source attribute verification is successful, the operating data in the first message event is received, and the received operating data is synchronously updated and displayed on the target observation page to ensure the reliability and security of the data source.

[0064] It can be understood that the addEventListener function is only a feasible message monitoring function. In other embodiments, other cross-domain message monitoring and processing methods can also be used. For example, monitoring of message events and data reception through the WebSocket protocol can also realize cross-domain message reception and processing. This embodiment does not limit this.

[0065] like Figure 4As shown, before step S101, the following steps may also be included:

[0066] S104, when the editing data of the edited page changes, calling a preset message sending function to send a second message event to the target observation page, wherein the second message event includes the editing data to be sent;

[0067] S105: Call a preset monitoring function to monitor the second message event. When the second message event is monitored, update the edit data in the second message event on the target observation page.

[0068] In this embodiment, before simulating and debugging the edited page, if the editing data of the edited page, such as variables and lists corresponding to UI components, changes according to the user's page editing operation, the preset message sending function is also actively called to send a second message event to the target observation page. The second message event includes the editing data to be sent, that is, the latest page editing data, so that the data changes of the page editing can be timely and efficiently transmitted to the target observation page in the form of a message event. The target observation page listens to the second message event by calling the preset listening function. When the second message event is listened to, the second message event is received and the editing data contained in the second message event is parsed. After parsing the editing data passed from the edited page, it is synchronously updated and displayed on the target observation page. That is, in this embodiment, not only can the data changes in the page debugging be transmitted in a timely manner, but also real-time and efficient data transmission and update are realized in the page editing process, which provides more reliable and timely data synchronization updates for the editing and debugging of the application, and facilitates the development and function debugging of the application.

[0069] Similarly, the second message event is sent to the target observation page by calling the PostMessage function, and the second message event is listened to by calling the addEventListener function. In this embodiment, when the editing data of the edited page changes, the PostMessage function is actively called, and the editing data to be sent is used as the message parameter in the second message event, and the address of the target observation page is used as the targetOrigin parameter in the second message event. The targetOrigin parameter is used to specify which target windows can receive the message event. Its value can be the string "" (indicating unlimited) or a URL (uniform resource locator), which includes the protocol, host address and port. When sending a message event, if any of the protocol, host address or port of the target window does not match the value provided by targetOrigin, the message will not be sent, thereby ensuring the security of message event transmission and avoiding data leakage.

[0070] Moreover, in the present embodiment, after the addEventListener function is called to listen to the second message event, the source attribute of the second message event is further verified, that is, when sending the second message event, the source attribute of the message event is configured through the origin attribute in the message parameter, and when receiving the message, the source attribute is verified to confirm whether the source attribute of the second message event is an edited page. If so, the verification is successful, otherwise the verification fails. When the source attribute verification is successful, the operating data in the first message event is received, and the received operating data is synchronously updated and displayed on the target observation page to ensure the reliability and security of the data source.

[0071] The page data transmission method further includes:

[0072] In response to a data editing operation on the target observation page, an attribute of the received data in the target observation page is adjusted.

[0073] In this embodiment, for the data that has been received and synchronously updated and displayed on the target observation page, the user can further input corresponding data editing operations, such as adding, removing, pinning, color setting, font setting, etc., to adjust the properties of the received data in the target observation page. Specifically, the properties of the received real-time operating data or real-time editing data can be adjusted, such as pinning certain important data to the top, or removing certain useless data, etc., so that the target observation page can be more adapted to actual data monitoring needs and avoid problems such as complex and difficult to locate data, and excessive data occupying page space.

[0074] Before step S101, the following steps may also be included:

[0075] In response to a page editing operation on a preset component library and a preset building block library on a target interface, a corresponding edited page is displayed on the target interface.

[0076] In this embodiment, the corresponding user interface is edited and generated by means of graphical programming. Specifically, the target interface includes a component library trigger area and a building block trigger area. The component library trigger area is a control area for triggering the display of a preset component library, and the building block library trigger area is a control area for triggering the display of a preset building block library, that is, the preset component library or preset building block library on the target interface can be in a hidden state, and the preset component library or preset building block library can be displayed by clicking the component library trigger area or the building block library trigger area, so as to realize a simple and highly utilized target interface. Of course, the preset component library or preset building block library can also be directly in a display state, so that the user can directly perform component page editing operations, which is not limited in this embodiment. In this embodiment, the user can input corresponding page editing operations to the preset component library and the preset building block library to select the corresponding UI component and edit the corresponding building block code block for the selected UI component, so as to intuitively and conveniently generate and display the corresponding edited page on the target interface by means of graphical programming.

[0077] Specifically, in response to the page editing operation of the preset component library and the preset building block library on the target interface, displaying the corresponding edited page on the target interface includes:

[0078] In response to an editing operation on a first page of a preset component library on a target interface, editing a corresponding UI component in a visual editing area of ​​the target interface;

[0079] In response to a second page editing operation on a preset building block library on the target interface, editing a building block code block corresponding to the UI component in a visual programming area of ​​the target interface;

[0080] The edited page is generated according to the UI component and the building block code block corresponding to the UI component.

[0081] In this embodiment, the target interface also includes a visual editing area and a visual programming area. The visual editing area is used to display corresponding UI components according to the input first page editing operation, such as Figure 2As shown, specifically, after the preset component library located on the left side of the target interface is triggered and displayed, the user can enter the first page editing operation in the preset component library, select the corresponding UI component and drag it into the visual editing area on the right side of the preset component library. The preset component library stores various types of UI components, such as text components, button components, input box components, picture box components, radio button components, check box components, web browsing box components, switch components, slider components, etc. When the user flexibly selects different UI components in the preset component library for display in the visual editing area, the combination order, position, display style and other configuration attributes of the selected UI components can be further adjusted, thereby obtaining UI components with corresponding configuration attributes, thereby realizing flexible and convenient APP interface design.

[0082] The visual programming area is used to display the building block code block corresponding to the UI component according to the input second page editing operation. Specifically, the building block code block refers to a block structure used to replace the code fragment in visual programming. Each building block code block is encapsulated with code that triggers a corresponding event or implements a corresponding function. By performing a visual page editing operation on the building block code block, a convenient and efficient programming process can be achieved. Figure 2 As shown, after editing several UI components in the visual editing area of ​​the target page, the preset building block library located in the middle of the target interface can be triggered to display, and then the user can enter the second page editing operation in the preset building block library, select the corresponding building block code block and drag it into the visual programming area on the right side of the preset building block library, and use the building block code block to logically describe the UI components in the current visual editing area, and generate the edited page according to the UI components and the building block code blocks corresponding to the UI components. That is to say, the UI components in the edited page will trigger corresponding events or implement corresponding functions according to the logic when the building block code blocks are executed, so that the UI components are transformed from static to dynamic, and flexible and rich interactive functions of the APP interface are realized.

[0083] Specifically, the preset building block library includes different types of building block templates, including event building blocks and function building blocks, wherein the event building block is used to describe the triggering when a preset event occurs. For example, there may be multiple event building blocks, including but not limited to when the character is clicked, when the start is clicked, when the screen is clicked, etc. The function building block refers to a building block code block that can execute certain functions of the target character, such as movement, waiting, color setting, calculation function, sensor function, variable function, list function, function function, communication function, etc., in addition to the event building block. The building block code blocks added to the visual programming area all use the UI components in the visual editing area as the running objects, and the user can further input the splicing operation to adjust the splicing order of the building block code blocks, and then adjust the corresponding logical order. That is, this embodiment further uses graphical programming on the basis of realizing graphical interface editing, and describes the running logic of each UI component on the APP interface in a simple and convenient way of splicing building block code blocks, which effectively improves the visualization during page debugging or editing.

[0084] To better understand the implementation process of the page data transmission method provided by the present invention, the following Figures 2 to 6 , the process of page data transmission is described in detail with a specific application embodiment:

[0085] When the user jumps to the specified link, an APP editor will be loaded, such as the AppCraft editor or other editors with APP editing and debugging functions. In the APP editor, there is a target interface, as shown in the following figure: Figure 6 As shown, the target interface includes a programming page, a simulated APP running page and a data observation page, wherein the programming page further includes a display area of ​​a preset component library, a visual editing area, a display area of ​​a preset building block library and a visual programming area, that is, the preset component library and the preset building block library are directly displayed on the programming page, and the user enters the first page editing operation in the preset component library, selects the corresponding UI component and drags it into the visual editing area on the right side of the preset component library, as shown in FIG. Figure 2 As shown, you can drag in a variety of different types of UI components and further adjust the combination order, position, display style, etc. of multiple UI components. Then, take the currently edited UI component as the target role, and perform block programming in the visual programming area of ​​the target interface. The user selects the corresponding block template in the preset block library, and adds the block code block corresponding to the target role in the visual programming area according to the selected block template. The block code blocks added to the visual programming area all use the target role as the running object, and the user can further input the splicing operation to adjust the splicing order of the block code blocks, and then adjust the corresponding logical order, such as Figure 2As shown, the building block code block configured for the button component "Red Score" in the UI component is an event building block "When the button is clicked" and a variable building block. Specifically, when the "Red Score" button is clicked, the variable "Red Square" is increased by "1". That is to say, when the user clicks the red score button on the edited page, the corresponding Red Square variable will increase by 1, thereby realizing the scoring interaction function.

[0086] When the programming page generates an edited page by graphical programming, if the edited data changes, for example, taking the variable building block and the list building block as an example, the user can add variables, edit variable names, delete variables, and set variable default initial values. The list column can add lists, edit list names, delete lists, and set list default initial values, etc. At this time, the PostMessage function is called to pass the second message event to the data observation page. When the data observation page listens to the second message event through the addEventListener function, the changed edited data is displayed in real time on the data observation page, such as Figure 5 As shown, real-time data transmission is achieved during page editing.

[0087] When the "Run" button is clicked to simulate the running effect of the edited page in a smart phone, Figure 3 As shown, an Iframe subpage is embedded on the target interface. Optionally, it is embedded at the location of the edited page to facilitate the display of the switching between the page editing state and the running state. During the debugging and running process, the running data on the Iframe subpage, such as variables and lists, may change due to the running of blocks or clicks input by the user. For example, when the user clicks the "red score" button, the variable "red square" increases by "1". When the running data changes, the PostMessage function is called to pass the first message event to the data observation page. When the data observation page listens to the first message event through the addEventListener function, it parses the running data such as the screen, variables, lists and data status passed in the first message event, and updates the value of the running data in the data observation page in real time, such as Figure 5 As shown, efficient and real-time data transmission is achieved during page debugging.

[0088] It can be seen from the above method embodiments that the page data transmission method provided by the present invention actively sends a message event directly containing the running data to the target observation page when the running data changes during the debugging of the edited page, so that the target observation page can monitor and update the changes in the running data in real time, thereby effectively improving the efficiency and real-time performance of data monitoring during application debugging.

[0089] It should be noted that there is not necessarily a certain order between the above-mentioned steps. A person skilled in the art can understand, based on the description of the embodiments of the present invention, that in different embodiments, the above-mentioned steps may have different execution orders, that is, they may be executed in parallel, may be executed interchangeably, and so on.

[0090] Another embodiment of the present invention provides a page data transmission device, such as Figure 7 As shown, the apparatus 700 includes:

[0091] The debugging module 701 is used for, in response to the debugging operation of the edited page on the target interface, embedding a preset sub-page on the target interface to display the simulated running effect of the edited page;

[0092] A first message sending module 702 is used to call a preset message sending function to send a first message event to a target observation page when the operation data of the preset sub-page changes, wherein the first message event includes the operation data to be sent;

[0093] The first message monitoring module 703 is used to call a preset monitoring function to monitor the first message event, and when the first message event is monitored, update the operation data in the first message event on the target observation page.

[0094] The debugging module 701, the first message sending module 702 and the first message listening module 703 are connected in sequence. The module referred to in the present invention refers to a series of computer program instruction segments that can complete specific functions, which is more suitable for describing the execution process of the page data transmission than the program. For the specific implementation of each module, please refer to the corresponding method embodiment above, which will not be repeated here.

[0095] Furthermore, the page data transmission device also includes:

[0096] A second message sending module, configured to call a preset message sending function to send a second message event to a target observation page when the editing data of the edited page changes, wherein the second message event includes the editing data to be sent;

[0097] The second message monitoring module is used to call a preset monitoring function to monitor the second message event, and when the second message event is monitored, update the editing data in the second message event on the target observation page.

[0098] Furthermore, the page data transmission device also includes:

[0099] The data editing module is used to adjust the attributes of the received data in the target observation page in response to the data editing operation on the target observation page.

[0100] Furthermore, the page data transmission device also includes:

[0101] The page editing module is used to respond to page editing operations on a preset component library and a preset building block library on a target interface and display corresponding edited pages on the target interface.

[0102] Furthermore, the debugging module 701 includes:

[0103] An embedding unit, configured to, in response to a debugging operation on an edited page on a target interface, embed an Iframe subpage corresponding to a target terminal in the debugging operation on the target interface;

[0104] The running unit is used to display the running status of the edited page on the target terminal on the Iframe subpage.

[0105] Further, the first message sending module 702 is specifically used for:

[0106] Call the PostMessage function to send the first message event to the target observation page.

[0107] Furthermore, the first message monitoring module 703 is specifically used for:

[0108] Call the addEventListener function to listen to the first message event.

[0109] Another embodiment of the present invention provides a page data transmission system, such as Figure 8 As shown, the system 800 includes:

[0110] One or more processors 801 and memory 802, Figure 8 A processor 801 is used as an example for the description. The processor 801 and the memory 802 may be connected via a bus or other means. Figure 8 The example of connecting through bus is taken in the following.

[0111] Processor 801 is used to complete various control logics of system 800, which can be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA), a single-chip microcomputer, an ARM (Acorn RISC Machine) or other programmable logic device, a discrete gate or transistor logic, a discrete hardware component or any combination of these components. In addition, processor 801 can also be any traditional processor, microprocessor or state machine. Processor 801 can also be implemented as a combination of computing devices, for example, a combination of a DSP and a microprocessor, a plurality of microprocessors, one or more microprocessors combined with a DSP and / or any other such configuration.

[0112] The memory 802 is a non-volatile computer-readable storage medium that can be used to store non-volatile software programs, non-volatile computer executable programs and modules, such as program instructions corresponding to the page data transmission method in the embodiment of the present invention. The processor 801 executes various functional applications and data processing of the system 800 by running the non-volatile software programs, instructions and units stored in the memory 802, that is, implements the page data transmission method in the above method embodiment.

[0113] The memory 802 may include a program storage area and a data storage area, wherein the program storage area may store an operating system and an application required by at least one function; the data storage area may store data created according to the use of the system 800, etc. In addition, the memory 802 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device. In some embodiments, the memory 802 may optionally include a memory remotely arranged relative to the processor 801, and these remote memories may be connected to the system 800 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0114] One or more units are stored in the memory 802, and when executed by one or more processors 801, the page data transmission method in any of the above method embodiments is executed, for example, the page data transmission method described above is executed. Figure 1 The method comprises steps S101 to S103.

[0115] An embodiment of the present invention provides a non-volatile computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are executed by one or more processors, for example, to execute the above-described Figure 1 The method comprises steps S101 to S103.

[0116] As an example, non-volatile storage media can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) as external cache memory. By way of illustration and not limitation, RAM can be obtained in many forms such as synchronous RAM (SRAM), dynamic RAM, (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), Synchlink DRAM (SLDRAM), and direct Rambus RAM (DRRAM). The disclosed memory components or memories of the operating environment described herein are intended to include one or more of these and / or any other suitable types of memory.

[0117] In summary, in a page data transmission method, device, system and medium disclosed in the present invention, the method embeds a preset sub-page on the target interface to display the simulated running effect of the edited page in response to the debugging operation of the edited page on the target interface; when the running data of the preset sub-page changes, the preset message sending function is called to send a first message event to the target observation page, and the first message event includes the running data to be sent; the preset listening function is called to listen to the first message event, and when the first message event is listened, the running data in the first message event is updated on the target observation page. In the process of debugging the edited page, when the running data changes, a message event directly including the running data is actively sent to the target observation page, so that the target observation page can monitor and update the changes in the running data in real time, which effectively improves the efficiency and real-time performance of data monitoring during application debugging.

[0118] Of course, those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing related hardware (such as a processor, a controller, etc.) through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium, and the computer program can include the processes of the above-mentioned method embodiments when executed. The storage medium can be a memory, a disk, a floppy disk, a flash memory, an optical storage device, etc.

[0119] It should be understood that the application of the present invention is not limited to the above examples. For ordinary technicians in this field, improvements or changes can be made based on the above description. All these improvements and changes should fall within the scope of protection of the claims attached to the present invention.

Claims

1. A page data transmission method, characterized in that: include: In response to a debugging operation on an edited page on a target interface, embedding a preset sub-page on the target interface to display a simulated running effect of the edited page; When the operation data of the preset sub-page changes, calling a preset message sending function to send a first message event to the target observation page, wherein the first message event includes the operation data to be sent; A preset monitoring function is called to monitor the first message event. When the first message event is monitored, the operation data in the first message event is updated on the target observation page.

2. The page data transmission method according to claim 1, characterized in that: In response to the debugging operation on the edited page on the target interface, before embedding a preset sub-page on the target interface to display the simulated running effect of the edited page, the method further includes: When the editing data of the edited page changes, calling a preset message sending function to send a second message event to the target observation page, wherein the second message event includes the editing data to be sent; A preset monitoring function is called to monitor the second message event, and when the second message event is monitored, the editing data in the second message event is updated on the target observation page.

3. The page data transmission method according to claim 1 or 2, characterized in that: The method further comprises: In response to a display adjustment operation on the target observation page, a display attribute of the received data in the target observation page is adjusted.

4. The page data transmission method according to claim 1 or 2, characterized in that: In response to the debugging operation on the edited page on the target interface, before embedding a preset sub-page on the target interface to display the simulated running effect of the edited page, the method further includes: In response to a page editing operation on a preset component library and a preset building block library on a target interface, a corresponding edited page is displayed on the target interface.

5. The page data transmission method according to claim 1, characterized in that: In response to the debugging operation on the edited page on the target interface, embedding a preset sub-page on the target interface to display the simulated running effect of the edited page includes: In response to a debugging operation on an edited page on a target interface, embedding an Iframe subpage corresponding to a target terminal in the debugging operation on the target interface; The running status of the edited page on the target terminal is displayed on the Iframe subpage.

6. The page data transmission method according to any one of claims 1 to 5, characterized in that: The calling of the preset message sending function to send the first message event to the target observation page specifically includes: Call the PostMessage function to send the first message event to the target observation page.

7. The page data transmission method according to any one of claims 1 to 5, characterized in that: The calling of a preset monitoring function to monitor the first message event specifically includes: Call the addEventListener function to listen to the first message event.

8. A page data transmission device, characterized in that: The device comprises: A debugging module, configured to, in response to a debugging operation on an edited page on a target interface, embed a preset sub-page on the target interface to display a simulated running effect of the edited page; A first message sending module, configured to call a preset message sending function to send a first message event to a target observation page when the operation data of the preset sub-page changes, wherein the first message event includes the operation data to be sent; The first message monitoring module is used to call a preset monitoring function to monitor the first message event, and when the first message event is monitored, update the operation data in the first message event on the target observation page.

9. A page data transmission system, characterized in that: The system includes at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the page data transmission method according to any one of claims 1 to 7.

10. A non-volatile computer-readable storage medium, characterized in that: The non-volatile computer-readable storage medium stores computer-executable instructions, which, when executed by one or more processors, enable the one or more processors to execute the page data transmission method according to any one of claims 1 to 7.

Images