Picture display method and device, equipment and medium

Abstract

The embodiment of the invention discloses a picture display method and device, electronic equipment and a storage medium. A main process and a rendering process are instantiated based on the same data structure to obtain a consistent data object, during window interaction operation, the data object of the main process generates a patch used for describing window transformation, the patch is sent to the rendering process, and the data object of the rendering process applies the patch to complete window change. In the whole processing process, the rendering process does not need to actively obtain the state change of the host process, the transmission logic and path of the business change information are clear, the display of the application window and the operation of the application are stable, the maintenance thought in the iteration process is clear, and the implementation is easy. And the comprehensive cost of the desktop end application developed in the cross-process synchronization mode in the use and maintenance process can be effectively reduced on the whole.

Description

Technical Field

[0001] Embodiments of the present application relate to the field of interaction technologies, and in particular, to a method, apparatus, device, and medium for screen display. Background Art

[0002] When developing multi-process applications, there are mainly two types of processes, namely the main process and the rendering process. One rendering process corresponds to one application window. The main process is the process for overall application control and does not involve window display itself. When developing desktop applications using multi-process technology, there is an unavoidable problem, that is, cross-process state synchronization. Currently, a common approach is to store an object in the main process, and any state changes of the entire application (such as whether logged in, whether a function is enabled, etc.) need to be operated and changed on this object by a function in the main process, and then the changed state is notified to other rendering processes to complete the screen update of the window.

[0003] When the inventor uses the existing cross-process synchronization method for desktop application development, it is found that the complex information transmission between processes easily leads to errors when a large number of application windows are displayed simultaneously, and problems occur in the application operation; when the main process business changes, special business logic needs to be designed, and the maintainability during the application iteration process continuously decreases. Overall, the comprehensive cost of desktop applications developed based on the existing cross-process synchronization method is relatively high during use and maintenance. Summary of the Invention

[0004] The present invention provides a method, apparatus, device, and medium for screen display to solve the technical problem of relatively high comprehensive cost of desktop applications developed based on the existing cross-process synchronization method during use and maintenance.

[0005] In a first aspect, an embodiment of the present application provides a method for screen display, which includes:

[0006] In the main process, perform a first instantiation on the current application window to obtain a first data object. The first instantiation includes defining a first data structure and a window update function required for the current application window;

[0007] In the rendering process, introduce the first data structure to perform a second instantiation to obtain a second data object with the same data processing logic as the first data object, and register the first data structure used by the rendering process with the main process;

[0008] When a window interaction operation is received, call the window update function to operate on the first data object according to the window interaction operation, and generate a patch for describing the changed part of the first data object during the operation process;

[0009] Send the patch from the main process to the rendering process, and apply the patch to the second data object;

[0010] Update the change information of applying the patch to the second data object to the current application window through the rendering process, so as to complete the screen response to the window interaction operation.

[0011] In a second aspect, an embodiment of the present application further provides a screen display device, which includes:

[0012] A first instantiation unit, configured to complete a first instantiation of the current application window in the main process to obtain a first data object. The first instantiation includes defining a first data structure and a window update function required for the current application window;

[0013] A second instantiation unit, configured to complete a second instantiation by introducing the first data structure in the rendering process to obtain a second data object with the same data processing logic as the first data object, and register the first data structure used by the rendering process with the main process;

[0014] A function call unit, configured to, when receiving a window interaction operation, call the window update function to operate on the first data object according to the window interaction operation, and generate a patch for describing the changed part of the first data object during the operation process;

[0015] A patch sending unit, configured to send the patch from the main process to the rendering process and apply the patch to the second data object;

[0016] A window update unit, configured to update the change information of applying the patch to the second data object to the current application window through the rendering process, so as to complete the screen response to the window interaction operation.

[0017] In a third aspect, an embodiment of the present application further provides an electronic device, which includes:

[0018] One or more processors;

[0019] A memory, configured to store one or more computer programs;

[0020] When the one or more computer programs are executed by the one or more processors, the electronic device implements the screen display method as in the first aspect.

[0021] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the screen display method as in the first aspect is implemented.

[0022] The above-mentioned screen display method, device, equipment and medium. In this method, in the main process, the first instantiation of the current application window is completed to obtain a first data object. The first instantiation includes defining a first data structure and a window update function required for the current application window. In the rendering process, the first data structure is introduced to complete the second instantiation, obtaining a second data object with the same data processing logic as the first data object, and registering the first data structure used by the rendering process with the main process. When a window interaction operation is received, the window update function is called to operate on the first data object according to the window interaction operation, generating a patch for describing the changed part of the first data object during the operation process. The patch is sent from the main process to the rendering process, and the patch is applied to the second data object. The rendering process updates the change information of the second data object applying the patch to the current application window to complete the screen response to the window interaction operation. By instantiating the main process and the rendering process based on the same data structure to obtain consistent data objects, during the window interaction operation, the data object of the main process generates a patch for describing the window transformation, and the patch is sent to the rendering process for the data object of the rendering process to apply the patch to complete the window change, thus completing the screen response to the window interaction operation. During the entire processing process, the rendering process does not need to actively obtain the state changes of the main process. The transmission logic and path of the service change information are clear, the display of the application window and the operation of the application are stable, the maintenance idea during the iteration process is clear, and overall, it can effectively reduce the comprehensive cost during the use and maintenance of desktop applications developed by the cross-process synchronization method. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 It is a flowchart of a screen display method provided by an embodiment of the present application.

[0024] Figure 2 It is a schematic structural diagram of a screen display device provided by an embodiment of the present application.

[0025] Figure 3 It is a schematic structural diagram of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0026] The present invention will be further described in detail below with reference to the drawings and embodiments. It can be understood that the specific embodiments described herein are used to explain the present invention, rather than limiting the present invention. In addition, it should be noted that, for the sake of convenience of description, only parts related to the present invention are shown in the drawings, rather than all the structures.

[0027] It should be noted that due to space limitations, the specification of the present application does not list all optional implementation manners. After reading the specification of the present application, those skilled in the art should be able to think that as long as the technical features do not conflict with each other, any combination of technical features can constitute an optional implementation manner.

[0028] The following will elaborate on each embodiment of the present invention in detail.

[0029] When developing multi-process applications based on JavaScript (a typical scenario is Electron desktop applications), there are mainly a main process and a rendering process. One rendering process corresponds to one application window, and the main process is the process for overall application control without a corresponding window. In the existing cross-process state synchronization methods, each time the state changes, a special message needs to be called to notify the corresponding window, and it is troublesome and error-prone to find out which windows need this message. Especially when there are a large number of application windows, it is very easy for a certain window update to be missed, directly resulting in problems in the application operation. In the overall application operation logic, when the state changes in the main process, other business logics in the main process cannot accurately know whether the current required state has changed. At this time, relevant business logics need to be actively triggered for execution during the change. As the business iterates, the maintainability of the project continues to decline. Eventually, the overall cost of desktop applications developed based on the existing cross-process synchronization method is relatively high during use and maintenance.

[0030] In response to the above technical problems, the embodiment of the present application proposes a screen display method. By instantiating the main process and the rendering process based on the same data structure to obtain consistent data objects, during window interaction operations, the data object in the main process generates patches for describing window transformations and sends the patches to the rendering process. The data object in the rendering process applies the patches to complete the window changes, thereby completing the screen response of the window interaction operation. During the entire processing process, the rendering process does not need to actively obtain the state changes of the main process. The transmission logic and path of business change information are clear, the display of application windows and the operation of the application are stable, the maintenance idea is clear during the iteration process, and overall, it can effectively reduce the overall cost of desktop applications developed by the cross-process synchronization method during use and maintenance.

[0031] Figure 1 It is a flowchart of a screen display method provided by an embodiment of the present application. This screen display method is applied to various electronic devices that can run desktop applications developed by the cross-process synchronization method and is implemented by the electronic devices, specifically, various mobile terminals, personal computers, etc. As Figure 1 shown, this screen display method includes steps S110 - S140:

[0032] Step S110: Perform a first instantiation on the current application window in the main process to obtain a first data object. The first instantiation includes defining a first data structure and a window update function required for the current application window.

[0033] Step S120: Introduce the first data structure in the rendering process to complete the second instantiation, obtain a second data object with the same data processing logic as the first data object, and register the first data structure used by the rendering process with the main process.

[0034] In the embodiments of the present application, the first instantiation of the current application window can be completed in the main process through a reactive state management tool to obtain a first data object; additionally, the second instantiation can be completed by introducing the first data structure in the rendering process through the reactive state management tool to obtain a second data object with the same data processing logic as the first data object.

[0035] The window update function specifically refers to a function used to implement the four permanent basic functions of creation, reading, updating, and deletion. The window update function is also called a CRUD function, and it is named after the first letters of create, retrieve, update, and delete.

[0036] The reactive state management tool needs to have the following characteristics: one is to support data structure definition, the second is to support generating patches describing modifications, the third is to support converting the currently instantiated data object into a JSON structure, and the fourth is to support reactivity (defining an observable object that can contain various data in the application. When these data change, the object automatically notifies all observers so that they can update the UI or perform other operations accordingly). Exemplary reactive state management tools that can be used in the embodiments of the present application include mobx-state-tree.

[0037] Step S130: When a window interaction operation is received, call the window update function to operate on the first data object according to the window interaction operation, and generate a patch for describing the changed part of the first data object during the operation process.

[0038] Under the framework of the reactive state management tool, when a window interaction operation is received, call the window update function to operate on the first data object according to the window interaction operation, and generate a patch for describing the changed part of the first data object during the operation process.

[0039] Step S140: Send the patch from the main process to the rendering process and apply the patch to the second data object.

[0040] Since the first data structure used by the rendering process has been registered with the main process, after the main process generates a patch, it is automatically sent from the main process to the rendering process through process communication and the patch is applied to the second data object. After the patch is applied, the second data object continues to be consistent with the first data object. Because of the registered information, there is no need for manual confirmation of which data has been updated and which parts need to know about these updates. Whether it is the view or the logic, they can be automatically updated and executed according to the data changes, which brings a great improvement in development efficiency and maintainability. In addition, it can also be extended to support automatic state synchronization between multiple applications, effectively supporting the rapid iterative development of the business.

[0041] Step S150: Update the change information of applying the patch to the second data object to the current application window through the rendering process to complete the screen response to the window interaction operation.

[0042] The change response of applying the patch to the second data object is updated to the current application window through the rendering process to complete the screen response to the window interaction operation. The current application window is displayed based on the view layer framework, and this view layer framework can be one of Vue, React, and Angular. The application window displayed under the view layer framework has more adaptable underlying processing logic.

[0043] To further specifically describe the process of screen display in the embodiments of the present application, it is described in detail with mobx-state-tree and react as the specific implementation frameworks.

[0044] The underlying implementation process of defining the first data structure and the window update function required for the current application window in the main process through mobx-state-tree and completing the instantiation to obtain the first data object mainly includes defining the name and various attribute information of the first data structure, defining the window update function for performing specific update actions according to various attribute information, and creating an object based on the first data structure and the window update function to complete the instantiation to obtain the first data object.

[0045] The underlying implementation process of introducing the first data structure in the rendering process and instantiating to obtain the second data object is mainly to create another object based on the first data structure according to the name of the first data structure, that is, instantiating to obtain the second data object.

[0046] For the underlying implementation of sending the patch to the corresponding rendering process, when the first data object changes, the changed patch is sent to the rendering process through process communication. After the rendering process receives the patch, it applies the patch to the second data object so that the second data object obtains the specific attribute values in the corresponding data structure.

[0047] The rendering process updates the change information of applying the patch to the second data object to the current application window to complete the screen response to the window interaction operation. It is mainly a process in which the view component reads specific attribute values from the second data object and performs rendering operations according to the specific attribute values to complete the display on the page.

[0048] For the above screen display method, when the main process completes the first instantiation of the current application window to obtain the first data object, the first instantiation includes defining the first data structure and the window update function required for the current application window; the rendering process introduces the first data structure to complete the second instantiation to obtain the second data object with the same data processing logic as the first data object, and registers the first data structure used by the rendering process to the main process; when receiving the window interaction operation, it calls the window update function to operate on the first data object according to the window interaction operation, generating a patch for describing the changed part of the first data object during the operation process; sends the patch from the main process to the rendering process and applies the patch to the second data object; updates the change information of applying the patch to the second data object to the current application window through the rendering process to complete the screen response to the window interaction operation. By instantiating the main process and the rendering process based on the same data structure to obtain consistent data objects, during the window interaction operation, the data object of the main process generates a patch for describing the window transformation, and sends the patch to the rendering process for the data object of the rendering process to apply the patch to complete the window change, thus completing the screen response to the window interaction operation. During the entire processing process, the rendering process does not need to actively obtain the state changes of the main process. The transmission logic and path of the business change information are clear, the display of the application window and the operation of the application are stable, the maintenance idea is clear during the iteration process, and the application program can be effectively audited to discover potential security problems of the application in advance. Overall, it can effectively reduce the comprehensive cost in the use and maintenance process of desktop applications developed by the cross-process synchronization method.

[0049] Figure 2 It is a schematic structural diagram of a screen display device provided by an embodiment of the present application. As Figure 2 shown, the screen display device includes a first instantiation unit 210, a second instantiation unit 220, a function call unit 230, a patch sending unit 240, and a window update unit 250.

[0050] Among them, the first instantiation unit 210 is used to complete the first instantiation of the current application window in the main process to obtain a first data object. The first instantiation includes defining a first data structure and a window update function required for the current application window. The second instantiation unit 220 is used to complete the second instantiation in the rendering process by introducing the first data structure to obtain a second data object with the same data processing logic as the first data object, and register the first data structure used by the rendering process with the main process. The function call unit 230 is used to, when receiving a window interaction operation, call the window update function to operate on the first data object according to the window interaction operation, and generate a patch for describing the changed part of the first data object during the operation process. The patch sending unit 240 is used to send the patch from the main process to the rendering process and apply the patch to the second data object. The window update unit 250 is used to update the change information of applying the patch to the second data object to the current application window through the rendering process to complete the screen response to the window interaction operation.

[0051] Based on the above embodiments, the first instantiation unit 210 includes:

[0052] The first instantiation module is used to complete the first instantiation of the current application window in the main process through a reactive state management tool to obtain a first data object;

[0053] The second instantiation unit 220 includes:

[0054] The second instantiation module is used to complete the second instantiation in the rendering process by introducing the first data structure through a reactive state management tool to obtain a second data object with the same data processing logic as the first data object.

[0055] Based on the above embodiments, the window update unit 250 includes:

[0056] The change of applying the patch to the second data object is reactively updated to the current application window through the rendering process to complete the screen response to the window interaction operation.

[0057] Based on the above embodiments, the reactive state management tool includes mobx - state - tree.

[0058] Based on the above embodiments, the patch sending unit 240 includes:

[0059] The communication sending module is used to send the patch from the main process to the rendering process through process communication and apply the patch to the second data object.

[0060] Based on the above embodiments, the current application window is displayed based on a view layer framework.

[0061] Based on the above embodiments, the view layer framework is one of Vue, React, and Angular.

[0062] The screen display device provided by the embodiments of the present application is included in an electronic device and can be used to execute the corresponding screen display method provided in the above embodiments, and has corresponding functions and beneficial effects.

[0063] It should be noted that in the embodiments of the above screen display device, the various units and modules included are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be realized; in addition, the specific names of the functional units are only for the convenience of mutual distinction and do not limit the protection scope of the present invention.

[0064] Figure 3 It is a schematic structural diagram of an electronic device provided by the embodiments of the present application. As Figure 3 shown, the electronic device includes a processor 310 and a memory 320, and may further include an input device 330, an output device 340, and a communication device 350; the number of processors 310 in the electronic device may be one or more, Figure 3 and here one processor 310 is taken as an example; the processor 310, memory 320, input device 330, output device 340, and communication device 350 in the electronic device may be connected through a bus or other means, Figure 3 and here the connection through the bus is taken as an example.

[0065] The memory 320, as a computer-readable storage medium, can be used to store software programs, computer-executable programs, and modules, such as the program instructions / modules corresponding to the screen display method in the embodiments of the present application. The processor 310 executes various functional applications and data processing of the electronic device by running the software programs, instructions, and modules stored in the memory 320, that is, realizes the above screen display method.

[0066] The memory 320 may mainly include a program storage area and a data storage area. Among them, the program storage area may store an operating system and application programs required for at least one function; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 320 may include high-speed random access memory, and may further include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other non-volatile solid-state storage devices. In some instances, the memory 320 may further include a memory remotely set relative to the processor 310, and these remote memories may be connected to the electronic device through a network. Examples of the above network include but are not limited to the Internet, enterprise intranets, local area networks, mobile communication networks, and their combinations.

[0067] The input device 330 can be used to receive input digital or character information and generate key signal inputs related to the user settings and function controls of the electronic device. The output device 340 can include a display device such as a display screen.

[0068] The above-mentioned electronic device includes a screen display device, which can be used to execute any screen display method and has corresponding functions and beneficial effects.

[0069] An embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it is used to execute the relevant operations in the screen display method provided in any embodiment of the present application and has corresponding functions and beneficial effects.

[0070] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product.

