CN117573099A - Method, apparatus and computer-readable storage medium for constructing application program - Google Patents

Method, apparatus and computer-readable storage medium for constructing application program Download PDF

Info

Publication number
CN117573099A
CN117573099A CN202311460730.5A CN202311460730A CN117573099A CN 117573099 A CN117573099 A CN 117573099A CN 202311460730 A CN202311460730 A CN 202311460730A CN 117573099 A CN117573099 A CN 117573099A
Authority
CN
China
Prior art keywords
application program
information
component
style
layout
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311460730.5A
Other languages
Chinese (zh)
Inventor
鲁维
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Inovance Technology Co Ltd
Original Assignee
Shenzhen Inovance Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Inovance Technology Co Ltd filed Critical Shenzhen Inovance Technology Co Ltd
Priority to CN202311460730.5A priority Critical patent/CN117573099A/en
Publication of CN117573099A publication Critical patent/CN117573099A/en
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

The invention discloses a method, equipment and a computer readable storage medium for constructing an application program, wherein the method comprises the following steps: displaying an application program construction interface, wherein the application program construction interface comprises a component selection area, an application program preview area and an attribute setting area, and the component selection area comprises at least one selectable component; responding to the triggering operation for the selectable component, displaying an initial style of the application program in an application program preview area, and displaying attribute setting information corresponding to the target component in an attribute setting area; displaying an application update style in response to an editing operation for the attribute setting information; and generating and outputting a target application program in response to a confirmation operation for the application program update style, wherein the display style of the target application program corresponds to the application program update style. The invention saves the time and cost of application program development.

Description

Method, apparatus and computer-readable storage medium for constructing application program
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a method and apparatus for constructing an application program, and a computer readable storage medium.
Background
Mobile application development typically requires code to be written for each platform independently, meaning that the developer needs to have knowledge of multiple programming languages and technologies.
Development of applications usually requires participation of developers of different operating systems, mobile terminal systems mainly comprise Android and iOS systems, android applications are generally developed by using Java or Kotlin technology, iOS applications are developed by using Objective-C or Swift technology, and therefore, a new language needs to be relearned or developed for developing an application of a different system, resulting in low development efficiency of the application.
Disclosure of Invention
The invention mainly aims to provide a method, equipment and a computer readable storage medium for constructing an application program, and aims to solve the problem of how to improve the development efficiency of the application program.
In order to achieve the above object, the present invention provides a method for constructing an application program, the method for constructing an application program comprising the steps of:
displaying an application program construction interface, wherein the application program construction interface comprises a component selection area, an application program preview area and an attribute setting area, and the component selection area comprises at least one selectable component;
Responding to the triggering operation for the selectable component, displaying an application program initial style in the application program preview area, wherein the application program initial style is generated based on the triggered target component, and displaying attribute setting information corresponding to the target component in the attribute setting area;
displaying an application program update style in response to the editing operation aiming at the attribute setting information, wherein the application program update style is the updated style of the application program initial style;
and generating and outputting a target application program in response to a confirmation operation for the application program update style, wherein the display style of the target application program corresponds to the application program update style.
Optionally, the selectable components include a common component and/or a layout component, and the step of displaying the application initial style in the application preview area in response to a trigger operation for the selectable components includes:
responding to triggering operation for the common components, and displaying the function initial styles corresponding to the common components in the application program preview area; and/or the number of the groups of groups,
And responding to the triggering operation for the layout components, and displaying the initial layout style corresponding to the layout components in the application program preview area.
Optionally, the step of displaying, in the application preview area, the layout initial style corresponding to the layout component in the application in response to the triggering operation for the layout component includes:
responding to the triggering operation for the row layout components, and displaying a row layout initial style corresponding to the row layout components corresponding to the application program in the application program preview area; or,
responding to the triggering operation for the column layout components, and displaying column layout initial styles corresponding to the column layout components corresponding to the application program in the application program preview area; or,
and responding to the triggering operation for the list layout component, and displaying a list layout initial style corresponding to the list layout component corresponding to the application program in the application program preview area.
Optionally, the step of displaying the attribute setting information corresponding to the target component in the attribute setting area includes:
when the selectable component is a container component, attribute setting information corresponding to the container component is displayed in the attribute setting area, wherein the attribute setting information comprises at least one of layout attribute information and size attribute information;
The step of displaying an application update style in response to an editing operation for the attribute setting information includes:
when the layout attribute information comprises static attribute information, responding to editing operation for the layout attribute information, and displaying an update style corresponding to the static attribute information; the static attribute information comprises outer edge information and/or position offset information;
when the size attribute information includes height information, width information, and/or rounded corner information, an update style corresponding to the height information, the width information, and/or the rounded corner information is displayed in response to an editing operation for the size attribute information.
Optionally, the step of displaying the attribute setting information corresponding to the target component in the attribute setting area includes:
when the selectable component is a text component, attribute setting information corresponding to the text component is displayed in the attribute setting area, wherein the attribute setting information comprises at least one of layout attribute information and text attribute information;
the step of displaying an application update style in response to an editing operation for the attribute setting information includes:
When the layout attribute information comprises static attribute information and/or dynamic attribute information, responding to editing operation for the layout attribute information, and displaying an update style corresponding to the static attribute information and/or the dynamic attribute information; the static attribute information comprises outer edge information and/or position offset information, and the dynamic attribute information comprises text variable information;
when the text attribute information includes text style information, text color information and/or text size information, displaying an update style corresponding to the text style information, the text color information and/or the text size information in response to an editing operation for the text attribute information.
Optionally, the triggering operation is a drag operation, and the step of displaying the application initial style in the application preview area in response to the triggering operation for the selectable component includes:
in response to a trigger operation for the selectable component, displaying a drag effect of the selectable component from the component selection area to the application preview area;
and displaying an application initial style in the application preview area when the selectable component is dragged to the application preview area.
Optionally, the step of displaying an application update style in response to an editing operation for the attribute setting information includes:
generating interface update information of an application program based on the triggered target component and the attribute setting information in response to an editing operation for the attribute setting information;
analyzing the interface updating information to determine corresponding component construction logic of the application program;
and generating and displaying an application program update style according to the component construction logic.
Optionally, the step of parsing the interface update information includes:
when the interface updating information comprises dynamic attribute information, obtaining a variable in a preset format based on regular expression matching;
and replacing the variable with corresponding dynamic attribute information.
In order to achieve the above object, the present invention also provides an application program constructing apparatus including a memory, a processor, and an application program constructing program stored in the memory and executable on the processor, the application program constructing program realizing the respective steps of the application program constructing method as described above when being executed by the processor.
To achieve the above object, the present invention also provides a computer-readable storage medium storing a build program of an application program which, when executed by a processor, implements the respective steps of the build method of an application program as described above.
The invention provides a method, equipment and a computer readable storage medium for constructing an application program, which are used for displaying an application program construction interface, responding to triggering operation for selectable components, displaying an application program initial style in an application program preview area, wherein the application program initial style is generated based on the triggered target components, and displaying attribute setting information corresponding to the target components in an attribute setting area; responding to the editing operation aiming at the attribute setting information, displaying an application program updating style, wherein the application program updating style is an updated style of an initial style of the application program; and generating and outputting a target application program in response to a confirmation operation for the application program update style, wherein the display style of the target application program corresponds to the application program update style. The generation and output of the target application program are realized through the application program construction interface, and the selection of the components and the setting of the attribute setting information of the components are realized, so that the development interaction of the application program is flexible and visual, and the application program development is more efficient and convenient through the visual interface, thereby saving the time and cost of the application program development and reducing the development difficulty of the application program.
Drawings
FIG. 1 is a schematic hardware configuration diagram of an application program building device according to an embodiment of the present invention;
FIG. 2 is a flowchart of a first embodiment of a method for constructing an application program according to the present invention;
FIG. 3 is a schematic diagram of an application build interface of the method of building an application of the present invention;
FIG. 4 is a schematic diagram of an application build interface of the method of building an application of the present invention;
FIG. 5 is a schematic diagram of an application build interface of the method of building an application of the present invention;
FIG. 6 is a schematic diagram of an application build interface of the method of building an application of the present invention;
FIG. 7 is a detailed flowchart of step S20 in a second embodiment of the method for constructing an application program according to the present invention;
FIG. 8 is a flowchart illustrating a third embodiment of a method for constructing an application program according to the present invention;
FIG. 9 is a flowchart of a fourth embodiment of a method for constructing an application program according to the present invention;
fig. 10 is a detailed flowchart of step S30 in a fifth embodiment of the method for constructing an application program according to the present invention.
The achievement of the objects, functional features and advantages of the present invention will be further described with reference to the accompanying drawings, in conjunction with the embodiments.
Detailed Description
It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention.
The main solutions of the embodiments of the present invention are: displaying an application program construction interface, and responding to triggering operation for selectable components, displaying an application program initial style in an application program preview area, wherein the application program initial style is generated based on a triggered target component, and displaying attribute setting information corresponding to the target component in an attribute setting area; responding to the editing operation aiming at the attribute setting information, displaying an application program updating style, wherein the application program updating style is an updated style of an initial style of the application program; and generating and outputting a target application program in response to a confirmation operation for the application program update style, wherein the display style of the target application program corresponds to the application program update style. The generation and output of the target application program are realized through the application program construction interface, and the selection of the components and the setting of the attribute setting information of the components are realized, so that the development interaction of the application program is flexible and visual, and the application program development is more efficient and convenient through the visual interface, thereby saving the time and cost of the application program development and reducing the development difficulty of the application program.
As an implementation, the application program building device may be as shown in fig. 1.
The embodiment of the invention relates to construction equipment of an application program, which comprises the following components: a processor 101, such as a CPU, a memory 102, and a communication bus 103. Wherein the communication bus 103 is used to enable connected communication among the components.
The memory 102 may be a high-speed RAM memory or a stable memory (non-volatile memory), such as a disk memory. As shown in fig. 1, a build program of an application program may be included in a memory 102 as one type of computer-readable storage medium; and the processor 101 may be configured to call a build program of an application program stored in the memory 102 and perform the following operations:
displaying an application program construction interface, wherein the application program construction interface comprises a component selection area, an application program preview area and an attribute setting area, and the component selection area comprises at least one selectable component;
responding to the triggering operation for the selectable component, displaying an application program initial style in the application program preview area, wherein the application program initial style is generated based on the triggered target component, and displaying attribute setting information corresponding to the target component in the attribute setting area;
Displaying an application program update style in response to the editing operation aiming at the attribute setting information, wherein the application program update style is the updated style of the application program initial style;
and generating and outputting a target application program in response to a confirmation operation for the application program update style, wherein the display style of the target application program corresponds to the application program update style.
Alternatively, the processor 101 may be configured to call a build program of an application program stored in the memory 102, and perform the following operations:
responding to triggering operation for the common components, and displaying the function initial styles corresponding to the common components in the application program preview area; and/or the number of the groups of groups,
and responding to the triggering operation for the layout components, and displaying the initial layout style corresponding to the layout components in the application program preview area.
Alternatively, the processor 101 may be configured to call a build program of an application program stored in the memory 102, and perform the following operations:
responding to the triggering operation for the row layout components, and displaying a row layout initial style corresponding to the row layout components corresponding to the application program in the application program preview area; or,
Responding to the triggering operation for the column layout components, and displaying column layout initial styles corresponding to the column layout components corresponding to the application program in the application program preview area; or,
and responding to the triggering operation for the list layout component, and displaying a list layout initial style corresponding to the list layout component corresponding to the application program in the application program preview area.
Alternatively, the processor 101 may be configured to call a build program of an application program stored in the memory 102, and perform the following operations:
when the selectable component is a container component, attribute setting information corresponding to the container component is displayed in the attribute setting area, wherein the attribute setting information comprises at least one of layout attribute information and size attribute information;
the step of displaying an application update style in response to an editing operation for the attribute setting information includes:
when the layout attribute information comprises static attribute information, responding to editing operation for the layout attribute information, and displaying an update style corresponding to the static attribute information; the static attribute information comprises outer edge information and/or position offset information;
when the size attribute information includes height information, width information, and/or rounded corner information, an update style corresponding to the height information, the width information, and/or the rounded corner information is displayed in response to an editing operation for the size attribute information.
Alternatively, the processor 101 may be configured to call a build program of an application program stored in the memory 102, and perform the following operations:
when the selectable component is a text component, attribute setting information corresponding to the text component is displayed in the attribute setting area, wherein the attribute setting information comprises at least one of layout attribute information and text attribute information;
the step of displaying an application update style in response to an editing operation for the attribute setting information includes:
when the layout attribute information comprises static attribute information and/or dynamic attribute information, responding to editing operation for the layout attribute information, and displaying an update style corresponding to the static attribute information and/or the dynamic attribute information; the static attribute information comprises outer edge information and/or position offset information, and the dynamic attribute information comprises text variable information;
when the text attribute information includes text style information, text color information and/or text size information, displaying an update style corresponding to the text style information, the text color information and/or the text size information in response to an editing operation for the text attribute information.
Alternatively, the processor 101 may be configured to call a build program of an application program stored in the memory 102, and perform the following operations:
in response to a trigger operation for the selectable component, displaying a drag effect of the selectable component from the component selection area to the application preview area;
and displaying an application initial style in the application preview area when the selectable component is dragged to the application preview area.
Alternatively, the processor 101 may be configured to call a build program of an application program stored in the memory 102, and perform the following operations:
generating interface update information of an application program based on the triggered target component and the attribute setting information in response to an editing operation for the attribute setting information;
analyzing the interface updating information to determine corresponding component construction logic of the application program;
and generating and displaying an application program update style according to the component construction logic.
Alternatively, the processor 101 may be configured to call a build program of an application program stored in the memory 102, and perform the following operations:
when the interface updating information comprises dynamic attribute information, obtaining a variable in a preset format based on regular expression matching;
And replacing the variable with corresponding dynamic attribute information.
Based on the hardware architecture of the above-mentioned application program construction device, an embodiment of the application program construction method of the present invention is presented.
Referring to fig. 2, fig. 2 is a first embodiment of the method for constructing an application program according to the present invention, the method for constructing an application program includes the following steps:
step S10, displaying an application program construction interface, where the application program construction interface includes a component selection area, an application program preview area, and an attribute setting area, and the component selection area includes at least one selectable component.
Optionally, the application is made up of a number of components for implementing specific functions or providing certain services, typically including user interfaces, business logic, data storage, and other supporting functions. Wherein each component is a separate module responsible for performing a particular task or providing a particular function.
Alternatively, as shown in fig. 3, the area a is a component selection area. At least one selectable component is displayed in the component selection area. Alternatively, the selectable components include a common component and a layout component. Wherein commonly used components are used to implement the functionality of the application. For example, common components include text components, container components, picture components, icon components, button components, input box components, switch components, radio button components, and the like. Layout components are components used to make page layouts, typically to build page structures for applications. Through the layout component, page contents can be organized and displayed according to a certain rule and arrangement mode. For example, the layout components include a row layout component, a column layout component, a list layout component, and the like.
Illustratively, the text component is generally used to present text content, support various font, font size, color, typesetting, etc., format settings, and basic text elements such as hyperlinks, lists, etc. The text component supports rich text formats in which multimedia content such as pictures, forms, videos, etc. can be inserted. Under the condition of more texts, the text component can provide searching and screening functions, so that a user can conveniently and quickly locate required information. The text component can support user interaction and manipulation such as clicking on the text to jump to a corresponding page, mouse-over displaying a prompt, and so forth.
Illustratively, a container component refers to a component that is used to package, organize, and manage other components. The container assembly provides a structure of a container or layout for organizing and exposing other assemblies and providing uniform style and behavior. The container component can wrap other components inside to form a nested relationship, thereby realizing the hierarchical structure and the combination function of the components. The container component can manage and process events for multiple sub-components, such as clicks, mouse scrolls, etc., and pass the events to the appropriate component for response. The container components may manage and share state information such that data may be shared between sub-components and synchronization between components is maintained through a state update mechanism.
By way of example, a picture component is a component in front-end development that is used to present image content, can display pictures in a web page or application, and provides some commonly used functions and features, such as loading pictures, sizing pictures, adding picture descriptions, and the like.
By way of example, an icon component is a component in front-end development that is used to present various symbols and graphics, typically in the form of vector graphics. It can be used in a variety of scenarios such as menus, buttons, breadcrumbs, labels, etc., as well as in online or offline documents, applications, desktop software.
Illustratively, the button assembly is used for user interaction, triggering a specific operation or event.
Illustratively, the input box component is configured to receive input information from a user, and may be used in scenes such as form filling, searching, and the like.
Illustratively, the switch component is a component used in front-end development to control the switch state, and is generally used in forms, settings, filtering, and other scenarios. Through the switch assembly, a user may switch between two states, such as turning a function on or off, enabling or disabling an option, etc.
Illustratively, the radio button component is a component in front-end development that is used to provide a set of radio options, typically in forms, filters, etc. scenarios. Through the radio button assembly, the user can select an option from a set of options as his answer or element.
In addition to the usual components shown in fig. 3, other usual components are included, such as a drop down menu component for providing a list of options for selection by the user, typically for screening, sorting, etc. The list component is used to present a large amount of data or content, supporting scrolling. The picture carousel component is used for displaying carousel effects of a plurality of pictures and is commonly used for pages such as advertisements, product display and the like. The modal box assembly is used for popup windows for displaying detailed information, confirmation operations, and the like. The tabbed page assembly is used for multi-tabbed page switching, often to separate different content or functions. The progress bar component is used for displaying the progress of tasks or operations. The chart component is used for visualizing data or statistical results, and is convenient for users to understand and analyze. The navigation bar component provides for hopping among pages for the primary navigation mode of a website or application.
In addition to the layout components shown in FIG. 3, the layout components include other components, such as containers for placing other components, typically with some arrangement or layout rules. The grid layout component is used for arranging page contents in a grid manner, and generally, the properties of row number, column number, cell size and the like can be set. The elastic box layout component is used for arranging page contents according to an elastic box model, and can set various different alignment modes, allocate residual space and other parameters. The responsive layout component is operative to automatically adjust layout style and style according to different screen sizes or device types. The rasterized layout component is used for displaying page contents at different positions and levels and simulating typesetting modes of traditional printed matters. The absolute positioning layout component is used to position the page content according to absolute coordinates, typically requiring manual specification of location and size.
Optionally, as shown in fig. 4, the area B is an application preview area, and the application preview area generates a preview effect of the application based on the selected component, and the application preview area corresponds to the rendering area. Alternatively, when a component is dragged to the application preview area, a preview effect of the application will be generated based on the component.
Alternatively, as shown in fig. 5 or 6, the area C is an attribute setting area in which the attribute setting information of the component is set. Alternatively, when the selectable component is selected in the component selection area, the attribute setting information corresponding to the selected component may be set in the attribute setting area. The attribute setting area displays the attribute settings supported by the current component, and when the attribute settings are performed, the application program preview area also performs corresponding update presentation.
For example, as shown in fig. 5, after the component selection area selects the container component, an attribute setting area corresponding to the container component is displayed, where the attribute setting area includes attribute setting information corresponding to the container component, and the attribute setting information includes layout information, size information, and the like. For example, the layout information includes outer edge information, position offset information, and the like. The dimension information includes height, width, rounded corner information, and the like.
For example, as shown in fig. 6, after the text component is selected by the component selection area, an attribute setting area corresponding to the text component is displayed, wherein the attribute setting area includes attribute setting information corresponding to the text component, and the attribute setting information includes layout information, text attribute information, and the like. Wherein the layout information includes outer edge information, position offset information, and the like. The text attribute information comprises information such as preset style, word weight, text color, word size and the like.
Alternatively, when the attribute setting information of the component includes dynamic attribute information, the value of the dynamic attribute information may be set. The dynamic property setting icon, as shown by the framed icon next to the text in the property setting area in fig. 6, can bind a dynamic value that results only when the page is running on the terminal, called a variable.
In step S20, in response to the triggering operation for the selectable component, an application initial style is displayed in the application preview area, wherein the application initial style is generated based on the triggered target component, and attribute setting information corresponding to the target component is displayed in the attribute setting area.
Optionally, the triggering operation includes a drag operation, a click operation, a long press operation, or a double click operation, but is not limited to the above operation, and the triggering operation for the selectable component is used for selecting the target component.
Optionally, the application initial style is a default appearance style, layout style, and/or functional style, etc. of the application at the time of loading.
Optionally, an initial style of the application is generated based on the triggered target component, and the initial style of the application is displayed in the application preview area. For example, when the target component is a text component, an application initial style is generated based on the text component, and the application initial style is displayed in the application preview area, the application initial style including the text style. Illustratively, when the target component is a row layout component, an application initial style is generated based on the row layout component and displayed in the application preview area, the application initial style including the layout style.
Optionally, in response to a trigger operation for the selectable component, displaying a drag effect of the selectable component from the component selection area to the application preview area; when the selectable component is dragged to the application preview area, the application initial style is displayed in the application preview area.
If the initial position of the mouse is within the preset range of the candidate component, controlling the candidate component based on the preset dragging component and the real-time position of the mouse so as to realize dragging and adsorption of the candidate component; acquiring a release position of a mouse; if the release position is in the edit region, determining that the drag operation of the candidate component is completed.
Optionally, the drag component in the router component is utilized to realize the effect of dragging and adsorbing, meanwhile, the event of the mouse is monitored to realize the effect that the pointer falls in the component range to draw the frame, meanwhile, the component placement rule is defined, and the rule judgment is carried out after the mouse is released to judge whether the component can be placed. When the component editing state is displayed, the GetX technology is utilized to monitor the interface to update again after the attribute is changed, so that the effect of synchronously updating the editing area after the attribute is changed is realized. The selection of the components is realized through the drag operation of the user, the target components are determined, and the efficiency of component selection is improved, so that the development efficiency of the application program is improved.
Step S30, in response to the editing operation for the attribute setting information, displaying an application program update style, wherein the application program update style is an updated style of the application program initial style.
Alternatively, the editing operation includes a drag operation, a click operation, a long press operation, a double click operation, a selection operation, an input operation, and the like, but is not limited to the above operation, and the editing operation for the attribute setting information is used to edit the attribute setting information of the target component.
Optionally, the application update style is an appearance style, a layout style, a functional style, and/or the like, which is updated by the application based on the component.
Alternatively, in response to an editing operation of the attribute setting information for the target component, an application update style is generated and displayed in the application preview area to replace the application initial style. For example, when the target component is a text component, an application update style is generated in response to an editing operation of attribute setting information of the text component, for example, an editing operation of position offset information, set to horizontal offset-1, vertical offset-1, and according to the editing operation of position offset information.
Step S40, in response to the confirmation operation for the application update style, generating and outputting the target application, wherein the display style of the target application corresponds to the application update style.
Alternatively, the confirmation operation includes a drag operation, a click operation, a long press operation, a double click operation, a selection operation, an input operation, and the like, but is not limited to the above operation, and the confirmation operation for the application update style is used to generate and output the target application. After the target application is generated and output, development of the application is completed.
In the technical scheme of the embodiment, the generation and output of the target application program and the selection of the components and the setting of the attribute setting information of the components are realized through the application program construction interface, so that the development interaction of the application program is flexible and visual, and the application program development is more efficient and convenient through the visual interface, thereby saving the time and cost of the application program development and reducing the development difficulty of the application program.
Referring to fig. 7, fig. 7 is a second embodiment of a method for constructing an application program according to the present invention, based on the first embodiment, step S20 includes:
step S21, responding to the triggering operation for the common components, and displaying the function initial style corresponding to the common components in the application program in an application program preview area; and/or the number of the groups of groups,
in step S22, in response to the trigger operation for the layout component, the layout initial style corresponding to the layout component in the application program is displayed in the application program preview area.
In this embodiment, the selectable components include common components and/or layout components.
Optionally, common components are used to implement specific functions, interactions, or data presentation, etc. Common components typically include business logic, user interaction, and data processing functions. Common components are typically stand-alone modules with specific functions or that exhibit specific data. The usual components may receive input, process logic, perform state management, and present the results to the user. For example, buttons, form input boxes, charts, and the like are examples of commonly used components.
Optionally, the layout component is used to define and manage the structure and layout of the user interface. Layout components typically do not directly contain specific functionality or interaction logic, but rather help organize the location and size of other components to achieve a good user interface layout. The layout component can specify the location, size, and arrangement of the sub-components to achieve the desired interface layout effect. For example, common layout components are containers, grid layouts, grid systems, and the like. Because layout components are primarily responsible for the structure and layout of the interface, they have a high reusability. The same layout components may be used multiple times in different pages or layout requirements to achieve a consistent interface style.
Layout components and common components are not strictly limited and sometimes their function and manner of use may be crossed. In practical development, according to project requirements and design principles, layout components and common components can be reasonably selected to realize functions and interface layout.
Optionally, the application initial style includes a function initial style and/or a layout initial style.
Optionally, the function initial style is a default appearance style and/or a function style corresponding to a frequently used component when the application program is loaded, and the like.
Optionally, the layout initial style is a default appearance style and/or layout style corresponding to the layout component when the application program is loaded, and the like.
Optionally, in response to a triggering operation for the row layout component, displaying a row layout initial style corresponding to the row layout component corresponding to the application program in the application program preview area. Optionally, the line layout initial style is a default appearance style and/or layout style corresponding to the line layout component when the application program is loaded, and the like. Illustratively, in response to a trigger operation for the row layout component, the application is layout-adjusted based on the row layout component and the row layout initial style of the application is displayed in the application preview area.
Optionally, in response to a triggering operation for the column layout component, displaying a column layout initial style corresponding to the column layout component corresponding to the application program in the application program preview area. Optionally, the column layout initial style is a default appearance style and/or layout style, etc. corresponding to the column layout component when the application is loaded. Illustratively, in response to a trigger operation for the column layout component, a layout adjustment is made to the application based on the column layout component and a column layout initial style of the application is displayed in the application preview area.
Optionally, in response to a trigger operation for the list layout component, displaying a list layout initial style corresponding to the list layout component corresponding to the application program in the application program preview area. Optionally, the list layout initial style is a default appearance style and/or layout style, etc. corresponding to the list layout component when the application is loaded. Illustratively, in response to a trigger operation for the list layout component, the application is layout-adjusted based on the list layout component and the list layout initial style of the application is displayed in the application preview area.
In the technical scheme of the embodiment, through selecting the layout components, the development interaction of the application program is flexible and visual, the visual interface enables the development of the application program to be more efficient and convenient, the development time and cost of the application program are saved, and the development difficulty of the application program is reduced.
Referring to fig. 8, fig. 8 is a third embodiment of a method for constructing an application program according to the present invention, based on the first or second embodiment, step S20 includes:
step S23, when the selectable component is a container component, attribute setting information corresponding to the container component is displayed in an attribute setting area, wherein the attribute setting information comprises at least one of layout attribute information and size attribute information;
step S30 includes:
step S31, when the layout attribute information comprises static attribute information, responding to the editing operation for the layout attribute information, and displaying an update style corresponding to the static attribute information; the static attribute information comprises outer edge information and/or position offset information;
step S32, when the size attribute information includes height information, width information, and/or rounded corner information, displaying an update style corresponding to the height information, width information, and/or rounded corner information in response to an editing operation for the size attribute information.
Alternatively, as shown in fig. 6, the attribute setting information corresponding to the container component includes layout attribute information and/or size attribute information, and the like. When the layout attribute information includes static attribute information, the static attribute information includes outer edge information and/or position offset information, and an update style corresponding to the static attribute information is displayed in response to an editing operation for the layout attribute information.
Optionally, the attribute setting information includes static attribute information, which is set at the time of component creation and is typically not changed throughout the component lifecycle. These properties are typically used to define the initial state, appearance, and behavior of the component. For example, the static attribute information includes font style, color, margin, size, and the like. Dynamic attribute information is an attribute that may change during component rendering. These properties are typically affected by the state of the application, user input, or other events.
Illustratively, the static attribute information includes style attribute information such as color, font size, font thickness, and the like. The static attribute information includes layout attribute information such as margins, alignment, size constraints, etc. The static attribute information includes appearance attribute information such as background pictures, shadow effects, rounded corners, and the like. Static attribute information includes text attribute information such as text content, text direction, font style, and the like. The static attribute information includes picture attribute information such as a picture address, a filling pattern, and the like.
Alternatively, as shown in fig. 6, when the size attribute information includes height information, width information, and/or rounded corner information, an editing operation for the size attribute information is responded to. Illustratively, the height information is set to 100, the width information is set to 100, and the rounded corner information is set to the preset rounded corner information.
In the technical scheme of the embodiment, the attribute setting information of the component is set, so that the development interaction of the application program is flexible and visual, and the visual interface enables the development of the application program to be more efficient and convenient, thereby saving the development time and cost of the application program and reducing the development difficulty of the application program.
Referring to fig. 9, fig. 9 is a fourth embodiment of a method for constructing an application program according to the present invention, and step S20 includes, based on any one of the first to third embodiments:
step S24, when the selectable component is a text component, attribute setting information corresponding to the text component is displayed in an attribute setting area, wherein the attribute setting information comprises at least one of layout attribute information and text attribute information;
step S30 includes:
step S33, when the layout attribute information comprises static attribute information and/or dynamic attribute information, responding to the editing operation for the layout attribute information, and displaying an update style corresponding to the static attribute information and/or the dynamic attribute information; the static attribute information comprises outer edge information and/or position offset information, and the dynamic attribute information comprises text variable information;
in step S34, when the text attribute information includes text style information, text color information, and/or text size information, an update style corresponding to the text style information, the text color information, and/or the text size information is displayed in response to an editing operation for the text attribute information.
Alternatively, the attribute setting information may be classified into static attribute information and dynamic attribute information. Wherein the dynamic attribute information may be changed by updating the state of the component or using a mechanism such as data binding. For example, the dynamic attribute information includes text content, pictures, whether it is visible, location, and the like.
The static attribute information and the dynamic attribute information together define the appearance and behavior of the component, wherein the static attribute information provides initial values and default styles for the component, and the dynamic attribute information enables the component to interact and change according to the requirements of the application. In the Flutter component, static attribute information is generally set by constructing parameters of functions, while dynamic attribute information is updated by setState () method or other state management mechanism of the component, and by managing the static attribute information and the dynamic attribute information, the component with rich interactivity and flexibility can be constructed.
Illustratively, the dynamic attribute information includes state attribute information such as switch state, selected item, visibility, and the like. The dynamic attribute information includes data attribute information such as list data, values of input boxes, numerical values of sliders, and the like. The dynamic attribute information includes event attribute information such as a button click event, a gesture operation event, a drag end event, and the like. The dynamic attribute information includes conditional attribute information such as whether or not loading is in progress, whether or not an error is displayed, whether or not editable, and the like.
Optionally, when the attribute setting information is static attribute information, determining an attribute value of the attribute setting information as a static value; when the attribute setting information is dynamic attribute information, an attribute value of the attribute setting information is determined to be a dynamic value. Wherein, the static value refers to a value which is determined and fixed at compile time or load time; dynamic values refer to values that can change at run-time according to changes in program logic or external conditions.
In the technical scheme of the embodiment, the attribute setting information of the component is set, so that the development interaction of the application program is flexible and visual, and the visual interface enables the development of the application program to be more efficient and convenient, thereby saving the development time and cost of the application program and reducing the development difficulty of the application program.
Referring to fig. 10, fig. 10 is a fifth embodiment of a method for constructing an application program according to the present invention, and step S30 includes, based on any one of the first to fourth embodiments:
step S35, in response to the editing operation for the attribute setting information, generating interface updating information of the application program based on the triggered target component and the attribute setting information;
step S36, analyzing the interface updating information to determine the corresponding component construction logic of the application program;
Step S37, generating and displaying the application program update style according to the component construction logic.
Optionally, when the interface update information includes dynamic attribute information, obtaining a variable in a preset format based on regular expression matching; and replacing the variable with corresponding dynamic attribute information. When the editing state of the target component is displayed, after the dynamic attribute information is monitored to be changed, the attribute value in the updating information of the interface is updated so as to synchronously update the component effect of the editing area.
Optionally, after the editing of the application program is completed, acquiring a page tree of the page of the application program; and generating interface updating information of the page according to the page tree. The page tree represents a tree structure of a webpage structure and an organization relation, is used for describing father-son relations among various elements in the webpage, and displays constituent parts of the whole webpage in a hierarchical structure mode.
Optionally, the component build logic is build logic for translating the component into a Flutter component. Optionally, the component build logic is a build class of the component, wherein the build class of the component is a design schema for creating and configuring instances of the component object.
Optionally, the interface update information comprises a page JSON structure, wherein the JSON structure comprises component type nodes, component attribute nodes and child nodes. Alternatively, the value type in the generated JSON structure will be automatically determined based on the type of attribute value. Simple data types such as strings, numbers, boolean values, etc., will remain intact. While complex types, such as nested objects or lists, etc., will be transformed in a nested manner. If the attribute value is a custom object, it needs to be ensured that the object implements the toJSON () method so that it is correctly converted to JSON format. Optionally, considering that the attribute of the router component may be dynamic attribute information, if the dynamic attribute information needs to be processed when the JSON structure is generated, corresponding processing may be performed on the current value of the dynamic attribute information, so as to ensure that the generated JSON structure can accurately reflect the current state of the component.
Optionally, determining the component type according to the analysis content of the component type node in the JSON structure; and determining attribute setting information according to the analysis content of the component attribute node in the JSON structure.
Optionally, the component corresponds to a plurality of attributes, rendering is performed according to the currently selected attribute, and the interface effect of each attribute is controlled by the corresponding attribute. After the page is edited, clicking preview, converting from a current page tree, and converting the page into a JSON format, wherein key nodes in the JSON comprise component type nodes, component configuration nodes and child nodes, the component type nodes comprise type nodes, the component configuration nodes comprise args nodes, and the child nodes comprise child nodes or child nodes. The attribute value returns control according to the type of the component and the related attribute.
Optionally, after generating the JSON structure, the page JSON structure is transmitted to the rendering end, the rendering end finds a corresponding component according to the type node, then parses the args node to obtain attribute setting information, and then constructs the component according to the attribute setting information.
When the attribute setting information is dynamic attribute information, the component attribute value is a dynamic value, namely a variable, and when the analysis of the variable is also in args analysis logic, the value wrapped by $ { } is matched with the corresponding value through a regular expression, and the value inside is searched and replaced by service data, so that the process of dynamically binding the value of the component is realized.
In the technical scheme of the embodiment, analysis processing is performed on the interface update information, and corresponding component construction logic of the application program is determined; an application update style is generated and displayed in accordance with the component build logic. By editing and previewing the components of the application program, the development efficiency of the application program is improved.
The present invention also provides an application program constructing apparatus including a memory, a processor, and an application program constructing program stored in the memory and executable on the processor, the application program constructing program realizing the steps of the application program constructing method according to the above embodiment when executed by the processor.
The present invention also provides a computer-readable storage medium storing a build program of an application program which, when executed by a processor, implements the steps of the build method of an application program as described in the above embodiments.
The foregoing embodiment numbers of the present invention are merely for the purpose of description, and do not represent the advantages or disadvantages of the embodiments.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, system, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, system, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, system, article, or apparatus that comprises the element.
From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment system may be implemented by means of software plus necessary general purpose hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a computer readable storage medium (e.g. ROM/RAM, magnetic disk, optical disk) as described above, comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a parking management device, an air conditioner, or a network device, etc.) to execute the system according to the embodiments of the present invention.
The foregoing description is only of the preferred embodiments of the present invention, and is not intended to limit the scope of the invention, but rather is intended to cover any equivalents of the structures or equivalent processes disclosed herein or in the alternative, which may be employed directly or indirectly in other related arts.

