Implementation method and system of cross-platform mobile terminal base

Abstract

The invention provides an implementation method and system for a cross-platform mobile terminal base. The method comprises the following steps: creating a unit-app project by using vue-cli; the method comprises the following steps: in a unit-app project, packaging and compiling common configurations provided by a function page and a unit-app development framework into an npm packet, and generating a backage.json file of the npm packet; the method comprises the following steps of: adding a new script into a script of a package.json file, and modifying a starting script; creating an src / config / index.js file and an src / const catalog which are correspondingly used as application configuration and an application constant catalog of a unit-app project, setting cross-platform configuration information according to a vue environment, and defining a constant value of a routing jump page in the application constant catalog; an src / view file and an src / page file are created; and when a cross-platform mobile terminal base project is newly built, the application configuration of the unit-app project is used and modified according to specified requirements, and then the cross-platform mobile terminal base is obtained. According to the invention, function realization and compatibility of different platforms are realized.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and more particularly to a method and system for implementing a cross-platform mobile terminal base. Background Art

[0002] Currently, developers often develop multiple cross-platform projects for different projects. Therefore, when common functions need to be upgraded, multiple cross-platform projects also need to be upgraded and maintained separately, resulting in differences or even separation of some functions, which may affect user experience at best, or even cause system errors and affect data security at worst. This creates a huge obstacle to project maintenance and secondary development, and is not conducive to normal software iteration and upgrade. Summary of the invention

[0003] The embodiment of the present application provides a method and system for implementing a cross-platform mobile terminal base to solve the problems existing in the related technologies. The technical solution is as follows:

[0004] In a first aspect, an embodiment of the present application provides a method for implementing a cross-platform mobile terminal base, including:

[0005] Use vue-cli to create a uni-app project;

[0006] In the uni-app project, the function page and the common configuration provided by the uni-app development framework are packaged and compiled into an npm package to generate a package.json file of the npm package. The function page includes a basic function page and a business function page. The npm package includes two types: a public library and a page module.

[0007] In the script script of the package.json file, add a new script and modify the startup script, wherein the new script uses the yarn package management tool to install the root directory and src directory dependencies in sequence, and the modified startup script sets the vue environment by adding the parameter VUE_APP_ENV=development;

[0008] Create a src / config / index.js file, use the src / config / index.js file as the application configuration of the uni-app project, and set cross-platform configuration information according to the vue environment;

[0009] Create a src / const directory, use the src / const directory as the application constant directory of the uni-app project, and define constant values ​​of the route jump page in the application constant directory;

[0010] Create a src / views file and a src / pages file, wherein the src / views file is used to store technical pages not related to the business, and the src / pages file is used to store functional pages related to the business;

[0011] Submit the uni-app project as the default template for the mobile terminal base to the git repository;

[0012] Call the scaffolding tool or the git repository to use the default template to create a new cross-platform mobile terminal base project, modify the application configuration of the default template according to specified needs, and obtain the cross-platform mobile terminal base.

[0013] In one embodiment, the common library is used to provide the common configuration, which includes a common tool library, a common storage, application constants, and Ajax request capability, routing jump capability, message prompt capability, pop-up window capability, and app automatic update capability;

[0014] The page module is used to provide pages with complete functions, including the functional pages.

[0015] In one implementation, the Ajax request capability is used to provide a request method, which is a method of using the cross-platform request library luch-request in uview-ui and performing secondary encapsulation; the request method is used to read the application configuration, and set the default values ​​of the request root path and the default request method, and pass in the corresponding parameter data in subsequent calls to overwrite the original default values;

[0016] The routing jump capability is used to provide a routing jump method of the pre-configured uni-app development framework, and perform secondary encapsulation on the routing jump method; introduce the routing jump method in main.js and bind vue globally; when the page needs to perform routing jump, call the permission judgment method, and execute the routing jump method after the judgment is passed, otherwise it will prompt that there is no permission;

[0017] The message prompt capability is used to provide a pre-configured message prompt method;

[0018] The pop-up window capability is used to provide pre-configured warning pop-up windows, confirmation pop-up windows, and question pop-up windows, and perform secondary packaging on the warning pop-up windows, confirmation pop-up windows, and question pop-up windows according to the uni.showModal method of the uni-app development framework, and pass in corresponding data according to the parameter passing method of the uni.showModal method to call the warning pop-up windows, confirmation pop-up windows, and question pop-up windows;

[0019] The app automatic update capability is used to provide an automatic update method, which obtains the new version by calling the request method request interface and encapsulates the download and installation update methods of the uni-app development framework to realize the automatic update of the app.

[0020] In one embodiment, the common configuration further includes a store state management capability, and the store state management capability is used to provide a log management function and a global exception handling mechanism;

[0021] The log management function is used to support access to logs, and also supports multiple clicks or long presses on a specified location, and input of a specific text value to jump to view the log;

[0022] The global exception handling mechanism is used to obtain application exceptions using the onError lifecycle provided by the uni-app development framework in App.vue, and use the log management function to record errors.

[0023] In one embodiment, the method further comprises:

[0024] Create the src / main.js entry file;

[0025] The packaged public library is introduced into the src / main.js entry file, and the packaged public library is globally bound to the vue instance to provide page function calls in the uni-app project.

[0026] In one embodiment, the method further comprises:

[0027] Create the first vue file in the page directory of the uni-app project;

[0028] The page module is introduced into the first vue file, the components of the page module are registered, and the registration route is configured in the src / pages.json of the uni-app project to implement access to the page module.

[0029] In one embodiment, calling a scaffolding tool or the git repository to create a new cross-platform mobile terminal base project using the default template, modifying the application configuration of the default template according to specified needs, and obtaining a cross-platform mobile terminal base includes:

[0030] Call the git repository to create the cross-platform mobile terminal base project based on the default template, modify the application configuration of the default template according to project requirements, and obtain the cross-platform mobile terminal base; or,

[0031] Create the scaffolding tool, call the scaffolding tool to pull the default template from the git repository, create the cross-platform mobile terminal base project based on the default template, and interactively modify the application configuration of the default template through the options provided by the scaffolding tool to obtain the cross-platform mobile terminal base.

