APP interface implementation method and device
Technical Field
The invention relates to the technical field of mobile internet development, in particular to an APP interface implementation method and device.
Background
The APP is abbreviated as english Application, and due to the popularity of smart phones such as iPhone, the APP is often specific to third-party Application programs of mobile terminals such as smart phones. Along with the popularization of mobile terminal devices such as smart phones and tablet computers, people are gradually used to the mode of surfing the internet by using an APP client, the APP is not only simple as one client on the mobile device at present, and nowadays, the APP software of the official part of a manufacturer can be downloaded on a plurality of devices to carry out wireless control on different products. For example, official APPs of Android and iOS have been introduced by japanese heavenly and marangy among audio manufacturers, and can perform wireless playing or control on respective products such as network players or power amplifiers.
Moreover, with the rise of mobile internet, more and more internet enterprises and e-commerce platforms use APP as one of the main battlefields of sale. Data show that the flow brought by the APP to mobile phone electronic commerce far exceeds that of the traditional Internet (PC end), and the APP is profitable and is the development direction of various large electronic commerce platforms. The fact shows that the inclination of each large e-commerce platform to the mobile APP is also very obvious, the reason is not only the flow increased every day, more importantly, more users are accumulated for the enterprise due to the convenience of the mobile terminal of the mobile phone, and more importantly, the loyalty and the activity of the users are improved to a great extent due to the APP with good user experience, so that the key effect is played for the creation and the future development of the enterprise.
The mobile internet has the characteristics that the updating speed is high, the updating frequency of the APP is higher, and the iteration requirement of the APP interface style is often out of synchronization with the requirement of the APP service logic iteration: sometimes only local APP business logic needs to be modified without changing the original interface style of the APP; sometimes, on the contrary, the APP business logic does not need to be modified, and the APP interface style needs to be changed. In the existing scheme, no matter which situation needs to be carried out again, the repeated work caused increases the APP iteration development cost.
Disclosure of Invention
The invention provides an APP interface implementation method and device, which can strip the APP interface style from the business logic and meet the requirement of high-frequency APP updating.
The technical scheme of the embodiment of the invention is realized as follows:
the embodiment of the invention provides an APP interface implementation method, which comprises the following steps:
each element/control in the APP design interface is corresponding to a first root node in a first XML (extensible markup language) file, the name of the first root node is composed of an interface name and an element/control name, and a sub-node of the first root node corresponds to an interface style attribute of the element/control;
taking the first XML file as a configuration file of the APP;
naming the element/control of a design interface by a first root node name corresponding to the element/control in the APP business logic code;
compiling the APP service logic code according to the configuration file of the APP to generate an executable file of the APP.
In the above scheme, the method further comprises:
the method comprises the following steps of enabling a font of a general element/control of an APP interface to correspond to a second root node in a second XML file, wherein the type of the second root node comprises: navigation bar fonts, primary caption fonts, secondary caption fonts, tertiary caption fonts and content detail fonts;
and taking the second XML file as a supplementary configuration file of the APP.
In the foregoing solution, the second root node includes: one or more of font name, font size and font color.
In the foregoing solution, the child node of the first root node includes:
one or more of font name, font size, font color, native coordinates, and usage picture.
In the above scheme, when an element/control of the APP design interface is a general element/control of the APP interface, the font property of the first root node corresponding to the element/control corresponds to the font property of the second root node corresponding to the general element/control.
The embodiment of the present invention further provides an interface implementing apparatus for APP, where the apparatus includes: the system comprises a first stripping module, a configuration module, a corresponding naming module and a compiling module; wherein,
the system comprises a first stripping module, a second stripping module and a third stripping module, wherein the first stripping module is used for enabling each element/control in an APP design interface to correspond to a first root node in a first XML file, the name of the first root node is composed of an interface name and an element/control name, and a sub-node of the first root node corresponds to an interface style attribute of the element/control;
the configuration module is used for taking the first XML file as a configuration file of the APP;
the corresponding naming module is used for naming the elements/controls of the design interface by the names of the first root nodes corresponding to the elements/controls in the APP business logic codes;
and the compiling module is used for compiling the APP service logic code according to the configuration file of the APP to generate an executable file of the APP.
In the above scheme, the apparatus further comprises:
a second stripping module, configured to correspond a font of a general element/control of the APP interface to a second root node in a second XML file, where a type of the second root node includes: navigation bar fonts, primary caption fonts, secondary caption fonts, tertiary caption fonts and content detail fonts;
and the supplementary configuration module is used for taking the second XML file as a supplementary configuration file of the APP.
In the above aspect, the second stripping module includes:
a font name unit for corresponding font names of the common elements/controls;
a font size unit for corresponding font size of the common element/control;
and the font color unit is used for corresponding to the font color of the universal element/control.
In the above aspect, the first peeling module includes:
a font name unit for the font name of the corresponding element/control;
a font size unit for the font size of the corresponding element/control;
a font color unit for font color of the corresponding element/control;
the native coordinate unit is used for corresponding to the native coordinates of the elements/controls;
a picture unit is used for using the name or address of the picture for the corresponding element/control.
In the above scheme, the apparatus includes:
and the general font corresponding module is used for enabling the font property of the first root node corresponding to the element/control to correspond to the font property of the second root node corresponding to the general element/control when the element/control of the APP design interface is the general element/control of the APP design interface.
The technical scheme of the invention has the beneficial effects that: the method has the advantages that elements/controls related to the interface style in the APP source code are separated from business logic through an effective mechanism, and then the interface style is dynamically realized through a dynamic calling mode, so that the effects of updating and replacing the APP interface style are achieved, and the requirement of updating the APP at a high frequency is met.
Drawings
Fig. 1 is a schematic flow chart of an implementation method of an APP interface according to an embodiment of the present invention;
fig. 2 is a schematic structural diagram of a component of an APP interface implementation apparatus provided in an embodiment of the present invention;
fig. 3 is a schematic diagram of an APP interface implementation process provided in embodiment 1 of the present invention.
Detailed Description
In order to more clearly illustrate the embodiments and technical solutions of the present invention, the technical solutions of the present invention will be described in more detail with reference to the accompanying drawings and embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the present invention without inventive step, are within the scope of the present invention.
Fig. 1 is a schematic flow chart of an implementation method of an APP interface according to an embodiment of the present invention, and as shown in fig. 1, the method includes:
step 101, each element/control in an APP design interface is corresponding to a first root node in a first XML file, the name of the first root node is composed of an interface name and an element/control name, and a child node of the first root node corresponds to an interface style attribute of the element/control;
for example, the first XML file is itemconfig.xml, in the APP design stage, an element/control appears in the APP design interface, a root node is added to itemconfig.xml, the root node in the first XML file is referred to as a first root node, the name of each first root node is composed of an interface name and an element/control name, for example, the interface name is Main, the control name is Btn, the corresponding first root node name is Main _ Btn, the first root node has more than one child node, and each child node can be used for representing an interface style attribute;
further, in one embodiment, the child nodes of the first root node include:
one or more of font name, font size, font color, native coordinates and usage picture;
step 102, using the first XML file as a configuration file of the APP;
specifically, the first XML file is used as the configuration file of the APP, and is stored in a folder specially used for storing the APP configuration information, or the file name of the first XML file is defined in an APP source code as a macro;
103, naming the element/control of the design interface by the name of the first root node corresponding to the element/control in the APP business logic code;
specifically, when an APP source code is developed, a first XML file is analyzed, and an element/control of a design interface is named as the name of a first root node corresponding to the element/control;
104, compiling the APP service logic code according to the configuration file of the APP to generate an executable file of the APP;
specifically, each interface defines an interface name according to ItemConfig, then traverses all controls under the current interface, generates a name Key, interface name _ element/control name according to the control name, and finds the opposite configuration in the configuration. And finishing the layout and attribute setting of the UI of the current interface according to the configuration.
Further, since the APP interface generally includes a certain fixed layer and a general element/control, in order to make the APP look uniform in style, generally the same layer or general element/control is kept consistent in font, so the interface implementation method may further include:
the method comprises the following steps of enabling a font of a general element/control of an APP interface to correspond to a second root node in a second XML file, wherein the type of the second root node comprises: navigation bar fonts, primary caption fonts, secondary caption fonts, tertiary caption fonts and content detail fonts;
and taking the second XML file as a supplementary configuration file of the APP.
For example, the second XML document is fontconfig.xml, in the APP design phase, the font for each general element/control corresponds to a root node in fontconfig.xml, which is called a second root node, and the elements of the second root node include one or more of font name, font size, and font color; and the second root node includes: navigation bar font, primary caption font, secondary caption font, tertiary caption font and content detail font.
In order to enable the font style of the general interface element/control to be rapidly updated, when one element/control of the APP design interface is the general element/control of the APP interface, the font attribute of the first root node corresponding to the element/control corresponds to the font attribute of the second root node corresponding to the general element/control.
For example, the font name of the first root node corresponding to the navigation bar in the APP design interface is the navigation bar font name; the font size of the first root node is the font size of the navigation bar; the font color of the first root node is the navigation bar font color.
By using the interface implementation method for the APP provided by the embodiment, the elements/controls related to the interface style in the APP source code are separated from the service logic through an effective mechanism, and then the interface style is dynamically implemented through a dynamic calling mode, so that the effects of updating and replacing the APP interface style are achieved, and the requirement of updating the APP at a high frequency is met.
Fig. 2 is a schematic structural diagram of a component of an APP interface implementation apparatus provided in an embodiment of the present invention, and as shown in fig. 2, the APP interface implementation apparatus includes: a first stripping module 201, a configuration module 202, a corresponding naming module 203 and a compiling module 204; wherein,
the device comprises a first stripping module 201, a first XML file and a second stripping module, wherein the first stripping module is used for enabling each element/control in an APP design interface to correspond to a first root node in a first XML file, the name of the first root node is composed of an interface name and an element/control name, and a child node of the first root node corresponds to an interface style attribute of the element/control;
a configuration module 202, configured to use the first XML file as a configuration file of the APP;
a corresponding naming module 203, configured to name, in the APP service logic code, an element/control of a design interface by a first root node name corresponding to the element/control;
and the compiling module 204 is configured to compile the APP service logic code according to the configuration file of the APP, and generate an executable file of the APP.
Further, the interface implementation apparatus further includes:
a second stripping module, configured to correspond a font property of a general element/control of the APP interface to a second root node in a second XML file, where a type of the second root node includes: navigation bar fonts, primary caption fonts, secondary caption fonts, tertiary caption fonts and content detail fonts;
and the supplementary configuration module is used for taking the first XML file as a supplementary configuration file of the APP.
Further, in the interface implementing apparatus, the second peeling module includes:
a font name unit for corresponding font names of the common elements/controls;
a font size unit for corresponding font size of the common element/control;
and the font color unit is used for corresponding to the font color of the universal element/control.
Further, in the interface implementing apparatus, the first peeling module includes:
a font name unit for the font name of the corresponding element/control;
a font size unit for the font size of the corresponding element/control;
a font color unit for font color of the corresponding element/control;
the native coordinate unit is used for corresponding to the native coordinates of the elements/controls;
a picture unit is used for using the name or address of the picture for the corresponding element/control.
Further, the interface implementation apparatus further includes:
and the universal font corresponding module is used for corresponding the font attribute of the element/control to the second root node of the corresponding type when the element/control of the APP design interface is the universal element/control of the APP interface.
In practical applications, each of the modules and each of the units may be implemented by a Central Processing Unit (CPU), a microprocessor unit (MPU), a Digital Signal Processor (DSP), or a Field Programmable Gate Array (FPGA) in the interface implementation apparatus of the APP.
Each module of the interface implementation apparatus for APP of this embodiment correspondingly executes the steps described in the above interface implementation method for APP, so that the same beneficial effects are achieved. In addition, it should be understood that the above-described embodiment of the interface implementation apparatus is merely illustrative, and the described division of the modules is only one logical function division, and other division manners may be provided in actual implementation. In addition, the modules may be coupled or communicatively connected to each other through some interfaces, and may also be in an electrical or other form.
The functional modules may or may not be physical blocks, which may be located in one place or distributed on multiple network units, and may be implemented in the form of hardware or software functional blocks. Some or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of the invention.
Example 1
To better illustrate this scheme, example 1 is provided, with example 1 divided into two major parts:
first, peeling, the main part, needs to be peeled off has three types:
1, Font: font name, size, color;
frame: position coordinates and sizes of the controls;
image: the picture name used by the control;
the configuration is stored in an XML file mode, and two files FontConfig. XML and ItemConfig. XML are generated; wherein,
FontConfig file: for stripping off the general Font; the lower part of the root node is divided into three bytes which are respectively used for the name, the size and the color of the font. One child node is added for each configuration in the byte of the corresponding type.
Only general fonts are defined, mainly including navigation bar fonts, first-level titles, second-level titles, third-level titles and content detail fonts;
adding colors after the selection of a plurality of universal text boxes in the universal colors;
ItemConfig file: and the method is used for stripping the fonts, the position coordinate sizes and the pictures corresponding to the controls. Interface elements/controls are used as nodes, and the naming rule is that the following sub-nodes (optional and added as required) are arranged below the interface name element/control name node
1.Font name (if generic, fill in generic font name);
2. font size (if generic, fill in generic font size name);
3. font color (if generic, fill in the name of the generic font color);
4. native coordinate size (X-X axis, Y-Y axis, w-width, h-height);
5. picture names are used (multiple state pictures can be defined-normal, highlight, selected, unavailable).
Secondly, dynamic calling: the method mainly comprises the steps of stripping the use of resources, loading a configuration file after the App is started, and analyzing all configurations.
And each interface defines an interface name according to ItemConfig, then traverses all controls under the current interface, generates a name Key and interface name _ element/control name according to the control name, and finds opposite configuration in the configuration. The layout and property setting of the UI of the current interface are completed according to the configuration, as shown in fig. 3.
Specifically, if one such App is to be made, there is only one interface, and there is one button on the interface and one tab for display, and after clicking the button, the tab displays "Say Hello".
The process of realizing the APP interface by using the scheme provided by the invention is as follows:
1. creating a project, writing related service codes according to the service, placing a button Btn and a Label on an interface, setting the position size of the button without setting, and making a response of the button;
2. xml defines a universal font, Btn and Label have font sizes of 12, font names of 'Helvetica', font colors are not universal and are configured in ItemConfig;
3. placing three nodes, Main _ windowView, in ItemConfig.xml, and setting the background color of a Main interface; main _ Btn, setting the position coordinate, size, font and background picture of the button; the Main _ Label sets the position coordinate, the size and the font of the Label;
4. the interface displays forward dynamic loading, loads two configuration files FontConfig.xml and ItemConfig.xml, and analyzes according to an xml protocol;
defining the name of an interface as Main, and expressing the name of the interface per se by using Windows View;
finding the configuration with the name of Main _ WindowView in the configuration to layout and set the Main interface;
then traversing all the sub-elements under the main interface, and finding Btn and Label; finding out corresponding configuration according to the spliced name for setting;
5. after completion, the App interface described in the configuration can be seen by compiling.
In the whole, elements which are irrelevant to business logic and closely related to interface style are separated, the elements are organized in the form of configuration files such as xml, the configuration is dynamically loaded when the interface is loaded, and the corresponding configuration is searched for and set according to the configuration and the unique Key (interface name _ element/control name). If skin changing is to be realized, a plurality of sets of xml configuration files are prepared, the set of skin is selected, the set of configuration files is loaded, and the seen effect is a selection style interface. The mode of saving configuration can be diversified, and can also adopt the mode of defining the macro to organize, and this is relatively simple, can realize the renewal of interface very conveniently, but is unfavorable for the interface to change the skin.
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 a hardware embodiment, a 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, 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.
It should be noted that the above-mentioned embodiments are only examples of the present invention, and not intended to limit the scope of the present invention, and all equivalent structures or equivalent flow transformations made by using the contents of the specification and the drawings, such as the combination of technical features between the embodiments, or the direct or indirect application to other related technical fields, are included in the scope of the present invention.