CN113934959B

CN113934959B - Program preview method and device, computer equipment and storage medium

Info

Publication number: CN113934959B
Application number: CN202010661399.3A
Authority: CN
Inventors: 田淮仁; 黄映焜; 郭志伟
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2020-07-10
Filing date: 2020-07-10
Publication date: 2024-08-13
Anticipated expiration: 2040-07-10
Also published as: CN113934959A

Abstract

The invention discloses a program preview method, a program preview device, computer equipment and a storage medium; acquiring a Web program file capable of running on a Web terminal, wherein the Web program file is obtained by converting a program file of a target subprogram, and the target subprogram is a subprogram of a target client program capable of running on a mobile terminal; displaying a program effect preview page of a Web program file on a Web end, wherein the program effect preview page comprises at least one component selection control, and each component selection control corresponds to one type of component; when the selection operation of the target component selection control in the component selection control is detected, displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file, wherein the preview application page represents an application page displayed when the target component runs in the mobile terminal. The program file of the subroutine can be directly operated on the Web end.

Description

Program preview method and device, computer equipment and storage medium

Technical Field

The present application relates to the field of communications technologies, and in particular, to a program preview method, apparatus, computer device, and storage medium.

Background

With the rapid development of information technology, a subprogram which can be used without downloading and installing appears in a client program of a terminal, a user can open the subprogram by scanning or searching, and the function of the subprogram is comparable to that of an APP. In the course of research and practice of the related art, the inventors of the present application found that the program file of the subroutine cannot be directly run on the Web side.

Disclosure of Invention

The embodiment of the application provides a program preview method, a program preview device, computer equipment and a storage medium, which can construct a dependency tree file by analyzing the dependency relationship between application pages and components of a subprogram, and then compile the dependency tree file to obtain a Web program file capable of running on a Web end, so that the program file of the subprogram can directly run on the Web end.

The embodiment of the application provides a program preview method, which comprises the following steps:

acquiring a Web program file capable of running on a Web terminal, wherein the Web program file is obtained by converting a program file of a target subprogram, and the target subprogram is a subprogram of a target client program capable of running on a mobile terminal;

displaying a program effect preview page of the Web program file on the Web end, wherein the program effect preview page comprises at least one component selection control, and each component selection control corresponds to one type of component;

when the selection operation of the target component selection control in the component selection controls is detected, displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file, wherein the preview application page represents an application page displayed when the target component runs in the mobile terminal.

Correspondingly, the embodiment of the application provides a program preview device, which comprises:

the mobile terminal comprises a first acquisition unit, a second acquisition unit and a third acquisition unit, wherein the first acquisition unit is used for acquiring a Web program file capable of running on a Web terminal, the Web program file is obtained by converting a program file of a target subprogram, and the target subprogram is a subprogram of a target client program capable of running on the mobile terminal;

The first display unit is used for displaying a program effect preview page of the Web program file on the Web end, wherein the program effect preview page comprises at least one component selection control, and each component selection control corresponds to one type of component;

And the second display unit is used for displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file when the selection operation of the target component selection control in the component selection control is detected, wherein the preview application page represents an application page displayed when the target component runs in the mobile terminal.

In an embodiment, the first acquisition unit includes:

a first acquisition subunit, configured to acquire a program file of a target subroutine of the target client program;

the analysis subunit is used for analyzing the program file to obtain a dependency tree file of the target subprogram;

And the compiling subunit is used for compiling the dependency tree file to obtain a Web program file which can run at the Web end.

In an embodiment, the parsing subunit is further configured to read a dependency relationship between an application page and a component of the target subroutine; and constructing a dependency tree file of the target subprogram according to the program file and the dependency relationship.

In an embodiment, the compiling subunit is further configured to compile the dependency tree file to obtain a page content file of a Web page corresponding to the application page and a dynamic content file corresponding to the component and used for displaying the Web page; splitting the dynamic content file according to the dependency relationship between the application page and the component to obtain a split dynamic content file; and fusing each page content file with the corresponding split dynamic content file to obtain a Web program file which can run at a Web end.

In an embodiment, the second display unit includes:

The first determining subunit is used for determining a target Web page where a target component corresponding to the target component selection control is located based on the Web program file when the selection operation of the target component selection control in the component selection controls is detected;

The obtaining subunit is configured to obtain, based on a page content file of the target Web page in the Web program file and a content file of the target component in the split dynamic content file, the target Web page including an operation effect of the target component, and use the target Web page as a preview application page;

And the first display subunit is used for displaying the preview application page corresponding to the target component in the program effect preview page.

In an embodiment, the second display unit includes:

A second determining subunit, configured to determine, when a selection operation for a target component selection control in the component selection controls is detected, a target component indicated by the target selection control;

The second acquisition subunit is used for acquiring the Web page of the target assembly in operation from the Web pages of the assemblies and taking the Web page as a preview application page corresponding to the target assembly;

And the second display subunit is used for displaying the preview application page corresponding to the target component in the program effect preview page.

In an embodiment, the program preview apparatus further includes:

The obtaining unit is used for obtaining the component Web page when each component in the split dynamic content file operates based on the page content file of each Web page in the Web program file and the corresponding split dynamic content file.

In an embodiment, the program preview apparatus further includes:

The second acquisition unit is used for acquiring the replacement code corresponding to the running code;

A first changing unit, configured to change the running code in the Web program file to the replacement code;

and the second display unit is used for updating and displaying the preview application page corresponding to the target component based on the replacement code in the program effect preview page.

In an embodiment, the second obtaining unit includes:

A second obtaining subunit, configured to obtain an edited code corresponding to the running code based on an editing operation for the running code in the code editing area;

And the first confirming subunit is used for taking the edited code as a replacement code of the running code when a confirming operation for the edited code is detected.

In an embodiment, the second obtaining unit includes:

A third obtaining subunit, configured to obtain, when an editing operation for the running code is detected, editing information corresponding to the editing operation;

And the confirming subunit is used for taking the editing information as a replacement code of the running code when a confirming operation for the editing information is detected.

In an embodiment, the program preview apparatus further includes:

And the storage unit is used for storing the running codes into a preset storage space.

In an embodiment, the program preview apparatus further includes:

A reading unit, configured to read, when a code recovery operation for the replacement code is detected, an operation code corresponding to the replacement code from the preset storage space;

and the second changing unit is used for changing the replacement code in the Web program file into the running code.

In an embodiment, the program preview apparatus further includes:

and the response unit is used for responding to the operation to update the preview application page based on operation response logic corresponding to the target component in the Web program file when the operation for the operable area is detected.

In an embodiment, the response unit includes:

a selecting subunit configured to determine, when an operation object selecting operation for the operable area in the preview application page is detected, the operable area as a current operation area;

And the response subunit is used for responding to the operation to update the preview application page based on operation response logic corresponding to the target component in the Web program file when the operation for the current operation area is detected.

Correspondingly, the embodiment of the application also provides computer equipment, which comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the processor executes the steps in the program preview method provided by any one of the embodiments of the application.

Correspondingly, the embodiment of the application also provides a storage medium, wherein the storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor to execute the steps in the program preview method provided by any one of the embodiments of the application.

The embodiment of the application can acquire the Web program file which can be operated on the Web end, wherein the Web program file is obtained by converting the program file of a target subprogram, and the target subprogram is a subprogram of a target client program which can be operated on the mobile terminal; displaying a program effect preview page of the Web program file on the Web end, wherein the program effect preview page comprises at least one component selection control, and each component selection control corresponds to one type of component; when the selection operation of the target component selection control in the component selection controls is detected, displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file, wherein the preview application page represents an application page displayed when the target component runs in the mobile terminal. According to the scheme, the dependency tree file can be constructed by analyzing the dependency relationship between the application page and the component of the subprogram, and then the dependency tree file is compiled to obtain the Web program file capable of running on the Web end, so that the program file of the subprogram can be directly run on the Web end.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the description of the embodiments will be briefly described below, it being obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a schematic view of an operation effect page of a program preview method according to an embodiment of the present application;

FIG. 2 is a flowchart of a program preview method provided by an embodiment of the present application;

FIG. 3 is a flowchart of a program file running on a Web end in a program preview method according to an embodiment of the present application;

FIG. 4 is a schematic diagram of another operation effect page of the program preview method according to the embodiment of the present application

FIG. 5 is a schematic diagram of another operation effect page of the program preview method according to the embodiment of the present application;

FIG. 6 is a schematic diagram of another operation effect page of the program preview method according to the embodiment of the present application;

FIG. 7 is another flowchart of a program preview method provided by an embodiment of the present application;

FIG. 8 is a device diagram of a program preview method according to an embodiment of the present application;

FIG. 9 is another apparatus diagram of a program preview method according to an embodiment of the present application;

FIG. 10 is another apparatus diagram of a program preview method according to an embodiment of the present application;

FIG. 11 is another apparatus diagram of a program preview method according to an embodiment of the present application;

FIG. 12 is another apparatus diagram of a program preview method according to an embodiment of the present application;

fig. 13 is a schematic structural diagram of a computer device according to an embodiment of the present application.

Detailed Description

The following description of the embodiments of the present application will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present application, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to fall within the scope of the application.

The embodiment of the application provides a program preview method, a program preview device, computer equipment and a storage medium. Specifically, the embodiment of the application provides a program preview device suitable for computer equipment. The computer equipment can be a terminal or a server and the like, and the terminal can be a mobile phone, a tablet computer, a notebook computer and the like. The server may be a single server or a server cluster composed of a plurality of servers.

Referring to fig. 1, a Web program file that can be run on a Web terminal is obtained by converting a program file of a target sub-program, which is a sub-program of a target client program that can be run on a mobile terminal; displaying a program effect preview page of a Web program file on a Web terminal, for example, at least one component selection control may be displayed in a component selection control display area of the program effect preview page as shown in fig. 1, where each component selection control corresponds to a type of component; when the selection operation of the target component selection control in the component selection control is detected, displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file, wherein the preview application page represents an application page displayed when the target component runs in the mobile terminal.

The running code corresponding to the target component may be displayed in the Web program file display area shown in fig. 1, and the running effect corresponding to the running code may be displayed on the preview application page.

From the above, it can be known that the embodiment of the application can construct the dependency tree file by analyzing the dependency relationship between the application page and the component of the subroutine, and then compile the dependency tree file to obtain the Web program file capable of running on the Web terminal, so that the program file of the subroutine can be directly run on the Web terminal.

The present embodiment may be described in detail below, and the description order of the following embodiments is not limited to the preferred order of the embodiments.

The embodiment of the application provides a program preview method which can be executed by a terminal or a server or can be executed by the terminal and the server together; the embodiment of the present application will be described with reference to the case where the program preview method is executed by a terminal, and specifically, the program preview apparatus integrated in a server. As shown in fig. 2, the specific flow of the program preview method may be as follows:

201. And acquiring a Web program file capable of running on a Web terminal, wherein the Web program file is obtained by converting a program file of a target subprogram, and the target subprogram is a subprogram of a target client program capable of running on a mobile terminal.

Optionally, the user may trigger the preview process of the sub-program through the page displayed by the terminal.

Optionally, the step of "obtaining a Web program file that can be run on the Web end" may include:

displaying a program preview setting page;

When detecting a preview program information input operation aiming at a program preview setting page, acquiring preview program identification information corresponding to the preview program information input operation;

and acquiring a Web program file which can run on a Web terminal based on the preview program identification information.

The preview program identification information may include identification information of a target sub program or identification information of a Web program file. Alternatively, the Web program file may be stored in a storage area of the terminal or the server after the pre-compilation is completed.

The process of acquiring the Web program file capable of running on the Web terminal may specifically be based on the identification information of the Web program file, and acquire the identification information Web program file from the corresponding storage area. Or the target subprogram can be acquired based on the identification information of the target subprogram, and the required Web program file is obtained through the conversion of the target subprogram.

The Web program file is the running code of the target subprogram, and can be obtained by compiling the program file of the target subprogram. The target client program may include a plurality of subroutines, and the target subroutine is one of the plurality of subroutines.

In one embodiment, the step of "obtaining a Web program file that can be run on a Web side" may include:

acquiring a program file of a target subprogram of a target client program;

Analyzing the program file to obtain a dependency tree file of the target subprogram;

compiling the dependency tree file to obtain a Web program file which can run on a Web end.

In an example, a specific process of converting a program file of a target sub program into a Web program file capable of running on a Web end may refer to fig. 3, first, the program file of the target sub program may be obtained, then, a dependency tree file of the target sub program may be constructed, a dependency tree file is compiled by a program compiling tool (such as wcc, wscs) to obtain a compiled dependency tree file, where the compiled dependency tree file may include a page content file (such as page-frame. Html) and a dynamic content file (such as app-service. Js), and finally, the page content file and the dynamic content file are code-combined to obtain the Web program file, where page-frame. Html may be some static pages, which may define meanings and structures of pages, app-service. Js may be dynamic script contents of pages, such as some actions of the sub program, and let pages move.

In an embodiment, in order to construct a dependency tree file of the target subroutine, the contents of the application page and the component of the target subroutine may be read, and then a dependency analysis is performed, which specifically includes the steps of "resolving the program file to obtain the dependency tree file of the target subroutine", and may include:

reading the dependency relationship between the application page and the component of the target subprogram;

and constructing a dependency tree file of the target subprogram according to the program file and the dependency relationship.

In an embodiment, in order to obtain a Web program file that can be run on a Web terminal, after reading a dependency relationship between an application page and a component, and constructing a dependency tree file, compiling the dependency tree file to obtain the Web program file that can be run on the Web terminal, the specific step of compiling the dependency tree file to obtain the Web program file that can be run on the Web terminal may include:

Compiling the dependency tree file to obtain a page content file of the Web page corresponding to the application page and a dynamic content file corresponding to the component and used for displaying the Web page;

splitting the dynamic content file according to the dependency relationship between the application page and the component to obtain a split dynamic content file;

and fusing the page content files with the split dynamic content files corresponding to the page content files to obtain Web program files which can run at a Web end.

And each application page corresponds to the split dynamic content file, and the page content files corresponding to the same application page and the split dynamic content files are fused to obtain the Web program file which can be operated at the Web end.

In an example, the compiled dependency tree file may include page-frame. Html and app-service. Js, the app-service. Js may be inserted into the page-frame. Html to complete the merging of the code, and a Web program file may be obtained. The js (JavaScript) is a script language, which is composed of three parts, namely DOM, BOM, ECMAscript, html is a hypertext markup language, each tag in html is a DOM node in js node, js operates the DOM node, or the tag in html is operated, and js and html codes can be combined together.

202. And displaying a program effect preview page of the Web program file on the Web end, wherein the program effect preview page comprises at least one component selection control, and each component selection control corresponds to one type of component.

The program effect preview page is a page for previewing the running effect of each component of the target subprogram in the Web terminal. The program effect preview page can be used for displaying a component selection control, displaying a preview application page corresponding to the selected component selection control based on the selected component selection control, wherein the preview application page is used for displaying the operation effect of operation codes corresponding to the selected component selection control, and the operation codes are codes in a Web program file.

The component selection control is a control for selecting the simulation operation effect of the corresponding operation code of the target subprogram on the Web end page, and the expression forms of the component selection control are various, such as a button, an input box and the like.

Wherein, all components or components of a preset part in the same application page of the target subprogram can be determined to be the same type of components.

In an example, as shown in fig. 4, the program effect preview page may include at least one component selection control, and when a selection operation is performed on one of the component selection controls, such as clicking, a component code of a component corresponding to the selected component selection control may be displayed in the Web program file display area, and an operation effect of the component code may be displayed in the preview application page.

203. When the selection operation of the target component selection control in the component selection control is detected, displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file, wherein the preview application page represents an application page displayed when the target component runs in the mobile terminal.

The preview application page simulates the page of the mobile terminal to display the running effect of the corresponding component codes, and can be updated by operating the preview application page.

In an embodiment, in order to preview the operation effect of the target component, a trigger operation may be performed for the target component selection control, and a preview application page of the target component may be triggered to be displayed so as to preview the operation effect of the target component, which may include:

when the selection operation of a target component selection control in the component selection controls is detected, determining a target Web page where a target component corresponding to the target selection control is located based on the Web program file;

based on a page content file of a target Web page in the Web program file and a content file of a target component in the split dynamic content file, obtaining a target Web page comprising an operation effect of the target component, and taking the target Web page as a preview application page;