Claims (10)

1. The application program construction method is characterized by comprising the following steps:
Displaying an application program construction interface, wherein the application program construction interface comprises a component selection area, an application program preview area and an attribute setting area, and the component selection area comprises at least one selectable component;
responding to the triggering operation for the selectable component, displaying an application program initial style in the application program preview area, wherein the application program initial style is generated based on the triggered target component, and displaying attribute setting information corresponding to the target component in the attribute setting area;
displaying an application program update style in response to the editing operation aiming at the attribute setting information, wherein the application program update style is the updated style of the application program initial style;
and generating and outputting a target application program in response to a confirmation operation for the application program update style, wherein the display style of the target application program corresponds to the application program update style.
2. The method for building an application program according to claim 1, wherein the selectable components include a common component and/or a layout component, and the step of displaying an application initial style in the application preview area in response to a trigger operation for the selectable components includes:
Responding to triggering operation for the common components, and displaying the function initial styles corresponding to the common components in the application program preview area; and/or the number of the groups of groups,
and responding to the triggering operation for the layout components, and displaying the initial layout style corresponding to the layout components in the application program preview area.
3. The method for constructing an application program according to claim 2, wherein the step of displaying the layout initial style corresponding to the layout component in the application program preview area in response to the trigger operation for the layout component comprises:
responding to the triggering operation for the row layout components, and displaying a row layout initial style corresponding to the row layout components corresponding to the application program in the application program preview area; or,
responding to the triggering operation for the column layout components, and displaying column layout initial styles corresponding to the column layout components corresponding to the application program in the application program preview area; or,
and responding to the triggering operation for the list layout component, and displaying a list layout initial style corresponding to the list layout component corresponding to the application program in the application program preview area.
4. The method for constructing an application program according to claim 1, wherein the step of displaying the attribute setting information corresponding to the target component in the attribute setting area includes:
when the selectable component is a container component, attribute setting information corresponding to the container component is displayed in the attribute setting area, wherein the attribute setting information comprises at least one of layout attribute information and size attribute information;
the step of displaying an application update style in response to an editing operation for the attribute setting information includes:
when the layout attribute information comprises static attribute information, responding to editing operation for the layout attribute information, and displaying an update style corresponding to the static attribute information; the static attribute information comprises outer edge information and/or position offset information;
when the size attribute information includes height information, width information, and/or rounded corner information, an update style corresponding to the height information, the width information, and/or the rounded corner information is displayed in response to an editing operation for the size attribute information.
5. The method for constructing an application program according to claim 1, wherein the step of displaying the attribute setting information corresponding to the target component in the attribute setting area includes:
When the selectable component is a text component, attribute setting information corresponding to the text component is displayed in the attribute setting area, wherein the attribute setting information comprises at least one of layout attribute information and text attribute information;
the step of displaying an application update style in response to an editing operation for the attribute setting information includes:
when the layout attribute information comprises static attribute information and/or dynamic attribute information, responding to editing operation for the layout attribute information, and displaying an update style corresponding to the static attribute information and/or the dynamic attribute information; the static attribute information comprises outer edge information and/or position offset information, and the dynamic attribute information comprises text variable information;
when the text attribute information includes text style information, text color information and/or text size information, displaying an update style corresponding to the text style information, the text color information and/or the text size information in response to an editing operation for the text attribute information.
6. The method for building an application program according to claim 1, wherein the trigger operation is a drag operation, and the step of displaying an application program initial style in the application program preview area in response to the trigger operation for the selectable component includes:
In response to a trigger operation for the selectable component, displaying a drag effect of the selectable component from the component selection area to the application preview area;
and displaying an application initial style in the application preview area when the selectable component is dragged to the application preview area.
7. The method of constructing an application program according to claim 1, wherein the step of displaying an application program update style in response to an editing operation for the attribute setting information includes:
generating interface update information of an application program based on the triggered target component and the attribute setting information in response to an editing operation for the attribute setting information;
analyzing the interface updating information to determine corresponding component construction logic of the application program;
and generating and displaying an application program update style according to the component construction logic.
8. The method for constructing an application program according to claim 7, wherein the step of parsing the interface update information includes:
when the interface updating information comprises dynamic attribute information, obtaining a variable in a preset format based on regular expression matching;
And replacing the variable with corresponding dynamic attribute information.
9. An application program construction device, characterized in that the application program construction device comprises a memory, a processor and an application program construction program stored in the memory and executable on the processor, which application program construction program, when being executed by the processor, realizes the steps of the application program construction method according to any one of claims 1-8.
10. A computer-readable storage medium, characterized in that the computer-readable storage medium stores a build program of an application program, which when executed by a processor implements the steps of the method of building an application program according to any of claims 1-8.
CN202311460730.5A 2023-11-03 2023-11-03 Method, apparatus and computer-readable storage medium for constructing application program Pending CN117573099A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311460730.5A CN117573099A (en) 2023-11-03 2023-11-03 Method, apparatus and computer-readable storage medium for constructing application program

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311460730.5A CN117573099A (en) 2023-11-03 2023-11-03 Method, apparatus and computer-readable storage medium for constructing application program

Publications (1)

Publication Number Publication Date
CN117573099A true CN117573099A (en) 2024-02-20

Family

ID=89887234

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311460730.5A Pending CN117573099A (en) 2023-11-03 2023-11-03 Method, apparatus and computer-readable storage medium for constructing application program

Country Status (1)

Country Link
CN (1) CN117573099A (en)

Similar Documents

Publication Publication Date Title
JP7354294B2 (en) System and method for providing responsive editing and display integrating hierarchical fluid components and dynamic layout
Mori et al. Tool support for designing nomadic applications
US11048484B2 (en) Automated responsive grid-based layout design system
US8413070B1 (en) Declarative resizeable list in electronic form
US20060225094A1 (en) Enabling customization and personalization of views in content aggregation frameworks
US20150020006A1 (en) Method and system for creating dynamic browser-based user interface by example
CN107491427A (en) Data sheet processing method and processing device
US20150020004A1 (en) Simplified website creation, configuration, and customization system
WO2013109858A1 (en) Design canvas
US20060225091A1 (en) Customizing and personalizing views in content aggregation frameworks
CN113391808A (en) Page configuration method and device and electronic equipment
US20040133595A1 (en) Generation of persistent document object models
CN113326044A (en) Development method, system and storage medium based on control library
US20060236244A1 (en) Command links
CN117762519A (en) Component management method, device, computer equipment and storage medium
CN110866379B (en) Data Visualization Chart Library System
CN112487330A (en) UI skin changing method, system, device and storage medium based on XML
CN117055987A (en) Webpage display method and device, electronic equipment and computer readable storage medium
CN117573099A (en) Method, apparatus and computer-readable storage medium for constructing application program
CN115543288A (en) Code information generation method, device, equipment and storage medium
CN118170383B (en) Method and equipment for arranging and changing skin based on component assembly man-machine interaction interface
US12099799B2 (en) System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout
CN114594936A (en) Page design method and device, storage medium and computer equipment
Giani et al. A set of languages for context-aware adaptation
CN118210499A (en) Component state setting method and device based on custom component attribute

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination