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.
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.