Development and release method and system of front-end pop-up window page and storage medium

By obtaining pre-designed visual images and using pop-up window configuration platform for drag and drop layout, combining the pop-up window development toolkit to embed code, and publishing it through the test platform, the problems of high complexity in front-end pop-up page development and low online efficiency are solved. Achieve rapid release and efficient development.

CN119415091APending Publication Date: 2025-02-11YUANBAO TECH (BEIJING) TECH CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202411349177.2
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-09-26
Publication Date
2025-02-11

AI Technical Summary

Technical Problem

The development process of existing front-end pop-up pages is complex and has low online efficiency, which leads to developers who need to spend a lot of manpower to develop and test and verify repetitive codes.

Method used

By obtaining pre-designed visual images, using the preset pop-up configuration platform to drag and drop elements, combining the preset pop-up development toolkit to embed the elements of the configuration platform into the business code, and finally testing and publishing them through the test platform.

Benefits of technology

Reduced repetitive code development work in front-end development, achieved rapid release and launch of pop-up windows, reduced the process of repeated test verification, and improved the online efficiency.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119415091A_ABST
    Figure CN119415091A_ABST
Patent Text Reader

Abstract

The invention provides a development and release method and system for a front-end pop-up window page and a storage medium, and the method comprises the steps: obtaining a pre-designed visual image, and carrying out the pop-up window page layout through a preset pop-up window configuration platform in a manner of dragging elements based on the visual image; based on the result of the popup window page layout, elements of a popup window configuration platform are embedded into a pre-written service code through a preset popup window development kit to form a popup window code; and after the pop-up window code is tested through a preset test platform, a pop-up window page is released. The problems that an existing front-end pop-up window page development process is high in complexity and low in online efficiency are solved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the technical field of front-end development, and in particular to a method, system and storage medium for developing and publishing a front-end pop-up window page. Background Art

[0002] At present, there are more and more front-end development models and richer technology stacks. Single-page application development frameworks such as React / Vue can be used directly for development. In fact, a lot of the codes involved in the development process are repetitive development work. For example, common page pop-ups often just have a background, a button response, and a text description. Each development requires a separate pop-up file to render the page and interact with the buttons, which is highly repetitive.

[0003] In addition, after the code is developed, it needs to be tested and verified, the front-end code needs to be compiled and released, which consumes some manpower. Therefore, in order to simplify this process, it is necessary to propose an efficient and convenient pop-up code release management solution to ensure that the development of pop-up windows is simple, convenient, and can be quickly released online. Summary of the invention

[0004] The present invention provides a front-end pop-up window page development and publishing method, system and storage medium, which are used to solve the problems of high complexity and low online efficiency in the existing front-end pop-up window page development process.

[0005] The present invention provides a method for developing and publishing a front-end pop-up window page, comprising: Obtain a pre-designed visual image, and perform a pop-up window page layout by dragging elements through a preset pop-up window configuration platform based on the visual image; Based on the result of the pop-up window page layout, elements of the pop-up window configuration platform are embedded into the pre-written business code through a preset pop-up window development toolkit to form a pop-up window code; After testing the pop-up window code through a preset testing platform, the pop-up window page is released.

[0006] According to a method for developing and publishing a front-end pop-up window page provided by the present invention, the method of obtaining a pre-designed visual image and performing a pop-up window page layout by dragging elements through a preset pop-up window configuration platform based on the visual image specifically includes: Get pre-designed visuals and drag elements from the element library that comes with the preset pop-up configuration platform; The dragged elements are positionally associated and logically connected to complete the pop-up page layout.

[0007] According to a method for developing and publishing a front-end pop-up window page provided by the present invention, the step of obtaining a pre-designed visual image and dragging elements from an element library provided by a preset pop-up window configuration platform specifically includes: Obtaining a pre-designed visual image, decomposing the visual image into elements, and generating a decomposition result to confirm the elements included in the visual image; Based on the disassembly result, elements are dragged from the built-in element library through a preset pop-up configuration platform.

[0008] According to a method for developing and publishing a front-end pop-up window page provided by the present invention, the method embeds elements of a pop-up window configuration platform into a business code to form a pop-up window code based on the result of the pop-up window page layout through a preset pop-up window development toolkit, specifically comprising: Based on the result of the pop-up window page layout, code recognition is performed on the elements of the pop-up window configuration platform through the recognition module in the preset pop-up window development toolkit to generate a code recognition result; Based on the recognition result, code conversion is performed by a conversion module in a pop-up window development toolkit to generate a code conversion result; The code conversion result is embedded into the pre-written business code through the embedding module in the pop-up window development toolkit to form the pop-up window code.