And displaying a preview application page corresponding to the target component in the program effect preview page.

In an example, the page content file of the target Web page may be code-combined with the content file of the target component in the split dynamic content file to obtain the target running code corresponding to the target component, and then the running effect corresponding to the target running code may be displayed on the preview application page corresponding to the target component.

In an embodiment, the step "when detecting the selection operation for the target component selection control in the component selection controls, before displaying the preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file" may further include:

Obtaining component Web pages when each component in the split dynamic content file operates based on the page content file of each Web page in the Web program file and the corresponding split dynamic content file;

When the selection operation of the target component selection control in the component selection controls is detected, displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file, wherein the preview application page comprises the following steps:

When a selected operation aiming at a target component selection control in the component selection controls is detected, determining a target component indicated by the target selection control;

Acquiring a Web page of a target component in operation from the component Web page, and taking the Web page as a preview application page corresponding to the target component;

In an embodiment, the program effect preview page further includes: the specific steps of "when detecting the selection operation for the target component selection control in the component selection control, based on the information of the target component indicated by the target component selection control in the Web program file, after displaying the preview application page corresponding to the target component in the program effect preview page", may further include:

Acquiring a replacement code corresponding to the operation code;

changing the running code in the Web program file into a replacement code;

and updating the preview application page corresponding to the display target component based on the replacement code in the program effect preview page.

In an example, the replacement code that needs to replace the running code may be edited in advance locally, and then compiled and uploaded to the Web terminal. The code editing operation can be performed in the code editing area of the program effect preview page, and the editing operation can be performed on the editable running code of the program effect preview page so as to obtain the running code capable of replacing the target component, and further the preview application page corresponding to the target component is updated and displayed.

In an embodiment, the program effect preview page further includes: the code editing area corresponding to the operation code, the code editing area includes the operation code, and the step of acquiring the replacement code corresponding to the operation code may include:

Acquiring edited codes corresponding to the running codes based on the editing operation of the running codes in the code editing area;

when a confirmation operation for the edited code is detected, the edited code is taken as a replacement code for the running code.

In an example, referring to fig. 5, in the component selection control display area, at least one component selection control may be displayed, and one component selection control may be selectively triggered, for example, a target component selection control is selectively triggered, so that a preview application page corresponding to a target component may be displayed in the program effect preview page, and component operation effects in the region a and the region B shown in fig. 5 are displayed in the preview application page.

The code editing region can be used for carrying out code editing operation on the running code to obtain an edited code corresponding to the running code, and after confirming operation on the edited code, the preview application page can be used for updating and displaying the running effect corresponding to the edited code.

In an embodiment, the running code may be edited, and the step of "obtaining the replacement code corresponding to the running code" may include:

When an editing operation aiming at the running code is detected, editing information corresponding to the editing operation is obtained;

When a confirmation operation for the editing information is detected, the editing information is taken as a replacement code for the running code.

In an example, referring to fig. 6, an operation of editing an operation code in a display area of a Web program file may be performed, editing information corresponding to the operation code may be obtained, and after a confirmation operation of the editing information, a preview application page may update and display an operation effect corresponding to the editing information.

In one embodiment, before the step of changing the running code in the Web program file to the replacement code, the method may further include:

Storing the running codes into a preset storage space;

in the program effect preview page, after updating the preview application page corresponding to the display target component based on the replacement code, the method further comprises:

when detecting the code recovery operation aiming at the replacement code, reading the running code corresponding to the replacement code from a preset storage space;

and changing the replacement code in the Web program file into an operation code.

In an example, the code update information may be generated after the running code in the Web program file is changed to the replacement code, where the code update information includes an identifier of the running code, where the identifier is used to indicate a location of the running code in the target subroutine, subroutine identification information (including version information) of the target subroutine in which the running code is located, and an update time. The code update information is added as a log to an update log set for the target subroutine, and when a code recovery operation for the replacement code is detected, the operation code corresponding to the replacement code is stored before being read from the update log set according to the identification of the operation code, and then the replacement code is changed to the operation code corresponding to the replacement code.

In an embodiment, the preview application page includes an operable area, where the operable area is an operation area corresponding to a target component, and after the step of "when detecting a selection operation for the target component selection control in the component selection controls, displaying the preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file" may further include:

When an operation for the operable area is detected, the preview application page is updated in response to the operation based on operation response logic corresponding to the target component in the Web program file.

In one embodiment, the step of updating the preview application page in response to the operation based on the operation response logic corresponding to the target component in the Web program file when the operation for the operable area is detected may include:

when an operation object selection operation for an operable area in the preview application page is detected, determining the operable area as a current operation area;

when an operation for the current operation area is detected, the preview application page is updated in response to the operation based on operation response logic corresponding to the target component in the Web program file.

In one example, referring to FIG. 6, region A of the preview application page can be clicked by a mouse, then scrolling the mouse vertically, and horizontally, as shown in FIG. 6, and so forth, based on the operational response logic corresponding to the target component in the Web program file.

From the above, it can be seen that, in this embodiment, a dependency tree file may be constructed by analyzing a dependency relationship between an application page and a component of a subroutine, and then the dependency tree file is compiled to obtain a Web program file that may be run on a Web terminal, so that the program file of the subroutine may be directly run on the Web terminal.

In light of the foregoing description, the program preview method of the present application will be further described below by way of example. Referring to fig. 7, a program preview method may specifically include the following steps:

701. and acquiring a program file of a target subprogram of the target client program.

