Page Design Method, Client Device, Readable Medium and Program Product

Abstract

The present invention discloses a page design method, a client device, a readable medium and a program product. The method includes: displaying a page of a client application and at least one variable editing visual module; a target control is displayed on the page, and there is at least one edit box on the variable editing visual module; determining at least one target variable editing visual module selected by the user; in response to an operation triggered by the user, displaying at least one target variable parameter input by the user in the edit box on the at least one target variable editing visual module; associating the target control with the at least one target variable parameter to complete the function design of the target control, so that when the server determines that the user has triggered an operation on the target control on the page, obtaining at least one target variable parameter associated with the target control, and enabling the execution program corresponding to the target control to execute according to the at least one target variable parameter, so as to make a corresponding response on the client. This solution can improve the page development efficiency.

Description

Technical Field

[0001] The present invention relates to the technical field of interface development, and in particular, to a page design method, a client device, a readable medium, and a program product. Background Art

[0002] With the development of intelligent science and technology, various client applications emerge in an endless stream. The development of client applications is inseparable from the editing and development of visual pages (or user interfaces (User Interface, UI)).

[0003] In the process of UI editing and development, using existing page design software, such as the UI editing tools built in applications such as Qt Designer, Android Studio, and XCode, although it can already handle aspects such as the display and layout of UI well, the developed page only shows the initial state of the page and does not have dynamic running functions. That is to say, the running states that various controls (such as buttons, progress bars, texts, etc.) on the page should express when the application runs still need to be implemented by developers through writing program codes, which undoubtedly requires developers to spend a lot of time and effort. Summary of the Invention

[0004] The present invention provides a page design method, a client device, a readable medium, and a program product that solve the above problems or at least partially solve the above problems.

[0005] According to one aspect of the present invention, a page design method is provided, including:

[0006] Providing a design interface;

[0007] On the design interface, displaying a page of a client application and at least one variable editing visual module; wherein, a target control is displayed on the page, and at least one editing box is provided on the variable editing visual module;

[0008] Responding to a selection operation triggered by a user on the at least one variable editing visual module, determining at least one target variable editing visual module selected by the user;

[0009] Responding to an input operation triggered by the user, displaying at least one target variable parameter input by the user in an editing box on the at least one target variable editing visual module;

[0010] Associate the target control with the at least one target variable parameter to complete the function design of the target control, so that when the server determines that the user has triggered an operation on the target control on the page, it can obtain the at least one target variable parameter associated with the target control, and enable the execution program corresponding to the target control to execute according to the at least one target variable parameter, so as to make a corresponding response on the client side.

[0011] According to another aspect of the present invention, there is provided a client device, including a memory, a processor, and a computer program / instructions stored on the memory. When the processor executes the computer program / instructions, the steps of the page design method described in the first aspect above are implemented.

[0012] According to still another aspect of the present invention, there is provided a computer-readable medium, on which a computer program / instructions is stored. When the computer program / instructions is executed by a processor, the steps of the page design method described in the first aspect above are implemented.

[0013] According to still another aspect of the present invention, there is provided a computer program product, including a computer program / instructions. When the computer program / instructions is executed by a processor, the steps of the page design method described in the first aspect above are implemented.

[0014] The beneficial effects of the present invention are as follows: By providing a corresponding design interface, on the design interface, a page of the client application with a target control is displayed, and at least one variable editing visual module with at least one edit box is displayed; and in response to a selection operation triggered by the user on at least one variable editing visual module, after determining at least one target variable editing visual module selected by the user, in response to an input operation triggered by the user, at least one target variable parameter input by the user in the edit box of the at least one target variable editing visual module can be displayed; perform the association operation between the target control and the at least one target variable parameter, and the function design of the target control can be completed, so that when the server determines that the user has triggered the target control on the page, it can obtain at least one variable parameter associated with the target control, and enable the execution program corresponding to the target control to execute according to the at least one variable parameter, so as to make a corresponding response on the client side. Thus, in the entire design process of the function of the target control, the user only needs to perform some simple operations, such as selecting a variable editing visual module, inputting variable parameters, etc., to complete the function design of the target control, without the need for the user to implement it by writing program code, which is beneficial to improving the efficiency of page design and development. Description of the Drawings

[0015] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the accompanying drawings required for the description of the embodiments or the prior art. Obviously, the accompanying drawings in the following description are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other accompanying drawings can be obtained based on these drawings.

[0016] Figure 1a Schematically shows a flowchart of a page design method according to an embodiment of the present invention;

[0017] Figure 1b Schematically shows a schematic diagram of a page editing interface according to an embodiment of the present invention;

[0018] Figure 2a Schematically shows a schematic diagram of an event editing interface according to an embodiment of the present invention;

[0019] Figure 2b Schematically shows a schematic diagram of a page editing interface according to another embodiment of the present invention;

[0020] Figure 2c Schematically shows a schematic diagram of an event editing interface according to yet another embodiment of the present invention;

[0021] Figure 2d Schematically shows a schematic diagram of an event editing interface according to yet another embodiment of the present invention;

[0022] Figure 3 Schematically shows a schematic diagram of a data association interface according to an embodiment of the present invention;

[0023] Figure 4 Schematically shows a schematic diagram of the principle of page design according to an embodiment of the present invention;

[0024] Figure 5 Schematically shows a schematic diagram of the structure of a page design device according to an embodiment of the present invention;

[0025] Figure 6 Schematically shows a schematic diagram of the structure of a client device according to an embodiment of the present invention;

[0026] Figure 7 Schematically shows a schematic diagram of the structure of a computer program product according to an embodiment of the present invention. Detailed implementation manners

[0027] With the development of science and technology, various client applications (such as various game applications, online shopping applications, social networking applications, etc.) emerge in an endless stream, enriching people's lives. The development of client applications is inseparable from the editing, development, and design of visual pages (or user interfaces, user interaction interfaces) (User Interface, UI).

[0028] The editing, development, and design of pages are usually implemented by developers based on corresponding page design software, such as the UI editing tools built into applications like Qt Designer, Android Studio, and XCode. After years of development, these UI editing tools have good convenience and efficiency in handling page display and layout, etc., and can improve the page development efficiency to a certain extent. As a medium for interaction and information exchange between users and the hardware system, the page should be able to run according to the functions set by developers during its entire life cycle to correctly express the corresponding status information. For example, in a game application, the progress bar representing the remaining health of the game character on the page should be able to dynamically and real-time display the remaining health information of the game character. However, the page developed using existing page design software is only the initial state of a page, and the various controls on it (such as text box controls, picture controls, button controls, progress bar controls, etc.) do not have corresponding functional data, so they cannot dynamically and real-time express the corresponding status information during operation. For the functional development of the various controls on the page, it often requires developers to set the corresponding functions of the various controls on the page one by one by writing program code, which undoubtedly requires developers to spend a lot of time and effort.

[0029] For the existing solution of setting corresponding functions for the various controls on the page by writing program code, using some more powerful program editors, such as Visual C++, Android Studio, etc., although some sample code can be generated to guide developers where to add the corresponding functional program code, this only reduces the difficulty of developers writing program code to a certain extent and cannot fundamentally solve the problem that developers need to write program code to set corresponding functions for the various controls on the page. Developers still need to spend a lot of energy and time.

[0030] To solve the above technical problems, the present invention provides a page design method, a client device, and a server device. Through the technical solution provided by the present invention, developers only need to perform some simple operations, such as variable parameter selection, setting some characteristic data corresponding to the variable parameters, etc., to complete the function setting of each control on the page, without the need for developers to write program code, which can effectively improve the page development efficiency.

[0031] To enable those skilled in the art to better understand the solution of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present invention.

[0032] In some processes described in the specification, claims and the above-mentioned accompanying drawings of the present invention, there are multiple operations that appear in a specific order. These operations may not be executed in the order in which they appear in this document or may be executed in parallel. The serial numbers of the operations, such as 101, 102, etc., are only used to distinguish each different operation, and the serial numbers themselves do not represent any execution order. In addition, these processes may include more or fewer operations, and these operations may be executed in sequence or in parallel. It should be noted that the descriptions such as "first" and "second" in this document are used to distinguish different messages, devices, modules, etc., do not represent a sequence, and do not limit that "first" and "second" are of different types. The term "or / and" in the present invention only describes the association relationship of associated objects and indicates that there can be three relationships. For example, A or / and B means that A can exist alone, A and B can exist simultaneously, and B can exist alone. The character " / " in the present invention generally represents an "or" relationship between the associated objects before and after. It should also be noted that the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a commodity or system including a series of elements not only includes those elements, but also includes other elements not explicitly listed, or also includes elements inherent in such a commodity or system. Without further limitation, an element defined by the statement "including one..." does not exclude the existence of another identical element in the commodity or system including the said element. In addition, the following embodiments are only some embodiments of the present invention, rather than all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative efforts belong to the scope of protection of the present invention.

[0033] Figure 1aThe flowchart of the page design method provided by an embodiment of the present invention is shown. This page design method is implemented based on the page design software provided by the present invention. The specific form of this page design software can be a UI editor. The UI editor provides various functional modules such as a variable editing visual module, enabling developers to complete the function settings corresponding to each control on the page through some simple operations such as variable parameter selection and setting of specific feature data corresponding to the variable parameters, thereby completing the development and design of the page. For how to implement the page opening design using the page design software provided by the present invention, refer to the relevant content provided by the embodiments of the present invention below, which will not be elaborated here. It should be noted here that the page design software provided by the present invention is installed on the client device corresponding to the developer. Specifically, the client device can be a movable device such as a personal computer, a tablet computer, a smart phone, a personal digital assistant (PAD), a smart wearable device, or it can also be a fixed device such as a desktop computer or a digital TV, which is not limited here; in addition, in the following text of this embodiment, without special instructions, the users mentioned all refer to the developers who perform UI development and design described above. "User" and "developer" are just different terms used from different perspectives. As Figure 1a shown, the page design method includes:

[0034] 101. Provide a design interface;

[0035] 102. On the design interface, display the page of the client application and at least one variable editing visual module; wherein, a target control is displayed on the page, and there is at least one edit box on the variable editing visual module;

[0036] 103. In response to the selection operation triggered by the user on the at least one variable editing visual module, determine at least one target variable editing visual module selected by the user;

[0037] 104. In response to the input operation triggered by the user, display at least one variable parameter input by the user in the edit box on the at least one target variable editing visual module;

[0038] 105. Associate the target control with the at least one variable parameter to complete the function design of the target control, so that when the server determines that the user triggers the target control on the page, obtain at least one variable parameter associated with the target control, and enable the execution program corresponding to the target control to execute according to the at least one variable parameter, so as to make a corresponding response on the client.

[0039] In specific implementation, the design interface in the above 101 is provided by the page design software (such as a UI editor) on which the present page design method is based. The page design software can provide multiple function interfaces, and these function interfaces can all be referred to as design interfaces. For example, referring to Figure 1b the UI editor shown in Figure 1b , the function units such as "page editing", "event editing", "data association", and "global data" included in the toolbar 110 corresponding to the function module 10 in its menu bar, and the interfaces corresponding to these function units can all be referred to as design interfaces. Figure 1b Specifically, the situation of the interface 100 corresponding to the "page editing" function unit (hereinafter referred to as the "page editing" interface 100) is shown. Different design interfaces generally correspond to different page development and design functions. For example: Figure 1b In the "page editing" interface 100 shown in Figure 1b , it includes a page editing area 1101, a control selection area 1102, a control (or page) attribute display area 1103, etc. Using the multiple controls provided by the control selection area 1102 (such as button controls, picture controls, text box controls, radio box controls, etc. provided under the basic control module), users can complete the preliminary layout design of a page of a client application (such as a game application) in the page editing area 1101; then, based on various function units provided by the control attribute display area 1103 (such as the event editing function unit 11031), enter different design interfaces, and complete the corresponding function development of a control through various functions provided by different design interfaces. For example, users can enter the interface 200 corresponding to "event editing" (hereinafter referred to as the "event editing" interface 200) shown in Figure 2a Figure 2a , and complete the development and design of various "event" functions of the button 01 based on the various functions provided on the "event editing" interface 200. For the specific method of completing the development and design of various "event" functions of the button 01, reference can be made to the relevant content below, and details are not elaborated here. Based on this, users (i.e., the developers mentioned above) can, based on different design interfaces provided by the page design software and for various page development functions provided by different design interfaces, complete the page development and design through some simple operations, such as variable parameter selection, setting of specific characteristic data corresponding to variable parameters, etc. For the specific method of completing the page design, reference can be made to the relevant content below.

[0040] In the above 102, the client application can refer to various application software installed on client devices (such as smart phones, personal computers, notebooks, smart wearable devices, etc.), such as game software, dating software, online shopping software, etc. This embodiment does not limit this. The design interface for displaying the page of the client application can specifically refer to, for example, Figure 1bThe shown "Page Editing" interface 100. The page of the client application displayed on the "Page Editing" interface 100 can be an initial page designed in advance by the user using the page design software provided in the present invention or other types of page design software, or it can also be a preliminary layout design (i.e., the initial page) of a page of the client application completed by the user in the page editing area through function modules such as the control selection area and the page editing area provided on the "Page Editing" interface 100 using the page design software provided in the present invention. Here, the specific source of the page of the client application is not limited. That is to say, there are multiple controls shown on the page of the client application displayed. Currently, the user has only designed the corresponding layout of these multiple controls and the basic attributes (such as control name, shape, etc.) initially displayed, and has not developed and designed the various dynamic function attributes that each control needs to express when the page runs. For example, see Figure 1b As shown, for the page currently displayed on the "Page Editing" interface 100, the user has only initially designed the basic attributes of Button 01 and has not designed the action event that can be triggered when Button 01 is triggered. In specific implementation, the action event can refer to, but is not limited to, when Button 01 is triggered, performing an operation to switch from the current page to another page, or performing an operation to change the text content displayed on another control or itself, etc.

[0041] It should be noted here that: The basic attributes of the above-mentioned controls refer to the attributes related to determining the appearance of the controls. For example, the name, shape, display style, font color, font size, etc. of the controls.

[0042] In the above, the multiple controls shown on the page of the client application displayed can all be regarded as target controls, or one, two, etc. of the multiple controls can also be regarded as target controls, which is not limited here. In specific implementation, the target control is determined by the functions that the user wants each control on the page to express when the page runs. For example, continue to see Figure 1b The page of the client application shown. There is Button 01 shown on this page. If the user wants Button 01 to have the function of switching the current page to the next page when the user triggers Button 01, then Button 01 is the target control; or, if the user wants Button 01 to have the function of changing the text displayed in a text box (not shown in the figure) on the current page when the user triggers Button 01, then Button 01 and the corresponding text box are the target controls. Here, there is no specific limitation on the target control.

[0043] The functions of the above-mentioned controls may refer to the execution functions that the controls have when the page to which the controls belong runs, the functions of triggering the operation of corresponding program codes through "events" and completing responses, etc., which are not limited here. Among them, "events" refer to the responses of controls to operations such as keyboards, mice, and user touches. Generally, users develop and design the "events" of controls according to actual needs to achieve the development and design of the functions of controls. Once an event of a control occurs, the execution of the corresponding event process can be caused.

[0044] Since various functions corresponding to each control are usually implemented through corresponding variable parameters, correspondingly, the status information expressed by each control when the page runs is often the specific characteristic data corresponding to the variable parameters associated with each control. Based on this, the page design software provided by the present invention provides at least one variable editing visual module. A variable editing visual module has at least one edit box. Through the variable editing visual module, the association between the control and the corresponding variable parameters can be completed. For the relevant specific implementation, reference can be made to the relevant content of the following embodiments, which will not be elaborated here.

[0045] In a specific implementable technical solution, the above-mentioned "display at least one variable editing visual module" in 102 may specifically include the following steps:

[0046] 1021. Display a first guiding element for guiding the user to enter the display area of the variable editing visual module;

[0047] 1022. Respond to the user's operation on the first guiding element to display the display area of the variable editing visual module;

[0048] 1023. On the display area of the variable editing visual module, display the at least one variable editing visual module.

[0049] During specific implementation, refer to Figure 1b As shown, the first guiding element 11031 may be specifically displayed on the attribute display area 1103 corresponding to the target control, and / or may also be displayed on the toolbar 110, etc., which is not specifically limited here. After the user triggers an operation on the first guiding element 11031 based on the interaction methods provided by the page design software, such as mouse, keyboard, touch, voice, etc., the page design software will respond to the operation triggered by the user to display the display area of the variable editing visual module, so as to display at least one variable editing visual module on the display area of the variable editing visual module. Figure 1b shows the situation where the corresponding first guiding element 11031 can be displayed on both the attribute display area corresponding to the button 01 and the toolbar 110.

[0050] Specifically, an implementable technical solution for the above-mentioned "responding to the user's operation on the first guiding element to display the variable editing visual module display area" is as follows:

[0051] A11. Respond to the user's operation on the first guiding element and display a function list; at least one event function is displayed in the function list;

[0052] A12. Respond to the selection operation triggered by the user on the at least one event function, and determine at least one target event function selected by the user;

[0053] A13. According to the program logic corresponding to the at least one target event function, display the variable editing visual module display area corresponding to the at least one target event function.

[0054] For example, as shown in Figures 1b to 2b After the user triggers the first guiding element 11031 displayed in the attribute display area 1103 corresponding to the button 01, the page design software responds to the operation triggered by the user and will display the "event editing" interface 200 (as Figure 2a shown). An "event list" is displayed on the "event editing" interface 200, and this "event list" is the function list displayed by the page design software after responding to the operation triggered by the user on the first guiding element. At least one event function is displayed in the function list. For example, "when the player clicks the button", "when the player presses and releases the button", "when the player presses the button", etc.; after the user determines that the function to be set for the button 01 according to actual needs is "when the player clicks the button" and triggers the selection operation on "when the player clicks the button". The UI editor will display the variable editing visual module display area 220 corresponding to "when the player clicks the button" according to the program logic corresponding to the "when the player clicks the button" selected by the user (as Figure 2b shown). Corresponding at least one variable editing visual module 2201 will be displayed on the variable editing visual module display area 220.

[0055] It should be noted that: for the event functions in the "event list" shown in Figure 2a , the user can perform corresponding operations such as addition or deletion, Figure 2a The number of event functions in the "event list" shown in

[0056] is only illustrative and does not represent the specific event functions included in the specific "event list".

[0057] A111. While displaying the function list, display a function editing area; and

[0058] A131. While displaying the display area of the variable editing visual module corresponding to the at least one target event function, an event function visual module corresponding to the at least one target event function is displayed at a corresponding position in the function editing area.

[0059] For example, refer to Figure 2b Continuing with the above example, while the "Event List" is displayed on the "Event Editing" interface 200, a function editing area 210 for editing events is also displayed; and after the user triggers a selection operation for an event function in the "Event List", for example, after the user clicks on the event function "When the player clicks the button" in the "Event List", when the page design software displays the corresponding display area 220 of the variable editing visual module according to the event function "When the player clicks the button", an event function visual module 2101a corresponding to the event function "When the player clicks the button" is also displayed on the function editing area 210. The event function visual module 2101a integrates the code program corresponding to the execution of the event process "When the player clicks the button", so that when the event "When the player clicks the button" of button 01 occurs, the corresponding event process can be executed.

[0060] From the above, it can also be obtained that each event function displayed in the function list will have its own corresponding event function visual module 2101, so that in the future, the user can complete the function development and design of the corresponding control by simply combining the event function visual module 2101 with the corresponding variable editing visual module 2201.

[0061] In specific implementation, the event function visual module 2101 has at least one insertion position. For example, Figure 2b the event function visual module 2101a corresponding to the event function "When the player clicks the button" shown in, which has one insertion position (i.e., the blank area in the middle of the event function visual module 2101a is the insertion position). The insertion position on the event function visual module 2101 is reserved for the variable editing visual module, so as to facilitate the association and combination of the event function visual module 2101 with the corresponding variable editing visual module 2201 through the insertion position, so as to realize the event function design corresponding to the event function visual module 2101, and thus complete the function development and design of a corresponding control.

[0062] Based on this, in a feasible technical solution, the above 103 "determine at least one target variable editing visual module selected by the user" may specifically include the following steps:

[0063] 1031. In response to a dragging operation triggered by the user on at least one variable editing visual module displayed in the variable editing visual module display area, the variable editing visual module dragged by the user to the at least one insertion position is used as the target variable editing visual module.

