CN108520059A

CN108520059A - 客户端h5页面的加载方法、系统、计算机设备和存储介质

Info

Publication number: CN108520059A
Application number: CN201810311057.1A
Authority: CN
Inventors: 蔡立勋; 舒栋; 张敏聪; 林东宇; 魏睿
Original assignee: CENTURY DRAGON INFORMATION NETWORK Co Ltd
Current assignee: CENTURY DRAGON INFORMATION NETWORK Co Ltd
Priority date: 2018-04-09
Filing date: 2018-04-09
Publication date: 2018-09-11

Abstract

本申请涉及一种客户端H5页面的加载方法、系统、计算机设备和存储介质。所述方法包括：接收H5页面加载指令，根据H5页面加载指令获取H5页面的资源外链，响应H5页面加载指令在客户端中加载H5页面时，根据预先设置的外链拦截规则，判断H5页面的加载资源是否在客户端的本地目录中，若是，将加载资源的资源外链替换为本地目录的地址，从本地目录中获取加载资源；从本地目录中拉取加载资源，减少客户端H5页面加载流量的消耗，另外，从本地目录加载也进一步提升的客户端中H5页面的加载速度，即使在弱网或者无网的情况下，也能先加载客户端中H5页面的核心部分。

Description

客户端H5页面的加载方法、系统、计算机设备和存储介质

技术领域

本申请涉及互联网技术领域，特别是涉及一种客户端H5页面的加载方法、系统、计算机设备和存储介质。

背景技术

Native APP(原生应用)需要安卓及苹果平台两种不同语言的开发人员实现，不仅开发成本及周期长，而且用户升级成本高。随着行业及技术的发展，企业为了追求开发成本、产品质量、用户体验和开发效率，前端H5APP(Hyper Text Markup Language5.0Application，H5应用)和客户端Native APP融合开发的模式是必然的趋势。同时也因为H5开发的诸多优势(跨平台、跨终端、热更新、易传播等)使得客户端中H5资源占比率逐步增加。现在客户端H5页面的呈现方法中，需要从服务端拉取代码资源，再进行数据请求，最后将界面呈现给用户，整个过程不仅耗流量而且响应时间较长。

发明内容

基于此，有必要针对上述技术问题，提供一种能够解决客户端页面加载时间长的客户端H5页面的加载方法、系统、计算机设备和存储介质。

一种客户端H5页面的加载方法，所述方法包括：

接收H5页面加载指令，根据所述H5页面加载指令获取H5页面的资源外链；

响应所述H5页面加载指令在客户端中加载所述H5页面时，根据预先设置的外链拦截规则，判断所述H5页面的加载资源是否在客户端的本地目录中；

若是，将所述加载资源的所述资源外链替换为所述本地目录的地址，从所述本地目录中获取所述加载资源。

在其中一个实施例中，还包括：若否，通过所述资源外链，向服务器请求下载所述加载资源。

在其中一个实施例中，还包括：向服务器发送H5页面的更新请求，接收服务器根据所述更新请求反馈的H5页面版本信息；获取客户端H5页面的当前H5页面版本信息，若当前H5页面版本信息与服务器反馈的H5页面版本信息不一致，从服务器中下载所述本地目录中加载资源对应的最新加载资源，以此更新所述本地目录。

在其中一个实施例中，还包括：访问本地目录中加载资源对应的资源外链，下载所述最新加载资源。

在其中一个实施例中，还包括：解压所述最新加载资源，获取解压后每个文件的MD5信息；根据所述MD5信息验证所述最新加载资源的合法性。

在其中一个实施例中，还包括：保存更新时间信息；获取预先设置的自动更新时间间隔，在当前时间与所述更新时间信息的差值达到所述自动更新时间间隔时，触发向服务器发送所述更新请求。

在其中一个实施例中，还包括：获取所述H5页面的加载资源的资源外链；将所述资源外链中的KEY值与本地目录中的键值进行匹配，若匹配一致，则判断所述H5页面的加载资源在客户端的本地目录中；若匹配不一致，则判断所述H5页面的加载资源不在客户端的本地目录中。

一种客户端H5页面的加载系统，所述系统包括：

触发模块，用于接收H5页面加载指令，根据所述H5页面加载指令获取H5页面的资源外链；

加载模块，用于响应所述H5页面加载指令在客户端中加载所述H5页面时，根据预先设置的外链拦截规则，判断所述H5页面的加载资源是否在客户端的本地目录中；

拦截模块，用于若是，将所述加载资源的所述资源外链替换为所述本地目录的地址，从所述本地目录中获取所述加载资源。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

上述客户端H5页面的加载方法、系统、计算机设备和存储介质，通过接收H5页面加载指令，获得H5页面的资源外链，然后在客户端中加载H5页面时，通过外链拦截规则，判断本地目录中是否存在资源外链中的加载资源，如果有，将资源外链替换为本地目录的地址，从而从本地目录中获取加载资源，本发明实施例，通过本地目录加载进一步提升的客户端H5页面的加载速度，即使在弱网或者无网的情况下，也能先加载客户端H5页面的核心部分。

附图说明

图1为一个实施例中客户端H5页面的加载方法的应用环境图；

图2为一个实施例中客户端H5页面的加载方法的流程示意图；

图3为一个实施例中检测H5应用的更新状态步骤的流程示意图；

图4为另一个实施例中资源本地化步骤的流程示意图；

图5为一个实施例中客户端H5页面的加载系统的结构框图；

图6为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的客户端H5页面的加载方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104通过网络进行通信。终端102中安装有基于H5应用以及原生应用开发的客户端，在客户端中打开H5应用页面，通过外链向服务器104请求下载加载资源，通过设置的外链拦截规则，判断加载资源是否在本地目录中，通过外链拦截替换的方式，直接从终端102的本地目录中加载该加载资源，在加载页面时，从本地目录中拉取加载所需的资源，从而提高页面加载的速度。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2所示，提供了一种客户端H5页面的加载方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：

步骤202，接收H5页面加载指令，根据所述H5页面加载指令获取H5页面的资源外链。

其中，H5页面加载指令可以是用户打开对应H5应用时生成的，由于H5应用的资源需要从线上获取，因此，在触发打开H5应用时，对应可以获取H5页面的资源外链。

步骤204，响应所述H5页面加载指令在客户端中加载所述H5页面时，根据预先设置的外链拦截规则，判断所述H5页面的加载资源是否在客户端的本地目录中。

其中，外链拦截规则可以根据需求设置，外链拦截规则的作用是判断加载资源是否在本地目录中，从而保证在加载H5页面时可以从而本地目录中调取加载资源。

步骤206，若是，将所述加载资源的所述资源外链替换为所述本地目录的地址，从所述本地目录中获取所述加载资源。

其中，替换将原资源外链替换为本地目录的地址，从而在客户端中加载H5页面时，可以提高H5页面的加载速度。

上述客户端H5页面的加载方法中，过接收H5页面加载指令，获得H5页面的资源外链，然后在客户端中加载H5页面时，通过外链拦截规则，判断本地目录中是否存在资源外链中的加载资源，如果有，将资源外链替换为本地目录的地址，从而从本地目录中获取加载资源，本发明实施例，通过本地目录加载进一步提升的客户端H5页面的加载速度，即使在弱网或者无网的情况下，也能先加载客户端H5页面的核心部分。

在一实施例中，如果H5页面的加载资源不在本地目录中，那么需要从服务器中获取加载资源，具体的，可以通过资源外链，向服务器请求下载加载资源。

在另一实施例中，可以通过WebViewClient的shouldInterceptRequest指令，使客户端将网络流替换为对应的本地流，网络流指的是通过外链下载的资源，而本地流指的是本地目录中存储的资源。具体实现上，代码如下：shouldInterceptRequest(WebView view,WebResourceRequest request)，在判断所述H5页面的加载资源在客户端的本地目录中时，返回结果为true，根据request所指向的地址获取本地资源，判断所述H5页面的加载资源不在客户端的本地目录中是，返回结果为false，则根据WebView自动获取线上资源。

在一实施例中，可以通过获取H5页面的加载资源的资源外链，将所资源外链中的KEY值与本地目录中的键值进行匹配，若匹配一致，则判断H5页面的加载资源在客户端的本地目录中；若匹配不一致，则判断H5页面的加载资源不在客户端的本地目录中。

本实施例，通过本地目录的键值与资源外链的KEY值匹配的方式，设置相应的外链拦截规则，从而在H5页面加载时，无需人为的对资源进行划分，从而降低H5页面制作的成本。

在一实施例中，如果所述外链中的KEY值与本地目录中的键值匹配一致，则说明manifest的sdk_url_mapping中已经存在本地资源，那么通过webview loadUrl()函数与shouldInterceptRequest(WebView view,WebResourceRequest request)指令拦截网络流，将在线资源替换成本地资源，以加快客户端页面的加载速度。

一般而言，对于新上线的H5应用，可能本地目录中没有已下载的本地资源，那么可以通过更新的方式获取本地资源。

在一实施例中，如图3所示，提供一种客户端的本地目录更新步骤的方法，在该方法中，涉及到本地目录的更新，具体可以包括以下步骤：

步骤302，向服务器发送H5页面的更新请求，接收服务器根据所述更新请求反馈的H5页面版本信息。

步骤304，获取客户端H5页面的当前H5页面版本信息，判断当前H5页面版本信息与服务器反馈的H5页面版本信息是否一致。

步骤306，若否，从服务器中下载所述本地目录中加载资源对应的最新加载资源，以此更新所述本地目录。

在本实施例中，开发者在服务器中提供最新的H5应用版本，在客户端中，通过向服务器发送更新请求，具体代码可以如下：

其中，checkUpdateResource(context,url,appId,resourceVersion)指的是请求客户端目录，统一资源定位符，APPID，以及资源版本。通过判断"result"的状态，判断是否有更新，具体的，若当前页面版本信息与客户端信息中的页面版本信息不一致，则"result"的状态为1，表示需要下载资源包，若当前页面版本信息与客户端信息中的页面版本信息一致，则"result"的状态为0，表示无需要下载资源包。

本实施例中，如果本地目录中的加载资源停留在旧版本，那么在打开新版本的H5应用时，可能导致加载错误，因此，可以设置更新本地目录的逻辑，通过向服务器发送更新请求从而判断是否存在更新。

在一实施例中，在存在新版本的H5应用更新时，本地目录中的加载资源可能失效，因此，可以访问本地目录中加载资源对应的外链，该外链可以从服务器反馈的信息中获取，根据外链就可以下载最新加载资源。在上一实施例中，"resourceUrl"的内容就是资源包外链，通过访问该"resourceUrl"，就可以下载对应的最新加载资源。

在一实施例中，在更新所述本地目录之前，还需要验证最新加载资源文件的合法性，通常，对于压缩包文件，可以通过MD5(Message-Digest Algorithm 5，信息-摘要算法5)来验证最新加载资源的合法性，具体的，上述反馈更新请求中包括"md5":"T/sZsOoIMNLvPxhqF/wBJFuakAh"，在解压最新加载资源的压缩包之后，可以得到每个解压文件的MD5，然后通过MD5来验证每个解压文件的合法性，如果不合法，则该文件是无效的，不能根据当前资源包对客户端的本地目录进行更新，如果合法，才可以进行下一步的客户端的本地目录的更新操作。

在一实施例中，在更新所述本地目录之后，还需要保存更新时间信息，之后，还要获取预先设置的自动更新时间间隔，在当前时间与所述更新时间信息的差值达到所述自动更新时间间隔时，触发向服务器发送更新请求。

本实施例中，可以保存每次更新完之后的时间，然后通过设置固定的自动更新时间，完成自动更新，以确保本地目录中的加载资源都是最新的。

在一实施例中，如图4所示，提供一种通过更新实现客户端H5页面加载资源更新的具体流程，首先引入更新状态的概念，本实施例中的更新状态和上文中"result"相同，在本地保存有当前客户端的更新状态，在向服务器发送更新请求时，客户端本地保存的更新状态和服务器中的更新状态保持一致。本实施例可以在更新出错时，客户端会立即发送再次更新请求，直到更新完成，服务器的更新状态"result"：0，客户端停止请求更新，以此提高更新的效率。

另外，在本地目录中加载资源更新的过程中，如若检测到加载资源的资源包损坏、资源包不合法等，都将立即清除无效数据，重新开始更新过程，在加载资源的资源包下载完毕以及客户端更新完毕后，还需要记录更新时间信息以及保存更新状态，更新完毕之后，更新状态为等待更新，为了提高资源本地化的效率，可以设置自动更新时间间隔，以上次更新的更新时间信息为参照，自动更新时间间隔之后，自动请求更新。

在一实施例中，解压加载资源的资源包，可以得到内置文件manifest.json，例如：

可以通过指令parseJsonObjectByName(manifestJson,"sdk_source_md5")获取每个文件的加密MD5，指令verifyEveryFile(serviceFileMd5Map,unZipPath)对所有文件进行合法性校验，成功后保存版本，md5，mapping等信息。

在一实施例中，更新完毕后，还需要删除旧版本的资源包。

应该理解的是，虽然图2-4的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2-4中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图5所示，提供了一种客户端H5页面的加载系统，包括：触发模块402、加载模块404和拦截模块406，其中：

触发模块402，用于接收H5页面加载指令，根据所述H5页面加载指令获取H5页面的资源外链。

加载模块404，用于响应所述H5页面加载指令在客户端中加载所述H5页面时，根据预先设置的外链拦截规则，判断所述H5页面的加载资源是否在客户端的本地目录中。

拦截模块406，用于若是，将所述加载资源的所述资源外链替换为所述本地目录的地址，从所述本地目录中获取所述加载资源。

上述客户端H5页面的加载系统，通过触发模块402接收H5页面加载指令，获得H5页面的资源外链，然后在客户端中加载H5页面时，加载模块404通过外链拦截规则，判断本地目录中是否存在资源外链中的加载资源，如果有，拦截模块406将资源外链替换为本地目录的地址，从而从本地目录中获取加载资源，本发明实施例，通过本地目录加载进一步提升的客户端H5页面的加载速度，即使在弱网或者无网的情况下，也能先加载客户端H5页面的核心部分。

在一实施例中，加载模块404还用于若否，通过所述资源外链，向服务器请求下载所述加载资源。

在一实施例中，还包括更新请求模块，更新请求模块用于向服务器发送H5页面的更新请求，接收服务器根据所述更新请求反馈的H5页面版本信息；

获取客户端H5页面的当前H5页面版本信息，若当前H5页面版本信息与服务器反馈的H5页面版本信息不一致，从服务器中下载所述本地目录中加载资源对应的最新加载资源，以此更新所述本地目录。

在一实施例中，更新模块还用于访问本地目录中加载资源对应的外链，下载所述最新加载资源。

在一实施例中，还包括验证模块，用于解压所述最新加载资源，获取解压后每个文件的MD5信息；根据所述MD5信息验证所述最新加载资源的合法性。

在一实施例中，自动更新设置模块，用于保存更新时间信息；获取预先设置的自动更新时间间隔，在当前时间与所述更新时间信息的差值达到所述自动更新时间间隔时，触发向服务器发送所述更新请求。

在一实施例中，加载模块404还用于获取所述H5页面的加载资源的资源外链；将所述资源外链中的KEY值与本地目录中的键值进行匹配，若匹配一致，则判断所述H5页面的加载资源在客户端的本地目录中；若匹配不一致，则判断所述H5页面的加载资源不在客户端的本地目录中。

在一实施例中，还包括：删除模块，用于删除旧版本的资源包。

关于客户端H5页面的加载系统的具体限定可以参见上文中对于客户端H5页面的加载方法的限定，在此不再赘述。上述客户端H5页面的加载系统中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储客户端的数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种客户端H5页面的加载方法。

本领域技术人员可以理解，图6中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

若否，通过所述资源外链，向服务器请求下载所述加载资源。

向服务器发送H5页面的更新请求，接收服务器根据所述更新请求反馈的H5页面版本信息；获取客户端H5页面的当前H5页面版本信息，若当前H5页面版本信息与服务器反馈的H5页面版本信息不一致，从服务器中下载所述本地目录中加载资源对应的最新加载资源，以此更新所述本地目录。

访问本地目录中加载资源对应的外链，下载所述最新加载资源。

解压所述最新加载资源，获取解压后每个文件的MD5信息；根据所述MD5信息验证所述最新加载资源的合法性。

保存更新时间信息；获取预先设置的自动更新时间间隔，在当前时间与所述更新时间信息的差值达到所述自动更新时间间隔时，触发向服务器发送所述更新请求。

获取所述H5页面的加载资源的资源外链；将所述资源外链中的KEY值与本地目录中的键值进行匹配，若匹配一致，则判断所述H5页面的加载资源在客户端的本地目录中；若匹配不一致，则判断所述H5页面的加载资源不在客户端的本地目录中。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims

1.一种客户端H5页面的加载方法，其特征在于，所述方法包括：

2.根据权利要求1所述的客户端H5页面的加载方法，其特征在于，所述判断所述H5页面的加载资源是否在本地目录中的步骤，还包括：

3.根据权利要求1所述的客户端H5页面的加载方法，其特征在于，还包括：

向服务器发送H5页面的更新请求，接收服务器根据所述更新请求反馈的H5页面版本信息；

4.根据权利要求3所述的客户端H5页面的加载方法，其特征在于，所述从服务器中下载所述本地目录中加载资源对应的最新加载资源的步骤，包括：

5.根据权利要求3或4所述的客户端H5页面的加载方法，其特征在于，在更新所述本地目录之前，还包括：

6.根据权利要求3或4所述的客户端H5页面的加载方法，其特征在于，在更新所述本地目录之后，还包括：

保存更新时间信息；

获取预先设置的自动更新时间间隔，在当前时间与所述更新时间信息的差值达到所述自动更新时间间隔时，触发向服务器发送所述更新请求。

7.根据权利要求1至4任一项所述的客户端H5页面的加载方法，其特征在于，所述根据预先设置的外链拦截规则，判断所述H5页面的加载资源是否在客户端的本地目录中的步骤，包括：

8.一种客户端H5页面的加载系统，其特征在于，所述系统包括：

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的客户端H5页面的加载方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的客户端H5页面的加载方法的步骤。