Interaction page generation method and device

Abstract

The embodiment of the invention provides an interaction page generation method and device.The method comprises the steps that a template page of a target template file is displayed, and the template page comprises a plurality of display components and initial attributes of the display components; determining a target attribute of a first display component based on a first editing operation for the first display component in the display components; according to the target attribute of the first display component, a code file of the target interaction page is generated, the code file is used for rendering the target interaction page in the running process of the target application, and a first editing operation is executed on the first display component based on the initial attribute of each display component through the display template page. According to the embodiment of the invention, the target attribute of the first display component can be obtained, so that the code file of the target interaction page is generated, the target interaction page can be rendered in the running process of the target application, automatic generation of the code file of the page and rendering of the page are realized, the page generation efficiency is improved, and the page development difficulty is reduced.

Description

Technical Field

[0001] The embodiments of the present specification relate to the field of computer technology, and more particularly to a method and device for generating an interactive page. Background Art

[0002] The "function guide" for Internet applications includes guidance on the basic functions and operation methods in the application, which can help users quickly understand the application, thereby reducing the user's learning cost and improving the user experience. Especially for new users, it can help users get started quickly, which is conducive to increasing the retention rate and user satisfaction of new users.

[0003] At present, artists usually design a certain number of guide pages, send the designed guide pages to programmers, and then the programmers program the guide pages to implement them in the application. However, this method is very dependent on the staff's art foundation and development experience, and the efficiency of guide page design and programming is low. Therefore, a more convenient and efficient method for generating guide pages is urgently needed. Summary of the invention

[0004] In view of this, an embodiment of this specification provides a method for generating an interactive page. One or more embodiments of this specification also relate to an apparatus for generating an interactive page, a computing device, a computer-readable storage medium, and a computer program product to solve the technical defects existing in the prior art.

[0005] According to a first aspect of an embodiment of this specification, a method for generating an interactive page is provided, comprising: Displaying a template page of a target template file, wherein the template page includes a plurality of display components and initial properties of each display component; Determining a target attribute of a first display component among the display components based on a first editing operation on the first display component; A code file of a target interactive page is generated according to a target attribute of the first display component, wherein the code file is used to render the target interactive page during the running of the target application.

[0006] According to a second aspect of an embodiment of this specification, there is provided a device for generating an interactive page, including: A display module, configured to display a template page of a target template file, wherein the template page includes a plurality of display components and initial properties of each display component; a determination module configured to determine a target attribute of the first display component based on a first editing operation on a first display component among the display components; The generation module is configured to generate a code file of a target interactive page according to a target attribute of the first display component, wherein the code file is used to render the target interactive page during the operation of the target application.

[0007] According to a third aspect of an embodiment of this specification, a computing device is provided, including: Memory and processor; The memory is used to store computer executable instructions, and the processor is used to execute the computer executable instructions. When the computer executable instructions are executed by the processor, the steps of the above-mentioned method for generating an interactive page are implemented.

[0008] According to a fourth aspect of the embodiments of this specification, a computer-readable storage medium is provided, which stores computer-executable instructions, and when the instructions are executed by a processor, the steps of the above-mentioned method for generating an interactive page are implemented.

[0009] According to a fifth aspect of the embodiments of this specification, a computer program product is provided, including a computer program / instruction, which implements the steps of the above-mentioned method for generating an interactive page when executed by a processor.

[0010] An embodiment of the present specification implements a template page for displaying a target template file, wherein the template page includes multiple display components and initial properties of each display component; based on a first editing operation on a first display component among each display component, the target property of the first display component is determined; according to the target property of the first display component, a code file for a target interaction page is generated, wherein the code file is used to render the target interaction page during the operation of a target application, and by displaying the template page, a first editing operation can be performed on the first display component based on the initial properties of each display component, thereby obtaining the target property of the first display component, and by generating the code file for the target interaction page according to the target property of the first display component, the target interaction page can be rendered based on the code file during the operation of the target application, thereby realizing automatic generation of the code file for the target interaction page and rendering and display of the target interaction page, which is beneficial to improving the generation efficiency of the target interaction page and reducing the difficulty of developing the target interaction page. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] Figure 1 It is a flow chart of a method for generating an interactive page provided by an embodiment of this specification; Figure 2 It is a timing diagram of a method for generating an interactive page provided by an embodiment of this specification; Figure 3 It is a timing diagram of a template page optimization method provided by an embodiment of this specification; Figure 4It is a structural schematic diagram of a device for generating an interactive page provided by an embodiment of this specification; Figure 5 It is a structural block diagram of a computing device provided by an embodiment of this specification. DETAILED DESCRIPTION

[0012] Many specific details are described in the following description to facilitate a full understanding of this specification. However, this specification can be implemented in many other ways than those described herein, and those skilled in the art can make similar generalizations without violating the connotation of this specification, so this specification is not limited to the specific implementation disclosed below.

[0013] The terms used in one or more embodiments of this specification are only for the purpose of describing specific embodiments, and are not intended to limit one or more embodiments of this specification. The singular forms of "a", "said" and "the" used in one or more embodiments of this specification and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings. It should also be understood that the term "and / or" used in one or more embodiments of this specification refers to and includes any or all possible combinations of one or more associated listed items.

[0014] It should be understood that although the terms first, second, etc. may be used to describe various information in one or more embodiments of this specification, these information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of one or more embodiments of this specification, the first may also be referred to as the second, and similarly, the second may also be referred to as the first. Depending on the context, the word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining".

[0015] In addition, 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 one or more embodiments of this specification are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0016] First, the terms involved in one or more embodiments of this specification are explained.

