,第18章 PhoneGap移动开发,目 录,18.1 PhoneGap概述 18.2 PhoneGap开发实例 18.3 PhoneGap API,18.1 PhoneGap概述,18.1.1 PhoneGap介绍,PhoneGap是一个用基于HTML、CSS和JavaScript的创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、Windows phone、Bada和Blackberry智能手机的核心功能包括地理定位、加速器、联系人、声音和振动等，此外PhoneGap拥有丰富的插件，可以灵活和方便地扩展其功能。,以移动Web开发客户端为例，整体架构如下：,UI层负责页面布局，可自行实现或使用现有框架，框架优美之处在于封装常用布局和公共组件，开发者只需关注业务逻辑，推荐框架jQueryMobile和SenchaTouch。 移动中间件，处于UI层和终端系统之间，封装各系统差异，提供统一的JavaScript接口，操作系统资源，如：文件系统、摄像头等，推荐PhoneGap。 终端系统，处于整个应用的最底层，除非需要扩展PhoneGap接口，否则开发者可以不关心。,jQueryMobile,Sencha Touch ,PhoneGap ,Android、IOS ,移动Web开发框架分析和选择- PhoneGap,PhoneGap 提供一组JavaScript 接口，访问设备本地API， 而对其实行过程进行了很好的封装，支持多平台。,插件机制，可方便扩展PhoneGap接口。,提供对设备文件系统、摄像头、手机联系人、数据存储等能力。,18.1.2 PhoneGap的优势和劣势,1)跨平台：一次开发，多个平台共用。现主要包括了Android，iOS、Apple iOS、Windows Phone、BlackBerry、Palm、Symbian等。 2)降低开发门槛。对于很多WEB开发人员来说，熟悉Objective-C语言和Java语言都是比较痛苦的事情。有了PhoneGap就不用担心这些了。用熟悉的Web前端技术就可以开发出很专业的手机应用程序。 3)提供强大的硬件访问控制。比起传统的Web程序，PhoneGap提供了一些列的JS 的类，可以直接访问硬件。比如加速、相机、指南针、GPS、文件访问等，可以让用JS方便地调用系统的硬件。以弥补传统Web程序的一块错误。 4)方便的安装和使用。,PhoneGap的劣势如下：,1)运行速度慢：程序的载入和UI界面的反应都比原生的程序慢，因为它实际上还是在展示Web页面，所以载入、页面刷新等肯定是需要一定时间的。 2)不适合部分程序。如果的程序需要3D功能，或者对界面刷新有较高的要求，这样的程序现在来说还只是用原生的语言会比较好。,18.2 PhoneGap开发实例,18.2.1 PhoneGap下载,1. PhoneGap下载 PhoneGap官方下载地址: 选择所需要的版本号下载，当前最新版本为phonegap-3.0。对于以前的版本，直接下载下来解压即可以使用，对于3.0版本，则需要进行安装。,下面是phonegap-3.0提供的新特性：,（1）更实用的工具 已经开发出更容易快速切换原生平台通过调整CLI工具，而无需学习新的编程语言。 （2）支持新的平台 PhoneGap就已经支持iOS7、Windows Phone 8以及BlackBerry 10。Firefox OS 和 Ubuntu也即将支持。 （3）新的API接口 两个新的APIInAppBrowser (原先的ChildBrowser插件)以及Globalization（多语言） API。 （4）流线型的插件架构 一个优化精简的Cordova意味着更快，更小的应用程序，可以更方便地进行定制。,2. PhoneGap 3.0安装,（1）安装node.js 地址：http:/nodejs.org/download/。Node.js是一套用来编写高性能网络服务器的JavaScript工具包，一系列的变化由此开始。 （2）安装phonegap 安装好Node.js之后，可以看到几个Node.js图标，选择“Node.js command prompt” 图标运行Node.js。在命令窗口中输入如下命令，安装phonegap： npm install -g cordova npm install -g phonegap,18.2.2 PhoneGap自带例子,1. 编译PhoneGap自带例子 在Windows操作系统的C:UsersAdministrator.cordova lib android cordova 3.0.0目录下，有一个Adnroid的测试项目“test”。可以把该项目直接导入Eclipse中运行，也可以把项目整个目录拷贝到Obtain_Studio的android_work目录下，然后使用Obtain_Studio直接打开test项目，方法为选择Obtain_Studio主菜单“文件-打开项目”，在打开对话框中，文件类型选择“eclipse项目文件(*.project)”，然后选择test目录之中的“.project”文件打开项目。,test 项目还需要PhoneGap库文件， PhoneGap库文件放在与test 项目并列的framework目录之中，因此把framework目录一起拷贝到Obtain_Studio的android_work目录下。另外，编译framework库文件时，还需要一个版本号参数，该参数保存在VERSION文件之中，也需要一起拷贝过来。 最后编译PhoneGap自带例子。如果在编译过程中出现“Unable to resolve project target android-18”，说明当前电脑上的Android SDK版本号不是android-18。则需要把project.properties文件中的target=android-18一项修改为电脑对应的版本号。,2. PhoneGap自带例子分析,Cordova基于WebView组件。每个继承自DroidGap的Activity对应一个独立的CordovaWebView。 Cordova提供了一个Class（DroidGap）和一个interface（CordovaInterface）来让Android开发者开发Cordova。一般情况下实现DroidGap即可，因为DroidGap类已经做了很多准备工作，可以说DroidGap类是Cordova框架的一个重要部分；如果在必要的情况下实现CordovaInterface接口，那么这个类中很多DroidGap的功能需要自己去实现。,继承了DroidGap或者CordovaInterface的Activity就是一个独立的Cordova模块，独立的Cordova模块指的是每个实现了DroidGap或者CordovaInterface接口的Activity都对应一套独立的WebView，Plugin，PluginManager，没有共享的。,18.2.3 创建一个新的实例,1、创建一个新项目 创建一个普通的Android新项目，项目名称为“myPhoneGap”。例如在Obtain_Studio下创建一个Anroid项目，模板选择Android4.3模板，如图16-1所示。,修改hello类的代码，从DroidGap类派，代码如下：,package com.android.hello; import android.os.Bundle; import org.apache.cordova.*; public class hello extends DroidGap /* Called when the activity is first created. */ Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); / Set by in config.xml /super.loadUrl(Config.getStartUrl(); super.loadUrl(file:/android_asset/www/index.html); ,拷贝文件,从自带例子中的frameworkbin目录下拷贝库文件 “classes.jar” 到myPhoneGap项目libs目录下。 从 C:UsersAdministrator.cordovalibandroid cordova 3.0.0bin templatesproject目录下，把assets所有文件拷贝到myPhoneGap项目libs目录下。,插件配置,把test项目下的resxmlconfig.xml文件拷贝到myPhoneGap项目resxml目录下。,18.2.4 PhoneGap插件开发,Cordova插件只是一个普通的java类，插件中的execute方法只是Cordova框架的一个规定。 Cordova为了方便于插件的管理，所以引进了一个PluginManager来管理插件。在ExposedJsApi中，PluginManager起一个代理作用。 在原生态的WebView开发中，可以给WebView添加一个JavascriptInterface对象来使JS可以访问android的代码；在Cordova也有一个这样的对象ExposedJsApi。,原理,在ExposedJsApi中，它将请求转发给的PluginManager，这个时候PluginManager会根据给的service的名字来查找具体的Plugin并执行。 在Cordova虽然有JavascriptInterface对象ExposedJsApi，但在JS端并不是真正通过android提供的window.JavascriptInterface.request这种方式来请求。在JS端，Cordova是通过JS的prompt()函数触发ChromeClient中的onJsPrompt方法，通过onJsPrompt去获取到请求，再将请求转发给ExposedJsApi。,1. java程序,public class SendSms extends CordovaPlugin public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException ,（1）exec()函数,Cordova中通过exec()函数请求android插件，数据的返回可同步也可以异步于exec()函数的请求。 在开发android插件的时候可以重写public boolean isSynch(String action)方法来决定是同步还是异步。 Cordova在android端使用了一个队列(NativeToJsMessageQueue)来专门管理返回给JS的数据。,1）同步,Cordova在执行完exec()后，android会马上返回数据，但不一定就是该次请求的数据，可能是前面某次请求的数据；因为当exec()请求的插件是允许同步返回数据的情况下，Cordova也是从NativeToJsMessageQueue队列头pop头数据并返回。然后再根据callbackID反向查找某个JS请求，并将数据返回给该请求的success函数。,2）异步,Cordova在执行完exec()后并不会同步得到一个返回数据。Cordova在执行exec()的同时启动了一个XMLHttpRequest对象方式或者prompt()函数方式的循