Information processing method and device, equipment and storage medium

Abstract

The invention provides an information processing method and device, electronic equipment and a storage medium, and the method comprises the steps: responding to an operation of adding a target component in a created target layout manager, displaying the target layout manager in a target interface, and displaying the target component by the target layout manager; in response to an editing operation on the target component, displaying a first text editing window for the target component in the target interface, and displaying a first component text input in the editing operation in the first text editing window; in response to a storage operation on the target layout manager, the content of the current target layout manager is stored in a target database, the target layout manager is stored as a target layout manager object, the target layout manager object comprises target component information of the target component, and the target component information of the target component is stored in the target database. The target component information comprises a first target component attribute storing the first component text. According to the embodiment of the invention, the complexity of component development can be reduced.

Description

Technical Field

[0001] The present application relates to the field of page development technology, and in particular to an information processing method, device, electronic device and storage medium. Background Art

[0002] In the related art, in the process of developing page components, the code block solution is basically used for component development. This development solution using code blocks is generally divided into two forms. One is to use HTML-like fragments, which can be stored in the component during development and can be dynamically rendered when used. However, this solution needs to pay attention to the interaction between the tags in the HTML file, which will increase the complexity of component development. The other is to develop through the mainstream framework. However, this method requires writing a compiler to generate HTML-like fragments and store them in the component, and the implementation complexity is also high. Summary of the invention

[0003] The main purpose of the embodiments of the present application is to provide an information processing method, device, electronic device and storage medium, aiming to reduce the complexity of component development.

[0004] To achieve the above object, a first aspect of an embodiment of the present application proposes an information processing method, comprising the following steps: In response to an operation of adding a target component to the created target layout manager, displaying the target layout manager in a target interface, wherein the target layout manager displays the target component; In response to an editing operation on the target component, displaying a first text editing window for the target component in the target interface, wherein the first component text input in the editing operation is displayed in the first text editing window; In response to a save operation on the target layout manager, the content of the current target layout manager is stored in a target database, wherein the target layout manager is saved as a target layout manager object, the target layout manager object includes target component information of the target component, and the target component information includes a first target component property storing the first component text.

[0005] In one embodiment, after storing the target layout manager, the method further includes: Acquire a target page file, wherein the target page file is loaded with the target layout manager object; Instantiate a target component instance according to the target component information in the target layout manager object, and render the target component instance into the target layout manager object; A target page is displayed according to the current target layout manager object, wherein the target page displays the target component and first component content rendered according to the first target component attribute.

[0006] In one embodiment, the target layout manager object includes context information of the target component; The instantiating a target component instance according to the target component information in the target layout manager object, and rendering the target component instance into the target layout manager object, comprises: Compiling the first component text to obtain a compiled component text; The target component instance is rendered into the target layout manager object according to the compiled component text and the context information.

[0007] In one embodiment, after the first text editing window displays the first component text, the method further includes: Component content is pre-rendered according to the first component text, the pre-rendered target rendering component is displayed on the target interface, and the pre-rendered first component content is displayed in the target rendering component.

[0008] In one embodiment, after storing the target layout manager in the target database, the method further comprises: In response to a text modification operation on the first component text, the first text editing window is displayed in the target interface, the first text editing window displays the second component text obtained after the modification, component content is pre-rendered according to the second component text, and the second component content is updated and displayed in the target rendering component; In response to the operation of closing the first text editing window, component content is pre-rendered according to the first component text, and a comparison component is displayed on one side of the target rendering component, wherein the comparison component displays the first component content.

[0009] In one embodiment, after displaying the comparison component, the method further includes: In response to a selection operation on the comparison component, displaying the first text editing window and a second text editing window of the comparison component on the target interface, the first text editing window displays the second component text, and the second text editing window displays the first component text; In response to a replacement operation on the first target component content, the first text editing window replaces and displays the first component text, and the second text editing window replaces and displays the second component text. The component content is pre-rendered according to the first component text and the second component text, respectively, and the first component content is updated and displayed in the target rendering component, and the second component content is updated and displayed in the comparison component.

[0010] In one embodiment, after closing the first text editing window, the method further includes: In response to performing a save operation on the target layout manager for the updated target component, storing the target layout manager of the updated target component into the target database, wherein the target component information includes a second target component attribute storing the second component text; Acquire the target component information including the second target component attribute; Instantiate a target component instance according to the target component information, and update and render the target component instance in the target layout manager object according to the second target component attribute; According to the current target layout manager object, the target component with the second target component content is placed in the target page.

