第2章安装和配置 phonegapimages.china-pub.com/ebook3020001-3025000/3021499/ch02.pdf · 第2...

第 2 章　安装和配置 PhoneGap

有些开发者反映，在安装和配置 PhoneGap 时会遇到一些困难，那本章就来介绍一下在

PhoneGap 的常用开发平台下几种移动系统开发环境的安装和配置方法。不过，如果你使用

的是 Dreamweaver 5.5 及以上版本，那么可以跳过这一章，因为它可以快速地将 HTML 编写

的 Web 程序打包成移动手机的原生应用，相关方法将会在后续章节中介绍。

2.1　下载 PhoneGap

我们可以在 PhoneGap 官方网站获得最新安装包。访问 http://PhoneGAP.com/download/ 下载最新版本，下载页面如图 2-1 所示。

图 2-1　PhoneGap 下载页面

虽然 PhoneGap 的版本更新速度很快，但是安装与配置过程却大同小异。本书大部分范

例中使用的版本为 PhoneGap 2.0.0。

第 2 章　安装和配置 PhoneGap　　15

2.2　配置 PhoneGap

2.2.1　配置 PhoneGap 到 iOS

步骤 1　安装必要软件。

首先需要获得苹果公司开发者认证，然后才能下载安装 Xcode 开发工具。

要获得苹果公司开发者认证可访问： http://www.apple.com.cn/developer/programs/ios/。下载 Xcode 开发工具可访问： http://www.apple.com.cn/developer/technologies/tools/index.html。步骤 2　安装 Xcode 的命令行工具。

如图 2-2 所示，在 Xcode 菜单栏依次单击“ Preferences” →“ Downloads”，然后再依次

单击“Components” → “Command Line Tools” →“ Install”。

图 2-2　安装 Command Line Tools

步骤 3　解压安装 PhoneGap 。解压下载的 PhoneGap 包，进入 lib/ios 目录，如图 2-3 所示。

图 2-3　解压 PhoneGap 后进入 lib/ios 目录

16　　第一篇　准　备　篇

双击打开图 2-3 中所示的 Cordova-2.0.0.dmg 包，打开后如图 2-4 所示，将其中名为 bin的文件夹复制到计算机硬盘的任意位置，本例复制到了桌面。

图 2-4　Cordova-2.0.0.dmg 包

这时，确保 Xcode 软件是关闭的。然后双击图 2-4 所示的文件 Cordova-2.0.0.pkg，开始

安装，如图 2-5 所示。

图 2-5　开始安装

在后继各界面中，全部单击“继续”按钮就可以将 PhoneGap 安装完成。

步骤 4　建立新的项目。

PhoneGap 2.0.0 版本提供了批处理文件功能，这简化了安装部署新项目的流程，方法

如下：

将刚才复制的 bin 目录直接拖入“终端”程序（菜单中选择实用工具，可找到终端）将

其打开，或者打开终端进入 bin 文件夹，运行如下格式的命令：

./create <项目目录 > <项目 ID> <项目名称 >

其中 < 项目目录 > 为项目的存储目录，这里存放在 ~/Desktop/mycode/HelloWorld。< 项


目 ID> 为公司标识及项目 ID。上架（发布到 App 应用商店）是一个关键参数，上架时要填

写和官网一样的参数，具体内容可参考第 7 章，这里输入的是 org.adc.HelloWorld。< 项目名

称 > 为这个项目的名字，这里输入的是 HelloWorld。代码如下：

./create ~/Desktop/mycode/HelloWorld org.adc.HelloWorld HelloWorld

运行效果如图 2-6 所示。

图 2-6　执行 bin 目录下的 create 命令完成插件部署

这时进入刚刚输入的项目目录，本例是 ~/Desktop/mycode/HelloWorld。双击打开图 2-7中所示的 HelloWorld.xcodeproj 项目文件。

图 2-7　打开 xcodeproj 项目文件

在打开的 Xcode 程序中，应该可以看到刚刚通过命令新建的 HelloWorld 项目已经在

Xcode 中了，如图 2-8 所示。

步骤 5　完成部署。

如图 2-9 所示，单击左上角的“Run” 按钮，稍候会弹出设定的 iPad/iPhone 模拟器，并

且显示图 2-10 所示的程序运行成功界面。


图 2-8　在 Xcode 中可以看到新建的 HelloWorld 项目

图 2-9　单击“Run”按钮运行模拟器


图 2-10　完成部署

步骤 6　测试 HelloWorld。打开并编辑 www 目录下的 index.html 文件，将如下代码替换至文件并保存。

<!DOCTYPE html>

