CN110691136A - 数据交互方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请公开了一种数据交互方法、装置、电子设备及存储介质，涉及计算机技术领域，应用于电子设备，电子设备包括客户端、跨平台模块和网页应用，方法包括：跨平台模块获取客户端发送的操作指令，操作指令由网页应用发送至客户端并由客户端发送至跨平台模块，操作指令用于获取操作参数；获取操作指令对应的操作参数；通过客户端将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。本申请通过跨平台模块获取操作指令对应的操作参数，并通过客户端进行传输，实现了跨平台模块和网页应用的双向交互，并使得网页应用在面对复杂的业务逻辑或者丰富的页面交互时，仍可表现出较高性能。

Description

数据交互方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机技术领域，更具体地，涉及一种数据交互方法、装置、电子设备及存储介质。

背景技术

目前在电子设备上运行的应用(Application，APP)主要有两种：原生应用(NativeAPP)和网页应用(Web APP)。原生应用是用原生代码(Native Code)编写运行的一种应用程序，它是基于电子设备(智能手机、平板电脑等)操作系统(如iOS、Andriod、Windows Phone等)使用，用户通过应用市场或应用商店进行下载安装到自己的电子设备上。但是同一种原生应用针对IOS、Android等不同的操作系统要采用不同的语言和框架进行开发，工程量大。网页应用是能够为电子设备提供特定功能的应用程序。网页应用只需安装应用的框架部分，而应用的数据则是每次打开APP的时候，从云端取数据呈现给用户。

也就是说，若要原生应用在不同平台均可使用，需针对每个平台独立开发，这样不仅开发周期长且成本高，而网页应用虽然支持跨平台开发和运行，但相比原生应用，在调用原生功能时的体验较差。

发明内容

鉴于上述问题，本申请提出了一种数据交互方法、装置、电子设备及存储介质，可以实现跨平台模块和网页应用之间的双向交互，并使得网页应用在面对复杂的业务逻辑或者丰富的页面交互时，仍可表现出较高性能。

第一方面，本申请实施例提供了一种数据交互方法，应用于电子设备，所述电子设备包括客户端、跨平台模块和网页应用，所述方法包括：所述跨平台模块获取所述客户端发送的操作指令，所述操作指令由所述网页应用发送至所述客户端并由所述客户端发送至所述跨平台模块，所述操作指令用于获取操作参数；获取所述操作指令对应的操作参数；通过所述客户端将所述操作参数发送至所述网页应用，指示所述网页应用根据所述操作参数执行指定操作。

第二方面，本申请实施例提供了一种数据交互方法，应用于电子设备，所述电子设备包括客户端、跨平台模块和网页应用，所述方法包括：所述客户端获取所述网页应用发送的操作指令，并将所述操作指令发送至所述跨平台模块；获取所述跨平台模块返回的所述操作指令对应的操作参数；将所述操作参数发送至所述网页应用，指示所述网页应用根据所述操作参数执行指定操作。

第三方面，本申请实施例提供了一种数据交互装置，应用于电子设备，所述电子设备包括客户端、跨平台模块和网页应用，所述装置包括：指令发送模块，用于所述客户端获取所述网页应用发送的操作指令，并将所述操作指令发送至所述跨平台模块；参数返回模块，用于获取所述跨平台模块返回的所述操作指令对应的操作参数；参数发送模块，用于将所述操作参数发送至所述网页应用，指示所述网页应用根据所述操作参数执行指定操作。

第五方面，本申请实施例提供了一种电子设备，其包括：存储器；一个或多个处理器，与存储器耦接；一个或多个程序，其中，一个或多个程序被存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序配置用于执行如上述第一方面或第二方面所述的方法。

第六方面，本申请实施例提供了一种计算机可读取存储介质，所述计算机可读取存储介质中存储有程序代码，所述程序代码可被处理器调用执行如上述第一方面或第二方面所述的方法。

本申请实施例提供的数据交互方法、装置、电子设备及存储介质，应用于电子设备，所述电子设备包括客户端、跨平台模块和网页应用，通过跨平台模块获取客户端发送的操作指令，其中，操作指令由网页应用发送至客户端并由客户端发送至跨平台模块，操作指令用于获取操作参数，然后获取操作指令对应的操作参数，最后通过客户端将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。因此，通过在跨平台模块获取操作指令对应的操作参数，并通过客户端进行传输，实现了跨平台模块和网页应用的双向交互，解决了目前仅可由网页应用给跨平台模块单向提供数据的问题，不仅使得网页应用在面对复杂的业务逻辑或者丰富的页面交互时，仍可表现出较高性能，而且还可兼容网页应用侧的代码，使得网页应用在各种原生应用上也可跨平台运行，从而网页应用无需重新开发即可进行方便的跨平台迁移。

本申请的这些方面或其他方面在以下实施例的描述中会更加简明易懂。

附图说明

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

图1示出了本申请一个实施例提供的数据交互方法的流程示意图；

图2示出了本申请另一个实施例提供的数据交互方法的流程示意图；

图3示出了本申请另一个实施例采用的跨平台模块的架构示意图；

图4示出了本申请另一个实施例提供的一种执行逻辑操作的方法流程图；

图5示出了本申请另一个实施例提供的一种获取操作参数的方法流程图；

图6示出了本申请又一个实施例提供的数据交互方法的方法流程图；

图7示出了本申请实施例提供的一种跨平台模块与网页应用的交互示意图；

图8示出了本申请一个实施例提供的数据交互装置的模块框图；

图9示出了本申请另一个实施例提供的数据交互装置的模块框图；

图10示出了本申请实施例用于执行根据本申请实施例的数据交互方法的电子设备的结构框图；

图11示出了本申请实施例的用于保存或者携带实现根据本申请实施例的数据交互方法的程序代码的存储单元。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。应当理解，此处描述的具体实施例仅用于解释本申请，并不用于限定本申请。

客户端是应用的运行容器，客户端至少包括iOS和Android两个版本，两个版本具有相同的功能和模块，分别运行在iOS操作系统和Android操作系统上。客户端还包括运行在其他操作系统的版本，如Windows、Mac等，在此不作限定。客户端可负责下载、解析、加载、运行应用等。

目前在电子设备上运行的应用主要有两种：一种是基于原生代码(Native Code)的原生应用(Native APP)，另一种是基于JavaScript开发的网页应用(Web APP)。

其中，原生应用是指在每个客户端上，基于原生代码开发的应用，例如IOS客户端上从应用商店下载的应用，原生应用可方便地调用原生功能(如调用摄像头、陀螺仪接口等)，性能较好，但针对不同的客户端或平台需独立开发(同一个应用需分别开发Android版本、iOS版本才可分别在Android、iOS客户端上运行)，开发周期长且成本高。而相对于原生应用，网页应用一般在浏览器上运行，可调用电子设备的原生功能较少，长久以来，当网页应用面对复杂的业务逻辑或者丰富的页面交互时，性能较差。但是，网页应用可跨平台开发和运行，在不同平台的浏览器上运行。具体地，网页应用可以是超文本标记语言第5版(HyperText Markup Language 5，HTML5/H5)等，H5不论是在Mac、Windows、Linux、iOS、Android或是其他平台都可运行。

除此之外，电子设备上运行的应用还包括混合模式移动应用(Hybrid APP)，混合模式移动应用是在原生应用里内置网页应用，其兼具原生应用良好用户交互体验的优势”和“网页应用跨平台开发的优势”。目前很多电商平台都采用混合模式移动应用，例如淘宝、京东、聚划算等。

进一步地，网页应用可在不同客户端的浏览器上运行，也可在原生应用中运行。需要说明的是，本申请实施例中的客户端包括原生代码(Native Code)，客户端可安装有原生应用，并在原生应用中可运行网页应用，其中，网页应用基于客户端的数据交互，可理解为网页应用基于原生代码的交互或基于原生应用的交互。

具体地，若在原生应用中运行网页应用，网页应用需与原生应用进行交互，才可调用原生功能，此时则需要JavaScript调用客户端的原生代码(Native Code)、或者原生代码调用JavaScript来实现。

其中，网页应用与原生应用的交互可以基于客户端的网络视图模块实现，具体地，客户端包括网络视图模块。其中，Android客户端的网络视图模块可以为WebView模块，iOS客户端的网络视图模块可以为UIWebView模块。其中，网络视图模块内置了WebKit引擎，WebKit是一个开源的浏览器引擎，Chrome、Safari浏览器也是基于WebKit，所以可以把网络视图模块当作一个轻量级的浏览器使用，网页应用可以基于网络视图模块运行。

进一步地，以Android客户端为例，原生应用与网页应用的交互可采用WebView模块的DSBridge方案实现，即通过原生应用的WebView模块拦截处理网页应用的消息，并将处理后的数据返回给网页应用。其中，DSBridge是网页应用和原生应用之间通信的桥梁，可实现网页应用和原生应用之间的相互调用。

目前虽然可基于原生应用和网页应用的交互，使得网页应用可调用原生应用，实现原生功能，但这种交互仍依赖于原生应用，使得网页应用甚至原生应用侧的代码需重新开发，才可在不同客户端正常地调用更多原生功能。因此，网页应用仍难以兼顾跨平台开发带来的开发效率和对原生功能的调用效果。

因此，为了克服上述缺陷，本申请实施例提供了一种数据交互方法、装置、电子设备及计算机可读取存储介质。下面将通过具体实施例进行详细说明。

请参阅图1，本申请实施例提供了一种数据交互方法，应用于电子设备，所述电子设备可以为但不限于为智能手机、笔记本电脑、台式电脑、平板电脑、可穿戴电子设备等的电子设备，所述电子设备包括客户端、跨平台模块和网页应用。具体地，该方法的执行主体是跨平台模块，则该方法包括：步骤S101至步骤S103。

步骤S101：跨平台模块获取客户端发送的操作指令。

其中，跨平台模块可以包括基于WebView模块的Cordova、AppCan等，还有使用HTML+JavaScript渲染成原生控件的React Native、Weex等，本实施例对此不作限定。

跨平台模块获取客户端发送的操作指令，具体地，Android客户端具有Android客户端的原生代码，iOS客户端具有iOS客户端的原生代码，跨平台模块获取基于客户端的原生代码发送的操作指令。

