文章目录

最近实验一个小东西,需要用到PhoneGap打包编译Html项目,于是从头学起。

#1.安装

首先是JDK(点击这里下载)。不安装的话不能正常安装Android SDK。安装成功检测:启动DOS窗口start–>run–>cmd,在DOS窗口中键入:java -version,如能显示版本信息说明安装正常。

接着是ADK(点击这里下载)。安装完之后是一个Android SDK Manager,你需要下载以下组件(至少包含一个完整版本的文件内容),可能需要较长时间:

再来是Eclipse(点击这里下载)。强大的IDE,不用多说了吧。安个标准版就好。

接着给Eclipse装上ADT插件。打开Eclipse中的菜单 “Help”->”InstallNewSoftware”进入软件安装界面,点击“Add”按钮,Location地址栏填入:https://dl-ssl.google.com/android/eclipse/

最后到了我们的主角,PhoneGap(点击这里下载)。需要注意的是,PhoneGap的最新版本似乎只支持命令行安装,可以根据官方文档安装Node.js以后直接安装,也可以下载2.x版本后备用。

#2.创建PhoneGap项目

1.在eclipse中新建Android Project

2.在项目的目录下,新建两个文件夹:

/libs
/assets/www

3.进入将刚刚下载并解压的PhoneGap包里Anroid目录,我们需要的资源都在这个目录下。

复制cordova.js这个文件(具体名称视下载的版本而定,如果是直接安装的,从新建的PhoneGap项目中拷贝一个出来即可),粘贴到/assets/www目录下。

cordova.jar文件复制到/libs目录下(可能会发现在新版本的PhoneGap中找不到该文件,这里我提供一个3.3.0版本的,点击这里下载)。

再把xml目录复制到android项目的res目录下。

4.在/assets/www下建立index.html文件,内容看起来像这样:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

5.将以下权限配置的xml内容复制到AndroidManifest.xml文件中(这里粘贴了所有权限,在实际项目过程中注意清除掉没用的):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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" />

6.将以下内容添加到AndroidManifest.xml文件的activity标签中:

android:configChanges="orientation|**screenSize**|keyboardHidden" (关于screenSize,之后会专门说明)

这是为了保证机器在横竖屏切换的时候不会重新执行Activity的onCreate方法;

7.AndroidManifest.xml最后看起来会像这样(注意,package包名称部分的com.example.shawn应该修改为你自己的,忘了也没关系,很容易debug到):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.shawn"
android:versionCode="1"
android:versionName="1.0">
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:resizeable="true"
android:smallScreens="true"
android:xlargeScreens="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.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.RECORD_VIDEO" />
<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" />
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" />
<application android:label="@string/app_name"
android:icon="@drawable/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name="outer"
android:configChanges="orientation|screenSize|keyboardHidden"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

其中标签我们可以看做是我们当前的应用,而代表我们应用内的一个界面,标签里我们给当前页面设置了一个权限

android.intent.action.MAIN表示是最先启动的的界面;

android.intent.category.LAUNCHER决定应用程序是否显示在程序列表里;

另外需要注意的是:

<activity
 android:name="outer"
 android:configChanges="orientation|keyboardHidden"
 android:label="@string/app_name" >

我们的标签中有这样一个类名outer,可以自己定义它,例子中会用到这个类名,相当于主类。

8.在刚刚新建的Android Project中找到libs目录,在cordova.jar上点击右键,选择 Build Path->Add to Build Path。

9.最后再修改下src下的Java主文件(如果没有就自己创建一个,包名要记得跟之前在AndroidManifest.xml中写的一样):

1)添加import com.phonegap.*;

2)删掉import android.app.Activity;

3)将outer继承为DroidGap;

4)把setContentView()这行替换为super.loadUrl(“file:///android_asset/www/index.html”);

5)最后看起来就像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.example.shawn;
import android.os.Bundle;
import org.apache.cordova.*;
public class outer extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}

super.loadUrl("file:///android_asset/www/index.html");是加载首页。

然后就可以Run一下项目,在模拟器下跑跑看,成功的话会出现Hello World的界面。Great,搭建成功!可以将网页成功的封装为Android应用了!

♦ 本文固定连接:http://gsgundam.com/2014-01-17-phonegap-develop-part-one-android-environment/

♦ 转载请注明:GSGundam 2014年01月17日发布于 GSGUNDAM砍柴工