[0017] Control: Any element in a computer user interface that a user can interact with directly. These elements allow the user to enter data, select options, or trigger certain actions. Controls can be graphical (such as buttons, text boxes, check boxes, etc.) or more abstract (such as voice commands). Buttons are usually used to perform an action or open a new interface. Text boxes allow users to enter or edit text information. Checkboxes are used to represent a Boolean value (yes / no) that the user can select or deselect. Drop-down lists provide a list of options for the user to choose from, usually only showing a selected value. List boxes display multiple options, and the user can select one or more items. Labels display static text, usually to explain the function of other controls, and can also be used as buttons. Scrollbars enable users to navigate through large data sets, such as browsing long documents or lists. Images display static pictures and can sometimes be used as buttons. Combo boxes combine the functions of text boxes and drop-down lists, allowing users to enter text and select from a list. These controls are usually provided with standard styles by the operating system or development toolkit, and developers can customize their appearance and behavior as needed. Different operating systems and programming languages ​​(such as Java, C#, Python, etc.) have their own set of controls and provide corresponding APIs to create and manage these controls.

[0018] The term "in response to" used in this specification refers to the state in which the corresponding event occurs or the condition is satisfied. The timing of executing the subsequent action executed in response to the event or condition is not necessarily strongly related to the time when the event occurs or the condition is satisfied. For example, in some cases, the subsequent action may be executed immediately when the event occurs or the condition is satisfied; in other cases, the subsequent action may be executed after a period of time after the event occurs or the condition is satisfied.

[0019] The term "trigger operation" used in this specification refers to an operation performed on information (such as a control) provided by a computer device, through which a corresponding instruction can be issued to the computer device to trigger the computer device to perform the next task. The next task triggered by performing different trigger operations for different information can be pre-set in the program. The trigger operation can be performed manually by the user, such as the user's click, double-click, long press, slide and other operations on the content displayed on the screen of the computer device can all belong to the trigger operation. In some cases, the trigger operation can also be performed by the computer device based on a set program.

[0020] In this specification, a method for generating an interactive page is provided. This specification also relates to an apparatus for generating an interactive page, a computing device, a computer-readable storage medium, and a computer program product, which are described in detail one by one in the following embodiments.

[0021] See also Figure 1 , Figure 1 A flow chart of a method for generating an interactive page according to an embodiment of the present specification is shown, which specifically includes the following steps.

[0022] Step 102: Displaying a template page of the target template file, wherein the template page includes a plurality of display components and initial properties of each display component.

[0023] The method for generating an interactive page provided in the embodiments of this specification can be applied to a page configuration tool for interactive pages. The page configuration tool includes a front-end and a back-end. The front-end is used to provide a user interface for developers to perform editing operations, and the back-end is used to provide services such as file upload, download, and storage management. Through the page configuration tool, the page can be configured, and the code file corresponding to the page can be generated based on the configured page. The code file can be used to render and display the configured page in an application or web page.

[0024] Specifically, an interactive page can be understood as a page in a user interface of an application or webpage with which a user can interact. Further, a user can interact with an interactive page element of an interactive type in an interactive page, and an interactive page element of an interactive type can also be understood as a control.

[0025] An interactive page may include multiple types of page elements, which can be specifically divided into interactive and non-interactive types. Interactive page elements may include videos, links, animations, slideshows, dynamic subtitles, etc., which can interact with users in response to trigger events; non-interactive page elements may include static images, text content, indicator arrows, etc.

[0026] Furthermore, the interactive page may be a page in an application or a web page, such as a homepage of a website, a functional page in an application (such as a payment page, a product details page, etc.); it may also be a guide page for an application or a web page.

[0027] Specifically, the guide page can be used to guide the operation method of any function in the application program or web page.

[0028] For example, when a new user just enters an application or a webpage, the registration function can be guided through a guidance page for the registration function, thereby guiding the new user to perform the registration operation.

[0029] The guide page may include various types of guide content, which may include: text description content, indicator arrows, carousel images, videos, animations, dynamic subtitles, bubble masks, function introduction windows, etc. Different types of guide content have different guiding effects and can be used to guide users to pay attention to different content.

[0030] Among them, text descriptions can provide accurate annotations or detailed explanations of product functions or operating steps; indicator arrows can clearly point to important page elements, thereby effectively guiding the user's attention; carousels can be used to effectively display multiple contents, especially for detailed introductions to product features; videos and animations can intuitively present a series of coherent operating steps, thereby reducing the difficulty of user understanding; dynamic subtitles can highlight key information or operating steps through moving subtitle effects to enhance the guidance effect; bubble masks and light prompts can quickly attract user attention and concisely indicate key information; the function introduction window can provide in-depth explanations of specific functions through a combination of titles and descriptions.

[0031] Optionally, in order to further enhance the visual guidance effect, the default page guide can be used to provide necessary information for the blank page to promote user interaction; the paging design can be used to ensure the clarity of complex or multi-step tutorials; the key areas of the pattern can be highlighted and the details can be enlarged for users to observe carefully; the page scrolling can be simulated to preview continuous content, etc. Furthermore, external image resources, such as supplementary screenshots and sample images, can be inserted to provide more comprehensive visual assistance.

[0032] In actual applications, the generation of interactive pages often requires the cooperation of artists and programmers. Artists design exquisite page styles and layouts, and programmers program the designed pages into code. This page generation method relies on high professional skills, which is not conducive to novice developers to quickly get started. In addition, the designed pages cannot be reused, and the page generation efficiency is low.

[0033] Based on this, an embodiment of the present specification displays a template page of a target template file, wherein the template page includes multiple display components and initial properties of each display component; based on a first editing operation on a first display component among each display component, the target property of the first display component is determined; according to the target property of the first display component, a code file of a target interaction page is generated, wherein the code file is used to render the target interaction page during the operation of a target application, and by displaying the template page, a first editing operation can be performed on the first display component based on the initial properties of each display component, thereby obtaining the target property of the first display component, and by generating the code file of the target interaction page according to the target property of the first display component, the target interaction page can be rendered based on the code file during the operation of the target application, thereby realizing automatic generation of the code file of the target interaction page and rendering and display of the target interaction page, which is beneficial to improving the generation efficiency of the target interaction page and reducing the difficulty of developing the target interaction page.

[0034] In actual applications, the template page of the target template file can be displayed, and the page can be configured based on the template page, so as to generate a corresponding code file based on the configured page.

[0035] Optionally, the developer may select a desired target template file from multiple template files of the project and perform page configuration based on the target template file.

[0036] Optionally, different template files can be configured and generated in advance by different developers based on actual needs. In different template files, the number of template pages and the initial attributes of each display component in the template page are different. Template files can belong to different template types, and the specific division method of template types can be determined according to actual needs. For example, it can be divided according to software type (such as web pages, applications, etc.), or it can be divided according to function type (such as registration function, payment function, drawing function, etc.).

[0037] Specifically, the template file is a visual file, which can be in JSON format or a similar format. When the template file is configured, the page configuration tool can automatically generate a corresponding initial code file based on the initial properties of each display component in the template file. Furthermore, the template file can be stored and managed in the form of an initial code file.

[0038] The target template file can be understood as a template file used to generate a target interactive page. The target template file may include one or more template pages. Each template page may include multiple display components and initial properties of each display component.

[0039] Optionally, the target template file may be selected from a plurality of historical template files, or may be obtained by a developer through configuration based on actual requirements.

[0040] Specifically, a display component can be understood as a page element used to constitute a page, which can display the page content. A display component can also be understood as a plug-in, which can specifically include a text edit box, an arrow component, a carousel display component, a video display component, an animation display component, a dynamic subtitle component, and the like.

[0041] In actual applications, interactive page elements or non-interactive page elements can be displayed in a target interactive page through a display component, thereby realizing generation and rendering of the target interactive page.

[0042] Specifically, the initial attributes may include information such as initial filling content, initial style, and initial layout position of the display component in the template page. Optionally, the initial attributes are obtained based on pre-configuration by a developer or template designer.

[0043] According to one or more optional embodiments of the present specification, displaying a template page of a target template file may include the following steps: In response to an opening operation on a target template file, a template page of the target template file is displayed in a visual editing area of ​​a user interface, wherein the user interface includes an upload control, a toolbar and a visual editing area, and the toolbar integrates multiple types of display components.

[0044] Specifically, the opening operation of the target template file can be understood as an operation of opening the target template file, which may include operations such as double-clicking and dragging to the visual editing area.

[0045] Optionally, the target template file can be saved in the folder of the project in the form of a directory, and the developer can select the target template file to be used and perform an open operation.

[0046] Specifically, the user interface can be understood as the user interface provided by the page configuration tool, which can be used for developers to interact with the front end of the page configuration tool. The user interface can include an upload control, a toolbar, and a visual editing area. Among them, the main function of the upload control is that developers can upload media content through it; the main function of the toolbar is to display the various display components required when editing the page, so that developers can search for the required display components based on the toolbar and add them to the template page; the main function of the visual editing area is to display the template page, so that developers can edit the template page and preview the effect in the visual editing area.

[0047] By applying this embodiment, the template page of the target template file is displayed in the visual editing area of ​​the user interface in response to the open operation of the target template file, so that the developer can edit the template page of the target template file in the visual editing area of ​​the user interface. In addition, the developer can upload media content based on the upload control and can select the display component to be used based on the toolbar, which greatly improves the flexibility of page development and reduces the development difficulty of the developer.

[0048] Step 104: Based on a first editing operation on a first display component among the display components, determine a target attribute of the first display component.

[0049] In actual applications, when displaying a template page of a target template file, the target attribute of the first display component may be determined based on a first editing operation on a first display component among the display components.

[0050] Specifically, the first display component can be understood as a display component that has been edited. The first display component can be a display component that originally exists in the template page, or it can be a display component that is newly added to the template page based on the toolbar. The first editing operation can be understood as an editing operation for the first display component. The target attribute can be understood as information such as the filled content, style, and layout position in the template page after the first display component is edited.

[0051] In an optional embodiment of the present specification, based on the first editing operation on the first display component among the display components, before determining the target attribute of the first display component, the following steps may also be included: In response to a trigger operation on the upload control, the target media content is acquired and displayed in the visual editing area.

[0052] Specifically, the upload control can be understood as a control for uploading media content. The triggering operation can include operations such as clicking and long pressing. The target media content can be understood as the media content uploaded based on the upload control. The target media content can include videos, animations, single pictures, or a group of pictures used to generate a carousel, etc.

[0053] Specifically, the image may be a screenshot of an application or a webpage, or a screenshot of a local area of ​​an application or a webpage, or may be a image designed by a developer.

[0054] In actual applications, developers can trigger the upload control to upload target media content through the upload control. The page configuration tool can respond to the trigger operation on the upload control and obtain and display the target media content in the visual editing area.

[0055] Accordingly, based on the first editing operation on the first display component among the display components, determining the target attribute of the first display component may include: Based on a first editing operation performed on the first display component according to the target media content, a target attribute of the first display component is determined.

[0056] Optionally, the first editing operation performed on the first display component according to the target media content may include: filling the target media content into a filling position specified by the first display component.

[0057] Specifically, the first display component may display its corresponding fill position in the template page.

[0058] In an optional embodiment of the present specification, the filling position can be displayed by a page element such as a text box or a filling box. For example, when the first display component is a picture display component, a video display component, etc., a filling box corresponding to the first display component can be displayed in the template page; and a picture or video can be dragged into the filling box.

[0059] In another optional embodiment of the present specification, a page element such as a text box or a fill box corresponding to the fill position may itself be an upload control; based on a trigger operation on the fill position, the target media content may be directly uploaded and displayed at the fill position.

[0060] Optionally, before or after filling the target media content to the filling position specified by the first display component, the method may further include: displaying a preview effect of the target media content, and editing the target media content according to the preview effect.

[0061] In actual applications, before or after the target media content is filled to the filling position, the target media content can be previewed separately, and the target media content can be modified based on the preview effect. For example, the image can be enlarged, reduced, partially highlighted, text added, etc.; the video frame of the video can also be edited, the animation frame of the animation can be edited, etc.

[0062] By applying this embodiment, the target media content is obtained through the upload control, and the first editing operation is performed on the first display component according to the target media content, so that the visual effect and interactive effect of the page can be enhanced through the externally uploaded target media content; when the target interactive page is a guide page, the guidance value of the guide page can be enhanced and more comprehensive visual assistance can be provided to the user by covering the screenshots, demonstration videos, demonstration animations and other media content of the key page elements.

[0063] According to one or more optional embodiments of the present specification, the initial attributes include initial filling content, initial style and initial layout position, and the first editing operation includes at least one of a content filling operation, a style modification operation and a position adjustment operation.

[0064] Accordingly, based on the first editing operation on the first display component among the display components, determining the target attribute of the first display component may include at least one of the following steps: Based on the content filling operation on the first display component, determine the target filling content of the first display component; Determining a target style of the first display component based on the style modification operation on the first display component; Based on the position adjustment operation for the first display component, a target layout position of the first display component is determined.

[0065] In actual applications, developers can perform editing operations on display components in template pages.

[0066] Optionally, the display component in the template page may be pre-configured in the template page, or may be newly added to the template page by the developer based on the toolbar.

[0067] Specifically, the content filling operation can be understood as an operation of filling the first display component with content.

[0068] Optionally, the filling content may be text content, pictures, videos, animations, etc., which may be determined according to the component type of the first display component. For example, when the first display component is a text edit box, the filling content may be text content; when the first display component is a picture display component, the filling content may be a screenshot; when the first display component is a video display component, the filling content may be a demonstration video.

[0069] Specifically, the style modification operation can be understood as an operation to modify the style of a component. The style of a component can specifically include color, font, border, margin, size, animation effect, etc.

[0070] In actual applications, developers can perform style modification operations on the first display component according to actual needs.

[0071] Specifically, the position adjustment operation can be understood as an operation of adjusting the layout position of the first display component in the template page. The layout position can be specifically represented by coordinates.

[0072] In actual applications, developers can adjust the layout position of the first display component according to actual needs, thereby changing the layout position of the first display component in the template page.

[0073] Optionally, the layout position of the first display component may be adjusted by dragging the first display component, or by inputting updated position coordinates on an editing interface for the first display component.

[0074] By applying this embodiment, by performing any one of the content filling operations, style modification operations and position adjustment operations on the first display component, the display component in the template page can be edited, thereby realizing the design and configuration of the target interactive page based on the template, which can improve the flexibility of the editing operation, facilitate developers to edit the page, and further improve the generation efficiency of the target interactive page.

[0075] Step 106: Generate a code file of a target interactive page according to the target attribute of the first display component, wherein the code file is used to render the target interactive page during the operation of the target application.

[0076] In actual applications, based on determining the target attributes of the first display component based on the first editing operation on the first display component among the display components, a code file of the target interaction page can be generated according to the target attributes of the first display component, so that the target interaction page can be rendered during the operation of the target application based on the code file of the target interaction page.

[0077] Specifically, the target interactive page can be understood as a page obtained based on the template page configuration. The target interactive page is used to interact with the user, thereby helping the user to better use the target application. The target application can be understood as a software product, which can be a mobile application, a desktop application, a web page, etc.

[0078] Specifically, the target interaction page may be a guide page for any function or operation of the target application, and can be used to guide the user to implement the relevant function or operation of the target application through correct operation steps.

[0079] For example, the guide page can be used to help new users quickly get started with the target application, help users understand the basic functions of the target application and the operation process of the basic functions, etc. The guide page can also help old users to have a deeper understanding of the implementation methods of some more complex or advanced functions of the target application. For example, if the target application is a drawing software, a novice guide page can be set for new users to help new users quickly understand the use and location of basic drawing tools; an advanced guide page can also be set for advanced functions in the drawing software to teach users how to use these advanced functions.

[0080] Specifically, the code file of the target interactive page can be pasted into the application code of the target application, so that during the operation of the target application, the target interactive page is rendered and displayed based on the code file of the target interactive page.

[0081] In an optional embodiment of the present specification, generating a code file of a target interactive page according to a target attribute of the first display component may include the following steps: generating a first code corresponding to the first display component according to a target attribute of the first display component; Based on the first code, an initial code file of the target template file is updated to obtain a code file of the target interactive page.

[0082] Optionally, each display component has been pre-implemented with corresponding code by the programmer. Therefore, when editing the display component in the template page, each editing operation can be performed by the built-in code generator of the page configuration tool to convert the target properties into code, thereby updating the initial code file of the target template file.

[0083] Specifically, the target attributes may include the layout position, style, and filling content of the first display component in the template page after the first display component is edited.

[0084] Optionally, a first code corresponding to the first display component may be generated according to the layout position, style and filling content of the first display component in the template page, and an initial code file may be updated based on the first code to obtain a code file of the target interactive page.

[0085] By applying this embodiment, by generating a first code corresponding to the first display component according to the target attribute of the first display component, the corresponding code can be automatically generated based on the target attribute of the first display component, thereby improving the code generation efficiency and thus improving the page rendering and display efficiency; by updating the initial code file of the target template file based on the first code to obtain the code file of the target interactive page, the code file of the target interactive page can be obtained according to the editing operation performed on the target template file, thereby improving the generation efficiency of the code file of the target interactive page.

[0086] In an optional embodiment of the present specification, after generating the first code corresponding to the first display component according to the target attribute of the first display component, the following steps may also be included: Based on the first code, updating the initial code file of the target template file to obtain an intermediate code file, and associating the first code, the first editing operation and the intermediate code file to obtain a first operation record; determining a target attribute of the second display component based on a second editing operation on a second display component among the display components; generating a second code corresponding to the second display component according to the target attribute of the second display component; Based on the second code, the intermediate code file is updated, the second code, the second editing operation and the updated intermediate code file are associated, the second operation record is obtained, and the step of determining the target attribute of the second display component based on the second editing operation for the second display component in each display component is returned to execute until the target template file is edited and the code file of the target interactive page is obtained.

[0087] Specifically, the intermediate code file can be understood as a code file obtained based on the first editing operation. The first editing operation can be understood as a one-step editing operation performed on the first display component. The first operation record is used to record the operation content corresponding to the first editing operation and the intermediate code file obtained after performing the first editing operation. Furthermore, the operation content may specifically include the type of editing operation, such as content filling operation, style modification operation, position adjustment operation, etc.; it may also include detailed operation information corresponding to the editing operation, such as modified style parameters, modified layout position, added filling content, editing operations on filling content, etc.

[0088] In actual applications, for each editing operation performed by the developer, the operation content of the editing operation and the corresponding code file can be recorded to generate a corresponding operation record. The operation record can be used for version management and control of the code file.

[0089] Specifically, the second display component can be understood as a display component in the template page that needs to be edited. The second display component can be a display component other than the first display component in the template page, or it can be the first display component. The second editing operation is an editing operation for the second display component. The second operation record is used to record the operation content corresponding to the second editing operation and the updated intermediate code file obtained after executing the second editing operation.

[0090] It should be noted that, when the second display component is the first display component, the second editing operation and the first editing operation are different editing operations.

[0091] By applying this embodiment, corresponding operation records are generated for each editing operation performed. Based on these operation records, version management and control of code files can be implemented, achieving an effect similar to online file editing, improving the flexibility of file editing and the precise management of file versions.

[0092] According to an optional embodiment of the present specification, after each step of the editing operation is completed, the editing effect corresponding to the editing operation executed this time can be previewed.

[0093] For example, if the content filling operation is performed on the video display component this time, the video effect preview of the filled video can be performed. If the content filling operation is performed on the carousel component this time, the playback effect of the carousel can be previewed.

[0094] According to another optional embodiment of the present specification, after the template page is configured and the code file corresponding to the target interactive page is obtained, the display effect of the entire file can also be previewed.

[0095] Exemplarily, assuming that the target template file includes three template pages, the three configured template pages can be previewed together or one by one. During the preview process, the effects of each display component in the template page can also be previewed.

[0096] In an optional embodiment of the present specification, after the intermediate code file is updated based on the second code, the following steps may also be included: According to the second operation record, roll back the historical intermediate code file.

[0097] Optionally, rolling back the historical intermediate code file according to the second operation record may include: In response to triggering a rollback event for the current intermediate code file, the historical intermediate code file is rolled back according to the second operation record.

[0098] Specifically, the current intermediate code file can be understood as the intermediate code file obtained after the most recent editing operation. The rollback event can be understood as an event for rolling back the editing operation.

[0099] Optionally, the rollback event can be triggered by a developer based on a rollback control, or by a page configuration tool based on preset conditions.

[0100] In actual applications, when a rollback event is triggered, the corresponding second operation record can be determined according to the operation steps to be rolled back, and the second operation record can be rolled back to obtain the historical intermediate code file before the second editing operation corresponding to these second operation records is executed.

[0101] By applying this embodiment, by rolling back the historical intermediate code file according to the second operation record, the rollback operation of the historical version can be implemented based on the operation record, so that when the developer performs an erroneous editing operation or needs to undo the change operation on the page, it can be rolled back to the correct historical version in time, thereby improving the flexibility of the editing operation and reducing the difficulty of page development.

[0102] In an optional embodiment of the present specification, the user can save the current editing progress and obtain the target editing file. The next time the developer edits, he can upload the code file corresponding to the target editing file, so that he can continue editing directly based on the target editing file, or he can roll back the editing operation by reading the operation record of the target editing file.

[0103] Optionally, the page configuration tool can automatically parse the code file corresponding to the target editing file and reproduce the guide content and layout previously set by the developer, thereby realizing the code file import function. The developer can further edit and adjust the imported content and regenerate the corresponding code file to meet actual needs.

[0104] Furthermore, the page configuration tool can also provide a download function, so that developers can save the generated code files locally to facilitate subsequent development and deployment.

[0105] According to one or more optional embodiments of the present specification, after generating the code file of the target interactive page according to the target attribute of the first display component, the following steps may also be included: In the code file of the target interactive page, the tracking point reporting code is inserted into the code corresponding to each display component, wherein the tracking point reporting code is used to report the interactive operation information when triggered, and the interactive operation information is used to optimize the template page.

[0106] Optionally, a tracking point reporting code may be inserted into the generated code file. The insertion position of the tracking point reporting code may be determined according to actual needs.

[0107] Specifically, the interactive operation information may include: the user performs a click operation; the user performs an operation of zooming in or out on a picture; the user performs an input operation, etc. The tracking point reporting code can be understood as a code that will be triggered and report the interactive operation information when the user performs an interactive operation. It can be used to track the user's behavior and collect the interactive operation information.

[0108] In actual applications, the tracking reporting code can be inserted into any display component in the target interactive page, so that the interactive operation information corresponding to the user's interactive operation can be collected when the user uses the target application.

[0109] Furthermore, data analysis may be performed on the interactive operation information to determine the guide content that needs to be optimized, and the template page may be optimized based on the guide content that needs to be optimized.

[0110] By applying this embodiment, by inserting the tracking point reporting code into the code file of the target interactive page for the code corresponding to each display component, it is possible to track user behavior and collect interactive operation information of the interactive operations performed by users on the target interactive page, so that user behavior analysis can be performed based on the interactive operation information, and the page content that needs to be optimized can be determined based on the analysis results, thereby achieving continuous optimization of the template page, which is conducive to obtaining a template file with better guidance effect.

[0111] An embodiment of the present specification provides a method for generating an interactive page, which displays a template page of a target template file, wherein the template page includes multiple display components and initial properties of each display component; based on a first editing operation on a first display component among each display component, determining the target property of the first display component; and generating a code file for a target interactive page according to the target property of the first display component, wherein the code file is used to render the target interactive page during the operation of a target application. By displaying the template page, a first editing operation can be performed on the first display component based on the initial properties of each display component, thereby obtaining the target property of the first display component. By generating the code file of the target interactive page according to the target property of the first display component, the target interactive page can be rendered based on the code file during the operation of the target application, thereby realizing automatic generation of the code file of the target interactive page and rendering and display of the target interactive page, which is beneficial to improving the generation efficiency of the target interactive page and reducing the difficulty of developing the target interactive page.

[0112] The following combination Figure 2 , taking the application of the interactive page generation method provided in this specification in the guide page configuration as an example, the interactive page generation method is further described. Figure 2 FIG. 1 shows a timing diagram of a method for generating an interactive page provided by an embodiment of the present specification. Figure 2 As shown, the method may include the following S202-S226. Figure 2 The steps in the above-mentioned steps 102 to 106 can be cross-referenced with the contents introduced in the above-mentioned steps 102 to 106.

[0113] S202: Execute an opening operation on a target template file.

[0114] In actual applications, developers can select a target template file to be edited from multiple template files and perform an open operation on the target template file.

[0115] S204: Displaying a template page of the target template file in the user interface.

[0116] In actual applications, the front end of the boot page configuration tool can provide a user interface of the tool, and the template page of the target template file can be displayed in the visual editing area of ​​the user interface. The user interface can also include a toolbar and an upload control.

[0117] S206: Execute an upload operation for the target media content.

[0118] In actual applications, developers can perform upload operations on target media content based on the upload control. Furthermore, they can also perform editing operations on the uploaded target media content, such as inserting symbols or pictures into video frames, or enlarging or modifying picture content.

[0119] S208: Displaying the target media content in the template page.

[0120] S210: Execute a first editing operation on a first display component.

[0121] In actual applications, developers can perform at least one of a content filling operation, a style modification operation, and a position adjustment operation on the first display component in the template page.

[0122] S212: Displaying the edited first display component in the template page.

[0123] S214: Record a first operation record corresponding to the first editing operation, and generate a code file for a guide page.

[0124] In actual applications, the code corresponding to the edited first display component can be automatically generated through the built-in code generator of the tool; the tool can also record each editing operation to obtain the operation record.

[0125] S216: Execute a second editing operation on the second display component.

[0126] S218: Displaying the edited second display component in the template page.

[0127] S220: Record a second operation record corresponding to the second editing operation, and update a code file of the guide page.

[0128] S222: Execute a save operation on the page file.

[0129] S224: Send the code file of the boot page to the backend.

[0130] S226: Save the code file of the boot page.

[0131] By applying this embodiment, by displaying the template page of the target template file in the user interface of the configuration tool, it can support developers to edit each display component based on the initial properties of each display component in the template page, thereby realizing the design and development of the boot page and improving the generation efficiency of the boot page.

[0132] See also Figure 3 , Figure 3 FIG. 1 shows a timing diagram of a template page optimization method provided by an embodiment of the present specification. Figure 3 As shown, the method may include the following S302-S310.

[0133] S302: Performing interactive operations on a guide page in an application.

[0134] In actual applications, when using an application, a user can perform interactive operations on a guide page displayed in the application. For example, the interactive operations may include: clicking on a video, clicking on a picture, enlarging a picture, and the like.

[0135] S304: Based on the interactive operation performed by the user, trigger the tracking point reporting code.

[0136] In actual applications, the corresponding tracking point reporting code can be triggered based on the interactive operations performed by the user. The tracking point reporting code is pre-inserted into the code file of the application. The tracking point reporting code can be inserted for different user operations. When the user performs the corresponding operation, the tracking point reporting code can be triggered to report the user's interactive operation information.

[0137] S306: Sending interactive operation information to the guide page configuration tool.

[0138] Optionally, the application may report the interaction operation information corresponding to the interaction operation to a guide page configuration tool; or may report it to a dedicated data analysis platform.

[0139] S308: Perform user behavior analysis based on the collected interactive operation information.

[0140] Optionally, a data analysis function may be integrated into the guide page configuration tool to perform user behavior analysis on various collected interactive operation information to obtain user behavior analysis results.

[0141] S310: Based on the user behavior analysis result, update the template page.

[0142] In actual applications, the user behavior analysis results can be used to determine the guidance content that needs to be updated and provide feedback to developers; developers can further optimize and update the template page.

[0143] By applying this embodiment, by pre-inserting the tracking point reporting code into the code file, when the user performs an operation, the tracking point reporting code can be triggered to report the interactive operation information, thereby collecting various interactive operation data between the user and the application, and determining the guidance content that needs to be optimized through data analysis, and then optimizing and updating the template page in the template.

[0144] Corresponding to the above method embodiment, this specification also provides an embodiment of a device for generating an interactive page. Figure 4 FIG. 1 is a schematic diagram showing a structure of a device for generating an interactive page provided by an embodiment of the present specification. Figure 4 As shown, the device comprises: Display module 402: configured to display a template page of a target template file, wherein the template page includes a plurality of display components and initial properties of each display component.

[0145] The determination module 404 is configured to determine a target attribute of the first display component based on a first editing operation on the first display component among the display components.

[0146] The generating module 406 is configured to generate a code file of a target interactive page according to a target attribute of the first display component, wherein the code file is used to render the target interactive page during the running of the target application.

[0147] Optionally, the display module 402 is further configured to: In response to an opening operation on a target template file, a template page of the target template file is displayed in a visual editing area of ​​a user interface, wherein the user interface includes an upload control, a toolbar and a visual editing area, and the toolbar integrates multiple types of display components.

[0148] Optionally, the display module 402 is further configured to: In response to a trigger operation on the upload control, the target media content is acquired and displayed in the visual editing area.

[0149] Optionally, the determination module 404 is further configured to: Based on a first editing operation performed on the first display component according to the target media content, a target attribute of the first display component is determined.

[0150] Optionally, the initial attributes include initial filling content, initial style and initial layout position, and the first editing operation includes at least one of a content filling operation, a style modification operation and a position adjustment operation; the determination module 404 is further configured to: Based on the content filling operation on the first display component, determine the target filling content of the first display component; Determining a target style of the first display component based on the style modification operation on the first display component; Based on the position adjustment operation for the first display component, a target layout position of the first display component is determined.

[0151] Optionally, the generating module 406 is further configured to: generating a first code corresponding to the first display component according to a target attribute of the first display component; Based on the first code, an initial code file of the target template file is updated to obtain a code file of the target interactive page.

[0152] Optionally, the generating module 406 is further configured to: Based on the first code, updating the initial code file of the target template file to obtain an intermediate code file, and associating the first code, the first editing operation and the intermediate code file to obtain a first operation record; determining a target attribute of the second display component based on a second editing operation on a second display component among the display components; generating a second code corresponding to the second display component according to the target attribute of the second display component; Based on the second code, the intermediate code file is updated, the second code, the second editing operation and the updated intermediate code file are associated, the second operation record is obtained, and the step of determining the target attribute of the second display component based on the second editing operation for the second display component in each display component is returned to execute until the target template file is edited and the code file of the target interactive page is obtained.

[0153] Optionally, the generating module 406 is further configured to: According to the second operation record, roll back the historical intermediate code file.

[0154] Optionally, the interactive page generating device further includes an interactive module configured to: In the code file of the target interactive page, the tracking point reporting code is inserted into the code corresponding to each display component, wherein the tracking point reporting code is used to report the interactive operation information when triggered, and the interactive operation information is used to optimize the template page.

[0155] By applying this embodiment, a template page can be displayed, and a first editing operation can be performed on the first display component based on the initial properties of each display component, thereby obtaining the target properties of the first display component. By generating a code file for the target interaction page according to the target properties of the first display component, the target interaction page can be rendered based on the code file during the operation of the target application, thereby realizing automatic generation of the code file for the target interaction page and rendering and display of the target interaction page, which is beneficial to improving the generation efficiency of the target interaction page and reducing the difficulty of developing the target interaction page.

[0156] The above is a schematic scheme of a device for generating an interactive page of this embodiment. It should be noted that the technical scheme of the device for generating an interactive page and the technical scheme of the method for generating an interactive page belong to the same concept, and the details not described in detail in the technical scheme of the device for generating an interactive page can be found in the description of the technical scheme of the method for generating an interactive page.

[0157] Figure 5 The structure block diagram of a computing device 500 provided according to an embodiment of the present specification is shown. The components of the computing device 500 include but are not limited to a memory 510 and a processor 520. The processor 520 is connected to the memory 510 via a bus 530, and the database 550 is used to store data.

[0158] The computing device 500 also includes an access device 540 that enables the computing device 500 to communicate via one or more networks 560. Examples of these networks include a public switched telephone network (PSTN), a local area network (LAN), a wide area network (WAN), a personal area network (PAN), or a combination of communication networks such as the Internet. The access device 540 may include one or more of any type of network interface (e.g., a network interface card (NIC)) that is wired or wireless, such as an IEEE 802.11 wireless local area network (WLAN) wireless interface, a world-wide interoperability for microwave access (Wi-MAX) interface, an Ethernet interface, a universal serial bus (USB) interface, a cellular network interface, a Bluetooth interface, and a near field communication (NFC).

[0159] In one embodiment of the present specification, the above components of the computing device 500 and Figure 5 Other components not shown in the figure may also be connected to each other, for example, via a bus. It should be understood that Figure 5 The computing device structure block diagram shown is only for the purpose of illustration, and is not intended to limit the scope of this specification. Those skilled in the art can add or replace other components as needed.

[0160] The computing device 500 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., a tablet computer, a personal digital assistant, a laptop computer, a notebook computer, a netbook, etc.), a mobile phone (e.g., a smart phone), a wearable computing device (e.g., a smart watch, smart glasses, etc.), or other types of mobile devices, or a stationary computing device such as a desktop computer or a personal computer (PC). The computing device 500 may also be a mobile or stationary server.

[0161] The processor 520 is used to execute the following computer executable instructions, which, when executed by the processor, implement the steps of the above-mentioned method for generating an interactive page.

[0162] The above is a schematic scheme of a computing device of this embodiment. It should be noted that the technical scheme of the computing device and the technical scheme of the above-mentioned interactive page generation method belong to the same concept, and the details not described in detail in the technical scheme of the computing device can be referred to the description of the technical scheme of the above-mentioned interactive page generation method.

[0163] An embodiment of the present specification further provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the steps of the above-mentioned method for generating an interactive page.

[0164] The above is a schematic scheme of a computer-readable storage medium of this embodiment. It should be noted that the technical scheme of the storage medium and the technical scheme of the above-mentioned method for generating an interactive page belong to the same concept, and the details not described in detail in the technical scheme of the storage medium can be referred to the description of the technical scheme of the above-mentioned method for generating an interactive page.

[0165] An embodiment of the present specification also provides a computer program product, including a computer program / instruction, which implements the steps of the above-mentioned method for generating an interactive page when executed by a processor.

[0166] The above is a schematic scheme of a computer program product of this embodiment. It should be noted that the technical scheme of the computer program product and the technical scheme of the above-mentioned interactive page generation method belong to the same concept, and the details not described in detail in the technical scheme of the computer program product can be found in the description of the technical scheme of the above-mentioned interactive page generation method.

[0167] The above is a description of a specific embodiment of the specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0168] The computer instructions include computer program codes, which may be in source code form, object code form, executable files or some intermediate forms, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc. It should be noted that the content contained in the computer-readable medium may be appropriately increased or decreased according to the requirements of patent practice. For example, in some regions, according to patent practice, computer-readable media do not include electric carrier signals and telecommunication signals.

[0169] It should be noted that, for the above-mentioned method embodiments, for the sake of simplicity of description, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the embodiments of this specification are not limited by the order of the actions described, because according to the embodiments of this specification, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the embodiments of this specification.

[0170] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0171] The preferred embodiments of this specification disclosed above are only used to help explain this specification. The optional embodiments do not describe all the details in detail, nor do they limit the invention to the specific implementation methods described. Obviously, many modifications and changes can be made according to the content of the embodiments of this specification. This specification selects and specifically describes these embodiments in order to better explain the principles and practical applications of the embodiments of this specification, so that technicians in the relevant technical field can understand and use this specification well. This specification is limited only by the claims and their full scope and equivalents.

Claims

1. A method for generating an interactive page, characterized in that: include: Displaying a template page of a target template file, wherein the template page includes a plurality of display components and initial properties of each display component; determining a target attribute of a first display component among the display components based on a first editing operation on the first display component; A code file of a target interactive page is generated according to a target attribute of the first display component, wherein the code file is used to render the target interactive page during the running of the target application.

