JS与Native交互初识

本文将介绍iOS客户端UIWebView与JavaScript进行交互,实现数据传输,界面切换,控件显示等功能：

需求背景

客户端开发的优缺点:
优点: 交互流畅,交互性强,对于复杂手势和精彩动画的支持到位,可以给用户更好的交互体验.
缺点:开发成本高,上线时间长,可及时修改性差

Web开发的优缺点:
优点:灵活性高,上线不受苹果审核限制
缺点:与客户端原生控件相比,交互较差

交互方式

两个问题:
1.Native(UIWebView)能否直接调用JS方法?
YES
2.JS是否可以直接调用Native方法?
NO

Native调用JS方法
核心方法:
-(NSString*)stringByEvaluatingJavaScriptFromString:(NSString *)script;
使用该方法,等同于直接执行script语句

JS调用Native方法
核心技术:
JS通过触发UIWebViewshouldStartLoadWithRequest方法(修改src等方式),Native通过约定的方法进行重定向,客户端实现响应操作.常用的方法有以下两种
1.Native拦截URL,异步调用
2.Native注册协议,通过拦截canInitWithRequest,可以选择同步或者异步

简化操作

上述文中看出,交互难点在与JS调用Native方法,目前比较好的第三方类有UIWebViewJavaScriptBridge.

UIWebViewJavaScriptBridge

以UIWebView为载体,通过bridge沟通JS和Native.
使用方法:JS端和Native端,均实例化一个bridge对象,通过注册方法(registerHandler)和调用方法(callHandler)实现相互调用
想要调用方法,被调用者必须注册这个方法,保证方法名一直即可,然后在方法的回调内进行操作

Cordova

CordovaActivity：Cordova Activity入口，已实现PluginManager、WebView的相关初始化工作, 只需继承CordovaActivity实现自己的业务需求。
PluginManager： 插件管理器
ExposedJsApi ：javascript调用Native， 通过插件管理器PluginManager 根据service找到具体实现类。
NativeToJsMessageQueue：Native调用javascript，主要包括三种方式：loadUrl 、 轮询、反射WebViewCore执行js

UIWebViewJavaScriptBridge的使用

原理分析
对bridge进一步封装,注册约定好的方法,并进行实现
举例:
实例化

[WebViewJavascriptBridge enableLogging];self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {}];

注册方法

[self.bridge registerHandler:@"share" handler:^(id data, WVJBResponseCallback responseCallback) {    NSLog(@"data--%@",data);    [self share:data];    responseCallback(@NO);}];

调用JS方法

[self.bridge  callHandler:@"groupMessages" data:@"test" responseCallback:^(id responseData) {        NSLog(@"groupMessages%@",responseData);    }];                                                                                                     杏树林研发  赵亚男