cordova与ios native code交互的原理
非常早曾经写了一篇博客,总结cordova插件怎么调用到原生代码:cordova调用过程,只是写得太水。基本没有提到原理。近期加深了一点理解,又一次补充说明一下
js调用native
以下是我们产品中的代码片段:
datePicker.show(options, function (date) {
var month = date.getMonth() + 1;
callback(null, date.getFullYear() + "-" + month + "-" + date.getDate());
});
cordova插件终于表现出来的都是js接口,而且调用者全然不须要知道自己在调用一个cordova插件
可是在不论什么cordova js方法内部,最后一定会调用cordova.exec函数:
cordova.exec(successCallback, errorCallback, "DatePicker", "show", []);
然后就进入了关键的cordova.exec函数。这是cordova框架的js端的最后一环。就是由它完毕对ios native的调用
在exec函数里,首先会推断平台。可能是android,ios或者wp,其它平台本文省略。假设是ios平台,cordova会採用下面2种方式的一种。来与ios native code交互
通过iframe
cordova.exec往当前的html中插入一个不可见的iframe,从而向UIWebView请求载入一个特殊的URL。这个URL里当然就包括了要调用的native plugin的类名,方法名,參数,回调函数等信息
接下来。因为被请求载入URL,于是UIWebViewDelegate的这种方法被调用:
- (BOOL)webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
这里就进入了native側,从request里就拿到了js端传过来的信息,然后调用到native plugin
通过XHR
还有一种方式,cordova.exec里直接发起一个XHR请求,被native側的NSURLProtocol拦截,于是调用到这个native方法:
+ (BOOL)canInitWithRequest:(NSURLRequest*)theRequest
也进入了native側。然后以相同的方式调用到native plugin
在2种方式中,cordova会优先选择XHR方式。仅仅有当XHR方式不可用时,才会使用iframe的方式。
只是不管怎么样。这2种方法都为从js到native打开了一条通道,剩下的就是传递參数和路由的问题了
native调用js
还有一条通道就简单的多,由于iOS提供了原生支持,所以不须要想特别的办法。即通过UIWebView的这种方法:
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
看一下cordova框架native側的代码,我去掉了凝视和无关代码:
- (void)evalJsHelper:(NSString*)js
{
if (![NSThread isMainThread] || !_commandQueue.currentlyExecuting) {
[self performSelectorOnMainThread:@selector(evalJsHelper2:) withObject:js waitUntilDone:NO];
} else {
[self evalJsHelper2:js];
}
}
- (void)evalJsHelper2:(NSString*)js
{
NSString* commandsJSON = [_viewController.webView stringByEvaluatingJavaScriptFromString:js];
}
能够看到,正是通过UIWebView提供的这种方法完毕的,可是,一定运行在main thread
同步和异步的问题
从上面的分析能够发现。从js调用native,2种方式都必然是异步的。而从native回到js。却是一个同步的方法,并且是跑在主线程里
调用cordova插件的代码,对返回值的处理一定要放在回调函数里。由于结果是异步返回的。同一时候,回调函数的运行时间不能太长,否则会堵塞native主线程
參考
本文參考了下面2篇文章,都写得非常好:
cordova与ios native code交互的原理的更多相关文章
- Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)
在前面的文章中介绍的了如何使用Cordova进行跨平台应用的开发,使用Cordova的话基本上就不需要在写系统原生代码了,只要通过编写html页面和js方法即可. 但在有些特殊情况下,还是是需要htm ...
- 优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案
简介 本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发 ...
- Hybrid----优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案-备
本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发送.接 ...
- Cordova - 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)
在前一篇文章中我介绍了如何通过 js 与原生代码进行交互(Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)),当时是直接对Cordova生成的iOS工程项目进行编辑操作的(添加 ...
- webview的javascript与Native code交互
http://my.oschina.net/u/1376187/blog/172296 项目中使用了webview显示网页,其中需要网页和native方法有交互,搜索到一篇文章,转发分享一下: === ...
- [Cordova] 无法编译Visual Studio项目里Plugin副本的Native Code
[Cordova] 无法编译Visual Studio项目里Plugin副本的Native Code 问题情景 开发Cordova Plugin的时候,开发的流程应该是: 建立Cordova Plug ...
- [原]iOS中 Web 页面与 Native Code 的一种通信方式
在 iOS 开发中,Web 页面与 Native Code 通信可以分为两个方面: 1.Native Code 调用 Web 页面的方法:主要是调用页面中的 Javascript 函数. 2.Web ...
- [转]iOS hybrid App 的实现原理及性能监测
转自:http://www.cocoachina.com/ios/20151118/14270.html iOS hybrid App 的实现原理及性能监测 2015-11-18 11:39 编辑: ...
- React Native 从入门到原理一
React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...
随机推荐
- IOS-使用CAShapLayer绘制扇形
IOS-使用CAShapLayer绘制扇形 为了增加应用体验感,我们动态绘制扇形或者饼状图效果. 这里我们使用CAShapeLayer,这样就不必再-(void)draw函数内绘制图形 参考代码 -( ...
- tcpreplay 流量拆分算法研究
1.1 算法目的 现在网络架构一般是Client-Server架构,所以网络流量一般是分 C-S 和 S-C 两个方向.tcpdump等抓包工具获取的pcap包,两个流向的数据没有被区分.流量方向的 ...
- PHPUnit安装(无需PEAR)
转自:http://www.cnblogs.com/bourneli/articles/2447155.html phpunit源代码下载:http://pear.phpunit.de/ 如何 ...
- 使用两个 Windows 窗体 DataGridView 控件创建一个主/从窗体
使用 DataGridView 控件的一种最常见方案是“主/详细信息”窗体,这样的窗体可显示两个数据库表之间的父/子关系.如果选择主表中的行,将导致以相应的子数据来更新详细信息表. 主/详细信息窗体很 ...
- 多线程设计模式 - Future模式之JAVA原生实现
在之前一篇博客中介绍了Future设计模式的设计思想以及具体实现,今天我们来讲一下使用JDK原生的包如何实现. JDK内置的Future主要使用到了Callable接口和FutureTask类. Ca ...
- JAVA向EXE文件尾追加配置信息,用于解决局版客户端的程序IP配置问题
package com.demo.blog; import java.io.DataOutputStream;import java.io.File;import java.io.FileOutput ...
- 项目管理软件Readmine安装配置
1.安装依赖 #yum install curl-devel sqlite-devel libyaml-devel -y 2.安装rvm #curl -L https://get.rvm.io | b ...
- Python的程序结构[7] -> 生成器/Generator -> 生成器浅析
生成器 / Generator 目录 关于生成器 生成器与迭代器 生成器的建立 通过迭代生成器获取值 生成器的 close 方法 生成器的 send 方法 生成器的 throw 方法 空生成器的检测方 ...
- ELK获取用户真实IP
原理:在filebeat这台服务器上的nginx中获取到客户端真实IP($clientRealIp), 然后在访问日志中添加"$clientRealIp"字段.1. 通过ma ...
- view hex value in MR
cat filename | hexdump –C tail -行数 filename | hexdump –C head -行数 filename | hexdump -C