<html>

<head>

<title>test</title>

<meta charset="utf-8"/>

<script type="text/javascript"charset="utf-8"src="cordova-1.5.0.js"></script>

</head>

<body>

<h1>Hello World！！ </h1>

</body>

</html>

再次单击 Xcode 左上角的“Run”按钮，可以在模拟器中看到图 2-11 所示的结果。

图 2-11　运行结果

2.2.2　配置 PhoneGap 到 Android

配置 PhoneGap 到 Android 的步骤如下。


步骤 1　安装必要软件。

首先需要确定已经在 PC 中安装好了 Java 环境，然后才能安装 Eclipse 3.4 及其以上版

本，本书将以 Eclipse Classic 3.7.2 为例介绍相关内容。

如果要下载 Eclipse Classic，那么可以访问：http://www.eclipse.org/downloads/。解压下载的 Eclipse 压缩包后双击目录中的 eclipse.exe 文件运行程序，如是是第一次打

开，那么会弹出询问存储项目的主目录，如图 2-12 所示。

图 2-12　询问存储项目的主目录

设定好存储目录后，可以选中下面的“Use this as the default and do not ask again”（不

再弹出此窗口）复选框，然后单击“OK”按钮即可进入程序。

然后，访问 http://developer.android.com/sdk/index.html 下载 Android SDK 启动包，并将

下载的压缩包解压到 D:\Android\android-sdk，如图 2-13 所示。

图 2-13　解压压缩包

双击运行 SDK Manager.exe，然后打开 Android SDK Manager 下载最新的目录，如

图 2-14 所示。


图 2-22　“New Android App”窗口

制作图标，上传或选择你的应用图标样式，这里选择的是默认图标，如图 2-23 所示，

单击“Next”按钮继续。

图 2-23　选择制作图标

通过向导创建一个新活动，这里直接使用默认设置，如图 2-24 所示，单击“Next”按

钮继续。


修改属性并单击“Finish”按钮完成操作，如图 2-25 所示。

这时，一个 Android 项目就创建完成了。

图 2-24　新建空白活动

图 2-25　修改属性并单击“Finish”按钮完成操作

步骤 3　将几个必要的文件复制到 HelloWorld 项目中。


这里需要进入上文中在启动 Eclipse 时选择的主目录，在 HelloWorld 项目下的 assets 目录中创建 www 目录。

在 Eclipse 左侧项目列表的 HelloWorld 项目中，在 HelloWorld 根目录下的 assets 目录上

单击鼠标右键，选择 “New”→“Folder” , 在弹出的“New Folder”窗口的“Folder name”（目录名称）中输入“www”，单击“Finish”按钮完成操作。最终目录结构如图 2-26 所示。

图 2-26　最终目录结构

进入 PhoneGap 的 lib/android 目录，复制 cordova-1.x.x.js （x 是版本号，这里用的是

2.0.0 版本，可根据下载的版本做相应修改）文件到 HelloWorld/assets/www 目录下；复制

cordova-1.x.x.jar 文件到 HelloWorld /libs 目录下；复制 xml 目录到 HelloWorld/res 目录下。

复制文件后的目录结构如图 2-27 所示。

图 2-27　复制文件后的目录结构


到此，文件就已经复制完毕了。

步骤 4　为了完成配置，并正确编译文件，还需要对项目的 Java 文件做一些修改。

打开 Eclipse 内的 src 目录，使用鼠标右键单击 helloworld.java 文件，选择“Open With”→“Text Editor”，以文本的方式打开文件。

将类的继承由 Activity 改为 DroidGap，之后将“setContentView(R.layout.main) ；”替换成

“super.loadUrl("file:///android_asset/www/index.html")；”，添加“import org.apache.cordova.*；”，删除“import android.app.Activity；”。修改后的代码如下：

package org.adc.helloworld;

import android.os.Bundle;

import org.apache.cordova.*;

public class MainActivity extends DroidGap {

/** 程序初始化调用的内容 */

@Override

public void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);

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

}

}

修改完成后发现 Eclipse 报错且找不到 cordova，可通过下面的方法来解决这个问题。

使用鼠标右键单击 libs 目录，在弹出的快捷菜单中选择“Build Path” →“Configure Build Path”。在弹出的“Properties for HelloWorld”（HelloWorld 属性）窗口中选择

“Libraries”（库）标签页，如图 2-28 所示。

图 2-28　HelloWorld 属性窗口

单击“Add JARs…”（添加 JARs）按钮，在弹出的窗口中选择 libs 目录下之前复制的

cordova-2.0.0.jar 文件，然后单击“OK”按钮，如图 2-29 所示。


