首次体验phonegap实现的Android APP

之前就听说过phonegap的存在，但是就是一直没有时间去接触它，对他很迷糊。然后最近一时兴起，就去百度了一下phonegap是什么？

以下是百度百科的解释：
PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用IOS，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，Phonegap是一款开源的开发框架，旨在让开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的移动应用程序。原本由Nitobi公司开发，现在由Adobe拥有。

而我自己的理解就是：
一套运行在安卓软件的中的网页，这套网页集合起来实现一个APP的功能。由于我也是刚才接触，可能理解的不太好。所以，想更加了解的这个phonegap的小伙伴，就得自己上网查资料了。

好了，大概的介绍就做到了这里了，下面就开始实现我的第一个phonegap做的APP了。

提示： 实现本文中的工程，需要有一定的Android开发基础，并且使用过eclipse！

首先呢，我们当然是需要拥有一份phonegap开发框架啦，在这里我就给大家提供我自己下载phonegap的下载地址：
前往下载phonegap

在这篇文章中，我使用的是Adobe PhoneGap 2.0 官方正式版，也就是上面那个网址下载回来的phonegap框架。

我们拿到框架后，解压，里面的文件目录是这样子的：

在这里我就简单介绍一下那两个文件夹，doc文件夹里面的文件是phonegap的各个系统版本的使用说明。这个文件夹暂时不理会，我们主要看lib文件夹

打开如下图所示：

从图中可以看出，这个lib文件夹里面包含了各个平台的phonegap，而我在这里主要是做Android的APP，所以，我们将会使用安卓版本的phonegap。

打开android文件夹：

我们主要用到的是里面的js文件，jar文件，xml整个目录，其中js文件将会放在我们安卓项目中的assets目录中的www目录下（这个www目录是自己在assets下新建的），jar文件将会放在项目中的libs目录下，xml目录将会放在res目录里。

了解了文件结构以后，我们开始打开eclipse新建一个安卓项目，然后依照上面所说的，把phonegap的相应文件放到项目的相应工程目录中。

（新建的项目如果没有libs目录和assets目录，则需要自己手动新建）

然后在assets中再新建一个目录并且命名为www(名字可以任意取，建议取名规范化！)

效果如图：

所有文件放置好以后，我们需要回去找到jar文件，鼠标右键，选择Build Path->Configure Build Path,把jar文件配置到工程中。

把配置文件布置好以后，我们就要打开AndroidManifest文件，做一些文件配置：
把以下代码配置到文件中

<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" />

再把下面这段代码配置到activity中：

android:configChanges="orientation|keyboardHidden"

配置后的整体效果：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.phonegapproject"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="19" />
        <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" /> 
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" 
            android:configChanges="orientation|keyboardHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

主文件配置好以后，我们就要修改src下的MainActivity的代码了，
首先导包，把下面的代码添加到MainActivity中

import org.apache.cordova.DroidGap;
import com.phonegap.*;

然后把import android.app.Activity;删除。

接着重新继承DroidGap

public class MainActivity extends DroidGap{

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }

配置完后，我们需要新建一个HTML文件，命名为index
文件结构如下：

<!DOCTYPE HTML> 
<html>
    <head>
        <title>PhoneGap</title>
        <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

新建好HTML文件后，我们把它放进assets中的www目录中，和js文件同级目录

如图所示：

最后，我们回到MainActivity 这个类中，把里面的setContentView
改为 super.loadUrl(“file:///android_asset/www/index1.html”);

到此为止，整个工程就已经完成了。

运行的效果如下：

我们运行出来后就可以看到html网页中的Hello World
这样就成功了！