[0032] In one embodiment, a new service function is developed on the cross-platform mobile terminal base in the following manner:

[0033] Create a function directory related to the new business function in the src / pages file;

[0034] Create at least one second vue file in the function directory according to business needs;

[0035] In at least one of the second vue files, use an alias path to access various configurations in the src / config / index.js file and constant values ​​in the src / const directory;

[0036] If it is necessary to create a utils tool library method related to the new business function, create a js file of the utils tool library method in the function directory;

[0037] When accessing the utils tool library method, an alias path is used in at least one of the second vue files to access a tool library with a specified name related to the new business function, and the specified name depends on the file naming of the secondary developer.

[0038] In one embodiment, the secondary development function is performed on the cross-platform mobile terminal base in the following manner:

[0039] Introduce the npm package module into the page module;

[0040] Use the hooks and slots provided by the page module to modify and customize functions;

[0041] Take the function directory as the target npm package, initialize the configuration file of the package.json file based on the target npm package, and add dependencies to the configuration file;

[0042] Configure the sie-app property of the target npm package, and then publish the target npm package to the npm library or submit it to the git repository.

[0043] In a second aspect, the embodiment of the present application further provides a system for implementing a cross-platform mobile terminal base, including:

[0044] The first creation unit is used to create a uni-app project using vue-cli;

[0045] The encapsulation and compilation unit is used to encapsulate and compile the function page and the common configuration provided by the uni-app development framework into an npm package in the uni-app project, and generate a package.json file of the npm package. The function page includes a basic function page and a business function page. The npm package includes two types: a public library and a page module.

[0046] A script processing unit, used to add a new script to the script script of the package.json file, and to modify the startup script, wherein the new script uses the yarn package management tool to install the root directory and src directory dependencies in sequence, and the modified startup script sets the vue environment by adding the parameter VUE_APP_ENV=development;

[0047] The second creation unit is used to create a src / config / index.js file, use the src / config / index.js file as the application configuration of the uni-app project, and set cross-platform configuration information according to the vue environment; create a src / const directory, use the src / const directory as the application constant directory of the uni-app project, and define constant values ​​of route jump pages in the application constant directory; create a src / views file and a src / pages file, wherein the src / views file is used to store technical pages unrelated to the business, and the src / pages file is used to store functional pages related to the business;

[0048] A submission unit, used to submit the uni-app project as a default template of the mobile terminal base to a git repository;

[0049] A new unit is used to call the scaffolding tool or the git repository to use the default template to create a new cross-platform mobile terminal base project, modify the application configuration of the default template according to specified needs, and obtain a cross-platform mobile terminal base.

[0050] In one embodiment, the common library is used to provide the common configuration, which includes a common tool library, a common storage, application constants, and Ajax request capability, routing jump capability, message prompt capability, pop-up window capability, and app automatic update capability;

[0051] The page module is used to provide pages with complete functions, including the functional pages.

[0052] In one implementation, the Ajax request capability is used to provide a request method, which is a method of using the cross-platform request library luch-request in uview-ui and performing secondary encapsulation; the request method is used to read the application configuration, and set the default values ​​of the request root path and the default request method, and pass in the corresponding parameter data in subsequent calls to overwrite the original default values;

[0053] The routing jump capability is used to provide a routing jump method of the pre-configured uni-app development framework, and perform secondary encapsulation on the routing jump method; introduce the routing jump method in main.js and bind vue globally; when the page needs to perform routing jump, call the permission judgment method, and execute the routing jump method after the judgment is passed, otherwise it will prompt that there is no permission;

[0054] The message prompt capability is used to provide a pre-configured message prompt method;

[0055] The pop-up window capability is used to provide pre-configured warning pop-up windows, confirmation pop-up windows, and question pop-up windows, and perform secondary packaging on the warning pop-up windows, confirmation pop-up windows, and question pop-up windows according to the uni.showModal method of the uni-app development framework, and pass in corresponding data according to the parameter passing method of the uni.showModal method to call the warning pop-up windows, confirmation pop-up windows, and question pop-up windows;

[0056] The app automatic update capability is used to provide an automatic update method, which obtains the new version by calling the request method request interface and encapsulates the download and installation update methods of the uni-app development framework to realize the automatic update of the app.

[0057] In one embodiment, the common configuration further includes a store state management capability, and the store state management capability is used to provide a log management function and a global exception handling mechanism;

[0058] The log management function is used to support access to logs, and also supports multiple clicks or long presses on a specified location, and input of a specific text value to jump to view the log;

[0059] The global exception handling mechanism is used to obtain application exceptions using the onError lifecycle provided by the uni-app development framework in App.vue, and use the log management function to record errors.

[0060] In one implementation, the second creating unit is further configured to:

[0061] Create the src / main.js entry file;

[0062] The packaged public library is introduced into the src / main.js entry file, and the packaged public library is globally bound to the vue instance to provide page function calls in the uni-app project.

[0063] In one implementation, the second creating unit is further configured to:

[0064] Create the first vue file in the page directory of the uni-app project;

[0065] The page module is introduced into the first vue file, the components of the page module are registered, and the registration route is configured in the src / pages.json of the uni-app project to implement access to the page module.

[0066] In one embodiment, the new creation unit is used to call the scaffolding tool or the git repository to use the default template to create a new cross-platform mobile terminal base project, modify the application configuration of the default template according to the specified needs, and obtain the cross-platform mobile terminal base, specifically for:

[0067] Call the git repository to create the cross-platform mobile terminal base project based on the default template, modify the application configuration of the default template according to project requirements, and obtain the cross-platform mobile terminal base; or,

[0068] Create the scaffolding tool, call the scaffolding tool to pull the default template from the git repository, create the cross-platform mobile terminal base project based on the default template, and interactively modify the application configuration of the default template through the options provided by the scaffolding tool to obtain the cross-platform mobile terminal base.

[0069] In one embodiment, the implementation system of the cross-platform mobile terminal base further includes a development unit, and the development unit is used to develop a new business function on the cross-platform mobile terminal base in the following manner:

[0070] Create a function directory related to the new business function in the src / pages file;

