赵工的个人空间

PhoneGap配置到Eclipse开发环境

PhoneGap是一种移动应用的开发框架，可以让使用者用HTML+CSS+JavaScript来开发移动端的App软件。Web应用一般都使用HTML+CSS+JavaScript来开发，熟悉者很多，而且有跨平台的特性。但在移动端，有iPhone、Android、Window Phone、BlackBerry等多种平台，每种平台都有不同的开发环境及编程语言，对熟悉Web开发的人来说要尝试开发运行其上的App就有比较大的难度，而且往往也只能针对一种平台进行开发，想应用到多平台就很难。

PhoneGap就是这样的一种软件，让Web开发者能使用熟悉的HTML+CSS+JavaScript技术来开发移动端的App，而且可以比较容易地应用到iPhone、Android、BlackBerry等多种平台上。2008年，最初的PhoneGap是基于iPhone平台的，并获得很大成功，然后可以扩展到支持Android等平台。创建PhoneGap的Nitobi软件公司后来把代码贡献给Apache软件基金会ASF，并改名为Apache Cordova，2011年被Adobe公司收购，现在是Adobe软件公司下的一款软件。PhoneGap应用程序的运行寄托于移动设备上的内置浏览器webkit，因此受其处理速度的影响，比原生程序运行要慢，而且在不同平台上的支持程度也不同，不是所有手持端设备都能支持所有功能；但PhoneGap确实是快速实现普通移动App的不错方法，特别对熟悉HTML+CSS+JavaScript的Web编程者来说是迅速进入移动端编程的捷径。

在不同的移动平台上使用PhoneGap需要进行相应的配置，我只对Android平台感兴趣，所以只关注这方面。开发Android最常用的是Eclipse，PhoneGap要配置到Eclipse平台上需要一个繁琐的过程，但配置完成一次后，对以后的使用相对就比较简单了。

1.PhoneGap的目录结构：

PhoneGap有多种版本，3.0以上的版本使用方法差别很大，一般Eclipse使用的是phonegap-2.9.0，大概22MB多，并不大。这是一个压缩包，解压后可以看到其目录结构：

其中doc文件夹中是一些使用说明和代码示例，主要以HTML格式存储，可以在浏览器中打开；lib文件夹中的则是一些以手持终端平台命名的子文件夹，放置相关平台开发需要使用的文件和代码：

主要关注Android平台的开发，可以打开其中的android子文件夹：

最主要使用的是其中cordova.js、cordova-2.9.0.jar和xml子文件夹，需要复制到每一个Android项目中。

2.Eclipse中新建一个项目：

我使用的是新版本的Eclipse，SDK也使用最新版本来编译，虽然目标平台为4.X。因为版本的问题，新建项目产生的模板本身就有很多问题需要处理。打开Eclipse后，首先会提示存储项目的工作目录workspace，选定后就会在相应目录中出现一个文件夹：

新建一个项目，使用菜单File-Android Application Project：

打开一个对话框，需要一个项目名称，然后会自动产生一个Package名称，可修改这个名字。下面是最低版本SDK、目标SDK、编译使用的版本，还有主题Theme，一般只需要选择Target SDK：

设置完成后点击下面的Next按钮，出现下一个界面：

这个界面可以不用修改，直接点击Next按钮，然后出现图标设置界面：

点击Browse...按钮，选择一幅图像作为项目的图标，可以通过其中的设置使图标在手机App中显示时更美观。然后点击Next按钮：

这个界面需要选择一种Activity，即打开App时显示的效果，这里使用默认的Blank。然后点击Next按钮：

在这个对话框中可以设置Activity和layout的名字，这里使用默认值，然后点击Finish完成新建项目设置。正常应退出这个设置界面并返回主界面，但因为有错误，会一直停留在这个界面，需要按Cnacel来退出，可见软件还是有bug。这时打开MainActivity.java，可以看到存在大量错误提示。经过网上搜索，主要是因为版本兼容问题引起的。

3.版本兼容问题的解决方法：

Android从低版本升级的高版本会造成很多兼容性问题，为了解决这个问题，Android开发者提供了一个软件包appcompat_v7，需要下载解压，为了方便可以存放到workspace文件夹中，准备导入。使用菜单File-Import：

在弹出的Import对话框中选择“Android-Existing Android Code Into Workspace”，然后点击Next按钮：

在出现的Import Projects界面中，点击browse...按钮，找寻到解压后的appcompat_v7文件夹，点选，点击Finish按钮。

然后在Package Explore窗中可以看到这个项目已经出现：

在Package Explore窗中点选项目，使用菜单Project-Properties，其实使用鼠标右键菜单效果也一样。

在出现的项目属性对话框中，点击Android项，在出现的界面中点击右边的Add按钮：

然后会出现Project Selection对话框，刚才Import进来的项目出现在其中，双击即可：

项目属性中的Library中出现了导入的解决版本兼容问题的appcompat_v7项目。这里勾选了Is Library，不应勾选，因为后面会出问题。

导入appcompat_v7项目后，Complex项目中的错误就会消失了，然后就可以把PhoneGap压缩包中的相关文件导入进来，并进行一些配置。

4.PhoneGap的导入及配置：

已经建立了一个新项目，然后就可以把PhoneGap导入并进行相关配置了。

1）在assets文件夹中新建www子文件夹：

鼠标点选assets文件夹，鼠标右键菜单中选择New，子菜单中选择Folder：

在弹出的New Folder对话框中的Folder name栏中输入www，点击Finish按钮。

在下载解压出的PhoneGap软件包中选择cordova.js文件：

复制到新建的assets/www子文件夹中：

2）新建libs文件夹：

在早期的Android项目中有一个libs文件夹，但新版本中没有这个文件夹，需要新建。然后把下载解压的PhoneGap软件包中的cordova-2.9.0.jar文件复制到新建的这个文件夹中：

3）复制xml文件夹到项目的res文件夹中：

下载解压的PhoneGap软件包中有一个xml文件夹，需要整体复制到项目的res文件夹中：

4）修改MainActivity.java代码：

新建项目后，会自动产生MainActivity.java代码：

为了使用PhoneGap，需要对其中的部分代码进行修改，包括两部分。要增加“import org.apache.cordova.*;”，还要把类的继承由Activity改为DroidGap，然后将setContentView(R.layout.main)替换为super.loadUrl("file:///android_asset/www/index.html")，并把onCreate前面的protected改为public。修改后的代码为：

这里，super.loadUrl中的内容与asset/www/子文件夹中的html文件名相对应，需要保持一致。

这样修改后会出现错误提示，需要打开项目属性对话框，使用Add External JARs...按钮加入libs文件夹中复制的cordova-2.9.0.jar文件。

然后，会提示import的android.support.v7.app.ActionBarActivity并没有使用，应该是可以删除的。

5）修改AndroidManifest.xml文件：

每一个Android都有一个AndroidManifest.xml文件。鼠标点击此文件，使用鼠标右键菜单中的Open With-Text Editor子菜单：

可以看到原文件的内容为：

需要在其中加入权限控制代码，修改后的代码为：

还需要在<activity>标记中添加一行代码，修改后为：

上述修改，对每个项目都需要修改一次。有了一个修改后的模板，以后只需要复制粘贴就可以了。

5.加入HTML+CSS+JavaScript写的代码文件：

PhoneGap的目的，就是可以将HTML+CSS+JavaScript写的应用程序运行在手持端设备上，环境配置好之后就可以加入相关的文件了。我的Complex应用程序原是一个用于复数四则运算的网页计算器，经改写后可以用于手持端应用，包括html、css、js文件，已经完成，改写的方法会在以后加以详细说明，这里只是简单地将其导入项目中。鼠标点击assets/www子文件夹，右键菜单中选择New-File：

因为前面在java代码中为“super.loadUrl("file:///android_asset/www/index.html")”，与此对应，新文件名为index.html：

用Text Editor打开此文件，把已经编写好的HTML代码复制进来：

本项目包含两个js文件和一个css文件，都需要复制到此文件夹中，文件夹中还包括前面已经复制来的cordova.js文件。

这样就把HTML+CSS+JavaScript写的应用程序导入到了Eclipse开发平台中了，可以先在AVD模拟器上看效果。

6.在AVD模拟器上预览运行效果：

鼠标点击项目名，使用鼠标右键菜单Run As-Android Application：

但不幸，出现了错误提示，无法运行：

打开项目属性，Android项中去掉勾选的Is Library：

再次使用鼠标右键菜单Run As-Android Application，Eclipse自动打开AVD，等待启动后，最后显示如下界面：

出现了汉字乱码，这是编码设置的问题。Android项目一般都使用UTF-8编码，不仅要求HTML中设置charset编码正确，而且还需要设置项目属性中的Resource项的编码，选择Other，下拉列表中选择UTF-8：

改动设置后，相关文件中的汉字变成了乱码，需要重新输入或复制，恢复正确的汉字编码：

然后再次使用鼠标右键菜单Run As-Android Application，显示界面中的编码已经正常：

而在APPs中也出现了设置的图标，图标下面是Complex的名称：

7.产生APK文件：

安装到Android系统中的应用程序都是以apk文件发布的，所以这个PhoneGap项目也需要产生apk文件，以便下载并安装到手持设备上。鼠标点击项目，使用鼠标右键菜单Android Tools-Export Signed Application Package...子菜单：

但出现错误，而无法进行下去，可以看到Package Explorer中显示了错误标记：

在窗口下面的console窗口中可以看到错误详细信息列表：

对于“"app_name" is not translated in "af" (Afrikaans),......”这类错误，主要是编码输出问题，很多是误报，可以使用多种方法处理。可以看到错误文件内容为：

因为只有三项，可以在每项中加入translatable="false"，避免报错。

也可以通过在Preferences中Android项中的Lint Error Checking子项中的设置改变来避免，使错误变成警告，而不会影响程序编译和运行。在列表中查找MissingTranslation，将其Severity值修改为Warning。

对于“Duplicate id @+id/image, already defined earlier in this layout”这类错误，是因为版本升级后的一些冲突造成，属于软件bug，也是通过Preferences中Android项中的Lint Error Checking子项中的设置来避免，查找列表中的DuplicateIds，将其Severity修改为Warning。

其他需要修改的Preferences中Android项中的Lint Error Checking子项还有Instantiatable:

而导入的解决版本兼容问题的appcompat_v7项目中也有几处错误：

需要在color前加入“android:”。而下面一项LinearLayout可以修改为：

这样就解决了所有错误，可以正常输出apk文件了。再次使用鼠标右键菜单Android Tools-Export Signed Application Package...子菜单，会出现导出项目名称界面，输入名称，点击下面的Next按钮。

然后进入Keystore selection设置界面。需要选择应用程序证书，也可以创建新的证书，在Location栏中输入证书的存放位置，并设置密码。

然后就可以使用创建的应用程序证书，并填入相关内容，其中Validity需要填入有效年限，一般为25年。

然后的界面中可以选择导出APK文件的位置，最后保存。在指定文件夹中可以找到输出的apk文件，大约为1MB大小，然后下载到手机中，经过测试使用，能够正常运行，说明以上设置是基本正确的。