[0009] According to a method for developing and publishing a front-end pop-up window page provided by the present invention, the method embeds the code conversion result into a pre-written business code through an embedding module in a pop-up window development toolkit to form a pop-up window code, including: Assign a unique identification code to the code conversion result through a preset pop-up development toolkit; The code conversion result with the unique identification code is embedded into the pre-written business code through the embedding module in the pop-up development toolkit to form a pop-up code with the unique identification code.

[0010] According to a method for developing and publishing a front-end pop-up window page provided by the present invention, after testing the pop-up window code through a preset test platform, publishing the pop-up window page specifically includes: Obtain a unique identification code for the pop-up code, perform code testing based on the unique identification code, and generate a test result; If the test result is passed, a pop-up page is published and displayed in a pop-up window on the front end.

[0011] The present invention also provides a front-end pop-up page development and publishing system, the system comprising: A pop-up page layout module is used to obtain a pre-designed visual image, and perform pop-up page layout by dragging elements through a preset pop-up configuration platform based on the visual image; A code embedding module, used to embed elements of the pop-up window configuration platform into pre-written business codes to form pop-up window codes through a preset pop-up window development toolkit based on the result of the pop-up window page layout; The test publishing module is used to publish the pop-up window page after testing the pop-up window code through a preset test platform.

[0012] The present invention also provides an electronic device, 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 method for developing and publishing a front-end pop-up page as described in any one of the above is implemented.

[0013] The present invention also provides a non-transitory computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the method for developing and publishing a front-end pop-up page as described in any of the above-mentioned methods is implemented.

[0014] The present invention also provides a computer program product, including a computer program, which, when executed by a processor, implements any of the above-mentioned methods for developing and publishing a front-end pop-up window page.

[0015] The present invention provides a front-end pop-up page development and publishing method, system and storage medium, which drags elements through a pop-up development toolkit, reduces repetitive code development work in front-end development, embeds code through the pop-up development toolkit, and uses a pop-up configuration platform to achieve rapid release and online release of pop-ups, reduces the process of repeated testing and verification, and improves online efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0017] Figure 1 It is a flow chart of a method for developing and publishing a front-end pop-up page provided by the present invention.

[0018] Figure 2 This is an architecture diagram of a front-end pop-up page development and publishing system provided by the present invention.

[0019] Figure 3 It is a module connection diagram of a front-end pop-up page development and publishing system provided by the present invention.

[0020] Figure 4 It is a structural schematic diagram of the electronic device provided by the present invention.

[0021] Reference numerals: 110: pop-up page layout module; 120: code embedding module; 130: test release module; 410: processor; 420: communication interface; 430: memory; 440: communication bus. DETAILED DESCRIPTION

[0022] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the drawings of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0023] Combine the following Figure 1-Figure 2 A method for developing and publishing a front-end pop-up window page of the present invention is described, comprising: step 100, obtaining a pre-designed visual image, and performing a pop-up window page layout based on the visual image by dragging elements through a preset pop-up window configuration platform.

[0024] In the present invention, a pre-designed visual image is obtained by dragging elements from an element library provided by a preset pop-up configuration platform; The dragged elements are positionally associated and logically connected to complete the pop-up page layout.

[0025] Among them, obtaining a pre-designed visual image and dragging elements from the element library that comes with the preset pop-up configuration platform includes: Obtaining a pre-designed visual image, decomposing the visual image into elements, and generating a decomposition result to confirm the elements included in the visual image; Based on the disassembly result, elements are dragged from the built-in element library through a preset pop-up configuration platform.

[0026] Specifically, elements of pop-up window pages such as text, buttons, containers, images, rich text, countdown, and forms are obtained from the element library of the pop-up window configuration platform. Each page element provides corresponding attributes for configuration personnel to use. In addition, elements can be added or modified according to actual needs to facilitate the configuration of more types of pop-ups.

[0027] In the present invention, the designer designs the visual image of the pop-up window through a design tool (such as Sketch or Adobe XD) and exports the design draft. The developer analyzes the visual image and determines the elements required in the pop-up window, such as: pop-up window title, content text, buttons, etc. In the present invention, the pop-up window should include a title bar, a content area, and a button group.

[0028] The developer logs in to the preset pop-up configuration platform (such as a web-based visual editor) and drags the required elements from the platform's built-in element library into the editing area, for example: Drag a title element into the editing area and set its text to "Confirm Registration Information".

[0029] Drag a text block element to the bottom and set its content to "Please confirm that your information is correct. Once submitted, it cannot be changed."

[0030] Drag two button elements to the bottom and set the text to "Cancel" and "Confirm" respectively.

[0031] Positional association and logical connection: Set the relative position of elements to ensure they are visually consistent.

[0032] Set the logic of button click events. For example, close the pop-up window when the "Cancel" button is clicked, and continue to submit the form when the "Confirm" button is clicked.

[0033] Step 200: Based on the result of the pop-up window page layout, elements of the pop-up window configuration platform are embedded into the pre-written business code through a preset pop-up window development toolkit to form a pop-up window code.

[0034] Specifically, it includes: based on the result of the pop-up window page layout, performing code recognition on the elements of the pop-up window configuration platform through the recognition module in the preset pop-up window development toolkit to generate a code recognition result; Based on the recognition result, code conversion is performed by a conversion module in a pop-up window development toolkit to generate a code conversion result; The code conversion result is embedded into the pre-written business code through the embedding module in the pop-up window development toolkit to form the pop-up window code.

[0035] The code conversion result is embedded into the pre-written business code through the embedding module in the pop-up window development toolkit to form the pop-up window code, including: Assign a unique identification code to the code conversion result through a preset pop-up development toolkit; The code conversion result with the unique identification code is embedded into the pre-written business code through the embedding module in the pop-up development toolkit to form a pop-up code with the unique identification code.

[0036] In the present invention, the recognition module built into the configuration platform reads the current layout status and generates corresponding HTML / CSS / JS code; the conversion module converts the layout into standard front-end code; the embedding module inserts the generated code into the existing business code, such as the processing function of the user registration form, and adds necessary event listeners; and a unique identification code is assigned to the pop-up code for identification during subsequent testing and maintenance.

[0037] In the present invention, after the developer obtains the visual image, he / she goes to the pop-up window configuration platform to design the layout of the pop-up window page by dragging and dropping according to the visual image, and saves and publishes the design after it is completed; then the developer uses the pop-up window SDK (software development kit) in the code to embed the pop-up window element configured on the pop-up window configuration platform (which can be a unique identification ID or a pseudo code of the pop-up window layout provided by the pop-up window configuration platform) into the business code.

[0038] Specifically, in a structured data description of a pop-up window, there is configuration information (Configuration Data) including the pop-up window name, size, animation, and mapping data (Mapping Data) that makes static elements dynamic.

[0039] By using "data description information" as the standard output of the pop-up window production side and the standard input of the pop-up window rendering side, the pop-up window can be adapted to various demand scenarios without being restricted to specific technology selections on the rendering side; if the data structure is known, the pop-up window SDK can also be used alone.

[0040] It can be divided into the following modules: Basic Information: Contains basic information of the pop-up window, such as name, type and how to close it.

[0041] Component module: By combing through the existing CMS (content management system) and Tianji's pop-up window configuration, the initial components were extracted as text, buttons, containers, pictures, pages, rich text, and countdowns. Later, form components were added during use, for a total of eight components.

[0042] Attributes: static description of a component. Different components have different attributes.

[0043] Style: the CSS (Cascading Style Sheet) style & class name of the component. The visual width is 375 and the unit is px. The SDK will automatically parse it into rem (relative to the font size of the root element) to adapt to the screen.

[0044] Behavior: a dynamic description of a component. Currently supported behaviors include "after clicking an element", "after long pressing an element", and "after the countdown ends".

[0045] Animation: This module currently does not have a separate field, because it only needs to support two animations: breathing and small hands. You only need to set a specific CSS style.

[0046] Data source: contains the fields of the components to be dynamically replaced and the corresponding rules. It is used in conjunction with the pop-up window SDK to render different content when the pop-up window on the rendering side is opened.

