第2章 安装和配置 phonegapimages.china-pub.com/ebook3020001-3025000/3021499/ch02.pdf · 第2...
TRANSCRIPT
第 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。< 项
第 2 章 安装和配置 PhoneGap 17
目 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 所示的程序运行成功界面。
18 第一篇 准 备 篇
图 2-8 在 Xcode 中可以看到新建的 HelloWorld 项目
图 2-9 单击“Run”按钮运行模拟器
第 2 章 安装和配置 PhoneGap 19
图 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 的步骤如下。
20 第一篇 准 备 篇
步骤 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 所示。
24 第一篇 准 备 篇
图 2-22 “New Android App”窗口
制作图标,上传或选择你的应用图标样式,这里选择的是默认图标,如图 2-23 所示,
单击“Next”按钮继续。
图 2-23 选择制作图标
通过向导创建一个新活动,这里直接使用默认设置,如图 2-24 所示,单击“Next”按
钮继续。
第 2 章 安装和配置 PhoneGap 25
修改属性并单击“Finish”按钮完成操作,如图 2-25 所示。
这时,一个 Android 项目就创建完成了。
图 2-24 新建空白活动
图 2-25 修改属性并单击“Finish”按钮完成操作
步骤 3 将几个必要的文件复制到 HelloWorld 项目中。
26 第一篇 准 备 篇
这里需要进入上文中在启动 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 复制文件后的目录结构
第 2 章 安装和配置 PhoneGap 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 所示。
28 第一篇 准 备 篇
图 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” →
第 2 章 安装和配置 PhoneGap 29
“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 代码结构
30 第一篇 准 备 篇
这样,主体文件就部署完了,不过,每次建立一个新的项目都需要重新部署一次。
在 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 章 安装和配置 PhoneGap 31
图 2-33 新建虚拟机
图 2-34 HelloWorld 在 Android 虚拟机中的预览效果
2.2.3 配置 PhoneGap 到 BlackBerry
配置 PhoneGap 到 BlackBerry 的步骤如下。
32 第一篇 准 备 篇
步骤 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 编辑系统变量一
第 2 章 安装和配置 PhoneGap 33
下载可访问: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 编辑系统变量三
34 第一篇 准 备 篇
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 章 安装和配置 PhoneGap 35
在如图 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 ,在出现的终端窗口中输入: