CN115454412A - Page generation method and device, electronic equipment and storage medium - Google Patents

Abstract

The invention discloses a page generation method, a page generation device, electronic equipment and a storage medium, and relates to the technical field of computers, wherein the method comprises the following steps: acquiring an operation window, wherein the operation window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates; acquiring a target configuration template from a parent window, and displaying an initial page of the target configuration template in a child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited; performing variable configuration on each item to be edited in a parent window respectively to obtain a shared variable set; and loading the target configuration template and the sharing variable set in the renderer to generate a target page. When different technical frameworks are used for loading the parent window and the child window, the parent window and the child window can be communicated based on the shared variable set, and the purpose of cross-window operation is achieved. The development cost is reduced, and the development difficulty is reduced.

Description

Page generation method and device, electronic equipment and storage medium

Technical Field

The embodiment of the invention relates to the technical field of computers, in particular to a page generation method and device, electronic equipment and a storage medium.

Background

When a business system is built for an enterprise or a government entity, a fifth generation standard (Html 5, abbreviated as H5) component library of hypertext markup language is generally used to implement User Interface design (User Interface, abbreviated as UI). The H5 component library is a CUI (self-naming) component library developed based on a multi-terminal development architecture (Taro) framework, a page formed by using the component library is inconvenient to modify, and when a new service exists, a new page is expected to be generated in a visual dragging mode through an editor, so that the operation of a developer is facilitated.

However, since the Taro framework is implemented for H5 scenes, this framework currently has no visual editor available; it is known that editors are typically developed using the React framework, a JavaScript (JS) development framework used to build user interfaces. However, when the read frame is used for development, due to the limitation of the frame, the code of the CUI component library developed based on the Taro frame cannot be directly referred to in the code of the editor based on the read frame. Generally, a set of read H5 component libraries needs to be rewritten by a read frame according to the style of the CUI component library.

The above scheme is only for using in the canvas module of the editor (for previewing the effect), and after the final page is generated, the actually used component library or the CUI component library is replaced, so that the input-output ratio is low; and rewriting a set of read H5 component library requires increased investment of manpower and material resources and increased related maintenance cost.

Disclosure of Invention

The embodiment of the invention provides a page generation method, a page generation device, electronic equipment and a storage medium, which can improve the existing page generation scheme.

In a first aspect, an embodiment of the present invention provides a page generation method, including:

acquiring an operation window, wherein the operation window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates; acquiring a target configuration template from the parent window, and displaying an initial page of the target configuration template in the child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited; performing variable configuration on each item to be edited in the parent window respectively to obtain a shared variable set; and loading the target configuration template and the sharing variable set in a renderer to generate a target page.

Optionally, the parent window comprises a first region; the first area is used for storing a plurality of the configuration templates; the acquiring a target configuration template from the parent window and displaying an initial page of the target configuration template in the child window comprises:

receiving a click operation on the target configuration template in the first area to obtain a ghost element corresponding to the target configuration template; receiving a dragging operation on the ghost element, and moving the ghost element to the target position of the child window; and inserting the target configuration template into the target position, and displaying an initial page of the target configuration template in the child window.

Optionally, the parent window further includes a second area, where the second area is used to perform variable configuration on the configuration template; the variable configuration is respectively carried out on each item to be edited in the parent window to obtain a shared variable set, and the method comprises the following steps:

after the basic attribute information corresponding to the items to be edited is configured in the second area in sequence, acquiring a plurality of variable information, wherein one item to be edited corresponds to one variable information; and obtaining the sharing variable set according to a plurality of variable information.

Optionally, the variable information is obtained by:

determining a target item to be edited from the sub-window, and displaying basic variable information of the target item to be edited in the second area; and performing variable configuration on the basic variable information in the second area to obtain the variable information.

Optionally, each item to be edited corresponds to an initial sub-page; after the performing variable configuration on the basic variable information in the second area to obtain the variable information, the method further includes:

and rendering the initial sub-page of the target item to be edited according to the variable information to obtain a target sub-page of the target item to be edited.

Optionally, the loading the target configuration template and the shared variable set in a renderer to generate a target page includes:

sequentially loading variable information corresponding to each item to be edited in the target configuration template; loading bottom variable information when the current item to be edited has no corresponding variable information; and rendering in the renderer to generate the target page after all the variable information corresponding to each item to be edited is loaded.

Optionally, the obtaining an operation window includes:

generating the parent window based on a first preset frame; generating the child window based on a second preset frame under the same-domain window of the parent window; and displaying the parent window and the child window in the operation window.

In a second aspect, an embodiment of the present invention provides a page generating apparatus, where the apparatus includes:

the operating window acquiring module is used for acquiring an operating window, wherein the operating window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates;

the initial page display module is used for acquiring a target configuration template from the parent window and displaying an initial page of the target configuration template in the child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited;

a shared variable obtaining module, configured to perform variable configuration on each item to be edited in the parent window, respectively, to obtain a shared variable set;

and the target page generation module is used for loading the target configuration template and the sharing variable set in a renderer to generate a target page.

In a third aspect, an embodiment of the present invention further provides an electronic device, where the electronic device includes:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,

the memory stores a computer program executable by the at least one processor, the computer program being executable by the at least one processor to enable the at least one processor to perform the page generation method of any of the embodiments of the present invention.

In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, where computer instructions are stored, and the computer instructions are configured to, when executed, enable a processor to implement the page generation method according to any embodiment of the present invention.

According to the page generation scheme provided by the embodiment of the invention, firstly, an operation window is obtained, wherein the operation window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates; then, acquiring a target configuration template from the parent window, and displaying an initial page of the target configuration template in the child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited; carrying out variable configuration on each item to be edited in the parent window respectively to obtain a shared variable set; and finally, loading the target configuration template and the sharing variable set in the renderer to generate a target page. According to the method and the device for achieving the inter-window operation, when the variable configuration is carried out on each item to be edited based on the parent window, the variable is shared, so that the child window can be synchronously rendered according to the shared variable, the target page is displayed based on the shared variable set, when the parent window and the child window are loaded by using different technical frames, the parent window and the child window can achieve the inter-window operation based on the shared variable set, and the purpose of the inter-window operation is achieved. The problem of the relatively large investment cost that needs to maintain two sets of frames when editing the page in the existing scheme is solved, and the beneficial effects of reducing the development cost and reducing the development difficulty are achieved.

It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present invention, nor do they necessarily limit the scope of the invention. Other features of embodiments of the present invention will become apparent from the following description.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.

Fig. 1 is a schematic flowchart of a page generation method according to an embodiment of the present invention;

fig. 2 is another schematic flow chart of a page generation method according to an embodiment of the present invention;

FIG. 3 is a schematic diagram of an operation window according to an embodiment of the present invention;

fig. 4 is a schematic flowchart of a page generation method according to an embodiment of the present invention;

FIG. 5 is a schematic structural diagram of a target page according to an embodiment of the present invention;

FIG. 6 is a system architecture diagram of a page generation method according to an embodiment of the present invention;

fig. 7 is a schematic structural diagram of a page generating apparatus according to an embodiment of the present invention;

fig. 8 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.

Detailed Description

In order to make the technical solutions of the present invention better understood, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be obtained by a person skilled in the art without making any creative effort based on the embodiments in the present invention, shall fall within the protection scope of the present invention.

The present invention will be described in further detail with reference to the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not to be construed as limiting the invention. It should be further noted that, for the convenience of description, only some structures related to the present invention are shown in the drawings, not all of them.

Fig. 1 is a schematic flow chart of a page generating method according to an embodiment of the present invention, where the present embodiment is applicable to a situation where an operation window is visually edited to generate a target page under different frames, and the method may be executed by a page generating device, where the page generating device may be implemented in a form of hardware and/or software, and the page generating device may be configured in a computer device such as a server. Referring to fig. 1, the method may specifically include the following steps:

s110, obtaining an operation window, wherein the operation window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates.

The operation window can be understood as a window capable of implementing visual modification of the current page based on the editor. For example, the current operation window may be a window displayed based on a preset web page, or may also be a window written based on a computer program, and the implementation type of the specific operation window is not limited herein.

The relationship of parent and child windows (iframes) is: iframe is a tag in HyperText Markup Language (HTML), and by using the tag in HTML, another web page can be embedded into the current web page. In general, a currently opened web page is called a parent window, and when an iframe exists in the parent window, the iframe is called a child window.

In the embodiment of the invention, the parent window is generated based on a first preset frame, and the child window is generated based on a second preset frame. The reason for this is to solve the problem that in the existing solution, the parent window and the child window cannot interact across frames, and thus a new page cannot be generated in a visual dragging manner through an editor.

The first preset frame may be a read frame, the second preset frame may be a Taro frame or a Vue frame (a progressive frame for constructing a user interface), and the selection of the first preset frame and the selection of the second preset frame are not limited herein.