[0011] To achieve the above-mentioned purpose, a second aspect of an embodiment of the present application provides an information processing device, including: A display unit, configured to display the target layout manager in a target interface in response to an operation of adding a target component to the created target layout manager, wherein the target layout manager displays the target component; The display unit is further configured to, in response to an editing operation on the target component, display a first text editing window for the target component in the target interface, wherein the first component text input in the editing operation is displayed in the first text editing window; A storage unit is used to store the target layout manager into a target database in response to a save operation on the target layout manager, wherein the target layout manager is saved as a target layout manager object, the target layout manager object includes target component information of the target component, and the target component information includes a first target component attribute storing the first component text.

[0012] To achieve the above objectives, a third aspect of an embodiment of the present application proposes an electronic device, which includes a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the method described in the first aspect is implemented.

[0013] To achieve the above-mentioned purpose, the fourth aspect of an embodiment of the present application proposes a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method described in the first aspect is implemented.

[0014] The present application proposes an information processing method, device, electronic device and storage medium. The method includes: in response to an operation of adding a target component in a created target layout manager, displaying the target layout manager in a target interface, wherein the target layout manager displays the target component; in response to an editing operation on the target component, displaying a first text editing window for the target component in the target interface, wherein the first component text entered in the editing operation is displayed in the first text editing window; in response to a save operation on the target layout manager, storing the current content of the target layout manager in a target database, wherein the target layout manager is saved as a target layout manager object, wherein the target layout manager object includes target component information of the target component, and the target component information includes a first target component attribute storing the first component text. By using the target interface to perform development operations on the target component, the display position of the target component in the target page can be visually set through the target layout manager, and the component content of the target component can be visually edited through the first text editing window, so that during the development process, attention to the interaction between the tags in the HTML file can be reduced, thereby reducing the complexity of component development; and, by storing the content of the current target layout manager, the first component text can be directly stored in the properties of the target component of the target layout manager without compilation, so that there is no need to write a compiler during the development process, which can further reduce the complexity of component development. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 is a flow chart of an information processing method provided by an embodiment of the present application; FIG. 2A to FIG. 2E This is an embodiment of the present application. Figure 1 Interface diagram of ; Figure 3 This is a schematic diagram of an interface for editing a target component provided by an embodiment of the present application; FIG. 4A to FIG. 4C is a schematic diagram of an interface for editing a target component provided by another embodiment of the present application; FIG. 5A to FIG. 5B This is a schematic diagram of an interface for replacing component texts provided by an embodiment of the present application; Figure 6A schematic diagram of the structure of an information processing device provided in an embodiment of the present application; Figure 7 It is a schematic diagram of the hardware structure of the electronic device provided in the embodiment of the present application. DETAILED DESCRIPTION

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

[0017] It should be noted that, although the functional modules are divided in the device schematic diagram and the logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first", "second", etc. in the specification, claims and the above drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence.

[0018] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0019] In the related art, in the process of developing page components, the code block solution is basically used for component development. This development solution using code blocks is generally divided into two forms. One is to use HTML-like fragments, which can be stored in the component during development and can be dynamically rendered when used. However, this solution needs to pay attention to the interaction between the tags in the HTML file, which will increase the complexity of component development. The other is to develop through the mainstream framework. However, this method requires writing a compiler to generate HTML-like fragments and store them in the component, and the implementation complexity is also high.

[0020] In order to reduce the complexity of component development, an embodiment of the present application provides an information processing method, an information processing device, an electronic device and a computer-readable storage medium, the method comprising: in response to an operation of adding a target component in a created target layout manager, displaying a target layout manager in a target interface, the target layout manager displays the target component; in response to an editing operation on the target component, displaying a first text editing window for the target component in the target interface, the first component text entered in the editing operation is displayed in the first text editing window; in response to a save operation on the target layout manager, storing the content of the current target layout manager in a target database, wherein the target layout manager is saved as a target layout manager object, the target layout manager object includes target component information of the target component, and the target component information includes a first target component attribute storing the first component text. By using the target interface to perform development operations on the target component, the display position of the target component in the target page can be visually set through the target layout manager, and the component content of the target component can be visually edited through the first text editing window, so that during the development process, attention to the interaction between the tags in the HTML file can be reduced, thereby reducing the complexity of component development; and, by storing the content of the current target layout manager, the first component text can be directly stored in the properties of the target component of the target layout manager without compilation, so that there is no need to write a compiler during the development process, which can further reduce the complexity of component development.

[0021] An information processing method, device, electronic device and storage medium provided in the embodiments of the present application are specifically described through the following embodiments. First, the information processing method in the embodiments of the present application is described.

[0022] The information processing method provided in the embodiments of the present application can be applied to a terminal or a server, and can also be software running in a terminal or a server. In some embodiments, the terminal can be a smart phone, a tablet computer, a laptop computer, a desktop computer, etc.; in some embodiments, the server can be configured as an independent physical server, or a server cluster or a distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application that implements the information processing method, etc., but is not limited to the above forms.