[0047] The present invention combines the pop-up elements configured on the pop-up configuration platform with the business code with the help of the pop-up SDK, replacing the repeated development of the business code. That is, the pop-up SDK is a bridge between the business code and the pop-up configuration platform. After recognition and conversion by the pop-up SDK, the pop-up elements designed on the pop-up design platform are converted into the final code that can be recognized and compiled by the business code.

[0048] Step 300: After testing the pop-up window code through a preset testing platform, publish the pop-up window page.

[0049] In the present invention, a unique identification code of the pop-up code is obtained, a code test is performed based on the unique identification code, and a test result is generated; if the test result passes, a pop-up page is published and a pop-up window is displayed on the front end.

[0050] Specifically, after testing and verification, the pop-up code is released online for the first time; if there are any changes to the pop-up's visuals or interactions, simply modify the corresponding pop-up elements on the pop-up configuration platform and save the release to achieve the effect of online release brought about by the pop-up business change.

[0051] In some specific embodiments, a shopping cart confirmation pop-up window is used as an example; In e-commerce websites, users need to confirm order details when checking out on the shopping cart page. Design a pop-up window to allow users to reconfirm product information, delivery address, and payment method before submitting the order.

[0052] Get a visual image. The designer provides a visual image containing information such as product list, total price, delivery address, payment method, etc.

[0053] Disassemble the elements, analyze the visual diagram, and confirm the required elements: list items, total price display, address information, payment method selection, confirmation button, and cancel button.

[0054] Drag elements. On the configuration platform, drag elements such as product list, total price, address, payment method, buttons, etc. from the element library to the editing area.

[0055] Position association and logic series connection, set the relative position between elements to ensure a reasonable layout. Set the button click event logic, such as clicking the "Confirm" button to submit the order, and clicking the "Cancel" button to close the pop-up window.

[0056] Code generation and embedding: automatically generate relevant HTML / CSS / JS codes and embed them into the business code of the shopping cart checkout page. Add a unique identification code for easy follow-up tracking.

[0057] Test and release, verify the pop-up functionality in the test environment to ensure that all information is displayed correctly and the button behavior is normal. After the test passes, release the pop-up to the production environment.

[0058] In the example of an account security setting pop-up window, when a user manages his or her account information, a pop-up window is required to confirm the operation of changing the password or binding the email address.

[0059] Get the visual image. The designer provides a visual image that includes a password input box, a confirm password input box, a current email display, a new email input box, a confirmation button, and a cancel button.

[0060] Disassemble the elements and determine the required elements: password input box, confirm password input box, current mailbox display, new mailbox input box, and button.

[0061] Drag elements. On the configuration platform, drag input boxes, display text, buttons and other elements to the editing area.

[0062] Position association and logic series connection, set the relative position between elements to ensure a reasonable layout. Set the button click event logic, such as clicking the "Confirm" button to submit the modified information, and clicking the "Cancel" button to close the pop-up window.

[0063] Code generation and embedding: automatically generate relevant HTML / CSS / JS codes and embed them into the business code of the account settings page. Add a unique identification code for easy follow-up tracking.

[0064] Test and release, verify the pop-up window function in the test environment, ensure that all input boxes are displayed correctly and the button behavior is normal. After the test passes, release the pop-up window to the production environment.

[0065] In an example of a vote confirmation popup in an online voting system, users need to confirm their voting choice before voting. Design a popup to allow users to confirm their choice before submitting their vote.

[0066] Get a visual image. The designer provides a visual image that includes voting options, a confirm vote button, and a cancel button.

[0067] Decompose the elements and determine the required elements: voting option list, confirmation button, and cancel button.

[0068] Drag elements. On the configuration platform, drag elements such as option lists and buttons to the editing area.

[0069] Position association and logic series connection, set the relative position between elements to ensure a reasonable layout. Set the button click event logic, such as clicking the "Confirm" button to submit the vote, and clicking the "Cancel" button to close the pop-up window.

[0070] Code generation and embedding: automatically generate relevant HTML / CSS / JS codes and embed them into the business code of the voting page. Add a unique identification code for easy follow-up tracking.

[0071] Test and release, verify the pop-up functionality in the test environment to ensure that all options are displayed correctly and the buttons behave normally. After the test passes, release the pop-up to the production environment.

