android js桥接,一种JavaScript和原生APP之间数据交互方法与流程

本发明涉及通信技术领域，具体的说是一种JavaScript和原生APP之间数据交互方法。

背景技术：

在开发移动应用时，会用到webview控件(浏览器控件)进行加载网页展示进行交互，会出现javascript调用native code(原生功能)或者native code调用javascript的情况。通常做法是利用原生API进行操作。

在传统的移动设备APP中，大多需要对每个系统进行适配，此种开发方式成本高、周期长，Android、iOS以及Windows Phone都需要单独开发；在代码中频繁判断手机型号调用不通的API，代码冗余难维护。

技术实现要素：

本发明针对目前技术发展的需求和不足之处，提供一种JavaScript和原生APP之间数据交互方法。

本发明的一种JavaScript和原生APP之间数据交互方法，解决上述技术问题采用的技术方案如下：

一种JavaScript和原生APP之间数据交互方法，利用引入Android系统下原生APP的Webview组件、IOS系统下UIWebView组件进行原生APP加载Html网页，来实现JavaScript与原生APP两者之间的数据交互，从而使用原生功能。

实现JavaScript与原生APP两者之间的数据交互，其具体操作包括：

在业务层调用JavaScript API封装层提供的API函数；

JavaScript API封装层通过交互桥接层提供的统一原生交互接口，与原生API封装层交互；

原生API封装层，使用原生代码对移动端硬件的接口函数进行封装；

利用封装的接口函数请求原生功能的数据。

JavaScript API封装层提供的API函数为：

cmApi.barcode.scan(‘mainModule.getScanQRcodeCallback’)。

统一原生交互接口为：

利用封装的接口函数请求原生功能的数据，该请求操作包括同步请求和异步请求两种请求方法；

同步请求的方法可以将处理数据完成后的结果直接返回给业务层；

异步请求的方法可以将处理数据完成后的结果返回给统一的回调函数，再由回调函数返回给业务层。

回调函数的格式为：

NSString*callback＝[[@”cmApi.router.loadContent(‘”

stringByAppendingString:userInfo[@”custom_content”][@”funcPath”]]

stringByAppendingString:@“’)”]；

[webView stringByEvaluatingJavaScriptFromString:callback]；

通过上述回调函数将处理数据完成后的结果返回给业务层。

引入Webview组件后，配置Webview组件，进行网页页面加载，随后，在JavaScript设置一个NativeBridge，原生APP注入一个JSBridge，NativeBridge和JSBridge按照数据约定来进行双向通信和分发逻辑。

在JavaScript设置NativeBridge时，需要在NativeBridge接口中约定传递三个参数：字符串类型的原生实现类、字符串类型的实现方法、json类型的传递参数。

原生APP注入一个JSBridge时，需要在JSBridge接口中约定传递两个参数：字符串类型的回调函数、json类型的返回参数。

本发明的一种JavaScript和原生APP之间数据交互方法，与现有技术相比具有的有益效果是：

本发明利用引入Android系统下原生APP的Webview组件、IOS系统下UIWebView组件进行原生APP加载Html网页，来实现JavaScript与原生APP两者之间的数据交互，从而使用原生功能，以便于跨平台使用，节省开发费用的同时还缩短了开发周期。

具体实施方式

为使本发明的技术方案、解决的技术问题和技术效果更加清楚明白，以下结合具体实施例，对本发明的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下获得的所有实施例,都在本发明的保护范围之内。

本实施例提供一种JavaScript和原生APP之间数据交互方法，利用引入Android系统下原生APP的Webview组件、IOS系统下UIWebView组件进行原生APP加载Html网页，来实现JavaScript与原生APP两者之间的数据交互，从而使用原生功能。

实现JavaScript与原生APP两者之间的数据交互，其具体操作包括：

在业务层调用JavaScript API封装层提供的API函数；

JavaScript API封装层通过交互桥接层提供的统一原生交互接口，与原生API封装层交互；

原生API封装层，使用原生代码对移动端硬件的接口函数进行封装；

利用封装的接口函数请求原生功能的数据。

JavaScript API封装层提供的API函数为：

cmApi.barcode.scan(‘mainModule.getScanQRcodeCallback’)。

统一原生交互接口为：

利用封装的接口函数请求原生功能的数据，该请求操作包括同步请求和异步请求两种请求方法；

同步请求的方法可以将处理数据完成后的结果直接返回给业务层；

异步请求的方法可以将处理数据完成后的结果返回给统一的回调函数，再由回调函数返回给业务层。

回调函数的格式为：

NSString*callback＝[[@”cmApi.router.loadContent(‘”

stringByAppendingString:userInfo[@”custom_content”][@”funcPath”]]

stringByAppendingString:@“’)”]；

[webView stringByEvaluatingJavaScriptFromString:callback]；

通过上述回调函数将处理数据完成后的结果返回给业务层。

引入Webview组件后，配置Webview组件，进行网页页面加载，随后，在JavaScript设置一个NativeBridge，原生APP注入一个JSBridge，NativeBridge和JSBridge按照数据约定来进行双向通信和分发逻辑。

在JavaScript设置NativeBridge时，需要在NativeBridge接口中约定传递三个参数：字符串类型的原生实现类、字符串类型的实现方法、json类型的传递参数。

原生APP注入一个JSBridge时，需要在JSBridge接口中约定传递两个参数：字符串类型的回调函数、json类型的返回参数。

基于Android系统：原生APP启动时，将NativeBridge接口初始化并进行注入：

通过注解的方式在原生APP启动时，维护实现类名称与实现类路径的关联关系，用于调用时通过java的反射机制调用实现类中的指定方法：

基于IOS：使用JavaScriptCore库，将JavaScript传入的回调函数在objective-c或者swift端持有，并回去回调这个回调函数。

JSExportAs是用来将objective-c的方法映射为JavaScript的函数：

JavaScript可以通过webBridge.login来进行调用原生端开放的API：