2. The method according to claim 1, characterized in that The template page displaying the target template file includes: In response to an opening operation on a target template file, a template page of the target template file is displayed in a visual editing area of ​​a user interface, wherein the user interface includes an upload control, a toolbar and the visual editing area, and the toolbar integrates multiple types of display components.

3. The method according to claim 2, characterized in that Before determining the target attribute of the first display component based on the first editing operation on the first display component among the display components, the method further includes: In response to a trigger operation on the upload control, acquiring and displaying target media content in the visual editing area; The determining, based on a first editing operation on a first display component among the display components, a target attribute of the first display component includes: Based on a first editing operation performed on the first display component according to the target media content, a target attribute of the first display component is determined.

4. The method according to claim 1 or 3, characterized in that: The initial attributes include initial filling content, initial style and initial layout position, and the first editing operation includes at least one of a content filling operation, a style modification operation and a position adjustment operation; The determining, based on the first editing operation on the first display component among the display components, the target attribute of the first display component comprises at least one of the following steps: Determining target filling content of the first display component based on a content filling operation on the first display component; Determining a target style of the first display component based on the style modification operation on the first display component; Based on the position adjustment operation on the first display component, a target layout position of the first display component is determined.

5. The method according to claim 1, characterized in that The step of generating a code file of a target interactive page according to the target attribute of the first display component includes: generating a first code corresponding to the first display component according to a target attribute of the first display component; Based on the first code, the initial code file of the target template file is updated to obtain the code file of the target interactive page.