其中，操作指令由网页应用发送至客户端并由客户端发送至跨平台模块，操作指令用于获取操作参数。具体地，操作指令可通过页面加载、点击控件等方式触发。例如，在网页应用从当前菜单选择页面切换到下一页面如钱包支付页面时，网页应用加载该钱包支付页面，此时可触发操作指令并发送至客户端，其中，操作指令可以为用于获取帐户ID的指令。

在一种实施方式中，客户端基于网络视图模块拦截网页应用发出的操作指令，并将该操作指令发送至跨平台模块，使得跨平台模块获取客户端发送的操作指令。由此，基于网络视图模块，客户端可与网页应用进行交互。

进一步地，以Android客户端为例，客户端基于WebView模块的DSBridge拦截网页应用发送的操作指令。

步骤S102：获取操作指令对应的操作参数。

其中，操作参数可用于确定所需显示的内容，确定页面或界面渲染所对应的渲染参数等，在此不作限定。作为一种实施方式，可通过解析操作指令，获取操作指令对应的操作参数。作为另一种实施方式，还可预先建立操作指令和操作参数的映射关系，从而通过操作指令可获取操作指令对应的操作参数。

在一些实施方式中，操作指令对应的方法模块(Method)可存储于客户端的指定存储空间，其中，方法模块可对应一段逻辑代码、一个函数等，可用于响应该操作指令。并该方法模块对应一个方法标识，跨平台模块内注册有该方法标识一致的方法模块和该方法模块的回调函数，故在跨平台模块接收到操作指令后，可获取该操作指令对应的方法标识，并将该操作指令分发至客户端内该方法标识对应的方法模块，以执行该方法模块，得到方法模块返回的操作参数，跨平台模块可通过调用该方法模块的回调函数，得到该操作参数，从而获取操作指令对应的操作参数。由此，可通过在跨平台模块注册与客户端协商好的方法标识和方法标识对应的方法模块，并注册该方法模块的回调函数，可获取操作指令对应的操作参数。由于方法模块可存储于客户端的指定存储空间，并运行于客户端，故减小了跨平台模块的存储和开发难度。

进一步地，作为一种实施方式，跨平台模块为Flutter，则Flutter获取操作指令对应的操作参数。具体地，通过在Flutter基于Dart定义一个MethodChannel对象，然后在客户端基于Java注册一个与该MethodChannel对象同名的MethodChannel对象，并在Flutter注册该对象的回调，就可在Flutter调用该MethodChannel对象实现该对象对应的方法，并得到方法返回的操作参数。

在另一些实施方式中，跨平台模块内包括与操作指令对应的方法模块，从而在获取操作指令后可确定该操作指令对应的方法模块，并将该操作指令分发至该方法模块，以获得操作指令对应的操作参数。由此，通过在跨平台模块注册方法模块及其回调函数，将网页应用的调用分解，使得方法模块的分发和执行在跨平台模块中处理，使得跨平台模块可适配各种客户端和操作系统，方便迁移。进一步地，具体的实施方式还可见后述实施例，在此不再赘述。

步骤S103：通过客户端将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。

跨平台模块通过客户端将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。例如，获取的操作指令是用于获取帐户ID，获取到该操作指令对应的操作参数为帐户ID，通过客户端将该帐户ID发送至网页应用，使得网页应用可根据帐户ID加载与该帐户ID对应的支付页面。由此，实现网页应用和跨平台模块的双向交互，即网页应用可向跨平台模块发送数据，且跨平台模块可向网页应用发送数据，解决了目前仅可由网页应用给跨平台模块单向提供数据的问题，从而兼容网页应用侧的代码，使得网页应用无需重新开发即可进行方便的迁移。

本申请实施例提供的数据交互方法，通过跨平台模块获取客户端发送的操作指令，其中，操作指令由网页应用发送至客户端并由客户端发送至跨平台模块，操作指令用于获取操作参数，然后获取操作指令对应的操作参数，最后通过客户端将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。因此，通过在跨平台模块获取操作指令对应的操作参数，并通过客户端进行传输，实现了跨平台模块和网页应用的双向交互，解决了目前仅可由网页应用给跨平台模块单向提供数据的问题，不仅使得网页应用在面对复杂的业务逻辑或者丰富的页面交互时，仍可表现出较高性能，而且还可兼容网页应用侧的代码，使得网页应用在各种原生应用上也可跨平台运行，从而网页应用无需重新开发即可进行方便的跨平台迁移。

请参阅图2，本申请实施例提供了一种数据交互方法，可应用于上述电子设备。所述电子设备包括客户端、跨平台模块和网页应用。具体地，该方法的执行主体是跨平台模块，则该方法包括：步骤S201至步骤S205。

步骤S201：跨平台模块获取客户端发送的操作指令。

在一种实施方式中，跨平台模块可以为Flutter。Flutter是谷歌(Google)开发的一套跨平台框架，支持iOS、Android系统(即平台)开发。Flutter使用自身的高性能渲染引擎(Engine)绘制自己的控件，渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，因此Flutter可保证不同平台、不同设备的体验一致性，并且Flutter的逻辑处理使用支持运行前编译(Ahead-of-time，AOT)的Dart语言，执行效率高于JavaScript。

具体地，请参阅图3，图3示出了Flutter的架构示意图，如图3所示，Flutter包括框架层(Framework)、引擎层(Engine)和嵌入层(Embedder)。

