Visual page building method and device, electronic device and storage medium
Through the visual page building method, users can create and configure pages in the construction interface, solving the problems of low efficiency and insufficient flexibility in page building in the existing technology, and achieving efficient and flexible page development.
Patent Information
- Application Number
- CN202411637244.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-15
- Publication Date
- 2025-03-04
AI Technical Summary
In the existing technology, page construction efficiency is low and development flexibility is insufficient, resulting in high labor and time costs, and inflexible enough in the face of frequent page changes.
Provides a visual page building method, which creates an initial page by responding to the page creation request initiated by the user for the target scene in the construction interface, and displays optional materials in the canvas, allowing users to drag and configure materials to generate target pages.
Improves the efficiency and flexibility of page development, reduces labor and time costs, and can quickly respond to and adapt to frequently changing page needs.
Smart Images
Figure CN119556907A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a visual page building method, device, electronic device and storage medium. Background Art
[0002] In business scenarios with high timeliness and high frequency of changes, the corresponding page development often requires a high investment in development manpower, and there is a lot of repetitive development of similar pages, which results in a loss of manpower and time costs for page development; in addition, repetitive development for different business scenarios also reduces the efficiency of page construction, and page development that relies on developers is not flexible enough in the face of frequently changing page requirements.
[0003] Currently, no effective solution has been proposed to address the problems of low page building efficiency and low development flexibility in related technologies. Summary of the invention
[0004] In this embodiment, a visual page building method, device, electronic device and storage medium are provided to solve the problems of low page building efficiency and low development flexibility in related technologies.
[0005] In the first aspect, a visual page building method is provided in this embodiment, including:
[0006] In response to a page creation request initiated by a user on a building interface for a target scenario, an initial page is created for the target scenario;
[0007] In response to a canvas building request from the user in the initial page, creating a canvas in the initial page for the target scene, and displaying optional materials in a material area of the building interface;
[0008] In response to the user's dragging operation on the material, displaying the material dragged by the user at a corresponding target position in the canvas; wherein the target position is a position specified by the user's dragging operation;
[0009] In response to the user selecting the dragged material, displaying the attributes to be configured in the material configuration area of the building interface;
[0010] In response to the user's configuration confirmation operation on the to-be-configured attribute, completing the attribute configuration of the selected material;
[0011] In response to the user confirming that the initial page has been completed, a target page is generated.
[0012] In some embodiments, in response to the user confirming that the initial page is complete, generating a target page includes:
[0013] In response to the user confirming that the initial page has been built, a material array set formed by the materials corresponding to the target page is stored.
[0014] In some of the embodiments, the canvas includes a no-code mode canvas and a low-code mode canvas; the no-code mode canvas is a building mode canvas in a no-code form; and the low-code mode canvas is a building mode canvas in a preset low-code generation page form.
[0015] In some embodiments, the canvas created in the target page is the codeless mode canvas; and the method further includes:
[0016] In response to the user's request to publish the target page, the target page is published online and a page address is generated.
[0017] In some embodiments, the canvas created in the target page is the low-code mode canvas; and the method further includes:
[0018] In response to the user's request to publish the target page, the materials in the target page are combined into a material set for storage, and a unique identifier is generated for the material input set association, so that the page rendering engine obtains the material array set based on the unique identifier to perform page rendering.
[0019] In some embodiments, the method further comprises:
[0020] In response to the preview request of the user during the page building process, a page preview is displayed on the building interface based on the materials that have been currently configured in the canvas.
[0021] In some embodiments, the method further comprises:
[0022] In response to the user's modification operation on the target page, the target page is modified.
[0023] In the second aspect, a visual page building device is provided in this embodiment, including: a first creation module, a second creation module, a drag response module, a selection response module, a configuration response module and a generation module; wherein:
[0024] The first creation module is used to create an initial page for the target scenario in response to a page creation request initiated by a user on the building interface for the target scenario;
[0025] The second creation module is used to respond to the canvas building request of the user in the initial page, create a canvas in the initial page for the target scene, and display optional materials in the material area of the building interface;
[0026] The drag response module is used to respond to the user's drag operation on the material and display the material dragged by the user at a corresponding target position in the canvas; wherein the target position is the position specified by the user's drag operation;
[0027] The selection response module is used to display the attributes to be configured in the material configuration area of the building interface in response to the user's selection operation on the dragged material;
[0028] The configuration response module is used to complete the attribute configuration of the selected material in response to the user's configuration confirmation operation on the attribute to be configured;
[0029] The generating module is used to generate a target page in response to the user confirming that the initial page is completed.
[0030] In a third aspect, an electronic device is provided in this embodiment, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the visual page building method described in the first aspect is implemented.
[0031] In a fourth aspect, a storage medium is provided in this embodiment, on which a computer program is stored, and when the program is executed by a processor, the visual page building method described in the first aspect is implemented.
[0032] Compared with the related art, a visualized page building method, device, electronic device and storage medium are provided in the present embodiment. The visualized page building method, in which, in response to a page creation request initiated by a user for a target scene in a building interface, creates an initial page for the target scene; in response to a canvas building request by a user in the initial page, creates a canvas in the initial page for the target scene, and displays optional materials in the material area of the building interface; in response to a user's dragging operation on a material, displays the material dragged by the user at the corresponding target position in the canvas; wherein the target position is the position specified by the user's dragging operation; in response to a user's selection operation on the dragged material, displays the attributes to be configured in the material configuration area of the building interface; in response to a user's configuration confirmation operation on the attributes to be configured, completes the attribute configuration of the selected material; in response to a user's confirmation of the completion of the building of the initial page, generates a target page. It provides a page building entrance for users in a visualized form, so that the user can implement page building based on the needs of the target scene, thereby improving the efficiency and flexibility of page development.
[0033] Details of one or more embodiments of the present application are set forth in the following drawings and description to make other features, objects, and advantages of the present application more readily apparent. BRIEF DESCRIPTION OF THE DRAWINGS
[0034] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:
[0035] Figure 1 It is a hardware structure block diagram of a terminal of the visual page building method of this embodiment;
[0036] Figure 2 is a flow chart of a visual page building method of this embodiment;
[0037] Figure 3 is a flow chart of a visual page building method in some of the embodiments;
[0038] Figure 4 This is a schematic diagram of page construction based on the user perspective of this embodiment;
[0039] Figure 5 It is a structural block diagram of the visual page building device of this embodiment. DETAILED DESCRIPTION
[0040] In order to more clearly understand the purpose, technical solutions and advantages of the present application, the present application is described and illustrated below in conjunction with the accompanying drawings and embodiments.
[0041] Unless otherwise defined, the technical terms or scientific terms involved in this application shall have the general meaning understood by people with ordinary skills in the technical field to which this application belongs. The words "one", "a", "a", "the", "these" and the like in this application do not represent quantitative restrictions, and they can be singular or plural. The terms "include", "comprise", "have" and any variants thereof involved in this application are intended to cover non-exclusive inclusions; for example, a process, method and system, product or device comprising a series of steps or modules (units) is not limited to the listed steps or modules (units), but may include unlisted steps or modules (units), or may include other steps or modules (units) inherent to these processes, methods, products or devices. The words "connect", "connected", "coupled" and the like involved in this application are not limited to physical or mechanical connections, but may include electrical connections, whether directly or indirectly. The "multiple" involved in this application refers to two or more. "And / or" describes the association relationship of associated objects, indicating that there can be three relationships. For example, "A and / or B" can mean: A exists alone, A and B exist at the same time, and B exists alone. Usually, the character " / " indicates that the objects associated with each other are in an "or" relationship. The terms "first", "second", "third", etc. involved in this application are only used to distinguish similar objects and do not represent a specific ordering of the objects.
[0042] The method embodiment provided in this embodiment can be executed in a terminal, a computer or a similar computing device. For example, running on a terminal, Figure 1 FIG. 1 is a hardware structure diagram of a terminal of the visual page building method of this embodiment. Figure 1 As shown, the terminal may include one or more ( Figure 1 Only one is shown in the figure) processor 102 and memory 104 for storing data, wherein processor 102 may include but is not limited to a processing device such as a microprocessor MCU or a programmable logic device FPGA. The above terminal may also include a transmission device 106 and an input and output device 108 for communication functions. It can be understood by those skilled in the art that Figure 1 The structure shown is for illustration only and does not limit the structure of the above terminal. Figure 1 More or fewer components as shown, or with Figure 1 Different configurations shown.
[0043] The memory 104 can be used to store computer programs, for example, software programs and modules of application software, such as the computer program corresponding to the visual page building method in the present embodiment. The processor 102 executes various functional applications and data processing by running the computer program stored in the memory 104, that is, to implement the above method. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include a memory remotely arranged relative to the processor 102, and these remote memories may be connected to the terminal 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.
[0044] The transmission device 106 is used to receive or send data via a network. The above network includes a wireless network provided by the communication provider of the terminal. In one example, the transmission device 106 includes a network adapter (Network Interface Controller, referred to as NIC), which can be connected to other network devices through a base station so as to communicate with the Internet. In one example, the transmission device 106 can be a radio frequency (Radio Frequency, referred to as RF) module, which is used to communicate with the Internet wirelessly.
[0045] In this embodiment, a visual page building method is provided. Figure 2 is a flow chart of the visual page building method of this embodiment, such as Figure 2 As shown, the process includes the following steps:
[0046] Step S210, in response to a page creation request initiated by the user for a target scenario in the building interface, an initial page is created for the target scenario.
[0047] The target scenario can be any business scenario that requires page construction, such as the questionnaire survey scenario, which requires the construction of a corresponding questionnaire survey page; the payment scenario, which requires the construction of an access page for the back-end system, etc. When the user initiates a page creation request for the target scenario in the construction interface, the corresponding initial page is created for the target scenario. For example, when the user clicks the preset page creation button corresponding to the target scenario in the construction interface, the user initiates a page creation request for the target scenario and enters the canvas construction process for the target scenario. Among them, one canvas corresponds to one target scenario.
[0048] Step S220, in response to the user's canvas building request in the initial page, a canvas is created in the initial page for the target scene, and optional materials are displayed in the material area of the building interface.
[0049] The canvas is the main working area for page construction, which can be specifically used for layout, design and display of page content. The canvas is the carrier for building pages, which can be compared to a drawing board. The canvas is mainly used to carry and configure materials. Materials can be dragged, pulled and laid out in the canvas, so that the user's desired page can be built through the canvas. The construction interface can be divided into several areas, such as the material area. After creating a canvas, the user builds the page by dragging the materials required in the material area into the created canvas. Among them, materials can be various elements and components used to build and enrich page content. They can be pre-designed components with specific functions and styles, or they can be customized by users according to their needs. Materials can include basic UI components (such as buttons, input boxes, icons, labels, etc.); they can also include functional modules (such as navigation bars, sidebars, pop-ups, cards, etc.).
[0050] Step S230, in response to the user's dragging operation on the material, the material dragged by the user is displayed at a corresponding target position in the canvas; wherein the target position is the position specified by the user's dragging operation.
[0051] When the user drags a material in the material area, the direction and position of the user dragging the material in the canvas can be obtained to determine the target position of the dragged material in the canvas. Among them, the user drags the material on the construction interface. When the page is saved, it is reflected on the server side, that is, the server saves the material array set (JSON Schema) built on the page to the database, generates a unique identifier and maps it one by one with this material array set, and can obtain the saved material array set through the unique identifier. In this way, in this step, the layout setting of the visualized materials on the page can be realized by dragging.
[0052] Step S240, in response to the user selecting the dragged material, displaying the attributes to be configured in the material configuration area of the building interface.
[0053] When the user completes dragging the material and selects a material dragged onto the canvas, the properties to be configured corresponding to the material can be displayed to the user, thereby providing the user with a material property configuration entry in a visual form. For example, the properties to be configured may include visual properties such as color, font, margin, spacing, size, position, etc.; or interactive properties such as click events, hover effects, dragging and sorting; or functional properties such as data binding, form validation, and permission control.
[0054] Step S250, in response to the user's configuration confirmation operation on the configuration attribute, the attribute configuration of the selected material is completed. After the user completes the configuration of the material, the configuration confirmation operation can be performed, for example, by clicking a confirmation button in the corresponding material configuration area to complete the configuration confirmation. At this time, the data corresponding to the material can be updated on the server side based on the attributes configured by the user for the corresponding material when the page is saved.
[0055] Step S260, in response to the user confirming that the initial page is complete, generating a target page.
[0056] When the user completes the attribute configuration of all the materials dragged to the canvas, click the corresponding completion confirmation button to confirm the completion of the page construction, and then the generated target page is obtained. The target page is stored in the form of a material array set on the server side, and a unique code for the material array set is generated.
[0057] In the above steps S210 to S260, in response to the page creation request initiated by the user for the target scene in the construction interface, an initial page is created for the target scene; in response to the canvas construction request of the user in the initial page, a canvas is created in the initial page for the target scene, and optional materials are displayed in the material area of the construction interface; in response to the user's dragging operation on the material, the material dragged by the user is displayed at the corresponding target position in the canvas; wherein the target position is the position specified by the user's dragging operation; in response to the user's selection operation on the dragged material, the attributes to be configured are displayed in the material configuration area of the construction interface; in response to the user's configuration confirmation operation on the attributes to be configured, the attribute configuration of the selected material is completed; in response to the user's confirmation of the completion of the construction of the initial page, the target page is generated. It provides users with a page construction entrance in a visual form, so that the user can realize page construction based on the needs of the target scene, improving the efficiency and flexibility of page development.
[0058] In one embodiment, based on the above step S260, in response to the user confirming that the page is completed, generating the target page may include:
[0059] In response to the user confirming that the page is complete, a material array set formed by the materials corresponding to the target page is stored. When the target page is saved, the material array set corresponding to the target page can be saved, and a unique identifier is generated for the material array set. When the user subsequently accesses the target page, the target page can be presented based on the associated material array set.
[0060] Additionally, in one embodiment, the canvas includes a no-code mode canvas and a low-code mode canvas; the no-code mode canvas is a building mode canvas in a no-code form; and the low-code mode canvas is a building mode canvas in a preset low-code generated page form.
[0061] In this embodiment, the canvas is divided into a codeless mode canvas and a low-code mode canvas. The codeless mode canvas can provide a page building function for business personnel who do not have experience in page development (such as the demander of the page); the low-code mode canvas can provide a page building function for developers who have a programming foundation for page development. This embodiment implements different canvases, dividing the canvas into a codeless mode canvas and a low-code mode canvas. Among them, whether it is a low-code mode canvas or a codeless mode canvas, the technical implementation saves the material array set built by the user, and then the page rendering engine obtains the saved material array set according to the page unique identifier to render the page. Among them, for the codeless mode canvas, a page access link is directly generated for business personnel to access, so a page preview project will be developed with a built-in page rendering engine. The builder only needs to focus on building the page and publishing the preview. After completion, the link preview and delivery can be directly generated. After the low-code mode canvas is built, the developer needs to install the page rendering engine to the corresponding development project by himself to use the built target page.
[0062] In particular, for the no-code mode canvas, when the user has configured all the material properties on the canvas, the page construction can be regarded as completed. At this time, the page only needs to be saved, previewed and confirmed. For the low-code mode canvas, if complex custom functions are involved, it is also necessary to configure slot properties for the custom functions of the material. In the end, the slot properties will be used in combination in specific applications through code development. For example, in the construction of the access page for the middle and back-end systems, some materials need to implement custom functions according to actual needs. This can be achieved by configuring slot properties for such materials in a code development manner. More specifically, custom functions refer to some page functions that are relatively complex to implement and need to be customized for the scene. They are not general functions that can be pre-configured, and therefore cannot be implemented in a pre-configured form. For this type of function, developers need to write code to implement it. Slot materials and slot attributes provide an implementation interface for developing custom functions. The specific use is to drag slot materials into the canvas or configure slot attributes on the materials on the building interface of the building platform. The materials configured with slot names have custom development functions. In specific projects, developers need to reference the rendering engine component in the project and write the slot name to implement custom module functions. When rendering the material, the slot module will be rendered. Therefore, the codeless mode canvas can be a canvas that does not need to implement the above custom functions, does not need to write code for page functions, and all page functions are general functions that can be pre-configured and implemented; the low-code mode canvas can be a canvas that provides slot attributes for custom development functions to implement custom function development with a lower amount of code.
[0063] In this embodiment, by providing two modes of canvas, it is possible to provide suitable page building methods for different types of groups, thereby further improving the flexibility of page building.
[0064] Additionally, in one embodiment, the canvas created in the target page is a codeless mode canvas; the above-mentioned visual page building method may further include:
[0065] In response to the user's request to publish the target page, the target page is published and the page address is generated. For the codeless mode canvas, after the user completes the material configuration and clicks Save to confirm, the page address of the target page can be directly generated after the release, so that the user can access the target page according to the page address. For example, page construction for questionnaire scenarios or activity page scenarios can be achieved based on the codeless mode canvas. The codeless mode canvas does not require coding to complete page construction, and the various page functions are completely realized by configuring the construction platform. In this way, this embodiment can achieve rapid page construction and online release based on the codeless mode.
[0066] Additionally, in one embodiment, the canvas created in the target page is a low-code mode canvas; the above page building method further includes:
[0067] In response to the user's request to publish the target page, the materials in the target page are combined into a material set for storage, and a unique identifier is generated for the material input set association, so that the page rendering engine obtains the material array set based on the unique identifier to perform page rendering.
[0068] After the low-code mode canvas is built, it only saves the material array set to the server after the target page is published. It is necessary to introduce a page rendering engine and pass the unique identifier of the material array set to the page rendering engine so that the page rendering engine can obtain the corresponding material array set from the server based on the unique identifier to render the page, thereby realizing the presentation of the target page. In addition, if the materials in the target page are also set with custom development functions, it is also necessary to implement it through the context information encoding in the project corresponding to the target page. The low-code mode canvas is aimed at developers with programming basics, and aims to improve development efficiency through a visual platform construction. The low-code method can build pages or page fragments, and developers need to install the page rendering engine into their own projects to render pages.
[0069] Additionally, in one embodiment, the page building method may further include:
[0070] In response to the user's preview request during the page building process, the page preview is displayed in the building interface based on the currently configured materials in the canvas.
[0071] A preview button can be set in the building interface, and the user can initiate a preview request for the built page by clicking the preview button. Based on the configured materials in the target canvas, the preview presentation of the page being built can be realized according to the properties, style and order of the materials. When the user confirms that the preview effect is correct, the page construction is completed by clicking the Save button.
[0072] In addition, in one embodiment, the above page building method may further include:
[0073] In response to the user's modification operation on the target page, the target page is modified. After saving and generating the target page, the target page can also be modified. Based on the user's modification operation on the build interface, the corresponding material array set is updated synchronously on the server. After the modification is saved correctly, the target page can be published and launched.
[0074] Figure 3 is a flow chart of a visual page building method in some embodiments, such as Figure 3 As shown, the visual page building method includes the following steps:
[0075] Step S301, in response to a page creation request initiated by a user on a building interface for a target scenario, an initial page is created for the target scenario.
[0076] Step S302, in response to the user's canvas building request in the initial page, a canvas is created in the initial page for the target scene, and optional materials are displayed in the material area of the building interface. The canvas includes a no-code mode canvas and a low-code mode canvas; the no-code mode canvas is a building mode canvas in a no-code form; the low-code mode canvas is a building mode canvas in a preset low-code generated page form.
[0077] Step S303, in response to the user's dragging operation on the material, displaying the material dragged by the user at a corresponding target position in the canvas; wherein the target position is the position specified by the user's dragging operation.
[0078] Step S304, in response to the user selecting the dragged material, displaying the attributes to be configured in the material configuration area of the building interface.
[0079] Step S305 , in response to the user's configuration confirmation operation on the to-be-configured attribute, the attribute configuration of the selected material is completed.
[0080] Step S306, in response to a preview request from the user during the page building process, a page preview is displayed in the page building interface based on the materials currently configured in the canvas.
[0081] Step S307, in response to the user confirming that the page construction is complete, a material array set formed by the materials corresponding to the target page is stored.
[0082] Step S308, in response to the user's modification operation on the target page, modify the target page.
[0083] Figure 4 A schematic diagram of a page construction based on multiple perspectives in this embodiment is shown in FIG. Figure 4 As shown, the creator (such as the user) selects the business scenario to create the corresponding initial page and creates a canvas in the building interface provided by the building platform. After that, drag the materials to the canvas based on the material area of the building interface, and configure the materials in the canvas. After completing the configuration, the user confirms the completion and saves the material array set to the server. After publishing, when the user of the page visits the corresponding business website, the page rendering engine will obtain the material array set to perform rendering to present the built target page, and obtain the interface data to provide the corresponding business interface. This visual page building method can be implemented by developers. Specifically, in page building, you can pre-set the material library, introduce the page rendering engine, and set the building platform.
[0084] In this embodiment, a visual page building device is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and will not be repeated hereafter. The terms "module", "unit", "subunit", etc. used below can implement a combination of software and / or hardware of predetermined functions. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.
[0085] Figure 5 is a structural block diagram of the visual page building device 50 of this embodiment, such as Figure 5 As shown, the visual page building device 50 includes: a first creation module 51, a second creation module 52, a drag response module 53, a selection response module 54, a configuration response module 55 and a generation module 56; wherein:
[0086] A first creation module 51 is used to create an initial page for a target scenario in response to a page creation request initiated by a user on a building interface for a target scenario;
[0087] A second creation module 52 is used to respond to a canvas building request from a user on the initial page, create a canvas on the initial page for a target scene, and display optional materials in a material area of the building interface;
[0088] The drag response module 53 is used to respond to the user's drag operation on the material and display the material dragged by the user at the corresponding target position in the canvas; wherein the target position is the position specified by the user's drag operation;
[0089] A selection response module 54 is used to respond to the user's selection operation on the dragged material and display the attributes to be configured in the material configuration area of the building interface;
[0090] The configuration response module 55 is used to complete the attribute configuration of the selected material in response to the user's configuration confirmation operation on the attribute to be configured;
[0091] The generation module 56 is used to generate a target page in response to the user's confirmation of the completion of the page construction.
[0092] It should be noted that the above modules can be functional modules or program modules, and can be implemented by software or hardware. For modules implemented by hardware, the above modules can be located in the same processor; or the above modules can be located in different processors in any combination.
[0093] In this embodiment, an electronic device is further provided, including a memory and a processor, wherein a computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.
[0094] Optionally, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor, and the input / output device is connected to the processor.
[0095] Optionally, in this embodiment, the processor may be configured to perform the following steps through a computer program:
[0096] S1, in response to a page creation request initiated by a user for a target scenario on a building interface, creating an initial page for the target scenario;
[0097] S2, in response to a user's canvas building request in the initial page, creating a canvas in the initial page for the target scene, and displaying optional materials in the material area of the building interface;
[0098] S3, in response to the user's dragging operation on the material, displaying the material dragged by the user at a corresponding target position in the canvas; wherein the target position is a position specified by the user's dragging operation;
[0099] S4, in response to the user selecting the dragged material, displaying the attributes to be configured in the material configuration area of the building interface;
[0100] S5, in response to the user's configuration confirmation operation on the configuration attribute, completing the attribute configuration of the selected material;
[0101] S6, in response to the user confirming that the initial page is complete, generating a target page.
[0102] It should be noted that the specific examples in this embodiment can refer to the examples described in the above embodiments and optional implementation modes, and will not be repeated in this embodiment.
[0103] In addition, in combination with the visualized page building method provided in the above embodiments, a storage medium may also be provided in this embodiment to implement the method. The storage medium stores a computer program; when the computer program is executed by a processor, any of the visualized page building methods in the above embodiments is implemented.
[0104] It should be understood that the specific embodiments described herein are only used to explain the application, rather than to limit it. Based on the embodiments provided in this application, all other embodiments obtained by ordinary technicians in this field without creative work are within the protection scope of this application.
[0105] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.
[0106] Obviously, the drawings are only some examples or embodiments of the present application. For ordinary technicians in the field, the present application can also be applied to other similar situations based on these drawings without creative work. In addition, it is understandable that although the work done in this development process may be complicated and lengthy, for ordinary technicians in the field, certain changes in design, manufacturing or production based on the technical content disclosed in this application are only conventional technical means and should not be regarded as insufficient content disclosed in this application.
[0107] The term "embodiment" in this application refers to a specific feature, structure or characteristic described in conjunction with the embodiment that can be included in at least one embodiment of the present application. The appearance of this phrase in various locations in the specification does not necessarily mean the same embodiment, nor does it mean that it is mutually exclusive with other embodiments and is independent or optional. It is clearly or implicitly understood by those of ordinary skill in the art that the embodiments described in this application can be combined with other embodiments without conflict.
[0108] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of patent protection. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the scope of protection of the present application. Therefore, the scope of protection of the present application shall be subject to the attached claims.
Claims
1. A visual page building method, characterized in that: include: In response to a page creation request initiated by a user on a building interface for a target scenario, an initial page is created for the target scenario; In response to a canvas building request from the user in the initial page, creating a canvas in the initial page for the target scene, and displaying optional materials in a material area of the building interface; In response to the user's dragging operation on the material, displaying the material dragged by the user at a corresponding target position in the canvas; wherein the target position is a position specified by the user's dragging operation; In response to the user selecting the dragged material, displaying the attributes to be configured in the material configuration area of the building interface; In response to the user's configuration confirmation operation on the to-be-configured attribute, completing the attribute configuration of the selected material; In response to the user confirming that the initial page has been completed, a target page is generated.
2. The visual page building method according to claim 1, characterized in that: In response to the user confirming that the initial page is complete, generating a target page includes: In response to the user confirming that the initial page has been built, a material array set formed by the materials corresponding to the target page is stored.
3. The visual page building method according to claim 1, characterized in that: The canvas includes a no-code mode canvas and a low-code mode canvas; the no-code mode canvas is a building mode canvas in a no-code form; the low-code mode canvas is a building mode canvas in a preset low-code generation page form.
4. The visual page building method according to claim 3, characterized in that: The canvas created in the target page is the codeless mode canvas; The method further comprises: In response to the user's request to publish the target page, the target page is published online and a page address is generated.
5. The visual page building method according to claim 3, characterized in that: The canvas created in the target page is the low-code mode canvas; the method further includes: In response to the user's request to publish the target page, the materials in the target page are combined into a material array set for storage, and a unique identifier is generated for the material array set so that the page rendering engine obtains the material array set based on the unique identifier to perform page rendering.
6. The visual page building method according to claim 1, characterized in that: The method further comprises: In response to the preview request of the user during the page building process, a page preview is displayed on the building interface based on the materials that have been currently configured in the canvas.
7. The visual page building method according to any one of claims 1 to 6, characterized in that: The method further comprises: In response to the user's modification operation on the target page, the target page is modified.
8. A visual page building device, characterized in that: include: A first creation module, a second creation module, a drag response module, a selection response module, a configuration response module, and a generation module; wherein: The first creation module is used to create an initial page for the target scenario in response to a page creation request initiated by a user on the building interface for the target scenario; The second creation module is used to respond to the canvas building request of the user in the initial page, create a canvas in the initial page for the target scene, and display optional materials in the material area of the building interface; The drag response module is used to respond to the user's drag operation on the material and display the material dragged by the user at a corresponding target position in the canvas; wherein the target position is the position specified by the user's drag operation; The selection response module is used to display the attributes to be configured in the material configuration area of the building interface in response to the user's selection operation on the dragged material; The configuration response module is used to complete the attribute configuration of the selected material in response to the user's configuration confirmation operation on the attribute to be configured; The generating module is used to generate a target page in response to the user confirming that the initial page is completed.
9. An electronic device comprising a memory and a processor, characterized in that: A computer program is stored in the memory, and the processor is configured to run the computer program to execute the visual page building method according to any one of claims 1 to 7.
10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the visual page building method described in any one of claims 1 to 7 are implemented.