[0064] Figure 2c It shows a situation where the user drags the variable editing visual module 2201a to the insertion position of the event function visual module 2101a according to actual needs to associate and combine the variable editing visual module 2201a with the event function visual module 2101a. In this case, following the example described above related to Figures 1b to 2b The function that the user wants to set for the button 01 is: when the player triggers the button 01 on the page, an operation to change the specific feature data corresponding to a variable parameter will be executed. Among them, the variable parameter is determined according to the operation triggered by the user on the variable editing visual module 2201a. Specifically, during implementation, the user can select the corresponding target variable parameter from the at least one displayed variable parameter and input it into the editing box of the variable editing visual module 2201a to establish an association relationship between the variable editing visual module 2201a and the corresponding target variable parameter, thereby establishing an association between the event function visual module 2101a and the corresponding target variable parameter, and realizing that when a user triggers the button 01, the execution program corresponding to the button 01 can execute the behavior of changing the specific value corresponding to the target variable parameter according to the corresponding target variable parameter.

[0065] It should be noted that when the event function visual module 2101a and the variable editing visual module 2201a are associated and combined, the program codes integrated in each of them will also establish a logical association to form an execution program corresponding to the function set by the user for the button 01 (that is, when the player triggers the button 01, the button 01 executes the operation of changing the specific value of a variable parameter).

[0066] Based on the above content, the above 104 "In response to an input operation triggered by the user, display at least one variable parameter input by the user in the editing box on the at least one target variable editing visual module" may at least include the following steps:

[0067] 1041. In response to an input operation triggered by the user, display at least one variable parameter available for selection;

[0068] 1042. Determine at least one target variable parameter selected by the user, and input the at least one target variable parameter into the corresponding editing box on the at least one target variable editing visual module and display it.

[0069] In specific implementation, the above "input" does not only refer to keyboard typing input, but is a broad concept, which can be an input method such as a user clicking on corresponding elements. Based on this, for the above steps 1041 and 1042, the specific implementation process can be: as shown in Figure 2b and Figure 2c shown, a third guiding element S1 for guiding the user to enter the variable parameter selection interface can be displayed on the edit box of the variable editing visual module. After the user triggers a click operation on the third guiding element S1, the page design software responds to the user's operation on the third guiding element S1, and can display for the user a variable parameter display interface 300 as shown in Figure 2d . Multiple variable parameters (such as variable 1, variable 2, etc.) will be displayed on the variable parameter selection interface 300 for the user to select. As shown in Figure 2d shown, after the user triggers a selection operation on variable 1 among the multiple variable parameters displayed on the variable parameter display interface 300 for the variable editing visual module 2201a, the page design software will input the content corresponding to variable 1, such as "001: variable 1, initial value 'Button'", into the edit box K1 of the variable editing visual module 2201a to establish an association between button 01 and variable 1; among them, "001" represents the global container (i.e., global variable) to which variable 1 belongs. At the same time, the user can also input the specific characteristic data corresponding to the change of variable 1 into the edit box K2 according to the actual situation. So far, the function of "when the player triggers button 01, button 01 executes to change the specific characteristic data of a variable parameter" set for button 01 is developed.

[0070] It should be noted that the variable parameters displayed on the above variable selection interface 300 can all be added independently by the user based on their own required variable parameters through the custom variable addition function provided by the variable selection interface 300, or a part of the variable parameters can be added independently by the user, and another part of the variable parameters are pre-built in the page design software, etc., which is not limited here. In addition to displaying the variable selection interface 300 by responding to the user's operation on the third guiding element S1, the page design software can also display the variable selection interface 300 by responding to the operation triggered by the user on the "global data" function unit on the toolbar 110 (such as Figures 1b to 2b shown), which is not limited here.

[0071] Above, it mainly introduced how to edit the "event" function of the control so that when the corresponding event of the control is triggered, the corresponding event function can be executed. In some embodiments, in addition to requiring the control to have some event functions, the user may also require the control to have some other functions, such as requiring the control to have functions of displaying some text data, picture data, etc. during operation. Specifically, as shown inFigure 1b As shown, when the user needs to press button 01 during the initial operation, it has the function of displaying the text "Button" thereon. For such a function, the user only needs to directly configure the corresponding variable parameters for the control to establish the association between the control and the variable parameters. For the setting of other functions for the control described above except for the "event" function, the UI editor provided in this embodiment also displays a fourth guiding element 11032 (such as Figure 1b shown) in the property display area 1103 corresponding to the control, so as to directly establish the association relationship between the control and the variable parameters.

[0072] For example, referring to Figure 1b shown, assume that the user wants button 01 to display the text "Button" on itself during operation. Then when the user sets this function of button 01, the user can trigger the fourth guiding element 11032 displayed on the property display area 1103 of button 01. After the page design software responds to the operation triggered by the user on the fourth guiding element 11032, it will display a variable parameter selection interface 300 (such as Figure 2d shown). After that, in response to at least one variable parameter selection operation displayed on the variable parameter selection interface by the user, the association relationship between button 01 and the target variable parameter selected by the user (such as Figure 2d the variable 1 shown) can be established. Combining the "event" function set for button 01 above, the functions set for button 01 are as follows: when button 01 initially operates, the text "Button" will be displayed on button 01; when the player triggers button 01, button 01 will perform the operation of changing the text "Button" displayed thereon to "Date1". In summary, it can be seen that for the above setting of the function of button 01, the user only needs to perform some simple selection or setting operations, such as the selection of the variable editing visual module and variable parameters, and the setting of the specific characteristic data corresponding to the variable parameters, to be able to complete the setting of the corresponding variable parameters for button 01; then, based on the "data association" function unit 11033 provided by the page design software (such as Figure 1b , Figures 2a to 2b shown), the association between the control and the corresponding variable parameters can be established to finally complete the function design of the target control. That is, the method provided in this embodiment further includes: on the design interface, there is also a second guiding element for guiding the user to perform data association; and

[0073] One feasible technical solution for "associating the target control with the at least one variable parameter" in the above 105 is:

[0074] 1051. In response to an operation triggered by the user on the second guiding element, associate the target control with the at least one variable parameter.

[0075] In specific implementation, refer to Figure 1b 、 Figures 2a to 2b As shown, the above-mentioned second guiding element is Figure 1b 、 Figures 2a to 2b the "data association" function unit 11033 provided by the toolbar 110 shown in. After the user sets the corresponding target variable parameters for the target control through the above steps 101 to 105, and triggers an operation on the "data association" function unit 11033, the page design software responds to the user's operation on the "data association" function unit, and the association between the target control and the corresponding target variable parameter can be completed, thereby completing the function design of the target control.

[0076] In summary, the technical solution provided in this embodiment, by providing a corresponding design interface, on the design interface, displays a page of the client application showing the target control, and displays at least one variable editing visual module having at least one edit box; and in response to a selection operation triggered by the user on the at least one variable editing visual module, after determining at least one target variable editing visual module selected by the user, by responding to the operation triggered by the user, at least one target variable parameter input by the user in the edit box on the at least one target variable editing visual module can be displayed; execute the association operation between the target control and the at least one target variable parameter, and the function design of the target control can be completed, so as to facilitate the server to obtain at least one variable parameter associated with the target control when it determines that the user has triggered the target control on the page, and enable the execution program corresponding to the target control to execute according to the at least one variable parameter, so as to make a corresponding response on the client. It can be seen that during the entire design process of the function of the target control, the user only needs to perform some simple operations, such as selecting the variable editing visual module, inputting variable parameters, etc., to complete the function design of the target control, and does not require the user to implement it by writing program code, which is beneficial to improving the efficiency of page design and development.

[0077] After completing the association between the target control and the corresponding at least one variable parameter, in order for the user to clearly and intuitively understand the association relationship established by themselves between each control on the page and the corresponding variable parameter, and when the user discovers that there is an error in the association relationship, be able to modify it in a more simple way. Further, the method provided in this embodiment further includes the following steps:

[0078] 106. After the association between the target control and the at least one target variable parameter is completed, display an association connection diagram of the target control and the at least one target variable parameter;

[0079] 107. In response to an operation triggered by a user on the associated connection diagram, update the associated connection diagram to update the association between the target control and the at least one target variable parameter.

[0080] Wherein, the associated connection diagram includes a target control information item, at least one target variable parameter information item, and the association relationship between the target control and the at least one target variable parameter; the operations on the associated connection diagram include at least one of the following: an operation of adding a new target control to the target control information item, an operation of adding an association relationship between a new target control and the at least one target variable parameter, and an operation of deleting or modifying an existing association relationship between the target control and the at least one target variable parameter.

[0081] In practical applications, an associated connection diagram (also known as a relationship diagram) is a chart used to analyze complex relationships such as "cause and effect" and "purpose and means" between things. An associated connection diagram usually includes at least one connection group, and a connection group is composed of two connection items and a connection line for connecting the two connection items. In other words, the connection line in the connection group is used to represent the association logic between the two connection items. Through the associated connection diagram, a large number of association logics between multiple different connection items can be represented, facilitating the user's analysis of the association logics between multiple different connection items. Based on this,

[0082] In this embodiment, after the target control is associated with the at least one target variable parameter, an associated connection diagram corresponding to the association result between the target variable and the at least one target variable parameter will also be generated (such as Figure 3as shown), and display an associated connection diagram to visually show the association between the target control and at least one target variable parameter in the associated connection diagram. In specific implementation, the generated associated connection diagram may include, but is not limited to, target control information items, at least one target variable parameter information item, and a connection line for characterizing the association between the target control and at least one target variable parameter. Among them, the target control information item may specifically include, but is not limited to, the page to which the target control belongs, the corresponding display functions (such as displaying text, pictures, etc.) and event functions (such as a player triggering the target control, a player long-pressing the target control) of the target control, and so on; the target variable parameter information item may include, but is not limited to, the container to which the target variable belongs, the name of the target variable parameter, etc. The target variable parameter is usually used to represent the functional logic of the target control. Therefore, the connection line between the target control and at least one target variable parameter shown in the associated connection diagram is also the connection line between the function corresponding to the target control and the corresponding target variable parameter, so as to show the corresponding relationship between the function corresponding to the target control and the target variable parameter established, so that the user can intuitively understand the variable parameters configured for the various functions of each control on the page when setting various functions for each control on the page based on the displayed associated connection diagram of the target control and at least one target variable parameter, which is convenient for the user to check and analyze errors. Further, the target control information item, the target variable parameter information item, and the connection line in the associated connection diagram are all operable, which is convenient for the user to directly operate on the associated connection diagram to quickly correct the incorrect association when it is found through the associated connection diagram that there is an incorrect association between the target control and the target variable parameter.

[0083] Based on the above content, take a specific example: Continuing with the example in 105 above, see Figure 3 as shown, after the user triggers an operation on the "Data Association" module 11033 (see Figure 1b , Figures 2a to 2b as shown), an association diagram 310 of button 01 and at least one target variable parameter (i.e., variable 1 shown in the figure) can be displayed on the interface 300 corresponding to the "Data Association" module. In this association diagram 310, there are displayed a button 01 information item 3101 corresponding to button 01, a variable 1 information item 3102 corresponding to the variable 1 associated with button 01, and the association between button 01 and variable 1. Specifically, as Figure 3 shown, the button 01 information item 3101 may include, but is not limited to, the interface to which button 01 belongs, the corresponding display function 31011 of button 01 (such as displaying text), the corresponding event function 31012 of button 01 (such as a player triggering the button), etc., and the variable 1 information item 3102 may include, but is not limited to, the container to which variable 1 belongs (such as variable 1 belongs to global variable 001), etc.; Figure 3 The dotted line shown in "It is used to represent the association between button 01 and variable 1, for example: the dotted line between the display text 31011 corresponding to button 01 and variable 1" ", indicating that the display text 31011 corresponding to button 01 is associated with variable 1, that is, when button 01 is initially run, the initial parameter value corresponding to variable 1 (such as "Button") will be displayed on it; the dotted line " ", the event function 31012 corresponding to button 01 is associated with variable 1. In other words, when the event function 31012 corresponding to button 01 occurs, button 01 will execute a corresponding behavior set for variable 1, such as changing the text content displayed on itself.

[0084] It can be seen that users are based on Figure 3 The relationship diagram between button 01 and variable 1 shown in FIG. 1 can intuitively clarify the functional development design of button 01. In addition, if the user finds that there is an error in the functional design of button 01 based on the relationship diagram, he can also correct it by changing the dotted line. "Perform deletion or modification operations to correct errors. For example, if the user finds that the displayed text 31011 corresponding to button 01 and variable 1 have an incorrect association, the user can directly delete the dotted line between the displayed text 31011 corresponding to button 01 and variable 1 to remove the association between the displayed text 31011 and variable 1 to correct the incorrect association. Afterwards, if the user wants to establish a new association between the displayed text 31011 and other variables, he can also directly Figure 3 The "Add Variable" function (not shown in the figure) is triggered in the variable information item 3102 of the method shown in the figure, a new variable is directly added, and a dotted line is directly drawn between the display text 31011 and the added new variable parameter (not shown in the figure) by means such as drawing a line to establish an association relationship between the display text 31011 and the new variable parameter; of course, the dotted line between the original display text 31011 and variable 1 can also be directly operated to change the connection dotted line between the display text 31011 and variable 1 to the connection dotted line between the display text 31011 and the new variable parameter, etc., which is not limited here. Furthermore, the user can also directly trigger the "Add Control" function in the button 01 information item 31012 to add a new control to the page 1 to which the button 01 belongs, and at the same time, the association between the new control and the corresponding variable parameter can be established by means such as drawing a line for the new control, etc., which is not limited here.

[0085] Here are some additional explanations: Figure 3In the associated connection diagram showing the association between the target control and at least one target variable parameter, only the two-level association architecture of the target control and the target variable parameter is shown. In practical applications, the hierarchical architecture of the associated connection diagram can be further deepened. For example, a level of characteristic data corresponding to the target variable parameter can be added to the associated connection diagram to show the association between the target variable parameter and the corresponding characteristic data in the associated connection diagram, and so on. Figure 3 The levels in the associated connection diagram shown are only illustrative and do not limit the levels in the actual associated connection diagram. In addition, in different application scenarios, the specific content that the variable parameter can refer to will also be partially different. For example, when developing and designing the functions of the target control on the page corresponding to a game application, a variable parameter usually can represent objects such as characters, props, or skills. Correspondingly, the characteristic data corresponding to the variable parameter can be, for example, attack, blood volume, commodity price, etc. The specific variable parameter can be determined according to the actual application scenario and is not limited here.

[0086] Further, the method provided in this embodiment further includes the following steps:

[0087] 108. In response to the operation triggered by the user, based on the association result between the target control and the at least one target variable parameter, generate the association relationship information between the target control and the at least one target variable parameter;

[0088] 109. Send the association relationship information to the server so that the server can perform corresponding processing based on the association relationship information, and can make corresponding responses when it is determined that the user has triggered an operation on the target control on the page based on the processing result.

[0089] Specifically, after the association between the target control and at least one target variable parameter is completed, the user can trigger corresponding function modules on the design interface, such as "publish", "local test", "mobile test" and other function modules, to complete the generation of the association relationship information between the target control and at least one target variable parameter based on the association result between the target control and at least one target variable parameter, and send the association relationship information to the server so that the server can perform corresponding processing based on the relationship information, and can make corresponding responses when it is determined based on the processing result that the user has triggered an operation on the target control on the corresponding page in the subsequent process. Regarding how the server performs corresponding processing based on the received association relationship information and how to make corresponding responses when it is determined that the user has triggered an operation on the target control on the page based on the processing result, reference can be made to the relevant content of the following embodiments and will not be elaborated here.

[0090] It should be noted that in practical applications, not only the server needs to save the association relationship information corresponding to the target control and at least one target variable parameter, but the page design software also needs to save the association relationship information locally. This is to ensure that when the user re-opens the page design software to continue developing and designing the same page, the previously edited data content can still be restored to its original state.

[0091] Generally, when the association relationship information is saved on different devices, the corresponding saving formats will also vary. Correspondingly, the specific functions of the association relationship information on different devices also differ. In specific implementation, when the page design software saves the information of each target control and the corresponding at least one target variable parameter on the page, it can adopt but is not limited to the Json (JavaScript Object Notation) data interaction format. Specifically, based on the association result of the target control and at least one target variable parameter, the corresponding Json format association relationship information is generated for saving in the page design software. The content included in the corresponding association relationship information is as follows:

[0092] Target control information, which can correspond to the target control information item in the association connection diagram corresponding to the target control and at least one target variable parameter (such as Figure 3 the button 01 control information item 3101 shown in Figure 1b ). Specifically, referring to the following part of the content related to the target control information included in the association relationship information in Json format, the target control information may include but is not limited to the page identifier (uiDialogId) to which the control belongs, the list identifier (uiListControlId) to which the control belongs, the control identifier (uiControlId), the control function identifier (uiControlPropertyIndex), the coordinate information (not shown), etc. Among them, if the value of uiListControlId is not empty, it means that the target control is a sub-control in the list control; conversely, if the value of uiListControlId is empty, it means that the target control is a basic control in the page design software (such as a UI editor). As shown in Figure 1b , the basic controls include Figure 1b the text control, button control, radio box control, picture control shown in Figure 1bThe shown button 01 enables it to have two functions of displaying text data and picture data on itself. Then, the above two functions can be distinguished by uiControlPropertyIndex. For example, when uiControlPropertyIndex is 0, it can represent the function of displaying text data corresponding to button 01; when uiControlPropertyIndex is 1, it can represent the function of displaying picture data corresponding to button 01, and so on. There is no limitation here. The coordinate information contained in the target control information can represent the position of the target control in the associated connection diagram as shown in Figure 3 so that when triggering the "data association" function unit for the same page next time, the target control information item can still be displayed at the original position before.

[0093] { "uiControlId": "cd553f",

[0094] "uiControlPropertyIndex": 1,

[0095] "uiDialogId": "d#087d9",

[0096] "uiListControlId": " ",}

[0097] { "uiControlId":

[0098] [{ "uiControlId": "cd553f", "uiControlPropertyIndex":0},

[0099] { "uiControlId": "cd553f", "uiControlPropertyIndex": 1}, ]}

[0100] The target variable parameter information can correspond to the target variable parameter information item in the associated connection diagram corresponding to the target control and at least one target variable parameter (such as Figure 3 the target variable parameter information item 3102 corresponding to the shown button 01). Specifically, see the following partial content related to the target variable parameter information included in the association relationship information in the shown Json format:

[0101] { "variantId": "736e8f",

[0102] "variantIndex": -1,

[0103] "variantParam": "s8##15"}

[0104] The target variable parameter information may include, but is not limited to: variable parameter identifier (variantId), the serial number of the variable parameter in the variable parameter list to which it belongs (variantIndex), the additional information of the variable parameter (variantParam), and coordinate information (not shown), etc. Among them, if the value corresponding to variantIndex is -1, it means the values corresponding to all variable parameters in the variable parameter list to which the target variable parameter belongs. In this case, if it is applied to a scenario associated with a list control, it means that each variable parameter in the variable parameter list to which the target variable parameter belongs has a one-to-one corresponding association with each sub-control in the corresponding control list; variantParam represents the additional information of the variable parameter, which is invalid for simple variables (such as variable 1 and variable 2 shown in Figure 2d ), and for complex variables (such as variable parameters storing characters, items, skills, etc. in games), this value represents the specific characteristic data of these complex variable parameters; in addition, the coordinate information contained in the target variable parameter information can indicate the position of the target variable in the association connection diagram shown in Figure 3 so that when the "data association" function unit is triggered for the same page next time, the target variable parameter information item can still be displayed at the original position before.

[0105] The association information (or called connection information) can represent a connection line between a target control and a corresponding target variable parameter in the association connection diagram shown in Figure 3 . The association information includes the identifier corresponding to the target control and the identifier corresponding to the corresponding target variable parameter. By establishing the correspondence between the identifier corresponding to the target control and the identifier corresponding to the target variable parameter, the association relationship between the target control and the corresponding at least one target variable parameter is established. Specifically, when implemented, the identifier corresponding to a target control is composed of uiDialogId, uiListControlId, uiControlId, and uiControlPropertyIndex, and the identifier of a target variable parameter is composed of variantId, variantIndex, and variantParam.

[0106] For the format of the association relationship information stored in the server and the specific content that can be included in the association relationship information, refer to the content and format of the association relationship information stored in the page design software introduced above, and no specific elaboration will be made here. It should be noted that: the association relationship information stored in the server may not include coordinate information content such as target controls and target variable parameters.

[0107] Furthermore, in some embodiments, the page design software needs to generate association relationship information that conforms to the client storage format based on the association result between the target control and at least one target variable parameter, so that the client can establish index information such as the target control and at least one target variable parameter based on the association relationship information, so that when the response result sent by the server is received, the client can make corresponding response processing based on the index information and the response result to realize the interaction among the page design software, the server and the client.

[0108] The client mentioned above may refer to the client corresponding to the user who is currently developing and designing the page, or it may refer to the client corresponding to other users, and there is no limitation here. For example, when the user who is currently developing and designing the page completes the functional development and design of the target control on the page, and performs functional testing on the local client, then in this application scenario, the client mentioned above refers to the client corresponding to the user who is developing and designing the page. For another example, after the user who is developing and designing the page completes the functional development and design of the target control on a page, he publishes it to other user clients, then the client mentioned above refers to the client corresponding to other users.

[0109] For the specific implementation of how the client establishes corresponding index information based on the association relationship information, please refer to the illustrative description below of how to enable the server and the client to exchange information after completing the functional development and design of the target control on the page, so that each control on the application page can express the relevant content in a specific instance of the status information that the developer and designer want it to achieve in real time. The details will not be repeated here.

[0110] The above content mainly introduces how users can complete the functional design of each target control on the page through the page design software provided by the present invention. After the functional design of each target control on the page is completed, it is usually necessary to apply it to the actual application. That is to say, it is necessary to ensure that during the operation of the application page, through the information interaction between the client and the server, each control on the application page can express the status information that the developer wants it to achieve in real time, so that the page development and design can be finally completed. In view of this, the following Figure 4 , specifically introduces a specific example of information interaction between a server and a client, so that each control on an application page can express the status information that the developer and designer want it to achieve in real time. Specifically,

[0111] See also Figure 4As shown, after the second user completes the function design of each target control on the application page through the page design software on the second user client 410, and sends the association relationship information between each target control on the generated application page and at least one target variable to the server 420 and the first user client 430 respectively, the server 420 can determine the identifiers corresponding to at least one target variable parameter based on the received association relationship information of the target control and at least one target variable parameter, and establish a data set of characteristic data corresponding to at least one target variable parameter; synchronize the data set and the identifiers corresponding to at least one target variable parameter to the first user client 430, so that the first user client 430 establishes index information based on the data set, the association relationship information, and the identifiers corresponding to the target variable parameters. Specifically, the process of the first user client 430 establishing index information based on the data set, the association relationship information, and the identifiers corresponding to the target variable parameters is as follows:

[0112] Based on the identifiers corresponding to at least one target variable parameter received from the server 420, the first user client 430 can first find the target controls associated with the at least one target variable parameter from the saved association relationship information, and then find the characteristic data corresponding to the at least one target variable parameter from the data set sent by the server 420; afterwards, for the convenience of query, the corresponding index information can be established based on the found characteristic data corresponding to the at least one target variable parameter, the identifiers corresponding to the target variable parameters, and the identifiers corresponding to the target controls associated with the at least one target variable parameter. Among them, the index information includes at least one group of data pairs, and each data pair includes a first data and a second data; the first data is composed of the identifier corresponding to a target variable parameter and the characteristic data corresponding to the target variable parameter, and the second data is composed of the identifier corresponding to the target control associated with the target variable parameter. Specifically, the formats corresponding to the first data (denoted as IndexKey) and the second data (denoted as IndexValue) can be, but are not limited to, the formats shown below:

[0113] IndexKey=VariantId_VariantIndex_VariantParam;

[0114] IndexValue=uiDialogId_uiListControlId_uiControlId_uiControlPropertyIndex;

[0115] Correspondingly, the format of the established index information (IndexTable) can be as follows:

[0116] IndexTable={ [IndexKey1, IndexValue1],

[0117] [IndexKey2, IndexValue2], …}

[0118] Regarding the specific meanings corresponding to each character field such as VariantId, VariantInde, VariantParam, uiDialogId, uiListControlId, uiControlId, and uiControlPropertyIndex in the format content corresponding to the first data and the second data shown above, reference may be made to the relevant content above.

[0119] When the server 420 detects a change in a target variable parameter, it can also perform corresponding processing operations, and send the identifier corresponding to the changed target variable parameter and the characteristic data corresponding to the changed target variable parameter (i.e., the specific values shown in Figure 4 to the first user client 430. The first user client 430 then, based on the identifier corresponding to the received target variable parameter, reversely looks up in the index information for the control used to express the corresponding specific value, and then performs the operation of expressing the received characteristic data through this control.

[0120] It should be noted here that: Figure 4 the respective corresponding user types of the first user client 430 and the second user client 410 shown in are the first user and the second user respectively. Here, the first user may refer to the application user, and the second user may refer to the developer and designer of the application page. For example, in the scenario where the developer and designer of the application page completes the function design of the target control on the page and then publishes the application page for other users to use, at this time, the first user refers to the application user, and the second user refers to the application developer and designer. Of course, in some other embodiments, both the first user and the second user may also refer to the developer and designer of the application page. For example, when the developer and designer completes the function design of the target control on the page and conducts local function testing on the designed target control function, in this scenario, both the first user and the second user refer to the developer and designer of the application page. Figure 4 The specific user types corresponding to the first user and the second user in are determined according to the actual situation, and the specific user types corresponding to the first user and the second user are not limited here. When both the first user and the second user refer to the developer and designer of the application page, the first user client 430 and the second user client 410 can be the same client device, and the client device can be, but is not limited to, a personal computer, a smart phone, a tablet computer, etc. Figure 4 The server 420 in can be, but is not limited to, a single server, a server cluster, a cloud server, etc.

[0121] Each component embodiment of the present invention described above may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art should understand that a microprocessor or a digital signal processor (DSP) may be used in practice to implement some or all of the functions of some or all of the components in the page design method according to the embodiments of the present invention. The present invention may also be implemented as a program / instructions (e.g., computer programs / instructions and computer program products) of a device or apparatus for performing part or all of the methods described herein. Such programs / instructions for implementing the present invention may be stored on a computer-readable medium, or may exist in the form of one or more signals, such signals may be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0122] Computer-readable media include both permanent and non-permanent, removable and non-removable media implemented by any method or technology for information storage. The information may be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette tapes, magnetic disk storage, quantum memory, graphene-based storage media, or other magnetic storage devices, or any other non-transmission media that can be used to store information that can be accessed by a computing device.

[0123] Figure 5 A page design device that can implement the page design method according to the present invention is schematically shown. Specifically, the page setting device includes: a providing module 510, a display module 520, a response module 530, and an association module 540; wherein,

[0124] The providing module 510 is configured to provide a design interface;

[0125] The display module 520 is configured to display a page of a client application and at least one variable editing visual module on the design interface; wherein, a target control is displayed on the page, and at least one edit box is provided on the variable editing visual module;

[0126] A response module 530, configured to determine at least one target variable editing visual module selected by the user in response to a selection operation triggered by the user on the at least one variable editing visual module; and, in response to an input operation triggered by the user, display at least one target variable parameter input by the user in an editing box on the at least one target variable editing visual module.

[0127] An association module 540, configured to associate the target control with the at least one target variable parameter, complete the function design of the target control, so that when the server determines that the user has triggered an operation on the target control on the page, obtain at least one target variable parameter associated with the target control, and enable the execution program corresponding to the target control to execute according to the at least one target variable parameter, so as to make a corresponding response on the client side.

[0128] It should be noted here that: for the content not detailed in each step of the device provided in this embodiment, reference may be made to the corresponding content in the above-mentioned embodiments, and details will not be repeated here. In addition, in addition to the above-mentioned steps, the information device provided in this embodiment may also include other parts or all of the steps in the above-mentioned embodiments. For specific reference, see the corresponding content in the above-mentioned embodiments, and details will not be repeated here.

[0129] Figure 6 Schematically shown is a client device that can implement the page design method according to the present invention. The client device / system includes a processor 610 and a computer-readable medium in the form of a memory 620. The memory 620 is an example of a computer-readable medium, which has a storage space 630 for storing computer programs / instructions 631. When the computer programs / instructions 631 are executed by the processor 610, each step in the page design method described above can be implemented.

[0130] Correspondingly, an embodiment of the present invention further provides a computer-readable medium, on which computer programs / instructions are stored, and when the computer programs / instructions are executed by a processor, the steps or functions of the page design method provided in the above-mentioned embodiments are implemented.

[0131] Figure 7 Schematically shown is a block diagram of a computer program product that implements the method according to the present invention. The computer program product includes computer programs / instructions 710, and when the computer programs / instructions 710 are executed by a processor such as Figure 6 the processor 610 shown, each step in the page design method described above can be implemented.

[0132] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement it without creative efforts.

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

[0134] 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 them; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A page design method, comprising: Providing a design interface; On the design interface, displaying a page of a client application and a function list; wherein, at least one event function is displayed in the function list, and a target control is displayed on the page; Determining a target event function selected by a user from the at least one event function; Displaying a variable editing visual module display area and an event function visual module corresponding to the target event function; wherein, at least one variable editing visual module is displayed in the variable editing visual module display area, and at least one edit box is provided on the variable editing visual module; the event function visual module has at least one insertion position reserved for the variable editing visual module; In response to a dragging operation triggered by the user on the at least one variable editing visual module, determining the variable editing visual module dragged by the user to the at least one insertion position as the target variable editing visual module selected by the user; In response to an input operation triggered by the user, displaying at least one target variable parameter input by the user in the edit box on the target variable editing visual module; Associating the target control with the at least one target variable parameter to complete the function design of the target control, so that when the server determines that the user has triggered an operation on the target control on the page, obtaining the at least one target variable parameter associated with the target control, and enabling the execution program corresponding to the target control to execute according to the at least one target variable parameter, so as to make a corresponding response on the client; Displaying an association connection diagram of the target control and the at least one target variable parameter; In response to an operation performed by the user on the association connection diagram, synchronizing the association relationship information of the target control and the target variable parameter modified by the operation to the server, so that the service can perform corresponding processing based on the modified association relationship information; Wherein, the operation includes adding a new control and / or variable parameter through an add function element on the association connection diagram.

2. The method according to claim 1, wherein displaying the function list comprises: Displaying a first guiding element for guiding the user to enter the variable editing visual module display area; In response to an operation by the user on the first guiding element, displaying the function list.

3. The method according to claim 2, wherein determining a target event function selected by a user from at least one event function comprises: In response to a selection operation triggered by the user on at least one event function in the function list, determining the at least one target event function selected by the user; And, displaying the variable editing visual module display area corresponding to the target event function, comprising: Displaying the variable editing visual module display area corresponding to the at least one target event function according to the program logic corresponding to the at least one target event function.

4. The method according to claim 3, further comprising: While displaying the function list, displaying a function editing area; And While displaying the variable editing visual module display area corresponding to at least one of the target event functions, at a corresponding position in the function editing area, display at least one event function visual module corresponding to the target event function.

5. The method according to any one of claims 2 to 4, in response to the input operation triggered by the user, displaying at least one target variable parameter input by the user in an edit box on the target variable editing visual module, at least including: In response to the input operation triggered by the user, display at least one variable parameter available for selection; Determine at least one target variable parameter selected by the user, and input the at least one target variable parameter into a corresponding edit box on the at least one target variable editing visual module and display it.

6. The method according to claim 5, further comprising: On the design interface, also display a second guiding element for guiding the user to perform data association; And Associating the target control with the at least one target variable parameter includes: In response to an operation triggered by the user on the second guiding element, associate the target control with the at least one target variable parameter.

7. The method according to claim 6, further including: After the association between the target control and the at least one target variable parameter is completed, trigger the display of an association connection diagram of the target control and the at least one target variable parameter; In response to an operation triggered by the user on the association connection diagram, update the association connection diagram to update the association between the target control and the at least one target variable parameter; Wherein, the association connection diagram includes a target control information item, at least one target variable parameter information item, and an association relationship between the target control and the at least one target variable parameter; the operations on the association connection diagram include at least one of the following: an operation of adding a new target control to the target control information item, an operation of adding an association relationship between a new target control and the at least one target variable parameter, an operation of deleting or modifying an existing association relationship between the target control and the at least one target variable parameter.

8. The method according to claim 6 or 7, further including: Based on the association result between the target control and the at least one target variable parameter, generate association relationship information between the target control and the at least one target variable parameter; Send the association relationship information to the server, so that the server makes corresponding processing based on the association relationship information, and makes a corresponding response when determining that the user has triggered an operation on the target control on the page based on the processing result.

9. The method according to claim 8, further including: Send the association relationship information to the client, so that the client establishes index information corresponding to the target control and the at least one target variable parameter based on the association relationship information, and makes a corresponding response processing on the client based on the index information and the response result when receiving the response result sent by the server.

10. A client device includes a memory, a processor, and computer programs / instructions stored on the memory. When the processor executes the computer programs / instructions, the steps of the page design method according to any one of claims 1-9 are implemented.

11. A computer-readable medium has computer programs / instructions stored thereon. When the computer programs / instructions are executed by a processor, the steps of the page design method according to any one of claims 1-9 are implemented.

12. A computer program product includes computer programs / instructions. When the computer programs / instructions are executed by a processor, the steps of the page design method according to any one of claims 1-9 are implemented.

Images