Implementation method and system of cross-platform mobile terminal base

Abstract

The application provides an implementation method and system of a cross-platform mobile terminal base, the method comprising: creating a uni-app project by using vue-cli; in the uni-app project, encapsulating and compiling a common configuration provided by a uni-app development framework into an npm package to generate a package.json file of the npm package; adding a new script in a script script of the package.json file and modifying a start script; creating a src / config / index.js file and a src / const directory corresponding to an application configuration and an application constant directory of the uni-app project, setting cross-platform configuration information according to a vue environment, and defining a constant value of a route jump page in the application constant directory; creating src / views and src / pages files; when a cross-platform mobile terminal base project is newly created, the application configuration of the uni-app project is used and modified according to a specified requirement, and the cross-platform mobile terminal base is obtained. The application realizes function implementation and compatibility of different platforms.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a cross-platform mobile terminal base implementation method and system. BACKGROUND

[0002] At present, developers often develop multiple cross-platform projects when working on different projects. Therefore, when the common functions need to be upgraded, multiple cross-platform projects also need to be upgraded and maintained respectively, resulting in differences or even fragmentation of some functions, which may affect user experience, cause system errors, and affect data security, thereby causing great obstacles to project maintenance and secondary development, and being not conducive to normal iteration and upgrade of software. SUMMARY

[0003] The embodiment of the present application provides a cross-platform mobile terminal base implementation method and system to solve the problems in the related art, and the technical scheme is as follows:

[0004] In a first aspect, the embodiment of the present application provides a cross-platform mobile terminal base implementation method, comprising:

[0005] Creating a uni-app project using vue-cli;

[0006] In the uni-app project, encapsulating and compiling common configuration provided by a function page and a uni-app development framework into an npm package to generate a package.json file of the npm package, the function page including a basic function page and a business function page, and the npm package including two kinds of public libraries and page modules;

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

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

[0009] Creating a src / const directory, taking the src / const directory as an application constant directory of the uni-app project, and defining constant values of route jump pages 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 business-unrelated technical pages, and the src / pages file is used to store business-related functional pages;

[0011] Commit the uni-app project as a default template of a mobile terminal pedestal to a git repository;

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

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

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

[0015] In an embodiment, the Ajax request capability is used to provide a request method, and the request method is a method of using a cross-platform request library luch-request in uview-ui and performing secondary encapsulation; the request method is used to read application configuration, and set a request root path and a default request method as default values; in subsequent calls, corresponding parameter data is transmitted to cover the original default values.

[0016] The route jump capability is used to provide a pre-configured route jump method of the uni-app development framework, and the route jump method is secondary encapsulated; the route jump method is introduced in main.js, and is bound to a vue global; when a page needs to perform route jump, a permission judgment method is called, and after the permission is passed, the route jump method is executed; if the permission is not passed, no permission is prompted.

[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 a pre-configured warning pop-up window, a confirmation pop-up window, and a question pop-up window; the warning pop-up window, the confirmation pop-up window, and the question pop-up window are secondary encapsulated according to a uni.showModal method of the uni-app development framework, and corresponding data is transmitted according to a parameter transmission mode of the uni.showModal method to call the warning pop-up window, the confirmation pop-up window, and the question pop-up window.

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

[0020] In an embodiment, the common configuration further includes a store state management capability, which is used to provide a log management function and a global exception processing mechanism.

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

[0022] The global exception processing mechanism is used to acquire in-app exception conditions by using an onError life cycle provided by the uni-app development framework in App.vue, and record errors by using the log management function.

[0023] In an embodiment, the method further includes:

[0024] Creating a src / main.js entry file;

[0025] Importing the encapsulated public library in the src / main.js entry file, and globally binding the encapsulated public library on a vue instance to provide page function calls in the uni-app project.

[0026] In an embodiment, the method further includes:

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

[0028] Importing the page module in the first vue file, registering components of the page module, and configuring a registered route in src / pages.json of the uni-app project to realize access to the page module.

[0029] In an embodiment, a scaffold tool or the git repository uses the default template to newly create a cross-platform mobile terminal base project, modifies application configurations of the default template according to specified needs, and obtains the cross-platform mobile terminal base, which includes:

[0030] The git repository newly creates the cross-platform mobile terminal base project based on the default template, modifies application configurations of the default template according to project needs, and obtains the cross-platform mobile terminal base; or,

[0031] The scaffold tool is created, the scaffold tool is called to pull the default template from a git repository, the cross-platform mobile terminal base project is newly created based on the default template, the application configuration of the default template is interactively modified through the options provided by the scaffold tool, and the cross-platform mobile terminal base is obtained.

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

[0033] A function directory related to the new business function is created in the src / pages file.

[0034] At least one second vue file is created in the function directory according to business needs.

[0035] In at least one second vue file, each configuration in the src / config / index.js file and the constant value in the src / const directory are accessed by using an alias path.

[0036] If a utils tool library method related to the new business function needs to be created, a js file of the utils tool library method is created in the function directory.

[0037] When the utils tool library method is accessed, a tool library with a specified name related to the new business function is accessed in at least one second vue file by using an alias path, and the specified name depends on the file naming of a secondary development personnel.

[0038] In an embodiment, secondary development functions are performed on the cross-platform mobile terminal base in the following manner:

[0039] An npm package module is introduced in the page module.

[0040] The hook and slot provided by the page module are used to modify and customize functions.

[0041] The function directory is taken as a target npm package, a configuration file of the package.json file is initialized based on the target npm package, and a dependency is added to the configuration file.

[0042] The sie-app attribute of the target npm package is configured, and the target npm package is published to an npm library or submitted to the git repository.

[0043] In a second aspect, the embodiments of the present application further provide an implementation system of a cross-platform mobile terminal base, comprising:

[0044] A first creation unit is configured to create a uni-app project by using vue-cli.

[0045] The encapsulation and compilation unit is used in the uni-app project to encapsulate and compile the functional pages and commonly used configurations provided by the uni-app development framework into an npm package, and generate the package.json file of the npm package. The functional pages include basic functional pages and business functional pages, and the npm package contains two types of components: public libraries and page modules.

[0046] The script processing unit is used to add new scripts and modify the startup script in the script section of the package.json file. The new script uses the yarn package management tool to install the dependencies in the root directory and src directory in sequence. 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 the src / config / index.js file, which serves as the application configuration for the uni-app project, and sets cross-platform configuration information according to the Vue environment; create the src / const directory, which serves as the application constant directory for the uni-app project, and defines constant values ​​for route navigation pages in the application constant directory; and create the src / views and src / pages files, wherein the src / views file is used to store technical pages unrelated to business logic, and the src / pages file is used to store functional pages related to business logic.

[0048] The commit unit is used to commit the uni-app project as the default template for the mobile platform to the git repository;

[0049] Create a new unit to call the scaffolding tool or the 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 to obtain the cross-platform mobile terminal base.

[0050] In one implementation, the public library is used to provide the commonly used configurations, which include a public tool library, public storage, application constants, and Ajax request capabilities, route redirection capabilities, message prompt capabilities, pop-up capabilities, and app automatic update capabilities.

[0051] The page module is used to provide a fully functional page, including the functional page.

[0052] In an implementation, the Ajax request capability is configured to provide a request method, which is a method using a cross-platform request library luch-request in uview-ui and being encapsulated twice; the request method is configured to read application configuration, and set a request root path and a default request method with a default value, and subsequent calling is configured to pass in corresponding parameter data to overwrite the original default value.

[0053] The route jump capability is configured to provide a pre-configured route jump method of uni-app development framework, and encapsulate the route jump method twice; the route jump method is introduced in main.js, and is bound to vue globally; when a page needs to jump, a permission judgment method is called, and if the permission is passed, the route jump method is executed, and if the permission is not passed, a prompt of no permission is given.

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

[0055] The popup capability is configured to provide a pre-configured warning popup, a confirmation popup, and a question popup, and encapsulate the warning popup, the confirmation popup, and the question popup according to a uni.showModal method of uni-app development framework, and pass in corresponding data according to a parameter passing mode of the uni.showModal method to call the warning popup, the confirmation popup, and the question popup.

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

[0057] In an implementation, the common configuration further includes a store state management capability, which is configured to provide a log management function and a global exception handling mechanism.

[0058] The log management function is configured to support access to logs, and supports jumping to view logs by multiple clicks or long pressing a specified position or inputting a specific text value.

[0059] The global exception handling mechanism is configured to acquire application internal exceptions by using an onError life cycle provided by uni-app development framework in App.vue, and record errors by using the log management function.

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

[0061] create a src / main.js entry file;

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

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

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

[0065] Import the page module in the first vue file, register components of the page module, and configure registered routes in src / pages.json of the uni-app project to realize access of the page module.

[0066] In an implementation, when the new unit is used to create a cross-platform mobile terminal base project using the default template by invoking a scaffolding tool or the git repository, and the application configuration of the default template is modified as specified, the cross-platform mobile terminal base is obtained, and the new unit is specifically configured to:

[0067] Invoke 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 as required, and obtain the cross-platform mobile terminal base; or

[0068] Create the scaffolding tool, invoke 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 modify the application configuration of the default template through option interaction provided by the scaffolding tool to obtain the cross-platform mobile terminal base.

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

[0070] Create a function directory related to the brand-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] Use an alias path to access each item of configuration in the src / config / index.js file and constant values in the src / const directory in at least one second vue file;

[0073] If a utils library method related to the new business function needs to be created, a js file of the utils library method is created in the function directory;

[0074] When accessing the utils library method, a specified name library related to the new business function is accessed in at least one second vue file by using an alias path, and the specified name depends on the file naming of the secondary development personnel.

[0075] In an embodiment, the development unit is also used to develop secondary functions on the cross-platform mobile terminal base in the following way:

