CN110795085A - Visual editing methods and tools for mobile applications - Google Patents

Abstract

The invention discloses a visual editing method for mobile application, which comprises the following steps: acquiring a page screenshot and control information of the mobile application to form a preview window, and displaying the interface screenshot and the control level information of the mobile application in real time in an editable state; acquiring data of a user editing control, generating corresponding instructions, summarizing all the instructions to form an instruction file, and sending the instruction file to a mobile application; analyzing the instruction file received by the mobile application, searching the control corresponding to each instruction, and editing the corresponding control on the mobile application according to the instruction. The method has the advantages that the page display effect can be modified on the visual editing webpage, the instruction file is automatically generated, the resources of developers are saved, and the development period is greatly shortened. The invention also provides a visual editing tool for the mobile application, electronic equipment and a storage medium.

Description

Visual editing methods and tools for mobile applications

technical field

The invention relates to the field of mobile application development. More specifically, the present invention relates to a method and tool for visual editing of mobile applications.

Background technique

In order to do ABTest for mobile application software, developers need to develop different behavior codes according to different variables returned by the test platform server, and then release the developed new version of the software, analyze the user usage data of the new version of the software, and obtain the test results. , and then the developer revokes the corresponding code of the experimental group that did not perform well according to the test results, and releases a new version again.

Because every time an ABTest test is performed, developers are required to develop new code, and the code corresponding to the experimental group with poor performance will be discarded, so the above technical process will waste a lot of development resources and prolong the development cycle.

SUMMARY OF THE INVENTION

An object of the present invention is to solve at least the above-mentioned problems and to provide at least the advantages which will be explained later.

Another object of the present invention is to provide a mobile application visual editing method, which can modify the display effect of the mobile App client interface without the program developer, and completely modify the page display effect on the visual editing web page by non-technical personnel, and automatically generate an instruction file , saving developer resources and greatly shortening the development cycle.

A visual editing tool for mobile applications is provided, so as to modify the page display effect on the visual editing web page, automatically generate instruction files, save developer resources, and greatly shorten the development cycle.

In order to achieve these objects and other advantages according to the present invention, a method for visual editing of mobile applications is provided, including:

Obtain page screenshots and control information of the mobile application to form a preview window, and display the interface screenshots and control level information of the mobile application in an editable state in real time;

Obtain the data of the user edit control, generate the corresponding instructions, aggregate all the instructions into an instruction file, and send it to the mobile application;

Parse the command file received by the mobile application, find the control corresponding to each command, and execute and edit the corresponding control on the mobile application according to the command.

Preferably, the controls are stacked according to a tree structure, and any control starts from the root node control and searches according to the rules to generate a string-type search path, that is, to obtain the control address code.

Preferably, the instruction file is uploaded to an external network server for storage.

Preferably, the instruction file is downloaded from the external network server to the mobile application.

Provide a visual editing tool for mobile applications, including:

web page, which includes:

A mobile application interface preview module, which is used to form a preview window according to the received page screenshots and control information of the mobile application, and display the interface screenshots and control level information of the mobile application in real time;

The control editing module is used to identify the selected control, display all the modification items of the selected control, identify the selected modification item and the corresponding modification data, form an instruction, and aggregate all the instructions to form an instruction file;

a first network communication module for sending and receiving information;

client, which includes:

An information collection module, which is used to collect page screenshots and control information of the mobile application currently being displayed;

The instruction parsing module is used for parsing the received instruction file to form an instruction in a readable form of the instruction execution module, and the instruction execution module is used for finding the target control to be edited according to the information in the parsed instruction, and for the target control. The control executes editing according to the instruction;

The second network communication module is used for sending and receiving information.

Preferably, the webpage terminal further comprises: a modification history list display module, which is used for listing all the instructions and corresponding data.

Preferably, the webpage terminal further comprises: a file uploading module, which is configured to aggregate the control editing module to form an instruction file and send it to an external network server.

Preferably, the client further includes: an instruction file downloading module, which is used in an online environment to download the instruction files stored in the external network server.

An electronic device is provided, comprising: at least one processor, and a memory communicatively connected to the at least one processor, wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor The at least one processor executes, so that the at least one processor executes the method of any one of claims 1-4.

A storage medium is provided on which a computer program is stored, and when the program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

The present invention includes at least the following beneficial effects:

First, modifying the display effect of the mobile App client interface can be completely modified by non-technical personnel on the visual editing webpage without program developers. The tool of the present invention will automatically generate an instruction file and upload it to the server, saving developer resources. Significantly shorten the development cycle.

Second, modifying the display effect of the mobile app client interface does not need to repackage the software and submit it to the app store and wait for review, but directly through the server to dynamically deliver the interface changes to the old version of the software, which greatly saves development time and shortens. Development cycle.

Third, because this tool can modify the display effect of the application without resubmitting a new version, this tool can be used for hot update and hot repair of mobile apps, and quickly and easily repair the software that has been released to users. bug.

