Processing method suitable for user experience optimization of embedded H5 module at APP end

Abstract

The invention discloses a processing method suitable for user experience optimization of an embedded H5 module at an APP end. The processing method comprises the following steps of preloading, data loading, data storage, resource localization and placeholder display. The method has the beneficial effects that the processing method is suitable for loading the H5 module embedded in the APP end, different processing schemes are adopted according to different business scenes, loading of a single independent H5 page, different data and the same page type, different types of modules of the same page and complex business logic can be achieved, and the loading efficiency of the H5 module embedded in the APP end is improved. According to the method, the H5 module embedded in the page can quickly display the corresponding content, the white screen condition when the H5 module is loaded for the first time is eliminated, the waiting time of a user is shortened, the user experience is improved, through a systematic processing mechanism, the bad experience that the loading waiting of the H5 module is time-consuming is solved, particularly, the effects that the white screen does not exist when the H5 module is loaded for the first time and the content is directly displayed are achieved, and the user experience is improved. And the user experience when the user uses the APP is well improved.

Description

Technical Field

[0001] This application relates to a processing method, specifically a processing method applicable to the optimization of the user experience of the H5 module embedded in the APP side, and belongs to the technical field of APP loading applications. Background Technique

[0002] Embedding the H5 module in the APP side is a common development requirement. It can achieve seamless integration between the APP and web content, providing users with richer content and interactive experiences. Embedding the H5 module refers to the process of embedding an HTML5 page into the APP. HTML5 is a standard markup language used to build and present web pages. It supports functions such as multimedia content display, better graphics effects, and richer interactive forms. By embedding the H5 module, the APP can display web content and achieve interaction with the web page. Through the methods and interfaces provided by WebView, data transfer and communication can be carried out between the APP and the H5 page. For example, JavaScript can be used to interact with the H5 page, call JavaScript functions in the H5 page, or obtain data in the H5 page. To ensure that the H5 page can be efficiently loaded and rendered without affecting the overall performance of the APP, the H5 page can be compressed and optimized to reduce resource occupancy and loading time. Due to differences in different devices and browsers, compatibility testing and processing of the H5 page are required to ensure that the H5 page can be normally displayed and interacted on different devices and browsers. Security checks are performed on the loaded H5 web page to avoid loading malicious web pages or code. The HTTPS protocol can be used to encrypt data transmission to ensure the security of user data. To ensure that the embedded H5 module is consistent with the overall style and interaction method of the APP and provide a good user experience, the embedded H5 module can be customized and optimized to meet the specific needs and user habits of the APP.

[0003] Embedding the H5 module in the APP side is a flexible and powerful development method that can bring richer content and better user experiences to the APP. In the implementation process, attention needs to be paid to issues such as performance optimization, compatibility processing, security considerations, and user experience. With the development of the business, more and more APPs have evolved from fast applications with single functions to all-inclusive super APPs. Technically, in order to achieve functions with higher efficiency and lower cost, the hybrid mode of native plus H5 has become an indispensable option. Currently, with the progress of network infrastructure and the continuous maturity of mobile technologies, the experience of native pages is relatively friendly. However, if there is an H5 module embedded in the page, there will be an obvious waiting time (the module will first display a blank screen) when loading the module, affecting the user experience. Especially in different business scenarios, the loading mode of the H5 module is single, and the processing method is difficult to adapt to different business scenarios, making it impossible for users to quickly see the content they expect to see, thereby reducing the overall user experience of the page. Summary of the Invention

[0004] The object of this application is to provide a processing method suitable for optimizing the user experience of H5 modules embedded in the APP side to solve the above problems.

[0005] This application realizes the above object through the following technical solutions. A processing method suitable for optimizing the user experience of H5 modules embedded in the APP side, the processing method includes the following steps:

[0006] (1) Preloading, identifying the links in the cache pool to determine whether they have been loaded before;

[0007] (2) Loading data, loading different resources according to the identified results;

[0008] (3) Data storage, adding the page links that have not been loaded to the cache pool;

[0009] (4) Resource localization, loading the resource files downloaded in advance locally;

[0010] (5) Displaying a placeholder image, first loading the first frame image of the H5 module.

[0011] In this technical solution, in step (1), before entering the page or before displaying the H5 module, the content of the H5 module is pre-loaded and rendered through the H5 link to achieve the effect of seamless loading and display of the H5 module.

[0012] In this technical solution, when loading the H5 module in step (1), first judge whether the module has been loaded through the links in the cache pool, set an identification module in the system to identify and judge the H5 module, and scan all the data in the cache pool after confirming the H5 module, and determine whether the module has been loaded through data transmission.

[0013] In this technical solution, in step (2), when it is identified that the H5 module has been loaded, directly load the corresponding page resources from the cache, and then the APP transfers the business data to the H5 module, and the H5 refreshes the H5 content.

[0014] In this technical solution, in step (2), when it is identified that the H5 module has not been loaded, then load the H5 module. During the process of loading the H5 module, first load a pre-set display image, and when it is identified that the H5 module has not been loaded completely, give priority to loading and displaying the display image.

[0015] In this technical solution, when an unloaded H5 module is identified in step (3), continue to load the module. During the loading process, confirm the loading progress through the identification module and set a threshold for the loading duration according to the corresponding H5 module. If the loading time exceeds the threshold, perform the loading process in step (2). After the loading is completed, add the page link to the cache pool for direct loading after subsequent identification.

[0016] In this technical solution, in step (4), the client team and the front-end team communicate and negotiate well to download the static resources and common resources of the H5 module to the local APP in advance when the APP starts. Before downloading the data of the H5 module, simply classify the data of the H5 module and store it in multiple data storage disks. When the H5 module is loaded subsequently, first identify which storage disk the H5 module belongs to and load the data in the corresponding storage disk after the identification.

[0017] In this technical solution, when the APP loads the H5 module in step (4), first load the resource file downloaded in advance locally, and then transfer the relevant business data to the H5 page for the H5 page to perform corresponding data processing and display. When there is a large amount of H5 module data stored in the local APP, classify the data size of the H5 module before storage. When data needs to be cleared, preferentially unload the H5 module with smaller data. During subsequent loading, it can ensure the rapid loading of the H5 module with larger data, while the H5 module with smaller data is loaded during the process of starting the APP, achieving a balance between resource storage and loading speed and preventing the APP data storage from occupying too much space.

[0018] In this technical solution, in step (5), the client team, the front-end team, and the back-end team communicate and negotiate in advance. Before entering the page or before displaying the H5 module, first load a first-frame image of the H5 module or a first-frame image close to the content of the module. The first-frame image is provided by the corresponding H5 module and is displayed after entering the page. When the H5 module is loaded, change the style of the first-frame image subsequently to relieve the visual fatigue of the user and display the APP loading progress, reducing the waiting time of the user and improving the user experience.

[0019] In this technical solution, in step (5), after entering the page, when loading the H5 module, first display the pre-loaded first-frame image, and then hide or remove the first-frame image after the H5 module is loaded to achieve the instant appearance effect of the H5 module.

[0020] The beneficial effects of the present application are as follows: This processing method is applicable to the loading of H5 modules embedded in the APP side. According to different business scenarios, different processing solutions are adopted, which can realize the loading of single independent H5 pages, the same page type with different data, different types of modules on the same page, and complex business logics. It can make the H5 modules embedded in the page quickly display the corresponding content, eliminate the white screen situation when the H5 module is first loaded, reduce the waiting time of users, and improve the user experience. Through a systematic processing mechanism, the bad experience of time-consuming waiting for the loading of H5 modules is solved. In particular, the effect of directly displaying the content without a white screen during the first loading is achieved, which greatly improves the user experience when users use the APP. Brief Description of the Drawings

[0021] Figure 1 It is a flowchart of the processing method of the present application. Detailed Embodiments

[0022] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present application.

[0023] Embodiment 1:

[0024] A processing method applicable to the optimization of the user experience of H5 modules embedded in the APP side, the processing method includes the following steps:

[0025] (1) Preloading, identifying the links in the cache pool to determine whether they have been loaded before;

[0026] (2) Loading data, loading different resources according to the identified results;

[0027] (3) Data storage, adding the page links that have not been loaded to the cache pool.

[0028] In this technical solution, when loading a single independent H5 page in step (1), before entering the page or before displaying the H5 module, the content of the H5 module is pre-loaded and rendered through the H5 link to achieve the effect of seamless loading and display of the H5 module.

[0029] In this technical solution, when loading the H5 module in step (1), first judge whether the module has been loaded through the links in the cache pool, set an identification module in the system to identify and judge the H5 module, and scan all the data in the cache pool after the H5 module is confirmed, and determine whether the module has been loaded through data transmission.

[0030] In this technical solution, when it is recognized in step (2) that the H5 module has been loaded, the corresponding page resources are directly loaded from the cache, and then the APP transmits the service data to the H5 module, and the H5 is used to refresh the H5 content.

[0031] In this technical solution, when it is recognized in step (2) that the H5 module has not been loaded, the H5 module is loaded. During the process of loading the H5 module, a pre-set display image is first loaded. When it is recognized that the H5 module has not been fully loaded, the display image is preferentially loaded and displayed.

[0032] In this technical solution, when an unloaded H5 module is recognized in step (3), the module continues to be loaded. During the loading process, the loading progress is confirmed through an identification module, and a threshold for the loading duration is set according to the corresponding H5 module. If the loading time exceeds the threshold, the loading process in step (2) is performed. After the loading is completed, the page link is added to the cache pool for direct loading after subsequent identification.

[0033] The above method is applicable to the loading of the H5 module embedded in the APP side and is suitable for the same page type but different data situations.

[0034] Embodiment 2:

[0035] A processing method applicable to the optimization of the user experience of the H5 module embedded in the APP side, the processing method includes the following steps:

[0036] Resource localization, loading the resource files downloaded in advance locally.

[0037] In this technical solution, the client team and the front-end team communicate and negotiate to download the static resources and common resources of the H5 module to the APP local in advance when the APP starts. Before downloading the data of the H5 module, the data of the H5 module is simply classified and stored in multiple data storage disks. When the H5 module is loaded subsequently, it is first recognized that the H5 module class belongs to one of the storage disks, and the data in the corresponding storage disk is loaded after the recognition.

[0038] In this technical solution, when the APP loads the H5 module, it first loads the resource files downloaded in advance locally, and then transmits the relevant service data to the H5 page, and the H5 page performs the corresponding data processing and display. When there is a large amount of H5 module data stored in the local APP, the data size of the H5 module is classified before storage. When data needs to be cleared, the H5 module with smaller data is preferentially uninstalled. During subsequent loading, it can ensure the rapid loading of the H5 module with larger data, while the H5 module with smaller data is loaded during the process of starting the APP, achieving the balance of resource storage and loading speed and preventing the APP data storage from occupying too much space.

[0039] The above method is applicable to the loading of H5 modules embedded in the APP side, and is suitable for multiple H5 modules of the same type on the same page.

[0040] Example 3:

[0041] A processing method suitable for optimizing the user experience of H5 modules embedded in the APP side, the processing method includes the following steps:

[0042] Display a placeholder image and first load the first frame image of the H5 module.

[0043] In this technical solution, the client team, the front-end team, and the back-end team communicate and negotiate in advance. Before entering the page or before displaying the H5 module, first load a first frame image of the H5 module, or a first frame image close to the content of the module. The first frame image is provided by the corresponding H5 module and is displayed after entering the page. When the H5 module is loaded, the style of the first frame image is subsequently changed to reduce the visual fatigue of the user, and the APP loading progress can be displayed, reducing the waiting time of the user and improving the usage experience.

[0044] In this technical solution, after entering the page, when loading the H5 module, first display the pre-loaded first frame image, and then hide or remove the first frame image after the H5 module is loaded, achieving the instant display effect of the H5 module.

[0045] The above method is applicable to the loading of H5 modules embedded in the APP side, and is suitable for the situation where the content business logic of the H5 module is complex and the content is relatively heavy.

[0046] For those skilled in the art, it is obvious that this application is not limited to the details of the above exemplary embodiments, and can be implemented in other specific forms without departing from the spirit or basic characteristics of this application. Therefore, from any point of view, the embodiments should be regarded as exemplary and non-limiting. The scope of this application is defined by the appended claims rather than the above description. Therefore, all changes falling within the meaning and scope of the equivalent elements of the claims are intended to be included in this application. Any reference signs in the claims should not be regarded as limiting the claims involved.

[0047] In addition, it should be understood that although this specification is described according to the embodiments, not every embodiment only contains an independent technical solution. This narrative way of the specification is only for clarity. Those skilled in the art should regard the specification as a whole, and the technical solutions in each embodiment can also be appropriately combined to form other embodiments that can be understood by those skilled in the art.

Claims

1. A processing method applicable to optimizing the user experience of H5 modules embedded in APP, characterized by: The processing method comprises the following steps: (1) Preload, identify the link in the cache pool to determine whether it has been loaded; (2) Loading data: Loading different resources based on the recognition results; (3) Data storage: adding links to pages that have not been loaded to a cache pool; (4) Resource localization, loading local resource files downloaded in advance; (5) Display the placeholder image and load the first frame of the H5 module first.

2. The processing method for optimizing the user experience of the H5 module embedded in the APP according to claim 1 is characterized in that: In the step (1), before entering the page or before displaying the H5 module, the content of the H5 module is pre-loaded and rendered through the H5 link to achieve the effect of seamless loading and display of the H5 module.

3. The processing method for optimizing user experience of H5 module embedded in APP according to claim 1 is characterized in that: When the H5 module is loaded in the step (1), first determine whether the module has been loaded through the link in the cache pool, set up an identification module in the system to identify and determine the H5 module, and after the H5 module is confirmed, scan all data in the cache pool to determine whether the module has been loaded through data transmission.

4. The processing method for optimizing the user experience of the H5 module embedded in the APP according to claim 1 is characterized in that: In the step (2), when it is identified that the H5 module has been loaded, the corresponding page resources are directly loaded from the cache, and then the APP transmits the business data to the H5 module, and the H5 content is refreshed by H5.

5. The processing method for optimizing user experience of H5 module embedded in APP according to claim 1 is characterized in that: In the step (2), when it is identified that the H5 module has not been loaded, the H5 module is loaded. During the loading of the H5 module, a pre-set display image is first loaded. When it is identified that the H5 module has not been loaded, the display image is loaded and displayed first.

6. The processing method for optimizing user experience of H5 module embedded in APP according to claim 1 is characterized in that: When an H5 module that has not been loaded is identified in step (3), the module continues to be loaded. During the loading process, the loading progress is confirmed by identifying the module, and a threshold of the loading time is set according to the corresponding H5 module. If the loading time exceeds the threshold, the loading process in step (2) is performed. After the loading is completed, the page link is added to the cache pool for direct loading after subsequent identification.

7. The processing method for optimizing user experience of H5 module embedded in APP according to claim 1 is characterized in that: In step (4), the client team and the front-end team communicate and negotiate to download the static resources and public resources of the H5 module to the local APP in advance when the APP is started. Before downloading the data of the H5 module, the data of the H5 module is simply classified and stored in multiple data storage disks. When the H5 module is loaded subsequently, the H5 module is limitedly identified as belonging to one of the storage disks, and the data in the corresponding storage disk is loaded after identification.

8. The processing method for optimizing user experience of H5 module embedded in APP according to claim 1 is characterized in that: In step (4), when the APP loads the H5 module, it first loads the local resource file downloaded in advance, and then transmits the relevant business data to the H5 page, which performs corresponding data processing and display. When the local APP stores a lot of H5 module data, the data size of the H5 module is classified before storage. When data needs to be cleaned up, the H5 module with smaller data is uninstalled first. During subsequent loading, the H5 module with larger data can be loaded quickly, while the H5 module with smaller data is loaded during the process of starting the APP, so as to achieve a balance between resource storage and loading speed and prevent the APP data storage from occupying too much space.

9. The processing method for optimizing user experience of H5 module embedded in APP according to claim 1 is characterized in that: In the step (5), the client team, the front-end team and the back-end team communicate and negotiate in advance. Before entering the page, or before displaying the H5 module, a first frame image of the H5 module, or a first frame image close to the content of the module is loaded first. The first frame image is provided by the corresponding H5 module and is displayed after entering the page. When the H5 module is loaded, the style of the first frame image is subsequently changed to reduce the visual fatigue of the user, and the loading progress of the APP can be displayed, reducing the user's waiting time and improving the user experience.

10. The processing method for optimizing user experience of H5 module embedded in APP according to claim 1 is characterized in that: After entering the page in step (5), when loading the H5 module, the first frame image loaded in advance is displayed first, and after the H5 module is loaded, the first frame image is hidden or removed, so as to achieve the effect of the H5 module being displayed in seconds.

Images