非常早曾经写了一篇博客,总结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. JSP、JSTL、EF学习笔记

    JSP 1)Java Server Page,在html中嵌入java代码 2)九个内置(隐式)对象 request response out page pageContext config sess ...

  2. Android Handler使用

    1. 介绍 Handler允许向关联线程的消息队列(MessageQueue)发送消息(Message)和可执行对象(Runnable).每个Handler实例都与某个线程(即创建该Handler的线 ...

  3. mininet命令

    官方文档:http://mininet.org/walkthrough/ 翻译的官方文档:https://segmentfault.com/a/1190000000669218 ovs-ofctl相关 ...

  4. jQuery简单操作HTML的DOM

    #转载请留言联系 如果需要了解什么是HTML的dom,可以参考:http://www.w3school.com.cn/htmldom/index.asp 下面的是jQuery操作DOM,并不是Java ...

  5. Fiddler抓包10-会话框添加查看get与post请求类型【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/fiddler/ 前言 在使用fiddler抓包的时候,查看请求类型get和post每次 ...

  6. html5进阶之canvas图像基础

    1.首先还是使用之前讲过的Image()函数来预加载图像. 在调用图像之前,需创建一个事件监听器,为其保证图像已经正确的加载. 如下图: 监听图片已经正确加载 2.把图像显示在画布上面,这里将不再使用 ...

  7. VS2017源代码版本管理

    VS2017源代码版本管理有两种方式:Git(代码提交到服务器)和Team Foundation Server(代码提交到局域网) 一.Git版本管理(上传到码云服务器https://gitee.co ...

  8. NYOJ 71 乘船问题【贪心】

    时间复杂度O(n) 有n个人,第i个人的重量为w[i],每艘船的最大载重量均为c,且最多只能乘两个人.用最少的船装载所有人. 思路:从最轻的开始考虑,让最轻的和最重的一条船,若超出重量则可判定最重的只 ...

  9. 大数据技术之_16_Scala学习_09_函数式编程-高级

    第十三章 函数式编程-高级13.1 偏函数(partial function)13.1.1 提出一个需求,引出思考13.1.2 解决方式-filter + map 返回新的集合13.1.3 解决方式- ...

  10. Flash3D学习计划(二)——理解世界,取景,投影变换,并理解投影坐标系

    各种坐标系都是有用的,因为某些信息只能在特定场景中才有意义. 一. 世界坐标系 世界坐标系是一个特殊的坐标系,它建立了描述其他坐标系所需要的参考框架.这就意味着,能够用世界坐标系描述其他坐标系的位置, ...