[0076] The page module introduces an npm package module;

[0077] The hook and slot provided by the page module are used to modify and customize the function;

[0078] The function directory is taken as a target npm package, a configuration file of the package.json file is initialized based on the target npm package, and a dependency is added to the configuration file;

[0079] The sie-app attribute of the target npm package is configured, and the target npm package is published to an npm library or submitted to the git repository.

[0080] The above technical solutions have at least the following advantages or beneficial effects:

[0081] (1) Due to the cross-platform characteristics of the uni-app development framework and uview-ui2, developers only need to write code once, which can run on multiple platforms, greatly reducing the repetitive work and maintenance cost, and enabling developers to significantly improve the development efficiency of cross-platform applications.

[0082] (2) By secondary packaging 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 the token and 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 positioning and repair more rapid and accurate.

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

[0084] (4) By adopting uview-ui2, it ensures unified user interface components and interaction design, so that users can have consistent operation 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, it ensures flexibility and scalability, so that it can adapt to changing business needs and technological development. Developers can easily add new functions and components as needed without rewriting existing code. This forward-looking design concept ensures that the application can remain competitive and marketable for a long time.

[0086] In summary, the cross-platform mobile end base implementation method provided by the embodiment of the application realizes the combination of multiple business functions in different projects and ensures the uniformity of styles and interaction styles by secondary packaging of the uni-app development framework, development with uview-ui and vue2, greatly improves the development efficiency and user experience, and provides great development convenience for secondary developers, simplifies the development process, and improves the secondary development efficiency. In addition, the npm package version uniform management is realized by using the npm package characteristics of node technology. That is, the cross-platform mobile end base in the embodiment of the application realizes the function implementation and compatibility of different platforms.

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

[0088] In the drawings, like reference numerals refer to same or similar components throughout the several views. These drawings are not necessarily to scale. It should be understood that these drawings only depict some embodiments in accordance with the present disclosure and should not be considered to be limiting of the scope of the disclosure.

[0089] Figure 1 A flowchart of an implementation method of a cross-platform mobile end base provided by an embodiment of the application is shown in the figure;

[0090] Figure 2 A structure block diagram of an implementation system of a cross-platform mobile end base provided by an embodiment of the application is shown in the figure. DETAILED DESCRIPTION

[0091] In the following, only certain exemplary embodiments are simply described. As those skilled in the art can recognize, the described embodiments can be modified in various different ways without departing from the spirit or scope of the present application. Therefore, the drawings and the description are considered to be exemplary in nature rather than limiting.

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

[0093] Uni-app is a framework for developing front-end applications using Vue.js, supporting compilation to iOS, Android, H5, HarmonyOS and various mini programs and other platforms.

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

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

[0096] Yarn is a new JS package management tool designed to address some of the shortcomings of npm, such as slow installation speed, inconsistent versions, security vulnerabilities, etc.

[0097] H5 refers to HTML5, H5 refers to a mobile device that can play Flash effects on a smart phone, a web page with animation and interactive functions displayed on a mobile device, i.e. a mobile web page. Such a web page can be used for advertising and marketing, and can bring users a 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 individual blocks or entire interfaces that can be seen on the interface, such as color buttons, input boxes, tables, and other user interaction operations, are composed of single or multiple UI components.

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

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

[0101] Figure 1A flow chart of an implementation method of a cross-platform mobile terminal base according to an embodiment of the present application is shown. As shown in Figure 1 The method can include the following steps:

[0102] S110, creating a uni-app project using vue-cli.

[0103] As an example, the uni-app project can be created using the official preset template dcloudio / uni-preset-vue provided by the uni-app development framework using vue-cli, or the uni-app project can be created using the plug-in mechanism of vue-cli, and the present embodiments do not limit this.

[0104] S120, in the uni-app project, encapsulating and compiling a function page and common configurations provided by the uni-app development framework into an npm package, and generating a package.json file of the npm package.

[0105] In an implementation, the common configurations can include but are not limited to: public tool library, public store, application constant, 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 application configurations, and set the request root path and the default request method as default values. In subsequent calls, corresponding parameter data is transmitted to cover the original default values.

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

[0108] As an example, the request method can include a request interceptor and a response interceptor. The request interceptor intercepts data before the request is sent, and determines whether it is a platform a or a platform b according to the request type value configured by the application. If the current platform a is configured as a restful style and the platform b is configured as a custom style in the application configuration, the data structure is reorganized using the request processing method of the platform b. The response interceptor first determines whether the HTTP status code is successful, and then determines whether the return data service is successful according to the request type configured by the application. If the request type is platform a, it is determined whether the code value of the return data is correct, or if the request type is platform b, it is determined whether the response is correct according to the input response interceptor function. If it is incorrect, the following message prompt method is called to prompt the error. If the status code is not successful, conditional access and or are used to capture error information. According to the configuration customization parameter custom input when the request method is called, it is controlled whether to prompt the error information. 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 uni-app development framework route jump method, and the route jump method is encapsulated twice. For example, the route jump method can be encapsulated twice according to the method in the "page and route" of the uni-app development framework. The route jump method is introduced in main.js and bound to the global vue. In this way, the page development can conveniently call the route jump method. When the page needs to jump to the route, the permission judgment method is called. If it is passed, the route jump method is executed. If it is not passed, it is prompted that there is no permission.

