CN112286504B

CN112286504B - Method for realizing development and loading of applet based on REACTNATIVE in mobile APP

Info

Publication number: CN112286504B
Application number: CN202011258251.1A
Authority: CN
Inventors: 范岗民; 刘磊; 刘相
Original assignee: Primeton Information Technology Co ltd
Current assignee: Primeton Information Technology Co ltd
Priority date: 2020-11-12
Filing date: 2020-11-12
Publication date: 2024-05-24
Anticipated expiration: 2040-11-12
Also published as: CN112286504A

Abstract

The invention relates to a method for realizing development and loading of applets based on REACTNATIVE in a mobile APP, which comprises the steps of creating applets and internal files according to a picture directory structure, wherein the applets comprise an entry file, a project description file, a project code, a project dependence description file and a project packaging configuration file; debugging base support package and reference; developing a applet; packaging and running small-program compiling; the applet is run. By adopting the method for realizing applet development and loading based on REACTNATIVE in the mobile APP, the invention provides a development method of applet based on REACTNATIVE, thereby realizing applet development by using REACTNATIVE grammar, and simultaneously realizing privately-distributed deployment and applet release and management without depending on three-party manufacturers. The invention also provides a REACTNATIVE-based applet packaging method, so that REACTNATIVE items are packaged into independent applet items, and the problem that a native App loads a REACTNATIVE applet is also solved.

Description

Method for realizing development and loading of applet based on REACTNATIVE in mobile APP

Technical Field

The invention relates to the field of mobile APPs, in particular to the field of REACTNATIVE-based applet development, and specifically relates to a method for realizing applet development and loading based on REACTNATIVE in a mobile App.

Background

In the present mobile internet era, the number of apps in an application store is increasing, but the number of apps commonly used in a mobile device by a user is limited, so that how to manage functions in a single App is also increasing becomes a problem to be solved. Also, a large number of web applications inside the enterprise need to be implemented on the mobile end, and how to develop, manage and release the web applications needs to be solved by the new architecture.

Therefore, many enterprise business applications are managed by the architecture of the small program, function codes are developed in REACTNATIVE or Vue or Html5 modes, and are released and updated in a resource package mode, so that page effects superior to H5 can be guaranteed, the problem of cross-platform development can be solved, only one code is needed to run under the Android and iOS dual-platform, a developer can also develop and iterate quickly, and quick online is realized.

The current small program model in the market is mostly based on an html5 technology, pages and logic are developed by writing html5+js+css3 codes, loading pages are rendered through a native webview, a unified UI style is realized through expansion of a native webview, and the call of js codes to native capability is realized through bridging of webview. And packing the developed codes into an html offline package for management, and managing, auditing and distributing by the platform to realize the cloud quick update of the version.

The rendering of the applet generally adopts a JavaScript+Webview mode, and also has a mode of providing JavaScript+native by manufacturers, and in a scene with higher performance requirements, native rendering control is adopted, so that better experience is provided for users.

The description file of the applet generally adopts json format, mainly describes information such as applet basic data, applet dependent library version, used components and the like, and also some network and security configuration, and the part belongs to metadata of the applet and corresponds to application Id of the applet one by one.

Meanwhile, the implementation mode of the small program scheme in the industry is directly based on vue codes, namely, the vue technology is used for writing the application, and after development is completed, the application is packaged into a zip resource package to serve as a small program medium, so that platform management and release are realized.

The existing applets comprise WeChat, payment treasures applets and the like which are put forward by manufacturers such as Tencent, ari and the like, and also comprise schemes for privately deploying applets in an intranet by manufacturers such as general.

In the prior art, small programs such as WeChat, payment device and the like are taken as examples, the development language is not the standard JS+CSS+Html5 language, but the development language has own encapsulation, for example, the conventional Html tag and dom method cannot be used, CSS is also different from the standard CSS grammar, and the components and api encapsulated by the CSS need to be learned. This results in a significant additional learning cost. The invention can use the pure REACTNATIVE grammar to develop the small program, and realize rapid development and rapid iteration.

The existing applets, such as WeChat applets and Payment applets, are deployed on a manufacturer server, version release also needs to be checked by manufacturers, so that the application inside enterprises is limited, and the deployment on the manufacturer server is unsafe for the enterprises.

Disclosure of Invention

The invention aims to overcome the defects of the prior art and provides a method for realizing development and loading of small programs based on REACTNATIVE in mobile APP, which has the advantages of simple structure, unified development language and wider application range.

In order to achieve the above object, the method for realizing applet development and loading based on REACTNATIVE in the mobile APP of the present invention is as follows:

The method for realizing applet development and loading based on REACTNATIVE in the mobile APP is mainly characterized by comprising the following steps:

