PhoneGap开发实践——环境篇

 

第1章 什么是PhoneGap

　　PhoneGap是一个使用HTML，CSS和JavaScript来构建跨平台移动应用程序的开源开发框架。它使开发者能够利用iPhone，Android，Palm，Symbian，Blackberry，Windows Phone和Beda智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，当前的最新版本为2.0,可以到官方下载最新的版本。

　　其实本质上来讲，PhoneGap只是加载原生应用的webView外壳，然后将外部的页面进行载入，所以其实际运行效果和通过网页访问效果一致；但因为有webview这个桥梁，所以又可以访问本地设备，这样就解决了HTML5不能访问本地设备的问题。在HTML5规范还没完善的现在，我们可以通过PhoneGap来创建优雅的混合移动应用。

 

第2章 如何使用PhoneGap

2.1 前期准备

由于PhoneGap支持多种智能终端，不同终端开发的方式不尽相同，所以针对不同的发平台，PhoneGap的安装方式有所不同。不过都比较类似和简单，本文以Android开发平台为例，其他平台请参考官方文档。以Android为例，我们需要安装如下软件和环境：

•  Eclipse 3.4+
• Android SDK
• ADT(Android Development Tookit)
• PhoneGap

对Android平台而言，PhoneGap只是一个jar包而言，我们只需要在工程中导入即可。如下图所示。

 图2.1 android下的PhoneGap安装包

 

2.2 工程创建

由于PhoneGap会将HTML、javascript和css等文件打包为本地应用，所以我们首先需要建立一个Android工程。如果是其他平台，我们也需要建立对应平台的工程，比如在IOS下，我们就需要用Xcode创建一个iphone或者ipad工程。下面会描述创建过程。

• 在eclipse上点右键新建一个android工程，选择好对应的android sdk版本。 

                        图2.2 创建Android工程

• 在创建的工程目录下，新建两个文件夹，分别是 libs及assets/www。
• 将图2.1中的cordova-1.7.0.jar复制到libs目录。
• 将图2.1中的cordova-1.7.0.js、example目录下assets/www文件复制到当前工程的assets/www目录。
• 将图2.1中的xml文件复制到工程下的res目录。
• 配置好build path，将libs目录下的jar包增加到工程中。

 

图2.2-2 导入PhoneGap jar包

• 修改工程src文件下的AndroidPhoneGapActivity.java文件，改为如下内容。

 

图2.2-3 修改java源文件

Ÿ   修改工程下的AndroidManifest.xml文件，在<uses-sdk>和<application>之间加入如下代码。

<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.BROADCAST_STICKY" />

代码2.2 修改Android权限访问控制文件

2.3 运行及调试

2.3.1 模拟器运行及调试

在工程上点右键→Debug As→Debug Configuration…，打开配置界面。

 

图2.3.1 配置调试环境（1）

 

图2.3.1-1 配置调试环境（2）

点击Debug，我们可以看到如下界面。

 

图2.3.1-2 配置调试环境（3）

如果没有看到图2.3.1-2中的的设备，你需要首先运行android sdk安装目录下的SDK Manager.exe文件，然后创建一个AVD(Androi Virtual Device)，如图。

 

图2.3.1-3 配置调试环境（4）

      回到图2.3.1-2，点击Ok按钮就会启动模拟器了，启动过程会比较慢，需要耐心等待下:-)。最后的运行效果如下图。

 

图2.3.1-4 模拟器运行效果（5）

2.3.2 真机运行机调试

为了在真机上运行，我们需要开启Android手机的调试功能，点设置→应用程序→开发，然后勾上USB调试并插上数据线，如图所示。

 

图2.3.2-1 开启USB调试

      同时，我们需要修改AndroidManifest.xml文件，在<application>上增加android:debugger=”true”,如下图所示。

 

图2.3.2-2 开启USB调试（2）

配置好后，我们就可以运行Android程序，类似图2.3.1-2，我们可以看到如下的界面。

 

图2.3.2-3 选择真机设备

上图中显示的就是真实手机设备，运行OK，我们就可以看到手机上运行的程序，效果如下。

 

图2.3.2-4 真机运行效果截图

第3章 附录

PhoneGap官方也提供了一些插件，具体到github上去下载并测试运行。如图。

 

图2.4 PhoneGap插件

为了更方便地开发PhoneGap应用，有公司开发了基于eclipse的免费插件MDS AppLaud，在eclipse中安装即可。具体使用过程可以参考这篇文章。

本文简要介绍了PhoneGap的环境搭建及其使用，下篇会介绍PhoneGap的内部运行机理，敬请关注！