[0071] Create at least one second vue file in the function directory according to business needs;

[0072] In at least one of the second vue files, use an alias path to access various configurations in the src / config / index.js file and constant values ​​in the src / const directory;

[0073] If it is necessary to create a utils tool library method related to the new business function, create a js file of the utils tool library method in the function directory;

[0074] When accessing the utils tool library method, an alias path is used in at least one of the second vue files to access a tool library with a specified name related to the new business function, and the specified name depends on the file naming of the secondary developer.

[0075] In one embodiment, the development unit is further configured to perform secondary development functions on the cross-platform mobile terminal base in the following manner:

[0076] Introduce the npm package module into the page module;

[0077] Use the hooks and slots provided by the page module to modify and customize functions;

[0078] Take the function directory as the target npm package, initialize the configuration file of the package.json file based on the target npm package, and add dependencies to the configuration file;

[0079] Configure the sie-app property of the target npm package, and then publish the target npm package to the npm library or submit it to the git repository.

[0080] The advantages or beneficial effects of the above technical solution include at least:

[0081] (1) Due to the cross-platform features of the Uni-App development framework and UView-UI2, developers only need to write code once to run it on multiple platforms, greatly reducing duplication of work and maintenance costs, allowing developers to significantly improve the development efficiency of cross-platform applications.

[0082] (2) By re-encapsulating the common configurations of the uni-app development framework, such as request methods, global exception handling mechanisms, and log management functions, the robustness and security of the application can be enhanced. For example, the request method automatically carries a token and a response interceptor, ensuring the security of user data and the stable operation of the application. The global exception handling mechanism and log management function provide strong support for development and maintenance, making problem location and repair faster and more accurate.

[0083] (3) Due to the use of unified coding standards and packaging methods, developers can easily understand and maintain the code, which also makes it easier for new members to quickly get started, greatly simplifying the secondary development process. This consistent and standardized development model facilitates team collaboration and knowledge sharing.

[0084] (4) By adopting UView-UI2, unified user interface components and interaction design are ensured, so that users can get a consistent operating experience on different platforms and devices, which not only improves user satisfaction, but also enhances the consistency of brand image.

[0085] (5) By using npm package management, flexibility and scalability are guaranteed, allowing it to adapt to changing business needs and technological developments. Developers can easily add new features and components as needed without rewriting existing code. This forward-looking design concept ensures that the application can maintain its competitiveness and market adaptability in the long term.

[0086] In summary, the implementation method of the cross-platform mobile terminal base provided in the embodiment of the present application, through the secondary encapsulation of the uni-app development framework, combined with uview-ui and vue2 for development, realizes the combination of multiple business functions in different projects, and ensures the unification of styles and interactive styles, greatly improving the development efficiency and user experience. At the same time, it provides great development convenience for secondary developers, simplifies the development process, and improves the efficiency of secondary development. In addition, the npm package characteristics of node technology are also used to realize the unified version management of npm packages. That is, the cross-platform mobile terminal base in the embodiment of the present application realizes the function implementation and compatibility of different platforms.

[0087] The above summary is for illustrative purposes only and is not intended to be limiting in any way. In addition to the illustrative aspects, embodiments and features described above, further aspects, embodiments and features of the present application will be readily apparent by reference to the accompanying drawings and the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0088] In the accompanying drawings, unless otherwise specified, the same reference numerals throughout the multiple drawings represent the same or similar parts or elements. These drawings are not necessarily drawn to scale. It should be understood that these drawings only depict some embodiments disclosed in the present application and should not be regarded as limiting the scope of the present application.

[0089] Figure 1 A flowchart of a method for implementing a cross-platform mobile terminal base provided in an embodiment of the present application;

[0090] Figure 2 A structural block diagram of a cross-platform mobile terminal base implementation system provided in an embodiment of the present application. DETAILED DESCRIPTION

[0091] In the following, only some exemplary embodiments are briefly described. As those skilled in the art will appreciate, the described embodiments may be modified in various ways without departing from the spirit or scope of the present application. Therefore, the drawings and descriptions are considered to be exemplary and non-restrictive in nature.

[0092] Before introducing the embodiments of the present application, some terms in the embodiments of the present application are first explained to facilitate understanding by those skilled in the art.

[0093] uni-app is a framework for developing front-end applications using Vue.js. It supports compilation to multiple platforms such as iOS, Android, H5, HarmonyOS, and various mini-programs.

[0094] Node.js is a JavaScript runtime environment based on the Chrome V8 engine, where JavaScript can also be referred to as JS.

[0095] npm is the package manager for the Node JavaScript platform, which is used to put modules into place so that Node can find them, and intelligently manage dependency conflicts.

[0096] Yarn is a new JS package management tool that aims to make up for some shortcomings of npm, such as slow installation speed, inconsistent versions, and security risks.

[0097] H5 stands for HTML5. H5 refers to web pages with animation and interactive functions displayed on mobile devices that can play Flash effects on smartphones, that is, mobile web pages. Such web pages can be used for advertising and marketing, and can bring users visual impact and interactive experience.

[0098] uview-ui2 is a UI framework based on uni-app and vue2, which provides rich components and convenient APIs, allowing developers to quickly build beautiful and feature-rich user interfaces. The various color buttons, input boxes, tables and other individual blocks or the entire interface for user interaction are composed of a single or multiple UI components.

[0099] Vue2 is a web front-end framework used for front-end interface development. It realizes two-way binding display of data and interactive component development, greatly improving development efficiency.

[0100] Various technical solutions provided by the embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0101] Figure 1A flow chart showing a method for implementing a cross-platform mobile terminal base according to an embodiment of the present application is shown. Figure 1 As shown, the method may include the following steps:

[0102] S110. Use vue-cli to create a uni-app project.

[0103] As an example, you can use vue-cli to create the uni-app project using the official preset template dcloudio / uni-preset-vue provided by the uni-app development framework, or you can use the plug-in mechanism of vue-cli to create the uni-app project, which is not limited to this embodiment of the present application.

[0104] S120. In the uni-app project, the function page and common configurations provided by the uni-app development framework are packaged and compiled into an npm package, and a package.json file of the npm package is generated.

