第一章 phonegap介绍

1.1 什么是phonegap

PhoneGap是一个自由开放源码的开发工具和框架，允许利用HTML + JavaScript + CSS的强大功能在多个手机平台上开发程序,开发出来的程序经过在各自的平台上编译形成独立的安装程序。使程序看起来和native的程序一样。

1.2 PhoneGap的优势和劣势

优势：

l 跨平台：一次开发，多个平台共用。现主要包括了android，iOS，Apple iOS, Google Android, Palm, Symbian, BlackBerry 等。WP7等平台也在逐步兼容中。

l 降低开发门槛。对于很多WEB开发人员来说，熟悉Objective-C语言和Java语言都是比较痛苦的事情。有了PhoneGap就不用担心这些了。用熟悉的Web前端技术就可以开发出很专业的手机应用程序。

l 提供强大的硬件访问控制。比起传统的Web程序，PhoneGap提供了一些列的JS 的类，可以直接访问硬件。比如加速，相机，指南针，GPS，文件访问等，可以让你用JS方便地调用系统的硬件。以弥补传统Web程序的一块错误。

l 方便的安装和使用。PhoneGap的架构很复杂，但对于大多数开发者来说，只用很简单的配置就可以搭好环境。只用专注写好自己的Web页面，拷贝进去就可以了。

劣势：

l 运行速度慢：程序的载入和UI界面的反应都比原生的程序慢，因为它实际上还是在展示Web页面，所以载入、页面刷新等肯定是需要一定时间的。

l 不适合部分程序。如果你的程序需要3D功能，或者对界面刷新有较高的要求，这样的程序现在来说还只是用原生的语言会比较好。

1.3 PHONEGAP开发需要的基本知识

l HTML：做为最基本的Web开发，HTML知识必不可少。现在很多移动终端已经支持HTML5了，所以最好学会HTML5相关的知识；

l CSS：定义的页面的样式等等，不用CSS，你的页面会很难控制定位和样式等等。建议能掌握CSS3的相关知识，能写出更好的界面；

l JavaScript：后台的交互都由JavaScript实现，读写数据库，载入Google Map等等；

l PhoneGap的类库：都是JavaScript的库，使用很简单，有详细文档，可以参考官网：http://docs.phonegap.com/

l 基本的平台知识：比如要做iPhone的程序，就要知道XCode怎么安装，怎么编译，怎么获取授权证书，真机调试等等，要做android程序就要会搭建Ecllipse开发环境等等。会简单使用这些平台后，就可以安装PhoneGap的平台了，可以参考：http://www.phonegap.com/start

1.4 PHONEGAP的得力助手

开发PhoneGap的程序，jQuery Mobile不是必备，但是有了jQuery Mobile，可以使你的程序美观很多。

jQuery Mobile其实是一堆的样式集和JAVA事件。比如写一个按钮，iOS和android的是不同的，用HTML做出来的往往很丑。一般的处理方式是重新定义按钮的样式，使它变得更像手机平台上的按钮。jQuery Mobile为你提供了这一套框架，你可以通过很简单的属性设置就可以做出跟手机平台下车差不多的按钮，相当方便。

详情可以参考：http://jquerymobile.com/

也可以使用Sencha Touch，界面没的说，也是非常不错的选择

详情可参考：http://www.sencha.com/

第二章快速开始

2.1 快速开始

官方的使用教程是

http://phonegap.com/start#android

这里只是简单的翻译了一下

2.1.1 选择平台

我选的是android

也可以直接看视频操作

2.1.2 环境需求及安装

Eclipse 3.4+

Download and install Eclipse Classic

Download and install Android SDK

Download and install ADT Plugin

Download the latest copy of PhoneGap and extract its contents. We will be working with the Android directory.

上边三个是android的基本环境，下边的是phonegap所需的sdk包。

2.1.3 设置工程

创建android工程，选择

/libs
/assets/www

然后到phonegap目录的android目录下拷贝

phonegap-1.3.0.js到 /assets/www

拷贝phonegap-1.3.0.jar到/libs

拷贝xml文件夹下的内容到/res目录下

修改完的目录结构如下

将主Activity的继承关系修改为DroidGap，并且将jar包的引用导入工程中。

将setContentView(R.layout.main);修改为

super.loadUrl("file:///android_asset/www/index.html");

右键打开AndroidManifest.xml

把下面的内容贴到version name下边

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />

添加完后xml中的内容如下，如果有对不上的可以手动添加

我修改后的xml文件内容如下

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.tgyt.phonegap"

android:versionCode="1"

android:versionName="1.0" >

<supports-screens

android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="true"

android:resizeable="true"

android:anyDensity="true"

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.VIBRATE" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

<uses-permission android:name="android.permission.READ_PHONE_STATE" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.RECEIVE_SMS" />

<uses-permission android:name="android.permission.RECORD_AUDIO" />

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<uses-permission android:name="android.permission.READ_CONTACTS" />

<uses-permission android:name="android.permission.WRITE_CONTACTS" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.GET_ACCOUNTS" />

<uses-permission android:name="android.permission.RECORD_VIDEO" />

<uses-permission android:name="android.permission.BROADCAST_STICKY" />

<uses-feature android:name="android.hardware.comera" />

<uses-feature android:name="android.hardware.comera.autofocus" />

<uses-sdk android:minSdkVersion="8" />

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity

android:label="@string/app_name"

android:name=".HellophonegapActivity" android:configChanges="orientation|keyboardHidden">

<intent-filter >

</intent-filter>

</activity>

<activity

android:label="@string/app_name"

android:name="com.phonegap.DroidGap" android:configChanges="orientation|keyboardHidden">

<intent-filter >

</intent-filter>

</activity>

</application>

</manifest>

运行android程序，就可以看到如下的界面

第三章 PhoneGap架构基础及工作原理

3.1 PhoneGap能做什么?

3.1.1 基于Web技术开发移动设备客户端应用

用您熟悉的JavaScript、HTML技术，或者结合移动Web UI框架jQuery Mobile、Sencha Touch 开发跨平台移动客户端。

3.1.2 用PhoneGap访问设备本地API

提供跨平台设备访问能力，以下列出访问设备部分功能，本系列专题在以后文章中详解使用方法。

ACCELEROMETER(重力感应)

CAMERA(摄像机)

COMPASS(指南针)

CONTACTS(通讯录)

FILE(文件)

GEOLOCATION(地理定位)

MEDIA(媒体)

NETWORK(网络)

NOTIFICATION (通知)

STORAGE(Sqlite数据库存储)

3.1.3 发布您的程序到不同移动平台

PhoneGap如何工作?

PhoneGap架构拥有强大的跨平台访问设备能力，但是其工作原理并不神秘，下面以iPhone和Android平台为例进行分析。

iPhone和Android平台共同点是都有内置的WebView组件，其具备两个特性：

1、WebView组件实质是移动设备的内置浏览器

WebView这个内置浏览器特性是Web能被打包成本地客户端的基础，可方便的用HTML5、CSS3页面布局，这是移动Web技术的优势相对于原生开发。

2、WebView提供Web和设备本地API双向通信的能力

PhoneGap针对不同平台的WebView做了扩展和封装，使WebView这个组件变成可访问设备本地API的强大浏览器，所以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。

明白以上两个特性，参照下面PhoneGap与设备本地API通信图，一个成熟的PhoneGap技术客户端运行状况如下：

应用运行在WebView组件上 —》通过PhoneGap在各平台的扩展 —》最终访问设备本地资源

看了上面的介绍你还在等什么，一起phonegap吧。