首次體驗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
這樣就成功了！