By

字数 1.6k 字 阅读时长 ≈ 7 分钟

文章目录

最近实验一个小东西，需要用到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应用了！

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

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

♦ 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

♦ 原创不易，如果页面上有适合你的广告，不妨点击一下看看，支持作者。（广告来源：Google Adsense）

♦ 本文总阅读量次

技术知识
安卓androidhtml开发adtEclipsePhoneGapcordovaadkjdk

推荐文章

赚 软