The application of the subprogram is more and more extensive, the running effect of the subprogram can be displayed on many network information, and for the subprogram of the formal version, the two-dimensional code can be directly provided, and the subprogram can be used by a user after scanning the code. For documents of a community of client program developers, if the developers are given code scanning to experience the running effect of the subprogram every time, the documents are cumbersome and not intuitive for the developers.

Before the subroutine document runtime (the solution of running the native applet on the Web end) does not appear, the basic capability of the subroutine can be experienced by the user through screenshot, which is more complicated for the user to operate and has poor user experience, so that the running effect of the subroutine can be previewed by directly using the subroutine document runtime on the document, and the operation cost of a developer can be reduced.

However, the technical bottom layer of the subroutine depends on Web technology, and is similar to but different from Web end development. It is not possible to want to run the subroutine directly on the Web side. Therefore, the subroutine document runtime is a solution for running the applet on the Web terminal, firstly, the program file of the subroutine can be obtained, namely, the program file of the target subroutine is obtained, then the program file is analyzed to obtain the dependency tree file of the target subroutine, and finally, the dependency tree file is compiled to obtain the Web program file which can run on the Web terminal.

702. And analyzing the program file to obtain the dependency tree file of the target subprogram.

In one embodiment, the program file is parsed, first, the app.json (global configuration file of the target subroutine) needs to be read to determine the contents of the pages (application pages of the target subroutine) and usingComponents (global components) that are relied upon. The value of usingComponents (global component) is written into global dependency tree usingComponents (the object of the dependency tree) and custom-tab-bar/index (custom tabbar, such as a tab) is also added to the initially parsed codeTree (dependency tree). Next, the content in app.json is read, and the dependency tree overall structure is as follows:

The process of parsing pages is as follows:

Reading the contents of pages, and then performing dependency analysis, wherein the analysis process of the contents of the pages comprises the following steps: firstly, the method and the device are extracted into a module, usingComponents/pages are read, then page contents are compiled in sequence, a global ID is set for each page to be used as an identification, and the following is an example object of the current page.

Next, iterate through the components content, finding the corresponding result by key/value in usingComponents fields.

Using resolveItem (parse function) to process usingComponents and pages parameters, usingComponents (global component) is recorded into the global usingComponents attribute. Then begin parsing pages, first parse all pages using a single cycle. Each page is parsed using resolveItem. Reading each usingComponents field and determining the dependence. Finally, recursive parsing is started through CREATEGRAPH (primary key), and the parsed components are saved by using a global queue, so that circular dependency is prevented, and the CREATEGRAPH circular dependency can be avoided, so that the dependency relationship of the parsed primary key can be saved in the queue.

703. Compiling the dependency tree file to obtain a Web program file which can run on a Web end.

In one embodiment, referring to fig. 3, a dependency tree file is compiled to obtain a compiled dependency tree file, where the compiled dependency tree file includes two parts, that is, a page-frame.html and app-service.js, of a page content file and a dynamic content file, and then the page-frame.html and app-service.js codes are combined to obtain a Web program file that can be run on a Web terminal. For example, the app-service. Js may be split to obtain a plurality of split app-service. Js, and then the page-frame. Html and its corresponding split app-service. Js are code-combined to obtain a Web program file that may be run on the Web terminal.

Html (hypertext markup language-HyperText Markup Language) is one tile and one watt constituting the Web world. It defines the meaning and structure of web page content. Other techniques besides html are typically used to describe the presentation and presentation effects (e.g., CSS) or functions and behaviors (e.g., javaScript) of a web page. "Hypertext" refers to a link that connects web pages within a single website or between multiple websites. Linking is a fundamental aspect of a network. You become an active participant in the world wide web whenever content is uploaded to the internet and linked to pages created by others.

Html uses "markup" to note text, pictures, and other content for display in a Web browser. html tags contain some special "elements" such as <head>,<title>,<body>,<header>,<footer>,<article>,<section>,<p>,<div>,<span>,<img>,<aside>,<audio>,<canvas>,<datalist>,<details>,<embed>,<nav>,<output>,<progress>,<video>, etc.

The html element leads the text out of the document through a tag (tag), the tag consists of element names wrapped in "<" and ">", and the element names in the html tag are not case-independent. That is, they may be written in uppercase, lowercase, or mixed forms. For example, the < Title > tag may be written as < Title >, or in any other way.

Wherein JS (JavaScript) is a programming language, javaScript is commonly used in a browser to enable a developer to manipulate web content through the DOM, which is a dynamic script of a web page commonly used in clients (clients-sides).

704. And acquiring a Web program file capable of running on a Web terminal, wherein the Web program file is obtained by converting a program file of a target subprogram, and the target subprogram is a subprogram of a target client program capable of running on a mobile terminal.

The Web program file is obtained by analyzing the program file of the target subprogram to obtain a dependency tree file of the target subprogram and then compiling the dependency tree file.

In an example, referring to fig. 3, firstly, a program file of a target subroutine is obtained, a dependency relationship between an application page and a component of the target subroutine is read, a dependency tree file of the target subroutine is constructed, the dependency tree file is compiled through a program compiling tool, a compiled dependency tree file is obtained, the compiled dependency tree file includes two parts of page-frame.html and app-service.js, and finally, page-frame.html and app-service.js codes are combined, so that a Web program file is obtained.

705. And displaying a program effect preview page of the Web program file on the Web end, wherein the program effect preview page comprises at least one component selection control, and each component selection control corresponds to one type of component.

In an embodiment, as shown in fig. 1, the program effect preview page may display at least one component selection control in a component selection control display area, display an operation code of a component corresponding to the selected component selection control in a Web program file display area, and display an operation effect corresponding to the operation code of the component in a preview application page.

