应用交互方法、装置、电子设备及可读存储介质与流程

本申请涉及计算机技术领域，具体而言，涉及应用交互方法、装置、电子设备及可读存储介质。

背景技术：

目前app(application，应用程序)一般包括实现不同业务功能的多个业务模块。为了减少app的体积，提高app的性能，相关技术中通常采用hybirdapp(混合应用)框架进行app的开发。其中，hybirdapp采用h5(hypertextmarkuplanguage5.0，超级文本标记语言5.0)业务组件作为业务模块。然而，采用hybirdapp框架开发得到的app的代码耦合度仍然较高，各个h5业务组件之间存在冗余代码，影响app性能。

技术实现要素：

有鉴于此，本申请的目的之一在于提供一种应用交互方法、装置、电子设备及可读存储介质，以至少部分地改善上述问题。

为了实现上述目的，本申请实施例采用的技术方案如下：

第一方面，本申请实施例提供一种应用交互方法，应用于电子设备，所述电子设备包括h5业务组件、调用组件以及原生组件，所述调用组件包括jsbridge组件以及桥接组件；所述方法包括：

载入所述h5业务组件，所述h5业务组件响应用户操作，执行与所述用户操作对应的调用指令，并将所述调用指令发送到所述jsbridge组件；

所述jsbridge组件根据所述调用指令生成跳转指令，并将所述跳转指令发送到所述桥接组件；

所述桥接组件根据所述跳转指令生成原生组件调用请求，并将所述原生组件调用请求发送到所述原生组件；

所述原生组件根据所述原生组件调用请求生成回传数据，并通过所述桥接组件将所述回传数据发送到所述h5业务组件。

可选地，所述载入所述h5业务组件的步骤，包括：

根据所述h5业务组件的加载配置信息，从所述jsbridge组件中选取所述h5业务组件需要的js全局变量，并将所述js全局变量载入所述h5业务组件。

可选地，所述载入所述h5业务组件的步骤之前，所述方法还包括：

根据预设在所述h5业务组件的调用指令生成所述h5业务组件的加载配置信息。

可选地，所述桥接组件包括js层、webview层以及原生层；所述跳转指令包括跳转协议名、地址域、调用路径以及调用参数；所述桥接组件根据所述跳转指令生成原生组件调用请求的步骤包括：

所述js层获取所述jsbridge组件发送的跳转指令，并将所述跳转指令发送到所述webview层；

所述webview层获取所述地址域指示的调用对象，获取所述调用路径指示的调用方法，并根据所述调用对象、所述调用方法以及所述调用参数生成所述原生组件调用请求，再将所述原生组件调用请求发送到所述原生层；

所述原生层将所述原生组件调用请求发送到所述原生组件。

第二方面，本申请实施例提供一种应用交互装置，应用于电子设备，所述应用交互装置包括：

载入组件，用于载入h5业务组件；

所述h5业务组件，用于在载入所述h5业务组件后，响应用户操作，执行与所述用户操作对应的调用指令，并将所述调用指令发送到jsbridge组件；

调用组件，所述调用组件包括jsbridge组件和桥接组件，所述jsbridge组件用于根据所述调用指令生成跳转指令，并将所述跳转指令发送到所述桥接组件；所述桥接组件，用于根据所述跳转指令生成原生组件调用请求，并将所述原生组件调用请求发送到所述原生组件；

以及原生组件，用于根据所述原生组件调用请求生成回传数据，并通过所述桥接组件将所述回传数据发送到h5业务组件。

可选地，所述载入组件具体用于：

根据所述h5业务组件的加载配置信息，从所述jsbridge组件选取所述h5业务组件需要的js全局变量，并将所述js全局变量载入所述h5业务组件。

可选地，所述载入组件具体还用于根据预设在所述h5业务组件的各个调用指令生成所述h5业务组件的加载配置信息。

可选地，所述跳转指令包括跳转协议名、地址域、调用路径以及调用参数；所述桥接组件包括：

js层，用于获取所述jsbridge组件发送的跳转指令，并将所述跳转指令发送到webview层；

webview层，用于获取所述地址域指示的调用对象，获取所述调用路径指示的调用方法，并根据所述调用对象、所述调用方法以及所述调用参数生成所述原生组件调用请求，再将所述原生组件调用请求发送到原生层；

原生层，用于将所述原生组件调用请求发送到所述原生组件。

第三方面，本申请实施例提供一种电子设备，所述电子设备包括处理器及可读存储介质，所述可读存储介质上存储有机器可执行指令，所述机器可执行指令被执行时促使处理器实现第一方面所述的应用交互方法。

第四方面，本申请实施例提供一种可读存储介质，所述可读存储介质中存储有机器可执行指令，所述机器可执行指令被执行时实现第一方面所述的应用交互方法。

相对于现有技术而言，本申请具有以下有益效果：

本申请提供的应用交互方法、装置、电子设备及可读存储介质，通过将h5业务组件和原生组件的交互逻辑封装到调用组件中，使得电子设备中的各h5业务组件可以通过调用组件与原生组件交互。一方面降低了代码耦合度，另一方面避免了对不同的h5业务组件中相同调用逻辑的重复开发，提高了开发效率，降低了维护成本。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的电子设备的一种结构示意框图；

图2为本申请实施例提供的应用交互装置的一种结构示意框图；

图3为本申请实施例提供的应用交互方法的一种流程示意框图；

图4为图2中桥接组件的一种结构示意框图。

图标：10-电子设备；100-处理器；200-存储器；300-应用交互装置；310-h5业务组件；320-调用组件；330-jsbridge组件；340-桥接组件；341-js层；343-webview层；345-原生层；350-原生组件。

具体实施方式

经研究发现，hybirdapp中h5业务组件通常需要与原生组件进行交互，在相关技术中，各个h5业务组件需要各自实现一套js(javascript)交互协议以实现与原生组件的交互。每增加一个h5业务组件，就需要增设该h5业务组件与原生组件的js交互协议。并且，许多app在原生组件上进行二次封装，h5业务组件与原生组件之间的交互需要根据不同app的二次封装后的原生组件做兼容，系统逐渐地变得难以维护及迭代开发。其中，原生组件是指应用内核，例如可以是智能操作系统提供的浏览器内核。

为至少部分地改善上述技术问题，本申请实施例通过将h5业务组件和原生组件的交互逻辑封装到调用组件中，使得电子设备中的各h5业务组件可以通过调用组件与原生组件交互。一方面降低了代码耦合度，另一方面避免了对不同的h5业务组件中相同调用逻辑的重复开发，提高了开发效率，降低了维护成本。

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

下面结合附图，对本申请的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的关键可以相互组合。

在对本申请实施例提供的应用交互方法进行描述前，需要说明的是，本申请提供的用于实现应用交互方法的电子设备为可以运行hybirdapp的设备。例如，电子设备可以为实体设备，也可以为运行在实体设备上的虚拟设备。

需要进一步说明的是，本申请实施例提供的电子设备可以采用安卓操作系统，也可以采用ios操作系统，本实施例不以此为限制。

请参阅图1，为本申请实施例提供的电子设备10的一种结构示意框图。电子设备10包括处理器100以及可读存储介质200。处理器100与可读存储介质200可以通过总线通信连接。可读存储介质200内存储有若干机器可执行指令，机器可执行指令被执行时，促使处理器100实现本申请实施例提供的应用交互方法。

请参照图2，本申请实施例还提供一种应用交互装置300，所述应用交互装置300包括至少一个可以以软件形式存储于可读存储介质120的功能组件。详细地，应用交互装置300包括依次通信连接的h5业务组件310、调用组件320以及原生组件350。其中，调用组件320包括jsbridge组件330和桥接组件340。

请参阅图3，为本申请实施例提供的应用交互方法的一种流程示意框图。本实施例中，应用交互方法由图1中所示的电子设备10执行，下面结合图3对应用交互方法进行详细阐述。所应说明的是，本申请实施例提供的方法不以图3及以下的具体顺序为限制。方法的具体流程如下。

步骤s110，载入h5业务组件310，h5业务组件310响应用户操作，执行与用户操作对应的调用指令，并将调用指令发送到jsbridge组件330。

可选地，应用交互装置300还可以包括载入组件，电子设备10可以通过该载入组件载入h5业务组件310。

在本实施例中，h5业务组件310可以预设有与不同用户操作对应的调用指令集(responsecallbacks)。h5业务组件310在检测到用户操作时，可以通过h5业务组件310的内部框架从所述调用指令集中选取与所检测的用户操作对应的调用指令，并将对应的调用指令发送到jsbridge组件330。

考虑h5业务组件310在工作时可能需要载入sbridge组件330，但随着app的不断开发，jsbridge组件330中存储的交互方法(即：用于实现交互逻辑的指令集)越来越多，将jsbridge组件330中的全部js全局变量载入h5业务组件310时会影响app的响应速度。因此，在实施时，可以根据h5业务组件310的交互需要载入，从jsbridge组件330选取h5业务组件310需要的部分js全局变量进行载入，以提高app的响应速度。

具体地，上述的载入组件载入h5业务组件310的步骤可以通过以下过程实现：

根据h5业务组件310的加载配置信息，从jsbridge组件330中选取h5业务组件310需要的js全局变量，然后将js全局变量载入h5业务组件310。

其中，jsbridge组件330内封装有多个js全局变量。

作为一种实施方式，上述h5业务组件310的加载配置信息可以通过对h5业务组件310的进行分析而得到。例如，可以根据h5业务组件310中预设的调用指令集生成h5业务组件310的加载配置信息。

具体地，在载入h5业务组件310时，可以根据该h5业务组件的调用指令集得到该调用指令集中的各个调用指令分别对应的js全局变量，再将各个调用指令分别对应的js全局变量载入该h5业务组件。

可选地，所述调用指令集可以包括实现以下功能的调用指令：调用原生登录、调用原生绑定手机页面、关闭当前浏览器、页面访问栈回退、获取当前设备信息、使用原生toast显示提示信息、配置分享参数并设置分享按钮开启关闭、触发原生分享组件、设置浏览器页面标题、使用原生对话框显示loading状态、打开新的浏览器、获取手机网络状态、调用手机摄像头拍照获取照片、调用手机相册获取图片、获取手机定位信息、拦截返回按钮事件并交由h5业务组件控制、拦截关闭按钮事件并交由h5业务组件控制、配置原生对话框样式以及显示对话框。

步骤s120，jsbridge组件330根据调用指令生成跳转指令，并将跳转指令发送到桥接组件340。

在一种实施方式中，h5业务组件310需要载入jsbridge组件330。此时，上述步骤s120在h5业务组件310内执行。具体地，在h5业务组件310的内部框架从所述调用指令集中选取与所检测的用户操作对应的调用指令后，jsbridge组件330根据h5业务组件310的调用指令进行参数转化，将调用指令中指示的调用方法、调用对象以及调用参数拼接为跳转指令。

在又一种实施方式中，h5业务组件310与jsbridge组件330可以独立工作，即h5业务组件310的内部框架从所述调用指令集中选取与所检测的用户操作对应的调用指令后，h5业务组件310将调用指令发送到jsbridge组件330。jsbridge组件330根据h5业务组件310的调用指令进行参数转化，将调用指令中指示的调用方法、调用对象以及调用参数拼接为跳转指令。在上述过程中，jsbridge组件330为各个h5业务组件310提供统一的业务接口，避免了当不同的h5业务组件有相同的业务需要时，需要针对不同的h5业务组件重复开发交互方法的情况，减少了代码的冗余量，提高了应用的运行速度。

步骤s130，桥接组件340根据跳转指令生成原生组件调用请求，并将原生组件调用请求发送到原生组件350。

在进一步说明步骤s130前，请参阅图4，图4为桥接组件340的结构示意框图。桥接组件340可以包括js层341、webview层343以及原生层345。

经研究发现，当跳转指令采用urlscheme跳转指令时，h5业务组件310可以直接与原生组件350交互，避免app对原生组件350进行二次封装导致的h5业务组件310在迁移到不同app时需要根据不同app进行配适的情况。具体地，当跳转指令采用urlscheme跳转指令时，跳转指令可以包括跳转协议名、地址域、调用路径以及调用参数。

上述步骤s130可以由以下三个子步骤实现：

第一，js层341获取jsbridge组件330发送的跳转指令，并将跳转指令发送到webview层343。

在实施过程中，js层341可以通过js接口获取jsbridge组件330发送的跳转指令。

第二，webview层343获取地址域指示的调用对象，获取调用路径指示的调用方法，并根据调用对象、调用方法以及调用参数生成原生组件调用请求，再将原生组件调用请求发送到原生层345。

其中，跳转指令的格式可以为scheme://host/path？params。其中，scheme字段可以充当上述跳转协议名、host字段可以充当上述地址域、path字段可以充当上述调用路径、params字段可以充当上述调用参数，其他符号为分割符。

示例性地，scheme字段可以设置为“mtec”，host字段可以为“mtui”，用于标志调用对象为通用浏览器。path字段用来区分具体的指令。例如，当path字段为“web”时，可以指示原生组件350跳转到特定的h5页面，此时，params字段可以写入具体的页面的url，需要说明的是，params字段可以写入多个调用参数，例如params字段可以为“url＝{url}&share＝{share}&close＝{close}”，以指示是否关闭当前页面以及是否开发分享功能。

path字段一般可以包括：用于指示原生组件350跳转到特定h5页面的“web”指令，用于指示原生组件350打开多个tab可左右滑动的h5页面的“mwp”指令，用于打开指定用户的个人主页的“user”指令以及用于打开其他scheme的“openurl”指令。其中，如果需要控制原生组件350打开指定app中的指定落地页，可以通过“openurl”指令执行，并在params字段写入要打开app的scheme地址。

webview层343可以根据上述指示内容对跳转指令进行解析，得到原生组件调用请求。

其中，如果电子设备10运行的是安卓操作系统，则webview层343可以为安卓操作系统的浏览器内核webview。如果电子设备10运行的是ios操作系统，则webview层343可以为ios操作系统的浏览器内核uiwebview。

第三，原生层345将原生组件调用请求发送到原生组件350。

其中，原生层345可以通过其原生层345接口将原生组件调用请求发送到原生组件350。

步骤s140，原生组件350根据原生组件调用请求生成回传数据，并通过桥接组件340将回传数据发送到h5业务组件310。

在步骤s140中，原生组件350可以通过其原生层345回调接口将回传数据发送到原生层345；原生层345将回传数据发送到webview层343；webview层343通过js层341的js层341回调接口将回传数据发送到js层341；js层341将回传数据发送到h5业务组件310。

本申请还提供一种可读存储介质。可读存储介质中存储有计算机程序，计算机程序被执行时实现前述的应用交互方法。

综上所述，通过将h5业务组件310和原生组件350的交互逻辑封装到调用组件320中，使得电子设备10中的各h5业务组件310可以通过调用组件320与原生组件350交互。一方面规范了h5业务组件310对原生组件350的调用方式，降低了代码耦合度。另一方面避免了对不同的h5业务组件310中相同调用逻辑的重复开发，提高了开发效率，降低了维护成本。此外，本申请实施例中采用urlscheme作为跳转指令，使得h5业务组件310可以直接与原生组件350交互，避免app对原生组件350的二次封装导致的h5业务组件310迁移时需要根据不同app进行配适的情况，降低了app的开发成本。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

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