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

最新推荐文章于 2018-07-26 13:48:42 发布

零点起航

最新推荐文章于 2018-07-26 13:48:42 发布

阅读量764

点赞数

分类专栏：移动开发

移动开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

随着产品需求进展，终于要着手移动应用的开发了，其中，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，（图五）；

（图五）

2.3 finish，得到如下工程目录（图六）；

（图六）

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 一遍；
改后如（图七）；

（图七）

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

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

 
  
     1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        
      <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"
 />
 
 

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

（图八）

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

 
  
     1
2
3
4
5
6
7
8
9
10
11
12
  
       
       <!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，系统会自动启动模拟器，同时，会留下如下日志（图九）

（图九）

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

（图十）
模拟器执行效果如图十一

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

（图十二）

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

零点起航

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PhoneGap快速上手 - 基于eclipse环境搭建、部署（图解）

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

扫一扫