[0105] In one embodiment, the common configuration may include, but is not limited to: a public tool library, a public storage (store), application constants, and Ajax request capability, route jump capability, message prompt capability, pop-up window capability, and app automatic update capability.

[0106] In specific implementation, the Ajax request capability is used to provide a request method, wherein the request method is a method of using the cross-platform request library luch-request in uview-ui and performing secondary encapsulation. The request method is used to read the application configuration and set the default values ​​for the request root path and the default request method. The corresponding parameter data is passed in subsequent calls to overwrite the original default values.

[0107] As an example, the corresponding parameter data may include, but is not limited to: url request path, method request method, data request data body, header request header and custom parameter custom.

[0108] As an example, the request method may include a request interceptor and a response interceptor. Before the request is sent, the request interceptor will intercept the data and determine whether it is platform a or platform b according to the request type value configured in the application: if the current configuration of platform a in the application configuration is restful style and platform b is customized style, the request processing method passed in by platform b will be used to reorganize the data structure. The response interceptor will first determine whether the HTTP status code is successful. If successful, it will determine whether the returned data service is successful according to the request type configured in the application. If the request type is platform a, it will determine whether the code value of the returned data is correct, or if the request type is platform b, it will determine whether the response is correct according to the incoming response interceptor function; if it is incorrect, the following message prompt method will be called to prompt an error; when the statusCode status is unsuccessful, conditional access and / or judgment will be used to capture the error information, and the configuration custom parameter custom passed in when calling the request method will control whether the error information is prompted. The error information in the request can be viewed in the following log management function.

[0109] In specific implementation, the route jump capability can be used to provide a pre-configured route jump method for the uni-app development framework, and to perform secondary packaging of the route jump method. For example, the route jump method can be secondary packaged according to the method in "Pages and Routes" of the uni-app development framework; the route jump method is introduced in main.js and bound to the vue global, so that it is convenient for page development to call the route jump method; when the page needs to perform a route jump, the permission judgment method is called, and the route jump method is executed after the judgment is passed. If the judgment fails, it will prompt that there is no permission.

[0110] As an example, the route jump method may include but is not limited to: a go method, a back method, and a reLaunch method.

[0111] In specific implementation, the message prompt capability can be used to provide a pre-configured message prompt method to prompt the corresponding message. Among them, the message prompt method may include but is not limited to: the default method $toast, the pre-configured success prompt method $success, and the failure prompt method $error. Exemplarily, the pre-configured success prompt method $success can be accompanied by a success icon. The failure prompt method $error can be accompanied by a failure icon.

[0112] In specific implementation, the pop-up window capability is used to provide pre-configured warning pop-ups, confirmation pop-ups, and question pop-ups, and the warning pop-up window confirmation pop-up window and question pop-up window are re-encapsulated according to the uni.showModal method of the uni-app development framework, and the corresponding data is passed in according to the parameter passing method of the uni.showModal method to call the warning pop-up window, confirmation pop-up window, and question pop-up window. Among them, the corresponding data can be set according to actual needs, and this embodiment of the application is not limited to this.

[0113] As an example, the pop-up window capability can also be used to bind the warning pop-up window, confirmation pop-up window, and question pop-up window to the vue global in main.js and call them on the page.

[0114] In specific implementation, the app automatic update capability can be used to provide an automatic update method. The automatic update method can obtain the new version by calling the above request method request interface and encapsulate the download and installation update method of the uni-app development framework to realize the automatic update of the app.

[0115] Exemplarily, the app's automatic update capability can call the above-mentioned request method to request the system information acquisition method of the uni-app development framework, obtain version information through the system information acquisition method and compare it with the server version, and after detecting the new version, a pop-up window will be displayed to prompt the user whether to update; after choosing to update, the method of downloading and installing the update package of the uni-app development framework will be called. After the update package is successfully installed, the app will be automatically opened to realize automatic update of the app.

[0116] In actual applications, this common configuration can add more functions according to iterative upgrades in the future. After these functions in the common configuration are repackaged, the common configuration will be configured by default. Developers only need to focus on the code to call it, which can reduce the attention to each configuration.

[0117] For example, you can add store state management capabilities to common configurations, that is, common configurations also include store state management capabilities. Among them, store state management capabilities can be used to provide log management functions and global exception handling mechanisms.

[0118] In specific implementation, the log management function is used to support access logs, such as supporting the viewing of log records on the log management page (such as flipping pages up and down to view), and also supporting multiple clicks or long presses on specified locations, and inputting specific text values ​​to jump to view logs. That is, in addition to supporting normal access, the log management function also supports multiple clicks or long presses on certain special locations (specified locations), and inputting certain specific text values ​​to jump to view logs. These specified locations and specific text values ​​can be set according to actual needs, and the embodiments of the present application are not limited to this.

[0119] Exemplarily, the log management function may also provide a public recording method, and by calling the recording method and passing in text, a log may be written into the cache with the date and time attached.

[0120] In the specific implementation, the global exception handling mechanism is used in App.vue to utilize the onError lifecycle provided by the uni-app development framework to obtain application exceptions, and use the log management function to record errors.

[0121] In one embodiment, the function page may include but is not limited to: a basic function page and a business function page. The basic function page may include but is not limited to: a login page, a home page, and a log management page.

[0122] In one implementation, the version management function of the npm package can be inherited by publishing an npm private library or a public library.

[0123] In one embodiment, the npm package may include two types: a common library and a page module. The common library may be used to provide the common configuration. The page module may be used to provide a page with complete functions, including a function page. The function page has been initialized, packaged, and published by the npm package and can be used by mobile terminal bases of different projects.

[0124] In one implementation, a src / main.js entry file may be created; a packaged common library may be introduced into the src / main.js entry file, and the packaged common library may be globally bound to the vue instance to provide page function calls in the uni-app project.

[0125] In one implementation, a first vue file may be created in the page directory of the uni-app project; the page module is then introduced in the first vue file, components of the page module are registered, and a registration route is configured in src / pages.json of the uni-app project to enable access to the page module.

[0126] In an embodiment of the present application, by executing step S120, when compiling and packaging a project, the uni-app development framework is used to support the compilation of multiple platforms, and the packaging and compilation functions of multiple platforms are realized, and the common methods of the uni-app development framework can be encapsulated in the cross-platform mobile terminal base for global use, such as request methods, message prompt methods, pop-up window methods, route jump methods, app automatic update methods, etc. When the second developers of different platforms develop codes, they only need to call these common methods of secondary encapsulation to achieve unified functions, styles, and interactions under different platforms. This is because these common methods of secondary encapsulation can obtain certain default parameters of the current platform setting method according to the uni-app development framework, so that the functions, styles, and interactions are kept as unified as possible. The configuration parameters under different platforms may be different, but the cross-platform mobile terminal base will integrate all configurations as much as possible, so that the development time of the general method can be reduced during development. At the same time, it is also possible to configure the basic function page, business function page and other common configurations in the cross-platform mobile terminal base.

[0127] S130. Add a new script to the script script in the package.json file, and modify the startup script.

[0128] In the specific implementation, the new script uses the yarn package management tool to install the root directory and src directory dependencies in sequence. The modified startup script (dev) sets the vue environment by adding the parameter VUE_APP_ENV=development.

[0129] S140. Create a src / config / index.js file, use the src / config / index.js file as the application configuration of the uni-app project, and set the cross-platform configuration information according to the vue environment.

[0130] In one implementation, the cross-platform configuration information may include, but is not limited to: baseURL request root path, package name, appId, and cross-platform environment.

[0131] S150. Create a src / const directory, use the src / const directory as the application constant directory of the uni-app project, and define constant values ​​of the routing jump page in the application constant directory.

[0132] Exemplarily, constant values ​​for routing to basic function pages such as the login page and home page can be defined in the application constant directory.

[0133] S160. Create a src / views file and a src / pages file, wherein the src / views file is used to store technical pages that are not related to the business, and the src / pages file is used to store functional pages that are related to the business.

[0134] For example, the src / views file is used to store technical pages not related to the business, such as the login page and the home page. The src / pages file stores business function pages, log management pages, and other business-related function pages.

[0135] S170. Submit the uni-app project to the git repository as the default template for the mobile dock.

[0136] In the specific implementation, by submitting the uni-app project as the default template of the mobile base to the git repository, it is convenient for subsequent multiple platforms (such as multiple low-code platforms) to directly pull the default template from the git repository for use.

[0137] S180. Call a scaffolding tool or a git repository to create a cross-platform mobile terminal base project using the default template, modify the application configuration of the default template as required, and obtain a cross-platform mobile terminal base.

[0138] In one implementation, a git repository may be called to create a new cross-platform mobile terminal base project based on the default template, and the application configuration of the default template may be modified according to project requirements to obtain a cross-platform mobile terminal base.

[0139] In another implementation, a scaffolding tool may be created, and then the scaffolding tool may be called to pull the default template from the git repository, and a new cross-platform mobile terminal base project may be created based on the default template. The application configuration of the default template may be interactively modified through the options provided by the scaffolding tool to obtain a cross-platform mobile terminal base.

[0140] As an example, in the above two implementations, the default template may be modified as follows:

[0141] Modify the request root path in the application configuration, configure the request type according to the platform where the project is located, and modify the configuration to enable tenants. According to the platform a or platform b, you can modify the paths of basic function pages such as the login page and home page in the application constants and the menu structure of the home page menu. The page and interface whitelist can be customized and added to the application constants.

[0142] In specific implementation, the cross-platform mobile terminal base can run on multiple platforms.

[0143] In the embodiment of the present application, by executing the above steps S110-S180, the common functions of the uni-app development framework can be integrated and packaged on the cross-platform mobile terminal base based on the original uni-app and vue2 development capabilities, so that different projects can be developed according to the specifications of uview-ui and vue2, thereby realizing the combination of multiple business functions in different projects and ensuring the unification of styles and interactive styles, greatly improving development efficiency and user experience, and at the same time, it can also provide great development convenience for secondary developers, simplify the development process, improve secondary development efficiency, and ensure the maintainability and scalability of the code. In addition, the npm package characteristics of node technology are also used to achieve unified version management of npm packages.

[0144] In an embodiment of the present application, the cross-platform mobile terminal base obtained through the above steps S110 to S180 can support the development of new business functions and secondary development functions.

[0145] In one implementation, a new service function may be developed on a cross-platform mobile terminal base in the following manner:

[0146] Create a function directory related to the new business function in the src / pages file. For example, you can create the function directory in the src / pages file according to the uni-app development specification; create at least one second vue file in the function directory according to business needs; use the alias path in at least one second vue file to access the various configurations in the src / config / index.js file and the constant values ​​in the src / const directory. For example, you can use @ / config in at least one second vue file to access the various configurations in the src / config / index.js file, and use @ / const / xxx to access the constant values ​​in the src / const directory.

[0147] In specific implementation, if you need to create a utils tool library method related to the new business function in the process of developing a new business function on a cross-platform mobile terminal base, you can create a js file for the utils tool library method in the function directory; when accessing the utils tool library method, you can use an alias path in at least one second vue file to access the tool library with a specified name related to the new business function, and the specified name depends on the file naming of the secondary developer. For example, you can use @ / utils / xxx in at least one second vue file to access the xxx tool library, where xxx represents the specified name, which depends on the file naming of the secondary developer.

[0148] In one implementation, the following method can be used to perform secondary development functions on a cross-platform mobile terminal base:

[0149] Introduce the npm package module in the page module; use the hooks and slots provided by the page module to modify and customize the functions; use the above function directory as the target npm package, initialize the configuration file of the package.json file based on the target npm package, and add the dependencies to the configuration file; configure the sie-app property of the target npm package, and then publish the target npm package to the npm library or submit it to the git repository. Among them, the version configuration of the npm package can be used to implement the version management function of the target npm package.

[0150] As an example, when running the cross-platform mobile terminal base in the embodiment of the present application, the process of implementing the above-mentioned global exception handling mechanism can be as follows:

[0151] Run the npm command to install the yarn package management tool, and run the package.json script command to install the root directory and src directory to install dependencies. After the installation is complete, start the project and you can access the web mobile project at the address prompted in the command line.

