CN112988418A - Web端与移动端的通信方法、移动终端及系统 - Google Patents

Abstract

本发明涉及一种Web端与移动端的通信方法、移动终端及系统，属于通信技术领域，移动端集成H5容器SDK和Native端能力SDK；Web端集成h5容器的js库；方法包括：移动端基于WebView实现的H5容器的全生命周期管理方法，注册Android或iOS定义的JavaScriptInterface接口；基于h5_sdk.js的Web页面，通过h5_sdk与移动端定义的JavaScriptInterface接口进行通讯，以使移动端在JavaScriptInterface接口中调用Native端能力方法，获取执行结果；基于h5_sdk的Web页面接收执行结果，并根据业务需求处理执行结果，获取最终要显示的内容，并显示最终要显示的内容。本发明解决Web端与移动端混合开发中开发周期和开发成本较大的技术问题。

Description

Web端与移动端的通信方法、移动终端及系统

技术领域

本发明属于通信技术领域，具体涉及一种Web端与移动端的通信方法、移动终端及系统。

背景技术

当前移动端浏览器提供的功能有限，并不能满足Web端调用移动端硬件功能的全部需求。纯Web应用不能通过浏览器实现与Native应用相同的用户体验。但是Web应用的灵活开发、及时部署等特点又是业务所需要的。基于此种需求场景，便有了移动端与Web端混合开发模式，如何实现Web应用与Native应用双端通信、给用户无感切换的用户体验也成为一个需要解决的问题.

目前已存在一些JavaScript Bridge(桥梁)相关SDK，如JSBridge， DSBridge，WebViewJavascriptBridge等开源项目。其中，JSBridge提供安全便利的调用方式，支持Java代码调用js,也支持js代码调用Java。在Java 和JavaScript直接建立通信桥梁；WebViewJavascriptBridge是一个iOS/OSX 的桥，支持Objective-C调用JavaScript，也支持JavaScript调用 Objective-C，可应用于WKWebviews/UIWebViews/WebViews组件；DSBridge 是一个跨平台的JavaScript桥。支持Android和iOS两个手机平台的Native 调用JavaScript、JavaScript调用Native代码。

这些项目能解决web端与移动端通信问题，但是，仍然需要开发人员自己实现相关Native组件功能，然后基于JavaScript Bridge定义通信协议、实现跨端调用功能，开发周期和开发成本较大。

发明内容

本发明提供了一种Web端与移动端的通信方法、移动终端及系统，以解决 Web端与移动端混合开发中开发周期和开发成本较大的技术问题。

本发明提供的技术方案如下：

一方面，一种Web端与移动端的通信方法，应用于所述Web端；所述 Web端与所述移动端设置有相对应的软件开发工具包；所述移动端集成H5容器SDK和Native端能力SDK；所述Web端集成h5_sdk.js库；

所述方法包括：

移动端基于WebView实现的H5容器的全生命周期管理方法，注册 Android或iOS定义的JavaScriptInterface接口；

基于h5_sdk.js的Web页面，通过h5_sdk与移动端定义的 JavaScriptInterface接口进行通讯，以使移动端在JavaScriptInterface接口中调用Native端能力方法，获取执行结果；

基于h5_sdk的Web页面接收所述执行结果，并根据业务需求处理所述执行结果，获取最终要显示的内容，并显示所述最终要显示的内容。

可选的，还包括：通过H5容器的WebView加载Web页面；所述通过H5 容器的WebView加载Web页面，包括：

基于自定义WebView调用loadUrl方法加载Web页面资源，包括本地资源和远程资源。

可选的，所述基于h5_sdk.js的Web页面，通过h5_sdk与移动端定义的JavaScriptInterface接口进行通讯，包括：

通过Web页面触发事件，通过h5_sdk.js对Android或iOS定义的JavaScriptInterface接口发起调用。

可选的，所述移动端的所述H5容器设置有SupportAPI和CustomAPI，所述SupportAPI调用Native端能力的相关功能，所述CustomAPI调用用户自定义JavaScriptInterface接口，以实现端能力的扩展；

所述基于h5_sdk.js的Web页面，通过h5_sdk与移动端定义的JavaScriptInterface接口进行通讯，以使移动端在JavaScriptInterface接口中调用Native端能力方法，获取执行结果，包括：

H5容器启动后，通过SupportApi加载Native端能力SDK，以使 SupportApi通过Native端能力SDK的AbilityManager启动加载常用组件；通过CustomAPI加载自定义端能力，用户可以通过自定义端能力管理器启动加载扩展端能力；

基于Web页面的交互操作，通过h5_sdk发起JavaScript调用请求；

通过h5_sdk将调用Native组件的请求发送到WebView，以使移动端调用 H5容器SupportApi，通过端能力管理器调用对应的组件功能，使得组件执行相关操作，得到执行结果。

可选的，所述通过h5_sdk将调用Native组件的请求发送到WebView，通过端能力管理器调用对应的组件功能，使得组件执行相关操作，得到执行结果，包括：

通过所述SupportApi调用端能力管理器，以使所述端能力管理器调用对应的功能组件，以使所述功能组件执行对应的操作，得到执行结果。

可选的，所述基于h5_sdk的Web页面接收所述执行结果，并根据业务需求处理所述执行结果，获取最终要显示的内容，并显示所述最终要显示的内容，包括：

基于所述端能力管理器将所述执行结果发送至H5容器，以使所述H5容器将所述执行结果通过JavaScriptInterface回调接口返回给WebView；

基于WebView将JavaScriptInterface回调接口返回的执行结果转成 JavaScript支持的内容；

基于H5_sdk将所述JavaScript支持的内容传递给Web页面的JavaScript 程序，程序处理完成数据后，将结果显示在Web页面。

又一方面，一种Web端与移动端的通信方法，应用于所述移动端；所述 Web端与所述移动端设置有相对应的软件开发工具包；所述移动端集成H5容器和Native端能力调用；所述Web端集成H5容器SDK；

所述方法包括：

基于WebView的H5容器全生命周期管理相关方法，Native端能力相关接口及方法，注册Android或iOS定义的JavaScriptInterface接口，以及， WebView加载Web页面，以使Web页面加载h5_sdk.js库；

基于所述移动端的终端页面调用所述Android或iOS定义的JavaScriptInterface接口，以将消息发送给Web端的h5_sdk；

基于h5_sdk.js的api接口调用Web端定义的JavaScript方法，并执行，获取执行结果；

基于h5_sdk将执行结果发送到H5容器；

基于H5容器的Android或iOS定义的JavaScriptInterface接口，将执行结果返回给WebView所属页面。

可选的，还包括：

管理员将开发完成的Web APP打包并上传至应用分发服务器；

在移动端APP启动后，初始化并加载H5容器，H5容器读取配置文件，得到分发服务器地址；

通过H5容器至分发服务器检查版本更新，并获取最新版本信息；

基于H5容器和所述最新版本信息，安装和更新最新版本，并将已安装版本加入本地Web APP版本管理中；

移动端APP启动Web APP，发起请求打开页面；

通过H5容器拦截请求，加载本地离线Web APP资源；

通过H5容器返回离线资源给APP的WebView页面，以使WebView页面展示资源。

又一方面，一种移动终端，包括：处理器，以及与所述处理器相连接的存储器；所述存储器用于存储计算机程序，所述计算机程序至少用于执行上述任一项所述的Web端与移动端的通信方法；

所述处理器用于调用并执行所述存储器中的所述计算机程序。

又一方面，一种Web端与移动端的通信系统，包括：Web端与上述所述的移动端。

本发明的有益效果为：

本发明实施例提供的Web端与移动端的通信方法、移动终端及系统，所述移动端集成H5容器SDK和Native端能力SDK；所述Web端集成h5_sdk.js 库；方法包括：初始化H5容器，加载WebView，以注册以Android或iOS定义的JavaScriptInterface接口，以及，WebView加载Web页面，以使Web页面加载h5_sdk.js库；基于Web页面调用h5_sdk.js的api接口，以通过h5_sdk与Native定义的接口进行通讯，以使移动端在以Android或iOS定义的JavaScriptInterface接口中调用Native方法，获取执行结果；基于 h5_sdk.js接收执行结果，并根据业务需求处理执行结果，获取最终显示内容，并显示所述最终显示内容。本发明解决Web端与移动端混合开发中开发周期和开发成本较大的技术问题。简化了Web端与移动端互相调用的方式，可快速实现Web端与移动端的互相通信；扩展了Web应用可调用的功能，让Web应用有更广的产品开发空间；组件管理及调用机制支持可扩展组件及可扩展JavaScript API，提高了开发效率；离线运行环境为常用Web应用节约网络访问资源，进一步提升了运行效率和性能。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种Web端与移动端的通信方法流程示意图；

图2为本发明实施例提供的一种移动端H5容器结构示意图；

图3为本发明实施例提供的一种Web端H5容器SDK结构示意图；

图4为本发明实施例提供的一种Web端调用移动端的通信方法时序图；

图5为本发明实施例提供的一种Web端调用Native端能力的时序图；

图6为本发明实施例提供的一种Web端与移动端的通信方法流程示意图；

图7为本发明实施例提供的一种移动端调用Web端的通信方法时序图；

图8为本发明实施例提供的一种Web App离线功能的方法时序图；

图9为本发明实施例提供的一种移动终端结构示意图；

图10为本发明实施例提供的一种Web端与移动端的通信系统结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。

为了至少解决本发明中提出的技术问题，本发明实施例提供一种Web端与移动端的通信方法。

图1为本发明实施例提供的一种Web端与移动端的通信方法流程示意图， Web端与移动端设置有相对应的软件开发工具包；移动端集成H5容器SDK和 Native端能力SDK；Web端集成h5_sdk.js库。

例如，本发明实施例中，可以在web端和移动端两端均设置对应的SDK开发套件，用于两端之间的通信交互。其中，Web端需集成h5_sdk，在SDK中提供对移动端同步/异步调用的方法，移动端SDK也有与web端SDK相对应的方法。移动端集成tq_h5containter_sdk(H5容器),tq_ability_sdk(Native 端能力)，以及按需集成常用组件SDK。

为了对移动端和Web端的H5容器进行详细说明，本发明分别对移动端H5 容器结构和Web端H5容器SDK结构进行说明。

图2为本发明实施例提供的一种移动端H5容器结构示意图，图3为本发明实施例提供的一种Web端H5容器SDK结构示意图。

参阅图2，以手机端为例，对移动端H5容器结构进行说明，还可以设置平板、电脑等终端为本申请的终端，此处不做具体限定，手机端仅仅为列举。

H5容器通过H5ContainerManager管理容器的生命周期、配置管理(H5ContainerConfig)、应用分发管理(DispatchServer)、Web应用交互 (Bridge)、以及升级检查(AppCheckCallback)和Web应用下载 (AppDownloadCallback)回调功能。相比较于JavaScript的Bridge，本发明实施例中的手机端H5容器至少扩展了SupportAPI和CustomAPI。通过 SupportAPI可以调用Native端能力的相关功能，如常用组件。通过CustomAPI可以调用用户自定义JavaScript接口方法，可实现移动端功能的灵活扩展。AbilityManager是Native端能力进行管理常用组件库的管理类。 SupportAPI通过调用AbilityManager进行间接调用常用组件库中的相关功能组件。

常用组件：Web端通过h5_sdk与移动端Bridge进行通讯，移动端基于 Bridge扩展了移动端支持的组件调用JSAPI(即SupportApi)。SupportApi 通过AbilityManager管理移动端提供的组件，如：分享组件、文件选择器、拍照组件、视频组件、录音组件等。各常用组件完成操作后，会通过 SupportAPI返回操作结果给Web端，web端再进行后续操作的处理(如：上传照片、视频、返回分享结果等)。

自定义组件：除了Native端能力提供的常用组件功能外，开发者还可以基于Bridge扩展自定义JSAPI(CustomApi)和自定义组件 (CustomComponent)来实现相关业务功能，调用原理与常用组件类似。如果自定义组件比较少，可通过CustomApi直接调用自定义组件。如果自定义组件较多，建议自定义类似AbilityManager功能的管理器，用于自定义组件管理。

自定义JSAPI：自定义JSAPI与WebView添加JS接口相同，在方法中增加@JavaScriptInterface注解即可定义为JSAPI。然后将JSAPI对象通过addJavaScriptObject方法注册到H5ContainerWebView中即可。

H5容器管理器：H5容器管理包含H5容器生命周期管理、配置管理、应用更新下载管理、以及升级回调接口、下载回调接口。通过配置管理可以配置 H5容器相关配置项。包括升级回调、下载回调、WebView相关配置、服务器相关配置等。

常用组件的集成方式：常用组件是单独的SDK，可集成到普通项目中，也可以集成到H5容器中。与正常移动端开发的SDK集成方式相同。

远程Web应用：H5容器支持远程Web应用与离线web应用两种模式。

远程Web应用，即运行于服务器端的Web应用，H5容器运行模式类似于浏览器。通过链接即可打开远程Web应用，与web应用进行交互操作，调用移动端提供的常用组件、自定义组件等服务。

离线Web应用，即将Web应用打包发布到分发服务器。H5容器根据分发服务器的配置信息访问Web应用信息。如有新版本，则离线下载到本地。该模式节省网络资源，在网络环境较差的情况下，保证了应用的正常运行使用。

参阅图3，Web端H5容器SDK是基于Bridge与移动端进行通讯的。在此基础上通过tqh5container进行管理常用组件调用、自定义组件调用、应用鉴权、异步回调、与服务器端进行HTTP请求等功能。

常用组件：H5容器SDK管理常用组件调用请求的发起和结果处理。组件功能与移动端组件一一对应。如：分享组件、文件选择器、拍照组件、视频组件、录音组件等。

自定义组件：自定义组件调用与常用组件调用类似，通过H5容器SDK发起调用与结果处理，此处不做赘述。

容器管理：H5容器SDK除管理组件调用外，还要管理与移动端的鉴权认证、处理组件调用的异步回调、与服务器端进行HTTP/HTTPS异步请求等。

本申请中，对常用组件进行列举，例如：

录制/播放音频：提供录制音频和播放音频功能。可控制录音的开始和结束。播放音频的开始和结束，以及音频播放完成的事件监听。

分享到钉钉或微信：提供将图片、文字、连接等分享到钉钉或微信的功能。

证件识别：提供证件识别功能。支持护照、二代身份证、新版港澳通行证、中国驾照、中国行驶证、中国香港特别行政区身份证、回乡证(港澳居民来往内地通行证)、新版中国澳门特别行政区身份证、新版台胞证等。

图片选择：提供图片选择功能、拍照功能。可以获取手机端的图片、上传到服务器端。

录制小视频：提供短视频录制功能，播放功能。支持本地视频播放和在线视频播放。

获取设备信息：提供设备基础信息，设备唯一标示等。

获取定位信息：提供移动端的定位功能，将定位信息返回给调用者。

信息存储：提供Key-Value形式的信息存储功能。在安全及性能方面优于SharedPreferences。

文件上传、下载：提供文件的上传、下载功能。可用于图片上传、Web应用离线下载等。

二维码扫描：提供二维码扫描功能。

用户鉴权：提供用户鉴权、身份认证的功能。

预览文件：提供txt、word、ppt、pdf文件的预览功能。支持本地文件及在线文档预览。

基于上述移动端H5容器结构说明和Web端H5容器SDK结构说明，对本申请提供的Web端与移动端的通信方法进行说明。

参阅图1，本发明实施例提供的方法，可以包括以下步骤：

S11、移动端基于WebView实现的H5容器的全生命周期管理方法，注册 Android或iOS定义的JavaScriptInterface接口。

例如，本实施例中，初始化H5容器，加载WebView，以注册以Android 或iOS定义的JavaScriptInterface接口，以及，WebView加载Web页面，以使Web页面加载h5_sdk.js库。

其中，WebView是术语，是指网页视图组件，即浏览器组件。

S12、基于h5_sdk.js的Web页面，通过h5_sdk与移动端定义的JavaScriptInterface接口进行通讯，以使移动端在JavaScriptInterface接口中调用Native端能力方法，获取执行结果。

例如，可以基于Web页面调用h5_sdk.js的api接口(JavaScript)，以通过h5_sdk与Native定义的接口进行通讯，以使移动端在以Android或iOS 定义的JavaScriptInterface接口中实现Native方法，获取执行结果。

S13、基于h5_sdk的Web页面接收执行结果，并根据业务需求处理执行结果，获取最终显示内容，并显示最终显示内容。

图4为本发明实施例提供的一种Web端调用移动端的通信方法时序图，参阅图4，

本发明实施例中，Web端调用移动端时，Web端的JavaScript调用手机端的JavaScriptInterface(Android/iOS)方法。具体的流程方法可以为：

第一步，初始化H5容器。H5容器初始化完成后，加载 H5ContainerWebView。注册以Android或iOS实现的JavaScriptInterface到 H5ContainerWebView中。H5ContainerWebView所在页面发起请求，打开Web 页面。

第二步，H5ContainerWebView加载Web页面。H5ContainerWebView调用 loadUrl方法加载Web页面资源。

第三步，Web页面加载h5_sdk.js库。Web页面加载过程中，需要加载 h5_sdk.js库文件。加载完成后，h5_sdk可以与H5容器建立JavaScript消息通道。

第四步，Web页面调用h5_sdk.js的api接口(JavaScript)。在 JavaScript调用JavaScriptInterface(Android/iOS)的过程中，首先由 Web页面触发事件，通过h5_sdk(JavaScript)发起调用。

第五步，h5_sdk.js接口与H5容器进行通讯。在Web页面发起调用后，消息通过h5_sdk(JavaScript)发送给Native定义的JavaScriptInterface (Android/iOS)。

第六步，JavaScriptInterface返回执行结果。在移动端， JavaScriptInterface中实现了调用Android或iOS的Native方法。移动端执行该方法后，将执行结果返回给Web端。

第七步，h5_sdk.js将返回结果传递给Web页面。通过h5_sdk的消息通道将JavaScriptInterface的执行结果返回给Web页面。

第八步，Web页面处理结果并显示最终显示内容。Web页面接收结果后，经过加工处理，按照业务需求将最终显示内容显示到页面。

根据上述步骤，完成Web端通过JavaScript调用移动端的流程，实现 Web端与移动端的通信。

在一些实施例中，可选的，移动端的H5容器设置有SupportAPI和 CustomAPI，SupportAPI调用Native端能力的相关功能，CustomAPI调用用户自定义JavaScriptInterface接口，以实现端能力的扩展；

基于h5_sdk.js的Web页面，通过h5_sdk与移动端定义的 JavaScriptInterface接口进行通讯，以使移动端在JavaScriptInterface接口中调用Native(Android/iOS)端能力方法，获取执行结果，包括：

H5容器启动后，通过SupportApi加载Native端能力SDK，以使 SupportApi通过Native端能力SDK的AbilityManager启动加载常用组件；通过CustomAPI加载自定义端能力，用户可以通过自定义端能力管理器启动加载扩展的自定义端能力；

基于Web页面的交互操作，通过h5_sdk发起JavaScript调用请求；

通过h5_sdk将调用Native组件的请求发送到WebView，以使移动端调用 H5容器SupportApi，通过端能力管理器调用对应的组件功能，使得组件执行相关操作，得到执行结果。

在一些实施例中，可选的，通过h5_sdk将调用Native组件的请求发送到 WebView，通过端能力管理器调用对应的组件功能，使得组件执行相关操作，得到执行结果，包括：

通过JavaScriptInterface接口调用端能力管理器，以使端能力管理器调用对应的功能组件，以使功能组件执行对应的操作，得到执行结果。

在一些实施例中，可选的，基于h5_sdk的Web页面接收执行结果，并根据业务需求处理执行结果，获取最终要显示的内容，并显示最终要显示的内容，包括：

基于端能力管理器将执行结果发送至H5容器，以使H5容器将执行结果通过JavaScriptInterface回调接口返回给WebView；

基于WebView将JavaScriptInterface回调接口返回的执行结果转成 JavaScript支持的内容；

基于h5_sdk将JavaScript支持的内容传递给Web页面的JavaScript程序，程序处理完成数据后，将结果显示在Web页面。

图5为本发明实施例提供的一种Web端调用Native端能力的时序图，参阅图5，Web端调用Native端能力流程，可以包括如下步骤：

第一步，移动端APP启动，根据相关配置数据初始化H5容器，通过H5ContainerManager加载H5容器。

第二步，H5容器启动后，通过SupportApi加载Native端能力SDK。 SupportApi中定义了支持的端能力列表。

第三步，SupportApi通过Native端能力SDK的AbilityManager启动加载常用组件。

第四步，移动端使用H5ContainerWebView加载Web页面。

第五步，Web页面初始化h5_sdk的JavaScript库。

第六步，Web页面触发交互操作(如点击按钮)，通过h5_sdk发起 JavaScript调用请求。

第七步，h5_sdk调用Native组件的请求到WebView。

第八步，JavaScript在WebView中执行。调用SupportApi中注册的JavaScriptInterface。

第九步，JavaScriptInterface调用Android/iOS代码调用端能力管理器AbilityManager。

第十步，AbilityManager调用对应的组件功能，组件执行相关操作。

第十一步，组件执行完毕，将执行结果返回给AbilityManager。

第十二步，AbilityManager将结果回传给H5容器。

第十三步，H5容器将结果通过JavaScriptInterface回调接口返回给 WebView。

第十四步，WebView将JavaScriptInterface回调接口返回的数据转成JavaScript支持的内容。

第十五步，h5_sdk将结果传递给Web页面的JavaScript程序，程序处理完成数据后，将结果显示在Web页面。

通过上述步骤，Web端调用Native端能力流程结束。

本发明实施例提供的Web端与移动端的通信方法、移动终端及系统，移动端集成H5容器和Native端能力调用；Web端集成H5容器SDK；方法包括：初始化H5容器，加载WebView，以注册以Android或iOS定义的 JavaScriptInterface接口，以及，WebView加载Web页面，以使Web页面加载h5_sdk.js库；基于Web页面调用h5_sdk.js的api接口，以通过h5_sdk 与Native定义的JavaScriptInterface接口进行通讯，以使移动端在以 Android或iOS定义的JavaScriptInterface接口中实现Native方法，获取执行结果；基于h5_sdk.js接收执行结果，并根据业务需求处理执行结果，获取最终显示内容，并显示最终显示内容。本发明解决Web端与移动端混合开发中开发周期和开发成本较大的技术问题。简化了Web端JavaScript与 Android/iOS的通信方式，可快速实现Web端与移动端的互相通信；扩展了 Web应用可调用的功能，让Web应用有更广的产品开发空间；组件管理及调用机制支持可扩展组件及可扩展JavaScript API，提高了开发效率；离线运行环境为常用Web应用节约网络访问资源，进一步提升了运行效率和性能。

基于一个总的发明构思，本发明实施例还提供一种Web端与移动端的通信方法。

图6为本发明实施例提供的一种Web端与移动端的通信方法流程示意图， Web端与移动端设置有相对应的软件开发工具包；移动端集成H5容器和 Native端能力调用；Web端集成H5容器SDK，参阅图6，为本发明实施例提供的方法，可以包括以下步骤：

S61、基于WebView的H5容器全生命周期管理相关方法，Native端能力相关接口及方法，注册Android或iOS定义的JavaScriptInterface接口，以及，WebView加载Web页面，以使Web页面加载h5_sdk.js库。

例如，本实施例中，可以初始化H5容器，加载WebView，在WebView上注册Android或iOS定义的JavaScriptInterface接口，以及，WebView加载 Web页面，以使Web页面加载h5_sdk.js库；

S62、基于移动端的终端页面调用Android或iOS定义的 JavaScriptInterface接口，以将消息发送给Web端的h5_sdk；

S63、基于h5_sdk.js的api接口调用Web端定义的JavaScript方法，并执行，获取执行结果；

S64、基于h5_sdk将执行结果发送到H5容器。

S65、基于H5容器的Android或iOS定义的JavaScriptInterface接口，将执行结果返回给WebView所属页面。

图7为本发明实施例提供的一种移动端调用Web端的的通信方法时序图，参阅图7，手机端的JavaScriptInterface(Android/iOS)调用Web端的 JavaScript方法，可以包括如下步骤：

第一步，初始化H5容器，加载WebView。初始化H5容器后，加载 WebView组件，将Android/iOS定义的JavaScriptInterface方法注册到 WebView组件上。

第二步，WebView加载Web页面。WebView调用loadUrl载入Web页面资源。

第三步，Web页面加载h5_sdk.js库。Web页面加载过程中，需要加载 h5_sdk.js库文件。加载完成后，h5_sdk可以与H5容器建立JavaScript消息通道。

第四步，APP页面发起调用JavaScriptInterface方法。WebView所属的 APP页面发起调用Android/iOS注册的JavaScriptInterface方法。

第五步，H5容器方法发送消息给h5_sdk。通过H5容器中注册的JavaScriptInterface(Android/iOS实现)将消息发送给Web端的h5_sdk。

第六步，h5_sdk的调用自定义JavaScript方法。h5_sdk通过api调用Web端自定义的JavaScript方法，并执行。

第七步，返回结果给h5_sdk。Web页面执行完JavaScript方法后，将结果返回到h5_sdk的回调函数中。

第八步，h5_sdk将发送结果到H5容器。h5_sdk通过消息通道将消息发送给H5容器注册的JavaScriptInterface(Android/iOS)。

第九步，返回结果给移动端页面。JavaScriptInterface(Android/iOS) 将结果返回给WebView所属页面的Native(Android/iOS)方法。

基于上述步骤，移动端调用Web端JavaScript流程结束。

在一些实施例中，可选的，还包括：管理员将开发完成的Web APP打包并上传至应用分发服务器；

初始化H5容器，加载WebView，还包括：

在移动端APP启动后，初始化并加载H5容器，H5容器读取配置文件，得到分发服务器地址；

通过H5容器至分发服务器检查版本更新，并获取最新版本信息；

基于H5容器和最新版本信息，安装和更新最新版本，并将已安装版本加入本地APP版本管理中；

移动端APP启动Web APP，发起请求打开页面；

通过H5容器拦截请求，加载本地离线Web APP资源；

通过H5容器返回离线资源给APP的WebView页面，以使WebView页面展示资源。

图8为本发明实施例提供的一种Web App离线功能的方法流程示意图，参阅图8，Web App离线功能的实现方法，可以包括以下步骤：

第一步，管理员将开发完成的Web App打包并上传至应用分发服务器。

第二步，APP启动后，初始化并加载H5容器。H5容器初始化时会读取配置文件，得到分发服务器地址。

第三步，H5容器到分发服务器检查版本更新。

第四步，分发服务器返回新版本下载地址、版本号等信息。

第五步，H5容器安装、更新APP，并将已安装版本加入本地APP版本管理中。

第六步，H5容器完成安装，并通知APP安装完成事件。

第七步，APP启动Web APP。发起请求打开页面。

第八步，H5容器拦截请求，加载本地离线Web APP资源。

第九步，H5容器返回离线资源给APP的WebView页面。WebView页面展示资源。

通过上述步骤，离线APP流程结束。

本发明实施例提供的Web端与移动端的通信方法，解决Web端与移动端混合开发中开发周期和开发成本较大的技术问题。简化了JavaScript互相 Android/iOS的方式，可快速实现Web端与移动端的互相通信；扩展了Web应用可调用的功能，让Web应用有更广的产品开发空间；组件管理及调用机制支持可扩展组件及可扩展JavaScript API，提高了开发效率；离线运行环境为常用Web应用节约网络访问资源，进一步提升了运行效率和性能。

基于一个总的发明构思，本发明实施例还提供一种移动终端。

图9为本发明实施例提供的一种移动终端结构示意图，参阅图9，移动终端可以包括：处理器91，以及与处理器相连接的存储器92；存储器用于存储计算机程序，计算机程序至少用于执行上述任一实施例记载的Web端与移动端的通信方法；

处理器用于调用并执行存储器中的计算机程序

基于一个总的发明构思，本发明实施例还提供一种Web端与移动端的通信系统。

图10为本发明实施例提供的一种Web端与移动端的通信系统结构示意图，参阅图10，本发明实施例提供的系统可以包括：Web端与上述实施例记载的移动端。

基于一个总的发明构思，本发明实施例还提供一种存储介质。

一种存储介质，该存储介质存储有计算机程序，当计算机程序被处理器执行时，实现上述的Web端与移动端的通信方法中各个步骤。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。

需要说明的是，在本发明的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除非另有说明，“多个”的含义是指至少两个。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列 (FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种Web端与移动端的通信方法，其特征在于，应用于所述Web端；所述Web端与所述移动端设置有相对应的软件开发工具包；所述移动端集成H5容器SDK和Native端能力SDK；所述Web端集成h5_sdk.js库；

所述方法包括：

移动端基于WebView实现的H5容器的全生命周期管理方法，注册Android或iOS定义的JavaScriptInterface接口；

基于h5_sdk.js的Web页面，通过h5_sdk与移动端定义的JavaScriptInterface接口进行通讯，以使移动端在JavaScriptInterface接口中调用Native端能力方法，获取执行结果；

基于h5_sdk的Web页面接收所述执行结果，并根据业务需求处理所述执行结果，获取最终要显示的内容，并显示所述最终要显示的内容。

2.根据权利要求1所述的方法，其特征在于，还包括：通过H5容器的WebView加载Web页面；所述通过H5容器的WebView加载Web页面，包括：

基于自定义WebView调用loadUrl方法加载Web页面资源，包括本地资源和远程资源。

3.根据权利要求1所述的方法，其特征在于，所述基于h5_sdk.js的Web页面，通过h5_sdk与移动端定义的JavaScriptInterface接口进行通讯，包括：

通过Web页面触发事件，通过h5_sdk.js对Android或iOS定义的JavaScriptInterface接口发起调用。

4.根据权利要求1所述的方法，其特征在于，所述移动端的所述H5容器设置有SupportAPI和CustomAPI，所述SupportAPI调用Native端能力的相关功能，所述CustomAPI调用用户自定义JavaScriptInterface接口，以实现端能力的扩展；

所述基于h5_sdk.js的Web页面，通过h5_sdk与移动端定义的JavaScriptInterface接口进行通讯，以使移动端在JavaScriptInterface接口中调用Native端能力方法，获取执行结果，包括：

H5容器启动后，通过SupportApi加载Native端能力SDK，以使SupportApi通过Native端能力SDK的AbilityManager启动加载常用组件；通过CustomAPI加载自定义端能力，用户可以通过自定义端能力管理器启动加载扩展端能力；

基于Web页面的交互操作，通过h5_sdk发起JavaScript调用请求；

通过h5_sdk将调用Native组件的请求发送到WebView，以使移动端调用H5容器SupportApi，通过端能力管理器调用对应的组件功能，使得组件执行相关操作，得到执行结果。

5.根据权利要求4所述的方法，其特征在于，所述通过h5_sdk将调用Native组件的请求发送到WebView，通过端能力管理器调用对应的组件功能，使得组件执行相关操作，得到执行结果，包括：

通过所述SupportApi调用端能力管理器，以使所述端能力管理器调用对应的功能组件，以使所述功能组件执行对应的操作，得到执行结果。

6.根据权利要求4所述的方法，其特征在于，所述基于h5_sdk的Web页面接收所述执行结果，并根据业务需求处理所述执行结果，获取最终要显示的内容，并显示所述最终要显示的内容，包括：

基于所述端能力管理器将所述执行结果发送至H5容器，以使所述H5容器将所述执行结果通过JavaScriptInterface回调接口返回给WebView；

基于WebView将JavaScriptInterface回调接口返回的执行结果转成JavaScript支持的内容；

基于H5_sdk将所述JavaScript支持的内容传递给Web页面的JavaScript程序，程序处理完成数据后，将结果显示在Web页面。

7.一种Web端与移动端的通信方法，其特征在于，应用于所述移动端；所述Web端与所述移动端设置有相对应的软件开发工具包；所述移动端集成H5容器和Native端能力调用；所述Web端集成H5容器SDK；

所述方法包括：

基于WebView的H5容器全生命周期管理相关方法，Native端能力相关接口及方法，注册Android或iOS定义的JavaScriptInterface接口，以及，WebView加载Web页面，以使Web页面加载h5_sdk.js库；

基于所述移动端的终端页面调用所述Android或iOS定义的JavaScriptInterface接口，以将消息发送给Web端的h5_sdk；

基于h5_sdk.js的api接口调用Web端定义的JavaScript方法，并执行，获取执行结果；

基于h5_sdk将执行结果发送到H5容器；

基于H5容器的Android或iOS定义的JavaScriptInterface接口，将执行结果返回给WebView所属页面。

8.根据权利要求7所述的方法，其特征在于，还包括：

管理员将开发完成的Web APP打包并上传至应用分发服务器；

在移动端APP启动后，初始化并加载H5容器，H5容器读取配置文件，得到分发服务器地址；

通过H5容器至分发服务器检查版本更新，并获取最新版本信息；

基于H5容器和所述最新版本信息，安装和更新最新版本，并将已安装版本加入本地WebAPP版本管理中；

移动端APP启动Web APP，发起请求打开页面；

通过H5容器拦截请求，加载本地离线Web APP资源；

通过H5容器返回离线资源给APP的WebView页面，以使WebView页面展示资源。

9.一种移动终端，其特征在于，包括：处理器，以及与所述处理器相连接的存储器；所述存储器用于存储计算机程序，所述计算机程序至少用于执行权利要求1～6任一项所述的Web端与移动端的通信方法；

所述处理器用于调用并执行所述存储器中的所述计算机程序。

10.一种Web端与移动端的通信系统，其特征在于，包括：Web端与上述权利要求9所述的移动端。

Images