Other advantages, objects, and features of the present invention will appear in part from the description that follows, and in part will be appreciated by those skilled in the art from the study and practice of the invention.

Description of drawings

1 is a schematic diagram of the interaction of each module in the visual editing tool according to one of the technical solutions of the present invention;

FIG. 2 is a schematic diagram of the interactive panorama of each module of the visual editing tool according to one of the technical solutions of the present invention;

FIG. 3 is a structural diagram of the control address coding according to one of the technical solutions of the present invention.

Detailed ways

The present invention will be further described in detail below with reference to the accompanying drawings, so that those skilled in the art can implement it with reference to the description.

As shown in Figures 1-3, the present invention provides a method for visual editing of mobile applications, including:

Obtain page screenshots and control information of the mobile application to form a preview window, and display the interface screenshots and control level information of the mobile application in an editable state in real time;

Obtain the data of the user edit control, generate the corresponding instructions, aggregate all the instructions into an instruction file, and send it to the mobile application;

Parse the command file received by the mobile application, find the control corresponding to each command, and execute and edit the corresponding control on the mobile application according to the command.

In the above technical solution, it can be designed to be performed in the following manner:

1. Use the server software package of this method to start the service;

2. The mobile App integrates the iOS or Android SDK provided by this method;

3. Use a browser to access the visual editing URL provided by the service;

4. Open the mobile app and use the mobile app to scan the QR code in the visual editing web page. At this time, the mobile app and the web page establish a real-time connection;

5. The real-time preview interface of the mobile App and the properties of each control appear on the webpage;

6. The user selects a control at the endpoint of the web page, and the editing panel pops up to edit the properties of the control;

7. After editing and saving, the mobile app responds in real time to the modification instructions sent by the user in the previous step, the page style of the mobile app changes, and the preview interface on the webpage also changes immediately;

8. Repeat steps 6 to 7 until the user has completed all modification requirements, click the Generate button to generate the final instruction file and upload it to the server for backup;

9. The developer sends the instruction file to the online user App in a certain range (it can be all) according to certain rules, and the online user's App responds to modification and the interface changes.

Therefore, it is possible to modify the display effect of the mobile App client interface without program developers, and completely by non-technical personnel to modify the page display effect on the visual editing web page. Significantly shorten the development cycle.

There is no need to repackage the software and submit it to the app store and wait for review. Instead, the old version software can also complete the interface changes through the dynamic distribution of the server, which greatly saves development time and shortens the development cycle.

In another technical solution, the controls are stacked according to a tree structure, and any control starts from the root node control and searches according to the rules, and generates a string-type search path, that is, the control address code is obtained.

For example: App page control address encoding rules:

As shown in Figure 3, the control address coding rules are:

Starting from the root node control, follow the arrow to the target control, the index values of all the controls in the path are concatenated to form a string of characters, and this string of characters is the address code of the control.

The index value means: the control is the first child control in the parent control, that is, the number marked in the figure.

For example, in Figure 3, the address code of viewC is 0-0-0-2, and the address code of viewG is 0-2-1-0

The meaning of address coding for controls is: click on the control map in the mobile app on the visual editing web page, modify its properties, and then send the modification instruction to the app. Modification, this parsing basis is the address encoding. In the same online formal environment, when the mobile app downloads the instruction file, it is also necessary to find the specific control corresponding to each modification according to the address code contained in each instruction in the instruction file.

In another technical solution, the instruction file is uploaded to an external network server for storage. The instruction file on one mobile APP can be sent to thousands of mobile APPs on other lines to realize large-scale modification.

In another technical solution, the instruction file is downloaded from the external network server to the mobile application. There is no need to modify each online mobile APP separately, just download the corresponding instruction file from the external network server to automatically complete the batch modification.

The present invention provides a visual editing tool for mobile applications, including:

web page, which includes:

A mobile application interface preview module, which is used to form a preview window according to the received page screenshots and control information of the mobile application, and display the interface screenshots and control level information of the mobile application in real time;

The control editing module is used to identify the selected control, display all the modification items of the selected control, identify the selected modification item and the corresponding modification data, form an instruction, and aggregate all the instructions to form an instruction file;

a first network communication module for sending and receiving information;

client, which includes:

An information collection module, which is used to collect page screenshots and control information of the mobile application currently being displayed;

The instruction parsing module is used for parsing the received instruction file to form an instruction in a readable form of the instruction execution module, and the instruction execution module is used for finding the target control to be edited according to the information in the parsed instruction, and for the target control. The control executes editing according to the instruction;

The second network communication module is used for sending and receiving information.

In the above technical solution, the first network communication module and the second network communication module are both bidirectional network communication modules, and the client and the server establish communication, thereby enabling free communication between the two parties;

The web page sends requests to the client at a certain frequency to obtain screenshots and control information of the client page;

The client receives the request from the web page, drives the information collection module to collect page screenshots and control information, and sends it to the web page;

The web page receives the page screenshot information returned by the client, drives the interface preview module, displays the page screenshot in the client App on the web page, and generates the edit panel to display the modification items of the controls in the page;