[0152] When accessing the web mobile terminal, the following steps in App.vue are executed:

[0153] Step 1: Token verification.

[0154] In step 1, the token login credential verification will be performed. If there is no token in the cache, the login page will be jumped; if there is a token, the home page will be jumped.

[0155] That is, in step 1, the first visit will jump to the login page, enter the account password, click login, and jump to the home page after successful login. In this step, since the basic page of the corresponding platform is modified, the customized home page of the corresponding platform will jump after login.

[0156] In step 1, the above request method can be called when logging in. After the request is successful, the corresponding token field value and user information are received and stored in the store state management for global calls within the application. After logging in, the page is jumped to select the login environment, etc., depending on whether the pre-jump page before jumping to the home page is configured in the application constants, for the corresponding platform. For example, if the platform is configured with a pre-jump page for selecting the login environment, the home page will be jumped after selecting the login environment, or if the platform is not configured with a pre-jump page, the home page will be jumped directly. The login page, pre-jump page, and home page can all be modified in the application constants, and the cross-platform mobile terminal base will jump accordingly according to the application constant configuration value. The menu group and menu function entrance defined in the application constants will be displayed on the home page, and you can enter the corresponding function by clicking.

[0157] Step 2: App update detection.

[0158] In step 2, the version detection interface will be called to obtain the latest version according to the appid and environment, and then verified with the local app to prompt whether to update. If the update is confirmed, the above automatic update method will be called to automatically update the app.

[0159] Step 3: Monitor network status.

[0160] In step 3, the monitoring method is set and the current network status is recorded. When the network status changes, it is recorded in the cache.

[0161] In summary, the implementation method of the cross-platform mobile terminal base provided in the embodiment of the present application can achieve the following effects:

[0162] (1) Due to the cross-platform features of the Uni-App development framework and UView-UI2, developers only need to write code once to run it on multiple platforms, greatly reducing duplication of work and maintenance costs, allowing developers to significantly improve the development efficiency of cross-platform applications.

[0163] (2) By re-encapsulating the common configurations of the uni-app development framework, such as request methods, global exception handling mechanisms, and log management functions, the robustness and security of the application can be enhanced. For example, the request method automatically carries a token and a response interceptor, ensuring the security of user data and the stable operation of the application. The global exception handling mechanism and log management function provide strong support for development and maintenance, making problem location and repair faster and more accurate.

[0164] (3) Due to the use of unified coding standards and packaging methods, developers can easily understand and maintain the code, which also makes it easier for new members to quickly get started, greatly simplifying the secondary development process. This consistent and standardized development model facilitates team collaboration and knowledge sharing.

[0165] (4) By adopting UView-UI2, unified user interface components and interaction design are ensured, so that users can get a consistent operating experience on different platforms and devices, which not only improves user satisfaction, but also enhances the consistency of brand image.

[0166] (5) By using npm package management, flexibility and scalability are guaranteed, allowing it to adapt to changing business needs and technological developments. Developers can easily add new features and components as needed without rewriting existing code. This forward-looking design concept ensures that the application can maintain its competitiveness and market adaptability in the long term.

[0167] In summary, the implementation method of the cross-platform mobile terminal base provided in the embodiment of the present application, through the secondary encapsulation of the uni-app development framework, combined with uview-ui and vue2 for development, realizes the combination of multiple business functions in different projects, and ensures the unification of styles and interactive styles, greatly improving the development efficiency and user experience. At the same time, it provides great development convenience for secondary developers, simplifies the development process, and improves the efficiency of secondary development. In addition, the npm package characteristics of node technology are also used to realize the unified version management of npm packages. That is, the cross-platform mobile terminal base in the embodiment of the present application realizes the function implementation and compatibility of different platforms.

[0168] Figure 2 FIG. 1 is a block diagram showing a system for implementing a cross-platform mobile terminal base according to an embodiment of the present application. Figure 2 As shown, the system may include:

[0169] A first creation unit 210 is used to create a uni-app project using vue-cli;

[0170] The encapsulation and compilation unit 220 is used to encapsulate and compile the function page and the common configuration provided by the uni-app development framework into an npm package in the uni-app project, and generate a package.json file of the npm package. The function page includes a basic function page and a business function page. The npm package includes two types: a public library and a page module.

[0171] The script processing unit 230 is used to add a new script to the script script of the package.json file and modify the startup script, wherein the new script uses the yarn package management tool to install the root directory and src directory dependencies in sequence, and the modified startup script sets the vue environment by adding the parameter VUE_APP_ENV=development;

[0172] The second creation unit 240 is used to create a src / config / index.js file, use the src / config / index.js file as the application configuration of the uni-app project, and set the cross-platform configuration information according to the vue environment; create a src / const directory, use the src / const directory as the application constant directory of the uni-app project, and define the constant value of the route jump page in the application constant directory; create a src / views file and a src / pages file, wherein the src / views file is used to store technical pages unrelated to the business, and the src / pages file is used to store functional pages related to the business;

[0173] A submission unit 250 is used to submit the uni-app project as a default template of the mobile terminal base to the git repository;

[0174] A new unit 260 is created, which is used to call a scaffolding tool or a git repository to use a default template to create a new cross-platform mobile terminal base project, and to modify the application configuration of the default template according to specified needs to obtain a cross-platform mobile terminal base.

[0175] In one embodiment, the common library is used to provide common configurations, including common tool libraries, common storage, application constants, and Ajax request capabilities, routing jump capabilities, message prompt capabilities, pop-up window capabilities, and app automatic update capabilities;

[0176] Page modules are used to provide pages with complete functions, including functional pages.

[0177] In one implementation, the Ajax request capability is used to provide a request method, which is a method of using the cross-platform request library luch-request in uview-ui and performing secondary encapsulation; the request method is used to read the application configuration, and set the default values ​​of the request root path and the default request method, and pass in the corresponding parameter data in subsequent calls to overwrite the original default values;