[0023] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0024] See also Figure 1 , Figure 1 The flow of an information processing method provided by an embodiment of the present application is shown. In the embodiment of the present application, the information processing may include the following steps 110 to 130.

[0025] Step 110: In response to the operation of adding a target component to the created target layout manager, the target layout manager is displayed in the target interface, and the target layout manager displays the target component; Step 120: In response to an editing operation on the target component, a first text editing window for the target component is displayed in the target interface, and the first component text input in the editing operation is displayed in the first text editing window; Step 130: In response to a save operation on the target layout manager, the target layout manager is stored in a target database, wherein the target layout manager is saved as a target layout manager object, the target layout manager object includes target component information of the target component, and the target component information includes a first target component property storing a first component text.

[0026] In one embodiment, the operation of adding a target component in the layout manager refers to opening a target interface, adding a target layout manager in the target interface, and then adding the target component in the target layout manager. The target interface refers to a design interface for designing a target page. In addition, the target layout manager refers to a manager tool for managing components in a target page, wherein the appearance of the target layout manager may be the same as the appearance of the target page, and the size of the target layout manager may be the same as the size of the target interface (that is, the target layout manager covers the target interface), or may be smaller than the size of the target interface, which is not specifically limited here. In addition, the target component displayed in the target layout manager refers to visual information in the target layout manager that includes a component framework that can be used to render as a page component, which will not be rendered in the form of an actual page component before being displayed by the target page, wherein the number of target components displayed in the target layout manager may be one or more, which is not specifically limited here.

[0027] For the convenience of describing the embodiments, the following description is given by taking the creation of a target component as an example. The embodiments of multiple target components can refer to the embodiments below and will not be described in detail.

[0028] In one embodiment, the target layout manager displays the target component, which means that the target component is displayed in a specific position of the target layout manager to map the target page to display the target component. The display position of the target component in the target layout manager can be determined by the operation when adding the target component (for example, dragging the target component into the position of the target layout manager), or by the self-adjustment of the target layout manager (for example, adjusting the target component to the target position by alignment, or inferring the placement position of the target component by calculating the historical page design information), etc., which are not specifically limited here.

[0029] In one embodiment, the editing operation of the target component refers to selecting the target component, triggering the display of the first text editing window in the target interface, and then editing the first component text in the first text editing window. The first component text refers to the text of the target component that can be compiled and rendered to display the first component content. The format of the first component text can be determined according to the framework language (such as React, Vue, etc.) used by the target page, which is not specifically limited here.

[0030] In one embodiment, the first text editing window may be displayed in any adjacent area of ​​multiple adjacent areas of the target component, or may be displayed by overlaying a portion of the first text editing window, etc., which is not specifically limited here.

[0031] In one embodiment, during the save operation of the target layout manager, specifically in response to closing the first text editing window, the first component text can be saved to the first target component attribute of the target component, and in response to closing the target layout manager, target component information of the target component is generated, the target component information includes the first target component attribute, and the attribute information of the target layout manager and the target component information are sent to the target database for storage, so that the target database generates a target layout manager object according to the attribute information of the target layout manager, and stores the target component information in the target layout manager object.

[0032] In one embodiment, during the save operation of the target layout manager, specifically, in response to saving the first component text to the first target component attribute, then saving the first target component attribute to the target component information; in response to closing the target layout manager, generating the target component information of the target component and generating the target layout manager object of the target layout manager, the target component information includes the first target component attribute, loading the target component information into the target layout manager object, and then sending the target layout manager object to the target database so that the target database stores the target layout manager object.

[0033] In one embodiment, saving the first component text to the first target component attribute can be achieved by closing the first text editing window. The operation of closing the first text editing window can be achieved by triggering a control (for example, a close control for closing the first text editing window is displayed in the first text editing window), or by clicking other locations outside the first text editing window to close it, etc., which is not specifically limited here.

[0034] In one embodiment, the first text editing window may display a save control, and saving the first component text to the first target component attribute may be achieved by triggering the save control.

[0035] In one embodiment, the save operation on the target layout manager can be implemented by closing the target layout manager, wherein the operation of closing the target layout manager can be implemented by triggering a control (for example, a close control for closing the target layout manager is displayed in the target layout manager), or by clicking other locations outside the target layout manager to close it, etc., which is not specifically limited here.

[0036] In one embodiment, the target layout manager may display a save control, and the save operation on the target layout manager may be implemented by triggering the save control.

[0037] In one embodiment, storing the contents of the current target layout manager into the target database refers to directly storing all contents of the target layout manager including the target component together with the target layout manager into the target database without any conversion processing such as compilation.

[0038] In one embodiment, the target component added in step 110 does not include component text. After the operation of adding the target component is performed, if the target layout manager is directly saved, the target page displayed according to the target layout manager object can display the target component that does not include the component content rendered according to the component text (that is, the same appearance as the target component currently displayed in the target layout manager).