6. The method according to claim 5, characterized in that After generating the first code corresponding to the first display component according to the target attribute of the first display component, the method further includes: Based on the first code, updating the initial code file of the target template file to obtain an intermediate code file, and associating the first code, the first editing operation and the intermediate code file to obtain a first operation record; determining a target attribute of a second display component among the display components based on a second editing operation on the second display component; generating a second code corresponding to the second display component according to the target attribute of the second display component; Based on the second code, the intermediate code file is updated, the second code, the second editing operation and the updated intermediate code file are associated, a second operation record is obtained, and the step of determining the target attribute of the second display component based on the second editing operation on the second display component in each display component is returned to execute until the target template file is edited and the code file of the target interactive page is obtained.

7. The method according to claim 6, characterized in that After the intermediate code file is updated based on the second code, the method further includes: According to the second operation record, roll back the historical intermediate code file.

8. The method according to claim 1, characterized in that After generating the code file of the target interactive page according to the target attribute of the first display component, the method further includes: In the code file of the target interactive page, a point-of-use reporting code is inserted into the code corresponding to each display component, wherein the point-of-use reporting code is used to report interactive operation information when triggered, and the interactive operation information is used to optimize the template page.

9. A device for generating an interactive page, characterized in that: include: A display module, configured to display a template page of a target template file, wherein the template page includes a plurality of display components and initial properties of each display component; a determination module configured to determine a target attribute of a first display component among the display components based on a first editing operation on the first display component; The generation module is configured to generate a code file of a target interaction page according to a target attribute of the first display component, wherein the code file is used to render the target interaction page during the operation of the target application.

10. A computing device, characterized in that: include: Memory and processor; The memory is used to store computer programs / instructions, and the processor is used to execute the computer programs / instructions. When the computer program / instructions are executed by the processor, the steps of the method for generating an interactive page according to any one of claims 1 to 8 are implemented.

11. A computer-readable storage medium, characterized in that: It stores a computer program / instruction, which, when executed by a processor, implements the steps of the method for generating an interactive page as described in any one of claims 1 to 8.

12. A computer program product, characterized in that The method comprises a computer program / instruction, which, when executed by a processor, implements the steps of the method for generating an interactive page as described in any one of claims 1 to 8.

Images