CN117573106A - Front-end H5 project construction method, device, equipment and storage medium - Google Patents

Front-end H5 project construction method, device, equipment and storage medium Download PDF

Info

Publication number
CN117573106A
CN117573106A CN202311775610.4A CN202311775610A CN117573106A CN 117573106 A CN117573106 A CN 117573106A CN 202311775610 A CN202311775610 A CN 202311775610A CN 117573106 A CN117573106 A CN 117573106A
Authority
CN
China
Prior art keywords
code
file
project
platform
low
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311775610.4A
Other languages
Chinese (zh)
Inventor
赵志宏
王谱庆
李常庆
李成钢
蒋思玉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Telecom Corp Ltd
China Telecom Digital Intelligence Technology Co Ltd
Original Assignee
China Telecom Corp Ltd
China Telecom Digital Intelligence Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by China Telecom Corp Ltd, China Telecom Digital Intelligence Technology Co Ltd filed Critical China Telecom Corp Ltd
Priority to CN202311775610.4A priority Critical patent/CN117573106A/en
Publication of CN117573106A publication Critical patent/CN117573106A/en
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/005—General purpose rendering architectures
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • Computer Graphics (AREA)
  • Stored Programmes (AREA)

Abstract

The invention provides a front-end H5 project construction method, a device, equipment and a storage medium, and relates to the field of front-end development. The method comprises the following steps: injecting and packaging the required dragging assembly and configuration information corresponding to the dragging assembly to form a low-code platform; a developer enters the low-code platform, and generates and stores a code file by using the low-code platform; accessing the code file into a frame template management platform, and issuing a project frame address and a password by the frame template management platform to obtain a corresponding project frame by downloading; based on the project framework, predetermined H5 projects are packaged and output. The developer can directly generate the required development framework through combining the editor with the framework template management platform, and the development framework is convenient and quick. In addition, the quick configuration and generation of common component codes can be realized by combining an editor with a low-code platform, so that the time for consulting documents and debugging codes is shortened, and more efforts are concentrated in the optimization process of business logic and a system.

Description

