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。