[0178] The route jump capability is used to provide the route jump method of the pre-configured uni-app development framework and perform secondary encapsulation of the route jump method; introduce the route jump method in main.js and bind vue globally; when the page needs to perform route jump, call the permission judgment method, and execute the route jump method after the judgment is passed. If the judgment is not passed, it will prompt that there is no permission;

[0179] The message prompt capability is used to provide a pre-configured message prompt method;

[0180] The pop-up window capability is used to provide pre-configured warning pop-ups, confirmation pop-ups, and question pop-ups, and perform secondary encapsulation of the warning pop-ups, confirmation pop-ups, and question pop-ups according to the uni.showModal method of the uni-app development framework, and pass in corresponding data according to the parameter passing method of the uni.showModal method to call the warning pop-up window, confirmation pop-up window, and question pop-up window;

[0181] The app automatic update capability is used to provide an automatic update method. The automatic update method obtains the new version by calling the request method request interface, and encapsulates the download and installation update methods of the uni-app development framework to implement automatic app updates.

[0182] In one implementation, the common configuration also includes a store state management capability, which is used to provide a log management function and a global exception handling mechanism;

[0183] The log management function is used to support access logs. It also supports multiple clicks or long presses on a specified location, and input of a specific text value to jump to view the log.

[0184] The global exception handling mechanism is used in App.vue to use the onError lifecycle provided by the uni-app development framework to obtain application exceptions and use the log management function to record errors.

[0185] In one implementation, the second creating unit 240 is further configured to:

[0186] Create the src / main.js entry file;

[0187] Import the packaged public library into the src / main.js entry file and globally bind the packaged public library to the vue instance to provide page function calls in the uni-app project.

[0188] In one implementation, the second creating unit 240 is further configured to:

[0189] Create the first vue file in the page directory of the uni-app project;

[0190] Introduce the page module in the first vue file, register the components of the page module, and configure the registration route in src / pages.json of the uni-app project to access the page module.

[0191] In one embodiment, when the new creation unit 260 is used to call a scaffolding tool or a git repository to use a default template to create a cross-platform mobile terminal base project, modify the application configuration of the default template according to specified needs, and obtain a cross-platform mobile terminal base, it is specifically used to:

[0192] Call the git repository to create a new cross-platform mobile terminal base project based on the default template, modify the application configuration of the default template according to project needs, and obtain the cross-platform mobile terminal base; or,

[0193] Create a scaffolding tool, call the scaffolding tool to pull the default template from the git repository, create a cross-platform mobile terminal base project based on the default template, and use the options provided by the scaffolding tool to interactively modify the application configuration of the default template to obtain a cross-platform mobile terminal base.

[0194] In one embodiment, the implementation system of the cross-platform mobile terminal base further includes a development unit 270, and the development unit 270 is used to develop a new business function on the cross-platform mobile terminal base in the following manner:

[0195] Create function directories related to new business functions in the src / pages file;

[0196] Create at least one second vue file in the function directory according to business needs;

[0197] In at least one second vue file, use the alias path to access the configurations in the src / config / index.js file and the constant values ​​in the src / const directory;

[0198] If you need to create a utils tool library method related to a new business function, create a js file for the utils tool library method in the function directory;

[0199] When accessing the utils tool library method, an alias path is used in at least one second vue file to access a tool library with a specified name related to a new business function, and the specified name depends on the file naming of the secondary developer.

[0200] In one implementation, the development unit 270 is further configured to perform secondary development functions on the cross-platform mobile terminal base in the following manner:

[0201] Import the npm package module into the page module;

[0202] Use the hooks and slots provided by the page module to modify and customize functions;

[0203] Set the function directory as the target npm package, initialize the configuration file of the package.json file based on the target npm package, and add dependencies to the configuration file;

[0204] Configure the sie-app property of the target npm package, and then publish the target npm package to the npm library or submit it to the git repository.

[0205] The functions of each unit in the implementation system of the cross-platform mobile terminal base in the embodiment of the present application can be found in the corresponding description in the above method, and will not be repeated here.

[0206] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function according to the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium.

[0207] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine different embodiments or examples described in this specification and the features of different embodiments or examples, unless they are contradictory.

[0208] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of this application, the meaning of "plurality" is two or more, unless otherwise clearly and specifically defined.

[0209] Any process or method description in the flow chart or otherwise described herein can be understood to represent a module, fragment or portion of a code including one or more executable instructions for implementing the steps of a specific logical function or process. And the scope of the preferred embodiment of the present application includes other implementations, in which the functions may not be performed in the order shown or discussed, including in a substantially simultaneous manner or in a reverse order according to the functions involved.

[0210] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, which can be embodied in any computer-readable medium for use by an instruction execution system, apparatus or device (such as a computer-based system, a system including a processor or other system that can fetch instructions from an instruction execution system, apparatus or device and execute instructions), or used in combination with these instruction execution systems, apparatuses or devices.

[0211] It should be understood that the various parts of the present application can be implemented with hardware, software, firmware or a combination thereof. In the above embodiments, multiple steps or methods can be implemented with software or firmware stored in a memory and executed by a suitable instruction execution system. All or part of the steps of the above embodiment method can be completed by instructing the relevant hardware through a program, which can be stored in a computer-readable storage medium, and when the program is executed, it includes one of the steps of the method embodiment or a combination thereof.

[0212] In addition, each functional unit in each embodiment of the present application can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into one module. The above-mentioned integrated module can be implemented in the form of hardware or in the form of a software functional module. If the above-mentioned integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. The storage medium can be a read-only memory, a disk or an optical disk, etc.

[0213] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of various changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A method for implementing a cross-platform mobile terminal base, characterized in that: include: Use vue-cli to create a uni-app project; In the uni-app project, the function page and the common configuration provided by the uni-app development framework are packaged and compiled into an npm package to generate a package.json file of the npm package. The function page includes a basic function page and a business function page. The npm package includes two types: a public library and a page module. In the script script of the package.json file, add a new script and modify the startup script, wherein the new script uses the yarn package management tool to install the root directory and src directory dependencies in sequence, and the modified startup script sets the vue environment by adding the parameter VUE_APP_ENV=development; Create a src / config / index.js file, use the src / config / index.js file as the application configuration of the uni-app project, and set cross-platform configuration information according to the vue environment; Create a src / const directory, use the src / const directory as the application constant directory of the uni-app project, and define constant values ​​of the route jump page in the application constant directory; Create a src / views file and a src / pages file, wherein the src / views file is used to store technical pages not related to the business, and the src / pages file is used to store functional pages related to the business; Submit the uni-app project as the default template for the mobile terminal base to the git repository; Call the scaffolding tool or the git repository to use the default template to create a new cross-platform mobile terminal base project, modify the application configuration of the default template according to specified needs, and obtain the cross-platform mobile terminal base.