[0039] The following describes steps 110 to 130 using a specific example.

[0040] See also Figure 2A When the target interface 201 is opened, the target interface 201 displays a component toolbar 202, a layout manager creation control 203, and a selection cursor 204 for interaction. The component toolbar 202 displays a plurality of components 205. Figure 2B , the layout manager creation control 203 is clicked by selecting the cursor 204 to create a target layout manager 206. At this time, the target interface 201 displays the created target layout manager 206, and the target layout manager 206 displays a first close control 207. Figure 2C , a component (ie, target component 208) in component toolbar 202 is dragged to target layout manager 206 by selecting cursor 204. In response to the operation of adding target component 208 to target layout manager 206, target layout manager 206 displays the added target component 208. Figure 2D , by selecting the cursor 204 and clicking the target component 208, a first text editing window 209 for the target component 208 is opened, and the first text editing window 209 displays a second close control 210. In response to the editing operation on the target component 208, the first text editing window 209 for the target component 208 is continuously displayed in the target interface 201, and the first component text 211 input in the editing operation is displayed in the first text editing window 209. By selecting the cursor 204 and clicking the second close control 210 to close the first text editing window 209, the first component text 211 can be saved to the first target component property of the target component 208. See Figure 2E, by selecting the cursor 204 and clicking the first close control 207 to close the target layout manager 206 to save the target layout manager 206, in response to the save operation on the target layout manager 206, a target layout manager object is generated for the target layout manager 206, target component information is generated for the target component 208, the target component information is loaded into the target layout manager object, and then the target layout manager object is sent from the terminal 212 to the target database 213 for storage.

[0041] In one embodiment, after step 130, the information processing method may further include the following steps.

[0042] Step 310: Obtain a target page file, wherein the target page file is loaded with a target layout manager object; Step 320: instantiate a target component instance according to the target component information in the target layout manager object, and render the target component instance into the target layout manager object; Step 330: Display the target page according to the current target layout manager object, wherein the target page displays the target component and the first component content rendered according to the first target component attribute.

[0043] In one embodiment, the target page file refers to a page file capable of rendering and displaying the target page on a terminal, wherein the target page file may include a target layout manager object, or may include a layout manager object other than the target layout manager object.

[0044] In one embodiment, in the process of obtaining the target page file, the terminal can specifically send a request for the target page to the server. The server retrieves multiple layout manager objects including the target layout manager object from the target database according to the request, and then generates a target page file according to these layout manager objects and returns it to the terminal. The terminal obtains the target page file by receiving it.

[0045] It should be noted that, in order to facilitate the description of the following embodiments, the following embodiments all take the case where the target page file includes only one target layout manager object, the target layout manager object includes only one target component information (that is, the target page displays only one target component), and the target component information includes only the first target component attribute as an example. The embodiment where the target page file includes multiple layout manager objects and the layout manager object includes multiple component information can be referred to the following embodiments and will not be described in detail here.

[0046] In one embodiment, instantiating a target component instance according to target component information in a target layout manager object, and rendering the target component instance into the target layout manager object refers to generating a target component instance according to the target component information, and then setting component properties for the target component instance according to a first target component property storing a first component text, so that the target component has the first target component property and can display the first component content, and then adding the target component having the first target component property to the target layout manager object.

[0047] In one embodiment, in the process of displaying the target page according to the current target layout manager object, the current target layout manager object may be parsed first to obtain the page structure of the target page, and the page may be rendered according to the page structure to obtain the target page, and then the target page may be displayed. In the process of page rendering, the page component style may be rendered according to the first target component attribute to obtain the first component content corresponding to the first component text, and in the process of displaying the target page, the first component content may be displayed in the target component.

[0048] Since the target layout manager object is directly saved to the target database when it is saved, after the target page file is obtained, the target page file can be dynamically compiled and displayed. This can reduce the need to write a targeted compiler, thereby reducing the complexity of the page project and effectively reducing the page display cost.

[0049] In one embodiment, the target layout manager object may include context information of the target component. The process of instantiating the target component instance according to the target component information in the target layout manager object and rendering the target component instance into the target layout manager object may specifically include the following steps.

[0050] Step 410: compile the first component text to obtain a compiled component text; Step 420: Render the target component instance into the target layout manager object according to the compiled component text and context information.

[0051] In one embodiment, context information refers to information in the layout manager object that indicates how components operate, such as which specific instantiated components are obtained, how components interact with each other, etc., which is not specifically limited here.

[0052] In one embodiment, compiling the first component text to obtain the compiled component text refers to the operation of compiling the first component text into the compiled component text by a compiler in the page framework used by the target page. The compiler in the page framework can be the vue-sfc-loader component of the Vue framework, the Babel component of the React framework, etc., which are not specifically limited here.

[0053] In one embodiment, in the process of rendering the target component instance into the target layout manager object according to the compiled component text and context information, the target component instance can be first instantiated according to the compiled component text to obtain the target component instance, then the target layout manager object can be configured and set according to the context information of the target component, and then the target component instance can be rendered into the target layout manager object.

[0054] In one embodiment, after step 120, the information processing method may further include the following steps.

[0055] Step 510: pre-render the component content according to the first component text, display the pre-rendered target rendering component on the target interface, and display the pre-rendered first component content in the target rendering component.

[0056] In one embodiment, the target rendering component refers to a page component formed by the target component in a pre-rendering manner, wherein the target rendering component has the same appearance and function as the target component.

[0057] In one embodiment, pre-rendering of component content according to the first component text refers to the operation of rendering a target rendering component with the first component content according to the first component text in the target interface. Among them, the component content pre-rendering can be compiled by a page frame compiler corresponding to the specific framework language used, and static page content is generated according to the compiled content. It should be noted that pre-rendering is a method of rendering component text according to real-time input or modification, and the actual content displayed by pre-rendering is the part of the current component text that can be successfully compiled by the page frame compiler.

[0058] In one embodiment, during the component content prerendering operation of the first component text, the target layout manager object can be prerendered as a whole, and the prerendered target page is displayed. The target rendering component is displayed in the prerendered target page, and the target rendering component displays the prerendered first component content.

[0059] In one embodiment, during the component content prerendering operation of the first component text, specifically, a prerendering display window can be first displayed in the target interface at a location outside the target layout manager, and then, the target component is prerendered for the first component text, and the target rendering component is displayed in the prerendering display window, and the prerendered first component content is displayed in the target rendering component.

[0060] The following describes step 510 using a specific example.

[0061] See also Figure 3 In response to the editing operation on the target component, a first text editing window 209 for the target component 208 is displayed in the target interface 201, and the first component text 211 input in the editing operation is displayed in the first text editing window 209. In response to the operation of inputting the first component text 211, a pre-rendering display window 214 is displayed in the target interface, outside the target layout manager, and a target rendering component 215 is displayed in the pre-rendered target page, and the target rendering component 215 displays the pre-rendered first component content 216.

[0062] By pre-rendering the component content according to the first component text, the target rendering component displaying the first component content can be pre-rendered in the target interface. In this way, the target component can be mapped and displayed on the target page through pre-rendering, so as to reflect the design status of the target component in real time, which is beneficial for developers to view the effect of the target component in real time, thereby improving the development experience and reducing the difficulty of development.

[0063] In one embodiment, after step 130, the information processing method can also respond to the text modification operation on the first component text, display a first text editing window in the target interface, the first text editing window displays the modified second component text, then, pre-render the component content according to the second component text, display the target rendering component in the target interface, and update and display the second component content in the target rendering component.

[0064] In one embodiment, during the text modification operation on the first component text, the target component may be selected first, a first text editing window may be displayed in response on the target interface, and then the first component text may be modified.

[0065] In one embodiment, pre-rendering the component content according to the second component text refers to rendering a target rendering component with the second component content according to the second component text in the target interface. The component content pre-rendering can be compiled by a page framework compiler corresponding to the specific framework language used, and static page content is generated according to the compiled content.

[0066] In one embodiment, after step 130, the information processing method may further include the following steps.

[0067] Step 610: In response to the text modification operation on the first component text, a first text editing window is displayed in the target interface, the first text editing window displays the second component text obtained after the modification, component content is pre-rendered according to the second component text, and the second component content is updated and displayed in the target rendering component; Step 620: In response to the operation of closing the first text editing window, pre-rendering the component content according to the first component text, displaying a comparison component on one side of the target rendering component, and the comparison component displays the first component content.

[0068] In one embodiment, the comparison component refers to a component obtained by rendering the first component text in the same component content pre-rendering manner as the component content pre-rendering manner of the second component text. The comparison component has the same component framework as the target component. In addition, the component information of the comparison component is not stored as part of the target layout manager object, that is, the target page will not be rendered and displayed with the comparison component.

[0069] In one embodiment, a side of a target rendering component refers to any one of a plurality of adjacent side areas around the target rendering component that has the capability of fully displaying a contrast component, wherein the capability of fully displaying a contrast component refers to the capability of a certain side of the target rendering component to fully display a contrast component without affecting the display of other components in the adjacent side area or being affected by the boundary limitations of the target interface.