706. When the selection operation of the target component selection control in the component selection control is detected, displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file, wherein the preview application page represents an application page displayed when the target component runs in the mobile terminal.

In an embodiment, referring to fig. 4, a target component selection control in a component selection control display area may be triggered, an operation code of a target component indicated by the target component selection control is displayed in a Web program file display area, and an operation effect of the operation code of the target component is displayed in a preview application page.

In an example, when an operation is detected for an operable area (such as area a or B) of the preview application page in fig. 4, the preview application page may be updated based on the operation response logic corresponding to the target component in the Web program file, for example, area a in fig. 4 may be scrolled vertically, resulting in a display effect of scrolling vertically through area A, A1 of the preview application page as shown in fig. 6.

As can be seen from the foregoing, in this embodiment, by analyzing the dependency relationship between the application page and the component of the subroutine, a dependency tree file is constructed, and then the dependency tree file is compiled, so as to obtain a Web program file that can be run on the Web terminal, so that the program file of the subroutine can be directly run on the Web terminal.

In order to better implement the above method, correspondingly, the embodiment of the present application further provides a program preview apparatus, where the program preview apparatus may be specifically integrated in a terminal, referring to fig. 8, the program preview apparatus may include a first obtaining unit 801, a first display unit 802, and a second display unit 803, as follows:

(1) A first acquisition unit 801;

The first obtaining unit 801 is configured to obtain a Web program file that can be run on a Web terminal, where the Web program file is obtained by converting a program file of a target sub-program, and the target sub-program is a sub-program of a target client program that can be run on a mobile terminal.

In an embodiment, as shown in fig. 9, the first obtaining unit 801 includes:

A first obtaining subunit 8011, configured to obtain a program file of a target subroutine of the target client program;

the parsing subunit 8012 is configured to parse the program file to obtain a dependency tree file of the target subroutine;

and the compiling subunit 8013 is configured to compile the dependency tree file to obtain a Web program file that can run on the Web terminal.

In an embodiment, the parsing subunit 8012 is further configured to read a dependency relationship between an application page and a component of the target subroutine; and constructing a dependency tree file of the target subprogram according to the program file and the dependency relationship.

In an embodiment, the compiling subunit 8013 is further configured to compile the dependency tree file to obtain a page content file of the Web page corresponding to the application page and a dynamic content file corresponding to the component and used for displaying the Web page; splitting the dynamic content file according to the dependency relationship between the application page and the component to obtain a split dynamic content file; and fusing the page content files with the split dynamic content files corresponding to the page content files to obtain Web program files which can run at a Web end.

(2) A first display unit 802;

a first display unit 802, configured to display a program effect preview page of a Web program file on a Web end, where the program effect preview page includes at least one component selection control, and each component selection control corresponds to a type of component.

(3) A second display unit 803;

and a second display unit 803, configured to, when detecting a selection operation for a target component selection control in the component selection controls, display, in a program effect preview page, a preview application page corresponding to the target component based on information of the target component indicated by the target component selection control in the Web program file, where the preview application page represents an application page displayed when the target component is running in the mobile terminal.

In an embodiment, as shown in fig. 10, the second display unit 803 includes:

A first determining subunit 8031, configured to determine, when a selection operation for a target component selection control in the component selection controls is detected, a target Web page where a target component corresponding to the target selection control is located based on the Web program file;

The obtaining subunit 8032 is configured to obtain a target Web page including an operation effect of the target component based on the page content file of the target Web page in the Web program file and the content file of the target component in the split dynamic content file, and take the target Web page as a preview application page;

The first display subunit 8033 is configured to display a preview application page corresponding to the target component in the program effect preview page.

In an embodiment, as shown in fig. 10, the second display unit 803 includes:

a second determining subunit 8034, configured to determine, when a selection operation for a target component selection control in the component selection controls is detected, a target component indicated by the target selection control;

a second obtaining subunit 8035, configured to obtain, from the component Web pages, a Web page when the target component is running, as a preview application page corresponding to the target component;

the second display subunit 8036 is configured to display a preview application page corresponding to the target component in the program effect preview page.

In an embodiment, the program preview apparatus further includes:

The obtaining unit 804 is configured to obtain, based on the page content file of each Web page in the Web program file and the corresponding split dynamic content file, a component Web page when each component in the split dynamic content file runs.

In an embodiment, the program preview apparatus further includes:

a second obtaining unit 805 configured to obtain a replacement code corresponding to the operation code;

A first changing unit 806, configured to change the running code in the Web program file to a replacement code;

and a second display unit 807 for updating, in the program effect preview page, a preview application page corresponding to the display target component based on the replacement code.

In an embodiment, as shown in fig. 11, the second obtaining unit 805 includes:

a second obtaining subunit 8051, configured to obtain an edited code corresponding to the running code when performing an editing operation for the running code in the code editing area;

the first confirming subunit 8052 is configured to take the edited code as a replacement code for the running code when a confirming operation for the edited code is detected.

In an embodiment, the second obtaining unit 805 includes:

a third acquisition subunit 8053, configured to acquire editing information corresponding to an editing operation when the editing operation for the running code is detected;

the confirmation subunit 8054 is configured to take the editing information as a replacement code for the running code when a confirmation operation for the editing information is detected.

In an embodiment, the program preview apparatus further includes:

And the storage unit 808 is used for storing the running codes into a preset storage space.

In an embodiment, the program preview apparatus further includes:

A reading unit 809 for reading an operation code corresponding to the replacement code from a preset storage space when a code recovery operation for the replacement code is detected;