2. The method according to claim 1, characterized in that The common library is used to provide the common configuration, which includes a common tool library, common storage, application constants, and Ajax request capability, routing jump capability, message prompt capability, pop-up window capability, and app automatic update capability; The page module is used to provide pages with complete functions, including the functional pages.

3. The method according to claim 2, characterized in that The Ajax request capability is used to provide a request method, which is a method of using the cross-platform request library luch-request in uview-ui and performing secondary encapsulation; the request method is used to read the application configuration, and set the default values ​​of the request root path and the default request method, and pass in the corresponding parameter data in subsequent calls to overwrite the original default values; The routing jump capability is used to provide a routing jump method for the pre-configured uni-app development framework and perform secondary encapsulation on the routing jump method; introduce the routing jump method in main.js and bind vue globally; When a page needs to be routed, the permission judgment method is called. If the judgment is passed, the route jump method is executed. If the judgment is not passed, it will prompt that there is no permission. The message prompt capability is used to provide a pre-configured message prompt method; The pop-up window capability is used to provide pre-configured warning pop-up windows, confirmation pop-up windows, and question pop-up windows, and perform secondary packaging on the warning pop-up windows, confirmation pop-up windows, and question pop-up windows according to the uni.showModal method of the uni-app development framework, and pass in corresponding data according to the parameter passing method of the uni.showModal method to call the warning pop-up windows, confirmation pop-up windows, and question pop-up windows; The app automatic update capability is used to provide an automatic update method, which obtains the new version by calling the request method request interface and encapsulates the download and installation update methods of the uni-app development framework to realize the automatic update of the app.

4. The method according to claim 2, characterized in that: The common configuration also includes a store state management capability, which is used to provide a log management function and a global exception handling mechanism; The log management function is used to support access to logs, and also supports multiple clicks or long presses on a specified location, and input of a specific text value to jump to view the log; The global exception handling mechanism is used to obtain application exceptions using the onError lifecycle provided by the uni-app development framework in App.vue, and use the log management function to record errors.

5. The method according to claim 2, characterized in that: The method further comprises: Create the src / main.js entry file; The packaged public library is introduced into the src / main.js entry file, and the packaged public library is globally bound to the vue instance to provide page function calls in the uni-app project.

6. The method according to claim 2, characterized in that The method further comprises: Create the first vue file in the page directory of the uni-app project; The page module is introduced into the first vue file, the components of the page module are registered, and the registration route is configured in the src / pages.json of the uni-app project to implement access to the page module.

7. The method according to claim 1, characterized in that Calling the scaffolding tool or the git repository to create a new cross-platform mobile terminal base project using the default template, modifying the application configuration of the default template according to the specified needs, and obtaining the cross-platform mobile terminal base includes: Call the git repository to create the cross-platform mobile terminal base project based on the default template, modify the application configuration of the default template according to project requirements, and obtain the cross-platform mobile terminal base; or, Create the scaffolding tool, call the scaffolding tool to pull the default template from the git repository, create the cross-platform mobile terminal base project based on the default template, and interactively modify the application configuration of the default template through the options provided by the scaffolding tool to obtain the cross-platform mobile terminal base.

8. The method according to any one of claims 1 to 7, characterized in that New business functions are developed on the cross-platform mobile terminal base in the following manner: Create a function directory related to the new business function in the src / pages file; Create at least one second vue file in the function directory according to business needs; In at least one of the second vue files, use an alias path to access various configurations in the src / config / index.js file and constant values ​​in the src / const directory; If it is necessary to create a utils tool library method related to the new business function, create a js file of the utils tool library method in the function directory; When accessing the utils tool library method, an alias path is used in at least one of the second vue files to access a tool library with a specified name related to the new business function, and the specified name depends on the file naming of the secondary developer.

9. The method according to claim 7, characterized in that: The following method is used to perform secondary development functions on the cross-platform mobile terminal base: Introduce the npm package module into the page module; Use the hooks and slots provided by the page module to modify and customize functions; Take the function directory as the target npm package, initialize the configuration file of the package.json file based on the target npm package, and add dependencies to the configuration file; Configure the sie-app property of the target npm package, and then publish the target npm package to the npm library or submit it to the git repository.

10. A cross-platform mobile terminal base implementation system, characterized in that: include: The first creation unit is used to create a uni-app project using vue-cli; The encapsulation and compilation unit is used to encapsulate and compile the function page and the common configuration provided by the uni-app development framework into an npm package in the uni-app project, and generate a package.json file of the npm package. The function page includes a basic function page and a business function page. The npm package includes two types: a public library and a page module. A script processing unit, used to add a new script to the script script of the package.json file, and to modify the startup script, wherein the new script uses the yarn package management tool to install the root directory and src directory dependencies in sequence, and the modified startup script sets the vue environment by adding the parameter VUE_APP_ENV=development; The second creation unit is used to create a src / config / index.js file, use the src / config / index.js file as the application configuration of the uni-app project, and set cross-platform configuration information according to the vue environment; create a src / const directory, use the src / const directory as the application constant directory of the uni-app project, and define constant values ​​of route jump pages in the application constant directory; create a src / views file and a src / pages file, wherein the src / views file is used to store technical pages unrelated to the business, and the src / pages file is used to store functional pages related to the business; A submission unit, used to submit the uni-app project as a default template of the mobile terminal base to a git repository; A new unit is used to call the scaffolding tool or the git repository to use the default template to create a new cross-platform mobile terminal base project, modify the application configuration of the default template according to specified needs, and obtain a cross-platform mobile terminal base.

Images