[发明专利]H5页面和ReactNative的交互方法、装置、电子设备及可读存储介质

说明书

本申请涉及计算机技术领域，公开了一种H5页面和ReactNative的交互方法、装置、电子设备及可读存储介质，其中，方法包括：调用方的桥接文件利用预设方法将调用请求发送至处理方；处理方接收调用请求，获取调用请求中包括的字符串；处理方解析字符串，确定第一方法名、参数体和回调标识，其中，第一方法名为处理方的业务对应的方法名；处理方根据第一方法名，确定第一方法；处理方将参数体传入第一方法；处理方执行第一方法，得到结果数据；处理方根据回调标识，确定回调函数；处理方的桥接文件利用预设方法，将调用结果传入回调函数，以将结果数据发送至调用方。本申请的方法，实现了H5页面或ReactNative端可以通过JSBridge文件进行双向的交互传递数据。

技术领域

本申请涉及计算机技术领域，尤其是涉及到一种H5页面和ReactNative的交互方法、装置、电子设备及可读存储介质。

背景技术

现有技术中，H5页面调用ReactNative时，ReactNative向WebView注入交互对象，H5页面通过WebView底层原生方法回调ReactNative交互对象，实现传输数据；ReactNative调用H5页面时，通过Webview可直接调用javascript，实现传输数据。然而该方法中，ReactNative调用H5页面的javascript方法后无法获取到javascript方法的返回值，H5页面在做一些处理后也无法把数据直接返回给ReactNative的调用处，即H5页面和ReactNative平台之间的交互都是单线程的，只能互发单向数据，导致面对需要发送的数据有回调的场景时无能为力。

发明内容

有鉴于此，本申请提供了一种H5页面和ReactNative的交互方法、装置、电子设备及可读存储介质，以解决H5页面和ReactNative之间的交互只能通过互发单向消息，导致面对需要发送的消息有回调的场景时无能为力的问题。

第一方面，提供了一种H5页面和ReactNative的交互方法，应用于移动终端，移动终端包括相互关联的H5页面和ReactNative，该方法包括：

调用方的桥接文件利用预设方法将调用请求发送至处理方；

处理方接收调用请求，获取调用请求中包括的字符串；

处理方解析字符串，确定第一方法名、参数体和回调标识，其中，第一方法名为处理方的业务对应的方法名；

处理方根据第一方法名，确定第一方法；

处理方将参数体传入第一方法；

处理方执行第一方法，得到结果数据；

处理方根据回调标识，确定回调函数；

处理方的桥接文件利用预设方法，将调用结果传入回调函数，以将结果数据发送至调用方；

其中，在调用方为H5页面的情况下，处理方为ReactNative；或，在调用方为ReactNative的情况下，处理方为H5页面。

可选地，调用方的桥接文件利用预设方法将调用请求发送至处理方的步骤，具体包括：

调用方确定待调用的第一方法的第一方法名、第一方法的参数体和回调函数；

调用方将回调函数设置于预设属性上，得到回调标识；

调用方将第一方法名、参数体和回调标识封装成字符串；

调用方的桥接文件利用预设方法将字符串发送至处理方。

可选地，调用方的桥接文件利用预设方法将调用请求发送至处理方之前，该方法还包括：

设置桥接文件，并将桥接文件分别注入H5页面和ReactNative；