PhoneGap快速上手 - 基于eclipse环境搭建、部署（图解）

来源：互联网发布：qq炫舞 mac 编辑：程序博客网时间：2024/06/10 14:06

随着产品需求进展，终于要着手移动应用的开发了，其中，android更是首当其冲。因为产品本身就是以资讯内容为主，考虑到节省成本、进度等，我选择借助PhoneGap这个中间件来快速开发（国内还有更易入手的框架AppCan）。看了官方的PDF文档，发现多处描述不清，遂决定把自己的步骤记录下来，发布出来，也算个零起点的教程。

1、安装、部署环境，包含Eclipse，Android SDK，ADT，PhoneGqp插件四个工具、组件（图一）：

（图一）

1.1 下载解压eclipse，最低要求eclipse 3.4，最新版本为juno，v4.2。酌情下载；

1.2 下载并安装Android SDK。启动Android SDK Manager，勾选所需要版本的开发包及相关工具（图二）；启动AVD Manager，创建对应版本的模拟器（图三）

（图二，点击查看大图）

（图三，点击查看大图）

1.3 下载并安装ADT ADT Plugin；

1.4 下载并安装PhoneGap。

2、创建项目
2.1 启动Eclipse，然后在菜单“File”下选择“New > Android Project” （图四）；

（图四）
2.2 一直下一步，直到“New Blank Activity”，将Activity Name改为App，（图五）；
PhoneGap快速上手-基于eclipse环境搭建、部署（图解）
（图五）

2.3 finish，得到如下工程目录（图六）；
PhoneGap快速上手-基于eclipse环境搭建、部署（图解）
（图六）

2.4 在根目录的assets中创建www目录，复制phonegap.js（从PhoneGap解压缩后的Android目录中将解压缩后的带版本号的js文件名修改为phonegap.js）到/assets/www；复制phonegap.jar（从PhoneGap解压缩后的Android目录中）到/libs；复制xml文件夹（从PhoneGap解压缩后的Android目录中，包含plugins.xml）到/res；

2.5 修改src目录下App.java，将class的继承由Activity改为DroidGap，
将setContentView()替换为super.loadUrl("file:///android_asset/www/index.html");
添加import com.phonegap.*;
移除import android.app.Activity;
如果此时报“R cannot be resolved to a variable”，请注意检查/res目录下除了添加xml目录外，其他一切不要改动，无误后project - clear 一遍；
改后如（图七）；
PhoneGap快速上手-基于eclipse环境搭建、部署（图解）-Activity继承
（图七）

2.6 此时如果报找不到phonegap.jar的错误，请右键项目properties - Java Build Path - Libraries 添加libs中的phonegap.jar到项目，如果不显示别忘了刷新；

2.7 打开根目录的AndroidManifest.xml文件，将下面的权限设置拷贝到versionName之后，并在activity标签中添加android:configChanges="orientation|keyboardHidden"（图八）；
XML:

123456789101112131415161718192021

<supports-screensandroid: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" />

PhoneGap快速上手-基于eclipse环境搭建、部署（图解）-AndroidManifest

（图八）

2.8 在 “/assets/www”目录中新建文件“index.html”，并粘贴如下代码：

123456789101112

<!DOCTYPE HTML><html><head><title>PhoneGap</title><meta charset="utf-8" /><script type="text/javascript" charset="utf-8" src="phonegap.js"></script></head><body><h1>Hello World。</h1><h1>你好，世界。</h1></body></html>

3、部署、发布项目
3.1 部署在PC模拟器端
如果你在 1.2 步的模拟器开发包安装一切正常的，那么现在Build Project后就可以直接右键 Run As - Android Application，系统会自动启动模拟器，同时，会留下如下日志（图九）
PhoneGap快速上手-基于eclipse环境搭建、部署（图解）-日志
（图九）

3.2 部署到移动终端
如果你手上正有一部Android设备，你只需在设置 - 应用程序 - 开发 - USB调试打“√”即可，（图十）

（图十）
模拟器执行效果如图十一
PhoneGap快速上手-基于eclipse环境搭建、部署（图解）-日志

（图十一）
android 4.1 则：设置 - 开发人员选项 - ... （图十二）

（图十二）

至此，相信每一个按照步骤操作部署的开发者都能得到一个android程序了，虽然极其简易。
经过实地开发，PhoneGap接下来的开发并不像HelloWorld这样顺利，最主要的文档和资料的贫乏，对成本控制不是太严格的项目，Java程序员还是优先考虑native。
“良好的开端是成功的一半”

0 0