Front-end H5 project construction method, device, equipment and storage medium
Technical Field
The present invention relates to the field of front-end development, and in particular, to a method, an apparatus, a device, and a storage medium for constructing a front-end H5 project.
Background
The rapid iteration of the front-end frames such as Vue, act, angular and the like can help us to quickly build Web-end websites and mobile-end websites through the development suite provided by the frames.
The low code is a visual application development method, and based on modes such as graphic dragging, component parameterized configuration and the like, a developer can quickly realize related function requirements with little code or without code.
At present, the traditional front-end development flow is basically formed by determining a development framework, a UI framework, installing and downloading a scaffold, and the installation project is dependent. And then designing a series of development preparation works such as routing, authentication, webpage layout and the like according to the prototype, and finally starting specific demand work. The preparation work often consumes a lot of time, and part of teams may be internally provided with development frameworks and templates, and even then, the operations of searching for downloads, familiarity with frameworks and installation dependence, and possibly involving project synchronization Git warehouse and the like still are complicated. In the formal development stage, developers often search proper components through a UI website frequently, write corresponding codes through an editor, debug frequently and the like to operate irrelevant business logic. Therefore, the creation of the visible project and the debugging of the UI are often repeated and time-consuming, so that the developer cannot invest more time to the service logic development and the system performance optimization, and the product quality is affected to a certain extent.
Disclosure of Invention
The invention aims to: a method, apparatus, device and storage medium for constructing a front-end H5 project are provided to solve the above problems in the prior art.
In a first aspect, a front-end H5 project construction method is provided, including the following steps:
s1, injecting and packaging required dragging components and configuration information corresponding to the dragging components to form a low-code platform;
s2, a developer enters the low-code platform, and a code file is generated and stored by using the low-code platform;
s3, accessing the code file into a frame template management platform, and issuing a project frame address and a password by the frame template management platform to obtain a corresponding project frame by downloading;
s4, based on the project framework, packaging and outputting a preset front-end H5 project.
In a further embodiment of the first aspect, in step S1, the dragging component is placed in a component folder, where the component folder further includes an encapsulated component source code file and a component configuration information file;
and the developer drags one drag component, namely adding a piece of identified and unique component configuration information into the page information data, and rendering the component to the view area according to the latest page information data by the responsive page.
In a further embodiment of the first aspect, the developer enters the low code platform in step S2, including entering by directory means or entering by file means.
In a further embodiment of the first aspect, when the developer enters the low code platform by way of a directory: the code file is generated by default without providing a save operation, the corresponding code is generated according to the page information of dragging and configuration completion of a developer, and the code is written into a designated file through an editor plug-in, if the file with the same name as the current file can be subjected to an overlay operation.
In a further embodiment of the first aspect, when the developer enters the low code platform by file: the editor plug-in reads file information, extracts component information contained in the low-code platform and transmits the component information to the low-code platform, and a developer updates and modifies the configuration of the page on the basis of the component information;
and (3) when the storing and generating operation is completed, the source file information is compared, the source file specific code segment and the new code segment are integrated to form new code information, and the integrated code is written into the corresponding file by the editor plug-in.
In a further embodiment of the first aspect, when a developer enters the low code platform in a file manner, the low code platform firstly analyzes the file, and analyzes the source code into an AST through a posthtml-server, so that the Dom and a part of attributes can be conveniently traversed, and whether components packaged by the low code platform are contained or not is judged;
the postMessage provided by the vscore is extracted from the contained components and is transmitted to a low-code platform, and the low-code platform initializes the rendering view according to the component data; the developer adds, modifies and deletes components in the page on the basis.
In a further embodiment of the first aspect, when saving or generating a code file is executed, new page information is transferred to an editor plug-in, the editor plug-in respectively analyzes the new code and the source file code into AST through posthtml-parser, traverses and compares the data of the new code and the source file code, updates the same component information, clears component information not included in the new code, and sorts the component sequence of the source code according to the component sequence in the new code;
rendering the integrated AST into a Dom structure code by the plugin through a posthtml-render, and writing the code into a specified directory file; and simultaneously reading a configuration file of the project route, judging whether the configuration file contains the route configuration of the file, and if not, adding the route configuration information corresponding to the file.
In a further embodiment of the first aspect, the developer in step S2 enters the low code platform, and further includes entering by means of a folder;
when the method is accessed in a folder mode, only a code generation button is displayed on a low-code platform, no save operation is needed, after the dragging of a developer is completed, the developer clicks the code generation, and the editor plug-in directly writes the transferred code into a designated file;
and simultaneously reading a configuration file of the project route, judging whether the configuration file contains the route configuration of the file, and if not, adding the route configuration information corresponding to the file.
In a further embodiment of the first aspect, step S3 further includes:
registering an account number by a developer on a frame template management platform, and associating an editor plug-in with the frame template management platform so that the developer can select a frame template;
after selecting the frame template, the frame template management platform issues a project frame address and a password, the plug-in unit downloads the corresponding frame template to a local folder designated by a developer, then adds the project to a working area, and installs the dependence required by the project;
after the required dependencies are installed, the corresponding commands are automatically executed to start the project.
In a further embodiment of the first aspect, step S4 further includes:
a developer names a project to be created, and selects a template provided by a framework template management platform and a file directory in which the project is to be stored;
after clicking the generated item, the editor plug-in obtains the Git address and the access key of the corresponding frame template, and then pulls the corresponding frame template;
the pull completion callbacks add the project file to the workspace.
In a second aspect of the present invention, a front-end H5 item generating apparatus is provided, which includes a packaging unit, an access unit, and an item generating unit.
The packaging unit is used for injecting and packaging the required dragging assembly and configuration information corresponding to the dragging assembly to form a low-code platform; and the developer enters the low-code platform, and generates and saves the code file by using the low-code platform.
The access unit is used for accessing the code file into the frame template management platform, and the frame template management platform issues the project frame address and the password and downloads the project frame address and the password to obtain the corresponding project frame.
The item generating unit packages and outputs a predetermined front-end H5 item based on the item frame.
In a third aspect the invention provides an electronic device comprising a processor and a memory storing computer program instructions; the processor, when executing the computer program instructions, implements the front-end H5 project construction method as described in the first aspect.
In a fourth aspect of the present invention, a computer readable storage medium is provided, in which at least one executable instruction is stored, which when executed on an electronic device, causes the electronic device to perform the front-end H5 item construction method according to the first aspect.
The beneficial effects are that: according to the invention, the project construction and the low code are associated with the editor of the developer by using the common editor tool, and the developer can directly generate the required development frame by combining the editor with the frame template management platform, so that the method is convenient and quick. In addition, developers can realize quick configuration and generation of common component codes through combining a low-code platform by using an editor, so that the time for consulting documents and debugging codes is greatly shortened, and more efforts are concentrated in the optimization process of business logic and a system.
Drawings
FIG. 1 is a flow diagram illustrating the pulling and initializing of items in conjunction with a framework template management platform via an editor plug-in.
FIG. 2 is a low code platform component template package, drag action, and component information configurable execution flow.
FIG. 3 is a low code platform page architecture diagram including three tiles, a component template library selection area, a drag effect view area, and a component configuration area.
Fig. 4 is a flowchart showing the generation and update of a code file by analyzing the file by combining an editor plug-in with a low code platform.
Detailed Description
In the following description, numerous specific details are set forth in order to provide a more thorough understanding of the present invention. It will be apparent, however, to one skilled in the art that the invention may be practiced without one or more of these details. In other instances, well-known features have not been described in detail in order to avoid obscuring the invention.
The embodiment discloses a scheme, medium and system for generating front-end H5 project, generating and analyzing codes and packaging project application programs. The method mainly provides a technical implementation scheme of low-code platform component encapsulation, configurable, source code file generation, modification and analysis playback, and provides a technical scheme of frame template selection, downloading, automatic installation and dependency, project starting and project packaging mobile application program. The whole system structure is shown in fig. 1 and comprises an editor tool plug-in program (the invention takes a VSCode editor commonly used in front-end development as an example), a low-code module, a framework template module and an H5 project packaging mobile application program. The technical scheme mainly comprises four parts:
1. low code platform component template packaging, configurable:
the core of the low code platform is the encapsulation of the drag component and the injection and combination of the relevant configuration information of the corresponding component. We design, encapsulate UI components commonly used in the development process and configuration items that are often modified. All the dragging components are placed in one folder, each component is placed in one folder independently for convenient management, and the component folder comprises a package component source code file and a component configuration information file. And the developer drags to complete a component, namely, one piece of component configuration information with identification and uniqueness is added into the page information data, and the responsive page renders the component to the view area according to the latest page information data. The developer can click on the component on the page view, the low-code platform can display the configuration information form of the corresponding component, the developer can rapidly edit and modify the configuration information such as the style, the attribute and the like of the component through the configuration information form, and the modification of the configuration information of the component can trigger the updating of page information data, so that the responsive page is driven to render the view area according to the page information again. The developer can see a display effect of the corresponding modification configuration.
2. Code file generation, storage and analysis and playback flow:
the developer can enter the low-code platform through the catalog or the file in the editor, and the file generated by the low-code platform by default is placed under the catalog or the catalog where the file is located. When the method enters a low-code platform in a directory mode, a code file is generated by default and no save operation is provided, the code generation function generates a corresponding code according to page information which is dragged and configured by a developer, and the code is written into a designated file through an editor plug-in, if the current file has the same name, the overlay operation is performed. When the file mode enters the low code platform, the editor plug-in unit can read file information, extract component information contained in the low code platform and transmit the component information to the low code platform, a developer can update and modify the page on the basis, the source file information can be compared when the storing and generating operation is carried out after modification, the unique code fragment of the source file and the new code fragment are integrated to form new code information, and the integrated code is written into a corresponding file by the editor plug-in unit.
3. The generation flow of the project framework is as follows:
the developer registers an account number in a frame template management platform, an editor plug-in is associated with the frame template management platform, so that the developer can select a frame template at the moment, after the selection is completed, the frame template management platform issues a project frame address and a password, the plug-in downloads the corresponding frame template to a local folder designated by the developer, then the project is added to a working area, then the required dependence of the project is installed, and after the installation is completed, a corresponding command is automatically executed to start the project.
4. H5 project packaging application scheme (default android compilation environment has been built):
1. the command line is opened in the blank directory, and a command cordova create projectName is entered, creating a cordiva item.
2. An android platform is added to the cordiva project by entering a cd project name command into the cordiva project catalog and inputting a command cordova platform add android-save.
3. The static resource file generated by packing the H5 item is copied to the 'www' folder in the project name item which is created by Cordova.
4. The command line is opened in the root directory of the cordiva item, and a command cordova build android-release-prod-packagetype=apk is input to perform apk packing. The generated apk file is formed in the ProjectPath\platforms\android\app\built\outputs\apk\release\app-release.
5. The packaged apk file is put into a simulator or a real machine to run.
As a preferred embodiment, the frame template selection and pulling of the visual page is performed by a WebView panel provided by the editor plug-in. As shown in fig. 1, a developer may name a project to be created by himself, select a template provided by the framework template management platform and a file directory in which the project is to be stored, and click to generate the project. The editor plug-in can acquire the Git address and the access key of the corresponding frame template, then pull the corresponding frame template, call the updateworkspace eFolesders method provided by the vscore after the pulling is completed, add the project file into the vscore working area, and open the appointed file through the openTextDocument method. The installation project dependence and the starting project need to execute the dependence installation and project starting commands corresponding to the framework template by means of the createOutputChannel method provided by the vscore, a plurality of commands can be set, and the command execution sequence is serial execution.
The low-code platform is designed, the low-code component template selection can be performed by using components in a common UI framework such as an Element UI, an Ant Design and other frameworks for secondary packaging, a special component template can be designed manually, a component packaging format is a component source file and a component template configuration information file, the component template configuration information file is usually in a JSON format, the content mainly comprises a component id, a component name, a component container width and height, component style information, component action configuration information, component data binding information and the like, one group of component configuration information corresponds to one component on a page, and the page is also subjected to component loading according to individual component configuration information and is rendered on the page. When a user pulls a component template, as shown in fig. 3, the configuration information corresponding to the component template is subjected to unique identification processing and added into a page information array, the responsive page detects the update of the page information array and updates the page according to new information, when the component on the view is clicked in the page, the configuration information corresponding to the component is displayed in a configuration information form, the configuration information of the component can be modified through the form, and the page information is updated immediately after modification, so that the view update is driven, and the view effect presented by the corresponding configuration can be seen. The save or generate code operation traverses and combines the template grammar to generate code from the page configuration information array.
The low code platform opening menu is displayed in a working area through a right-key directory or a file by configuring commands arrays of the packages in the package json and adding low code platform opening menu in the explorer/context arrays in the menu objects of the packages in the package json and correspondingly opening the low code platform commands. And (3) registering a register command provided by a vscore in an extension.js file in the editor plug-in root path to realize a command for opening a low code platform, wherein a developer can transfer uri parameters to a callback function of the register command when typing a low code design page in a right key of a working area, and the parameters comprise information of a target folder or a target file.
When the entry mode is a file, we need to parse the file, parse the source code into AST (Abstract Syntax Tree) through posthtml-player, so as to conveniently traverse the Dom and part of the attributes, thereby judging whether to contain the components encapsulated by the low code platform, and transfer the postMessage provided by the vscore extracted from the contained components to the low code platform, and the low code platform initializes the rendering view according to the component data. The developer can add, modify and delete components in the page on the basis. And finally, when the storage or the generation of the code file is executed, transmitting new page information to an editor plug-in, respectively analyzing the new code and the source file code into AST by the editor plug-in through a posthtml-server, traversing and comparing the data of the new code and the source file code, updating the same component information, clearing the component information which is not contained in the new code, and sequencing the component sequence of the source code according to the component sequence in the new code. And finally, rendering the integrated AST into a Dom structure code by the plugin through a posthtml-render, and writing the code into a specified directory file. And simultaneously reading a configuration file of the project route, judging whether the configuration file contains the route configuration of the file, and if not, adding the route configuration information corresponding to the file.
When the entry mode is a folder, only a code generation button is displayed on the low code platform, no save operation is needed, and after the dragging of a developer is completed, the editor plug-in directly writes the transmitted code into a specified file by clicking the generated code. And simultaneously reading a configuration file of the project route, judging whether the configuration file contains the route configuration of the file, and if not, adding the route configuration information corresponding to the file.
As a preferred embodiment, a front-end H5 item generating apparatus is disclosed, which includes a packaging unit, an access unit, and an item generating unit. The packaging unit is used for injecting and packaging the required dragging assembly and configuration information corresponding to the dragging assembly to form a low-code platform; and the developer enters the low-code platform, and generates and saves the code file by using the low-code platform. The access unit is used for accessing the code file into the frame template management platform, and the frame template management platform issues the project frame address and the password and downloads the project frame address and the password to obtain the corresponding project frame. The item generating unit packages and outputs a predetermined front-end H5 item based on the item frame.
As a preferred embodiment an electronic device is proposed, comprising a processor, a memory, a communication interface and a communication bus. The processor, the memory and the communication interface perform communication with each other via a communication bus. The memory is configured to store at least one executable instruction, where the executable instruction causes the processor to execute the front-end H5 project construction method disclosed in the foregoing embodiment. The electronic device may also communicate with one or more external devices (e.g., keyboard, pointing device, bluetooth device, etc.), with one or more devices that enable a user to interact with the electronic device, and/or with any device (e.g., router, modem, etc.) that enables the electronic device to communicate with one or more other computing devices. Such communication may be through an input/output (I/O) interface. And, the electronic device may also communicate with one or more networks such as a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the Internet, through a network adapter. The network adapter communicates with other modules of the electronic device via a bus. It should be appreciated that although not shown, other hardware and/or software modules may be used in connection with an electronic device, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, data backup storage systems, and the like.
As a preferred embodiment, a computer readable storage medium is provided, where at least one executable instruction is stored, where the executable instruction when executed on an electronic device causes the electronic device to perform the operations of the path detection method for IPv6 segmented routing according to the foregoing embodiment. More specific examples of the computer readable storage medium in the present disclosure may include, but are not limited to: 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. The computer readable storage medium may include a data signal propagated in baseband or as part of a carrier wave, with readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A readable signal medium may also be any readable medium that is not a 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.
As described above, although the present invention has been shown and described with reference to certain preferred embodiments, it is not to be construed as limiting the invention itself. Various changes in form and details may be made therein without departing from the spirit and scope of the invention as defined by the appended claims.

Claims (13)

1. The front-end H5 project construction method is characterized by comprising the following steps:
s1, injecting and packaging required dragging components and configuration information corresponding to the dragging components to form a low-code platform;
s2, a developer enters the low-code platform, and a code file is generated and stored by using the low-code platform;
s3, accessing the code file into a frame template management platform, and issuing a project frame address and a password by the frame template management platform to obtain a corresponding project frame by downloading;
s4, based on the project framework, packaging and outputting a preset front-end H5 project.
2. The method for constructing a front-end H5 project according to claim 1, wherein in step S1, the dragging component is placed in a component folder, and the component folder further includes an encapsulated component source code file and a component configuration information file;
and the developer drags one drag component, namely adding a piece of identified and unique component configuration information into the page information data, and rendering the component to the view area according to the latest page information data by the responsive page.
3. The front-end H5 project building method according to claim 1, wherein the developer enters the low-code platform in step S2, including entering by directory means or by file means.
4. The front-end H5 project building method of claim 3, wherein when a developer enters the low code platform by way of a directory: the code file is generated by default without providing a save operation, the corresponding code is generated according to the page information of dragging and configuration completion of a developer, and the code is written into a designated file through an editor plug-in, if the file with the same name as the current file can be subjected to an overlay operation.
5. The front-end H5 project building method of claim 3, wherein when a developer enters the low code platform by way of a file: the editor plug-in reads file information, extracts component information contained in the low-code platform and transmits the component information to the low-code platform, and a developer updates and modifies the configuration of the page on the basis of the component information;
and (3) when the storing and generating operation is completed, the source file information is compared, the source file specific code segment and the new code segment are integrated to form new code information, and the integrated code is written into the corresponding file by the editor plug-in.
6. The method for constructing the front-end H5 project according to claim 5, wherein when a developer enters the low-code platform in a file manner, the low-code platform firstly analyzes the file, and the source code is analyzed into AST through posthtml-parser, so that the Dom and part of attributes can be traversed conveniently, and whether the components packaged by the low-code platform are contained or not is judged;
the postMessage provided by the vscore is extracted from the contained components and is transmitted to a low-code platform, and the low-code platform initializes the rendering view according to the component data; the developer adds, modifies and deletes components in the page on the basis.
7. The method for constructing the front-end H5 project according to claim 6, wherein when storing or generating the code file is performed, new page information is transferred to an editor plug-in, the editor plug-in respectively analyzes the new code and the source file code into AST through posthtml-parser, traverses and compares the data of the new code and the source file code, updates the same component information, clears the component information not included in the new code, and sorts the component sequence of the source code according to the component sequence in the new code;
rendering the integrated AST into a Dom structure code by the plugin through a posthtml-render, and writing the code into a specified directory file; and simultaneously reading a configuration file of the project route, judging whether the configuration file contains the route configuration of the file, and if not, adding the route configuration information corresponding to the file.
8. The front-end H5 project construction method according to claim 1, wherein the developer enters the low-code platform in step S2, further comprising entering by means of a folder;
when the method is accessed in a folder mode, only a code generation button is displayed on a low-code platform, no save operation is needed, after the dragging of a developer is completed, the developer clicks the code generation, and the editor plug-in directly writes the transferred code into a designated file;
and simultaneously reading a configuration file of the project route, judging whether the configuration file contains the route configuration of the file, and if not, adding the route configuration information corresponding to the file.
9. The front-end H5 item construction method according to claim 1, wherein step S3 further comprises:
registering an account number by a developer on a frame template management platform, and associating an editor plug-in with the frame template management platform so that the developer can select a frame template;
after selecting the frame template, the frame template management platform issues a project frame address and a password, the plug-in unit downloads the corresponding frame template to a local folder designated by a developer, then adds the project to a working area, and installs the dependence required by the project;
after the required dependencies are installed, the corresponding commands are automatically executed to start the project.
10. The front-end H5 item construction method according to claim 1, wherein step S4 further comprises:
a developer names a project to be created, and selects a template provided by a framework template management platform and a file directory in which the project is to be stored;
after clicking the generated item, the editor plug-in obtains the Git address and the access key of the corresponding frame template, and then pulls the corresponding frame template;
the pull completion callbacks add the project file to the workspace.
11. A front-end H5 item generating apparatus, comprising:
the packaging unit is used for injecting and packaging the required dragging assembly and configuration information corresponding to the dragging assembly to form a low-code platform; a developer enters the low-code platform, and generates and stores a code file by using the low-code platform;
the access unit is used for accessing the code file into a frame template management platform, and the frame template management platform issues a project frame address and a password and downloads the project frame address and the password to obtain a corresponding project frame;
and the project generating unit packages and outputs a preset front-end H5 project based on the project framework.
12. An electronic device, the device comprising: a processor and a memory storing computer program instructions; the front-end H5 project construction method of any one of claims 1 to 10 when executed by the processor.
13. A computer readable storage medium, characterized in that at least one executable instruction is stored in the storage medium, which executable instruction, when run on an electronic device, causes the electronic device to perform the front-end H5 project construction method according to any of claims 1 to 10.
CN202311775610.4A 2023-12-22 2023-12-22 Front-end H5 project construction method, device, equipment and storage medium Pending CN117573106A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311775610.4A CN117573106A (en) 2023-12-22 2023-12-22 Front-end H5 project construction method, device, equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311775610.4A CN117573106A (en) 2023-12-22 2023-12-22 Front-end H5 project construction method, device, equipment and storage medium

Publications (1)

Publication Number Publication Date
CN117573106A true CN117573106A (en) 2024-02-20

Family

ID=89888226

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311775610.4A Pending CN117573106A (en) 2023-12-22 2023-12-22 Front-end H5 project construction method, device, equipment and storage medium

Country Status (1)

Country Link
CN (1) CN117573106A (en)

Similar Documents

Publication Publication Date Title
CN110597506B (en) Front-end application visualization development tool and use method
US8392880B2 (en) Rapid application development for database-aware applications
US6269475B1 (en) Interface for object oriented programming language
JP4195479B2 (en) Incremental generation system
US10437574B2 (en) System and method for providing code completion features for code modules
US8726233B1 (en) System and method of using an active link in a state programming environment to locate an element
US20070044066A1 (en) Embedded multi-language programming
US9952837B1 (en) Reusable component in a modeling environment
US8701084B1 (en) Preview of auto-fix changes to software code
CN111241454A (en) Method, system and device for generating webpage code
US9940104B2 (en) Automatic source code generation
US20140298290A1 (en) Identification of code changes using language syntax and changeset data
JP2007511834A (en) Method and system for reversible design tree transformation
US9715372B2 (en) Executable guidance experiences based on implicitly generated guidance models
US20200097260A1 (en) Software application developer tools platform
US6792598B2 (en) Integrated source code file and method and apparatus for creating a computer program therefrom
CN114217789A (en) Function component expansion method, device, equipment, storage medium and program product
US8700374B1 (en) System and method of using an active link in a state programming environment to locate an element in a graphical programming environment
CN117215556A (en) Modularized page rapid construction method, system, equipment and medium
US20230195825A1 (en) Browser extension with automation testing support
CN112632333A (en) Query statement generation method, device, equipment and computer readable storage medium
CN116755669A (en) Low code development method and tool based on DSL language operation model
CN112181483B (en) Plasma control system software development platform and method
CN117573106A (en) Front-end H5 project construction method, device, equipment and storage medium
EP4336348A1 (en) Iterative and interactive method for code conversion

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination