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);
}];