The user sees the real-time preview of the mobile app on the web page, and can modify the style properties of the specified controls on the editing board;

After the user modifies the style attribute of a certain control, the web page drives the control editing module, generates a modification instruction, and sends it to the client through the first network communication module;

The client receives the modification instruction, drives the instruction parsing module, parses out some parameters contained in the instruction (address code of the target control, which property to modify, and what value to modify), and then drives the control addressing module to find out according to the parsed address code. Corresponding controls, drive the instruction execution module to modify the corresponding properties of the found controls;

If the modification is successful, the interface in the App displays the modified style, and the web page can rely on the interface preview module to display the modified preview image;

The control modification module on the web page saves the modification item just now into the history list module, so that the user can see the modification item information just now in the history list;

If the user has other operations that need to be modified, the process in the modification steps will be cyclically modified. After all modifications are completed, the user clicks the generate file button on the web page, and the control editing module will assemble all modification instructions into a json file, and will Upload this file to the server.

In another technical solution, the webpage terminal further includes: a modification history list display module, which is used for listing all the instructions and corresponding data. In order to facilitate the user to view the modified data.

In another technical solution, the web page further includes: a file uploading module, which is configured to aggregate the control editing module to form an instruction file and send it to an external network server. For the online formal environment, the mobile app can download the instruction file from the external network server without repeated editing and modification.

In another technical solution, the client further includes: an instruction file downloading module, which is used in an online environment to download the instruction files stored in the external network server. In the online formal environment, the mobile app downloads the instruction file from the external network server, drives the instruction parsing module to parse the modification instructions in the file one by one, and then drives the instruction execution stage to execute each modification, thus completing the dynamic modification of the native control properties in the App. Function.

An electronic device is provided, comprising: at least one processor, and a memory communicatively connected to the at least one processor, wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor The at least one processor executes, so that the at least one processor executes any one of the methods described above.

A storage medium is provided on which a computer program is stored, and when the program is executed by a processor, any one of the above-mentioned methods is implemented.

Although the embodiment of the present invention has been disclosed as above, it is not limited to the application listed in the description and the embodiment, and it can be applied to various fields suitable for the present invention. For those skilled in the art, it can be easily Therefore, the invention is not limited to the specific details and illustrations shown and described herein without departing from the general concept defined by the appended claims and the scope of equivalents.

Claims (10)

1. The visual editing method for the mobile application is characterized by comprising the following steps:

acquiring a page screenshot and control information of the mobile application to form a preview window, and displaying the interface screenshot and the control level information of the mobile application in real time in an editable state;

acquiring data of a user editing control, generating corresponding instructions, summarizing all the instructions to form an instruction file, and sending the instruction file to a mobile application;

analyzing the instruction file received by the mobile application, searching the control corresponding to each instruction, and editing the corresponding control on the mobile application according to the instruction.

2. The visual editing method for mobile applications according to claim 1, wherein the controls are stacked in a tree structure, and any one of the controls is searched from the root node control according to rules to generate a string-type search path, i.e. a control address code.

3. The visual editing method for mobile applications of claim 1, wherein the instruction file is uploaded to an extranet server for storage.

4. The visual editing method for mobile applications of claim 3, wherein an instruction file is downloaded from the extranet server to a mobile application.

5. A mobile application visualization editing tool, comprising:

the webpage end comprises:

the mobile application interface preview module is used for forming a preview window according to the received page screenshot and control information of the mobile application and displaying the interface screenshot and the control level information of the mobile application in real time;

the control editing module is used for identifying the selected control, displaying all the modification items of the selected control, identifying the selected modification items and the corresponding modification data to form an instruction, and summarizing all the instructions to form an instruction file;

a first network communication module for transmitting and receiving information;

a client, comprising:

the information collection module is used for collecting the page screenshot and the control information of the mobile application which is currently displayed;

the instruction analysis module is used for analyzing the received instruction file to form an instruction in a readable form of the instruction execution module, and the instruction execution module is used for finding a target control to be edited according to information in the analyzed instruction and executing editing on the target control according to the instruction;

a second network communication module for sending and receiving information.

6. The mobile application visual editing tool of claim 5, wherein the web site further comprises: and the modification history list display module is used for listing all the instructions and the corresponding data.

7. The mobile application visual editing tool of claim 5, wherein the web site further comprises: and the file uploading module is used for summarizing the control editing modules into an instruction file and sending the instruction file to the external network server.

8. The mobile application visualization editing tool of claim 7, wherein the client further comprises: and the instruction file downloading module is used for downloading the instruction file stored in the external network server in an online environment.

9. An electronic device, comprising: at least one processor, and a memory communicatively coupled to the at least one processor, wherein the memory stores instructions executable by the at least one processor to cause the at least one processor to perform the method of any of claims 1-4.

10. Storage medium on which a computer program is stored, characterized in that the program, when executed by a processor, implements the method of any one of claims 1 to 4.

Images