The parent window comprises a plurality of configuration templates, and the configuration templates can be basic templates required by page design. In the embodiment, the initial page corresponding to the configuration template is displayed in the child window in a dragging manner by the configuration template of the parent window, and the corresponding item to be edited in the initial page is subjected to variable configuration in the parent window in a variable sharing manner between the parent window and the child window, so that the initial page displayed in the child window is rendered according to the configured parameters, and finally, a developer can obtain the changed page on the child window. Illustratively, the configuration template may be: a travel column template, a policy service column template, an icon column template, and the like, and the items to be edited can be changed in each configuration template. The configuration templates contained in a particular parent window, and the items to be edited contained in each configuration template, are not limited herein.

The practical problem to be solved in this embodiment is that when a parent window and a child window are in different frames, two visual editors with different architectures need to be opened, cross-iframe (child window) dragging is realized, that is, a configuration template in the parent window can be dragged to the child window for display, and functions such as real-time editing (that is, variable configuration) can be realized.

S120, acquiring the target configuration template from the parent window, and displaying an initial page of the target configuration template in the child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited.

The target configuration template is a template which is selected from the parent window and is required to be subjected to page editing, and the target page is finally obtained by editing the initial page of the target configuration template.

Before the initial page of the target configuration template is displayed in the child window, the created child window needs to be a same-domain window of the parent window, and the same-domain window refers to a window in which the communication protocol, the domain name and the port number of the server of the parent window and the child window are the same. The purpose of this is that, because the child window and the parent window are the same-domain windows and have no cross-domain limitation, the parent window and the child window can directly hold the variable data of the other side, and the current variable data is the data in the shared variable set in the subsequent step.

After the target configuration template is dragged from the parent window to the child window, an initial page of the target configuration template can be displayed in the child window, the current initial page can be understood as a corresponding page displayed by the initial configuration parameters contained in the target configuration template, and a user can perform related editing operation on a plurality of items to be edited in the initial page to obtain the target page. Wherein, the current editing mode can be as follows: add, delete, or change, etc.

The above-mentioned manner for performing the relevant editing operation on the item to be edited may be: changing the name of the target configuration template, changing the attributes of the initial page background image (picture color, picture pixel and picture size), inserting tables, inserting files and the like. The specific manner of performing the relevant editing operation on the item to be edited is not limited herein.

And S130, performing variable configuration on each item to be edited in the parent window respectively to obtain a shared variable set.

Each item to be edited represents an item which can be edited and changed in the initial page displayed by the target configuration template. For example, the current item may be changed to a target shape, target size, target color, and target text inserted, target table, target picture deleted, target element deleted in the original page, and so on.

The parameter information after being changed in each item to be edited is called variable information, after the item to be edited is changed, the variable name and the variable information corresponding to the current variable name are stored together, and after all the items to be edited in the initial page are changed, a shared variable set can be obtained.

The purpose of storing the variable name and the variable information corresponding to the current variable name together is to facilitate the definition of the content changed in the current item to be edited, so as to facilitate the more accurate loading of the shared variable set into the target configuration template in the subsequent step S140, so as to render the target page.

And carrying out variable configuration on each item to be edited of the child window in the parent window by a developer according to actual requirements. Exemplarily, taking an item to be edited as an example for changing a background image to be edited currently, a variable configuration mode may be performed in such a way that initial parameter information corresponding to a parameter attribute in the background image is displayed in a parent window, and the current parameter information may be an image name, an image pixel, a picture size, a background color, and the like; and the developer can modify the parameter value corresponding to each parameter information into the target parameter value in the parent window, namely, the variable configuration of the background graph is completed, and the child window can acquire the target parameter value changed in the parent window, namely, the shared variable in real time. The sub-window can correspondingly modify the background image according to the target parameter value, so that the target background after the background image is modified is displayed.

The method comprises the steps that a plurality of items to be edited are contained in an initial page displayed by a target configuration template, after all initial parameter values of the items to be edited are modified, binding storage is carried out on the items to be edited, variable names contained in the items to be edited and variable parameters corresponding to the variable names, and then a shared variable set can be obtained.

S140, loading the target configuration template and the sharing variable set in the renderer to generate a target page.

When the target configuration template is loaded in the renderer, the variable information corresponding to the variable names in the shared variable set can be loaded according to the variable names corresponding to the items to be edited in the target configuration template, and therefore the rendering is carried out on the renderer to show the target page.

The page generation method provided by the embodiment of the invention comprises the steps of firstly obtaining an operation window, wherein the operation window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates; then, acquiring a target configuration template from the parent window, and displaying an initial page of the target configuration template in the child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited; carrying out variable configuration on each item to be edited in the parent window respectively to obtain a shared variable set; and finally, loading the target configuration template and the sharing variable set in the renderer to generate a target page. According to the method and the device for achieving the inter-window operation, when the variable configuration is carried out on each item to be edited based on the parent window, the variable is shared, so that the child window can be synchronously rendered according to the shared variable, the target page is displayed based on the shared variable set, when the parent window and the child window are loaded by using different technical frames, the parent window and the child window can achieve the inter-window operation based on the shared variable set, and the purpose of the inter-window operation is achieved. The problem of when editing the page in the current scheme, need maintain the investment cost great that two sets of frames caused is solved, played the beneficial effect that reduces development cost to and reduce the development degree of difficulty.

Fig. 2 is another schematic flow chart of the page generating method according to the embodiment of the present invention, and the relationship between the present embodiment and the foregoing embodiment further details the corresponding features of the foregoing embodiment. As shown in fig. 2, the method may include the steps of:

and S210, generating a parent window based on the first preset frame.

The first preset frame provided in this embodiment is preferably a read frame, and is suitable for a PC (computer web page browsed based on a browser) terminal and an H5 (web page browsed by a mobile device) terminal, so that page design can be performed on a parent window based on the read frame. The selection of the first default frame in this embodiment is not limited herein.

And S211, generating a child window based on a second preset frame under the same-domain window of the parent window.

Because the child window is created under the same-domain window of the parent window without cross-domain limitation, the parent window and the child window can directly hold the variable data of the other side. In subsequent operations, responses of adding and deleting the items to be edited in the child window in the parent window are realized through a dependence collection mechanism, dependence collection related variable information is uniformly stored in a shared variable (family).

The second preset frame provided by the embodiment may be a Taro frame or a Vue frame, where the Taro frame is used for an H5 scene, and the Vue frame is suitable for a PC scene as well as the H5 scene. The selection of the second default frame in this embodiment is not limited herein.

S212, displaying the parent window and the child window in the operation window, wherein the parent window comprises a plurality of configuration templates.

The method comprises the steps that a parent window and a child window which are generated based on different frames are displayed on the same interface (operation window), the operation window comprises a plurality of configuration templates, so that a developer can select a target configuration template from the parent window according to actual requirements, and an initial page of the target configuration template is displayed in the child window in a dragging mode.

Specifically, referring to fig. 3, fig. 3 is a schematic structural diagram of an operation window according to an embodiment of the present invention. In a parent window and a child window displayed by an operation window, the parent window comprises a first area and a second area; the first area is used for storing a plurality of configuration templates; the second area is used for carrying out variable configuration on the configuration template.

The position relationship among the first region, the second region and the sub-window is not limited by the first region and the second region on two sides and the sub-window in the middle in the diagram, specifically subject to the actual requirements of developers.

S220, receiving the clicking operation of the target configuration template in the first area, and obtaining a ghost element corresponding to the target configuration template.

By default, the events in the child window cannot be transferred to the parent window, i.e. the events of the parent and child windows are not intercommunicated, so a uniform event bus is set up here, the event transfer between the two windows is opened, and the difference between the events of different windows is smoothed. The difference between different window events can be understood as coordinate system difference, each window has its own independent coordinate system, and the upper left corner of each window is generally used as the origin coordinate (0, 0).

The current establishment of a unified event bus is: the parent window and the child window share variables, two independent coordinate systems are fused into the same coordinate system, events such as mouse clicking and dragging between the parent window and the child window can be monitored, dependence collection is carried out on the shared variables, data changes in the parent window and the child window are monitored, and operations such as page rendering updating are carried out.

Continuing to refer to the position a in fig. 3, the content in the dashed box in the current position represents a ghost element corresponding to the target configuration template (template 5), the target configuration template is first determined in the first area, and a click operation on the target configuration template is implemented, the current click operation may be implemented based on a mouse of a developer, after the click operation is performed, the ghost element corresponding to the target configuration template may be obtained at the mouse position, the current ghost element may be a virtual name of the target configuration template, and the ghost element functions as: the method can be convenient for developers to determine whether the currently selected target configuration template is correct; the mouse can also be moved along with the dragging of the mouse so as to acquire the position to be inserted in real time.

S221, receiving a dragging operation on the ghost element, and moving the ghost element to the target position of the sub-window.

Based on the mode of setting the shared variable, the unified event layer in front of the parent window and the child window is opened, events between the parent window and the child window can be mutually forwarded, the ghost element can be dragged into the child window after the drag operation of the ghost element is realized, and after a mouse is stopped and released at the target position of the child window, the target configuration template can be dragged to the child window.

