CN113590125A - Applet development method and device - Google Patents
Applet development method and device Download PDFInfo
- Publication number
- CN113590125A CN113590125A CN202110944780.5A CN202110944780A CN113590125A CN 113590125 A CN113590125 A CN 113590125A CN 202110944780 A CN202110944780 A CN 202110944780A CN 113590125 A CN113590125 A CN 113590125A
- Authority
- CN
- China
- Prior art keywords
- routing
- file
- page
- life cycle
- grammar
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 83
- 238000011161 development Methods 0.000 title claims abstract description 31
- 230000008569 process Effects 0.000 claims abstract description 41
- 238000006243 chemical reaction Methods 0.000 claims description 12
- 238000002347 injection Methods 0.000 claims description 9
- 239000007924 injection Substances 0.000 claims description 9
- 238000004806 packaging method and process Methods 0.000 claims description 8
- 230000015572 biosynthetic process Effects 0.000 claims description 3
- 238000003786 synthesis reaction Methods 0.000 claims description 3
- 238000010276 construction Methods 0.000 claims description 2
- 230000006870 function Effects 0.000 description 20
- 238000004891 communication Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 5
- 230000001419 dependent effect Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000002194 synthesizing effect Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000013507 mapping Methods 0.000 description 3
- 230000000750 progressive effect Effects 0.000 description 3
- 239000000243 solution Substances 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 101100127285 Drosophila melanogaster unc-104 gene Proteins 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 230000008447 perception Effects 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
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/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/186—Templates
-
- 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/31—Programming languages or programming paradigms
-
- 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/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Computing Systems (AREA)
- Stored Programmes (AREA)
Abstract
The application discloses a method and a device for developing an applet, which comprise the following steps: inserting the parameter configuration into a predefined engineering template to generate an engineering project, wherein the engineering template is created based on a predefined file structure relationship, a file format and a common grammar; analyzing the engineering project, and converting according to a preset common grammar rule to generate an entry file and routing configuration information which conform to the common grammar rule; injecting a library and/or global configuration which the engineering project depends on into the entry file to obtain a processed entry file; and generating the applet application according to the processed entry file and the routing configuration information. The engineering project is created based on the engineering template, so that the structure is clear and simple, the unified development style is followed, and the maintainability is high. In addition, the development process is only carried out depending on public grammar rules, self-defined private grammar is omitted, and the learning cost of developers is reduced.
Description
Technical Field
The present application relates to the field of computer software technologies, and in particular, to a method and an apparatus for developing an applet.
Background
The applet is a brand-new application for connecting users and services, and can be installed in various host environments (mobile phone apps, vehicle-mounted systems, IoT equipment and the like) without perception by the users, namely the applet can be used at any point, and the applet can be used after being used up, so that the trouble of the users caused by the installation of too many apps is avoided.
Various small program platforms are various at present, such as WeChat, Paibao, Baidu, headline news and the like. These platforms all have their own set of development framework, syntax and development tools, and are not compatible with each other. For each applet platform, an applet application adapted to the applet platform needs to be developed separately. This undoubtedly increases the development learning cost and reduces the development efficiency.
At the same time, this is in contradistinction to the inherent cross-platform property "Write once, run anywhere, WORA" of the front-end development language (HTML, CSS of the W3C standard, JavaScript of the ECMAScript specification).
The uni-app developed by DCloud corporation is an applet development framework developed by using vue. js, is developed based on Vue grammar, smoothes grammar difference of each applet platform to a certain extent, and can be released to each applet platform, iOS, Android, Web and other platforms.
On one hand, however, the Vue grammar supported by the uni-app is limited, and the uni-app needs to be developed by using the supported grammar against the development document when in use; on the other hand, the project structure created by the uni-app needs to contain the component folder of the corresponding platform when the corresponding platform component is used. When the number of facing platforms is large, the project structure becomes complicated. Even if a new applet platform appears, the development framework is required to additionally increase the adaptation process.
In addition, in a multi-person collaborative development mode, the development styles of each person are different, poor development experience is brought, and difficulty is increased for later maintenance of the project.
Therefore, when building the small program platform, the development learning threshold is reduced, and the consistency of team development is maintained, which is an important technical problem to be solved.
Disclosure of Invention
In view of the above, the present application provides an applet developing method and apparatus to develop an applet compatible with multiple application platforms.
To achieve the above object, a first aspect of the present application provides an applet developing method, including:
inserting the parameter configuration into a predefined engineering template to generate an engineering project, wherein the engineering template is created based on a predefined file structure relationship, a file format and a common syntax;
analyzing the engineering project, and converting according to a preset common grammar rule to generate an entry file and routing configuration information which accord with the common grammar rule;
injecting a library and/or global configuration depended by the engineering project into the entry file to obtain a processed entry file;
and generating the applet application according to the processed entry file and the routing configuration information.
Preferably, the process of parsing the engineering project and converting the engineering project according to a preset common grammar rule to generate an entry file conforming to the common grammar rule includes:
analyzing the engineering project to obtain an original entry file;
and converting the life cycle of the original entry file according to Vue grammar and life cycle conversion rules, and injecting an application-level life cycle to generate an entry file conforming to Vue grammar rules.
Preferably, the process of analyzing the engineering project and converting the engineering project according to a preset common syntax rule to generate the routing configuration information conforming to the common syntax rule includes:
analyzing the engineering project to obtain original route configuration information;
and converting the original routing configuration information according to Vue grammar rules to generate routing configuration information conforming to Vue grammar rules.
Preferably, the process of generating an applet according to the processed entry file and the routing configuration information includes:
and assembling the routing page corresponding to the routing configuration information into an applet page according to the routing configuration information, and packaging the applet page and the processed entry file into an applet application.
Preferably, the process of assembling the routing configuration information into an applet page includes:
acquiring a routing page according to the routing configuration information;
analyzing the routing page to acquire the life cycle and the component information of the routing page;
converting the life cycle of the routing page into an application-level life cycle and Vue grammar life cycle, and injecting corresponding components into the routing page according to the component information of the routing page to obtain a processed routing page;
and assembling the processed routing pages into a single file conforming to Vue grammar, and forming the applet pages by the single file conforming to Vue grammar.
Preferably, the process of analyzing the routing page and acquiring the life cycle and the component information of the routing page includes:
analyzing the index.js file of the routing page to obtain the life cycle of the routing page;
and analyzing the index and json file of the routing page to acquire the component information of the routing page.
Preferably, the process of injecting the corresponding component into the routing page according to the component information of the routing page includes:
judging whether the routing page contains a self-defined component or not according to the component information of the routing page;
and if so, injecting the self-defining component into the index.js file of the routing page through the AST.
Preferably, the process of converting the lifecycle of the routing page into the lifecycle of the application-level lifecycle and Vue grammar comprises:
and converting the life cycle of the routing page into the corresponding life cycle of the application level life cycle and the life cycle of the Vue grammar according to the corresponding relation between the preset life cycle of the routing page and the application level life cycle and the corresponding relation between the life cycle of the routing page and the life cycle of the Vue grammar.
Preferably, the file types of the source file include html, css, js, and json file types.
A second aspect of the present application provides an applet developing apparatus, including:
a construction unit for inserting the parameter configuration into a predefined engineering template to generate an engineering project, wherein the engineering template is created based on a predefined file structure relationship, a file format and a common syntax;
the conversion unit is used for analyzing the engineering project and converting the engineering project according to a preset common grammar rule so as to generate an entry file and routing configuration information which accord with the common grammar rule;
the injection unit is used for injecting a library and/or global configuration which the engineering project depends on into the entry file to obtain a processed entry file;
and the synthesis unit is used for generating the applet application according to the processed entry file and the routing configuration information.
According to the technical scheme, the engineering template is defined through the pre-designed file structure relationship, file format and common grammar. The engineering project created based on the engineering template has a directory system with the same file structure, and the code files of the engineering project adopt the same file format and are constrained to the same public grammar, so that the structure of the engineering project is clear and simple, the engineering project follows a uniform development style, and the maintainability is high.
In addition, the project is analyzed and converted according to a preset public grammar rule to generate an entry file and routing configuration information which accord with the preset public grammar rule; then injecting the library and/or the global configuration depended by the engineering project into the entry file; and finally, assembling and packaging to generate the applet application. The development process is only carried out depending on the preset public grammar rule without self-defined private grammar, and the learning cost of developers is reduced.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.
FIG. 1 is a schematic diagram of an applet development method disclosed in an embodiment of the present application;
FIG. 2 illustrates a file structure of an engineering project disclosed by an embodiment of the present application;
fig. 3 illustrates a template of a package json file disclosed in an embodiment of the present application;
fig. 4 illustrates a processed package json file disclosed in an embodiment of the present application;
FIG. 5 is a schematic diagram of an applet developing apparatus disclosed in an embodiment of the present application;
fig. 6 is a block diagram of a hardware structure of an applet developing apparatus disclosed in an embodiment of the present application.
Detailed Description
For the sake of reference and clarity, the descriptions, abbreviations or abbreviations of the technical terms used hereinafter are summarized as follows:
vue: is a set of progressive framework for constructing a user interface;
AST: abstract Syntax Tree (AST), which is a Tree representation of the Abstract Syntax structure of source code, here specifically the source code of the programming language;
html (html): hypertext Markup Language (Hyper Text Markup Language) is a Markup Language that defines the meaning and structure of web page content. Technologies other than HTML are commonly used to describe the rendering and presentation (e.g., CSS) or functionality and behavior (e.g., JavaScript) of a web page;
js: JavaScript, a lightweight, interpreted or just-in-time web programming language with function precedence;
cs: cascading Style Sheets (CSS), a Style sheet language used to describe the presentation of HTML or XML (including XML branching languages such as SVG, MathML, XHTML) documents;
json: is a grammar rule for serializing objects, arrays, values, strings, boolean values and null.
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
Before describing the technical solution of the present application, a development environment and an application environment of the applet development method of the present application are briefly introduced. According to the applet development method of the present application, developers can develop on computers based on iMac, Windows, or Linux operating systems. After the development is completed, the output finished product package (i.e. applet) needs to run on a specific App client (including Android, iOS). The specific App client is the App client which is accessed to the SDK meeting the applet specification and has the basic environment for the applet to run.
Referring to fig. 1, the applet developing method provided in the present application may include the following steps:
step S100, creating an engineering project based on a predefined engineering template.
Specifically, the parameter configuration is inserted into a predefined engineering template to generate an engineering project, wherein the engineering template is created based on predefined file structure relationships, file formats, and common syntax.
By predefining the file structure relationship of the project template, the supported file format and the common grammar, a user does not need to add additional project compiling configuration files, routing configuration files or platform compatible configuration files in the process of creating the project.
In addition, the files contained in the engineering project can only contain entry files, routing pages and custom components, so that the structure of the whole engineering project is clear and concise.
For supported file formats, one or more of html format, js format, json format, and css format may be included. In order to construct a complete engineering project, files of html format grammar, js format grammar and json format grammar must be contained. The document of the css format grammar is used as a document of the page style description, and can be selected according to specific requirements.
The function constitution of the file can simplify the responsibility of each file, thereby reducing the complexity. For example, the organization of the page structure may be described by html formatted files, the event binding and data driven page dynamic change exposure may be described by js formatted files, the configuration of external components, the dependent introduction and navigation UIs may be described by json formatted files, and the processing of page styles may be described by css formatted files.
For the supported public grammar, one or more public grammars can be included, and the learning cost caused by the customized private grammar is avoided. For example, all grammatical languages supported by the W3C standard and the ECMAScript Specification are supported.
And in the later compiling and packaging stage of the engineering project, filtering files which do not meet the requirements according to the predefined file structure relationship, file format and file grammar, and giving corresponding prompts.
Step S200, generating entry files and routing configuration information which accord with the common grammar rule.
Specifically, the engineering project in step S100 is parsed and converted according to a preset common syntax rule, so as to generate an entry file and routing configuration information that conform to the common syntax rule.
Generally, the portal file may include a program portal file and a page portal file. The program entry file is responsible for introducing public files, adding global configuration and instantiating specific objects; the page entry file includes a page root component, which is responsible for importing the required components and reserving presentation space in the specific page for these components through routing placeholders.
The routing configuration information includes routing pages and routing information between the routing pages to implement hopping between the routing pages.
In step S300, Dependency Injection (Dependency Injection) and global configuration are completed.
Specifically, for the entry file of the above step, this step may inject at least one of a library and a global configuration on which the engineering project depends into the entry file, so as to obtain a processed entry file.
The method comprises the following steps that through dependence injection, a processed entry file is enabled to call a dependent component; the global configuration is applied to the management of objects such as APIs (application programming interfaces), constants and the like in the engineering project, and can be adapted to the change of a project deployment environment.
In step S400, an applet is generated.
Specifically, an applet is generated from the processed entry file in step S300 and the routing configuration information in step S200.
According to the technical scheme, the small program development method provided by the embodiment of the application defines the engineering template through the pre-designed file structure relationship, file format and common grammar. The engineering project created based on the engineering template has a directory system with the same file structure, and the code files of the engineering project adopt the same file format and are constrained to the same public grammar, so that the structure of the engineering project is clear and simple, the engineering project follows a uniform development style, and the maintainability is high.
In addition, the project is analyzed and converted according to a preset public grammar rule to generate an entry file and routing configuration information which accord with the preset public grammar rule; then injecting the library and/or the global configuration depended by the engineering project into the entry file; and finally, assembling and packaging to generate the applet application. The development process is only carried out depending on the preset public grammar rule without self-defined private grammar, and the learning cost of developers is reduced.
The process of creating the project item in step S100 above is described below as a specific example. For the project template, the predefined file structure relationships are shown in fig. 2, including entry files (app. js, app. json, and app. css), project configuration files (project. config. json), page directories (pages), component directories (components), and package structures (package. json); the predefined file formats comprise js files, css files, json files and html files; the predefined common grammar specifications are the W3C standard and the ECMAScript specification.
The common grammar rules mentioned in the above embodiments may employ various types of common grammars such as W3C, ECMAScript, and Vue grammar based thereon. The process of creating an engineering project is described below by way of example only with the Vue grammar rules.
Vue is a set of progressive frameworks for building user interfaces that facilitate integration with third party libraries or existing projects. Moreover, Vue can provide drivers for complex single page applications when used in conjunction with modern tool chains and various supporting class libraries.
Js uses HTML-based template syntax, allowing developers to declaratively bind the DOM to the data of the underlying Vue instance. Js are legal HTML and can be parsed by a specification compliant browser and HTML parser.
Assuming that an item named Test is created based on the Vue framework, the file structure of the engineering template is read through create (project names) function inside the framework at the same time, the directory under the file result is obtained, the files and the file contents under the directory are traversed, and the mapping of the file names and the file contents is output. The file structure is shown in fig. 2.
And reading the package.json file, recombining the project name Test, the preset dependency information of the project, the execution script data and the package.json file in the engineering template, and generating a new package.json file. Json file content in the project template is illustrated in fig. 3, and a combined write item name, injection execution command and dependent new package json file are illustrated in fig. 4.
And acquiring a directory created by the current project according to the context executed by the command, and writing the data after the template traversal into the directory according to the read corresponding relation.
In the above step S200, there may be a plurality of methods to generate the entry file conforming to the common grammar rule. Based on this, in an optional embodiment, the process of parsing the engineering project in step S200 and converting the engineering project according to the preset common syntax rule to generate the entry file conforming to the common syntax rule may include:
a1, analyzing the project to obtain an original entry file;
a2, converting the life cycle of the original entry file according to the Vue grammar and life cycle conversion rules, and injecting application-level life cycle to generate an entry file conforming to Vue grammar rules.
Specifically, an app.js file of the engineering project is analyzed through A1, the life cycle of the original development code of the app.js file is Vue life cycle, the life cycle of the app.js is converted according to the defined corresponding relation between the Vue life cycle and the life cycle of the applet, the application-level life cycle is injected, and the processed app.js file is used as an entry file registered by the applet.
In the above a1, the engineering project can be analyzed by the following function:
the compiler is a module of the webpack, the compiler is introduced into the application method, and then the compiler object can be used in the application method to listen to various events triggered by the webpack at different times. Run, watchRun and componentization hook functions are executed in the application method in the scheme. Name is a custom plug-in name, and this _setconfig.bind () is a function of the custom process parsing project configuration.
Files such as html, css, js, json configuration and the like in the project are analyzed through the functions, so that corresponding processing can be performed according to different file types in the next step.
In the above-mentioned a2, first, the original entry file can be parsed by the following function and processed into an entry file conforming to the syntax Vue:
the entryLoader method receives the analyzed file content, and the sourceMap parameter is used for mapping the actual code. In the entryLoader method, the addDependency () method injects a configuration file for file monitoring at the next stage of processing. Editing apcast (AST corresponding to app. js analysis) by the babel's babeltrack method.
Then, the life cycle is analyzed and converted by the following functions:
['onLaunch','onShow','onHide','onBeforeDestroy'].find(name＝>name＝＝＝property.key.name)？okLifecycle.push(property):Properties.push(property)
wherein [ 'onLaunch', 'onShow', 'onHide', 'onBeforeDestroy' ] are preset applet application-level lifecycle function names, and the find () method is used to resolve the transformation applet lifecycle in the actual code according to the preset lifecycle function names.
In the above a2, the problem of the lack of native application-level lifecycle when developing H5 pages using Vue is solved by injecting application-level lifecycle. The application-level lifecycle is extended on the basis of Vue, and developers can use Vue lifecycle to process services in addition to the lifecycle.
Specifically, the method for extending the application-level lifecycle may be: in the compiling stage, the injected small program calls the SDK of the client terminal capability, and the SDK can enable the small program to have the capability of the native application and the life cycle monitoring processing capability. And simultaneously, after the application-level life cycle function in the developed original code is identified according to the keywords, the application-level life cycle function is processed into an identifiable life cycle method in the SDK according to a defined mapping relation.
In the above step S200, there may be various methods to generate the routing configuration information conforming to the common syntax rule. Based on this, in an optional embodiment, the process of parsing the engineering project in the step S200 and converting the engineering project according to the preset common syntax rule to generate the routing configuration information according to the common syntax rule may include:
b1, analyzing the project to obtain the original route configuration information;
b2, converting the original route configuration information according to Vue syntax rules to generate route configuration information conforming to Vue syntax rules.
In addition, based on the above embodiment, a UI type processing method such as applet navbar can be injected into the before-entering the routing page, so as to implement personalized presentation and conditional jump of the routing page.
In the above B1, the process of analyzing the engineering project to obtain the original route configuration may be specifically implemented by the following function:
wherein, the babelParse () is used for resolving the route configuration character string into AST, the routerconfigugstring is a parameter of the route configuration character string, and the sourceType is a conversion type; forEach () traverses routing page pages to obtain a configuration file path of the routing page.
Json' configuration data in the item is read, the page configuration data is converted into router configuration of Vue grammar, and then the processed route configuration and the entry file are assembled.
In the above B2, specifically, the original routing configuration information may be converted by using a vue-router syntax rule to generate routing configuration information conforming to a vue-router syntax rule. Among them, vue-router is the official routing library provided by Vue, is part of the Vue ecosystem, is deeply integrated with the core of vue.
In the above step S400, there may be various methods to generate the applet. Based on this, in an optional embodiment, the process of generating the applet according to the processed entry file and the routing configuration information in step S400 may include:
and assembling the routing page corresponding to the routing configuration information into an applet page according to the routing configuration information, and packaging the applet page and the processed entry file into an applet application.
There are various ways in which the assembly of applets can be achieved. Optionally, the process of assembling the routing configuration information into an applet page may include:
c1, obtaining a routing page according to the routing configuration information;
c2, analyzing the routing page to obtain the life cycle and the component information of the routing page;
c3, converting the life cycle of the routing page into an application-level life cycle and a life cycle of Vue grammar, and injecting corresponding components into the routing page according to the component information of the routing page to obtain a processed routing page;
and C4, assembling the processed routing pages into a single file conforming to Vue syntax, and forming the applet page by the single file conforming to Vue syntax.
There may be various methods in C2 to obtain the life cycle and component information of the routing page. Optionally, the process of analyzing the routing page and acquiring the life cycle and the component information of the routing page in C2 may include:
d1, analyzing the index.js file of the routing page to obtain the life cycle of the routing page;
and D2, analyzing the index.json file of the routing page, and acquiring the component information of the routing page.
For example, in D1, the file content of an index. js file is read, the vue lifecycle and application-level lifecycle function names used within the file are obtained, and are converted according to the preset correspondence.
Json file in a certain routing page is parsed in D2, and the usangcomponents content is obtained from the file, and thus the usangcomponents content includes the used component information.
There are various ways to implement the injection of the route page component in C3 described above. Optionally, in the C3, the process of injecting the corresponding component into the routing page according to the component information of the routing page may include:
e1, judging whether the routing page contains the self-defined component or not according to the component information of the routing page;
e2, if yes, injecting the self-defining component into the index.
Specifically, in E2, the injection of the custom component may be implemented by the following function:
the routerPageLoader () method is the same as the entryloloader method, and receives the content data source of the routing page and the source map mapped by the actual code. The expressonstate provides a method for babel, which is used for converting a life cycle function in pageAST (analyzed AST corresponding to index. js in a routing page).
There are several ways to implement the conversion of the routing page lifecycle in C3 above. Optionally, the process of converting the lifecycle of the routing page into the lifecycle of the application-level lifecycle and Vue grammar in the above C3 may include:
and converting the life cycle of the routing page into the corresponding life cycle of the application level life cycle and the life cycle of the Vue grammar according to the corresponding relation between the preset life cycle of the routing page and the application level life cycle and the corresponding relation between the life cycle of the routing page and the life cycle of the Vue grammar.
Wherein the application-level lifecycle and the lifecycle of the Vue grammar together comprise the lifecycle of the applet.
Specifically, in the above C3, the conversion of the routing page life cycle may be implemented by the following function:
the applet developing apparatus provided in the embodiments of the present application is described below, and the applet developing apparatus described below and the applet developing method described above may be referred to correspondingly.
Referring to fig. 5, an applet developing apparatus provided in an embodiment of the present application may include:
a building unit 11, configured to insert the parameter configuration into a predefined engineering template to generate an engineering project, wherein the engineering template is created based on a predefined file structure relationship, a file format and a common syntax;
a conversion unit 12, configured to analyze the engineering project, and convert the engineering project according to a preset common grammar rule to generate an entry file and route configuration information that meet the common grammar rule;
an injection unit 13, configured to inject a library and/or a global configuration that is relied on by the engineering project into the entry file, so as to obtain a processed entry file;
and a synthesizing unit 14, configured to generate an applet according to the processed entry file and the routing configuration information.
In an optional embodiment, the process of parsing the engineering project and converting the engineering project according to a preset common syntax rule by the conversion unit 12 to generate an entry file conforming to the common syntax rule may include:
analyzing the engineering project to obtain an original entry file;
and converting the life cycle of the original entry file according to Vue grammar rules and life cycle conversion, and injecting an application-level life cycle to generate an entry file conforming to Vue common grammar rules.
In an optional embodiment, the process of parsing the engineering project and converting the engineering project according to a preset common syntax rule to generate the routing configuration information according to the common syntax rule by the conversion unit 12 may include:
analyzing the engineering project to obtain original route configuration information;
and converting the original routing configuration information according to Vue grammar rules to generate routing configuration information conforming to Vue grammar rules.
In an optional embodiment, the process of generating the applet by the synthesizing unit 14 according to the processed entry file and the routing configuration information may include:
and assembling the routing page corresponding to the routing configuration information into an applet page according to the routing configuration information, and packaging the applet page and the processed entry file into an applet application.
In an alternative embodiment, the process of assembling the routing configuration information into the applet page by the composition unit 14 may include:
acquiring a routing page according to the routing configuration information;
analyzing the routing page to acquire the life cycle and the component information of the routing page;
converting the life cycle of the routing page into an application-level life cycle and Vue grammar life cycle, and injecting corresponding components into the routing page according to the component information of the routing page to obtain a processed routing page;
and assembling the processed routing pages into a single file conforming to Vue grammar, and forming the applet pages by the single file conforming to Vue grammar.
In an optional embodiment, the process of analyzing the routing page by the synthesis unit 14 and acquiring the life cycle and the component information of the routing page may include:
analyzing the index.js file of the routing page to obtain the life cycle of the routing page;
and analyzing the index and json file of the routing page to acquire the component information of the routing page.
In an alternative embodiment, the process of injecting the corresponding component into the routing page by the synthesizing unit 14 according to the component information of the routing page may include:
judging whether the routing page contains a self-defined component or not according to the component information of the routing page;
and if so, injecting the self-defining component into the index.js file of the routing page through the AST.
In an alternative embodiment, the process of the synthesizing unit 14 converting the lifecycle of the routing page into the lifecycle of the application-level lifecycle and Vue grammar may include:
and converting the life cycle of the routing page into the corresponding life cycle of the application level life cycle and the life cycle of the Vue grammar according to the corresponding relation between the preset life cycle of the routing page and the application level life cycle and the corresponding relation between the life cycle of the routing page and the life cycle of the Vue grammar.
Wherein the application-level lifecycle and the lifecycle of the Vue grammar together comprise the lifecycle of the applet.
The small program development device provided by the embodiment of the application can be applied to small program development device equipment such as an industrial control computer and the like. Alternatively, fig. 6 shows a block diagram of a hardware structure of the applet developing device apparatus, and referring to fig. 3, the hardware structure of the applet developing device apparatus may include: at least one processor 21, at least one communication interface 22, at least one memory 23 and at least one communication bus 24.
In the embodiment of the present application, the number of the processor 21, the communication interface 22, the memory 23 and the communication bus 24 is at least one, and the processor 21, the communication interface 22 and the memory 23 complete mutual communication through the communication bus 24;
the processor 21 may be a central processing unit CPU, or an application Specific Integrated circuit asic, or one or more Integrated circuits configured to implement embodiments of the present application, etc.;
the memory 22 may comprise a high-speed RAM memory, and may further comprise a non-volatile memory (non-volatile memory) or the like, such as at least one disk memory;
wherein the memory 23 stores a program, and the processor 21 may call the program stored in the memory 23, the program being configured to:
inserting the parameter configuration into a predefined engineering template to generate an engineering project, wherein the engineering template is created based on a predefined file structure relationship, a file format and a common syntax;
analyzing the engineering project, and converting according to a preset common grammar rule to generate an entry file and routing configuration information which accord with the common grammar rule;
injecting a library and/or global configuration depended by the engineering project into the entry file to obtain a processed entry file;
and generating the applet application according to the processed entry file and the routing configuration information.
Alternatively, the detailed function and the extended function of the program may be as described above.
In summary, the following steps:
the engineering template is defined through the pre-designed file structure relationship, file format and common grammar. The engineering project created based on the engineering template has a directory system with the same file structure, and the code files of the engineering project adopt the same file format and are constrained to the same public grammar, so that the structure of the engineering project is clear and simple, the engineering project follows a uniform development style, and the maintainability is high.
In addition, the project is analyzed and converted according to a preset public grammar rule to generate an entry file and routing configuration information which accord with the preset public grammar rule; then injecting the library and/or the global configuration depended by the engineering project into the entry file; and finally, assembling and packaging to generate the applet application. The development process is only carried out depending on the preset public grammar rule without self-defined private grammar, and the learning cost of developers is reduced.
Further, the applet applications developed by the present application are less dependent on the host App. For apps of various platforms with access to the applet development specification SDK, applets developed by the present application can be deployed to host apps of these platforms, and once developed, multi-platform multiplexing is possible, thereby realizing the intercommunication and compatibility of the applet application and the multi-platform.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
The embodiments in the present description are described in a progressive manner, each embodiment focuses on differences from other embodiments, the embodiments may be combined as needed, and the same and similar parts may be referred to each other.
The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the application. Thus, the present application is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims (10)
1. An applet development method comprising:
inserting the parameter configuration into a predefined engineering template to generate an engineering project, wherein the engineering template is created based on a predefined file structure relationship, a file format and a common syntax;
analyzing the engineering project, and converting according to a preset common grammar rule to generate an entry file and routing configuration information which accord with the common grammar rule;
injecting a library and/or global configuration depended by the engineering project into the entry file to obtain a processed entry file;
and generating the applet application according to the processed entry file and the routing configuration information.
2. The method according to claim 1, wherein the process of parsing the engineering project and converting the engineering project according to a preset common grammar rule to generate an entry file conforming to the common grammar rule comprises:
analyzing the engineering project to obtain an original entry file;
and converting the life cycle of the original entry file according to Vue grammar and life cycle conversion rules, and injecting an application-level life cycle to generate an entry file conforming to Vue grammar rules.
3. The method according to claim 1, wherein the process of parsing the engineering project and converting the engineering project according to a preset common syntax rule to generate the routing configuration information according to the common syntax rule comprises:
analyzing the engineering project to obtain original route configuration information;
and converting the original routing configuration information according to Vue grammar rules to generate routing configuration information conforming to Vue grammar rules.
4. The method according to claim 1, wherein the process of generating an applet based on the processed entry file and the routing configuration information comprises:
and assembling the routing page corresponding to the routing configuration information into an applet page according to the routing configuration information, and packaging the applet page and the processed entry file into an applet application.
5. The method of claim 4, wherein the assembling the routing configuration information into an applet page comprises:
acquiring a routing page according to the routing configuration information;
analyzing the routing page to acquire the life cycle and the component information of the routing page;
converting the life cycle of the routing page into an application-level life cycle and Vue grammar life cycle, and injecting corresponding components into the routing page according to the component information of the routing page to obtain a processed routing page;
and assembling the processed routing pages into a single file conforming to Vue grammar, and forming the applet pages by the single file conforming to Vue grammar.
6. The method according to claim 5, wherein the process of parsing the routing page and obtaining the lifecycle and component information of the routing page comprises:
analyzing the index.js file of the routing page to obtain the life cycle of the routing page;
and analyzing the index and json file of the routing page to acquire the component information of the routing page.
7. The method according to claim 5, wherein the process of injecting the corresponding component into the routing page according to the component information of the routing page comprises:
judging whether the routing page contains a self-defined component or not according to the component information of the routing page;
and if so, injecting the self-defining component into the index.js file of the routing page through the AST.
8. The method of claim 5, wherein the process of converting the lifecycle of the routing page into the lifecycle of the application-level lifecycle and Vue syntax comprises:
and converting the life cycle of the routing page into the corresponding life cycle of the application level life cycle and the life cycle of the Vue grammar according to the corresponding relation between the preset life cycle of the routing page and the application level life cycle and the corresponding relation between the life cycle of the routing page and the life cycle of the Vue grammar.
9. The method of any one of claims 1 to 8, wherein the file types of the source files include html, css, js, and json file types.
10. An applet developing apparatus, comprising:
a construction unit for inserting the parameter configuration into a predefined engineering template to generate an engineering project, wherein the engineering template is created based on a predefined file structure relationship, a file format and a common syntax;
the conversion unit is used for analyzing the engineering project and converting the engineering project according to a preset common grammar rule so as to generate an entry file and routing configuration information which accord with the common grammar rule;
the injection unit is used for injecting a library and/or global configuration which the engineering project depends on into the entry file to obtain a processed entry file;
and the synthesis unit is used for generating the applet application according to the processed entry file and the routing configuration information.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110944780.5A CN113590125B (en) | 2021-08-17 | 2021-08-17 | Applet development method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110944780.5A CN113590125B (en) | 2021-08-17 | 2021-08-17 | Applet development method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113590125A true CN113590125A (en) | 2021-11-02 |
| CN113590125B CN113590125B (en) | 2024-09-20 |
Family
ID=78258381
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110944780.5A Active CN113590125B (en) | 2021-08-17 | 2021-08-17 | Applet development method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113590125B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114217874A (en) * | 2021-12-16 | 2022-03-22 | 中国建设银行股份有限公司 | Applet generation method, device, equipment, readable storage medium and product |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110888645A (en) * | 2019-10-12 | 2020-03-17 | 贝壳技术有限公司 | Method, device and storage medium for converting into small program |
| CN111078228A (en) * | 2019-12-20 | 2020-04-28 | 深圳乐信软件技术有限公司 | Method and device for converting webpage into small program, server and storage medium |
| CN111079062A (en) * | 2019-12-27 | 2020-04-28 | 北京达佳互联信息技术有限公司 | Page creating method and device, electronic equipment and storage medium |
| CN111124576A (en) * | 2019-12-23 | 2020-05-08 | 焦点科技股份有限公司 | Multi-platform applet and H5 page adaptation method and system |
| CN111158818A (en) * | 2019-12-24 | 2020-05-15 | 中国建设银行股份有限公司 | Page rendering method and device |
| CN111273898A (en) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | Web front-end code automatic construction method, system and storage medium |
| DE202020105389U1 (en) * | 2019-09-28 | 2020-12-11 | Tongcheng Network Technology Co., Ltd. | Front-end framework, storage medium and electronic device |
| CN112286504A (en) * | 2020-11-12 | 2021-01-29 | 普元信息技术股份有限公司 | Method for realizing development and loading of small program based on Reactnative in mobile APP |
| CN112579048A (en) * | 2019-09-30 | 2021-03-30 | 腾讯科技（深圳）有限公司 | Applet integration method, device, electronic equipment and storage medium |
-
2021
- 2021-08-17 CN CN202110944780.5A patent/CN113590125B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| DE202020105389U1 (en) * | 2019-09-28 | 2020-12-11 | Tongcheng Network Technology Co., Ltd. | Front-end framework, storage medium and electronic device |
| CN112579048A (en) * | 2019-09-30 | 2021-03-30 | 腾讯科技（深圳）有限公司 | Applet integration method, device, electronic equipment and storage medium |
| CN110888645A (en) * | 2019-10-12 | 2020-03-17 | 贝壳技术有限公司 | Method, device and storage medium for converting into small program |
| CN111078228A (en) * | 2019-12-20 | 2020-04-28 | 深圳乐信软件技术有限公司 | Method and device for converting webpage into small program, server and storage medium |
| CN111124576A (en) * | 2019-12-23 | 2020-05-08 | 焦点科技股份有限公司 | Multi-platform applet and H5 page adaptation method and system |
| CN111158818A (en) * | 2019-12-24 | 2020-05-15 | 中国建设银行股份有限公司 | Page rendering method and device |
| CN111079062A (en) * | 2019-12-27 | 2020-04-28 | 北京达佳互联信息技术有限公司 | Page creating method and device, electronic equipment and storage medium |
| CN111273898A (en) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | Web front-end code automatic construction method, system and storage medium |
| CN112286504A (en) * | 2020-11-12 | 2021-01-29 | 普元信息技术股份有限公司 | Method for realizing development and loading of small program based on Reactnative in mobile APP |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114217874A (en) * | 2021-12-16 | 2022-03-22 | 中国建设银行股份有限公司 | Applet generation method, device, equipment, readable storage medium and product |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113590125B (en) | 2024-09-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106980504B (en) | Application program development method and tool and equipment thereof | |
| US9268539B2 (en) | User interface component | |
| FI118311B (en) | Procedure, data processing apparatus, computer software product and arrangements for processing electronic data | |
| CN110580147B (en) | Application program development method and device | |
| CN111680253B (en) | Page application data packet generation method and device, computer equipment and storage medium | |
| CN101495982B (en) | Web page rendering priority mechanism | |
| US7305657B2 (en) | Web server having function of Java servlet, method for updating Java program and computer program | |
| US7401325B2 (en) | Method and apparatus for a configurable Java Server pages processing framework | |
| CN116069325B (en) | Front-end project construction method, device, equipment and computer readable storage medium | |
| CN111459537A (en) | Redundant code removing method, device, equipment and computer readable storage medium | |
| US20200183670A1 (en) | System and method for transforming cold fusion technology environment to open source environment | |
| CN118245050B (en) | Front end frame assembly automatic conversion method, system, electronic device and storage medium | |
| CN113590125B (en) | Applet development method and device | |
| CN116166907B (en) | Method and device for developing Web application by using WebAsssembly and service page compiling technology | |
| CN113568678B (en) | Method and device for dynamically loading resources and electronic equipment | |
| Phanouriou | User interface markup language (uiml) draft specification | |
| CN117971308A (en) | Interface document generation method, device, storage medium and computer equipment | |
| CN118092914A (en) | Page generation method, device, equipment, storage medium and low-code generation system | |
| CN117195239A (en) | Micro-application resource package generation method, device, computer equipment and storage medium | |
| CN117707493A (en) | Front-end interface generation method and device, electronic equipment and storage medium | |
| CN117473957A (en) | Device and method capable of supporting multi-language text analysis | |
| Chernomordov et al. | Development of the Module «Version the Visually Impaired» for the Websites of Organizations | |
| Serrano et al. | Multitier Programming in Hop: A first step toward programming 21st-century applications | |
| CN117348871A (en) | Page control generation method and device based on template | |
| CN117667089A (en) | Front-end form generation method and device, storage medium and electronic equipment |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20211208 Address after: Room 1423, No. 1256 and 1258, Wanrong Road, Jing'an District, Shanghai 200040 Applicant after: Tianyi Digital Life Technology Co.,Ltd. Address before: 1 / F and 2 / F, East Garden, Huatian International Plaza, 211 Longkou Middle Road, Tianhe District, Guangzhou, Guangdong 510000 Applicant before: Century Dragon Information Network Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20240325 Address after: Unit 1, Building 1, China Telecom Zhejiang Innovation Park, No. 8 Xiqin Street, Wuchang Street, Yuhang District, Hangzhou City, Zhejiang Province, 311100 Applicant after: Tianyi Shilian Technology Co.,Ltd. Country or region after: China Address before: Room 1423, No. 1256 and 1258, Wanrong Road, Jing'an District, Shanghai 200040 Applicant before: Tianyi Digital Life Technology Co.,Ltd. Country or region before: China |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |