H5 resource packaging method and device for hybrid application, computer equipment and medium

Abstract

The invention relates to the technical field of base frame operation and maintenance and financial science and technology, and particularly discloses a hybrid application H5 resource packaging method and device, computer equipment and a storage medium. Obtaining to-be-packaged static resources of the H5 page; when the to-be-packaged static resources contain the picture resources, respectively packaging the picture resources and non-picture resources in the to-be-packaged static resources to obtain offline packages corresponding to the non-picture resources and picture packages corresponding to the picture resources; and based on a preset reference path, respectively sending the picture packet and the offline packet to a client and an online server for storage, and obtaining an online picture packet and a local offline packet. According to the method, the picture resources and the non-picture resources in the to-be-packaged static resources are separately processed, the picture resources are packaged and stored in the online server, the picture loading efficiency is ensured, meanwhile, the sub-picture resources are packaged and stored in the client, the size of a local offline package is reduced, and the resource loading efficiency is improved.

Description

Technical Field

[0001] The present application relates to the fields of infrastructure operation and maintenance and financial technology, and in particular to a hybrid application H5 resource packaging method, device, computer equipment and storage medium. Background Art

[0002] With the development of computer technology, hybrid applications based on H5 pages are gradually applied to the financial field. Hybrid applications are applications that use native languages ​​to develop APP shells and embed H5 pages to implement functions. Due to the powerful cross-platform nature of H5, in the financial field, various financial companies use hybrid applications to launch interactive marketing activities and product displays for various products. However, the traditional H5 page resource packaging method is to package all static resources of the H5 page into an offline package, resulting in a large offline package, which in turn leads to problems such as slow page loading and poor user experience when users use the application to view resources related to financial products. Therefore, how to optimize the packaging method of offline packages and improve the efficiency of resource loading has become an urgent problem to be solved. Summary of the invention

[0003] The present application provides a hybrid application H5 resource packaging method, device, computer equipment and storage medium to optimize the packaging method of offline packages and thereby improve resource loading efficiency.

[0004] In a first aspect, the present application provides a method for packaging H5 resources for a hybrid application, the method comprising:

[0005] Get the static resources to be packaged for the H5 page;

[0006] When the static resources to be packaged include picture resources, the picture resources and non-picture resources in the resources to be packaged are packaged separately to obtain offline packages corresponding to the non-picture resources and picture packages corresponding to the picture resources;

[0007] Based on a preset reference path, the picture package and the offline package are sent to the client and the online server respectively for storage, so as to obtain an online picture package and a local offline package.

[0008] In a second aspect, the present application further provides an H5 resource packaging device for hybrid applications, the device comprising:

[0009] Resource acquisition module, used to obtain the static resources to be packaged for the H5 page;

[0010] A resource packaging module, used for packaging the image resources and non-image resources in the resources to be packaged respectively when the static resources to be packaged include image resources, and obtaining an offline package corresponding to the non-image resource and an image package corresponding to the image resource;

[0011] The offline package sending module is used to send the picture package and the offline package to the client and the online server for storage based on a preset reference path, so as to obtain an online picture package and a local offline package.

[0012] In a third aspect, the present application also provides a computer device, comprising a memory and a processor; the memory is used to store a computer program; the processor is used to execute the computer program and implement the H5 resource packaging method for the hybrid application as described above when executing the computer program.

[0013] In a fourth aspect, the present application also provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the processor implements the H5 resource packaging method for hybrid applications as described above.

[0014] The present application discloses a hybrid application H5 resource packaging method, device, computer equipment and storage medium, which obtains the to-be-packaged static resources of the H5 page; when the to-be-packaged static resources include picture resources, the picture resources and non-picture resources in the to-be-packaged resources are packaged separately to obtain the offline package corresponding to the non-picture resources and the picture package corresponding to the picture resources; based on a preset reference path, the picture package and the offline package are sent to the client and the online server for storage respectively to obtain the online picture package and the local offline package. The present application ensures the picture loading efficiency by processing the picture resources and non-picture resources in the to-be-packaged static resources separately, packaging the picture resources and storing them in the online server, and at the same time, packaging the divided picture resources and storing them in the client, which reduces the size of the local offline package and thus improves the resource loading efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0016] Figure 1 This is a schematic flow chart of a first embodiment of a method for packaging H5 resources for hybrid applications provided by an embodiment of the present application;

[0017] Figure 2 This is a schematic flow chart of a second embodiment of a method for packaging H5 resources for hybrid applications provided in an embodiment of the present application;

[0018] Figure 3This is a schematic flow chart of a third embodiment of a method for packaging H5 resources for hybrid applications provided in an embodiment of the present application;

[0019] Figure 4 A schematic block diagram of an H5 resource packaging device for a hybrid application provided in an embodiment of the present application;

[0020] Figure 5 A schematic block diagram of the structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0021] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0022] The flowcharts shown in the accompanying drawings are only examples and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may also be decomposed, combined or partially merged, so the actual execution order may change according to actual conditions.

[0023] It should be understood that the terms used in this application specification are only for the purpose of describing specific embodiments and are not intended to limit the application. As used in this application specification and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.

[0024] It should be further understood that the term “and / or” used in the specification and appended claims refers to any combination and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0025] The embodiments of the present application provide a method, device, computer equipment and storage medium for H5 resource packaging of a hybrid application. The method for packaging H5 resources of the hybrid application can be applied to a server, and the image resources and non-image resources in the static resources to be packaged are processed separately, and the image resources are packaged and stored in an online server, thereby ensuring the efficiency of image loading. At the same time, the image resources are packaged and stored in a client, which reduces the size of the local offline package and improves the efficiency of resource loading. The server can be an independent server or a server cluster.

[0026] In conjunction with the accompanying drawings, some embodiments of the present application are described in detail below. In the absence of conflict, the following embodiments and features in the embodiments can be combined with each other.

[0027] See also Figure 1 , Figure 1 This is a schematic flow chart of a hybrid application H5 resource packaging method provided by an embodiment of the present application. The hybrid application H5 resource packaging method can be applied to a server, and is used to package and store the image resources in an online server by processing the image resources and non-image resources in the static resources to be packaged separately, thereby ensuring the image loading efficiency. At the same time, the divided image resources are packaged and stored in the client, reducing the size of the local offline package, thereby improving the resource loading efficiency.

[0028] like Figure 1 As shown, the H5 resource packaging method of the hybrid application specifically includes steps S101 to S103.

[0029] S101, obtaining the static resources to be packaged of the H5 page;

[0030] In one embodiment, a hybrid application refers to an application developed through a hybrid development method, that is, an APP shell is developed using a native language, and an H5 page is embedded to implement functions, combining the characteristics of web page technology and native applications.

[0031] In one embodiment, an H5 page is a web page based on HTML (HyperText Markup Language) 5 technology, which can be displayed on a variety of devices, including mobile phones, tablets, and computers. HTML5 is the fifth generation of HTML standards, which introduces many new elements and attributes, allowing web developers to create richer and more interactive web content.

[0032] In one embodiment, the resources to be packaged of the H5 page generally include HTML files, CSS (Cascading Style Sheets) files, JavaScript files, image files, and any other static files, such as font files.

[0033] S102: When the static resources to be packaged include picture resources, the picture resources and non-picture resources in the resources to be packaged are packaged separately to obtain offline packages corresponding to the non-picture resources and picture packages corresponding to the picture resources;

[0034] In one embodiment, the static resources to be packaged are identified to determine image resources (such as ".jpg", ".png", ".gi f", etc.) and non-image resources (such as ".html", ".css", ".js", etc.).

[0035] In one embodiment, all image resources are combined into one or more image packages. Specifically, this can be achieved by file compression or by using a special image compression tool.

[0036] In one embodiment, for non-image resources, they can be packaged into an offline package according to the requirements of the H5 page. The offline package usually includes an HTML document, a CSS style sheet, a JavaScript script, etc.

[0037] Furthermore, when the static resources to be packaged include picture resources, the picture resources and non-picture resources in the resources to be packaged are packaged separately to obtain offline packages corresponding to the non-picture resources and picture packages corresponding to the picture resources, including: when the static resources to be packaged include picture resources, the static resources to be packaged are classified to obtain the non-picture resources and the picture resources; the non-picture resources and the picture resources are packaged separately to obtain the offline package and the picture package.

[0038] In one embodiment, all static resources to be packaged are identified to determine image resources and non-image resources. Specifically, file extensions or MIME types can be used to distinguish resources. For example, if the extension of a resource file is ".jpg" or ".png" or ".gi f", it is classified as an image resource; if the extension is ".html", ".css" or ".js", it is classified as a non-image resource.

[0039] In one embodiment, for non-picture resources, they can be compressed into an offline package. For example, all HTML, CSS and JavaScript files are merged and compressed to reduce the overall file size.

[0040] In one embodiment, for picture resources, the pictures are optimized, such as reducing the size, compressing the quality, etc., to reduce the file size without affecting the display effect. The optimized pictures are compressed to reduce the amount of data required for transmission, and a picture package is obtained. The picture resources can also be divided into multiple packages as needed, such as by theme, by category, or by page.

[0041] Furthermore, the packaging of the non-picture resources to obtain the offline package includes: obtaining the access frequency of each resource in the non-picture resources; dividing the non-picture resources based on the access frequency to obtain high-frequency access resources and low-frequency access resources; packaging the high-frequency access resources and the low-frequency access resources according to the preset high-frequency access resource package size and the low-frequency access resource package size to obtain at least one of the offline packages.

[0042] In one embodiment, the number and frequency of accesses to each non-image resource may be obtained through network analysis tools or server logs.

[0043] In one embodiment, non-image resources are divided into high-frequency access resources and low-frequency access resources according to access frequency. Specifically, a threshold is set according to actual conditions, and resources exceeding the threshold are divided into high-frequency access resources, and those not exceeding the threshold are divided into low-frequency access resources.

[0044] In one embodiment, frequently accessed resources are packaged into one or more offline packages according to a certain size, and infrequently accessed resources are packaged into one or more offline packages according to a certain size. Specifically, for frequently accessed resources, the size of the offline package can be reduced to improve resource loading efficiency, and for infrequently accessed resources, the size of the offline package can be increased to package as many resources as possible and reduce the number of offline packages.

[0045] In the above embodiment, non-image resources can be divided according to resource access frequency and packaged according to a preset resource package size, so that the offline package size of high-frequency resources can be reduced and the loading efficiency of offline packages can be improved.

[0046] S103: Based on a preset reference path, the picture package and the offline package are respectively sent to the client and the online server for storage, to obtain an online picture package and a local offline package.

[0047] In one embodiment, after the resource packaging is completed, the generated offline package and picture package need to be sent to the client and the online server respectively for storage.

[0048] In one embodiment, the client generally refers to the user's device. The offline package is sent to the client and directed to be stored in the local storage of the device, so that the user can access these resources even when there is no network connection.

[0049] In one embodiment, the picture package is sent to an online server, usually a server corresponding to a hybrid application.

[0050] In one embodiment, the reference path defines information such as the storage address and storage method of the picture package and the offline package. According to the reference path, the picture package and the offline package can be correctly stored to obtain the online picture package and the local offline package.

[0051] In one embodiment, before packaging H5 resources, the project code needs to be modified, including storage modification such as cookies: APP accesses local offline packages using the file protocol, but cookies do not support the file protocol. Therefore, the parameters previously stored in the project using cookies need to be replaced with three storage methods: local Storage, sessionStorage, and data storage methods provided by the APP. In addition, the parameters that need to be carried by cookies in the background are changed to be carried by the request header, and the relevant parameters are placed in the request header; location modification: APP accesses local offline packages using the file protocol, so it is impossible to know what the background service environment is that is accessed. Therefore, a new location needs to be encapsulated, and the corresponding environment information is encapsulated in the location. At runtime, the location is used to obtain the address of the current environment and other related information; picture reference modification: In the project, the picture reference is basically a relative address, but our solution is that the picture is online and other static resources are offline. In this way, if the picture and other resources are not together, the relative address cannot be used, but an absolute address is required: the style in the html tag The image reference written in the Cascading Style Sheet needs to be loaded through the request function, and the pub l icPath of the image should be configured as an absolute address (online address) when engineering the image packaging; Packaging transformation: a plug-in needs to be built. The function of the plug-in is to read the content packaged by webpack, and write the static resources except the images into a folder, and package it into the native APP and build it into the APP.

[0052] The above-mentioned embodiment provides a hybrid application H5 resource packaging method, device, computer equipment and storage medium, obtains the static resources to be packaged of the H5 page; when the static resources to be packaged include picture resources, the picture resources and non-picture resources in the resources to be packaged are packaged separately to obtain the offline package corresponding to the non-picture resources and the picture package corresponding to the picture resources; based on the preset reference path, the picture package and the offline package are sent to the client and the online server for storage respectively to obtain the online picture package and the local offline package. This application ensures the picture loading efficiency by processing the picture resources and non-picture resources in the static resources to be packaged separately, packaging the picture resources and storing them in the online server. At the same time, the divided picture resources are packaged and stored in the client, which reduces the size of the local offline package and improves the resource loading efficiency.

[0053] See also Figure 2 , Figure 2This is a schematic flow chart of a hybrid application H5 resource packaging method provided by an embodiment of the present application. The hybrid application H5 resource packaging method can be applied to a server to load offline packages or request images from an online server according to the type of resources requested by the user, thereby avoiding the situation where images and non-image resources are packaged in one offline package, which reduces the efficiency of resource loading due to the loading of a large number of images, and improves the resource loading efficiency.

[0054] like Figure 2 As shown, the H5 resource packaging method of the hybrid application specifically includes steps S201 to S202.

[0055] S201: upon receiving a target resource access request of a hybrid application, query whether there is a local offline package corresponding to the target resource and whether the target resource is a picture;

[0056] S202: When there is a local offline package corresponding to the target resource and the target resource is a non-image resource, load the local offline package.

[0057] In one embodiment, when the APP accesses a certain function page, it will use regular expressions to determine whether there is an offline package for this resource locally. If there is an offline package, the APP can determine whether this resource is a picture. If it is not a picture, it will read the local resource. If it is a picture, it will send a picture request to the online server and display a local placeholder (built into the APP). After the picture request comes back, it will be replaced with the picture (implemented by h5). In addition, the APP needs to pass the current environment information to the page. The page determines the http link through the obtained environment (location) information to send a request (picture / interface, etc.) to the server.

[0058] In one embodiment, when a user attempts to access a resource in an application (eg, opens a page or clicks a link), a resource access request is generated.

[0059] In one embodiment, when an access request for a target resource is received, it is checked whether there is a local offline package corresponding to the resource in the local storage (such as the file system of the device), and it is determined whether the resource requested by the user is a picture.

[0060] In one embodiment, if the requested resource is a non-image resource and there is a corresponding local offline package, the local offline package is loaded from the local storage, the target resource is read, and presented to the user. Specifically, the data in the local offline package is read and loaded through the local file system API or other suitable local storage access mechanism. For example, if it is an HTML, CSS or JavaScript file, these files can be read and parsed directly from the local storage space without waiting for a network request.

[0061] Furthermore, when receiving a target resource access request of a hybrid application, after querying whether there is a local offline package corresponding to the target resource and whether the target resource is a picture, it also includes: when the target resource is a picture, displaying a preset placeholder image and sending a picture request to the online server; when receiving the picture sent by the online server based on the picture request, replacing the placeholder image with the picture to display the picture.

[0062] In one embodiment, the placeholder image is a temporary image that is displayed before the real image is loaded to provide a smooth transition for the user experience. It can be a component of the application or a pre-defined image resource.

[0063] In one embodiment, when it is detected that the user is requesting an image resource, asynchronous loading of the image is performed, that is, a placeholder image is displayed first, and an image request is sent to the server. When the image sent by the online server is received, the placeholder image is replaced to display the image. This can avoid displaying a blank area during image loading.

[0064] Furthermore, when a target resource access request of a hybrid application is received, querying whether there is a local offline package corresponding to the target resource and whether the target resource is a picture includes: when a target resource access request of a hybrid application is received, obtaining an identifier of the target resource; matching in a storage space corresponding to the hybrid application based on a preset regular expression and the identifier to obtain a matching result; and determining whether there is a local offline package corresponding to the target resource in the storage space and whether the target resource is a picture based on the matching result.

[0065] In one embodiment, the identifier is a string that uniquely identifies a resource, and typically includes a file name, version number, or other information that can distinguish between different resources.

[0066] In one embodiment, when an access request is received, the request needs to be parsed to extract the resource identifier.

[0067] In one embodiment, a regular expression is a set of rules for matching string patterns, and can be used to identify a specific format or structure of a target resource.

[0068] In a specific embodiment, the storage space of the hybrid application is accessed, which may be a local file system, a database or a remote server. Each item in the storage space (such as a file, a database record, etc.) is traversed, and a regular expression is used to match the identifier to obtain a matching result.

[0069] In one embodiment, it is checked whether the matching result contains the local offline package corresponding to the target resource. If so, it can be determined that the target resource has a local offline package, and whether the resource is a picture is determined by a specific mark (such as a file extension) of the matching result.

[0070] In one embodiment, if the matching result indicates that the resource exists in the local storage and is determined to be a picture according to its identifier, a placeholder image is directly displayed and the picture is obtained from the online server. If the resource is not a picture, the resource is directly loaded from the local offline package.

[0071] In the above embodiment, offline packages are loaded or images are requested from the online server according to the type of resources requested by the user, thereby avoiding the situation where images and non-image resources are packaged in one offline package, which may reduce the efficiency of resource loading due to the loading of a large number of images, thereby improving the resource loading efficiency.

[0072] See also Figure 3 , Figure 3 This is a schematic flow chart of a method for packaging H5 resources for a hybrid application provided in an embodiment of the present application. The method for packaging H5 resources for a hybrid application can be applied to a server to display a placeholder image to a user before obtaining a requested image, thereby avoiding the appearance of a blank area and providing a smoother visual experience.

[0073] like Figure 3 As shown, the H5 resource packaging method of the hybrid application specifically includes steps S301 to S302.

[0074] S301: When the target resource is a picture, display a preset placeholder image, and obtain current service environment information of the hybrid application;

[0075] S302: construct the image request based on the current service environment information and the target resource, and send the image request to the online server.

[0076] In a specific embodiment, when loading an image, a preset placeholder image may be displayed first to avoid a blank or flashing screen during the image loading period. The placeholder image may be any image, such as an icon or logo related to the application, or a simple loading animation.

[0077] In one embodiment, the current service environment information of the hybrid application is obtained, including network status, device type, operating system version, etc. Such information can help determine the best image format and quality to improve loading speed and user experience.

[0078] In one embodiment, a picture request is constructed based on the current service environment information and the target resource. For example, the URL, format, quality and other relevant parameters of the picture are specified. If the device type is a mobile device, a smaller picture size and resolution can be selected to reduce loading time and traffic consumption.

[0079] In one embodiment, the constructed picture request is sent to an online server to obtain actual picture data. The online server can return the picture format and quality that best suits the current service environment according to the parameters in the request.

[0080] In one embodiment, when a picture is received, it is displayed in the application and the placeholder is hidden. If the picture request fails or times out, the placeholder can continue to be displayed and an error message or retry option can be provided.

[0081] In the above embodiment, before obtaining the requested image, a placeholder image is displayed to the user, thereby avoiding the appearance of blank areas and providing a smoother visual experience.

[0082] See also Figure 4 , Figure 4 The embodiment of the present application provides a schematic block diagram of an H5 resource packaging device for a hybrid application, and the H5 resource packaging device for a hybrid application is used to execute the aforementioned H5 resource packaging method for a hybrid application. The H5 resource packaging device for a hybrid application can be configured on a server.

[0083] like Figure 4 As shown, the H5 resource packaging device 400 of the hybrid application includes:

[0084] Resource acquisition module 401, used to acquire the static resources to be packaged of the H5 page;

[0085] The resource packaging module 402 is used to package the image resources and non-image resources in the resources to be packaged, respectively, when the static resources to be packaged include image resources, to obtain offline packages corresponding to the non-image resources and image packages corresponding to the image resources;

[0086] The offline package sending module 403 is used to send the picture package and the offline package to the client and the online server for storage based on a preset reference path, so as to obtain an online picture package and a local offline package.

[0087] Furthermore, the resource packaging module 402 includes:

[0088] A resource classification unit, configured to classify the static resources to be packaged when the static resources to be packaged include image resources, and obtain the non-image resources and the image resources;

[0089] The resource packaging unit is used to package the non-image resources and the image resources respectively to obtain the offline package and the image package.

[0090] Furthermore, the resource packaging unit includes:

[0091] An access frequency acquisition subunit, used to acquire the access frequency of each resource in the non-image resources;

[0092] A resource division subunit, configured to divide the non-image resources based on the access frequency to obtain high-frequency access resources and low-frequency access resources;

[0093] The resource packaging subunit is used to package the high-frequency access resources and the low-frequency access resources according to the preset high-frequency access resource package size and the low-frequency access resource package size to obtain at least one offline package.

[0094] Furthermore, the offline package sending module 403 further includes an offline package loading module, and the offline package loading module includes:

[0095] An offline package query unit, configured to query whether there is a local offline package corresponding to the target resource and whether the target resource is a picture when receiving a target resource access request of a hybrid application;

[0096] The offline package loading unit is used to load the local offline package when there is a local offline package corresponding to the target resource and the target resource is a non-image resource.

[0097] Furthermore, the offline package loading module further includes:

[0098] A picture request sending unit, configured to display a preset placeholder image and send a picture request to the online server when the target resource is a picture;

[0099] The picture replacing unit is used to replace the placeholder image with the picture when receiving the picture sent by the online server based on the picture request, so as to display the picture.

[0100] Furthermore, the picture request sending unit includes:

[0101] A service environment acquisition unit, configured to display a preset placeholder image when the target resource is a picture, and acquire current service environment information of the hybrid application;

[0102] The image request construction unit is used to construct the image request based on the current service environment information and the target resource, and send the image request to the online server.

[0103] Furthermore, the offline package query unit includes:

[0104] An identifier acquisition subunit, configured to acquire an identifier of a target resource upon receiving a target resource access request of a hybrid application;

[0105] A matching result obtaining subunit, used to perform matching in the storage space corresponding to the hybrid application based on a preset regular expression and the identifier to obtain a matching result;

[0106] The offline package existence judgment subunit is used to determine whether there is a local offline package corresponding to the target resource in the storage space and whether the target resource is a picture based on the matching result.

[0107] It should be noted that those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described device and each module can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0108] The above-mentioned device can be implemented in the form of a computer program. Figure 5 Runs on the computer device shown.

[0109] See also Figure 5 , Figure 5 1 is a schematic block diagram of a computer device provided in an embodiment of the present application. The computer device may be a server.

[0110] See also Figure 5 The computer device includes a processor, a memory and a network interface connected through a system bus, wherein the memory may include a non-volatile storage medium and an internal memory.

[0111] The non-volatile storage medium can store an operating system and a computer program. The computer program includes program instructions, and when the program instructions are executed, the processor can execute any H5 resource packaging method for hybrid applications.

[0112] The processor is used to provide computing and control capabilities and support the operation of the entire computer equipment.

[0113] The internal memory provides an environment for the operation of the computer program in the non-volatile storage medium. When the computer program is executed by the processor, the processor can execute any H5 resource packaging method for the hybrid application.

[0114] The network interface is used for network communication, such as sending assigned tasks, etc. Those skilled in the art will appreciate that Figure 5The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0115] It should be understood that the processor may be a central processing unit (CPU), and the processor may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0116] In one embodiment, the processor is used to run a computer program stored in the memory to implement the following steps:

[0117] Get the static resources to be packaged for the H5 page;

[0118] When the static resources to be packaged include picture resources, the picture resources and non-picture resources in the resources to be packaged are packaged separately to obtain offline packages corresponding to the non-picture resources and picture packages corresponding to the picture resources;

[0119] Based on a preset reference path, the picture package and the offline package are sent to the client and the online server respectively for storage, so as to obtain an online picture package and a local offline package.

[0120] In one embodiment, when the static resources to be packaged include picture resources, the processor packages the picture resources and non-picture resources in the resources to be packaged respectively, and obtains the offline package corresponding to the non-picture resource and the picture corresponding to the picture resource, and is used to implement:

[0121] When the static resources to be packaged include picture resources, classifying the static resources to be packaged to obtain the non-picture resources and the picture resources;

[0122] The non-picture resources and the picture resources are packaged respectively to obtain the offline package and the picture package.

[0123] In one embodiment, when the processor packages the non-image resource to obtain the offline package, it is used to implement:

[0124] Obtaining the access frequency of each resource in the non-image resources;

[0125] Dividing the non-image resources based on the access frequency to obtain high-frequency access resources and low-frequency access resources;

[0126] The high-frequency access resources and the low-frequency access resources are packaged according to the preset high-frequency access resource package size and the low-frequency access resource package size to obtain at least one offline package.

[0127] In one embodiment, after the processor implements sending the picture package and the offline package to the client and the online server for storage based on a preset reference path, and obtains the online picture package and the local offline package, it is further used to implement:

[0128] Upon receiving a target resource access request of a hybrid application, querying whether there is a local offline package corresponding to the target resource and whether the target resource is a picture;

[0129] When there is a local offline package corresponding to the target resource and the target resource is a non-image resource, the local offline package is loaded.

[0130] In one embodiment, after the processor implements querying whether there is a local offline package corresponding to the target resource and whether the target resource is a picture when receiving a target resource access request of a hybrid application, it is further configured to implement:

[0131] When the target resource is a picture, displaying a preset placeholder image and sending a picture request to the online server;

[0132] When receiving the picture sent by the online server based on the picture request, the placeholder image is replaced with the picture to display the picture.

[0133] In one embodiment, when the target resource is a picture, the processor displays a preset placeholder image and sends a picture request to the online server, and is used to implement:

[0134] When the target resource is a picture, display a preset placeholder image, and obtain current service environment information of the hybrid application;

[0135] Based on the current service environment information and the target resource, the image request is constructed and sent to the online server.

[0136] In one embodiment, when the processor receives a target resource access request of a hybrid application, it queries whether there is a local offline package corresponding to the target resource and whether the target resource is a picture, and is used to implement:

[0137] Upon receiving a target resource access request of the hybrid application, obtaining an identifier of the target resource;

[0138] Based on a preset regular expression and the identifier, matching is performed in the storage space corresponding to the hybrid application to obtain a matching result;

[0139] Based on the matching result, it is determined whether there is a local offline package corresponding to the target resource in the storage space and whether the target resource is a picture.

[0140] A computer-readable storage medium is also provided in an embodiment of the present application, wherein the computer-readable storage medium stores a computer program, wherein the computer program includes program instructions, and the processor executes the program instructions to implement any H5 resource packaging method for a hybrid application provided in an embodiment of the present application.

[0141] The computer-readable storage medium may be an internal storage unit of the computer device described in the foregoing embodiment, such as a hard disk or memory of the computer device. The computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, a smart memory card (Smart Medi a Card, SMC), a secure digital (Secure Digital, SD) card, a flash memory card (Flash Card), etc., equipped on the computer device.

[0142] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in the present application, and these modifications or replacements should be included in the protection scope of the present application. Therefore, the protection scope of the present application shall be based on the protection scope of the claims.

Claims

1. A method for packaging H5 resources for hybrid applications, characterized in that: include: Get the static resources to be packaged for the H5 page; When the static resources to be packaged include picture resources, the picture resources and non-picture resources in the resources to be packaged are packaged separately to obtain offline packages corresponding to the non-picture resources and picture packages corresponding to the picture resources; Based on a preset reference path, the picture package and the offline package are sent to the client and the online server respectively for storage, so as to obtain an online picture package and a local offline package.

2. The H5 resource packaging method for hybrid applications according to claim 1 is characterized in that: When the static resources to be packaged include picture resources, the picture resources and non-picture resources in the resources to be packaged are packaged separately to obtain an offline package corresponding to the non-picture resource and a picture package corresponding to the picture resource, including: When the static resources to be packaged include picture resources, classifying the static resources to be packaged to obtain the non-picture resources and the picture resources; The non-picture resources and the picture resources are packaged respectively to obtain the offline package and the picture package.

3. The H5 resource packaging method for hybrid applications according to claim 2 is characterized in that: The step of packaging the non-image resources to obtain the offline package includes: Obtaining the access frequency of each resource in the non-image resources; Dividing the non-image resources based on the access frequency to obtain high-frequency access resources and low-frequency access resources; The high-frequency access resources and the low-frequency access resources are packaged according to the preset high-frequency access resource package size and the low-frequency access resource package size to obtain at least one offline package.

4. The H5 resource packaging method for hybrid applications according to claim 1 is characterized in that: The method further includes sending the picture package and the offline package to the client and the online server for storage based on the preset reference path, and obtaining the online picture package and the local offline package. Upon receiving a target resource access request of a hybrid application, querying whether there is a local offline package corresponding to the target resource and whether the target resource is a picture; When there is a local offline package corresponding to the target resource and the target resource is a non-image resource, the local offline package is loaded.

5. The H5 resource packaging method for hybrid applications according to claim 4 is characterized in that: When receiving a target resource access request of a hybrid application, after querying whether there is a local offline package corresponding to the target resource and whether the target resource is a picture, the method further includes: When the target resource is a picture, displaying a preset placeholder image and sending a picture request to the online server; When receiving the picture sent by the online server based on the picture request, the placeholder image is replaced with the picture to display the picture.

6. The H5 resource packaging method for hybrid applications according to claim 5 is characterized in that: When the target resource is a picture, displaying a preset placeholder image and sending a picture request to the online server includes: When the target resource is a picture, display a preset placeholder image, and obtain current service environment information of the hybrid application; Based on the current service environment information and the target resource, the image request is constructed and sent to the online server.

7. The H5 resource packaging method for hybrid applications according to any one of claims 4 to 6, characterized in that: When receiving a target resource access request of a hybrid application, querying whether there is a local offline package corresponding to the target resource and whether the target resource is a picture includes: Upon receiving a target resource access request of the hybrid application, obtaining an identifier of the target resource; Based on a preset regular expression and the identifier, matching is performed in the storage space corresponding to the hybrid application to obtain a matching result; Based on the matching result, it is determined whether there is a local offline package corresponding to the target resource in the storage space and whether the target resource is a picture.

8. A hybrid application H5 resource packaging device, characterized in that: include: Resource acquisition module, used to obtain the static resources to be packaged for the H5 page; A resource packaging module, used for packaging the image resources and non-image resources in the resources to be packaged respectively when the static resources to be packaged include image resources, and obtaining an offline package corresponding to the non-image resource and an image package corresponding to the image resource; The offline package sending module is used to send the picture package and the offline package to the client and the online server for storage based on a preset reference path, so as to obtain an online picture package and a local offline package.

9. A computer device, characterized in that: The computer device includes a memory and a processor; The memory is used to store computer programs; The processor is used to execute the computer program and implement the H5 resource packaging method for the hybrid application according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor implements the H5 resource packaging method for a hybrid application as described in any one of claims 1 to 7.

Images