PhoneGap 简介及原理

78 阅读 0 评论 52 点赞

我是靠谱客的博主知性保温杯，最近开发中收集的这篇文章主要介绍PhoneGap 简介及原理，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

PhoneGap

什么是PhoneGap

PhoneGap是一款开源的开发框架，开发者可以使用 HTML、Javascript、CSS等Web APIs开发出跨平台的移动应用程序。是以Cordova加上PhoneGap Build和Adobe Shadow的组合，
PhoneGap相较Native app的优势和不足
1. 优势
  - 跨平台 :
    PhoneGap目前支持的操作系统包含:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
  - 开发简单、便捷 :
    只需要会Web开发即可，并且核心的应用程序代码主要由HTML、Javascript、CSS等Web APIs开发，只需一套即可完成全部跨平台的开发。
  - 拥有丰富的插件功能 :
    PhoneGap可以通过插件的方式添加：包括地理定位，存储，加速器，联系人，媒体和摄像头等核心功能的支持。
2. 不足
  - 性能 : 基于外部框架和WebAPI的开发，性能肯定不如本地化的应用，但如今硬件过剩，框架优化足够好的情况下，性能方面的劣势已经在逐渐缩小。
  - 插件功能不完善 : 由于机型和系统版本的一系列差异，现有的插件不可能对其全部覆盖，所以导致插件功能的不完善，尤其是iOS和安卓以外的系统，平台开发者的数量决定了插件的数量。

PhoneGap工作的原理

cordova，是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎，PhoneGap工作的原理主要就是依靠cordova来完成js和原生代码（包括 Android 的 java，iOS 的 Objective-C 等）的通信的。
PhoneGap为什么能跨平台：
1> PhoneGap开发的应用程序需要依附于各个平台的内置浏览器（WebView），应用程序都在这些内置的浏览器上运行；
2> PhoneGap的核心代码cordova对于各个平台开发人员提供了统一的API，各个平台需要编写一些必要的插件（js文件和各个平台的原生代码文件）来完成原生代码和cordova的交互，而cordova本身不会去调用任何平台的API和功能。

下面以iOS端为例说明：
- js怎么跟Objective-C 通信？
  
  cordova库中的 javascript 使用了两种方式与 Objective-C 通信，
  
  1> XMLHttpRequest 发起请求的方式:
  - JS 端使用 XMLHttpRequest 发起了一个请求：
    execXhr.open(‘HEAD’, “/!gap_exec?” + (+new Date()), true); 请求的地址是 /!gap_exec；
  - 并把请求的数据放在了请求的 header 里面，见这句代码：
    execXhr.setRequestHeader(‘cmds’, iOSExec.nativeFetchMessages()); 。
  - 而在 Objective-C 端使用一个 NSURLProtocol 的子类来检查每个请求，如果地址是 /!gap_exec 的话，则认为是 Cordova 通信的请求，直接拦截，拦截后就可以通过分析请求的数据，分发到不同的插件类(CDVPlugin 类的子类)的方法中：
  - 获取请求的数据 NSString* queuedCommandsJSON = [theRequest valueForHTTPHeaderField:@”cmds”];
  2> 通过创建透明的iframe，设置src属性方式:
  - 在 JS 端创建一个透明的 iframe，设置这个 ifame 的 src 为自定义的协议
  - 通过UIWebView 会先回调其 delegate的
    webView:shouldStartLoadWithRequest:navigationType: 方法截获src，来获取数据
- Objective-C 怎么跟 JS 通信
  - UIWebView 有一个这样的方法
    stringByEvaluatingJavaScriptFromString:
    这个方法可以让一个 UIWebView 对象执行一段 JS 代码，这样就可以达到 Objective-C 跟 JS 通信的效果
- 一次请求的过程
  
  先看一下 Cordova JS 端请求方法的格式：
```
@ successCallback : 成功回调方法
@ failCallback    : 失败回调方法
@ server          : 所要请求的服务名字
@ action          : 所要请求的服务具体操作
@ actionArgs      : 请求操作所带的参数
cordova.exec(successCallback, failCallback, service, action, actionArgs);
```
  1> 传进来的这五个参数并不是直接传送给原生代码的，Cordova JS 端会做以下的处理：
  - 会为每个请求生成一个叫 callbackId 的唯一标识：这个参数需传给 Objective-C 端，Objective-C 处理完后，会把 callbackId 连同处理结果一起返回给 JS 端。
  - 以 callbackId 为 key，{success:successCallback, fail:failCallback} 为 value，把这个键值对保存在 JS 端的字典里，successCallback 与 failCallback 这两个参数不需要传给 Objective-C 端，Objective-C 返回结果时带上 callbackId，JS 端就可以根据 callbackId 找到回调方法。
  - 每次 JS 请求，最后发到 Objective-C 的数据包括：callbackId, service, action, actionArgs。
  2> 原生代码拿到 callbackId、service、action 及 actionArgs 后，会做以下的处理：
  - 根据 service 参数找到对应的插件类
  - 根据 action 参数找到插件类中对应的处理方法，并把 actionArgs 作为处理方法请求参数的一部分传给处理方法
  - 处理完成后，把处理结果及 callbackId 返回给 JS 端，JS 端收到后会根据 callbackId 找到回调方法，并把处理结果传给回调方法
- cordova加载流程
当按照phoneGap提供的方式创建工程后，主体框架的代码已经实现了
- cordova会初始化一个CDVViewController的类把这个Controller添加到window中显示出来。初始化过程中包括必要的一些初始化，添加必要的通知监听等;
- 接着会读取本地的 config.xml 文件，我们可以在这里面进行一些需求的配置，比如：webview是否适应屏幕，视频是否全屏播放等；插件名字、使用平台和各平台原生代码类的对应关系；以及是否默认加载该插件等。
- CDVViewController会根据配置文件初始化一个webView，并把它添加到视图中。
- 接着webview会加载指定的初始化页面的html文件，默认为index.html。这个文件中链接了一个cordova.js文件，这个文件就是cordova最核心的代码:
  1. 加载整个模块系统和外部访问cordova.js的入口，基于事件通道提供了整体的事件拦截控制及回调。
  2. 执行初始化处理和一些函数的定义。这里了会添加对应平台的启动处理。
  3. 加载所有cordova_plugins.js中定义的插件，执行完成后会触发onPluginsReady。
  cordova.js加载结束就打通了cordova、插件、原生代码之间的bridge。