[0070] In one embodiment, in the process of displaying the comparison component on one side of the target rendering component, the size of the adjacent area of ​​the target rendering component can be analyzed first according to the size of the comparison component to determine the candidate adjacent area that can accommodate the comparison component, and then the target adjacent area for displaying the comparison component is determined according to the determined candidate adjacent area, and then the comparison component is displayed in the target adjacent area. Wherein, when there are multiple determined candidate adjacent areas, the target adjacent area can be randomly selected for determination, or can be determined according to a preset selection rule (for example, the adjacent area has a priority, and selection is performed according to the priority, etc.), etc., which are not specifically limited here; when there is only one determined candidate adjacent area, the only candidate adjacent area is determined as the target adjacent area.

[0071] The following describes steps 610 to 620 using a specific example.

[0072] See also Figure 4A , Figure 4AA target interface 201 is shown, the target interface 201 displays a target layout manager 206 and a pre-rendering display window 214, the pre-rendering display window 214 displays a target rendering component 215, the target layout manager 206 displays a target component 208, the target rendering component 215 displays a first component content 216, the target component 208 is clicked by selecting the cursor 204, a first text editing window 209 is displayed on the target interface 201, and a first component text 211 is displayed in the first text editing window 209. Figure 4B In response to the text modification operation on the first component text 211, the second component text 217 is pre-rendered in real time, and the pre-rendered second component content 218 is updated and displayed in the target rendering component 215. Figure 4C In response to the operation of closing the first text editing window 209 , pre-rendering is performed according to the first component text 211 , and a comparison component 219 is displayed on one side of the target rendering component 215 , and the comparison component 219 displays the first component content 216 corresponding to the first component text 211 .

[0073] By displaying a comparison component rendered and displayed according to the previous first text content on one side of the target rendering component during the pre-rendering of the target component, the target rendering component and the comparison file can form a comparison display result in the target interface, which is beneficial for developers to compare two different component texts to form a component, which is beneficial to improving the development experience and reducing the development difficulty. In addition, since the text can be modified through the first text editing window, the code block of the target component can be reused and modified more easily, which can further reduce the complexity of component development.

[0074] In one embodiment, after step 620, the information processing method may further include the following steps.

[0075] Step 710: In response to the selection operation of the comparison component, a first text editing window and a second text editing window of the comparison component are displayed on the target interface, the first text editing window displays the second component text, and the second text editing window displays the first component text; Step 720: In response to the replacement operation for the first target component content, the first text editing window replaces the display of the first component text, the second text editing window replaces the display of the second component text, the component content is pre-rendered according to the first component text and the second component text, respectively, the first component content is updated and displayed in the target rendering component, and the second component content is updated and displayed in the comparison component.

[0076] In one embodiment, the second text editing window refers to a text editing window for displaying the first component text. The appearance of the second text editing window may be the same as or different from the appearance of the first text editing window, which is not specifically limited here. It should be noted that the second text editing window can only display the component text, and the displayed component text cannot be edited in any way.

[0077] In one embodiment, the replacement operation for the first target component content refers to an operation of replacing the second component text in the target component with the first component text, so as to replace the second component content currently displayed by the target component with the first component content corresponding to the original first component text. Among them, the replacement operation can be implemented by setting a replacement control in the first text editing window. It should be noted that the replacement operation for the first target component content is not the same as the undo operation. When the undo operation is performed on the first target component content, the first text editing window replaces the display of the first component text, and the comparison component is not displayed in the target interface.

[0078] The following describes steps 710 to 720 using a specific example.

[0079] See also Figure 5A , Figure 5A A target interface 201 is shown. The target interface 201 displays a target layout manager 206 and a pre-rendering display window 214, a target rendering component 215 and a comparison component 219. The target rendering component 215 displays the second component content 218, and the comparison component 219 displays the first component content 216. The target layout manager 206 displays the target component 208. By selecting the cursor 204 and clicking the comparison component 219, the target interface 201 displays a first text editing window 209 and a second text editing window 220. The first text editing window 209 displays the second component text 217 and a replacement control 221, and the second text editing window 220 displays the first component text 211. Figure 5B , by selecting the cursor 204 and clicking the replacement control 221, in response to the replacement operation on the first component content 216, the component contents are pre-rendered according to the first component text 211 and the second component text 217 respectively, the first component text 211 is replaced and displayed in the first text editing window 209, the second component text 217 is replaced and displayed in the second text editing window 220, the first component content 216 is updated and displayed in the target rendering component 215, and the second component content 218 is updated and displayed in the comparison component 219.

[0080] Component text is replaced through the replace operation. In this way, when the developer needs to roll back the previous component text, the second component text can be quickly restored to the first component text, so that the developer does not need to re-enter the first component text in the first text editing window, thereby improving the development efficiency of the target component and the development experience of the developer, which is conducive to reducing development costs and development difficulties.

[0081] In one embodiment, after step 620, the information processing method may further include the following steps.

