H5 hybrid development method and system based on mobile terminal

Abstract

The invention relates to a H5 hybrid development method and system based on a mobile terminal, and the method comprises the following steps: adding lt in a page of a native applet of the mobile terminal; the method comprises the following steps of: (1) screening web-viewgt Setting a route for accessing the H5 item in the container according to the label and the src attribute; according to the configured routing information, if the result is analyzed to be lt when the page is skipped; the method comprises the following steps of: (1) screening web-viewgt If yes, calling a webView component to obtain a weburl address parameter in the route, and rendering to generate an H5 page; the container comprises a plurality of H5 items, and the H5 items are transmitted to the webView component in an injection mode; and the H5 page obtains the user data and unidirectionally sends the user data to the container for the native applet to read. According to the method, the native applet is embedded into the Webview to load the H5 page, cross-platform compatibility is achieved, iteration is accelerated, cost is reduced, user experience is improved, code management is simplified, content updating flexibility is enhanced, and the market response speed is increased.

Description

Technical Field

[0001] The present invention relates to the field of hybrid development, and in particular to a method and system for hybrid development based on mobile terminal H5. Background Art

[0002] Native App Development refers to the process of creating applications using the official programming language and development tools of a specific operating system or platform. It has the following characteristics:

[0003] Platform specificity: Native apps are developed for a specific operating system, such as Swift or Objective-C for iOS, Kotlin or Java for Android, which ensures tight integration between the app and the operating system.

[0004] Hardware feature access: Native applications can fully utilize the device's hardware features, such as camera, GPS, accelerometer, etc., to provide a rich interactive experience.

[0005] High performance: Native apps typically offer higher performance, including fast response times and smooth animations, which improves the user experience.

[0006] Official tools and development environment: Use official development tools, such as Xcode (iOS) and Android Studio (Android), and follow official security standards and best practices to ensure the security and stability of the app.

[0007] App store distribution: Native apps are distributed through official app stores, such as the Apple App Store and Google Play Store, making it easy for users to download and update them.

[0008] However, native development also has some limitations, such as the need to develop and maintain applications separately for each platform, which may increase development costs and time; updating applications may need to go through the app store review process, affecting the speed of iteration.

[0009] Hybrid development is a technology that allows developers to use one code base to create applications for multiple platforms such as iOS and Android. Its key advantages include:

[0010] Cross-platform: Hybrid development avoids the cost and complexity of separate development for each platform and improves development efficiency.

[0011] Cost-effectiveness: For projects with limited budgets, hybrid development can significantly reduce development costs because it does not require hiring different development teams for each platform.

[0012] Rapid development: Web technology can be used to quickly develop applications, which is especially suitable for teams that already have experience in Web development.

[0013] Unified code base: Hybrid development allows developers to maintain a unified code base, simplifying the code management and update process.

[0014] Fast iteration: Web applications can be updated directly on the server side, which makes application iteration and bug fixing faster and more convenient.

[0015] Simplified testing: Testing of hybrid applications can use the same test suite on multiple platforms, thus simplifying the testing process.

[0016] Progressive Web Apps (PWA): Hybrid development helps in creating PWAs, which provide a native-like experience while running on any browser that supports modern web technologies.

[0017] Native encapsulation of specific functions: In hybrid applications, performance-critical parts can be encapsulated using native modules to make up for performance deficiencies and achieve the best performance and user experience.

[0018] Hybrid development is particularly suitable for scenarios that require rapid iteration of marketing business, reduce development costs, and quickly capture the market. For startups or small teams, hybrid development is an ideal choice because it can accelerate time to market and reduce the risk of technology selection.

[0019] As the company's business needs continue to grow and become more complex, the traditional native mini-program development method faces some challenges (package size and release review time limit, etc.). It is necessary to consider adopting a hybrid development approach to implement a native mini-program embedded in Webview to load H5 development solutions to solve some limitations in native mini-program development, so as to achieve faster and more flexible business demand iteration and cross-platform compatibility.

[0020] The information disclosed in this background technology section is only intended to deepen the understanding of the overall background technology of the present invention, and should not be regarded as acknowledging or suggesting in any form that the information constitutes the prior art already known to those skilled in the art. Summary of the invention

[0021] In view of the defects existing in the prior art, the purpose of the present invention is to provide a method and system for hybrid development based on mobile H5, which realizes hybrid development by embedding native applet into Webview to load H5 page, which can significantly improve development efficiency and user experience, and not only allows cross-platform compatibility and rapid iteration, reduces application volume, and reduces development and maintenance costs; but also utilizes the mature Web technology ecosystem to simplify code management and update processes, enhance the real-time update capability of content, improve online visibility, and facilitate the integration of third-party services; it also simplifies the testing process, provides greater flexibility for market strategies, thereby accelerating product launch and meeting changing business needs.

[0022] In order to achieve the above purpose, the technical solution adopted by the present invention is:

[0023] A method based on mobile H5 hybrid development, characterized by comprising the following steps:

[0024] In the native applet page of the mobile terminal, by adding <web-view>The tag and src attribute set the route to access the H5 project in the container;

[0025] According to the configured routing information, when jumping to the page, if it is parsed <web-view>Tag, then call the webView component to obtain the weburl address parameters in the route and render to generate an H5 page;

[0026] The container includes several H5 items, which are passed to the webView component in an injected manner;

[0027] The H5 page obtains user data and sends it unidirectionally to the container for the native applet to read.

[0028] Based on the above technical solutions, the H5 project integrates third-party services and APIs to achieve rapid reuse and management of content.

[0029] Based on the above technical solution, the H5 page integrates cloud services and back-end data interfaces to achieve dynamic data update and cloud storage.

[0030] Based on the above technical solutions, rendering and generating H5 pages are implemented based on Vue 3, TypeScript 4 and MPA.

[0031] Based on the above technical solution, when building MPA, the list of pages to be built is specified through the command line, and then the script configures the building process according to the page list. The specific steps include:

[0032] Obtain environment variables, obtain the environment variable named npm_config_entry through process.env.npm_config_entry; the variable passes the list of pages to be built through the entry parameter when running the build command;

[0033] Initialize the multi-page configuration object. The multiPages object is initialized as an empty object to store the final page building configuration.

[0034] Check whether the npm_entry variable has a value; if it has a value, it means that the user has specified a list of pages to build in the command line;

[0035] If npm_entry exists, split it into an array entryList by commas, where each array element represents a page name;

[0036] Loop through each page name in the entryList array;

[0037] Check and configure pages. For each page name, the script checks whether there is a corresponding page configuration in an object called input; if so, add the configuration of the page to the multiPages object;

[0038] If the npm_entry variable does not exist, it means that no specific page list is specified, and the script will directly use the input object as the configuration of multiPages, that is, build all pages;

[0039] Finally, the multiPages object contains page construction information determined according to user-specified or default configurations, and the multiPages object will be used to guide the build tool to build the MPA.

[0040] A system based on mobile H5 hybrid development, used to implement any of the above methods, characterized by comprising three core layers: view layer, data layer and network layer;

[0041] The view layer is used to render and generate H5 pages and process user interaction requests;

[0042] In the view layer, Vue Router is used to manage page routing, where the page refers to the MPA multi-page application, including n page routing;

[0043] In the view layer, public components, public business components and business components are modularly managed, and third-party libraries and components are used to extend the functionality of the project;

[0044] Get the routes of each page from Vue Router and render to generate H5 pages as business views;

[0045] The data layer is built by the Vuex framework and performs state management, which integrates actions, mutations, and state data to achieve centralized management and efficient processing of application data;

[0046] Submit mutations through actions, which contain objects with multiple methods, each of which represents an asynchronous operation;

[0047] Mutations are the only way to modify state data. Mutations contain objects with multiple methods, each of which represents an operation for changing a state.

[0048] State data state is where Vuex stores all state data. When the data in the state changes, the associated view will also be automatically updated;

[0049] The network layer is used as a bridge to communicate with the server. It uses Axios encapsulation technology to improve performance and supports multiple protocols to ensure smooth data transmission.

[0050] Based on the above technical solutions, the Utils tool class is also integrated into the system architecture to provide general functional support, including:

[0051] Auth authentication module, used to ensure system security;

[0052] Platform platform adaptation module, used to ensure cross-platform compatibility;

[0053] Redirect module, used for redirection function;

[0054] Storage module, used for storage services;

[0055] Share module, used for sharing function;

[0056] The general functions support adaptation of App applications, Wxapp applications, and H5 applications.

[0057] On the basis of the above technical solution, the system includes but is not limited to the following contents when constructing the environment in Env:

[0058] During the build process, static resources are processed to optimize loading time and performance;

[0059] The build configuration includes the configuration of the API host address, which dynamically adjusts the URL of the API request according to the current environment;

[0060] Configure the debugging panel Vconsole for mobile web pages, which is included in the build output in the development environment to facilitate debugging by developers;

[0061] Configure a local development server to provide fast module hot replacement HMR and live reload functions;

[0062] Configure the API proxy to forward front-end requests to back-end services to avoid cross-domain request issues.

[0063] Based on the above technical solutions, Vite 2 is used as the construction tool, Vue 3 as the front-end framework, and TypeScript as the programming language.

[0064] The method and system for mobile H5 hybrid development described in the present invention have the following beneficial effects:

[0065] Native mini programs embed Webview to load H5 pages, achieve cross-platform compatibility, accelerate iteration, reduce costs, improve user experience, simplify code management, enhance content update flexibility, and improve market response speed.

[0066] Hybrid development is achieved by embedding native applet in Webview to load H5 pages, which can significantly improve development efficiency and user experience, allow cross-platform compatibility and rapid iteration, reduce application size, and reduce development and maintenance costs.

[0067] Leveraging the mature Web technology ecosystem, it simplifies code management and update processes, enhances the real-time update capabilities of content, improves online visibility, and facilitates the integration of third-party services;

[0068] The testing process is simplified, providing greater flexibility in market strategies, thereby accelerating time to market and meeting changing business needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0069] The present invention has the following accompanying drawings:

[0070] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0071] Figure 1 A flowchart of embodiment 1 of a method for mobile H5 hybrid development described in the present invention.

[0072] Figure 2 System architecture diagram of embodiment 1 of a system based on mobile H5 hybrid development described in the present invention. DETAILED DESCRIPTION

[0073] The present invention is further described in detail below in conjunction with the accompanying drawings. The detailed description is an explanation made in conjunction with the exemplary embodiments of the present invention, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those skilled in the art that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0074] like Figure 1 As shown, the present invention provides a method based on mobile terminal H5 hybrid development, including the following steps:

[0075] In the native applet page of the mobile terminal, by adding <web-view>The tag and src attribute set the route to access the H5 project in the container;

[0076] According to the configured routing information, when jumping to the page, if it is parsed <web-view>Tag, then call the webView component to obtain the weburl address parameters in the route and render to generate an H5 page;

[0077] The container includes several H5 items, which are passed to the webView component in an injected manner;

[0078] The H5 page obtains user data and sends it unidirectionally to the container for the native applet to read.

[0079] H5 pages can run on different operating systems and devices without the need for separate development for each platform, thus achieving a consistent experience across platforms.

[0080] Updates to H5 pages do not need to go through the review process of the mini program platform, so new features can be deployed and bugs fixed more quickly, accelerating product iteration.

[0081] By loading external H5 pages through Webview, you can reduce the size of the mini program itself and avoid affecting the loading speed and user experience due to excessive size.

[0082] Using the Web technology stack to develop H5 pages can reduce the cost of developing native applications for different platforms, especially for teams that already have Web development experience. In addition, maintaining a unified H5 code base can simplify code management and update processes and improve development efficiency. You can use mature Web technologies, frameworks, and tools, such as Vue, React, etc., as well as rich Web APIs to accelerate the development process.

[0083] Through H5 pages, progressive web applications (PWA) can be implemented more easily to provide an experience similar to native applications.

[0084] The content of the H5 page can be updated in real time without the need for users to download a new version of the mini program, which improves the timeliness of the content.

[0085] Compared with native mini programs, H5 pages are easier to optimize for search engines (SEO), helping to increase online visibility and attract traffic.

[0086] Based on the above technical solutions, the H5 project integrates third-party services and APIs to achieve rapid reuse and management of content.

[0087] For example, if you already have a large amount of content resources (such as articles, pictures, videos, etc.) on the Web, you can embed these contents directly into the mini program through the H5 project to achieve rapid reuse and management of the content.

[0088] Based on the above technical solution, the H5 page integrates cloud services and back-end data interfaces to achieve dynamic data update and cloud storage.

[0089] This embodiment helps enterprises to better collect and analyze user data, thereby making more accurate and effective market decisions.

[0090] Based on the above technical solutions, rendering and generating H5 pages are implemented based on Vue 3, TypeScript 4 and MPA (multi-page application).

[0091] Vue 3 is a popular front-end JavaScript framework that provides a responsive component system and easy-to-use API for building user interfaces. TypeScript is a superset of JavaScript that adds static type checking and object-oriented programming features. Vue 3+TypeScript 4+MPA rendering to generate H5 pages means using the Vue 3 framework and TypeScript 4 language features to build a multi-page application. This combination takes advantage of the modern features of Vue 3 and the type safety of TypeScript, while maintaining the advantages of multi-page applications in SEO (search engine optimization) and page loading performance.

[0092] Based on the above technical solution, when building an MPA (multi-page application), the list of pages to be built is specified through the command line, and then the script configures the building process according to the page list. The specific steps include:

[0093] Obtain environment variables, obtain the environment variable named npm_config_entry through process.env.npm_config_entry; the variable passes the list of pages to be built through the entry parameter when running the build command; for example: npmrun build--entry=page1,page2;

[0094] Initialize the multi-page configuration object. The multiPages object is initialized as an empty object to store the final page building configuration.

[0095] Check whether the npm_entry variable has a value; if it has a value, it means that the user has specified a list of pages to build in the command line;

[0096] If npm_entry exists, split it into an array entryList by commas, where each array element represents a page name;

[0097] Loop through each page name in the entryList array;

[0098] Check and configure pages. For each page name, the script checks whether there is a corresponding page configuration in an object called input; if so, add the configuration of the page to the multiPages object;

[0099] If the npm_entry variable does not exist, it means that no specific page list is specified, and the script will directly use the input object as the configuration of multiPages, that is, build all pages;

[0100] Finally, the multiPages object contains page construction information determined according to user-specified or default configurations, and the multiPages object will be used to guide the build tool to build the MPA.

[0101] On the basis of the above technical solution, the present invention further provides a system based on mobile H5 hybrid development, such as Figure 2 As shown, it includes three core layers: view layer, data layer and network layer;

[0102] The view layer is used to render and generate H5 pages and process user interaction requests;

[0103] In the view layer, Vue Router is used to manage page routing, where the page refers to the MPA multi-page application, including n page routing;

[0104] In the view layer, public components, public business components and business components are modularly managed, and third-party libraries and components are used to extend the functionality of the project;

[0105] Get the routes of each page from Vue Router and render to generate H5 pages as business views;

[0106] The data layer is built by the Vuex framework and performs state management, which integrates actions, mutations, and state data to achieve centralized management and efficient processing of application data;

[0107] Submit mutations through actions, which contain objects with multiple methods, each of which represents an asynchronous operation;

[0108] Mutations are the only way to modify state data. Mutations contain objects with multiple methods, each of which represents an operation for changing a state.

[0109] State data state is where Vuex stores all state data. When the data in the state changes, the associated view will also be automatically updated;

[0110] The network layer is used as a bridge to communicate with the server. It uses Axios encapsulation technology to improve performance and supports multiple protocols to ensure smooth data transmission.

[0111] From the perspective of integration and interaction, the close integration of Axios and Vuex makes the data exchange between the front-end and the back-end both efficient and secure. The view layer sends data requests through the network layer, and the network layer interacts with the data layer. This clear division of labor and efficient collaboration between layers ensures data consistency within the application and a smooth user experience.

[0112] Based on the above technical solutions, the Utils tool class is also integrated into the system architecture to provide general functional support, including:

[0113] Auth authentication module, used to ensure system security;

[0114] Platform platform adaptation module, used to ensure cross-platform compatibility;

[0115] Redirect module, used for redirection function;

[0116] Storage module, used for storage services;

[0117] Share module, used for sharing function;

[0118] The general functions support adaptation of App applications, Wxapp applications, and H5 applications.

[0119] On the basis of the above technical solution, the system includes but is not limited to the following contents when constructing the environment in Env:

[0120] During the build process, static resources are processed to optimize loading time and performance, such as compressing and merging images, style sheets, and JavaScript files;

[0121] The build configuration includes the configuration of the API host address, which dynamically adjusts the URL of the API request according to the current environment;

[0122] Configure the debugging panel Vconsole for mobile web pages, which is included in the build output in the development environment to facilitate debugging by developers;

[0123] Configure a local development server (such as Webpack Dev Server) to provide fast module hot replacement HMR and live reload functions;

[0124] Configure the API proxy to forward front-end requests to back-end services to avoid cross-domain request issues;

[0125] Use Vite 2 as the build tool, Vue 3 as the front-end framework, and TypeScript as the programming language.

[0126] The contents not described in detail in this specification belong to the prior art known to professional and technical personnel in this field.

[0127] The above description is only a preferred embodiment of the present invention, and the protection scope of the present invention is not limited to the above embodiment. Any equivalent modifications or changes made by those skilled in the art based on the contents disclosed by the present invention should be included in the protection scope recorded in the claims.

Claims

1. A method based on mobile H5 hybrid development, characterized in that: The steps include: In the native applet page of the mobile terminal, by adding <web-view> The tag and src attribute set the route to access the H5 project in the container; According to the configured routing information, when jumping to the page, if it is parsed <web-view> Tag, then call the webView component to obtain the weburl address parameters in the route and render to generate an H5 page; The container includes several H5 items, which are passed to the webView component in an injected manner; The H5 page obtains user data and sends it unidirectionally to the container for the native applet to read.

2. A method for mobile H5 hybrid development as described in claim 1, characterized in that: The H5 project integrates third-party services and APIs to achieve rapid reuse and management of content.

3. A method for mobile H5 hybrid development as claimed in claim 1, characterized in that: The H5 page integrates cloud services and back-end data interfaces to achieve dynamic data updates and cloud storage.

4. A method for mobile H5 hybrid development as claimed in claim 1, characterized in that: Rendering and generating H5 pages is based on Vue 3, TypeScript 4 and MPA.

5. A method for mobile H5 hybrid development as described in claim 4, characterized in that: When building an MPA, you specify the list of pages to be built through the command line, and then the script configures the build process based on the page list. The specific steps include: Obtain environment variables, obtain the environment variable named npm_config_entry through process.env.npm_config_entry; the variable passes the list of pages to be built through the entry parameter when running the build command; Initialize the multi-page configuration object. The multiPages object is initialized as an empty object to store the final page building configuration. Check whether the npm_entry variable has a value; if it has a value, it means that the user has specified a list of pages to build in the command line; If npm_entry exists, split it into an array entryList by commas, where each array element represents a page name; Loop through each page name in the entryList array; Check and configure pages. For each page name, the script checks whether there is a corresponding page configuration in an object called input; if so, add the configuration of the page to the multiPages object; If the npm_entry variable does not exist, it means that no specific page list is specified, and the script will directly use the input object as the configuration of multiPages, that is, build all pages; Finally, the multiPages object contains page construction information determined according to user-specified or default configurations, and the multiPages object will be used to guide the build tool to build the MPA.

6. A system based on mobile H5 hybrid development, used to implement the method described in any one of claims 1 to 5, characterized in that: include: The three core layers are view layer, data layer and network layer; The view layer is used to render and generate H5 pages and process user interaction requests; In the view layer, Vue Router is used to manage page routing, where the page refers to the MPA multi-page application, including n page routing; In the view layer, public components, public business components and business components are modularly managed, and third-party libraries and components are used to extend the functionality of the project; Get the routes of each page from Vue Router and render to generate H5 pages as business views; The data layer is built by the Vuex framework and performs state management, which integrates actions, mutations, and state data to achieve centralized management and efficient processing of application data; Submit mutations through actions, which contain objects with multiple methods, each of which represents an asynchronous operation; Mutations are the only way to modify state data. Mutations contain objects with multiple methods, each of which represents an operation for changing a state. State data state is where Vuex stores all state data. When the data in the state changes, the associated view will also be automatically updated; The network layer is used as a bridge to communicate with the server. It uses Axios encapsulation technology to improve performance and supports multiple protocols to ensure smooth data transmission.

7. A system based on mobile H5 hybrid development as claimed in claim 6, characterized in that: The system architecture also incorporates the Utils tool class to provide general functional support, including: Auth authentication module, used to ensure system security; Platform platform adaptation module, used to ensure cross-platform compatibility; Redirect module, used for redirection function; Storage module, used for storage services; Share module, used for sharing function; The general functions support adaptation of App applications, Wxapp applications, and H5 applications.

8. A system based on mobile H5 hybrid development as claimed in claim 6, characterized in that: The system includes but is not limited to the following when building the environment in Env: During the build process, static resources are processed to optimize loading time and performance; The build configuration includes the configuration of the API host address, which dynamically adjusts the URL of the API request according to the current environment; Configure the debugging panel Vconsole for mobile web pages, which is included in the build output in the development environment to facilitate debugging by developers; Configure a local development server to provide fast module hot replacement HMR and live reload functions; Configure the API proxy to forward front-end requests to back-end services to avoid cross-domain request issues.

9. A system based on mobile H5 hybrid development as claimed in claim 6, characterized in that: Use Vite 2 as the build tool, Vue 3 as the front-end framework, and TypeScript as the programming language.

Images