图 2-29　选择 cordova-2.0.0.jar 并添加到库

这样就可以在“Properties for HelloWorld”窗口中看到 cordova-2.0.0.jar 文件添加成功

了，如图 2-30 所示。

图 2-30　cordova-2.0.0.jar 文件添加成功

单击“OK”按钮退出窗口，然后按键盘上的 <F5> 键刷新，程序不再提示找不到

cordova 文件的错误。

接下来使用鼠标右键单击 AndroidManifest.xml，在弹出的快捷菜单中选择“Open With” →


“Text Editor”以打开文件，在 <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"/>

在 <activity> 标签中添加如下一行代码：

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

最终的代码结构如图 2-31 所示。

图 2-31　代码结构


这样，主体文件就部署完了，不过，每次建立一个新的项目都需要重新部署一次。

在 Eclipse 左侧的目录树中，右键单击 www 目录，然后在弹出的快捷菜单中选择

“New”→“File” ，新建一个名为“index.html”的文件为主页。

注意：对于这个文件，我们习惯用传统的文件名 index.html，该名称要和之前配置文件时定

义的主配置文件中的 "file:///android_asset/www/index.html" 文件名相同。

在 index.html 文件中写入 HTML 代码，代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Hello World</title>

<meta charset="utf-8"/>

<script type="text/javascript"charset="utf-8"src="cordova-2.0.0.js"></script>

</head>

<body>

<h1>Hello World！！ </h1>

</body>

</html>

保存上面的代码，然后使用鼠标右键单击项目 HelloWorld，在弹出的快捷菜单中选择

“Run As” →“Android Application”以运行程序，这里可以选择程序安装到虚拟机还是手机上。

如果是第一次运行，那么会提示新建 AVD（Android Virtual Device，Android 虚拟机），这时

在 Eclipse 菜单中选择“Window”→“AVD Manager”打开虚拟机配置窗口，如图 2-32 所示。

图 2-32　虚拟机配置窗口

单击图 2-32 所示右侧的“New”按钮，在弹出的窗口中输入虚拟机名字和虚拟机系统版

本（之前配置时所选择下载的几种版本）等信息，然后单击“ Create AVD” 按钮完成虚拟机

的配置，如图 2-33 所示。

这样，“HelloWorld”程序即可在 Android 虚拟机中预览了，如图 2-34 所示。


图 2-33　新建虚拟机

图 2-34　HelloWorld 在 Android 虚拟机中的预览效果

2.2.3　配置 PhoneGap 到 BlackBerry

配置 PhoneGap 到 BlackBerry 的步骤如下。


步骤 1　安装必要的文件。

首先需要下载并安装 Oracle Java Platform（JDK），Java 是安装 BlackBerry WebWorks SDK 必要的软件。

下载可访问：http://www.oracle.com/technetwork/java/javase/downloads/index.html#jdk。记录安装位置，本例将 JDK 安装在 C:\Program Files\Java\jdk1.7.0_04 中。

为了能从系统终端中直接运行命令，需要将 JDK 加入到系统环境变量中。

下面将在 Windows 7 中进行说明，首先使用鼠标右键单击“我的电脑”，在弹出的快捷菜

单中选择“属性”，接着选择“高级系统设置”，然后选择“高级”选项卡，如图 2-35 所示。

单击图 2-35 中的“环境变量”按钮，弹出如图 2-36 所示的“环境变量”对话框。

在“系统变量”区域的下方，单击 “新建”按钮，添加系统变量“JAVA_HOME”，变

量值为“C:\Program Files\Java\jdk1.7.0_04”，然后单击“确定”按钮关闭新建对话框，如

图 2-37 所示。

在如图 2-36 所示的“系统变量”区域中，点选变量“Path”，再单击下方的“编辑”按

钮。在弹出对话框的“变量值”文本框中，添加“； %JAVA_HOME%\bin\”，其中“；”用于

分割 path 属性变量值原有的内容，分号后的内容即为添加的主系统变量，如图 2-38 所示。

然后下载并解压 Apache Ant，本例中以解压到 D:\apache-ant\ 目录为例。

图 2-35　“系统属性”对话框图 2-36　“环境变量”对话框

图 2-37　“新建系统变量”对话框图 2-38　编辑系统变量一


下载可访问：http://ant.apache.org/bindownload.cgi。为了能从系统终端中直接运行命令，需要将 D:\apache-ant\bin\ 目录添加到系统环境变量中。

与前面的操作方法相同，在“环境变量”对话框的“系统变量”区域中选中“Path”属

性后单击“编辑”按钮，在“变量值”文本框的末尾，添加一个“ ；”以分隔前面的目录地

址，然后在后面输入“D:\apache-ant\bin\”，单击“确定”按钮退出，如图 2-39 所示。

再次单击“确定”按钮进行保存，并退出“环境变量”对话框。

接着下载 BlackBerry WebWorks SDK 并进行安装。

下载可访问：https://developer.blackberry.com/html5/download/sdk。本例中将 BlackBerry WebWorks SDK 安装到 D:\BlackBerry WebWorks SDK，安装过程

十分简单，在此不再赘述。

然后下载 Adobe AIR SDK。

下载可访问：http://www.adobe.com/devnet/air/air-sdk-download.html。解压缩下载文件并保存在 D:\AdobeAIRSDK\ 目录中。与 Apache Ant 一样，需要把

Adobe AIR SDK 的执行文件目录配置到环境变量中。同样是在“系统变量”中选中“Path”，然后单击“编辑”按钮，在变量值的末尾，添加一个“ ；”以分隔前面的目录地址，然后在

后面输入“D:\AdobeAIRSDK\bin\”，单击“确定”按钮退出，再次单击“确定”按钮进行保

存，并退出“环境变量”对话框，如图 2-40 所示。

接着下载 BlackBerry 模拟器并进行安装。

下载可访问：http://us.blackberry.com/developers/resources/simulators.jsp。BlackBerry 模拟器安装过程也非常简单，过程和前面类似，这里不再赘述。

步骤 2　建立一个新的项目。

将下载的最新版本的 PhoneGap 压缩包解压，进入 lib/blackberry/ 目录，将 sample 实例

目录复制到计算机中的项目目录下，此目录也就相当于这个项目的主目录。本例保存到了

D:\workspace\ 目录中，目录结构为 D:\workspace\sample。进入 sample 目录，使用文本编辑器打开其中的 project.properties 配置文件进行编辑，修

改 sdk 目录，将

blackberry.bbwp.dir=C:\\Program Files\\Research In Motion\\BlackBerry WebWorks Packager

修改为：

blackberry.bbwp.dir=D:\\BlackBerry WebWorks SDK

地址根据你安装 BlackBerry WebWorks SDK 的位置而变，等号后面的地址修改为上面

图 2-39　编辑系统变量二图 2-40　编辑系统变量三


SDK 安装的目录，注意“\”要变成“\\”。单击“开始”菜单，在弹出的对话框中输入“cmd”并按下 <Enter> 键打开一个终端窗

口，如图 2-41 所示。

图 2-41　终端窗口

按如下顺序输入命令，进入项目主目录 D:\workspace\sample\。D:

cd workspace\sample\

ant blackberry build

等待编译完成，就可以输入下面的命令启动模拟器进行测试了。

ant blackberry load-simulator

2.2.4　配置 PhoneGap 到 webOS

下面开始安装必要的文件。

1）下载并安装 Virtual Box （虚拟计算机控制台）。

下载可访问：https://www.virtualbox.org/wiki/Downloads。

注意：由于编写本书时，palm 2.1 版本的模拟器只支持 Virtual Box 3.0 或 Virtual Box 3.2 版

本的虚拟机，因此，可先下载老版本，地址为 https://www.virtualbox.org/wiki/Download_Old_Builds_3_2。

2）下载并安装 webOS SDK。

下载可访问：http://developer.palm.com/index.php?option=com_content&view=article&layout=page&id=1788&Itemid=321/。

3）下载并安装 Cygwin UNIX 模拟器。

下载可访问：http://cygwin.com/setup.exe在安装过程中推进到选择安装软件包界面时，必须安装 make 包，否则将无法编译程序。


在如图 2-42 所示的界面中，在“search”文本框内输入“make”。

图 2-42　Cygwin 软件包选择窗口

在搜索出来的内容中，选择 “Devel”，然后下拉滚动条，如图 2-43 所示。

图 2-43　搜索安装 make

在“Package”列找到“make”之后，单击一次“New”列对应的“Skip”，会显示版本

号，如图 2-44 所示。

单击“下一步”按钮，直到完成安装。

解压下载的 PhoneGap 包，进入 lib/ 目录，将 webos 目录复制到项目目录下，本例中使

用 D:\workspace\webos\。进入 Cygwin Terminal ，在出现的终端窗口中输入：

第2章 安装和配置 phonegapimages.china-pub.com/ebook3020001-3025000/3021499/ch02.pdf · 第2...

Documents

第2章安装和配置 phonegapimages.china-pub.com/ebook3020001-3025000/3021499/ch02.pdf · 第2...