CN111078228A

CN111078228A - Method and device for converting webpage into small program, server and storage medium

Info

Publication number: CN111078228A
Application number: CN201911328346.3A
Authority: CN
Inventors: 方永清; 陈丹
Original assignee: Shenzhen Lexin Software Technology Co Ltd
Current assignee: Shenzhen Lexin Software Technology Co Ltd
Priority date: 2019-12-20
Filing date: 2019-12-20
Publication date: 2020-04-28

Abstract

The embodiment of the invention discloses a method, a device, a server and a storage medium for converting a webpage into an applet, wherein the method comprises the following steps: traversing vue files of a webpage to be converted, and decomposing the vue file into a template part, a code part and a style part through a regular expression; and respectively converting the template part, the code part and the style part into small program files. The embodiment of the invention realizes the conversion from the webpage to the applet, so that a developer only needs to write a set of program codes based on an vue framework to enable the application program to run in two modes of the front-end webpage and the applet, the development cost of the application program is reduced, and the development efficiency of the developer is improved.

Description

Method and device for converting webpage into small program, server and storage medium

Technical Field

The embodiment of the invention relates to the technical field of computers, in particular to a method and a device for converting a webpage into an applet, a server and a storage medium.

Background

The small programs are all called as WeChat small programs (Mini Program), are an implementation mode of an application Program newly released in recent years by WeChat, are the application programs which can be used without downloading and installing, realize the dream of the application Program being reachable by hands, and can be opened by scanning or searching by a user.

Due to the simplicity and convenience of the applet, the applet is popular with users since the applet is online, so that enterprises need to develop the applet function. However, the applet is an MINA (multiple information architecture for network applications) framework for wechat self-research, most domestic front-end web pages are developed based on the vue framework at present, program codes developed based on the two frameworks cannot be directly used universally, and if an application program is intended to be used by a user in a front-end web page mode and is intended to be used by the user in a small program mode, a developer needs to compile two sets of different program codes based on the two frameworks, so that the development cost of the application program is improved, and the development efficiency of the developer is also reduced.

Disclosure of Invention

The embodiment of the invention provides a method, a device, a server and a storage medium for converting a webpage into an applet, so as to realize the conversion from the webpage to the applet, reduce the development cost of an application program and improve the development efficiency.

In a first aspect, an embodiment of the present invention provides a method for converting a web page into an applet, including:

traversing vue files of a webpage to be converted, and decomposing each vue file into a template part, a code part and a style part through a regular expression;

and respectively converting the template part, the code part and the style part into small program files.

Further, the converting the template portion, the code portion, and the style portion into applet files, respectively, includes:

converting the template part into the content of a first applet file according to a first preset rule;

converting the code part into the content of a second applet file according to a second preset rule;

and converting the style part into the content of a third applet file according to a third preset rule.

Further, the converting the template part into the content of the first applet file according to the first preset rule includes:

converting the attribute statement of the template part into an applet attribute statement according to an attribute modification rule;

converting the event statement of the template part into an applet event statement according to an event modification rule;

and converting the grammar sentences of the template part into small program grammar sentences according to grammar modification rules.

Further, the converting the code portion into the content of the second applet file according to the second preset rule includes:

changing the export default of the outermost layer into Page () of the applet;

the outer methods, inner, were developed and changed to the mini-Page first-order method;

the attribute assignment method is changed to set data () of the applet.

Further, the converting the style part into the content of the third applet file according to a third preset rule includes:

paving nested codes of the code part;

and naming the flattened codes according to the names of the codes and the names of the parent selectors of the codes.

Further, the method also comprises the following steps:

judging the type of each vue file;

if the vue file is of a component type, placing the corresponding vue file-converted applet file under a preset component file of the applet;

and if the vue file is of a page type, placing the corresponding converted vue file into a preset page file of the applet.

Further, the preset component file is a usingComponents file, and the preset page file is a pages file.

In a second aspect, an embodiment of the present invention provides an apparatus for converting a web page into an applet, including:

vue file decomposition module, which is used to traverse vue files of the web page to be converted, and decompose each vue file into a template part, a code part and a style part through a regular expression;

vue file conversion module for converting the template part, code part and style part into small program files respectively.

In a third aspect, an embodiment of the present invention provides a server, where the server includes:

one or more processors;

a storage device for storing one or more programs,

when the one or more programs are executed by the one or more processors, the one or more processors implement the method for converting a web page into an applet, provided in any of the embodiments of the present invention.

In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements a method for converting a web page into an applet, which is provided in any embodiment of the present invention.

According to the method for converting the webpage into the small program, provided by the embodiment of the invention, the vue file of the webpage to be converted is traversed, and the vue file is decomposed into a template part, a code part and a style part through a regular expression; and respectively converting the template part, the code part and the style part into small program files. The conversion from the webpage to the applet is realized, so that a developer can operate the application program in two modes of a front-end webpage and the applet only by compiling a set of program codes based on an vue frame, the development cost of the application program is reduced, and the development efficiency of the developer is improved.

Drawings

Fig. 1 is a schematic flowchart of a method for converting a web page into an applet according to an embodiment of the present invention;

fig. 2 is a schematic flowchart of a method for converting a web page into an applet according to a second embodiment of the present invention;

fig. 3 is a schematic structural diagram of a device for converting a web page into an applet according to a third embodiment of the present invention;

fig. 4 is a schematic structural diagram of a server according to a fourth embodiment of the present invention.

Detailed Description

The present invention will be described in further detail with reference to the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting of the invention. It should be further noted that, for the convenience of description, only some of the structures related to the present invention are shown in the drawings, not all of the structures.

Before discussing exemplary embodiments in more detail, it should be noted that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although a flowchart may describe the steps as a sequential process, many of the steps can be performed in parallel, concurrently or simultaneously. In addition, the order of the steps may be rearranged. A process may be terminated when its operations are completed, but may have additional steps not included in the figure. A process may correspond to a method, a function, a procedure, a subroutine, a subprogram, etc.

Furthermore, the terms "first," "second," and the like may be used herein to describe various orientations, actions, steps, elements, or the like, but the orientations, actions, steps, or elements are not limited by these terms. These terms are only used to distinguish one direction, action, step or element from another direction, action, step or element. For example, a first applet file may be referred to as a second applet file, and similarly, a second applet file may be referred to as a first applet file, without departing from the scope of the present application. The first applet file and the second applet file are both applet files, but are not the same applet file. The terms "first", "second", etc. are not to be construed as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of the present invention, "plurality", "batch" means at least two, e.g., two, three, etc., unless specifically limited otherwise.

Example one

Fig. 1 is a flowchart illustrating a method for converting a web page into an applet according to an embodiment of the present invention, where the embodiment is applicable to converting a front-end web page developed based on an vue framework into a wechat applet. As shown in fig. 1, a method for converting a web page into an applet according to an embodiment of the present invention includes:

s110, traversing vue files of the webpage to be converted, and decomposing each vue file into a template part, a code part and a style part through a regular expression.

Specifically, the web page to be converted is a front-end web page that needs to be converted into a WeChat applet, that is, a foreground part of a website, and is displayed on browsers such as a PC (personal computer) end and a mobile end for a user to browse. The vue file refers to a program code file of a converted web page written based on the vue framework. A web page can be regarded as a project developed by a developer, so that an vue file of the web page to be converted can also be called a project vue file, and a project usually comprises a plurality of vue files.

An vue file typically includes three parts, a template part, a code part and a style part, the template part is also called template part, and defines the template of vue file; the code part is also called a script part and comprises a script program code of vue files; the Style part is also called css (Cascading Style Sheets) part and defines vue webpage Style content in the file.

The Regular Expression is also called a Regular Expression (RE), and describes a pattern (pattern) for matching a character string, and has functions of checking whether a string contains a certain substring, replacing the matched substring, or extracting a substring meeting a certain condition from a certain string. The vue file may be decomposed into a template portion, a code portion, and a style portion by regular expressions.

And S120, respectively converting the template part, the code part and the style part into small program files.

Specifically, the applet file also typically includes three parts, namely, a wxml (Weixin markup language) file, a js (javascript) file, and a wxss (Weixin Style Sheets) file. To convert the front end web page into an applet, the template portion of the vue file needs to be converted into a wxml file, the code portion of the vue file needs to be converted into a js file, and the style portion of the vue file needs to be converted into a wxss file, so that the vue file is converted into an applet file, and the converted web page can be run in the form of a wechat applet.

Example two

Fig. 2 is a flowchart illustrating a method for converting a web page into an applet according to a second embodiment of the present invention, which is a refinement of the above embodiment. As shown in fig. 2, a method for converting a web page into an applet according to a second embodiment of the present invention includes:

s210, traversing vue files of the webpage to be converted, and decomposing each vue file into a template part, a code part and a style part through a regular expression;

specifically, the web page to be converted is a front-end web page that needs to be converted into a WeChat applet, that is, a foreground part of a website, and is displayed on browsers such as a PC (personal computer) end and a mobile end for a user to browse. The vue file refers to a program code file of a converted web page written based on the vue framework. A web page can be regarded as a project developed by a developer, so that an vue file of the web page to be converted can also be called a project vue file, and a project usually includes a plurality of cue files.

An item vue file typically includes three parts, a template part, a code part, and a style part, respectively, the template part, also known as a template part, defining a template for the vue file; the code part is also called a script part and comprises a script program code of vue files; the Style part is also called css (Cascading Style Sheets) part and defines vue webpage Style content in the file.

S220, converting the template part into the content of the first applet file according to a first preset rule.

Specifically, the first applet file is a wxml file, and the first preset rule may also be a corresponding regular expression. The template part of the vue file is firstly placed into a newly-built wxml file, and then the content of the template part is converted into the content of the wxml file through a regular expression.

Further, a method of converting the template part into the content of the first applet file according to a first preset rule includes steps S221 to S223 (not shown in the figure).

S221, converting the attribute statement of the template part into an applet attribute statement according to an attribute modification rule.

Specifically, the attribute modification rule is to convert the format of the attribute statement in the template part in the vue file into the attribute statement format of the applet, for example, to convert attr ═ value into attr ═ value } ".

S222, converting the event statement of the template part into an applet event statement according to an event modification rule.

Specifically, the event modification rule is to convert the format of the event statement in the template part in the vue file into the event statement format of the applet, for example, converting @ click to "clickEvent" into bind.

And S223, converting the grammar sentence of the template part into an applet grammar sentence according to a grammar modification rule.

Specifically, the syntax modification rule is to convert the format of syntax statements in template portion of vue file into the syntax statement format of applet, for example, v-if is converted into wx: if, v-for is converted into wx: for.

And S230, converting the code part into the content of the second applet file according to a second preset rule.

Specifically, the second applet file is a js file, and the second preset rule may also be a corresponding regular expression. The script part of the vue file is firstly placed into a newly-built js file, and then the content of the script part is converted into the content of the js file through a regular expression.

Further, a method of converting the code portion into the content of the second applet file according to a second preset rule includes steps S231 to S233 (not shown in the figure).

S231, changing the export default of the outermost layer into Page () of the applet.

S232, the method of the outer layer methods, namely the inner method, is expanded and changed into a Page first-level method of the small program.

S233, changing the attribute assignment method into set data () of the applet.

And S240, converting the style part into the content of the third applet file according to a third preset rule.

Specifically, the third applet file is a wxss file, the css part of the vue file is placed in the newly-built wxss file, the css is written in a nested form, but the applet pattern does not support nesting, so that the nested css needs to be laid flat and converted into the applet pattern.

Further, a method of converting the style part into the content of the third applet file according to a third preset rule includes steps S241 to S242 (not shown in the figure).

S241, paving the nested codes of the code part.

And S242, naming the flattened codes according to the names of the codes and the names of the parent selectors of the codes.

Specifically, after the nested css part is flattened, in order to avoid that the flattened codes cannot be distinguished, the names of the codes and the names of parent selectors thereof are combined, and the flattened codes are named.

And S250, judging the type of each vue file.

Specifically, vue files generally include two types, component type and page type, components are simple packages of data and methods that are generally not directly accessible to a user. A page typically includes a plurality of components and an item typically includes a plurality of pages, i.e., a front end web page typically includes a plurality of pages. When a user browses a front-end webpage, the front-end webpage is actually realized through an access address of the webpage, so that the webpage is configured with the access address, which is also called as routing configuration. Therefore, whether the vue file is a component type or a page type can be determined by whether the file has a routing configuration, if the vue file has a routing configuration, the file is a page type, and step S270 is executed; if there is no route configuration, it is the component type, and step S260 is executed.

And S260, if the vue file is of a component type, placing the corresponding vue file-converted applet file under a preset component file of the applet.

Specifically, the applet needs to distinguish the page and the component, and if the vue file is a component type, the converted applet file is also a component type, and the converted applet file should be placed under a preset component file of the applet, where the preset component file is a usangcomponents file.

And S270, if the vue file is of a page type, placing the vue file under a preset page file of an applet.

Specifically, if the vue file is of a page type, the converted applet file is also of a page type, and the applet file should be placed under a preset page file of the applet, where the preset page file is a pages file.

Alternatively, where the determination of the vue file type does not refer to or contradict the conversion of the vue file, steps S250-S270 may be performed before step S210.

The method for converting the webpage into the applet provided by the second embodiment of the invention realizes the conversion from the webpage to the applet by gradually analyzing and converting the vue file, so that a developer only needs to write a set of program codes based on a vue frame to enable the application program to run in two modes of a front-end webpage and the applet, the development cost of the application program is reduced, and the development efficiency of the developer is improved.

EXAMPLE III

Fig. 3 is a schematic structural diagram of a device for converting a web page into an applet according to a third embodiment of the present invention, which is applicable to converting a front-end web page developed based on an vue framework into a wechat applet. The device for converting a web page into an applet provided in this embodiment can implement the method for converting a web page into an applet provided in any embodiment of the present invention, and basically implement the corresponding functional structure and advantageous effects of the method, and reference may be made to the description of any method embodiment of the present invention for content that is not described in the present embodiment.

As shown in fig. 3, a device for converting a web page into an applet according to a third embodiment of the present invention includes: vue file decomposition module 310 and vue file conversion module 320.

The vue file decomposition module 310 is used for traversing vue files of a webpage to be converted, and decomposing each vue file into a template part, a code part and a style part through a regular expression;

vue File conversion Module 320 is used to convert the template portion, code portion and style portion into applet files, respectively.

Further, the vue file transformation module 320 includes:

the template part converting unit is used for converting the template part into the content of the first applet file according to a first preset rule;

the code part conversion unit is used for converting the code part into the content of the second applet file according to a second preset rule;

and the style part conversion unit is used for converting the style part into the content of the third applet file according to a third preset rule.

Further, the template portion conversion unit is specifically configured to:

Further, the code portion conversion unit is specifically configured to:

changing the export default of the outermost layer into Page () of the applet;

the attribute assignment method is changed to set data () of the applet.

Further, the style part conversion unit is specifically configured to:

paving nested codes of the code part;

Further, the system further comprises an vue file type determining module, wherein the vue file type determining module is specifically configured to:

judging the type of each vue file;

The conversion device from the webpage to the applet provided by the third embodiment of the invention realizes the conversion from the webpage to the applet through the vue file decomposition module and the vue file conversion module, so that a developer only needs to write a set of program codes based on a vue framework to enable the application program to run in two modes of a front-end webpage and the applet, the development cost of the application program is reduced, and the development efficiency of the developer is improved.

Example four

Fig. 4 is a schematic structural diagram of a server according to a fourth embodiment of the present invention. FIG. 4 illustrates a block diagram of an exemplary server 412 suitable for use in implementing embodiments of the present invention. The server 412 shown in fig. 4 is only an example and should not bring any limitations to the function and scope of use of the embodiments of the present invention.

As shown in FIG. 4, server 412 is in the form of a general purpose server. Components of server 412 may include, but are not limited to: one or more processors 416, a storage device 428, and a bus 418 that couples the various system components including the storage device 428 and the processors 416.

Bus 418 represents one or more of any of several types of bus structures, including a memory device bus or memory device controller, a peripheral bus, an accelerated graphics port, and a processor or local bus using any of a variety of bus architectures. By way of example, such architectures include, but are not limited to, Industry Standard Architecture (ISA) bus, Micro Channel Architecture (MAC) bus, enhanced ISA bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus.

Server 412 typically includes a variety of computer system readable media. Such media can be any available media that is accessible by server 412 and includes both volatile and nonvolatile media, removable and non-removable media.

Storage 428 may include computer system readable media in the form of volatile Memory, such as Random Access Memory (RAM) 430 and/or cache Memory 432. The server 412 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 434 may be used to read from and write to non-removable, nonvolatile magnetic media (not shown in FIG. 4, commonly referred to as a "hard drive"). Although not shown in FIG. 4, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk such as a Compact disk Read-Only Memory (CD-ROM), Digital Video disk Read-Only Memory (DVD-ROM) or other optical media may be provided. In these cases, each drive may be connected to bus 418 by one or more data media interfaces. Storage 428 may include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the invention.

A program/utility 440 having a set (at least one) of program modules 442 may be stored, for instance, in storage 428, such program modules 442 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which examples or some combination thereof may comprise an implementation of a network environment. The program modules 442 generally perform the functions and/or methodologies of the described embodiments of the invention.

The server 412 may also communicate with one or more external devices 414 (e.g., keyboard, pointing server, display 424, etc.), with one or more servers that enable a user to interact with the server 412, and/or with any servers (e.g., network card, modem, etc.) that enable the server 412 to communicate with one or more other computing servers. Such communication may occur via input/output (I/O) interfaces 422. Further, server 412 may communicate with one or more networks (e.g., a Local Area Network (LAN), Wide Area Network (WAN), and/or a public Network, such as the Internet) via Network adapter 420. As shown in FIG. 4, network adapter 420 communicates with the other modules of server 412 via bus 418. It should be appreciated that although not shown in the figures, other hardware and/or software modules may be used in conjunction with the server 412, including but not limited to: microcode, server drives, Redundant processors, external disk drive Arrays, disk array (RAID) systems, tape drives, and data backup storage systems, to name a few.

The processor 416 executes various functional applications and data processing by running programs stored in the storage device 428, for example, implementing a method for converting a web page into an applet, which may include:

EXAMPLE five

An embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements a method for converting a web page into an applet, where the method may include:

Computer storage media for embodiments of the invention may employ any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.

Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or terminal. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).

It is to be noted that the foregoing is only illustrative of the preferred embodiments of the present invention and the technical principles employed. It will be understood by those skilled in the art that the present invention is not limited to the particular embodiments described herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the invention. Therefore, although the present invention has been described in greater detail by the above embodiments, the present invention is not limited to the above embodiments, and may include other equivalent embodiments without departing from the spirit of the present invention, and the scope of the present invention is determined by the scope of the appended claims.

Claims

1. A method for converting a web page into an applet, comprising:

2. The method of claim 1, wherein said separately converting the template portion, code portion, and style portion into applet files comprises:

3. The method of claim 2, wherein said converting the template portion to the contents of the first applet file according to the first preset rules comprises:

4. The method of claim 2, wherein said converting the code portion into the contents of the second applet file according to the second preset rule comprises:

changing the export default of the outermost layer into Page () of the applet;

the attribute assignment method is changed to set data () of the applet.

5. The method of claim 2, wherein the converting the style part into the content of the third applet file according to a third preset rule comprises:

paving nested codes of the code part;

6. The method of claim 1, further comprising:

judging the type of each vue file;

7. The method of claim 5, wherein the preset component file is a usangcomponents file and the preset page file is a pages file.

8. An apparatus for converting a web page into an applet, comprising:

9. A server, characterized in that the server comprises:

one or more processors;

a storage device for storing one or more programs,

when executed by the one or more processors, cause the one or more processors to implement the method of converting a web page to an applet of any one of claims 1-7.

10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out a method of converting a web page to an applet according to any one of claims 1-7.