CN113821295A - Mobile financial application development method and device based on component library - Google Patents
Mobile financial application development method and device based on component library Download PDFInfo
- Publication number
- CN113821295A CN113821295A CN202111180202.5A CN202111180202A CN113821295A CN 113821295 A CN113821295 A CN 113821295A CN 202111180202 A CN202111180202 A CN 202111180202A CN 113821295 A CN113821295 A CN 113821295A
- Authority
- CN
- China
- Prior art keywords
- component
- mobile financial
- financial application
- developed
- library
- 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
Links
- 238000011161 development Methods 0.000 title claims abstract description 49
- 238000000034 method Methods 0.000 title claims abstract description 38
- 230000003993 interaction Effects 0.000 claims abstract description 43
- 238000013461 design Methods 0.000 claims abstract description 31
- 230000002452 interceptive effect Effects 0.000 claims abstract description 20
- 230000009471 action Effects 0.000 claims description 27
- 238000004590 computer program Methods 0.000 claims description 12
- 238000012790 confirmation Methods 0.000 claims description 10
- 230000006870 function Effects 0.000 claims description 10
- 239000000725 suspension Substances 0.000 claims description 5
- 230000010354 integration Effects 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 14
- 230000000694 effects Effects 0.000 description 10
- 230000004044 response Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 239000003086 colorant Substances 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 230000001815 facial effect Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000000873 masking effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a mobile financial application development method and a device based on a component library, relating to the technical field of finance, wherein the method comprises the following steps: acquiring user interface design information of a mobile financial application to be developed, wherein the user interface design information comprises various page elements and interactive actions to be required; calling various page elements and components of interactive actions to be required from a pre-constructed component library according to user interface design information of the mobile financial application to be developed; and generating various user interaction pages contained in the mobile financial application to be developed according to the called components. The invention can increase the code reuse rate and improve the application development efficiency.
Description
Technical Field
The invention relates to the technical field of finance, in particular to a mobile financial application development method and device based on a component library.
Background
This section is intended to provide a background or context to the embodiments of the invention that are recited in the claims. The description herein is not admitted to be prior art by inclusion in this section.
In order to improve the development efficiency of software application products, the development process of bank mobile applications is often realized by means of a mainstream open source UI framework, and the following problems exist: the open source UI framework belongs to a universal UI framework and has no special component required by the financial industry scene; secondly, the design of the open source UI framework is seriously homogenized; the styles of the components designed for the right-angle screen are not consistent when the components are applied to the round-angle screen; fourthly, the secondary development work based on the open source component is very complicated and has poor flexibility.
In view of the above problems, no effective solution has been proposed.
Disclosure of Invention
The embodiment of the invention provides a mobile financial application development method based on a component library, which is used for solving the technical problems that in the prior art, the style of a user interface is similar, a large amount of customized development work is required and the style of the financial field is not conductive when a mobile program is developed by an open source UI framework, and comprises the following steps: acquiring user interface design information of the mobile financial application to be developed, wherein the user interface design information comprises various page elements and interaction actions required by the mobile financial application to be developed; calling various pages and components of interactive action required by the mobile financial application to be developed from a pre-constructed component library according to the user interface design information of the mobile financial application to be developed; and generating various user interaction pages contained in the mobile financial application to be developed according to the called components.
The embodiment of the invention also provides a mobile financial application development device based on a component library, which is used for solving the technical problems of low development efficiency and poor user interface effect in the prior art of developing mobile financial application programs by means of an open source UI framework, and comprises the following components: the system comprises an application information acquisition module, a display module and a display module, wherein the application information acquisition module is used for acquiring user interface design information of the mobile financial application to be developed, and the user interface design information comprises various page elements and interaction actions required by the mobile financial application to be developed; the component library calling module is used for calling various page elements and components of interactive actions required by the mobile financial application to be developed from a pre-constructed component library according to the user interface design information of the mobile financial application to be developed; and the application page generation module is used for generating various user interaction pages contained in the mobile financial application to be developed according to the called component.
The embodiment of the invention also provides computer equipment for solving the technical problems of low development efficiency and poor user interface effect in the prior art of developing the mobile financial application program by means of an open source UI framework.
The embodiment of the invention also provides a computer readable storage medium, which is used for solving the technical problems of low development efficiency and poor user interface effect in the prior art of developing the mobile financial application program by means of the open source UI framework.
According to the mobile financial application development method, device, computer equipment and computer readable storage medium based on the component library, after the user interface design information of the mobile financial application to be developed is obtained, various page elements and interactive actions required by the mobile financial application to be developed are called from the pre-constructed component library according to various page elements and interactive actions required by the mobile financial application to be developed and contained in the user interface design information, and various user interactive pages contained in the mobile financial application to be developed are generated according to the called components.
Compared with the technical scheme of developing the mobile financial application program by means of the open source UI framework in the prior art, the embodiment of the invention has the advantages that the application developer utilizes various components in the component library to develop the financial scene application by creating the component library for developing the mobile financial application, the code reuse rate can be greatly increased, the application development efficiency is improved, and the various components in the component library can meet the requirements of a right-angle screen and a round-angle screen by designing component parameters.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts. In the drawings:
FIG. 1 is a flowchart of a method for developing a mobile financial application based on a component library according to an embodiment of the present invention;
FIG. 2 is a flowchart of an alternative component library-based mobile financial application development method in an embodiment of the present invention;
FIG. 3 is a diagram of an apparatus for developing a mobile financial application based on a component library according to an embodiment of the present invention;
FIG. 4 is a diagram of an alternative component library-based mobile financial application development apparatus according to an embodiment of the present invention;
fig. 5 is a schematic diagram of a computer device according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention more apparent, the embodiments of the present invention are further described in detail below with reference to the accompanying drawings. The exemplary embodiments and descriptions of the present invention are provided to explain the present invention, but not to limit the present invention.
Currently, the mainstream Mobile open-source UI frameworks (e.g., ant Mobile, WEUI, MD Design) are all based on right-angle screens, and are not fully utilized for circular-angle screens. And the open source UI frameworks lack components for special requirements of scenes in the financial field and need a large amount of secondary development work.
In the above application scenario, an embodiment of the present invention provides a mobile financial application development method based on a component library, and fig. 1 is a flowchart of a mobile financial application development method based on a component library provided in an embodiment of the present invention, and as shown in fig. 1, the method includes the following steps:
s101, obtaining user interface design information of the mobile financial application to be developed, wherein the user interface design information comprises various page elements and interaction actions required by the mobile financial application to be developed.
It should be noted that the mobile financial application to be developed in the embodiment of the present invention may be any mobile financial application, for example, an application such as a mobile banking client. Because the mobile financial application to be developed usually comprises a plurality of user interaction pages, and each user interaction page comprises various page elements and interaction actions required by the mobile financial application to be developed, in order to realize the purpose of quickly developing the mobile financial application, in the process of developing the mobile financial application to be developed, various user interaction pages included in the mobile financial application to be developed can be quickly generated according to various page elements and interaction action components required by the mobile financial application to be developed.
And S102, calling various page elements and components of interactive action required by the mobile financial application to be developed from a pre-constructed component library according to the user interface design information of the mobile financial application to be developed.
It should be noted that the component library is a component library created in advance for developing mobile financial applications, so that an application developer develops financial applications by using various components included in the component library, thereby greatly increasing the code reuse rate and improving the application development efficiency.
S103, generating various user interaction pages contained in the mobile financial application to be developed according to the called components.
Because the embodiment of the invention is based on the development of financial application of various components contained in the component library, the components in the component library can meet the requirements of a right-angle screen and a round-angle screen by designing the parameters of the components.
In one embodiment, before executing S103, the method for developing a mobile financial application based on a component library provided in an embodiment of the present invention further includes the following steps: acquiring equipment screen information for displaying a mobile financial application to be developed; in this embodiment, in S103, various user interaction pages included in the mobile financial application to be developed may be generated according to the called component and device screen information.
It should be noted that the device screen information obtained in the above embodiment may at least include screen size information, and whether a rounded screen or a right-angle screen is adopted by a device to be currently developed for mobile financial application is determined according to the screen size information, so that an application page suitable for corresponding screen display can be generated, and a better display effect can be obtained.
In one embodiment, before invoking various page elements and interactive components required by the mobile financial application to be developed from the pre-constructed component library according to the user interface design information of the mobile financial application to be developed, as shown in fig. 2, the mobile financial application development method based on the component library provided in the embodiment of the present invention further includes the following steps:
s100, creating a component library, wherein the component library comprises: and various page elements and components of interaction actions required by the mobile financial application to be developed corresponding to the various application scenes.
It should be noted that, in the embodiment of the present invention, in the specific implementation, for different mobile financial scenarios, components suitable for various page elements and interaction in the corresponding mobile financial scenario may be configured and placed in the component library.
Optionally, the component library created in the embodiment of the present invention at least includes the following types of components: the system comprises a basic component, an SVG component, a popup component, an integration interaction component, an animation component, a touch action component and a custom service scene component; wherein, basic unit includes: the system comprises a skeleton page, an input component, a typesetting component, a sliding frame component, a list component, a navigation bar component, a search bar component, a label component, a side sliding menu component and a lower right corner functional menu component; the SVG component includes: the system comprises a pop-up Tab component, a sliding selection frame component, an SVG animation component and an SVG icon component; the pop-up type component comprises: the system comprises an expandable popup component, a three-layer card type popup component, a double-layer shutter switching popup component, a function prompting suspension popup component, a protocol confirmation dialog box component and a common confirmation dialog box component; integrating the interaction class component comprises: integrating an interaction button assembly; the animation class component includes: a panel animation component and a character animation component; the touch action class component comprises: a long press event component, a slide event component; the user-defined service scene class component comprises: bank card subassembly, card pile selection subassembly.
As can be seen from the above, in the embodiment of the present invention, a component library for developing a mobile financial application is created, and in terms of design, an automatic zoom matching type screen adaptation mode is adopted. The codes, styles and actions of all components are designed autonomously, and the components have the maximum compatibility and adaptability to different creatives.
The financial application in the embodiment of the invention can be but is not limited to bank application, and for a bank application development scene, a mobile component which is matched for use can be designed during specific implementation, and the mobile component covers basic input, facial, typesetting, animation, SVG, touch action, popup and other types of components so as to cover all component elements required by the mobile development scene, unify the development style of a mobile terminal and multiplex codes to the maximum extent. In specific implementation, the method can be realized through a style library module and an ES6 component library module, wherein the style library module provides accurate size, color, position, animation effect parameters and the like for the whole component library; the ES6 component library module defines in detail the appearance, actions, feedback, etc. of the individual components based on the style library module.
According to the mobile financial application development method based on the component library provided by the embodiment of the invention, a bank mobile UI component library can be created, and further, the bank application development method based on the bank mobile UI component library is provided, which specifically comprises the following steps:
1) and building a development environment and copying into a bank mobile UI component library.
2) And establishing a page as required, and introducing all page elements, interactive actions, individual elements and the like required in the development process from a bank mobile UI component library to realize code reuse to the maximum extent.
3) And (4) developing and testing the mobile application in the background of the API server.
By the bank application development method based on the bank mobile UI component library, provided by the embodiment of the invention, the development speed of the bank mobile application program can be greatly improved, the interface design standard is unified, and a large amount of interactive actions are provided.
In the following, the respective components provided in the embodiments of the present invention are explained as follows:
1) basic assembly
Skeleton page: before the page body content is not fully loaded.
A common input component: and the universal component receives attribute settings of different themes, colors, functions, typesetting and the like. Including various input elements such as Button, Switch, Checkbox, InputBox, Textarea, Radiobutton, Select, etc.
Thirdly, typesetting components: and various common app formats such as main and auxiliary titles, explanatory characters, remark characters, grids, intervals, information level comparison, color comparison, styles and the like which are preset are discharged through component presetting. The method comprises paragraph typesetting, single-line functional words, single-line titles, double-line annotated words, display type numbers, personal information display board type, two-dimensional code receipt format and the like.
Fourthly, sliding frame: and carrying out pull-down, refreshing and additional sliding frames. Accommodating lists, region blocks, etc. beyond the contents of the page. To prevent page distortion, native sliding events and native slider bars are masked.
List component: the presentation data includes customized options such as icons, descriptions, subtitles, response animations, category titles, and the like.
Sixthly, a navigation bar component and a search bar component: navigation bars and search bars can be set for associated actions, display icons, display modes (light, dark, with or without borders).
Seventh, a label assembly: a multi-function label assembly that supports different positions, functional modes, colors, etc.
Eighthly, side sliding menu single component: the component is generally used on the home page, the main content is dragged to display a sideslip menu, and the main content is shrunk.
Ninthly, lower right corner functional menu component: in the normal state, the small semi-transparent icon floats at the lower right corner, and can be expanded by clicking.
2) SVG subassembly:
(ii) pop-up Tab component: drawing an accurate geometric figure panel through SVG, automatically stretching and retracting on different display screens and realizing pixel-level accuracy when the volume is 90% of picture compression, and clicking an operation button to pop up sub-level content in a sliding manner.
Sliding type selection frame assembly: and displaying the selected content by a sliding frame drawn by the SVG.
SVG animation subassembly: and animations drawn by the SVG are combined with self VI elements and code logic display progress, prompt and the like, and comprise SVG loading prompt, SVG request result feedback and other animations.
Fourthly, SVG icon: more than 70 SVG icons are integrated in the mode of embedding codes in the SVG.
3) Popping out the assembly:
extension popup window assembly: the component initially states a set of state numbers in the page, but in response to a long press event, the number-corresponding content children pop up and fill the entire page.
② three layers of card type pop-up window components: the assembly is used in the occasion where a large amount of hierarchical information needs to be displayed, card information is sequentially popped up, the head of a card can be randomly switched back and forth when being clicked, the assembly is provided with touch action feedback, and a gliding closing event can be responded.
The double-layer shutter switching pop-up window component: the component is used where it is desired to present classification information on a page without the need to slide the page. The component with touch action feedback can respond to the card dragging event.
Fourthly, the functional prompting suspension popup window component: when there are more content for using the hint. In response to a glide close event. In the example, a prompt box contains a step prompt component, and in the financial mobile application scene, the multi-step operation guide is used, and the current step, the rest steps, the completion state of each step, the step description and the like can be displayed.
Protocol confirm dialog component: the component is used in a financial mobile application scene when a certain protocol needs to be confirmed to be received in advance and the text content is more.
Sixthly, a common confirmation dialog component: callback, response dialog box that is fully functional, can accommodate most other components. Cut-in and cut-out animations from the tape, and a blurred background masking effect.
4) Integrating interaction class components:
integrating interaction button components: the method integrates the functions of component nesting, animation event combination and the like for financial scene identification, and transforms and integrates in one button to complete all interactive actions. The four components of button, confirmation dialog box, asynchronous recording waiting and return information prompt are integrated in one component.
5) And (3) animation components:
panel animation components: the components wrapped in them have animation effects, now supporting up, down, left, right and custom animation effects and various fade-in and fade-out effects.
The character animation component: including text cut-in and cut-out animations, digital bounce animations, etc.
6) Touch action response component:
long press event component: the content wrapped therein is responsive to a long press trigger event, such as an extensible component long press pop.
Sliding event component: the content wrapped therein is responsive to a sliding action triggering event, such as a sidebar slide pull, a blind slide drag, various window slide closures, and the like.
7) Customizing a service scene component:
the bank card assembly comprises: and receiving attributes such as card type, card number, validity period, name and the like, and displaying the attributes into a corresponding card.
Card pile selection subassembly: the cards of the group are stacked, displayed and selected, at most 8 cards are supported, the automatic switching sequence of the cards at the rear part is clicked, the first card is clicked to pop out a detailed information frame, and the information frame comprises a single card assembly and a sliding list assembly.
Based on the same inventive concept, the embodiment of the present invention further provides a mobile financial application development device based on a component library, as described in the following embodiments. Because the principle of solving the problems of the device is similar to the mobile financial application development method based on the component library, the implementation of the device can refer to the implementation of the mobile financial application development method based on the component library, and repeated parts are not described again.
Fig. 3 is a schematic diagram of a mobile financial application development apparatus based on component library according to an embodiment of the present invention, as shown in fig. 3, the apparatus includes: an application information acquisition module 31, a component library calling module 32 and an application page generation module 33.
The application information acquiring module 31 is configured to acquire user interface design information of the mobile financial application to be developed, where the user interface design information includes various page elements and interaction actions required by the mobile financial application to be developed; the component library calling module 32 is used for calling various page elements and components of interactive actions required by the mobile financial application to be developed from a pre-constructed component library according to the user interface design information of the mobile financial application to be developed; and an application page generating module 33, configured to generate various user interaction pages included in the mobile financial application to be developed according to the called component.
Fig. 4 is a schematic diagram of an optional mobile financial application development apparatus based on a component library in an embodiment of the present invention, as shown in fig. 4, in an embodiment, the mobile financial application development apparatus based on a component library provided in an embodiment of the present invention may further include: a component library creating module 34, configured to create a component library, where the component library includes: and various page elements and components of interaction actions required by the mobile financial application to be developed corresponding to the various application scenes.
As shown in fig. 4, in an embodiment, the mobile financial application development apparatus based on a component library provided in an embodiment of the present invention may further include: the device screen information acquisition module 35 is used for acquiring device screen information for displaying the mobile financial application to be developed; in this embodiment, the application page generating module 33 is further configured to generate various user interaction pages included in the mobile financial application to be developed according to the called component and device screen information.
In one embodiment, in the mobile financial application development device based on the component library provided in the embodiment of the present invention, the component library at least includes the following types of components: the system comprises a basic component, an SVG component, a popup component, an integration interaction component, an animation component, a touch action component and a custom service scene component; in this embodiment, the basic assembly includes: the system comprises a skeleton page, an input component, a typesetting component, a sliding frame component, a list component, a navigation bar component, a search bar component, a label component, a side sliding menu component and a lower right corner functional menu component; the SVG component includes: the system comprises a pop-up Tab component, a sliding selection frame component, an SVG animation component and an SVG icon component; the pop-up type component comprises: the system comprises an expandable popup component, a three-layer card type popup component, a double-layer shutter switching popup component, a function prompting suspension popup component, a protocol confirmation dialog box component and a common confirmation dialog box component; integrating the interaction class component comprises: integrating an interaction button assembly; the animation class component includes: a panel animation component and a character animation component; the touch action class component comprises: a long press event component, a slide event component; the user-defined service scene class component comprises: bank card subassembly, card pile selection subassembly.
Based on the same inventive concept, the embodiment of the present invention further provides a computer device, so as to solve the technical problems of low development efficiency and poor user interface effect in the prior art that an open source UI framework is used to develop a mobile financial application program, as shown in fig. 5, fig. 5 is a schematic diagram of a computer device in the embodiment of the present invention, as shown in fig. 5, the computer device 50 includes a memory 501, a processor 502, and a computer program that is stored in the memory 501 and can be run on the processor 502, and when the processor 502 executes the computer program, the method for developing a mobile financial application based on a component library is implemented.
Based on the same inventive concept, the embodiment of the invention also provides a computer readable storage medium, which is used for solving the technical problems of low development efficiency and poor user interface effect in the prior art of developing the mobile financial application program by using an open source UI framework.
To sum up, according to the mobile financial application development method, apparatus, computer device and computer-readable storage medium based on the component library provided in the embodiments of the present invention, after the user interface design information of the mobile financial application to be developed is obtained, according to various page elements and interactive actions required by the mobile financial application to be developed and included in the user interface design information, components of various page elements and interactive actions required by the mobile financial application to be developed are called from the pre-constructed component library, and further, according to the called components, various user interactive pages included in the mobile financial application to be developed are generated.
Compared with the technical scheme of developing the mobile financial application program by means of the open source UI framework in the prior art, the embodiment of the invention has the advantages that the application developer utilizes various components in the component library to develop the financial application by creating the component library for developing the mobile financial application, the code reuse rate can be greatly increased, the application development efficiency is improved, and the various components in the component library can meet the requirements of a right-angle screen and a round-angle screen by designing component parameters.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
The above-mentioned embodiments are intended to illustrate the objects, technical solutions and advantages of the present invention in further detail, and it should be understood that the above-mentioned embodiments are only exemplary embodiments of the present invention, and are not intended to limit the scope of the present invention, and any modifications, equivalent substitutions, improvements and the like made within the spirit and principle of the present invention should be included in the scope of the present invention.
Claims (10)
1. A mobile financial application development method based on a component library is characterized by comprising the following steps:
acquiring user interface design information of a mobile financial application to be developed, wherein the user interface design information comprises various page elements and interactive actions required by the mobile financial application to be developed;
calling various page elements and components of interaction actions required by the mobile financial application to be developed from a pre-constructed component library according to the user interface design information of the mobile financial application to be developed;
and generating various user interaction pages contained in the mobile financial application to be developed according to the called components.
2. The method of claim 1, wherein before invoking components of various page elements and interactive actions required by the mobile financial application to be developed from a pre-built component library according to user interface design information of the mobile financial application to be developed, the method further comprises:
creating a component library, wherein the component library comprises: and various page elements and components of interaction actions required by the mobile financial application to be developed corresponding to the various application scenes.
3. The method of claim 1, wherein prior to generating the various user interaction pages contained in the mobile financial application to be developed from the invoked component, the method further comprises:
acquiring equipment screen information for displaying the mobile financial application to be developed;
generating various user interaction pages contained in the mobile financial application to be developed according to the called components, wherein the various user interaction pages comprise: and generating various user interaction pages contained in the mobile financial application to be developed according to the called component and the equipment screen information.
4. A method according to any one of claims 1 to 3, wherein the component library contains at least the following types of components: the system comprises a basic component, an SVG component, a popup component, an integration interaction component, an animation component, a touch action component and a custom service scene component;
wherein the base assembly comprises: the system comprises a skeleton page, an input component, a typesetting component, a sliding frame component, a list component, a navigation bar component, a search bar component, a label component, a side sliding menu component and a lower right corner functional menu component; the SVG component includes: the system comprises a pop-up Tab component, a sliding selection frame component, an SVG animation component and an SVG icon component; the pop-up type component comprises: the system comprises an expandable popup component, a three-layer card type popup component, a double-layer shutter switching popup component, a function prompting suspension popup component, a protocol confirmation dialog box component and a common confirmation dialog box component; integrating the interaction class component comprises: integrating an interaction button assembly; the animation class component includes: a panel animation component and a character animation component; the touch action class component comprises: a long press event component, a slide event component; the user-defined service scene class component comprises: bank card subassembly, card pile selection subassembly.
5. A mobile financial application development device based on component library, comprising:
the system comprises an application information acquisition module, a display module and a display module, wherein the application information acquisition module is used for acquiring user interface design information of the mobile financial application to be developed, and the user interface design information comprises various page elements and interactive actions required by the mobile financial application to be developed;
the component library calling module is used for calling various page elements and components of interactive actions required by the mobile financial application to be developed from a pre-constructed component library according to the user interface design information of the mobile financial application to be developed;
and the application page generation module is used for generating various user interaction pages contained in the mobile financial application to be developed according to the called component.
6. The apparatus of claim 5, wherein the apparatus further comprises:
the component library creating module is used for creating a component library, wherein the component library comprises: and various page elements and components of interaction actions required by the mobile financial application to be developed corresponding to the various application scenes.
7. The apparatus of claim 5, wherein the apparatus further comprises:
the equipment screen information acquisition module is used for acquiring the equipment screen information for displaying the mobile financial application to be developed;
the application page generation module is further used for generating various user interaction pages contained in the mobile financial application to be developed according to the called components and the equipment screen information.
8. The apparatus according to any of claims 5 to 7, wherein the component library comprises at least the following types of components: the system comprises a basic component, an SVG component, a popup component, an integration interaction component, an animation component, a touch action component and a custom service scene component;
wherein the base assembly comprises: the system comprises a skeleton page, an input component, a typesetting component, a sliding frame component, a list component, a navigation bar component, a search bar component, a label component, a side sliding menu component and a lower right corner functional menu component; the SVG component includes: the system comprises a pop-up Tab component, a sliding selection frame component, an SVG animation component and an SVG icon component; the pop-up type component comprises: the system comprises an expandable popup component, a three-layer card type popup component, a double-layer shutter switching popup component, a function prompting suspension popup component, a protocol confirmation dialog box component and a common confirmation dialog box component; integrating the interaction class component comprises: integrating an interaction button assembly; the animation class component includes: a panel animation component and a character animation component; the touch action class component comprises: a long press event component, a slide event component; the user-defined service scene class component comprises: bank card subassembly, card pile selection subassembly.
9. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the component library-based mobile financial application development method of any one of claims 1 to 4 when executing the computer program.
10. A computer-readable storage medium storing a computer program for executing the component library-based mobile financial application development method according to any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111180202.5A CN113821295A (en) | 2021-10-11 | 2021-10-11 | Mobile financial application development method and device based on component library |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111180202.5A CN113821295A (en) | 2021-10-11 | 2021-10-11 | Mobile financial application development method and device based on component library |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113821295A true CN113821295A (en) | 2021-12-21 |
Family
ID=78920089
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111180202.5A Pending CN113821295A (en) | 2021-10-11 | 2021-10-11 | Mobile financial application development method and device based on component library |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113821295A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116679852A (en) * | 2023-08-03 | 2023-09-01 | 民航成都信息技术有限公司 | Project icon quotation method and device, electronic equipment and medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109614568A (en) * | 2018-12-07 | 2019-04-12 | 微梦创科网络科技（中国）有限公司 | A kind of page generation method and device |
| CN111045675A (en) * | 2019-12-20 | 2020-04-21 | 深圳乐信软件技术有限公司 | Page generation method, device, equipment and storage medium based on Flutter |
| CN112015408A (en) * | 2020-07-08 | 2020-12-01 | 广州乐摇摇信息科技有限公司 | Component rendering method and device, storage medium and electronic device |
| CN112631580A (en) * | 2019-09-24 | 2021-04-09 | 阿里巴巴集团控股有限公司 | Data processing method and device and computing equipment |
-
2021
- 2021-10-11 CN CN202111180202.5A patent/CN113821295A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109614568A (en) * | 2018-12-07 | 2019-04-12 | 微梦创科网络科技（中国）有限公司 | A kind of page generation method and device |
| CN112631580A (en) * | 2019-09-24 | 2021-04-09 | 阿里巴巴集团控股有限公司 | Data processing method and device and computing equipment |
| CN111045675A (en) * | 2019-12-20 | 2020-04-21 | 深圳乐信软件技术有限公司 | Page generation method, device, equipment and storage medium based on Flutter |
| CN112015408A (en) * | 2020-07-08 | 2020-12-01 | 广州乐摇摇信息科技有限公司 | Component rendering method and device, storage medium and electronic device |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116679852A (en) * | 2023-08-03 | 2023-09-01 | 民航成都信息技术有限公司 | Project icon quotation method and device, electronic equipment and medium |
| CN116679852B (en) * | 2023-08-03 | 2023-10-27 | 民航成都信息技术有限公司 | Project icon quotation method and device, electronic equipment and medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113849165A (en) | Customizable low-code front-end development framework and method based on visual dragging | |
| CN111158686B (en) | Webpage popup frame generation method and device, electronic equipment and storage medium | |
| JPH08505970A (en) | International data processing system | |
| JPH08505720A (en) | Command system | |
| JPH08505721A (en) | Object-oriented framework system | |
| JPH08505251A (en) | Balloon help system | |
| US11385772B2 (en) | Attribute-based rules for displaying additional information | |
| CN110297624B (en) | Implementation method of Widget system based on electron framework and television adopting system | |
| CN112363794A (en) | Rendering method of front-end list type component and electronic equipment | |
| US20230117213A1 (en) | Page display method and electronic device | |
| US11991470B2 (en) | Simulated photographing special effect generation method and apparatus, device, and medium | |
| CN110688115A (en) | Method and device for generating interface | |
| CN111381920A (en) | Display method and device of pop-up window assembly and electronic terminal | |
| CN112445564A (en) | Interface display method, electronic device and computer readable storage medium | |
| CN108268293B (en) | Method for demonstrating rapid prototype of mobile APP | |
| CN113821295A (en) | Mobile financial application development method and device based on component library | |
| CN111897607A (en) | Application interface loading and interaction method, device and storage medium | |
| AU2021407925A9 (en) | Simulated photographing special effect generation method and apparatus, device, and medium | |
| CN116304442A (en) | Page code generation method and device, electronic equipment and storage medium | |
| CN111026472A (en) | Calendar configuration and date selection method and device, storage medium and electronic equipment | |
| CN114281310A (en) | Page frame setting method, device, equipment, storage medium and program product | |
| KR102613143B1 (en) | Text-to-video production methods, devices, facilities and media | |
| CN110968373A (en) | Page switching implementation method and device, storage medium and processor | |
| CN114896020A (en) | Popup window generation method and device, electronic equipment and readable storage medium | |
| CN112558846B (en) | Page data processing method and device |
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 |