CN110780853A - Front end framework, development method, storage medium and electronic device - Google Patents
Front end framework, development method, storage medium and electronic device Download PDFInfo
- Publication number
- CN110780853A CN110780853A CN201910928397.3A CN201910928397A CN110780853A CN 110780853 A CN110780853 A CN 110780853A CN 201910928397 A CN201910928397 A CN 201910928397A CN 110780853 A CN110780853 A CN 110780853A
- Authority
- CN
- China
- Prior art keywords
- vue
- terminal
- module
- target terminal
- scaffold
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000011161 development Methods 0.000 title claims abstract description 78
- 238000000034 method Methods 0.000 title claims abstract description 35
- 238000013507 mapping Methods 0.000 claims abstract description 12
- 238000004806 packaging method and process Methods 0.000 claims description 11
- 230000008569 process Effects 0.000 claims description 10
- 238000010276 construction Methods 0.000 claims description 8
- 238000006243 chemical reaction Methods 0.000 claims description 6
- 230000000712 assembly Effects 0.000 claims 1
- 238000000429 assembly Methods 0.000 claims 1
- 230000003044 adaptive effect Effects 0.000 abstract description 18
- 239000008186 active pharmaceutical agent Substances 0.000 description 28
- 230000006870 function Effects 0.000 description 11
- 239000003795 chemical substances by application Substances 0.000 description 10
- 230000001960 triggered effect Effects 0.000 description 6
- 102100021663 Baculoviral IAP repeat-containing protein 5 Human genes 0.000 description 4
- 102100037024 E3 ubiquitin-protein ligase XIAP Human genes 0.000 description 4
- 101000896234 Homo sapiens Baculoviral IAP repeat-containing protein 5 Proteins 0.000 description 4
- 101000804865 Homo sapiens E3 ubiquitin-protein ligase XIAP Proteins 0.000 description 4
- 230000007547 defect Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000006978 adaptation Effects 0.000 description 3
- 239000012141 concentrate Substances 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 230000007246 mechanism Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 239000012092 media component Substances 0.000 description 2
- 230000036316 preload Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 238000013515 script Methods 0.000 description 2
- 230000004931 aggregating effect Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000002860 competitive effect Effects 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 230000004069 differentiation Effects 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 238000007429 general method Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 238000005316 response function Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001360 synchronised 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/40—Transformation of program code
- G06F8/51—Source to source
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- 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
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a front-end framework, a development method, a storage medium and electronic equipment, which relate to the software technology and comprise a scaffold for providing a developed universal module and basic configuration; the components comprise standard working components and business working components suitable for other terminals; the API module comprises a general API applicable to each terminal and a special API applicable to a specific terminal; the building platform comprises a runtime module and a compiler module, wherein the runtime module is used for realizing mapping association between the Vue.js terminal and the target terminal, and the compiler module is used for compiling scaffold codes of the Vue.js language into scaffold codes suitable for the target terminal language. The method has the advantages that the functional modules of the target terminal and the functional modules under the Vue.js terminal are mapped and associated through the runtime module, the scaffold in the Vue.js language is converted into the language of the adaptive terminal through the compiler module, the target terminal and the Vue.js terminal are intercommunicated, only one set of codes is developed, the adaptive terminal is adaptive to various terminals, development cost is low, and the method is widely applicable.
Description
Technical Field
The present invention relates to software technologies, and more particularly, to a front-end framework, a development method, a storage medium, and an electronic device.
Background
Nowadays, WeChat has become an important software tool in people's life, not only provides a convenient communication mode, and built-in applet still provides a new information presentation mode for every industry, makes the world touch and reach.
Applets are applications that can be used without downloading and are a very high threshold of innovation. For the front-end developer or team, this means that the number of frames to be mastered is large, and expensive learning cost and trial-and-error cost need to be re-spent.
With the competitive development of the industry, terminals such as hundredth applets, headline applets, quick applications and the like are successively introduced, and the class applet versions corresponding to the respective terminals are respectively pushed out. Before that, the industry mostly adopts a copy framework developed by Tencent team, which is a development specification of vue type, and the development specification costs the copy, but the method can only be adapted to the WeChat applet end, and products of other platforms such as fast application, ReactNative and the like cannot support the method.
For developers, in order to meet the multi-terminal development requirements of products, new framework learning and research needs to be performed, which results in a great increase in the development cost of the products. Based on this, the business product generally does not perform development work for each terminal individually, so the development of the business product is limited by changing the technical and cost problems.
Disclosure of Invention
In view of the defects in the prior art, a first object of the present invention is to provide a front-end framework, which can be applied to multiple sets of terminals requiring different development languages by using only one set of development language during development, and has the advantages of low development cost and wide application range.
In order to achieve the purpose, the invention provides the following technical scheme:
js based front end framework, comprising
The scaffold provides developed universal modules and basic configuration;
the components comprise standard working components and business working components which are mapped with the standard working components one by one and are suitable for other terminals;
the API module comprises a general API applicable to each terminal and a special API applicable to a specific terminal;
the building platform comprises a runtime module and a compiler module, wherein the runtime module is used for realizing mapping association between the Vue.js terminal and the target terminal, and the compiler module is used for compiling scaffold codes of the Vue.js language into scaffold codes suitable for the target terminal language.
By adopting the technical scheme, when development is carried out, the scaffold provides various modules and basic configurations to be used in the development process, a service developer can directly start development conveniently and concentrate on services, extra time is not spent for configuring a development environment, and development efficiency is improved. In the aspect of components, the components are divided into two types, one type is a standard working component developed by using Vue.js, the other type is a service working component mapped with the standard working component one by one, the service working component is developed by adopting other languages and supports adaptation to other terminals, a developer only needs to master one set of specifications of the standard working component, the service working components of the other languages are directly called through a built-in mapping relation, additional repeated development is not needed, and the development efficiency is further improved. The API is divided into a general API and a special API according to the number of the adaptive terminals, wherein the general API is adaptive to each terminal in a supported list, and the special API is adaptive to a specific terminal and is selected by a developer according to the requirements during development. After the development of each module is completed, the difference between the target terminal and the vue.js terminal is smoothed or converted by using a built-in construction platform, specifically, each functional module of the target terminal and each functional module under the vue.js terminal are mapped and associated through a runtime module, the scaffold developed based on the vue.js language is converted into a language adapted to the terminal through a compiler module, and the target terminal and the vue.js terminal are intercommunicated, so that only one set of codes is developed, the method is adapted to various terminals, the development cost is low, and the method is widely applicable.
Further, the runtime module comprises an event agent submodule, a life cycle submodule and a data synchronization submodule,
the event agent submodule uniformly develops registered events and converts the events of the Vue.js terminal into the events of the target terminal;
the life cycle submodule maps the life cycle of the target terminal to the life cycle of the Vue.
And the data synchronization sub-module modifies the synchronization item of the Vue.
By adopting the technical scheme, the event of the Vue.js terminal is converted into the event of the target terminal through the event agent sub-module, the life cycle of the target terminal is mapped to the Vue.js terminal through the life cycle sub-module, the synchronization item of the Vue.js terminal is modified into the synchronization item of the target terminal through the data synchronization sub-module, and the mapping association of the target terminal and the Vue.js terminal is realized.
Further, the compiler module comprises an applet compiling submodule, a fast application compiling submodule and a ReactNative compiling submodule.
By adopting the technical scheme, the development files of Vue.js language are respectively compiled into code files which are adaptive to applets, fast applications and ReactNative, and the current mainstream terminal platform is supported.
And further, a packaging tool for packaging the scaffold, the component and the API module suitable for the target terminal to generate a source code capable of being run on the target terminal is further included.
By adopting the technical scheme, the scaffold, the component and the API module which are suitable for the target terminal are packaged into the corresponding source code file through the packaging tool, so that other processes are reduced, and the development efficiency is improved.
In view of the defects in the prior art, a second object of the present invention is to provide a front-end framework development method, which can be applied to multiple sets of terminals requiring different development languages by using only one set of development language during development, and has the advantages of low development cost and wide application.
In order to achieve the purpose, the invention provides the following technical scheme:
a front-end framework development method based on the technical scheme comprises the following steps
Developing a new product by utilizing a universal module and basic configuration provided by the scaffold;
compiling the scaffold in Vue.js language into a scaffold adapted to a target terminal by using a construction platform through a compiler module, and mapping and associating the Vue.js terminal and the target terminal through a runtime module;
determining a general API, a special API and a business working component mapped with the standard working component, which are involved in the development process;
and packaging the scaffold adapted to the target terminal, the general API and the special API involved in the development process and the service working component mapped with the standard working component to generate a file package adapted to the target terminal.
By adopting the technical scheme, various modules and basic configurations provided by the scaffold are directly developed during development, the construction and configuration of a development environment are not needed, a service developer can directly start development conveniently, and the development efficiency is improved. In the aspect of components, the components are divided into two types, one type is a standard working component developed by using Vue.js, the other type is a service working component mapped with the standard working component one by one, the service working component is developed by adopting other languages and supports adaptation to other terminals, a developer only needs to master one set of specifications of the standard working component, the service working components of the other languages are directly called through a built-in mapping relation, additional repeated development is not needed, and the development efficiency is further improved. The API is divided into a general API and a special API according to the number of the adaptive terminals, wherein the general API is adaptive to each terminal in a supported list, and the special API is adaptive to a specific terminal and is selected by a developer according to the requirements during development. After the development of each module is completed, the difference between the target terminal and the vue.js terminal is smoothed or converted by using a built-in construction platform, specifically, each function module of the target terminal and each function module under the vue.js terminal are mapped and associated through a runtime module, the scaffold developed based on the vue.js language is converted into the language of the adaptive terminal through a compiler module, the target terminal and the vue.js terminal are intercommunicated, and finally, the codes of each function module of the adaptive target terminal are packed to generate a file package of the adaptive target terminal, so that only one set of codes are developed, the adaptive terminal is adaptive to various terminals, the development cost is low, and the application is wide.
Further, the runtime module comprises an event agent submodule, a life cycle submodule and a data synchronization submodule,
the event agent submodule uniformly develops registered events and converts the events of the Vue.js terminal into the events of the target terminal;
the life cycle submodule maps the life cycle of the target terminal to the life cycle of the Vue.
And the data synchronization sub-module modifies the synchronization item of the Vue.
By adopting the technical scheme, the event of the Vue.js terminal is converted into the event of the target terminal through the event agent sub-module, the life cycle of the target terminal is mapped to the Vue.js terminal through the life cycle sub-module, the synchronization item of the Vue.js terminal is modified into the synchronization item of the target terminal through the data synchronization sub-module, and the mapping association of the target terminal and the Vue.js terminal is realized.
Further, the compiler module comprises an applet compiling submodule, a fast application compiling submodule and a ReactNative compiling submodule.
By adopting the technical scheme, the development files of Vue.js language are respectively compiled into code files which are adaptive to applets, fast applications and ReactNative, and the current mainstream terminal platform is supported.
Further, the conversion of the compiler module scaffold into a scaffold corresponding to the target terminal includes:
analyzing the scaffold source code of Vue.js language into an abstract syntax tree;
and then generating a language code corresponding to the target terminal by using the abstract syntax tree.
By adopting the technical scheme, when the scaffold is converted, the scaffold source code in Vue.js language is firstly analyzed into a basic abstract syntax tree and then converted into a language code suitable for a target terminal, so that the accuracy of conversion is ensured.
In view of the defects in the prior art, a third object of the present invention is to provide a storage medium, in which source codes of a product developed based on the front-end framework according to any of the above technical solutions are stored, and the framework supports that only one set of development language needs to be used during development, and can be suitable for multiple sets of terminals that need different development languages, and has the advantages of low development cost and wide application.
In view of the defects in the prior art, a fourth object of the present invention is to provide an electronic device, which includes a memory, wherein the memory is installed with a product developed based on the front-end framework according to any one of the above technical solutions, and the product is developed by one set of development language, is applicable to multiple sets of terminals of different development languages, and has the advantages of low development cost and wide application.
In conclusion, the invention has the following beneficial effects:
1. the scaffold provides various modules and basic configurations required in the development process, so that a service developer can directly start development and concentrate on the service without spending extra time to configure a development environment, and the development efficiency is improved;
2. the business working components are developed by adopting other languages, adaptation to other terminals is supported, developers only need to master one set of specifications of the standard working components, the business working components of other languages are directly called through built-in mapping relations, additional repeated development is not needed, and the development efficiency is further improved;
3. the method comprises the steps that a built-in construction platform is used for floating or converting differences between a target terminal and a Vue.js terminal, specifically, each function module of the target terminal and each function module under the Vue.js terminal are mapped and associated through a runtime module, a scaffold developed based on Vue.js language is converted into a language of an adaptive terminal through a compiler module, the target terminal and the Vue.js terminal are communicated, only one set of codes are developed, the target terminal is adaptive to various terminals, development cost is low, and the method is widely applicable.
Drawings
FIG. 1 is a schematic diagram of a front end frame of the present invention;
fig. 2 is a schematic diagram of the implementation principle of the scaffold in the invention;
FIG. 3 is a schematic diagram of modules in operation in the present invention;
figure 4 is a schematic diagram of a compiler module according to the present invention,
in the figure: 1. a scaffold; 2. an assembly; 3. a general purpose API; 4. a proprietary API; 5. and (5) constructing a platform.
Detailed Description
The present invention will be described in detail below with reference to the accompanying drawings and examples.
The present embodiment is only for explaining the present invention, and it is not limited to the present invention, and those skilled in the art can make modifications of the present embodiment without inventive contribution as needed after reading the present specification, but all of them are protected by patent law within the scope of the claims of the present invention.
Example 1
A front-end framework based on vue. Referring to fig. 1, a scaffold 1, a component 2, an API module and a build platform 5 are included.
The scaffold 1 provides a universal module and basic configuration to be used in the development process, so that a service developer can directly develop the scaffold and concentrate on the service without spending time to configure a development environment. In addition, a demo is placed in the scaffold 1, which is convenient for a developer to understand the development and application of the framework.
Referring to fig. 2, specific implementation steps and modes of the scaffold 1 are provided.
The components 2 comprise standard working components 2 and business working components 2, wherein the standard working components 2 are a set of common components 2 which are developed based on Vue. And the business working components 2 are developed based on other languages and are adapted to other terminals, and are mapped with the corresponding standard working components 2 one by one, which is the essence that the standard working components 2 are adapted to other language versions of other terminals. For a service developer, only one development language of the front-end framework and a development specification which is the same as the development specification of the WeChat applet need to be mastered, so that the development cost is saved, and the development efficiency is improved.
As a specific example, the standard work component 2 includes a base component 2 and a common component 2, wherein the base component 2 includes a view container component 2, a content component 2, a forms component 2, a navigation component 2, a media component 2, a map component 2, and the like. The common component 2 facilitates multiplexing during the development of the service.
View container assembly 2: similar to the use of div tags, for containing elements.
Content component 2: such as a p-tag, for containing text.
Form component 2: such as button, form, input, etc. form-related component 2.
The navigation component 2: such as navigator, the bottom layer is essentially calling each terminal applet api implementation.
The media component 2: such as an image tag.
The map component 2: such as map.
The API module includes a general API3 applicable to each terminal and a proprietary API4 applicable to a specific terminal.
The generic API3 is used to smooth out differences in API calling patterns for the various terminals. The principle is that different terminal platforms respectively generate the api corresponding to the terminal platform. Specifically, the front-end framework provides a uniform calling mode for a service developer, and the front-end framework is used for making corresponding api selection during packaging.
The method specifically comprises the steps that api of different terminals is classified according to different js files, for example, api called utilmp.js under the classification of the wechat applet is packaged with api calling implementation related to a native wechat applet; the api under the class of the Baidu applet is called utildb. And finally abstracting and aggregating js of different terminals, and adapting according to the platform selected and output.
The proprietary API4 is some APIs that cannot be generalized, for example, some APIs do not exist on a hundredth applet platform, but exist on a WeChat applet platform, and this type of API cannot be generalized. The front-end framework provides the capability of a proprietary api in particular, thereby providing platform differentiation capability for service developers.
The building platform 5 is used for really converting the service product developed based on Vue. js into the service product suitable for the target terminal, wherein the target terminal comprises H5, an applet, a fast application and a ReacNative.
The building platform 5 comprises two core modules, namely a runtime module and a compiler module.
Referring to fig. 3, the runtime module is configured to implement mapping association between the vue.js terminal and the target terminal, and includes an event agent sub-module, a life cycle sub-module, and a data synchronization sub-module.
And the event agent sub-module uniformly develops the registered events and converts the events of the Vue. As a specific example, user interaction-triggered data updates are accomplished through an event broker mechanism. In the vue.js code, the event response function corresponds to the method of component 2, and vue.js automatically maintains a context environment. However, a similar mechanism is not provided in the applet, a real-time virtual DOM is maintained in the vue.js execution environment, which completely corresponds to the view layer of the applet, and after an event is triggered on the applet component 2 node, the corresponding node on the virtual DOM is found to trigger the corresponding event; js event response will automatically trigger a lifecycle function update if a data update is triggered, and the applet data is updated synchronously on the function, so that data synchronization is achieved.
The life cycle sub-module maps the life cycle of the target terminal to the life cycle of the Vue. As a specific example, the lifecycle sub-module modifies the construction configuration of Vue to construct a code format that conforms to the structure of the applet project. Therefore, the life cycle of the applet is also executed firstly after the applet is turned, and the life cycle submodule modifies Vue.
And the data synchronization sub-module modifies the synchronization item of the Vue. As a specific example, data of vue.js and applets are isolated from each other, each with a different update mechanism. And the data synchronization submodule is switched in from the life cycle and the event callback function, and realizes data synchronization when data updating is triggered by Vue. Js maintains data changes and logic in the background, through view layers to the user, through event response user interaction. Since the concept of browser dom is not available at the applet end, the capability of rendering views by the Vue.js is not applicable to the applet end, and modification is needed. The data updating terminal is used for the applet and is processed from Vue.js, and the data of Vue.js is synchronized to the applet after being changed.
Referring to fig. 1 and 4, the compiler module is used to compile scaffold 1 code in vue.js language into scaffold 1 code suitable for a target terminal language. The compiler module comprises an applet compiling submodule, a fast application compiling submodule and a ReactNative compiling submodule.
The compiler module uses the vue template compiler to parse the vue template grammar into ast and convert the ast as processing into applet view layer (xxml) grammar. As a specific example, the compiler module first traverses the entire project source code, parsing vue the template source code into three parts: labels, scripts and styles, and secondly, the three parts are transformed separately. The tags will switch to a set of wechat applet specification standard based fast application components 2 that have been previously built into the front end framework and developed with the ability to customize the components 2 with fast applications. The conversion of the script can be related to the built-in fast application runtime in the framework, the core of the fast application runtime is to set up vue instance, through vue instance, a render function and a static render function can be obtained, and through the two functions, vue related data, events, methods and the like can be obtained. The fast application runtime provides a general method for the interaction between the view layer and the logic layer, which is equivalent to proxying vue instances, so that events, data synchronization and life cycle are converted. The conversion of the pattern is simple, and since the reference width of the fast application is 750px, which is consistent with the specification standard of the front-end framework, the pattern of the source code is directly converted into the pattern of the fast application.
As a concrete example, the compiler module converts ReactNative based on an abstract syntax tree (ast), vue instances, css and option parts are obtained by converting an vue template into the ast, vue instances, css and option parts are compiled into a native component 2, and finally the component 2 is generated into an rn project structure by a compiler of a thanos-core-rn.
The front-end framework also comprises a packaging tool for packaging the scaffold 1, the component 2 and the API module which are suitable for the target terminal to generate a source code which can be run on the target terminal.
The front end framework provides the capability of custom plug-ins, an existing plug-in is the thanos-preload-plugin. Mainly solving the routing jump of the applet, the next page onLoad is only generated under the initialization overhead of about 100-. The principle is that when a route is initialized, a preload method registered on a page corresponding to the route is registered in a global variable, a key is a route address, and when the route is triggered to jump by a current page, the preload method is triggered, so that parameters can be transmitted by self-definition.
The front-end framework provides the user-defined dotting capability, realizes flexible and multidimensional point burying, and provides reliable data analysis capability for business analysis. The implementation principle is based on the current mature dotting scheme implementation.
Example 2
A front end frame development method based on the front end frame as in embodiment 1 includes steps S101 to S104.
Step S101: and developing new products by using the universal modules and the basic configuration provided by the scaffold 1.
Step S102: and compiling the scaffold 1 in the Vue.js language into the scaffold 1 matched with the target terminal by using the construction platform 5 through a compiler module, and mapping and associating the Vue.js terminal and the target terminal through a runtime module.
Step S103: the generic API3, proprietary API4 involved in the development process, and the business worker component 2 mapped with the standard worker component 2 are determined.
Step S104: and packaging the scaffold 1 adapted to the target terminal, the general API3 and the special API4 involved in the development process and the business working component 2 mapped with the standard working component 2 to generate a file package adapted to the target terminal.
Specifically, the runtime module comprises an event agent submodule, a life cycle submodule and a data synchronization submodule,
the event agent submodule uniformly develops registered events and converts the events of the Vue.js terminal into the events of the target terminal;
the life cycle submodule maps the life cycle of the target terminal to the life cycle of the Vue.
And the data synchronization sub-module modifies the synchronization item of the Vue.
The compiler module comprises an applet compiling submodule, a fast application compiling submodule and a ReactNative compiling submodule.
Specifically, the conversion of the compiler module scaffold 1 into the scaffold 1 corresponding to the target terminal includes:
analyzing the scaffold 1 source code of Vue.js language into an abstract syntax tree;
and then generating a language code corresponding to the target terminal by using the abstract syntax tree.
Example 3
A storage medium storing source code of a product developed based on the front-end framework in embodiment 1.
Example 4
An electronic device includes a memory mounted with a product developed based on the front-end framework in embodiment 1.
The above description is only a preferred embodiment of the present invention, and the protection scope of the present invention is not limited to the above embodiments, and all technical solutions belonging to the idea of the present invention belong to the protection scope of the present invention. It should be noted that modifications and embellishments within the scope of the invention may occur to those skilled in the art without departing from the principle of the invention, and are considered to be within the scope of the invention.
Claims (10)
1. Js-based front end framework, characterized in that: comprises that
The scaffold (1) provides developed universal modules and basic configuration;
the assembly (2) comprises a standard working assembly (2) and business working assemblies (2) which are mapped with the standard working assembly (2) one by one and are suitable for other terminals;
an API module including a general API (3) adapted to each terminal and a proprietary API (4) adapted to a specific terminal;
and the building platform (5) comprises a runtime module and a compiler module, the runtime module is used for realizing mapping association of the Vue.js terminal and the target terminal, and the compiler module is used for compiling the scaffold (1) code of the Vue.js language into the scaffold (1) code suitable for the target terminal language.
2. The front end frame of claim 1, wherein: the runtime module comprises an event agent submodule, a life cycle submodule and a data synchronization submodule,
the event agent submodule uniformly develops registered events and converts the events of the Vue.js terminal into the events of the target terminal;
the life cycle submodule maps the life cycle of the target terminal to the life cycle of the Vue.
And the data synchronization sub-module modifies the synchronization item of the Vue.
3. The front end frame of claim 1, wherein: the compiler module comprises an applet compiling submodule, a fast application compiling submodule and a ReactNative compiling submodule.
4. The front end frame of claim 1, wherein: the method further comprises a packaging tool for packaging the scaffold (1), the component (2) and the API module suitable for the target terminal to generate a source code capable of being operated at the target terminal.
5. A front-end frame development method is characterized by comprising the following steps: the front end frame as claimed in claim 1, comprising
Developing a new product by utilizing a universal module and basic configuration provided by the scaffold (1);
compiling the scaffold (1) of Vue.js language into a scaffold (1) matched with a target terminal by using a construction platform (5) through a compiler module, and mapping and associating the Vue.js terminal and the target terminal through a runtime module;
determining a general API (3), a special API (4) involved in the development process and a business working component (2) mapped with the standard working component (2);
and packaging the scaffold (1) adapted to the target terminal, the general API (3) and the special API (4) involved in the development process and the service working component (2) mapped with the standard working component (2) to generate a file package adapted to the target terminal.
6. The front-end frame development method of claim 5, characterized in that: the runtime module comprises an event agent submodule, a life cycle submodule and a data synchronization submodule,
the event agent submodule uniformly develops registered events and converts the events of the Vue.js terminal into the events of the target terminal;
the life cycle submodule maps the life cycle of the target terminal to the life cycle of the Vue.
And the data synchronization sub-module modifies the synchronization item of the Vue.
7. The front-end frame development method of claim 5, characterized in that: the compiler module comprises an applet compiling submodule, a fast application compiling submodule and a ReactNative compiling submodule.
8. The front-end frame development method of claim 7, wherein: the conversion of the compiler module scaffold (1) into a scaffold (1) corresponding to a target terminal comprises:
analyzing the scaffold (1) source code of Vue.js language into an abstract syntax tree;
and then generating a language code corresponding to the target terminal by using the abstract syntax tree.
9. A storage medium, characterized by: source code for a product developed based on the front end framework of any of claims 1 to 4 is stored.
10. An electronic device, characterized in that: comprising a memory, said memory being equipped with a product developed on the basis of the front-end framework of any one of claims 1 to 4.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910928397.3A CN110780853A (en) | 2019-09-28 | 2019-09-28 | Front end framework, development method, storage medium and electronic device |
| DE202020105389.2U DE202020105389U1 (en) | 2019-09-28 | 2020-09-21 | Front-end framework, storage medium and electronic device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910928397.3A CN110780853A (en) | 2019-09-28 | 2019-09-28 | Front end framework, development method, storage medium and electronic device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110780853A true CN110780853A (en) | 2020-02-11 |
Family
ID=69384761
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910928397.3A Pending CN110780853A (en) | 2019-09-28 | 2019-09-28 | Front end framework, development method, storage medium and electronic device |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN110780853A (en) |
| DE (1) | DE202020105389U1 (en) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111399835A (en) * | 2020-03-17 | 2020-07-10 | 中国建设银行股份有限公司 | Service stripping method and device for WEB front-end project |
| CN111427583A (en) * | 2020-04-12 | 2020-07-17 | 中信银行股份有限公司 | Component compiling method and device, electronic equipment and computer readable storage medium |
| CN112148263A (en) * | 2020-09-28 | 2020-12-29 | 建信金融科技有限责任公司 | Front-end standard frame and generation method, device, equipment and storage medium thereof |
| CN112199094A (en) * | 2020-10-23 | 2021-01-08 | 瑞庭网络技术（上海）有限公司 | Information display method and device, electronic equipment and computer readable medium |
| CN112417338A (en) * | 2020-11-30 | 2021-02-26 | 北京博瑞彤芸科技股份有限公司 | Page adaptation method, system and equipment |
| CN113126997A (en) * | 2021-04-21 | 2021-07-16 | 多点(深圳)数字科技有限公司 | Compiling method for generating multiple operation containers by front-end code |
| CN113553035A (en) * | 2021-07-08 | 2021-10-26 | 北京计算机技术及应用研究所 | Design and construction method of universal front-end UI component library |
| CN114416084A (en) * | 2021-12-31 | 2022-04-29 | 北京五八信息技术有限公司 | Data processing method and device, electronic equipment and storage medium |
| CN114840201A (en) * | 2022-03-29 | 2022-08-02 | 埃夫特智能装备股份有限公司 | HMI robot system based on web |
| CN115857900A (en) * | 2023-01-13 | 2023-03-28 | 安世亚太科技股份有限公司 | Code automatic generation method and device, electronic equipment and storage medium |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112559350A (en) * | 2020-12-16 | 2021-03-26 | 杭州数梦工场科技有限公司 | Debugging method, device and equipment for front-end development page and storage medium |
| CN113031932B (en) * | 2021-03-11 | 2023-10-20 | 腾讯科技（深圳）有限公司 | Project development method, apparatus, electronic device and storage medium |
| CN113515286B (en) * | 2021-05-08 | 2022-06-17 | 上海安畅网络科技股份有限公司 | Applet generating and running method, device, equipment and storage medium |
| CN113504898B (en) * | 2021-06-10 | 2024-08-02 | 深圳市云网万店科技有限公司 | Front-end assembly rapid processing method, system and computer storage medium for realizing business arrangement |
| CN113420532A (en) * | 2021-07-02 | 2021-09-21 | 北京沃东天骏信息技术有限公司 | Page file conversion method and device, electronic equipment and storage medium |
| CN113590125B (en) * | 2021-08-17 | 2024-09-20 | 天翼视联科技有限公司 | Applet development method and device |
| CN113835701B (en) * | 2021-09-22 | 2024-04-02 | 上海妙一生物科技有限公司 | Code generation method and device based on componentization |
| CN113918155A (en) * | 2021-11-11 | 2022-01-11 | 中电四川数据服务有限公司 | CSS dynamic programming method based on Vue framework and CSS variables |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100306734A1 (en) * | 2009-05-29 | 2010-12-02 | International Business Machines Corporation | Method and apparatus for multi-language software development |
| CN108984174A (en) * | 2018-07-03 | 2018-12-11 | 百度在线网络技术（北京）有限公司 | Cross-platform application creation method, device, server and storage medium |
-
2019
- 2019-09-28 CN CN201910928397.3A patent/CN110780853A/en active Pending
-
2020
- 2020-09-21 DE DE202020105389.2U patent/DE202020105389U1/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100306734A1 (en) * | 2009-05-29 | 2010-12-02 | International Business Machines Corporation | Method and apparatus for multi-language software development |
| CN108984174A (en) * | 2018-07-03 | 2018-12-11 | 百度在线网络技术（北京）有限公司 | Cross-platform application creation method, device, server and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 任性的我: "uni-app入门(一)--介绍", 《HTTPS://BLOG.CSDN.NET/WO_921110/ARTICLE/DETAILS/98875225》 * |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111399835A (en) * | 2020-03-17 | 2020-07-10 | 中国建设银行股份有限公司 | Service stripping method and device for WEB front-end project |
| CN111399835B (en) * | 2020-03-17 | 2024-05-17 | 中国建设银行股份有限公司 | Service stripping method and device for WEB front-end project |
| CN111427583A (en) * | 2020-04-12 | 2020-07-17 | 中信银行股份有限公司 | Component compiling method and device, electronic equipment and computer readable storage medium |
| CN112148263A (en) * | 2020-09-28 | 2020-12-29 | 建信金融科技有限责任公司 | Front-end standard frame and generation method, device, equipment and storage medium thereof |
| CN112148263B (en) * | 2020-09-28 | 2024-03-08 | 建信金融科技有限责任公司 | Front-end standard framework, and generation method, device, equipment and storage medium thereof |
| CN112199094A (en) * | 2020-10-23 | 2021-01-08 | 瑞庭网络技术（上海）有限公司 | Information display method and device, electronic equipment and computer readable medium |
| CN112199094B (en) * | 2020-10-23 | 2024-05-28 | 瑞庭网络技术（上海）有限公司 | Information display method, information display device, electronic equipment and computer readable medium |
| CN112417338B (en) * | 2020-11-30 | 2022-12-20 | 北京博瑞彤芸科技股份有限公司 | Page adaptation method, system and equipment |
| CN112417338A (en) * | 2020-11-30 | 2021-02-26 | 北京博瑞彤芸科技股份有限公司 | Page adaptation method, system and equipment |
| CN113126997A (en) * | 2021-04-21 | 2021-07-16 | 多点(深圳)数字科技有限公司 | Compiling method for generating multiple operation containers by front-end code |
| CN113553035A (en) * | 2021-07-08 | 2021-10-26 | 北京计算机技术及应用研究所 | Design and construction method of universal front-end UI component library |
| CN114416084A (en) * | 2021-12-31 | 2022-04-29 | 北京五八信息技术有限公司 | Data processing method and device, electronic equipment and storage medium |
| CN114840201A (en) * | 2022-03-29 | 2022-08-02 | 埃夫特智能装备股份有限公司 | HMI robot system based on web |
| CN115857900A (en) * | 2023-01-13 | 2023-03-28 | 安世亚太科技股份有限公司 | Code automatic generation method and device, electronic equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| DE202020105389U1 (en) | 2020-12-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110780853A (en) | Front end framework, development method, storage medium and electronic device | |
| US11474797B2 (en) | Generating closures from abstract representation of source code | |
| CN110928529A (en) | Method and system for assisting operator development | |
| KR101787527B1 (en) | Framework supporting apparatus for developing client application under multi-platform environment, and method using the same | |
| CN101311903A (en) | Method and device for reusing component of software system based on component | |
| CN113031932B (en) | Project development method, apparatus, electronic device and storage medium | |
| CN111399840A (en) | Module development method and device | |
| CN111045683A (en) | Applet code compiling method, device, equipment and medium | |
| CN111176629A (en) | Application development method and device | |
| CN110140108B (en) | Handling sibling calls | |
| CN111427583A (en) | Component compiling method and device, electronic equipment and computer readable storage medium | |
| CN113312046A (en) | Sub-application page processing method and device and computer equipment | |
| CN107025124B (en) | System architecture for developing single-machine software by web page technology | |
| CN116974620A (en) | Application program generation method, operation method and corresponding device | |
| CN115390846A (en) | Compiling construction method and device, electronic equipment and storage medium | |
| US20170052765A1 (en) | Method and system for creating app | |
| CN111435312A (en) | Application program management method and device and electronic equipment | |
| CN115794214B (en) | Application module metadata management method, device, storage medium and apparatus | |
| CN115373684A (en) | Applet fusion method and device, electronic equipment and storage medium | |
| CN114721647B (en) | Object-oriented programming method based on codeless application development | |
| CN116414494A (en) | Service processing method, device, equipment and storage medium | |
| US11775293B1 (en) | Deploying a static code analyzer based on program synthesis from input-output examples | |
| CN110837896B (en) | Storage and calling method and device of machine learning model | |
| Kramer et al. | Graphical user interfaces in dynamic software product lines | |
| CN118151933A (en) | Applet generation method, device, electronic equipment and computer readable storage medium |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200211 |