And a second changing unit 810 for changing the replacement code in the Web program file to the operation code.

In an embodiment, the program preview apparatus further includes:

And a response unit 811, configured to, when an operation for the operable area is detected, update the preview application page in response to the operation based on operation response logic corresponding to the target component in the Web program file.

In an embodiment, as shown in fig. 12, the response unit 811 includes:

A selection subunit 8111 configured to, when an operation object selection operation for an operable area in the preview application page is detected, determine the operable area as a current operation area;

And a response subunit 8112, configured to, when an operation for the current operation area is detected, update the preview application page in response to the operation based on the operation response logic corresponding to the target component in the Web program file.

As can be seen from the above, the first obtaining unit 801 of the program preview apparatus according to the embodiment of the present application obtains the Web program file that can be run on the Web terminal, where the Web program file is obtained by converting the program file of the target sub-program, and the target sub-program is a sub-program of the target client program that can be run on the mobile terminal; then, displaying a program effect preview page of the Web program file on the Web end by the first display unit 802, where the program effect preview page includes at least one component selection control, and each component selection control corresponds to a type of component; when detecting a selection operation for a target component selection control in the component selection controls, the second display unit 803 displays a preview application page corresponding to the target component in the program effect preview page based on information of the target component indicated by the target component selection control in the Web program file, wherein the preview application page represents an application page displayed when the target component is running in the mobile terminal. According to the scheme, the dependency tree file can be constructed by analyzing the dependency relationship between the application page and the component of the subprogram, and then the dependency tree file is compiled to obtain the Web program file capable of running on the Web end, so that the program file of the subprogram can be directly run on the Web end.

In addition, the embodiment of the present application further provides a computer device, which may be a device such as a terminal or a server, as shown in fig. 13, which shows a schematic structural diagram of the computer device according to the embodiment of the present application, specifically:

The computer device may include one or more processors 1001 of a processing core, one or more memories 1002 of a storage medium, a power supply 1003, and an input unit 1004, among other components. Those skilled in the art will appreciate that the computer device structure shown in FIG. 13 is not limiting of the computer device and may include more or fewer components than shown, or may be combined with certain components, or a different arrangement of components. Wherein:

the processor 1001 is a control center of the computer device, connects respective portions of the entire computer device using various interfaces and lines, and performs various functions of the computer device and processes data by running or executing software programs and/or modules stored in the memory 1002 and calling data stored in the memory 1002, thereby performing overall detection of the computer device. Optionally, the processor 1001 may include one or more processing cores; preferably, the processor 1001 may integrate an application processor and a modem processor, wherein the application processor mainly processes an operating system, a user interface, an application program, and the like, and the modem processor mainly processes wireless communication. It will be appreciated that the modem processor described above may not be integrated into the processor 1001.

The memory 1002 may be used to store software programs and modules, and the processor 1001 executes various functional applications and data processing by executing the software programs and modules stored in the memory 1002. The memory 1002 may mainly include a storage program area that may store an operating system, application programs required for at least one function (such as a sound playing function, an image playing function, etc.), and a storage data area; the storage data area may store data created according to the use of the computer device, etc. In addition, memory 1002 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid-state storage device. Accordingly, the memory 1002 may also include a memory controller to provide the processor 1001 with access to the memory 1002.

The computer device also includes a power supply 1003 for powering the various components, preferably, the power supply 1003 is logically connected to the processor 1001 by a power management system, such that charge, discharge, and power consumption management functions are performed by the power management system. The power supply 1003 may also include one or more of any of a direct current or alternating current power supply, a recharging system, a power failure detection circuit, a power converter or inverter, a power status indicator, and the like.

The computer device may also include an input unit 1004, which input unit 1004 may be used to receive input numeric or character information and to generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control.

Although not shown, the computer device may further include a display unit or the like, which is not described herein. In particular, in this embodiment, the processor 1001 in the computer device loads executable files corresponding to the processes of one or more application programs into the memory 1002 according to the following instructions, and the processor 1001 executes the application programs stored in the memory 1002, so as to implement various functions as follows:

Acquiring a Web program file capable of running on a Web terminal, wherein the Web program file is obtained by converting a program file of a target subprogram, and the target subprogram is a subprogram of a target client program capable of running on a mobile terminal; displaying a program effect preview page of a Web program file on a Web end, wherein the program effect preview page comprises at least one component selection control, and each component selection control corresponds to one type of component; when the selection operation of the target component selection control in the component selection control is detected, displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file, wherein the preview application page represents an application page displayed when the target component runs in the mobile terminal.

Those of ordinary skill in the art will appreciate that all or a portion of the steps of the various methods of the above embodiments may be performed by instructions or by controlling associated hardware, which may be stored in a storage medium and loaded and executed by a processor.

To this end, an embodiment of the present application provides a storage medium having stored therein a plurality of instructions capable of being loaded by a processor to perform the steps of any one of the program preview methods provided by the embodiment of the present application. For example, the instructions may perform the steps of:

Wherein the storage medium may include: read Only Memory (ROM), random access Memory (RAM, random Access Memory), magnetic or optical disk, and the like.

The instructions stored in the storage medium can execute the steps in any program preview method provided by the embodiment of the present application, so that the beneficial effects that any program preview method provided by the embodiment of the present application can be achieved, and detailed descriptions of the previous embodiments are omitted herein.

Wherein according to an aspect of the application, a computer program product or a computer program is provided, the computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device performs the program preview method provided in the above summary and embodiments.

The foregoing has described in detail the method, apparatus, computer device and storage medium for program preview provided by the embodiments of the present application, and specific examples have been applied to illustrate the principles and embodiments of the present application, and the above description of the embodiments is only for aiding in understanding the method and core idea of the present application; meanwhile, as those skilled in the art will vary in the specific embodiments and application scope according to the ideas of the present application, the present description should not be construed as limiting the present application in summary.

Claims

1. A program preview method, comprising:

Acquiring a Web program file capable of running on a Web end, wherein the Web program file is obtained by compiling a dependency tree file of a target subprogram, the target subprogram is a subprogram of a target client program capable of running on a mobile terminal, and the dependency tree file of the target subprogram is constructed by analyzing the dependency relationship between an application page and a component of the target subprogram;

2. The method of claim 1, wherein the program effect preview page further comprises: the running code of the target component in the Web program file;

When detecting the selection operation of the target component selection control in the component selection controls, based on the information of the target component indicated by the target component selection control in the Web program file, after displaying the preview application page corresponding to the target component in the program effect preview page, the method further comprises:

Acquiring a replacement code corresponding to the running code;

changing the running code in the Web program file into the replacement code;

and updating and displaying a preview application page corresponding to the target component based on the replacement code in the program effect preview page.

3. The method of claim 2, wherein the program effect preview page further comprises: a code editing area corresponding to the operation code, wherein the code editing area comprises the operation code;

The obtaining the replacement code corresponding to the running code comprises the following steps:

when a confirmation operation for the edited code is detected, the edited code is taken as a replacement code of the running code.

4. The method of claim 2, wherein the run code is editable;

when the editing operation aiming at the running code is detected, editing information corresponding to the editing operation is acquired;

when a confirmation operation for the editing information is detected, the editing information is used as a replacement code of the running code.

5. The method of claim 2, wherein before changing the running code in the Web program file to the replacement code, further comprising:

storing the running codes into a preset storage space;

the program effect preview page, after updating and displaying the preview application page corresponding to the target component based on the replacement code, further includes:

When the code recovery operation for the replacement code is detected, reading the running code corresponding to the replacement code from the preset storage space;

and changing the replacement code in the Web program file into the running code.

6. The method of claim 1, wherein the preview application page includes an operable area, the operable area being an operation area corresponding to the target component;

and when detecting the operation on the operable area, updating the preview application page based on operation response logic corresponding to the target component in the Web program file.

7. The method of claim 6, wherein when detecting an operation for the operable area, updating the preview application page in response to the operation based on operation response logic corresponding to the target component in the Web program file, comprises:

When an operation object selection operation for the operable area in the preview application page is detected, determining the operable area as a current operation area;

And when the operation for the current operation area is detected, updating the preview application page based on operation response logic corresponding to the target component in the Web program file.

8. The method according to any one of claims 1 to 7, wherein the obtaining a Web program file that can be run on a Web side includes:

acquiring a program file of a target subprogram of a target client program;

9. The method of claim 8, wherein parsing the program file to obtain the dependency tree file for the target subroutine comprises:

10. The method according to claim 9, wherein compiling the dependency tree file to obtain a Web program file capable of being executed on a Web terminal comprises:

Compiling the dependency tree file to obtain a page content file of a Web page corresponding to the application page and a dynamic content file corresponding to the component and used for displaying the Web page;

And fusing each page content file with the corresponding split dynamic content file to obtain a Web program file which can run at a Web end.

11. The method according to claim 10, wherein when a selection operation for a target component selection control in the component selection controls is detected, displaying a preview application page corresponding to the target component in the program effect preview page based on information of the target component indicated by the target component selection control in the Web program file, including:

when the selection operation of a target component selection control in the component selection controls is detected, determining a target Web page where a target component corresponding to the target component selection control is located based on the Web program file;

Based on the page content file of the target Web page in the Web program file and the content file of the target component in the split dynamic content file, obtaining the target Web page comprising the operation effect of the target component, and taking the target Web page as a preview application page;

12. The method according to claim 10, wherein when a selection operation for a target component selection control in the component selection controls is detected, based on information of a target component indicated by the target component selection control in the Web program file, before displaying a preview application page corresponding to the target component in the program effect preview page, further comprising:

based on the page content file of each Web page in the Web program file and the corresponding split dynamic content file, obtaining a component Web page when each component in the split dynamic content file operates;

When detecting the selection operation of the target component selection control in the component selection controls, displaying a preview application page corresponding to the target component in the program effect preview page based on the information of the target component indicated by the target component selection control in the Web program file, including:

When a selected operation for a target component selection control in the component selection controls is detected, determining a target component indicated by the target component selection control;

Acquiring a Web page of the target component in operation from the component Web page, and taking the Web page as a preview application page corresponding to the target component;

13. A program preview apparatus, comprising:

The mobile terminal comprises a first acquisition unit, a second acquisition unit and a third acquisition unit, wherein the first acquisition unit is used for acquiring a Web program file capable of running on a Web end, the Web program file is obtained by compiling a dependency tree file of a target subprogram, the target subprogram is a subprogram of a target client program capable of running on a mobile terminal, and the dependency tree file of the target subprogram is obtained by analyzing the dependency relationship between an application page and a component of the target subprogram;

A first display unit, configured to display a program effect preview page of the Web program file on the Web terminal, where the program effect preview page includes at least one component selection control, where each component selection control corresponds to one type of component;

14. 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 steps of the program preview method of any of claims 1 to 12 when the program is executed.

15. A storage medium storing a plurality of instructions adapted to be loaded by a processor to perform the steps of the program preview method of any of claims 1 to 12.