(1) Creating an applet and an internal file according to a picture directory structure, wherein the applet and the internal file comprise an entry file, a project description file, a project code, a project dependence description file and a project packaging configuration file;

(2) Debugging base support package and reference;

(3) Developing a applet;

(4) Packaging and running small-program compiling;

(5) The applet is run.

Preferably, the step (2) specifically includes the following steps:

(2.1) debugging the base and supporting the package, call and install the relevant dependence and consult supporting the package;

(2.2) starting a debugging service, reading a project description file, and setting a project route as an applet entry file;

(2.3) developing page content through the UI framework provided by the support package.

Preferably, the step (2.2) specifically includes the following steps:

(2.2.1) judging whether the development mode is in the development mode, if so, continuing the step (2.2.2); otherwise, continuing (2.2.3);

(2.2.2) displaying a debugging home page provided by a support package, displaying a currently debugged applet and a newly debugged applet list in a development mode, providing configuration debugging IP and ports, and connecting a base to a calling service after configuration is completed;

(2.2.3) in the non-development mode, the supporting package loads the corresponding media file according to the package configuration portal applet parameters, and after loading, the supporting package jumps to the corresponding page through route navigation according to the applet appId and the portal module name.

Preferably, the step (3) specifically includes the following steps:

(3.1) developing an applet in a debugging base, connecting a debugging service after the supporting package configures an address of the debugging base, and providing a compiling resource package of all files of a project;

(3.2) compiling in real-time when the files in the project catalog are changed, and synchronizing into the debugging base.

Preferably, the step (3.1) specifically includes the following steps:

(3.1.1) compiling the single file;

and (3.1.2) performing debugging service, and providing functions of file modification real-time updating, page refreshing, breakpoint debugging and network data viewing.

Preferably, the step (4) specifically includes the following steps:

And compiling and packaging, scanning all files under the project, compiling the files under the project directory into corresponding modules, summarizing module codes of js files to generate index. Jsbundle files, generating a compiling product zip package of the whole project, copying the modules to the compiling product, and realizing page-dependent components through a main bundle of a debugging base.

Preferably, the modules compiled in the step (4) include a page implementation code, a page unique identifier and a page dependent module, and the content of the modules compiled by the non js file contains information of a resource file path, a resource name and a resource suffix name.

Preferably, the step (5) specifically includes:

according to the small program appId, a zip resource package is searched locally, an index. Jsbundle file in the resource package is loaded, parameters of an small program entry page homepage are read, and the loading of a small program main interface is realized through REACTNATIVE route loading pages.

Preferably, the internal files in the step (1) include an entry file, a project description file, a project code, a project dependency description file and a project packaging configuration.

By adopting the method for realizing applet development and loading based on REACTNATIVE in the mobile APP, the invention provides a development method of applet based on REACTNATIVE, thereby realizing applet development by using REACTNATIVE grammar, and simultaneously realizing privately-distributed deployment and applet release and management without depending on three-party manufacturers. The invention also provides a REACTNATIVE-based applet packaging method, so that REACTNATIVE items are packaged into independent applet items, and the problem that a native App loads a REACTNATIVE applet is also solved.

Drawings

FIG. 1 is a flow chart of a method for implementing applet development and loading based on REACTNATIVE in a mobile APP of the present invention.

Fig. 2 is a schematic diagram of an applet directory structure of a method for implementing applet development and loading based on REACTNATIVE in a mobile APP according to the present invention.

Fig. 3 is a schematic diagram of an applet support package for implementing the method of applet development and loading based on REACTNATIVE in a mobile APP according to the present invention.

Fig. 4 is a schematic diagram of an applet architecture for implementing an applet development and loading method based on REACTNATIVE in a mobile APP according to the present invention.

Detailed Description

In order to more clearly describe the technical contents of the present invention, a further description will be made below in connection with specific embodiments.

The method for realizing development and loading of the applet based on REACTNATIVE in the mobile APP comprises the following steps:

(2) Debugging base support package and reference;

(2.2.3) in the non-development mode, the supporting package loads the corresponding media file according to the parameters of the package configuration portal applet, and after loading, the supporting package jumps to the corresponding page through route navigation according to the applet appId and the portal module name;

(2.3) developing page content through the UI framework provided by the support package;

(3) Developing a applet;

(3.1.1) compiling the single file;

(3.1.2) debugging service, providing functions of file modification real-time update, page refreshing, breakpoint debugging and network data viewing;

(3.2) compiling in real time when the files in the project catalog are changed, and synchronizing the files into the debugging base;

(4) Packaging and running small-program compiling;

compiling and packaging, scanning all files under the project, compiling the files under the project directory into corresponding modules, summarizing module codes of js files to generate index. Jsbundle files, generating a compiling product zip package of the whole project, copying the modules to the compiling product, and realizing page-dependent components through a main bundle of a debugging base;