When the ghost element is dragged in the child window, the parent window can monitor the change situation of the position of the ghost element, and the position of the ghost element in the child window is updated in the parent window in real time.

S222, inserting the target configuration template into the target position, and displaying an initial page of the target configuration template in the child window.

And after the mouse is monitored to be released, displaying an initial page corresponding to the target configuration template corresponding to the ghost element in the child window. Please continue to refer to fig. 3, the initial page of the template can be configured for the target.

It should be noted that the initial page of the target configuration template displayed in the sub-window is not limited to the illustration, and the display content of the initial page is related to the selected target configuration template.

And S230, after the basic attribute information corresponding to the items to be edited is configured in the second area in sequence, obtaining a plurality of variable information.

Because the initial page comprises a plurality of items to be edited, a developer can configure the items to be edited one by one, the current configuration mode can be that basic attribute information corresponding to the current item to be edited can be displayed by clicking one item to be edited corresponding to the second area, the developer can modify the basic attribute information according to actual requirements, and a plurality of variable information can be obtained after modifying the basic attribute information corresponding to all the items to be edited.

One item to be edited corresponds to one variable information, and the variable information has the advantage of being capable of clearly determining which variable contents are changed in each item to be edited.

Referring to fig. 4, fig. 4 is a schematic flowchart illustrating a page generation method according to an embodiment of the present invention;

in the page generation method provided in this embodiment, the variable information may be implemented by the following steps S310 to S330, which specifically include:

s310, determining the target item to be edited from the sub-window, and displaying basic variable information of the target item to be edited in the second area.

Referring to fig. 3, taking the target item to be edited as the "item to be configured in the head column" in the illustration sub-window as an example, correspondingly, the basic variable information of the "item to be configured in the head column" is shown in the second area.

As can be seen from the second area of fig. 3, the basic variable information of the target item to be edited may include: name "head bar", navigation bar color "#4ABFFF (blue), background map, and the like. Configuring the original information in the template for the target by using the current basic variable information

And S320, performing variable configuration on the basic variable information in the second area to obtain variable information.

When the variable configuration is performed, the name, the color of the navigation bar, the style of the background image and the like can be changed to obtain the changed variable information.

S330, rendering the initial sub-page of the target item to be edited according to the variable information to obtain the target sub-page of the target item to be edited.

The renderer of the child window can synchronously render according to the modified variable information in the second area so as to render the initial child page corresponding to the target item to be edited into a target child page, and developers can complete one-time visual editing in the editor.

It should be noted that, in the page generation scheme provided in this embodiment, when the parameter modification is performed on the item to be edited in the sub-window in the second area, the renderer of the sub-window may respond to the variable information in real time to generate a modified sub-page, which is helpful for a developer to specify the current modification effect.

When the child window is developed based on the Taro frame and the parent window is developed based on the React frame, the implementation of the editor canvas in the child window is implemented based on the code of the CUI component library introduced into the Taro frame in the React frame.

And S231, obtaining a sharing variable set according to the information of the plurality of variables.

After the configuration of the plurality of items to be edited in the sub-window is completed based on the second area, the variable information corresponding to each item to be edited can be obtained, and a shared variable set is obtained.

After the configuration in the child window is completed, the page displayed by the current child window is only the page which can be seen by the developer, and is not published for the user to use or view. After the configuration of the items to be edited is completed, the preset button of the operation window is clicked to save the target configuration template and the corresponding shared variable set.

The current preset button may be "done", "submit", or "OK", and the setting of the specific preset button is not limited herein.

And S240, sequentially loading variable information corresponding to each item to be edited in the target configuration template.

When a target page needs to be displayed for a user, a target configuration template and a corresponding shared variable set are further loaded, namely, variable information corresponding to the name of the current item to be edited is correspondingly loaded in the shared variable set according to the name of each item to be edited in the target configuration template, so that parameter information in the target configuration template is configured one by one.

And S241, loading the bottom variable information when the current item to be edited has no corresponding variable information.

The reason why the current item to be edited does not have corresponding variable information may be that each item to be edited does not necessarily need to be changed, or each variable in each item to be edited does not necessarily need to be changed, if the item to be edited does not need to be changed, that is, the current parameter in the current item to be edited or the current parameter in the current item to be edited is the default parameter value in the template, the default parameter value may be referred to as a bottom-of-pocket variable, and the corresponding bottom-of-pocket variable is stored in the shared variable set.

And when the current item to be edited has no corresponding variable information, the configuration of the current item to be edited is realized by loading the bottom-pocket variable information.

And S242, after all the variable information corresponding to each item to be edited is loaded, rendering is carried out in the renderer to generate a target page.

Referring to fig. 5, fig. 5 is a schematic structural diagram of a target page according to an embodiment of the present invention.

The target page generated by rendering by the current renderer is a page after each item to be edited information variable in the child window is configured in the second area for developers, namely, the WYSIWYG (what you see is what you get) is realized

Compared with the existing scheme, the way of editing in the visual editor (the function of the visual editor mentioned below is implemented by the child window in this embodiment) by this embodiment is as follows: the frames to be used are planned from the editor (each frame contains a different component library), so that the component library used in editing and the component library used in landing are not a set of codes. At present, an editor is developed first, and then a component library corresponding to a framework is developed.

The development idea of the visual editor provided by the embodiment is as follows: and determining the functional logic of the editor according to the currently existing frame (Taro frame or Vue frame), dragging a configuration template on the editor when a focus is on the editor, and directly embedding a floor component library when producing a page preview on a canvas. The component library is developed first, and then the editor is developed according to the component library. The method realizes that the finally seen component style and function are completely consistent and really seen to be obtained.

Previewing a component library: representing components that are specific for canvas use on an editor; a floor component library: representing the components that the user eventually sees on the target platform.

Further, referring to fig. 6, fig. 6 is a system architecture diagram of a page generation method according to an embodiment of the present invention. The embodiment takes the second preset frame used in the sub-window as Taro frame or Vue frame as an example. The method comprises the steps that component libraries corresponding to a Taro framework and a Vue framework can be stored in an application layer in advance to achieve a Taro visual editor and a Vue visual editor, corresponding components are input in a bridging layer to output materials corresponding to each component, and then a configuration module corresponding to each component is introduced into an editor engine layer, so that configuration of a page is achieved in a basic layer, and a target page is generated based on a current framework.

According to the page generation method provided by the embodiment of the invention, the child window and the parent window can be subjected to variable sharing in a mode of presetting the sharing variable set, so that the problem of interaction among different front-end frames of a plurality of frames (a read frame, a Taro frame, a Vue frame and the like) in the prior art is solved, and the visual editor of cross-front-end technology stack variable intercommunication is realized. A set of H5 component library based on a React frame or a Vue frame does not need to be redeveloped, so that the development cost is greatly reduced; developers do not need to study a new front-end framework language again, and only can normally complete function development on the original Taro framework, so that the development difficulty is reduced; the existing CUI component library developed based on the Taro H5 framework is directly used in the editor canvas, the style and the function of the component finally seen by a user are completely consistent, and the real what you see is what you get; the component libraries under two sets of different frames do not need to be maintained, the operation and maintenance cost is reduced, and the cost performance is higher.

Fig. 7 is a schematic structural diagram of a page generation apparatus according to an embodiment of the present invention, where the apparatus is adapted to execute the page generation method according to the embodiment of the present invention. As shown in fig. 7, the apparatus may specifically include: an operation window obtaining module 410, an initial page display module 420, a shared variable obtaining module 430 and a target page generating module 440, wherein:

an operation window obtaining module 410, configured to obtain an operation window, where the operation window includes a parent window and a child window, and the parent window includes multiple configuration templates;

an initial page display module 420, configured to obtain a target configuration template from the parent window, and display an initial page of the target configuration template in the child window, where the initial page of the target configuration template includes multiple items to be edited;

a shared variable obtaining module 430, configured to perform variable configuration on each item to be edited in the parent window, respectively, to obtain a shared variable set;

and a target page generating module 440, configured to load the target configuration template and the shared variable set in a renderer, and generate a target page.

The page generation device provided by the embodiment of the invention firstly obtains an operation window, wherein the operation window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates; then, acquiring a target configuration template from the parent window, and displaying an initial page of the target configuration template in the child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited; carrying out variable configuration on each item to be edited in the parent window respectively to obtain a shared variable set; and finally, loading a target configuration template and the sharing variable set in a renderer to generate a target page. According to the method and the device for achieving the inter-window operation, when the variable configuration is carried out on each item to be edited based on the parent window, the variable is shared, so that the child window can be synchronously rendered according to the shared variable, the target page is displayed based on the shared variable set, when the parent window and the child window are loaded by using different technical frames, the parent window and the child window can achieve the inter-window operation based on the shared variable set, and the purpose of the inter-window operation is achieved. The problem of when editing the page in the current scheme, need maintain the investment cost great that two sets of frames caused is solved, played the beneficial effect that reduces development cost to and reduce the development degree of difficulty.

In one embodiment, the parent window includes a first region; the first area is used for storing a plurality of the configuration templates. The initial page presentation module 420 includes: a ghost element obtaining unit, a ghost element moving unit and an initial page display unit, wherein:

a ghost element obtaining unit, configured to receive a click operation on the target configuration template in the first region, and obtain a ghost element corresponding to the target configuration template;

a ghost element moving unit, configured to receive a drag operation on the ghost element, and move the ghost element to a target position of the sub-window;

and the initial page display unit is used for inserting the target configuration template into the target position and displaying the initial page of the target configuration template in the child window.

In an embodiment, the parent window further includes a second area, and the second area is used for performing variable configuration on the configuration template; the shared variable obtaining module 430: a variable information obtaining unit and a shared variable obtaining unit, wherein:

a variable information obtaining unit, configured to obtain multiple pieces of variable information after completing configuration of basic attribute information corresponding to multiple items to be edited in the second region in sequence, where one item to be edited corresponds to one piece of variable information;

and the shared variable obtaining unit is used for obtaining the shared variable set according to a plurality of variable information.

In one embodiment, the variable information obtaining unit includes: the information display sub-unit and the information configuration sub-unit, wherein:

the information display subunit is used for determining a target item to be edited from the child window and displaying basic variable information of the target item to be edited in the second area;

and the information configuration subunit is used for performing variable configuration on the basic variable information in the second area to obtain the variable information.

In one embodiment, each item to be edited corresponds to an initial sub-page; the variable information obtaining unit further includes a sub-page obtaining sub-unit, wherein:

and the sub-page obtaining sub-unit is used for rendering the initial sub-page of the target item to be edited according to the variable information to obtain a target sub-page of the target item to be edited.

In one embodiment, the target page generation module 440 includes: the variable loading unit, the bottom variable loading unit and the page generating unit are arranged, wherein:

the variable loading unit is used for sequentially loading variable information corresponding to each item to be edited in the target configuration template;

the pocket bottom variable loading unit is used for loading pocket bottom variable information when the current item to be edited has no corresponding variable information;

and the page generating unit is used for rendering in the renderer to generate the target page after all the variable information corresponding to each item to be edited is loaded.

In one embodiment, the operation window obtaining module 410 includes: parent window generation unit, child window generation unit and operation window display unit, wherein:

a parent window generating unit, configured to generate the parent window based on a first preset frame;

the child window generating unit is used for generating the child window based on a second preset frame under the same-domain window of the parent window;

and the operation window display unit is used for displaying the parent window and the child window in the operation window.

It is obvious to those skilled in the art that, for convenience and simplicity of description, the foregoing division of the functional modules is merely used as an example, and in practical applications, the above function distribution may be performed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to perform all or part of the above described functions. For the specific working process of the functional module, reference may be made to the corresponding process in the foregoing method embodiment, which is not described herein again.

An embodiment of the present invention further provides an electronic device, where the electronic device includes: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, the computer program being executable by the at least one processor to enable the at least one processor to perform the page generation method according to any of the embodiments of the present invention.

The embodiment of the present invention further provides a computer-readable storage medium, where the computer-readable storage medium stores computer instructions, and the computer instructions are used for enabling a processor to implement the page generation method according to any embodiment of the present invention when executed.

Referring now to FIG. 8, shown is a block diagram of a computer system 500 suitable for use in implementing an electronic device of an embodiment of the present invention. The electronic device shown in fig. 8 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiment of the present invention.

As shown in fig. 8, the computer system 500 includes a Central Processing Unit (CPU) 501 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 502 or a program loaded from a storage section 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data necessary for the operation of the system 500 are also stored. The CPU 501, ROM 502, and RAM 503 are connected to each other via a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.

The following components are connected to the I/O interface 505: an input portion 506 including a keyboard, a mouse, and the like; an output portion 507 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage portion 508 including a hard disk and the like; and a communication section 509 including a network interface card such as a LAN card, a modem, or the like. The communication section 509 performs communication processing via a network such as the internet. The driver 510 is also connected to the I/O interface 505 as necessary. A removable medium 511 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 510 as necessary, so that a computer program read out therefrom is mounted into the storage section 508 as necessary.

In particular, according to embodiments of the present disclosure, the processes described above with reference to the flow diagrams may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 509, and/or installed from the removable medium 511. The computer program performs the above-described functions defined in the system of the present invention when executed by the Central Processing Unit (CPU) 501.

It should be noted that the computer readable medium shown in the present invention can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present invention, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The modules and/or units described in the embodiments of the present invention may be implemented by software, and may also be implemented by hardware. The described modules and/or units may also be provided in a processor, and may be described as: a processor comprises an operation window obtaining module, an initial page display module, a shared variable obtaining module and a target page generating module. Wherein the names of the modules do not in some cases constitute a limitation of the module itself.

As another aspect, the present invention also provides a computer-readable medium, which may be contained in the apparatus described in the above embodiments; or may be separate and not incorporated into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to comprise: acquiring an operation window, wherein the operation window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates; acquiring a target configuration template from the parent window, and displaying an initial page of the target configuration template in the child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited; performing variable configuration on each item to be edited in the parent window respectively to obtain a shared variable set; and loading the target configuration template and the sharing variable set in a renderer to generate a target page.

According to the technical scheme of the embodiment of the invention, when the variable configuration is carried out on each item to be edited based on the parent window, the variable is shared, so that the child window can synchronously render according to the shared variable, the target page is displayed based on the shared variable set, when the parent window and the child window are loaded by using different technical frames, the parent window and the child window can realize intercommunication based on the shared variable set, and the purpose of cross-window operation is achieved. The problem of when editing the page in the current scheme, need maintain the investment cost great that two sets of frames caused is solved, played the beneficial effect that reduces development cost to and reduce the development degree of difficulty.

The above-described embodiments should not be construed as limiting the scope of the invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims (10)

1. A page generation method is characterized by comprising the following steps:

acquiring an operation window, wherein the operation window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates;

acquiring a target configuration template from the parent window, and displaying an initial page of the target configuration template in the child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited;

performing variable configuration on each item to be edited in the parent window respectively to obtain a shared variable set;

and loading the target configuration template and the sharing variable set in a renderer to generate a target page.

2. The method of claim 1, wherein the parent window comprises a first region; the first area is used for storing a plurality of configuration templates;

the acquiring a target configuration template from the parent window and displaying an initial page of the target configuration template in the child window comprises:

receiving click operation on the target configuration template in the first area to obtain a ghost element corresponding to the target configuration template;

receiving a dragging operation on the ghost element, and moving the ghost element to the target position of the child window;

and inserting the target configuration template into the target position, and displaying an initial page of the target configuration template in the child window.

3. The method of claim 1, wherein the parent window further comprises a second region for variable configuration of the configuration template;

the variable configuration is respectively carried out on each item to be edited in the parent window to obtain a shared variable set, and the method comprises the following steps:

after the basic attribute information corresponding to the items to be edited is configured in the second area in sequence, obtaining a plurality of variable information, wherein one item to be edited corresponds to one variable information;

and obtaining the sharing variable set according to a plurality of variable information.

4. The method of claim 3, wherein the variable information is obtained by:

determining a target item to be edited from the sub-window, and displaying basic variable information of the target item to be edited in the second area;

and performing variable configuration on the basic variable information in the second area to obtain the variable information.

5. The method according to claim 4, wherein each item to be edited corresponds to an initial sub-page;

after the performing variable configuration on the basic variable information in the second area to obtain the variable information, the method further includes:

and rendering the initial sub-page of the target item to be edited according to the variable information to obtain a target sub-page of the target item to be edited.

6. The method of claim 1, wherein loading the target configuration template and the set of sharing variables in a renderer to generate a target page comprises:

sequentially loading variable information corresponding to each item to be edited in the target configuration template;

when the current item to be edited has no corresponding variable information, loading pocket bottom variable information;

and rendering in the renderer to generate the target page after all the variable information corresponding to each item to be edited is loaded.

7. The method of claim 1, wherein obtaining the operating window comprises:

generating the parent window based on a first preset frame;

generating the child window based on a second preset frame under the same-domain window of the parent window;

and displaying the parent window and the child window in the operation window.

8. A page generating apparatus, comprising:

the operating window acquiring module is used for acquiring an operating window, wherein the operating window comprises a parent window and a child window, and the parent window comprises a plurality of configuration templates;

the initial page display module is used for acquiring a target configuration template from the parent window and displaying an initial page of the target configuration template in the child window, wherein the initial page of the target configuration template comprises a plurality of items to be edited;

a shared variable obtaining module, configured to perform variable configuration on each item to be edited in the parent window, respectively, to obtain a shared variable set;

and the target page generation module is used for loading the target configuration template and the sharing variable set in a renderer to generate a target page.

9. An electronic device, characterized in that the electronic device comprises:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,

the memory stores a computer program executable by the at least one processor, the computer program being executable by the at least one processor to enable the at least one processor to perform the page generation method of any of claims 1-7.

10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the page generation method according to any one of claims 1 to 7.

Images