[0072] Through the above multiple embodiments, it can be seen that the method of the present invention is not only applicable to a single scenario, but can also be flexibly applied to a variety of different types of applications. Whether it is an e-commerce website, an account management system or an online voting platform, the method of the present invention can be used to quickly and efficiently develop and publish pop-up pages, which improves the user experience while also reducing the burden on developers.

[0073] refer to Figure 3 The present invention also discloses a front-end pop-up page development and publishing system, the system comprising: The pop-up page layout module 110 is used to obtain a pre-designed visual image, and perform pop-up page layout by dragging elements through a preset pop-up configuration platform based on the visual image; A code embedding module 120, which is used to embed elements of the pop-up window configuration platform into pre-written business codes to form pop-up window codes through a preset pop-up window development toolkit based on the result of the pop-up window page layout; The test publishing module 130 is used to publish the pop-up window page after testing the pop-up window code through a preset test platform.

[0074] Among them, obtaining a pre-designed visual image, and performing a pop-up page layout by dragging elements through a preset pop-up configuration platform based on the visual image, specifically includes: Get pre-designed visuals and drag elements from the element library that comes with the preset pop-up configuration platform; The dragged elements are positionally associated and logically connected to complete the pop-up page layout.

[0075] Get pre-designed visuals and drag elements from the element library that comes with the preset pop-up configuration platform, including: Obtaining a pre-designed visual image, decomposing the visual image into elements, and generating a decomposition result to confirm the elements included in the visual image; Based on the disassembly result, elements are dragged from the built-in element library through a preset pop-up configuration platform.

[0076] Based on the result of the pop-up window page layout, the elements of the pop-up window configuration platform are embedded into the business code through a preset pop-up window development toolkit to form a pop-up window code, which specifically includes: Based on the result of the pop-up window page layout, code recognition is performed on the elements of the pop-up window configuration platform through the recognition module in the preset pop-up window development toolkit to generate a code recognition result; Based on the recognition result, code conversion is performed by a conversion module in a pop-up window development toolkit to generate a code conversion result; The code conversion result is embedded into the pre-written business code through the embedding module in the pop-up window development toolkit to form the pop-up window code.

[0077] The code conversion result is embedded into the pre-written business code through the embedding module in the pop-up window development toolkit to form a pop-up window code, including: Assign a unique identification code to the code conversion result through a preset pop-up development toolkit; The code conversion result with the unique identification code is embedded into the pre-written business code through the embedding module in the pop-up development toolkit to form a pop-up code with the unique identification code.

[0078] After testing the pop-up window code through a preset test platform, the pop-up window page is released, specifically including: Obtain a unique identification code for the pop-up code, perform code testing based on the unique identification code, and generate a test result; If the test result is passed, a pop-up page is published and displayed in a pop-up window on the front end.

[0079] A front-end pop-up page development and publishing system provided by the present invention uses a pop-up development toolkit to drag elements, thereby reducing repetitive code development work in front-end development. Code embedding is performed through the pop-up development toolkit, and a pop-up configuration platform is used to realize rapid release and online release of pop-ups, thereby reducing the process of repeated testing and verification and improving online efficiency.

[0080] Figure 4 An example of a physical structure diagram of an electronic device is shown in FIG. Figure 4As shown, the electronic device may include: a processor 410, a communication interface 420, a memory 430 and a communication bus 440, wherein the processor 410, the communication interface 420 and the memory 430 communicate with each other through the communication bus 440. The processor 410 may call the logic instructions in the memory 430 to execute a method for developing and publishing a front-end pop-up window page, the method comprising: obtaining a pre-designed visual image, and performing a pop-up window page layout by dragging elements through a preset pop-up window configuration platform based on the visual image; based on the result of the pop-up window page layout, embedding the elements of the pop-up window configuration platform into the pre-written business code through a preset pop-up window development toolkit to form a pop-up window code; after testing the pop-up window code through a preset test platform, publishing the pop-up window page.

[0081] In addition, the logic instructions in the above-mentioned memory 430 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.

[0082] On the other hand, the present invention also provides a computer program product, which includes a computer program, and the computer program can be stored on a non-transitory computer-readable storage medium. When the computer program is executed by a processor, the computer can execute a front-end pop-up page development and publishing method provided by the above-mentioned methods, the method including: obtaining a pre-designed visual image, and based on the visual image, performing a pop-up page layout by dragging elements through a preset pop-up configuration platform; based on the result of the pop-up page layout, embedding elements of the pop-up configuration platform into a pre-written business code through a preset pop-up development toolkit to form a pop-up code; after testing the pop-up code through a preset test platform, publishing the pop-up page.

[0083] On the other hand, the present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to execute a method for developing and publishing a front-end pop-up page provided by the above-mentioned methods, the method comprising: obtaining a pre-designed visual image, and based on the visual image, performing a pop-up page layout by dragging elements through a preset pop-up configuration platform; based on the result of the pop-up page layout, embedding elements of the pop-up configuration platform into a pre-written business code through a preset pop-up development toolkit to form a pop-up code; and after testing the pop-up code through a preset test platform, publishing the pop-up page.

[0084] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.

[0085] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0086] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for developing and publishing a front-end pop-up page, characterized in that: include: Obtain a pre-designed visual image, and perform a pop-up window page layout by dragging elements through a preset pop-up window configuration platform based on the visual image; Based on the result of the pop-up window page layout, elements of the pop-up window configuration platform are embedded into the pre-written business code through a preset pop-up window development toolkit to form a pop-up window code; After testing the pop-up window code through a preset testing platform, the pop-up window page is released.

2. The method for developing and publishing a front-end pop-up page according to claim 1, characterized in that: The obtaining of a pre-designed visual image and performing a pop-up page layout by dragging elements on a preset pop-up window configuration platform based on the visual image specifically includes: Get pre-designed visuals and drag elements from the element library that comes with the preset pop-up configuration platform; The dragged elements are positionally associated and logically connected to complete the pop-up page layout.

3. The method for developing and publishing a front-end pop-up window page according to claim 2, characterized in that: The method of obtaining a pre-designed visual image includes dragging elements from an element library provided by a preset pop-up configuration platform, specifically including: Obtaining a pre-designed visual image, decomposing the visual image into elements, and generating a decomposition result to confirm the elements included in the visual image; Based on the disassembly result, elements are dragged from the built-in element library through a preset pop-up configuration platform.

4. The method for developing and publishing a front-end pop-up page according to claim 1, characterized in that: The result based on the pop-up window page layout embeds the elements of the pop-up window configuration platform into the business code through a preset pop-up window development toolkit to form a pop-up window code, specifically including: Based on the result of the pop-up window page layout, code recognition is performed on the elements of the pop-up window configuration platform through the recognition module in the preset pop-up window development toolkit to generate a code recognition result; Based on the recognition result, code conversion is performed by a conversion module in a pop-up window development toolkit to generate a code conversion result; The code conversion result is embedded into the pre-written business code through the embedding module in the pop-up window development toolkit to form the pop-up window code.

5. The method for developing and publishing a front-end pop-up window page according to claim 4, characterized in that: The method of embedding the code conversion result into a pre-written business code through an embedding module in a pop-up window development toolkit to form a pop-up window code includes: Assign a unique identification code to the code conversion result through a preset pop-up development toolkit; The code conversion result with the unique identification code is embedded into the pre-written business code through the embedding module in the pop-up development toolkit to form a pop-up code with the unique identification code.

6. The method for developing and publishing a front-end pop-up window page according to claim 1, characterized in that: After the pop-up window code is tested by a preset test platform, a pop-up window page is released, which specifically includes: Obtain a unique identification code for the pop-up code, perform code testing based on the unique identification code, and generate a test result; If the test result is passed, a pop-up page is published and displayed in a pop-up window on the front end.

7. A front-end pop-up page development and publishing system, characterized in that: The system comprises: A pop-up page layout module is used to obtain a pre-designed visual image, and perform pop-up page layout by dragging elements through a preset pop-up configuration platform based on the visual image; A code embedding module, used to embed elements of the pop-up window configuration platform into pre-written business codes to form pop-up window codes through a preset pop-up window development toolkit based on the result of the pop-up window page layout; The test publishing module is used to publish the pop-up window page after testing the pop-up window code through a preset test platform.

8. An electronic device 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 method for developing and publishing the front-end pop-up page as described in any one of claims 1 to 6 is implemented.

9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, it implements the method for developing and publishing a front-end pop-up page as described in any one of claims 1 to 6.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, it implements the method for developing and publishing a front-end pop-up page as described in any one of claims 1 to 6.

Citation Information

Patent Citations

  • Popup window control method based on low-code platform and related equipment thereof

    CN114879952A