(5) Running a applet;

As a preferred embodiment of the present invention, the modules compiled in the step (4) include a page implementation code, a page unique identifier and a page dependent module, and the content of the modules compiled by the non js file contains information of a resource file path, a resource name and a resource suffix name.

As a preferred embodiment of the present invention, the internal files in the step (1) include an entry file, a project description file, a project code, a project dependency description file, and a project packaging configuration.

In the specific implementation mode of the invention, in the current mobile internet age, the development requirements of mobile apps are more and more, and the number of apps accepted by users is limited, so the invention provides a REACTNATIVE-based applet implementation method, which realizes loading of a plurality of applet applications in one native App.

According to the invention, development of applet application by REACTNATIVE language is realized through expansion of REACTNATIVE application, connection with debugging service in a development mode is realized through the support package provided by the invention, a code is modified to refresh a page in real time, compiling of REACTNATIVE applet into a resource package is realized in a production mode, and loading of native App to the applet resource package is realized.

With the rapid development of the mobile internet, the applet not only opens a new gate for the flow for the developer, but also receives the favor of the enterprise, and the applet architecture has gradually become the main development direction inside the enterprise.

The invention takes the construction process of a small program architecture in the informatization construction process of a certain company as a specific embodiment, and the implementation method of the small program based on REACTNATIVE comprises the following steps:

In a traditional large enterprise, a large number of business processes are often accumulated, and a large number of business systems correspond to the business processes, so that the business mobility in the enterprise is an important step in informatization construction under the current trend of mobile office. To uniformly manage these business functions, it is implemented in the form of REACTNATIVE applets.

The technical scheme provides a REACTNATIVE-based applet implementation method, and the process of applet project structure, debugging base and supporting package, applet development, applet compiling and packaging, applet operation and the like will be described in detail.

1. Creating an applet:

1.1, firstly, creating an applet according to a picture directory structure, wherein the applet comprises five parts, namely an entry file, a project description file, a project code, a project dependency description file and a project packaging configuration.

1.2, The entry file is located in the root directory, is a js format file, the content is a development kit in the dependent chapter 3, a REACTNATIVE debugging entry is provided, and the entry is used as a project entry file for development and compiling.

1.3 The project description file is under the project root directory/config, and is a json format file, in which parameters such as appId (applet application id), appTyle (application type, default reactnative), appName, homepage (applet entry page), icon, version (applet version number), buildId (applet compilation number) are declared.

1.4, Project codes are in a src folder under the project root path, including a first page route statement, page codes, component codes and the like, and files under the folder are compiled by a compiling script.

The project dependency description file is a package. Json file under root directory in which all packages and components of the applet dependency and their versions are declared.

1.6, Project packing configuration is root directory/config/build_config/under, and according to different packing environments, dev, sit, uat, pro kinds of packing environments and configurations exist, wherein main configuration description exists in json file form, application icon, starting diagram and the like exist in file form, and packing script can use different configurations according to different environments.

2. Debug base support package and references:

2.1, the debug base and support package provide support for the development, debugging, and compilation phases of the applet, and call NPM INSTALL installs the relevant dependency and reference support package after the applet is created.

2.2, When the debugging service is started, the supporting package reads the 1.3 project description file, and sets the project route as the applet entry file.

And 2.3, in a development mode, displaying a debugging home page provided by the support package when entering the debugging base, wherein the debugging home page can display a currently debugged applet and a newly debugged applet list, provide functions of configuring a debugging IP and a port, and the base seat can be connected with a service after the configuration is completed.

2.4, In the non-development mode, after entering App, the support package will load the media file index. Jsbundle of the corresponding applet according to the parameters of the package configuration entry applets appId and homepage, and after the loading is completed, the support package will jump to the corresponding page through route navigation according to the applet appId and the entry module name.

2.5 The project dependency description file is a package. Json file under root directory in which all packages and components and versions thereof on which the applet depends are declared.

2.6, The support package provides a universal UI framework, only the page content needs to be developed, the universal head navigation style of the page is provided by the support package in a unified way, and the same style and the function capable of being expanded in a self-defined way are provided.

3. Small program development:

3.1, development of the small program is carried out in the debugging base, the support package in section 2 is connected with the debugging service after the debugging base is configured with addresses, provides compiled resource packages of all files of the project, is compiled in real time when the files in the project catalog are changed (modified, added and deleted), and is synchronized into the debugging base.

3.2 Development of applets provides the same experience as REACTNATIVE development and is compatible with REACTNATIVE having syntax.

3.3, (3.1) The debug service comprises two parts, wherein one part is compiling a single file, including js and png, mp3 and other resource files, and the js file is compiled into an index. And the other part is REACTNATIVE debugging service, and functions of file modification real-time updating, page refreshing, breakpoint debugging, network data viewing and the like are provided.