[0082] Step 810: In response to performing a save operation on the target layout manager for the updated target component, storing the target layout manager of the updated target component into the target database, wherein the target component information includes a second target component attribute storing the second component text; Step 820: Acquire target component information including attributes of the second target component; Step 830: instantiate a target component instance according to the target component information, and update and render the target component instance in the target layout manager object according to the second target component attribute; Step 840: According to the current target layout manager object, a target component with the second target component content is placed in the target page.

[0083] In one embodiment, during the process of performing a save operation on the target layout manager for the updated target component, specifically in response to closing the first text editing window, the second target component attribute overwrites the first target component attribute and is saved to the target component information. Then, in response to closing the target layout manager, a target layout manager object is generated, the target component information of the target component is loaded into the target layout manager object, and then, the target layout manager object carrying the second target component attribute is sent to the target database, so that the target database stores the target layout manager object carrying the second target component attribute.

[0084] In one embodiment, the target component information including the second target component attribute may be obtained by refreshing the target page, or may be obtained by server push, which is not specifically limited here.

[0085] In one embodiment, instantiating a target component instance according to target component information, and updating and rendering the target component instance in a target layout manager object according to a second target component attribute refers to generating a target component instance according to the target component information including the second target component attribute, then setting the component attribute of the target component instance according to the second component text so that the target component has the second target component attribute, and then adding the target component having the second target component attribute to the target layout manager object.

[0086] In one embodiment, in the process of displaying the target component with the second target component content in the target page according to the current target layout manager object, the current target layout manager object can be re-parsed to obtain an updated page structure, and the page rendering is performed according to the updated page structure to obtain an updated target page, and then the updated target page is displayed. Wherein, when performing page rendering, it includes rendering according to the second target component attribute to obtain the second component content corresponding to the second component text, and in the process of displaying the target page, the second component content can be displayed in the target component.

[0087] Since the target layout manager object is directly saved to the target database when saving the updated target layout manager object, after obtaining the target component information including the second target component attribute, the target page file can be dynamically recompiled and displayed. In this way, even after the component text is changed, the need to write a targeted compiler can be reduced, thereby reducing the complexity of the page project and effectively reducing the page display cost.

[0088] See also Figure 6 The embodiment of the present application further provides an information processing device, which can implement the information processing method of the first aspect above. The information processing device 600 includes: The display unit 601 may be used to display the target layout manager in the target interface in response to an operation of adding a target component in the created target layout manager, and the target layout manager displays the target component; The display unit 601 may also be used to display a first text editing window for the target component in the target interface in response to an editing operation on the target component, and display the first component text input in the editing operation in the first text editing window; The storage unit 602 can be used to store the target layout manager in the target database in response to a save operation on the target layout manager, wherein the target layout manager is saved as a target layout manager object, the target layout manager object includes target component information of the target component, and the target component information includes a first target component property storing a first component text.

[0089] The specific implementation of the information processing device is basically the same as the specific implementation of the above-mentioned information processing method, and will not be repeated here.

[0090] The embodiment of the present application also provides an electronic device, the electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the above information processing method when executing the computer program. The electronic device can be any intelligent terminal including a tablet computer, a car computer, etc.

[0091] See also Figure 7 , Figure 7 The hardware structure of an electronic device of another embodiment is illustrated. The electronic device 700 includes: The processor 701 may be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present application; The memory 702 can be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 702 can store an operating system and other application programs. When the technical solution provided in the embodiment of this specification is implemented by software or firmware, the relevant program code is stored in the memory 702, and the processor 701 calls and executes the information processing method of the embodiment of this application; Input / output interface 703, used to implement information input and output; Communication interface 704, used to realize communication interaction between the device and other devices, which can be realized through wired mode (such as USB, network cable, etc.) or wireless mode (such as mobile network, WIFI, Bluetooth, etc.); A bus 705 that transmits information between various components of the device (e.g., the processor 701, the memory 702, the input / output interface 703, and the communication interface 704); The processor 701 , the memory 702 , the input / output interface 703 and the communication interface 704 are connected to each other in communication within the device via a bus 705 .

[0092] An embodiment of the present application further provides a computer-readable storage medium, which stores a computer program, and the computer program implements the above-mentioned information processing method when executed by a processor.

[0093] The memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs and non-transitory computer executable programs. In addition, the memory may include a high-speed random access memory, and may also include a non-transitory memory, such as at least one disk storage device, a flash memory device, or other non-transitory solid-state storage device. In some embodiments, the memory may include a memory remotely disposed relative to the processor, and these remote memories may be connected to the processor 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.

[0094] The embodiments described in the embodiments of the present application are intended to more clearly illustrate the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided in the embodiments of the present application. Those skilled in the art will appreciate that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0095] Those skilled in the art will appreciate that the technical solutions shown in the figures do not constitute a limitation on the embodiments of the present application, and may include more or fewer steps than shown in the figures, or a combination of certain steps, or different steps.