[0071] Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk memories, CD-ROMs, optical memories, etc.) containing computer-usable program codes. The present application is described with reference to the flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or block in the flowchart and / or block diagram can be implemented by computer program instructions, and the combination of the processes and / or blocks in the flowchart and / or block diagram can also be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing devices generate a device for realizing the functions specified in Figure 1 one process or multiple processes and / or blocks Figure 1 one block or multiple blocks. These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory generate a manufactured article including an instruction device, and the instruction device realizes the functions specified in Figure 1 one process or multiple processes and / or blocks Figure 1 one block or multiple blocks. These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process. Therefore, the instructions executed on the computer or other programmable device provide for realizing the functions specified in Figure 1 one process or multiple processes and / or blocksFigure 1 A step that specifies a function in one or more boxes.

[0072] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory. Memory may include non-permanent storage in a computer-readable medium, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of a computer-readable medium.

[0073] Computer-readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. The information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory media such as modulated data signals and carrier waves.

[0074] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0075] Note that the above are only preferred embodiments of the present invention and the technical principles employed. Those skilled in the art will appreciate that the present invention is not limited to the specific embodiments herein, and that various obvious changes, readjustments, and substitutions are possible for those skilled in the art without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments and may include many other equivalent embodiments without departing from the scope of the present invention. The scope of the present invention is determined by the scope of the appended claims.

Claims

1. A screen display method, characterized in that, Including: In the main process, the first instantiation of the current application window is completed to obtain a first data object, and the first instantiation includes defining a first data structure and a window update function required for the current application window; In the rendering process, the first data structure is introduced to complete the second instantiation, obtaining a second data object with the same data processing logic as the first data object, and registering the first data structure used by the rendering process with the main process; When a window interaction operation is received, the window update function is called to operate on the first data object according to the window interaction operation, generating a patch for describing the changed part of the first data object during the operation; The patch is sent from the main process to the rendering process, and the patch is applied to the second data object; The rendering process updates the change information of the second data object applying the patch to the current application window to complete the screen response to the window interaction operation.

2. The screen display method according to claim 1, characterized in that The step of completing the first instantiation of the current application window in the main process to obtain a first data object includes: The first instantiation of the current application window is completed in the main process through a reactive state management tool to obtain a first data object; The step of introducing the first data structure in the rendering process to complete the second instantiation, obtaining a second data object with the same data processing logic as the first data object, includes: The second instantiation is completed in the rendering process by introducing the first data structure through a reactive state management tool, obtaining a second data object with the same data processing logic as the first data object.

3. The screen display method according to claim 2, wherein The step of updating the change information of the second data object applying the patch to the current application window through the rendering process to complete the screen response to the window interaction operation includes: The change of the second data object applying the patch is updated to the current application window in a reactive manner through the rendering process to complete the screen response to the window interaction operation.

4. The screen display method according to claim 2, wherein The reactive state management tool includes mobx-state-tree.

5. The screen display method according to any one of claims 1-4, characterized in that The step of sending the patch from the main process to the rendering process and applying the patch to the second data object includes: The patch is sent from the main process to the rendering process through process communication, and the patch is applied to the second data object.

6. The screen display method according to any one of claims 1-4, characterized in that, The current application window is displayed based on a view layer framework.

7. The screen display method according to claim 6, characterized in that, The view layer framework is one of Vue, React, and Angular.

8. A screen display device, characterized in that, Including: A first instantiation unit for completing the first instantiation of the current application window in the main process to obtain a first data object, where the first instantiation includes defining a first data structure and a window update function required for the current application window; A second instantiation unit for introducing the first data structure in the rendering process to complete the second instantiation, obtaining a second data object with the same data processing logic as the first data object, and registering the first data structure used by the rendering process with the main process; A function call unit, configured to, when receiving a window interaction operation, call the window update function to operate on the first data object according to the window interaction operation, and generate a patch for describing the changed part of the first data object during the operation; A patch sending unit, configured to send the patch from the main process to the rendering process and apply the patch to the second data object; A window update unit, configured to update, through the rendering process, the change information of applying the patch to the second data object to the current application window, so as to complete the screen response to the window interaction operation.

9. An electronic device, characterized in that, Comprising: One or more processors; A memory, configured to store one or more computer programs; When the one or more computer programs are executed by the one or more processors, the electronic device implements the screen display method according to any one of claims 1-7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the screen display method according to any one of claims 1-7.

Images