其中，框架层由Dart语言实现，包括Material Design风格的Widget,Cupertino(针对iOS)风格的Widgets，文本/图片/按钮等基础Widgets，渲染，动画，手势等。此部分的核心代码是：Flutter仓库下的Flutter package，以及sky_engine仓库下的io,async,ui(dart:ui库提供了Flutter框架和引擎之间的接口)等package。

其中，引擎层由C++实现，主要包括：Skia,Dart和Text。

Skia是开源的二维图形库，提供了适用于多种软硬件平台的通用API。其已作为Google Chrome，Chrome OS，Android,Mozilla Firefox,Firefox OS等其他众多产品的图形引擎，支持平台还包括Windows7+,macOS10.10.5+,iOS8+,Android4.1+,Ubuntu14.04+等。Skia作为渲染/GPU后端，在Android和Fuchsia上使用FreeType渲染，在iOS上使用CoreGraphics来渲染字体。

Dart部分主要包括:Dart Runtime，Garbage Collection(GC)，如果是Debug模式的话，还包括即时编译(Just In Time，JIT)支持。Release和Profile模式下，是运行前编译(Ahead Of Time，AOT)编译成了原生的arm代码，并不存在JIT部分。

Text即文本渲染，其渲染层次如下:衍生自minikin的libtxt库(用于字体选择，分隔行)。HartBuzz用于字形选择和成型。

其中，嵌入层，用于把Flutter嵌入到各个平台上去，这里做的主要工作包括渲染Surface设置,线程设置，以及插件等。从这里可以看出，Flutter的平台相关层很低，平台(如iOS)只是提供一个画布，剩余的所有渲染相关的逻辑都在Flutter内部，这就使得它具有了很好的跨端一致性。

基于上述Flutter的架构原理，可知基于Flutter，同一套代码既可以在Android系统上运行，又可在iOS系统上运行，并且具有媲美原生(Native)应用的性能。但目前Flutter与网页应用的交互基于javascriptChannels，仅支持单向交互，即只能由网页应用单向地给Flutter提供数据，并不能实现Flutter与网页应用的双向交互，基于本实施例提供的方法可解决前述问题。

作为一种实施方式，基于Flutter的Plugin插件，Plugin插件作为一个数据通道，可实现Flutter和客户端之间的数据交互，即基于Plugin插件，Flutter可获取客户端发送的数据以及向客户端发送数据。具体地，通过在Flutter注册一个MethodChannel对象，然后在客户端注册一个与该MethodChannel对象的名字(如methodName)相同的MethodChannel对象，并在Flutter注册该对象的回调，就可在Flutter调用该MethodChannel对象实现该对象对应的方法模块，并得到方法模块返回的操作参数。同理，客户端也可调用Flutter获得该对象对应的参数。由此基于Plugin插件可实现Flutter调用原生，原生调用Flutter，实现客户端和Flutter的双向交互，实现Flutter与iOS、Android的交互。并Flutter基于Plugin获取客户端发送的操作指令。

其中，MethodChannel负责Dart、原生代码的通信，Flutter通过MethodChannel的名字可在对应平台上找到对应的MethodChannel，实现Flutter和平台的交互。

步骤S202：获取操作指令对应的方法标识。

在一种实施方式中，方法标识至少包括方法名(methodName)，根据操作指令，可获取操作指令对应的方法标识。例如，网页应用在加载钱包支付页面时会触发一个获取帐户ID的操作指令，根据该操作指令，可获取方法标识包括方法名getUid。

在另一种实施方式中，方法标识除了方法名，还可包括命名空间(namespace)，由于不同命名空间下可能存在相同方法名，但一个命名空间中每个方法名是唯一的，因此通过方法名+命名空间，可根据方法标识唯一确定一个方法。

步骤S203：根据操作指令，执行方法标识对应的逻辑操作。

在一种实施方式中，在根据操作指令，执行方法标识对应的逻辑操作之前，跨平台模块注册方法标识对应的逻辑单元及逻辑单元的回调函数，其中，逻辑单元用于执行逻辑操作，回调函数用于获取逻辑操作的执行结果。需要说明的是，逻辑单元可以为方法模块(Method)或者说函数，方法标识对应的逻辑单元包括该方法标识对应的方法模块，该方法模块包括执行逻辑操作的代码逻辑。例如，方法名getUid对应的逻辑单元包括如何获取帐户ID的一段代码或者说一个方法体(handler)，该逻辑单元所可执行的逻辑操作为获取帐户ID。

具体地，网页应用发送的操作指令包括用于调用一个方法标识对应的逻辑单元，Flutter在初始化网络视图模块后，注册了与网页应用协商好的方法标识，并注册有该方法标识对应的逻辑单元及逻辑单元的回调函数，逻辑单元在Flutter执行。在一种实施方式中，通过网络视图模块初始化，注册方法标识对应的回调函数，可通过如下代码实现：

在网页应用发送操作指令后，Flutter可根据操作指令对应的方法标识，确定方法标识对应的逻辑单元，运行该逻辑单元以执行该方法标识对应的逻辑操作，并得到逻辑操作的执行结果，也就是说，当网页应用对相关的方法标识发起调用，Flutter就可得到相应的执行结果。由此，通过在Flutter注册与网页应用协商好的方法标识、逻辑单元及其回调函数，将网页应用的调用分解，把方法映射机制由原来的在客户端原生处理改为在Flutter处理，由Flutter处理操作指令的分发和逻辑操作的执行，从而将网页应用的调用与原生应用分解，使得网页应用无需重新开发，可直接往Flutter侧迁移，以使得网页应用无需重新开发，即可在不同客户端的原生应用中正常运行，基于Flutter实现媲美原生的性能。

进一步地，作为一种实施方式，跨平台模块根据方法标识对操作指令进行分发处理，以使方法标识对应的逻辑单元执行对应的逻辑操作，具体地，请参阅图4，图4示出了本实施例提供的一种执行逻辑操作的方法流程图，该方法包括：步骤S2031至步骤S2032。

步骤S2031：将操作指令分发至方法标识对应的逻辑单元。

跨平台模块获取操作指令对应的方法标识后，可根据该方法标识确定该方法标识对应的逻辑单元，逻辑单元用于执行逻辑操作。由此，在网页应用调用方法标识时，客户端获取到网页应用发送的与方法标识对应的操作指令，并发送至Flutter，Flutter相当于中心化的分发机构，将方法标识映射到已注册过的逻辑单元内，以执行逻辑单元内的逻辑操作。

具体地，在一种实施方式中，在Flutter实现方法映射机制，根据操作指令对应的方法标识定位对应的逻辑单元，可通过下述代码实现。

其中，上述代码中，dschannel.methodCallbackMapping[method](

JavascriptMessage(messageData),callback)用于通过namespace,methodName的方法标识定位逻辑单元。

步骤S2032：根据操作指令，执行方法标识对应的逻辑操作。

Flutter已注册有方法标识对应的逻辑单元，Flutter通过将操作指令分发至方法标识对应的逻辑单元后，可执行该逻辑单元的逻辑操作。

步骤S204：获取逻辑操作的执行结果，并将执行结果作为操作参数。

在一种实施方式中，可通过调用回调函数获取逻辑操作的执行结果，如图5所示，图5示出了本实施例提供的一种获取操作参数的方法流程图，具体地，该方法包括：步骤S2041至步骤S2042。

步骤S2041：调用方法标识对应的回调函数。

在根据操作指令，执行方法标识对应的逻辑操作之前，跨平台模块注册方法标识对应的逻辑单元及逻辑单元的回调函数，其中，逻辑单元用于执行逻辑操作，回调函数用于获取逻辑操作的执行结果。

在一种实施方式中，以方法标识对应nameSpace:User,methodName:getUid为例，该方法标识对应的逻辑操作用于向原生应用索取帐户ID，调用方法标识对应的回调函数可通过如下代码实现：

进一步地，Flutter可预先配置有至少一个逻辑单元及其回调函数，并通过Flutter侧的网络视图模块初始化，完成对逻辑单元的方法标识、逻辑单元及其回调函数的注册。在一些实施方式中，操作指令可包括多个方法标识，Flutter获取该多个方法标识后，可一一分发至该多个方法标识对应的逻辑单元，并得到逻辑单元执行后的结果作为操作参数。

在一些实施方式中，操作指令可包括多个方法标识，Flutter获取该多个方法标识后，可一一分发至该多个方法标识对应的逻辑单元，并调用该多个方法标识对应的回调函数。

步骤S2042：获取回调函数的回调结果，并将回调结果作为操作参数。

Flutter已注册有各方法标识对应的逻辑单元及其回调函数，通过回调函数可获取回调函数的回调结果，并将回调结果作为操作参数。具体地，以方法标识对应nameSpace:User,methodName:getUid为例，该方法标识对应的回调函数的回调结果可为获取到的帐户ID对应的字符串，在上述实现代码中，获取的帐户ID可以为111000，并将111000作为操作参数。

在一种实施方式中，Flutter调用方法标识对应的回调函数，并记录回调函数的序号如callbackId，根据该回调函数的序号，将回调函数的回调结果作为操作参数返回给客户端。其中，回调函数的序号可根据网页应用发送的操作指令确定，即操作指令包括回调函数的序号。

步骤S205：通过客户端将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。

其中，Flutter通过Plugin将操作参数返回给客户端，指示客户端基于网络视图模块将操作参数返回给网页应用。在一种实施方式中，客户端根据回调函数的序号callbackId将操作参数返回至网页应用。

在一种实施方式中，Flutter将操作参数发送至网页应用，可通过如下代码实现：

在上述代码中，callbackId为网页应用传给Flutter的，data:message.message为Flutter传回给网页应用的操作参数。以方法标识对应nameSpace:User,methodName:getUid为例，方法标识对应的逻辑操作是用于获取原生应用的帐户ID，Flutter执行逻辑操作后获得的操作参数是帐户ID，Flutter将帐户ID通过客户端发送至网页应用，指示网页应用根据帐户ID申请该帐户ID的相关帐户信息。进一步地，在一种实施方式中，网页应用根据帐户ID向服务器申请该帐户ID的相关帐户信息，相关帐户信息可以包括帐户昵称等，在此不作限定。

进一步地，Flutter之所以可将操作参数通过上述代码回传给网页应用，是预先定义了一个DSBridgeUtil的类，具体地，可通过下述代码实现：

另外，在一些实施例中，还可由Flutter调用网页应用。具体地，网页应用注册有与Flutter协调好的方法标识及其对应的逻辑单元，Flutter向网页应用发送操作指令，指示网页应用通过方法标识执行方法标识对应的逻辑单元，并回调执行后获得的操作参数给Flutter，其中，方法标识根据操作指令确定，操作参数与操作指令对应。由于网页应用的迭代方便，所以在需要实现新的功能或需要实现新的方法时，可通过在网页应用注册该方法或功能实现对应的逻辑单元，并注册与Flutter协商好的方法标识，以及注册与方法标识对应的逻辑单元，从而在获取到Flutter发送的操作指令时，可通过网页应用执行新的方法，由此利用网页应用易于迭代的优势，使得可通过更新网页应用，以在Flutter中实现新的功能或方法，降低迭代成本和提高更新效率。

例如，在一种具体的实施方式中，在基于Flutter编写的Flutter应用中输入贷款方式、年限、金额三个参数，并将三个参数随操作指令发送至网页应用，可以使得网页应用获得该操作指令中的三个参数，并根据操作指令对应的方法标识，执行对应的逻辑操作即方法，例如根据三个参数计算每月还款金额，则网页应用可得到该逻辑操作对应的回调作为操作参数，即操作参数为每月还款金额，将该操作参数返回至Flutter应用，指示Flutter应用根据该操作参数执行特定的操作，例如显示在该操作参数。由此通过Flutter调用网页应用，可方便地通过网页应用执行新的方法，同时还可基于Flutter实现媲美原生的性能。具体地，可通过下述代码实现。其中，下述代码中handleSth对应方法标识的方法名，[1,2,3,]对应Flutter向网页应用发送的指令参数。

需要说明的是，上述步骤中未详细描述的部分，可参考前述实施例，在此不再赘述。

本申请实施例提供的数据交互方法，通过在Flutter模块注册与网页应用协商一致的方法标识、与方法标识对应的逻辑单元及其回调函数，从而可根据网页应用发送的操作指令，将操作指令分发至对应的逻辑单元，以执行操作指令对应的逻辑操作，并通过调用该方法标识对应的回调函数，获得操作指令对应的操作参数，并将该操作参数发送至网页应用，以指示网页应用根据操作参数执行指定操作。由此，通过注册与网页应用协商好的方法标识，将方法映射机制由原来的在客户端原生处理改为统一在Flutter模块作分发处理，分发到各个注册回调函数的地方，并通过客户端将回调函数的回调结果返回至网页应用。从而通过跨平台模块不仅可兼容了原来网页应用侧的代码，使得同一套的网页应用代码无需重新开发即可直接往Flutter侧迁移。大大简化了跨平台开发操作，并提高了跨平台开发效率，并且基于跨平台模块Flutter，网页应用在面对复杂的业务逻辑和丰富的交互需求时，仍可实现媲美原生的性能。

请参阅图6，其示出了一种数据交互方法，可应用于上述电子设备。所述电子设备包括客户端、跨平台模块和网页应用。具体地，该方法的执行主体是客户端，则该方法包括：步骤S301至步骤S303。

步骤S301：客户端获取网页应用发送的操作指令，并将操作指令发送至跨平台模块。

客户端基于网络视图模块获取网页应用发送的操作指令，具体地，网络视图模块可以是WebView模块、UIWebView模块，客户端可基于WebView模块的DSBridge获取网页应用发送的操作指令，并基于Plugin插件将操作指令发送至跨平台模块。

步骤S302：获取跨平台模块返回的操作指令对应的操作参数。

客户端将操作指令发送至跨平台模块后，指示跨平台模块获取操作指令对应的方法标识，并根据操作指令，执行方法标识对应的逻辑操作，获取逻辑操作的执行结果并作为操作参数返回至客户端，然后，客户端获取跨平台模块返回的操作指令对应的操作参数。

步骤S303：将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。

客户端基于网络视图模块将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。

需要说明的是，上述步骤中未详细描述的部分，可参考前述实施例，在此不再赘述。

本申请实施例提供的数据交互方法，通过客户端获取网页应用发送的操作指令，并将操作指令发送至跨平台模块，然后获取跨平台模块返回的操作指令对应的操作参数，最后将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。因此，通过客户端在跨平台模块和网页应用之间传输数据，使得跨平台模块获取网页应用发送的操作指令后，获得操作指令对应的操作参数并返回至网页应用，实现了跨平台模块和网页应用的双向交互，解决了目前仅可由网页应用给跨平台模块单向提供数据的问题，不仅使得网页应用在面对复杂的业务逻辑或者丰富的页面交互时，仍可表现出较高性能，而且还可兼容网页应用侧的代码，使得网页应用在各种原生应用上也可跨平台运行，从而网页应用无需重新开发即可进行方便的跨平台迁移。

下面结合图7对本申请实施例可实现的跨平台模块与网页应用的双向交互进行示例性的说明。以跨平台模块为Flutter、网页应用为H5应用为例，具体地：

如图7所示，H5应用在加载钱包支付页面时，需获取支付帐户的帐户ID，此时客户端基于网络视图模块获取到网页应用发送的操作指令，该操作指令用于获取帐户ID，并由客户端基于Plugin发送至Flutter，以使Flutter获取操作指令对应的方法标识如getUid，并由Flutter分发至getUid对应的逻辑单元，执行该逻辑单元的逻辑操作以获取帐户ID，获取逻辑操作的执行结果为获取到的帐户ID，并基于Plugin将获取到的帐户ID作为操作参数返回至客户端，客户端再基于网络视图模块将获取到的帐户ID发送至网页应用，指示H5应用根据获取到的帐户ID执行指定操作，指定操作可以包括显示帐户ID等，在此不作限定。由此，实现了Flutter和H5应用之间的双向交互，解决了现有仅可由H5应用单向地向Flutter发送数据的痛点，使得Flutter和H5应用之间的交互接口暴露给开发者，使得无需对H5重新开发，即可将同一套页面直接往Flutter侧迁移，从而兼容各平台，大大提高开发效率，不仅如此基于Flutter还可在提高开发效率的基础上实现媲美原生应用的功能。

需要说明的是，上述示例仅为便于理解本方案，所例举的基于本申请实施例提供的数据交互方法的一种实施方式，并不是唯一实施方式，不对本申请实施例的范围构成任何限定。

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

请参阅图8，图8示出了本申请实施例提供的一种数据交互装置800的模块框图，可应用于上述电子设备，所述电子设备包括客户端、跨平台模块和网页应用。下面将针对图8所示的模块框图进行阐述，所述数据交互装置800包括：指令获取模块810、参数获取模块820以及参数返回模块830，其中：

指令获取模块810，用于所述跨平台模块获取所述客户端发送的操作指令，所述操作指令由所述网页应用发送至所述客户端，所述操作指令用于获取操作参数。

参数获取模块820，用于获取所述操作指令对应的操作参数。

参数返回模块830，用于将所述操作参数发送至所述网页应用，指示所述网页应用根据所述操作参数执行指定操作。

进一步地，所述指令获取模块810包括：标识获取单元、操作执行单元以及参数获取单元，其中：

标识获取单元，用于获取所述操作指令对应的方法标识；

操作执行单元，用于根据所述操作指令，执行所述方法标识对应的逻辑操作；

参数获取单元，用于获取所述逻辑操作的执行结果，并将所述执行结果作为所述操作参数。

进一步地，所述参数获取单元包括：回调调用子单元以及参数获取子单元，其中：

回调调用子单元，用于调用所述方法标识对应的回调函数；

参数获取子单元，用于获取所述回调函数的回调结果，并将所述回调结果作为所述操作参数。

进一步地，所述操作执行单元包括：

指令分发单元，用于将所述操作指令分发至所述方法标识对应的逻辑单元；

逻辑执行单元，用于根据所述操作指令，执行所述方法标识对应的逻辑操作。

进一步地，所述数据交互装置800还包括：回调注册模块，其中：

注册所述方法标识对应的逻辑单元及所述逻辑单元的回调函数，所述逻辑单元用于执行所述逻辑操作，所述回调函数用于获取所述逻辑操作的执行结果。

本实施例提供的数据交互装置用于实现前述方法实施例中相应的数据交互方法，并具有相应的方法实施例的有益效果，在此不再赘述。

请参阅图9，图9示出了本申请实施例提供的一种数据交互装置900的模块框图，可应用于上述电子设备，所述电子设备包括客户端、跨平台模块和网页应用。下面将针对图9所示的模块框图进行阐述，所述数据交互装置900包括：指令发送模块910、参数返回模块920以及参数发送模块930，其中：

指令发送模块910，用于所述客户端获取所述网页应用发送的操作指令，并将所述操作指令发送至所述跨平台模块；

参数返回模块920，用于获取所述跨平台模块返回的所述操作指令对应的操作参数；

参数发送模块930，用于将所述操作参数发送至所述网页应用，指示所述网页应用根据所述操作参数执行指定操作。

本实施例提供的数据交互装置用于实现前述方法实施例中相应的数据交互方法，并具有相应的方法实施例的有益效果，在此不再赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述装置和模块的具体工作过程，可以参阅前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，所显示或讨论的模块相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

另外，在本申请各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。

请参阅图10，其示出了本申请实施例提供的一种电子设备的结构框图。该电子设备1000可以是智能手机、平板电脑、笔记本电脑、台式电脑、可穿戴电子设备等能够运行应用程序的电子设备。本申请中的电子设备1000可以包括一个或多个如下部件：处理器1010、存储器1020以及一个或多个应用程序，其中一个或多个应用程序可以被存储在存储器1020中并被配置为由一个或多个处理器1010执行，一个或多个程序配置用于执行如前述方法实施例所描述的方法。

处理器1010可以包括一个或者多个处理核。处理器1010利用各种接口和线路连接整个电子设备1000内的各个部分，通过运行或执行存储在存储器1020内的指令、程序、代码集或指令集，以及调用存储在存储器1020内的数据，执行电子设备1000的各种功能和处理数据。可选地，处理器1010可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable Logic Array，PLA)中的至少一种硬件形式来实现。处理器1010可集成中央处理器(Central Processing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器1010中，单独通过一块通信芯片进行实现。

进一步地，存储器1020包括跨平台模块1021、原生模块1022和网页应用1023，其中，原生模块1022的具体实施方式可对应上述实施例中客户端的具体实施方式，则跨平台模块1021、原生模块1022和网页应用1023的具体实施方式可参考前述实施例，在此不再赘述。

存储器1020可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。存储器1020可用于存储指令、程序、代码、代码集或指令集。存储器1020可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于实现至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现下述各个方法实施例的指令等。存储数据区还可以存储电子设备1000在使用中所创建的数据(比如电话本、音视频数据、聊天记录数据)等。

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

请参阅图11，其示出了本申请实施例提供的一种计算机可读取存储介质的结构框图。该计算机可读取存储介质1100中存储有程序代码，所述程序代码可被处理器调用执行上述应用于终端的方法实施例中所描述的方法。

计算机可读取存储介质1100可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。可选地，计算机可读取存储介质1100包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。计算机可读取存储介质1100具有执行上述方法中的任何方法步骤的程序代码1110的存储空间。这些程序代码可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。程序代码1110可以例如以适当形式进行压缩。

综上所述，本申请实施例提供的数据交互方法、装置、电子设备及存储介质，应用于电子设备，所述电子设备包括客户端、跨平台模块和网页应用，通过跨平台模块获取客户端发送的操作指令，其中，操作指令由网页应用发送至客户端并由客户端发送至跨平台模块，操作指令用于获取操作参数，然后获取操作指令对应的操作参数，最后通过客户端将操作参数发送至网页应用，指示网页应用根据操作参数执行指定操作。因此，通过在跨平台模块获取操作指令对应的操作参数，并通过客户端进行传输，实现了跨平台模块和网页应用的双向交互，解决了目前仅可由网页应用给跨平台模块单向提供数据的问题，不仅使得网页应用在面对复杂的业务逻辑或者丰富的页面交互时，仍可表现出较高性能，而且还可兼容网页应用侧的代码，使得网页应用在各种原生应用上也可跨平台运行，从而网页应用无需重新开发即可进行方便的跨平台迁移。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不驱使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (10)

1.一种数据交互方法，其特征在于，应用于电子设备，所述电子设备包括客户端、跨平台模块和网页应用，所述方法包括：

所述跨平台模块获取所述客户端发送的操作指令，所述操作指令由所述网页应用发送至所述客户端并由所述客户端发送至所述跨平台模块，所述操作指令用于获取操作参数；

获取所述操作指令对应的操作参数；

通过所述客户端将所述操作参数发送至所述网页应用，指示所述网页应用根据所述操作参数执行指定操作。

2.根据权利要求1所述的方法，其特征在于，所述获取所述操作指令对应的操作参数，包括：

获取所述操作指令对应的方法标识；

根据所述操作指令，执行所述方法标识对应的逻辑操作；

获取所述逻辑操作的执行结果，并将所述执行结果作为所述操作参数。

3.根据权利要求2所述的方法，其特征在于，所述获取所述逻辑操作的执行结果，并将所述执行结果作为所述操作参数，包括:

调用所述方法标识对应的回调函数；

获取所述回调函数的回调结果，并将所述回调结果作为所述操作参数。

4.根据权利要求2或3所述的方法，其特征在于，所述根据所述操作指令，执行所述方法标识对应的逻辑操作之前，所述方法还包括：

注册所述方法标识对应的逻辑单元及所述逻辑单元的回调函数，所述逻辑单元用于执行所述逻辑操作，所述回调函数用于获取所述逻辑操作的执行结果。

5.根据权利要求2所述的方法，其特征在于，所述根据所述操作指令，执行所述方法标识对应的逻辑操作，包括：

将所述操作指令分发至所述方法标识对应的逻辑单元；

根据所述操作指令，执行所述方法标识对应的逻辑操作。

6.一种数据交互方法，其特征在于，应用于电子设备，所述电子设备包括客户端、跨平台模块和网页应用，所述方法包括：

所述客户端获取所述网页应用发送的操作指令，并将所述操作指令发送至所述跨平台模块；

获取所述跨平台模块返回的所述操作指令对应的操作参数；

将所述操作参数发送至所述网页应用，指示所述网页应用根据所述操作参数执行指定操作。

7.一种数据交互装置，应用于电子设备，所述电子设备包括客户端、跨平台模块和网页应用，所述装置包括：

指令获取模块，用于所述跨平台模块获取所述客户端发送的操作指令，所述操作指令由所述网页应用发送至所述客户端，所述操作指令用于获取操作参数；

参数获取模块，用于获取所述操作指令对应的操作参数；

参数返回模块，用于将所述操作参数发送至所述网页应用，指示所述网页应用根据所述操作参数执行指定操作。

8.一种数据交互装置，应用于电子设备，所述电子设备包括客户端、跨平台模块和网页应用，所述装置包括：

指令发送模块，用于所述客户端获取所述网页应用发送的操作指令，并将所述操作指令发送至所述跨平台模块；

参数返回模块，用于获取所述跨平台模块返回的所述操作指令对应的操作参数；

参数发送模块，用于将所述操作参数发送至所述网页应用，指示所述网页应用根据所述操作参数执行指定操作。

9.一种电子设备，其特征在于，包括：

存储器；

一个或多个处理器，与所述存储器耦接；

一个或多个程序，其中，所述一个或多个程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序配置用于执行如权利要求1-5任一项所述的方法。

10.一种计算机可读取存储介质，其特征在于，所述计算机可读取存储介质中存储有程序代码，所述程序代码可被处理器调用执行如权利要求1-5任一项所述的方法。

Images