PhoneGap教程:使用PhoneGap命令行工具快速创建IOS PhoneGap项目

说明

本文基于Apache Cordova API文档中的“Command Line Usage”一节:http://docs.phonegap.com/en/2.1.0/guide_command-line_index.md.html#Command-Line%20Usage。但本文不是对该节的直接翻译。

前提要求

本文的操作环境需要苹果操作系统,以及XCode软件。你可以在苹果的Mac App Store中下载。安装Xcode并不需要购买苹果的开发者账号,但编写的应用只能运行在设备模拟器中。如果你需要在真实的IOS设备中调试应用,则需要购买苹果的开发者账号。本文内容无需开发者账号。

安装PhoneGap命令行

下载并安装PhoneGap

首先要下载最新版本的PhoneGap。本文使用的是PhoneGap2.1,下载地址:http://phonegap.com/download

选定一个本地目录,并解压下载的zip文件后,可以看到如下目录内容:

PhoneGap下载内容

PhoneGap下载内容

 

安装Xcode

使用命令行工具创建IOS平台上的PhoneGap应用项目,首先需要安装Apple的开发工具XCode。下载地址如下:Mac App Store

在XCode中安装Apple的Command Line Tools

PhoneGap提供的命令行工具是基于苹果Xcode中提供的Command Line Tools的,因此在安装完Xcode后,需要为其安装Command Line Tools。

启动Xcode,点击左上角的第一个菜单“XCode”,选择“Preference”,即可调出Prederence面板,在Download标签页中,可以找到”Command Line Tools”一项,点击install即可安装或者更新。如下图:

为Xcode安装Command Line Tools

为Xcode安装Command Line Tools

 

安装完毕后,你在/Applications/Xcode.app/Contents/Developer/usr/bin/目录下可以找到所有命令行工具,比如Cordova项目要用到的xcode-select和xcodebuild。

创建第一个PhoneGap Xcode项目

现在已经下载并解压了PhoneGap,安装了Xcode和Xcode命令行工具。我们可以使用PhoneGap的命令行工具创建PhoneGap Xcode项目了。
打开终端,进入PhoneGap解压目录下的lib/ios/bin目录,运行create命令,如下:

$ ./create 项目目录 com.company.app AppProjectName

其中,三个参数分别为:

  1. 新的Xcode项目目录
  2. 包名,遵循reverse domain命名规范,比如com.company.appname
  3. 项目名称

回车后,在指定的项目目录下,PhoneGap会自动创建一个模板项目。创建的项目结构如下:

create命令创建的项目内容

create命令创建的项目内容

 

编译和运行

在新创建的xcode项目下的cordova目录中,提供了debug,emulate和log命令,分别用来进行调试,调用模拟器和日志。

在第一次运行之前,需要使用debug命令编译项目。不要直接使用Xcode打开项目,然后使用xcode的run按钮来进行编译,这样做通常会遇到错误。

进入新创建的PhoneGap项目下的cordova目录,运行debug命令,编译项目:

$ ./debug

编译成功后,可看到”** BUILD SUCCEEDED **”结果。此时,即可运行emulate命令,调出模拟器运行应用:

$ ./emulate

运行成功后,可以看到模拟器中显示默认的PhoneGap应用如下:

运行在模拟器中的默认PhoneGap应用

运行在模拟器中的默认PhoneGap应用

 

至此,第一个PhoneGap IOS项目创建成功了。如果不需要定制phoneGap plugin,您只需要编写www目录下的内容即可完成初步的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所示。


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


在打开的Xcode程序中,应该可以看到刚刚通过命令新建的HelloWorld项目已经在Xcode中了,如图2-8所示。

步骤5 完成部署。

如图2-9所示,单击左上角的“Run” 按钮,稍候会弹出设定的iPad/iPhone 模拟器,并且显示图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所示的结果。

小结

PhoneGap提供的命令行工具非常便捷,在许多情况下,开发者无需打开xcode即可完成编写和调试。在Android平台上也可使用类似的工具。具体可参考PhoneGap站点教程。

发表评论