3.4 When a three-party component is needed in the development process, the component needs to be integrated by a debugging base, and the dependence is added and re-NPM INSTALL in an applet item package.

And 3.5, depending on the debugging service (3.3), the debugging base can load and display the current debugging applet and refresh the page in real time when the file is changed.

4. And (3) performing small-stroke compiling, packaging and running:

And 4.1, compiling and packaging the applet after development is completed, and scanning all files under the project during compiling, wherein each js file is compiled to generate a module with a unique identifier, module codes of all js files are summarized to generate index. Jsbundle files, and the compiling product of the whole project is a zip package.

4.2, (4.1) The unique identifier generation rule is appId plus the file relative path, for example appId is com.mobile.portalapp, the file relative path/src/mainpage. Js, and the generated unique identifier is/com.mobile.portalapp/src/mainpage. Js.

4.3, (4.1) Is the compiled product of the js file, and the fragments are as follows:

and 4.4, the page compiling module comprises a page realization code, a page unique identifier and other modules depending on the page.

4.5, Compiling the non-js file under the project directory into a module, wherein the content is information of the resource, such as a resource file path, a resource name, a resource suffix name and the like, and the fragments are as follows:

4.6, after compiling into a module, the resource file is copied into the compiled product, wherein the directory structure is consistent with the path of the file in the project.

4.6, Only the files under the project directory will be compiled into the corresponding modules, the components on which the page depends will not be compiled, and this part will be implemented by the main bundle of the debug base. All REACTNATIVE and compiled products of the three-party component package are only stored in the main bundle, and when the App is started, the loading is completed before the applet is loaded.

4.7, The applet item can be compiled into native Android and iOS applications, the applet is compiled into a zip package product first, then the zip package product is put into the assets directory under the debug base item, and the entry applets appId and homepage configured by the client are required to be set as the applet, so that the compiled App is changed into an applet App from the debug base.

5. Applet operation:

And 5.1, in the development process, entering a first page of the debugging base before entering the applet, wherein the page is provided by a support package in a section 3, the support package and the applet being debugged form a native REACTNATIVE project together, and the support package and the applet being debugged are loaded and run in the debugging base.

5.2, In the non-development period, the applet can be compiled into native Android and iOS applications, and can also be used as a standard applet for downloading, updating, loading, unloading and the like in a main application.

5.3, The applet can be compiled into native Android and iOS applications, when the application is started, the parameters of the configured entry applet appId, appType and the like are read by the native, after REACTNATIVE initialization is completed, the file of the applet, generally index. Jsbundle, is loaded, after loading is completed, the parameters of the applet entry page homepage are read, the page is loaded by REACTNATIVE routes, loading of the applet front page is realized, and later page skip is controlled by the applet internal skip logic.

And 5.4, in the App, the applet exists in the form of a zip resource package, and can be packaged into the App in advance or downloaded after the App is started.

And 5.5, when the applet is opened in the App, searching a zip resource package locally according to the applet appId, then loading an index. Jsbundle file in the resource package, reading parameters of an applet entry page homepage after successful loading, and loading the page by REACTNATIVE routes to realize the opening and operation of the applet.

In this specification, the invention has been described with reference to specific embodiments thereof. It will be apparent that various modifications and variations can be made without departing from the spirit and scope of the invention. The specification and drawings are, accordingly, to be regarded in an illustrative rather than a restrictive sense.

Claims

1. A method for implementing applet development and loading based on REACTNATIVE in a mobile APP, the method comprising the steps of:

(2) Debugging base support package and reference;

(3) Developing a applet;

(4) Packaging and running small-program compiling;

(5) Running a applet;

the step (2) specifically comprises the following steps:

the step (2.2) specifically comprises the following steps:

The step (3) specifically comprises the following steps:

2. The method for implementing applet development and loading based on REACTNATIVE in mobile APP according to claim 1, wherein said step (3.1) specifically comprises the steps of:

(3.1.1) compiling the single file;

3. The method for implementing applet development and loading based on REACTNATIVE in mobile APP according to claim 1, wherein said step (4) specifically comprises the steps of:

4. The method for implementing applet development and loading based on REACTNATIVE in mobile APP as claimed in claim 3, wherein the modules compiled in step (4) include a page implementation code, a page unique identifier and a page dependent module, and the contents of the modules not compiled by js file include information of resource file path, resource name and resource suffix name.

5. The method for implementing applet development and loading based on REACTNATIVE in mobile APP according to claim 1, wherein the step (5) specifically includes:

6. The method for implementing applet development and loading based on REACTNATIVE in a mobile APP according to claim 1, wherein the internal files in step (1) include an entry file, a project description file, a project code, a project dependency description file and a project packaging configuration.