非常早曾经写了一篇博客,总结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篇文章,都写得非常好:

iOS版PhoneGap原理分析

浅析Cordova for iOS

cordova与ios native code交互的原理的更多相关文章

  1. Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)

    在前面的文章中介绍的了如何使用Cordova进行跨平台应用的开发,使用Cordova的话基本上就不需要在写系统原生代码了,只要通过编写html页面和js方法即可. 但在有些特殊情况下,还是是需要htm ...

  2. 优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案

    简介 本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发 ...

  3. Hybrid----优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案-备

    本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发送.接 ...

  4. Cordova - 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)

    在前一篇文章中我介绍了如何通过 js 与原生代码进行交互(Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)),当时是直接对Cordova生成的iOS工程项目进行编辑操作的(添加 ...

  5. webview的javascript与Native code交互

    http://my.oschina.net/u/1376187/blog/172296 项目中使用了webview显示网页,其中需要网页和native方法有交互,搜索到一篇文章,转发分享一下: === ...

  6. [Cordova] 无法编译Visual Studio项目里Plugin副本的Native Code

    [Cordova] 无法编译Visual Studio项目里Plugin副本的Native Code 问题情景 开发Cordova Plugin的时候,开发的流程应该是: 建立Cordova Plug ...

  7. [原]iOS中 Web 页面与 Native Code 的一种通信方式

    在 iOS 开发中,Web 页面与 Native Code 通信可以分为两个方面: 1.Native Code 调用 Web 页面的方法:主要是调用页面中的 Javascript 函数. 2.Web ...

  8. [转]iOS hybrid App 的实现原理及性能监测

    转自:http://www.cocoachina.com/ios/20151118/14270.html iOS hybrid App 的实现原理及性能监测 2015-11-18 11:39 编辑:  ...

  9. React Native 从入门到原理一

    React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...

随机推荐

  1. 由做网站操作日志想到的HttpModule应用

    背景 在以前的Web项目中,记录用户操作日志,总是在方法里,加一行代码,记录此时用户操作类型与相关信息.该记录日志的方法对原来的业务操作侵入性较强,也比较零散,不便于查看和管理.那么有没有更加通用点的 ...

  2. js实景题

    测天然气流量的仪器每5分钟向数据库插入一条数据,[{time:18:05,value:222},{time:18:10,value:333},{time:18:15,value:444}....... ...

  3. SSM+redis整合(mybatis整合redis做二级缓存)

    SSM:是Spring+Struts+Mybatis ,另外还使用了PageHelper 前言: 这里主要是利用redis去做mybatis的二级缓存,mybaits映射文件中所有的select都会刷 ...

  4. centos6.5 安装mysql

    在centos6.5上通过yum安装mysql: 1. yum list |grep mysql   (查看版本) 2.安装mysql yum install -y mysql-server mysq ...

  5. 使用CSS3制作各种图形

    1.正圆形 代码: HTML代码: <div class="circle"></div> CSS代码: .circle { width: 100px; he ...

  6. git 本地与远程关联流程

    git init git add -A git commit -m '提交' git remote add origin git@github.com:laniu/liuna.git git push ...

  7. AC日记——Two poj 1849

    Two 思路: 树形DP求直径: 答案是边权总和*2-直径: dp[i][1]::以i为根的子树中最长的路径: dp[i][0]::以i为根的子树中次长的路径: 来,上代码: #include < ...

  8. 写给小白看的 JavaScript 异步

    某天突然写了个方法要从后台调用数据,显示在前台页面,但是输出结果总是空 undefined,得不到数据.多方找资料才发现,原来是入了 JS 异步的 “坑”. 我们常常听到单线程.多线程.同步.异步这些 ...

  9. Hibernate 快速上手操作入门

    本文主要是从技术操作角度去介绍hibernate,并且简单描述如何快速的上手操作hibernate,用于作为与数据库的连接的持久层. 简单讲述一下hibernate究竟是什么,它有什么作用,在理解它的 ...

  10. 项目管理软件Readmine安装配置

    1.安装依赖 #yum install curl-devel sqlite-devel libyaml-devel -y 2.安装rvm #curl -L https://get.rvm.io | b ...