Cordova框架基本原理

最近在做混编项目,也是从项目里开始接触Cordova框架,网上很多帖子都总结的很好,我还是要总结一下,便于加深一下。

Cordova框架是一个可以让JS与原生代码(包括 Android 的 java,iOS 的 Objective-C 等)互相通信的一个库,并且提供了一系列的插件类,比如 JS 直接操作本地数据库的插件类。

要想明白它是如何互相通信的需要弄清楚下面三个问题:

1.JS怎么跟Objective-C通信

2.Objective-C怎么跟JS通信

3.JS请求Objective-C,Objective-C返回结果给JS,这样一来一往是怎么串起来的

JS与OC通信的关键代码在框架中Cordova.js文件中:

首先, HTML中需要加载Cordova.js

<script type="text/javascript" src="cordova.js"></script>

然后JS调用原生:

// successCallback : 成功的回调方法
// failCallback : 失败的回调方法
// server : 所要请求的服务名字,就是插件类的名字
// action : 所要请求的服务具体操作,其实就是Native 的方法名,字符串。
// actionArgs : 请求操作所带的参数,这是个数组。
cordova.exec(successCallback, failCallback, service, action, actionArgs);

cordova.js里定义的一个 var结构体,里面有一些方法以及其他变量,关于exec ,可以看 iOSExec这个js 方法,穿进来的这五个参数并不会直接传给原生,cordova.js会先做这样的处理:

  1. 会为每个请求生成一个叫 callbackId 的唯一标识:这个参数需传给 Objective-C 端,Objective-C 处理完后,会把 callbackId 连同处理结果一起返回给 JS 端
  2. 以 callbackId 为 key,{success:successCallback, fail:failCallback} 为 value,把这个键值对保存在 JS 端的字典里,successCallback 与 failCallback 这两个参数不需要传给 Objective-C 端,Objective-C 返回结果时带上 callbackId,JS 端就可以根据 callbackId 找到回调方法
  3. 每次 JS 请求,最后发到 Objective-C 的数据包括:callbackId, service, action, actionArgs 。

那么iOSExec又是怎么调用原生的呢:

实际上就是做一个假的url,在原生的webview中进行拦截。

原生代码拿到 callbackId、service、action 及 actionArgs 后,会做以下的处理:

  1. 根据 service 参数找到对应的插件类
  2. 根据 action 参数找到插件类中对应的处理方法,并把 actionArgs 作为处理方法请求参数的一部分传给处理方法
  3. 处理完成后,把处理结果及 callbackId 返回给 JS 端,JS 端收到后会根据 callbackId 找到回调方法,并把处理结果传给回调方法

关键代码:

- (void)sendPluginResult:(CDVPluginResult*)result callbackId:(NSString*)callbackId
{
    CDV_EXEC_LOG(@"Exec(%@): Sending result. Status=%@", callbackId, result.status);
    // This occurs when there is are no win/fail callbacks for the call.
    if ([@"INVALID" isEqualToString : callbackId]) {
        return;
    }
    int status = [result.status intValue];
    BOOL keepCallback = [result.keepCallback boolValue];
    NSString* argumentsAsJSON = [result argumentsAsJSON];

    // 将请求的处理结果及 callbackId 通过调用 JS 方法返回给 JS 端
    NSString* js = [NSString stringWithFormat:
                                @"cordova.require(‘cordova/exec‘).nativeCallback(‘%@‘,%d,%@,%d)",
                                callbackId, status, argumentsAsJSON, keepCallback];

    [self evalJsHelper:js];
}
// 根据 callbackId 及是否成功标识,找到回调方法,并把处理结果传给回调方法
callbackFromNative: function(callbackId, success, status, args, keepCallback) {
       var callback = cordova.callbacks[callbackId];
       if (callback) {
           if (success && status == cordova.callbackStatus.OK) {
               callback.success && callback.success.apply(null, args);
           } else if (!success) {
               callback.fail && callback.fail.apply(null, args);
           }

           // Clear callback if not expecting any more results
           if (!keepCallback) {
               delete cordova.callbacks[callbackId];
           }
       }
   }

JS 端根据 callbackId 回调。

时间: 2024-10-15 22:50:08

Cordova框架基本原理的相关文章

[Android_HTML5]基于PhoneGap(Cordova)框架的HTML5开发

PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台.官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表.但是有一条跨平台,却是很明显的优势.因为它采用HTML5+JavaScript的模式来开发应用.PhoneGap用JavaScript统一封装了几大平台的本地api(Andriod,IOS,WP8/7,WINRT)等等..这样的话从一个平台移植到另外一个平台只需要把HTML代码跟JS原封不动的拿过去,打包一下就可以了.Phone

PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) , 已有13次阅读 ,共0个评论 依照我一惯得套路,我会先说一点废话. PhoneGap和Cordova什么关系?为什么有的地方叫Cordova而有的地方叫PhoneGap ?PhoneGap是一款HTML5平台.通过它,开发商能够使用HTML.CSS及JavaScript来开发本地移动应用程序.因此,眼下开

960CSS框架,之前有用过 了解下框架基本原理

http://blog.sina.com.cn/s/blog_8173443e010160b8.html CSS框架已经出现很长时间了,关于这些框架的用处也被我们讨论了很多遍了.有人说,CSS框架不够先进,还有人说这些框架大大的节省了他们的开发时间.在此,我们将不再讨论这个问题. 前段时间,我了解到了CSS框架.我最喜欢960CSS框架. 本教程将解释这个框架的基本原理,这样你就可以用960来快速进入开发. 基本原理 你必须知道一些基本原理来“学习这个框架是如何工作的”.你可以通过实验(或者是用

在已有 Xcode 项目中 加入Cordova框架

转自:http://www.jianshu.com/p/656838ae92bc 我们知道,在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但是考虑到一个问题,如果在Hybrid App中,如何才能实现JavaScript调用本地的一些硬件设备,如摄像头.音频.还有本地存储呢?首先想到的就是规定一些协议,在UIWebViewDelegate 中去接收JavaScript发来的消息并且由Objc代码去控制本地的数据库访问,控制摄像头和音频等

【struts1】--Servlet讲解MVC框架基本原理

1.开始 根据路径的不同,调用不同的jsp地址——> 把行为封装到不同的Action里面,Test分个调用各个Action,if..else并没有解决.——> 把变化的Action和需要跳转的jsp都写入xml文件里面——> 配置文件,反射——> mvc Struts大体思路如下: 1.中央控制器,最高指挥官:1)收到指示(URL访问),截取URL   2)通过URL解析,分发到对应的Action. Servlet发送,接收一个请求. 1.web客户端发送request到tomca

.NET 框架基本原理透析⑴

.NET框架的核心便是通用语言运行时(CLR),顾名思义它是一个可被各种不同的编程语言所使用的运行时.CLR的很多特性可用于所有面向它的编程语言.比如,如果CLR用异常来报告错误,那么所有面向它的语言都将通过异常来得到错误报告.如果CLR允许我们创建线程,那么所有面向它的语言也都可以创建线程.在实际中,CLR在运行时对开发人员用何种编程语言来完成源代码一无所知.这意味着我们应该选择那些能够最容易表达我们意图的编程语言.我们可以用任何自己喜欢的语言来编写代码,前提是我们使用的编译器能够面向CLR的

使用Cordova框架把Webapp封装成Hybrid App实践——Android篇

公司没有IOS和没有安卓开发人员,前端后端都是需要自己玩前几天技术经理说有一个需求要把webapp封装成Hybrid App,现已完成.记录一下从中遇到的问题和需要用到的开发环境的配置 将Webapp封装成Hybrid App有如下步骤 1.下载安装1.8的JDK,并且配置环境变量        (注意:最新版本的cordova,必须要下载1.8的JDK不然会报错) 2.下载安装Ant构建工具并且配置环境变量      (注意:Ant目录不能是中文,不然编译不成功) 3.下载安装android并

NET 框架基本原理透析⑵

生成.打包.部署及管理应用程序与类型 要生成就离不开程,序集,程序集是包含一个或多个类型定义文件和资源文件的集合.在程序集包含的所有文件中,有一个文件用于保存清单.清单是另外一组元数据表的集合,其中主要包含了程序集中一部分文件的名称.另外清单描述了程序集的版本.语言文化.发布者.公有导出类型.以及组成该程序集的所有文件. 程序集是CLR操作的对象.也就是说,CLR总是先加载包含清单元数据表的文件,然后利用该清单来获取程序集的其他文件.下面是一些应该牢记的程序集特性: •程序集定义了可重新的类型

Cordova android框架详解

一.Cordova 核心java类说明 CordovaActivity:Cordova Activity入口,已实现PluginManager.WebView的相关初始化工作, 只需继承CordovaActivity实现自己的业务需求. PluginManager: 插件管理器 ExposedJsApi :javascript调用Native, 通过插件管理器PluginManager 根据service找到具体实现类. NativeToJsMessageQueue:Native调用javasc