[0110] As an example, the route jump method can 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. The message prompt method can include but is not limited to: a default method $toast, a pre-configured success prompt method $success and a failure prompt method $error. As an example, the pre-configured success prompt method $success can have a success icon. The failure prompt method $error can have a failure icon.

[0112] In specific implementation, 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 the uni.showModal method of the uni-app development framework is used for secondary encapsulation of the warning pop-up window, the confirmation pop-up window and the question pop-up window, and the corresponding data is transmitted according to the parameter transmission mode of the uni.showModal method to call the warning pop-up window, the confirmation pop-up window and the question pop-up window. The corresponding data can be set according to actual needs, and the embodiments of the present application do not limit this.

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

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

[0115] As an example, the app automatic update capability can call the request method to request the system information obtaining method of the uni-app development framework, obtain version information through the system information obtaining method, and compare the version information with the server version. When a new version is detected, a pop-up window is prompted to the user to update. After the user selects to update, the download and installation update package methods of the uni-app development framework are called, and the app is automatically opened after the update package is installed, thereby realizing the automatic update of the app.

[0116] In actual application, the common configuration can be added with more functions according to iterative upgrading in the future. After secondary encapsulation of the functions in the common configuration, the common configuration is configured by default, and the developer only needs to focus on the code for calling, thereby reducing the attention to each configuration.

[0117] For example, the store state management capability can be added to the common configuration, that is, the common configuration also includes the store state management capability. The store state management capability can be used to provide a log management function and a global exception handling mechanism.

[0118] In specific implementation, the log management function is used to support access to logs, such as supporting viewing (such as up and down page viewing) of log records on a log management page, and supporting jumping to view logs by multiple clicks or long pressing a specified position or inputting a specific text value. That is, in addition to supporting normal access, the log management function also supports jumping to view logs by multiple clicks or long pressing a certain special position (a specified position) or inputting a certain specific text value. The specified position and the specific text value can be set according to actual needs, and the embodiments of the present application do not limit this.

[0119] For example, the log management function can also provide a common logging method. By calling the logging method and passing in the text, a log can be written in the cache with a date and time.

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

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

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

[0123] In an embodiment, the npm package can include two types of public libraries and page modules. The public library can be used to provide common configurations. The page module can be used to provide complete function pages, including function pages. The function pages have been initialized, encapsulated, and published by the npm package, and can be used by mobile end bases of different projects.

[0124] In an embodiment, a src / main.js entry file can be created. The encapsulated public library is imported in the src / main.js entry file, and the encapsulated public library is globally bound to the vue instance to provide page function calls in the uni-app project.

[0125] In an embodiment, a first vue file can be created in the page directory of the uni-app project. The page module is imported in the first vue file, the components of the page module are registered, and the registered routes are configured in src / pages.json of the uni-app project to achieve access to the page module.

[0126] In the embodiment of the present application, by performing step S120, when compiling and packaging the project, the characteristics of the uni-app development framework supporting compilation of multiple platforms are utilized to realize the packaging and compiling functions of multiple platforms, and the commonly used methods of the uni-app development framework for secondary packaging in the cross-platform mobile terminal base can be used globally, such as request methods, message prompt methods, popup methods, route jump methods, app automatic update methods, etc. When the code development is performed by the second developers of different platforms, only these commonly used methods of secondary packaging need to be called, so that the unified functions, styles and interactions under different platforms can be realized. This is because the commonly used methods of secondary packaging can obtain some 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 uniform as possible. The configuration parameters under different platforms may be different, but the cross-platform mobile terminal base can integrate all the configurations as much as possible, so that the development time of the general methods can be reduced during development. At the same time, the base function page, the business function page and other commonly used configurations in the cross-platform mobile terminal base can also be configured.

[0127] S130, in the script script of the package.json file, a new script is added, and a start script is modified.

[0128] In specific implementation, the new script uses the yarn package management tool to sequentially install the root directory and the src directory dependency, and the modified start script (dev) sets the vue environment by increasing the parameter VUE_APP_ENV=development.

[0129] S140, create src / config / index.js file, take 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.

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

[0131] S150, create src / const directory, take 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.

[0132] For example, the constant value of the base function page such as the login page and the home page can be defined in the application constant directory.

[0133] S160, create src / views file and src / pages file, wherein the src / views file is used to store technical pages irrelevant to business, and the src / pages file is used to store functional pages related to business.

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

[0135] S170, submit the uni-app project as the default template of the mobile terminal base to the git repository.

[0136] In specific implementation, by submitting the uni-app project as the default template of the mobile terminal base to the git repository, it can be 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 the scaffolding tool or the git repository to create a cross-platform mobile terminal base project based on the default template, modify the application configuration of the default template as needed, and obtain a cross-platform mobile terminal base.

[0138] In an embodiment, the git repository can be called to create a cross-platform mobile terminal base project based on the default template, and the application configuration of the default template can be modified according to the project needs, so as to obtain a cross-platform mobile terminal base.

[0139] In another embodiment, a scaffolding tool can be created, and the scaffolding tool can be called to pull the default template from the git repository, create a cross-platform mobile terminal base project based on the default template, and modify the application configuration of the default template through the options provided by the scaffolding tool, so as to obtain a cross-platform mobile terminal base.

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

[0141] In the application configuration, modify the request root path, configure the request type according to the platform where the project is located, and modify whether to enable the tenant. According to the platform a or platform b, the path of the login page and the home page and other basic function pages in the application constant and the menu structure of the home page menu can be modified, and the page, interface whitelist and other configurations can be added in the application constant.

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

[0143] In the embodiments of the present application, by performing the above steps S110-S180, the original uni-app and vue2 development capabilities can be used to integrate and package the common functions of the uni-app development framework on the cross-platform mobile terminal base, so that different projects can be developed according to the specifications of uview-ui and vue2, thereby combining multiple business functions in different projects and ensuring the uniformity of styles and interaction styles, greatly improving the development efficiency and user experience, and providing great development convenience for secondary developers, simplifying the development process, improving the secondary development efficiency, and ensuring the maintainability and scalability of the code. In addition, the npm package version uniform management is realized by using the npm package characteristics of the node technology.

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

[0145] In one implementation, the following method can be used to develop new business functions on the cross-platform mobile terminal base:

[0146] A function directory related to the new business function is created in the src / pages file, for example, the function directory can be created in the src / pages file according to the uni-app development specification; at least one second vue file is created in the function directory according to the business needs; each configuration in the src / config / index.js file and the constant value in the src / const directory are accessed by using an alias path in the at least one second vue file. For example, each configuration in the src / config / index.js file can be accessed by using @ / config in the at least one second vue file, and the constant value in the src / const directory can be accessed by using @ / const / xxx.

[0147] In specific implementation, if a utils tool library method related to the new business function needs to be created during the development of the new business function on the cross-platform mobile terminal base, a js file of the utils tool library method can be created in the function directory; when accessing the utils tool library method, a tool library with a specified name related to the new business function can be accessed by using an alias path in the at least one second vue file, and the specified name depends on the file naming of the secondary developer. For example, an xxx tool library can be accessed by using @ / utils / xxx in the at least one second vue file, where xxx represents the specified name and depends on the file naming of the secondary developer.

[0148] In an embodiment, the secondary development function can be implemented on the cross-platform mobile terminal base in the following manner:

[0149] The page module introduces the npm package module; the function is modified and customized by using the hooks and slots provided by the page module; the above function directory is taken as a target npm package, the configuration file of the package.json file is initialized based on the target npm package, and the dependencies are added to the configuration file; the sie-app attribute of the target npm package is configured, and then the target npm package is published to the npm library or submitted to the git repository. The version management function of the target npm package can be realized by using the configuration of the npm package version.

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

[0151] The npm command is executed to install the yarn package management tool, the package.json script command is executed to install the dependencies of the root directory and the src directory. After installation, the project is started, and the web mobile terminal project can be accessed 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, token login credential verification is performed, if there is no token in the cache, the login page is jumped; if there is a token, the home page is jumped.

[0155] That is, in step 1, the first access jumps to the login page, enters the account and password, clicks login, and jumps to the home page after successful login. In this step, since the corresponding platform's basic page is modified, after login, the customized home page of the corresponding platform is jumped.

[0156] In step 1, the above request method can be called when logging in, and the corresponding token field value and user information are received after successful request and stored in the store state management for global application. After login, the page is jumped, and whether the pre-jump page before jumping to the home page is configured in the application constant is selected to select the login environment, so as to correspond to the platform. For example, if the platform configures the pre-jump page of the selected login environment, the home page is jumped after selecting the login environment, or the platform does not configure the pre-jump page, and the home page is directly jumped. The login page, pre-jump page and home page can be modified through the application constant, and the cross-platform mobile terminal base jumps according to the application constant configuration value. The menu group and menu function entry defined in the application constant are displayed in the home page, and clicking enters the corresponding function.

[0157] Step 2, app update detection.

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

[0159] Step 3, network state listening.

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

[0161] In summary, the implementation method of the cross-platform mobile end base provided by the embodiments of the application can achieve the following effects:

[0162] (1) Due to the cross-platform characteristics of the uni-app development framework and uview-ui2, developers only need to write code once, which can run on multiple platforms, greatly reducing the repetitive labor and maintenance cost, and enabling developers to significantly improve the development efficiency of cross-platform applications.

[0163] (2) By re-packaging 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 the token and response interceptor, ensuring the security of user data and the stable operation of the application. Global exception handling mechanisms and log management functions provide strong support for development and maintenance, making problem positioning and repair more rapid and accurate.

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

[0165] (4) By using uview-ui2, it ensures unified user interface components and interaction design, so that users can have a consistent operation experience on different platforms and devices, which not only improves user satisfaction, but also enhances the consistency of brand image.

[0166] (5) By using the npm package management method, flexibility and scalability are ensured, so that it can adapt to changing business needs and technological development. Developers can easily add new functions and components as needed without rewriting existing code. This forward-looking design concept ensures that the application can maintain competitiveness and market adaptability for a long time.

[0167] In summary, the implementation method of the cross-platform mobile terminal base provided by the embodiment of the application realizes the combination of multiple business functions in different projects and ensures the uniformity of styles and interactive styles, greatly improves the development efficiency and user experience, and provides great development convenience for secondary developers, simplifies the development process, and improves the secondary development efficiency. In addition, the version uniform management of the npm package is realized by using the npm package characteristics of the node technology. That is, the cross-platform mobile terminal base in the embodiment of the application realizes the function implementation and compatibility of different platforms.

[0168] Figure 2 A structural block diagram of an implementation system of a cross-platform mobile terminal base according to an embodiment of the application is shown. As shown in the figure, the system can include: Figure 2

[0169] A first creating unit 210 is configured to create a uni-app project by using vue-cli;

[0170] A packaging and compiling unit 220 is configured to package and compile common configurations provided by a uni-app development framework and function pages into an npm package in the uni-app project, generate a package.json file of the npm package, and the function pages include basic function pages and business function pages, and the npm package includes two kinds of public libraries and page modules;

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

[0172] A second creating unit 240 is configured to create a src / config / index.js file, use the src / config / index.js file as an application configuration of the uni-app project, set cross-platform configuration information according to the vue environment, create a src / const directory, use the src / const directory as an application constant directory of the uni-app project, define constant values of route jump pages in the application constant directory, create src / views and src / pages files, wherein the src / views file is used to store technical pages irrelevant to business, and the src / pages file is used to store function pages related to business;

[0173] ​The submitting unit 250 is configured to submit the uni-app project as a default template of the mobile terminal base to a git repository.

[0174] The new unit 260 is configured to call a scaffolding tool or a git repository to newly create a cross-platform mobile terminal base project using a default template, modify the application configuration of the default template according to a specified requirement, and obtain the cross-platform mobile terminal base.

[0175] In an embodiment, the common configuration is configured to provide a common configuration, and the common configuration includes a common tool library, a common storage, application constants, and Ajax request capability, route jump capability, message prompt capability, pop-up window capability, and app automatic update capability.

[0176] The page module is configured to provide a complete function page, including a function page.

[0177] In an embodiment, the Ajax request capability is configured to provide a request method, and the request method is a method of using a cross-platform request library luch-request in uview-ui and performing secondary encapsulation; the request method is configured to read the application configuration, and set a request root path and a default request method as a default value; in subsequent calling, corresponding parameter data is transmitted to cover the original default value.

[0178] The route jump capability is configured to provide a pre-configured route jump method of the uni-app development framework, and perform secondary encapsulation on the route jump method; the route jump method is introduced in main.js, and is bound to the global vue; when a page needs to perform route jump, a permission judgment method is called, and after the permission is passed, the route jump method is executed; if the permission is not passed, a prompt of no permission is given.

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

[0180] The pop-up window capability is configured to provide a pre-configured warning pop-up window, confirmation pop-up window, and question pop-up window; the warning pop-up window, confirmation pop-up window, and question pop-up window are encapsulated according to the uni.showModal method of the uni-app development framework; corresponding data is transmitted according to the parameter transmission mode 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 configured to provide an automatic update method; the automatic update method is configured to request an interface by calling the request method to obtain a new version, and encapsulate the calling of the download, installation, and update method of the uni-app development framework to realize the app automatic update.

[0182] In an embodiment, the common configuration further includes store state management capability, and the store state management capability is configured to provide a log management function and a global exception handling mechanism.

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

[0184] The global exception handling mechanism is used to acquire application internal exception conditions by using the onError life cycle provided by the uni-app development framework in App.vue, and record errors by using the log management function.

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

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

[0187] In the src / main.js entry file, the encapsulated public library is introduced, and the encapsulated public library is globally bound on the vue instance to provide page function calls in the uni-app project.

[0188] In an 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] In the first vue file, the page module is introduced, the components of the page module are registered, and the registered routes are configured in the src / pages.json of the uni-app project to realize access to the page module.

[0191] In an implementation, when the new unit 260 is used to create the cross-platform mobile terminal base by calling the scaffolding tool or the git repository using the default template, and modify the application configuration of the default template according to the specified needs, the cross-platform mobile terminal base is obtained, the new unit 260 is specifically configured to:

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

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

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

[0195] create a function directory related to the brand-new business function in the src / pages file;

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

[0197] accessing each configuration in the src / config / index.js file and the constant value in the src / const directory by using the alias path in the at least one second vue file;

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

[0199] when accessing the utils tool library method, accessing the tool library with a specified name related to the new business function in the at least one second vue file by using the alias path, the specified name depending on the file naming of the secondary development personnel.

[0200] In an embodiment, the development unit 270 is further configured to develop the secondary function on the cross-platform mobile terminal base in the following manner:

[0201] introducing the page module to the npm package module;

[0202] modifying and customizing the function by using the hooks and slots provided by the page module;

[0203] taking the function directory as a target npm package, initializing the configuration file of the package.json file based on the target npm package, and adding the dependency to the configuration file;

[0204] configuring the sie-app attribute of the target npm package, and publishing the target npm package to the npm library or submitting it to the git repository.

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

[0206] In the above embodiments, all or part of them can be realized by software, hardware, firmware or any combination thereof. When realized by software, all or part of them can be realized 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, all or part of the processes or functions according to the present application are generated. 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 transferred from one computer readable storage medium to another.

[0207] In the description of the application, the description of the terms "one embodiment", "some embodiments", "an example", "a specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in connection with the embodiment or example are included in at least one embodiment or example of the application. Moreover, the specific features, structures, materials or characteristics described can be combined in any appropriate manner in one or more embodiments or examples. In addition, different embodiments or examples described in the specification and characteristics of different embodiments or examples can be combined and combined by those skilled in the art without contradiction.

[0208] In addition, the terms "first", "second" are only for descriptive purposes and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined with "first", "second" can explicitly or implicitly include at least one of the features. In the description of the application, the meaning of "multiple" is two or more, unless otherwise specifically limited.

[0209] Any process or method descriptions in flow charts or described elsewhere herein can be understood as representing code modules, segments, or portions of code that include one or more executable instructions for implementing specific logic functions or other processes. And the various embodiments of the application can include additional or fewer steps or processes in comparison to those shown in the figures.

[0210] The logic and / or steps represented in flow charts or otherwise described herein, for example, can be embodied in computer-readable instructions, which can be used to cause one or more processors to perform the actions indicated in the steps. The computer-readable instructions can be stored on one or more storage media or memory devices associated with the one or more processors.

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

[0212] In addition, each of the function units in each embodiment of the present application can be integrated in one processing module, or each unit can be physically present separately, or two or more units can be integrated in one module. The integrated module can be realized in the form of hardware or in the form of a software function module. When the integrated module is realized in the form of a software function 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 magnetic 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 to this. Any person skilled in the art can easily think of various changes or replacements within the technical scope disclosed in the present application, and these should be covered within the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. An implementation method of a cross-platform mobile terminal base, characterized in that, The application relates to a method for creating a cross-platform mobile terminal base project, and belongs to the technical field of cross-platform mobile terminal development. The method comprises the following steps: a uni-app project is created by using vue-cli; in the uni-app project, a function page and a common configuration provided by a uni-app development framework are encapsulated and compiled into an npm package, a package.json file of the npm package is generated, the function page comprises a basic function page and a business function page, the common configuration comprises a public tool library, a public storage, application constants and Ajax request capability, route jump capability, message prompt capability, pop-up window capability and app automatic update capability, the npm package comprises two types of public libraries and page modules, the public libraries are used for providing the common configuration, and the page modules are used for providing complete function pages, including the function pages; in a script script of the package.json file, a new script is added, and a start script is modified, wherein the new script uses a yarn package management tool to sequentially install root directory and src directory dependencies, and the modified start script sets a vue environment by adding a parameter VUE_APP_ENV=development; an src / config / index.js file is created, the src / config / index.js file is used as application configuration of the uni-app project, and cross-platform configuration information is set according to the vue environment; an src / const directory is created, the src / const directory is used as an application constant directory of the uni-app project, and constant values of route jump pages are defined in the application constant directory; src / views and src / pages files are created, wherein the src / views file is used for storing technical pages irrelevant to business, and the src / pages file is used for storing function pages related to business; the uni-app project is submitted to a git warehouse as a default template of a mobile terminal base; 2. The method of claim 1, wherein, a scaffold tool or the git warehouse is called to newly create a cross-platform mobile terminal base project by using the default template, and application configuration of the default template is modified according to specified requirements, so that a cross-platform mobile terminal base is obtained. the Ajax request capability is used for providing a request method, the request method is a method of using a cross-platform request library luch-request in uview-ui and performing secondary encapsulation; the request method is used for reading application configuration, and a request root path and a default request method are set as default values, and corresponding parameter data is transmitted in subsequent calling to cover the original default values; the route jump capability is used for providing a pre-configured route jump method of the uni-app development framework, and the route jump method is secondarily encapsulated; the route jump method is introduced in main.js, and is bound to a vue global; when a page needs to perform route jump, a permission judgment method is called, the route jump method is executed after judgment, and a no permission prompt is given when the judgment fails; the message prompt capability is used for providing 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 the uni.showModal method of the uni-app development framework is used to encapsulate the warning pop-up windows, the confirmation pop-up windows and the question pop-up windows, and corresponding data is transmitted according to the parameter transmission mode of the uni.showModal method to call the warning pop-up windows, the confirmation pop-up windows and the question pop-up windows; The app automatic updating capability is used to provide an automatic updating method, the automatic updating method is used to request an interface to obtain a new version by calling the request method, and the downloading, installation and updating method of the uni-app development framework is encapsulated to realize the automatic updating of the app.

3. The method of claim 1, wherein, 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 processing mechanism. The log management function is used to support access to logs, and supports jumping to view logs by clicking or long-pressing a specified position or inputting a specific text value for multiple times. The global exception processing mechanism is used to obtain application internal exception conditions by using the onError life cycle provided by the uni-app development framework in App.vue, and the log management function is used to record errors.

4. The method of claim 1, wherein, The method further includes: Creating an src / main.js entry file; Importing the encapsulated public library in the src / main.js entry file, and globally binding the encapsulated public library on the vue instance to provide page function calls in the uni-app project.

5. The method of claim 1, wherein, The method further includes: Creating a first vue file in the page directory of the uni-app project; Importing the page module in the first vue file, registering components of the page module, and configuring a registered route in src / pages.json of the uni-app project to realize access to the page module.

6. The method of claim 1, wherein, Using the default template to newly create a cross-platform mobile terminal base project by calling a scaffolding tool or the git repository, modifying application configurations of the default template according to specified needs, to obtain the cross-platform mobile terminal base including: Using the default template to newly create the cross-platform mobile terminal base project based on the git repository, modifying application configurations of the default template according to project needs, to obtain the cross-platform mobile terminal base; or Creating the scaffolding tool, calling the scaffolding tool to pull the default template from the git repository, newly creating the cross-platform mobile terminal base project based on the default template, and modifying application configurations of the default template by providing option interaction of the scaffolding tool, to obtain the cross-platform mobile terminal base.

7. The method according to any one of claims 1 to 6, characterized in that, New business functions are developed on the cross-platform mobile terminal base in the following manner: Creating a function directory related to the new business function in the src / pages file; Creating at least one second vue file in the function directory according to business needs; Accessing each configuration in the src / config / index.js file and constant values in the src / const directory by using an alias path in at least one of the second vue files; If a utils tool library method related to the new business function needs to be created, a js file of the utils tool library method is created in the function directory; When accessing the utils tool library method, a tool library with a specified name related to the new business function is accessed by using an alias path in at least one of the second vue files, and the specified name depends on the file naming of the secondary development personnel.

8. The method of claim 6, wherein, The secondary development function is performed on the cross-platform mobile terminal base in the following manner: The page module is introduced into an npm package module; The hook and slot provided by the page module are used to modify and customize the function; The directory of the function is taken as a target npm package, a configuration file of the package.json file is initialized based on the target npm package, and a dependency is added to the configuration file; The sie-app attribute of the target npm package is configured, and the target npm package is published to an npm library or submitted to the git repository.

9. An implementation system of a cross-platform mobile terminal base, characterized by, Comprise: A first creation unit is configured to create a uni-app project by using vue-cli; An encapsulation and compilation unit is configured to encapsulate and compile a common configuration provided by a function page and a uni-app development framework into an npm package, generate a package.json file of the npm package, and generate a package.json file of the npm package in the uni-app project, the function page includes a basic function page and a business function page, the common configuration includes a public tool library, a public storage, application constants, and Ajax request capability, route jump capability, message prompt capability, popup capability, and app automatic update capability, the npm package contains two kinds of public libraries and page modules, the public library is used to provide the common configuration, and the page module is used to provide a complete function page including the function page; A script processing unit is configured to add a new script in a script script of the package.json file, and modify a start script, wherein the new script uses a yarn package management tool to sequentially install root directory and src directory dependencies, and the modified start script sets a vue environment by increasing a parameter VUE_APP_ENV=development. A second creating unit is configured to create an src / config / index.js file, set the src / config / index.js file as an application configuration of the uni-app project, set cross-platform configuration information according to the vue environment, create an src / const directory, set the src / const directory as an application constant directory of the uni-app project, define a constant value of a route jump page in the application constant directory, and create src / views and src / pages, wherein the src / views is used to store a technical page irrelevant to a business, and the src / pages is used to store a functional page related to the business. A submitting unit is configured to submit the uni-app project as a default template of a mobile terminal base to a git repository. A new creating unit is configured to call a scaffolding tool or the git repository to create a cross-platform mobile terminal base project by using the default template, modify the application configuration of the default template according to a specified requirement, and obtain the cross-platform mobile terminal base.

Images