[0096] The device embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separated, that is, they may be located in one place or distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0097] Those skilled in the art will appreciate that all or some of the steps in the methods disclosed above, and the functional modules / units in the systems and devices may be implemented as software, firmware, hardware, or a suitable combination thereof.

[0098] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0099] It should be understood that in the present application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the objects associated before and after are in an "or" relationship. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

[0100] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the above units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0101] The units described above as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0102] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0103] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including multiple instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of various embodiments of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (Read-Only Memory, referred to as ROM), random access memory (Random Access Memory, referred to as RAM), disk or optical disk and other media that can store programs.

[0104] The preferred embodiments of the present invention are described above with reference to the accompanying drawings, but the scope of the rights of the present invention is not limited thereto. Any modification, equivalent substitution and improvement made by a person skilled in the art without departing from the scope and essence of the present invention should be within the scope of the rights of the present invention.

Claims

1. An information processing method, characterized in that: The following steps are involved: In response to an operation of adding a target component to the created target layout manager, displaying the target layout manager in a target interface, wherein the target layout manager displays the target component; In response to an editing operation on the target component, displaying a first text editing window for the target component in the target interface, wherein the first component text input in the editing operation is displayed in the first text editing window; In response to a save operation on the target layout manager, the content of the current target layout manager is stored in a target database, wherein the target layout manager is saved as a target layout manager object, the target layout manager object includes target component information of the target component, and the target component information includes a first target component property storing the first component text.

2. The method according to claim 1, characterized in that After storing the target layout manager, the method further includes: Acquire a target page file, wherein the target page file is loaded with the target layout manager object; Instantiate a target component instance according to the target component information in the target layout manager object, and render the target component instance into the target layout manager object; A target page is displayed according to the current target layout manager object, wherein the target page displays the target component and first component content rendered according to the first target component attribute.

3. The method according to claim 2, characterized in that The target layout manager object includes context information of the target component; The instantiating a target component instance according to the target component information in the target layout manager object, and rendering the target component instance into the target layout manager object, comprises: Compiling the first component text to obtain a compiled component text; The target component instance is rendered into the target layout manager object according to the compiled component text and the context information.

4. The method according to claim 2, characterized in that: After the first text editing window displays the first component text, the method further includes: Component content is pre-rendered according to the first component text, the pre-rendered target rendering component is displayed on the target interface, and the pre-rendered first component content is displayed in the target rendering component.

5. The method according to claim 4, characterized in that After storing the target layout manager in the target database, the method further includes: In response to a text modification operation on the first component text, the first text editing window is displayed in the target interface, the first text editing window displays the second component text obtained after the modification, component content is pre-rendered according to the second component text, and the second component content is updated and displayed in the target rendering component; In response to the operation of closing the first text editing window, component content is pre-rendered according to the first component text, and a comparison component is displayed on one side of the target rendering component, wherein the comparison component displays the first component content.

6. The method according to claim 5, characterized in that After displaying the comparison component, the method further includes: In response to a selection operation on the comparison component, displaying the first text editing window and a second text editing window of the comparison component on the target interface, the first text editing window displays the second component text, and the second text editing window displays the first component text; In response to a replacement operation on the first target component content, the first text editing window replaces and displays the first component text, and the second text editing window replaces and displays the second component text. The component content is pre-rendered according to the first component text and the second component text, respectively, and the first component content is updated and displayed in the target rendering component, and the second component content is updated and displayed in the comparison component.

7. The method according to claim 5, characterized in that After closing the first text editing window, the method further includes: In response to performing a save operation on the target layout manager for the updated target component, storing the target layout manager of the updated target component into the target database, wherein the target component information includes a second target component attribute storing the second component text; Acquire the target component information including the second target component attribute; Instantiate a target component instance according to the target component information, and update and render the target component instance in the target layout manager object according to the second target component attribute; According to the current target layout manager object, the target component with the second target component content is placed in the target page.

8. An information processing device, characterized in that: include: A display unit, configured to display the target layout manager in a target interface in response to an operation of adding a target component to the created target layout manager, wherein the target layout manager displays the target component; The display unit is further configured to, in response to an editing operation on the target component, display a first text editing window for the target component in the target interface, wherein the first component text input in the editing operation is displayed in the first text editing window; A storage unit is used to store the target layout manager into a target database in response to a save operation on the target layout manager, wherein the target layout manager is saved as a target layout manager object, the target layout manager object includes target component information of the target component, and the target component information includes a first target component attribute storing the first component text.

9. An electronic device, characterized in that: The electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the information processing method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the information processing method according to any one of claims 1 to 7 is implemented.

Images