[发明专利]一种基于reactnative的Native App与Web App的通信方法

说明书

本发明提供一种基于reactnative的Native App与Web App的通信方法。所述方法应用于移动终端Native App,包括引入webView组件并在webView中注册jsapi；通过webView的postMessage向Web App发送第一通信数据；接收Web App通过jsapi返回的第二通信数据；解析数据并进行业务处理。本发明为Native App和Web App提供了高效的通信交互方法，降低开发成本，便于进行代码维护和代码拓展，减少开发人员之间协调沟通研究等工作，提高工作效率。

技术领域

本发明涉及通信交互领域，特别是涉及一种基于reactnative的Native App与WebApp的通信方法。

背景技术

由于Web页面具有开发及部署灵活、媒体类型丰富等优点，使得Web页面被广泛使用。但Web页面在移动端的用户体验往往要弱于Native App，基于此，将两者结合起来进行混合开发，可以使Native App达到更好的使用体验，故而Web页面不可避免的要与移动端进行大量交互。而当前Web和reactnative虽然提供了通信的能力，但缺少一个高效的通信方法，会给reactnative和Web带来较大的开发成本，不利于维护和拓展代码以及不利于团队协作。

发明内容

鉴于以上所述现有技术的缺点，本发明的目的在于提供一种基于reactnative的Native App与Web App的通信方法，用于解决现有技术中的以上问题。

为实现上述目的及其他相关目的，本发明提供一种基于reactnative的NativeApp与Web App的通信方法，应用于移动终端Native App，所述方法包括：引入webView组件并在webView中注册jsapi；通过webView的postMessage向Web App发送第一通信数据；接收Web App通过jsapi返回的第二通信数据；解析数据并进行业务处理。

于本发明一实施例中，所述方法中所述在webView中注册jsapi的方式为：‘(function(){window.postMessage＝function(data){window.ReactNativeWebView.postMessage(data)}})()’。

于本发明一实施例中，所述方法中所述第一通信数据包括：通信数据方法、数据编码格式和及回复的数据格式。

于本发明一实施例中，所述方法将所述第一通信数据编码成JSON字符串，其中，JSON字符串包括字段key和param，key为字符串类型，param为map。

于本发明一实施例中，所述方法中在接收Web App通过jsapi发送的第二通信数据前，还包括：在webView中绑定onMessage方法。

于本发明一实施例中，所述方法中接收Web App通过jsapi发送的第二通信数据后还包括：在所述第二通信数据字符串中增加字段response以生成第三通信数据，其中，response为map结构，包装有回复数据；将所述第三通信数据通过webView.postMessage发送至Web App

于本发明一实施例中，本发明还提供一种基于reactnative的Native App与WebApp的通信方法，应用于移动终端Web App，所述方法包括：通过监听message事件来接收Native App发送的所述第一通信数据；根据Native App注册的jsapi向Native App发送所述第二通信数据。

于本发明一实施例中，所述方法中所述第二通信数据包括：通信数据方法、数据编码格式和及回复的数据格式。