跨平台解決方案

如果想同時開發網頁應用程式及原生APP，目前有三種主要工具: Unity，一個專業的遊戲開發引擎，並且開發效果最接近原生APP，能維持高性能。相對而言，也要付出較高的學習成本。Xamarin，基於Mono專案的開發套件，並且在價格上特別實惠(尤其對.NET開發者而言)。可以直接透過微軟的 Visual Studio及C#開發各種跨平台App。Cordova，能直接使用HTML/CSS/Javascript來開發跨平台APP，如果你是網頁工程師，則學習曲線則幾乎為0。

PhoneGap 技術簡介

PhoneGap是一個用基於HTML，CSS和JavaScript的，創建移動跨平台移動應用程序的快速開發平台。它使開發者能夠利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯繫人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以調用。

該技術可以讓Web開發人員可以利用他們所有的HTML、CSS和JavaScript知識，而且仍舊可以同iPhone的重要本地應用程序(如攝像頭和通訊錄)交互。重點在與快速開發一些基本的應用。門檻相對較低。

功能的支持

PhoneGap在多個主要的智能手機設備上提供了以下功能的支持：
●加速計
●攝像頭
●羅盤
●通訊錄
●文檔
●地理定位
●媒體
●網絡
●通知(警告、聲音和振動)
● 存儲

[開發工具]

中文網站：http://www.phonegapcn.com/
英文網站：http://phonegap.com/

[配置要求]

下載及安裝
Eclipse Classic
Android SDK
ADT Plugin
PhoneGap

[Hello World 範例 PhoneGap+jQuery Mobile

打開 Eclipse,在文件菜單下面點擊 New > Android Project

Application name：Hello
Package name：com.phonegap.hellophonegap
Create Activity：App
注：目前 PhoneGap 0.9.3 用 Android 2.3 以上版本可能會出錯，所以 Build Target 請選 Android 2.2 以下版本。

項目的根目錄,創建兩個目錄:

/assets/www
/libs

解開 phongap 資料夾，選擇 Android，裡面會有一個 phonegap.js 和 phonegap.jar 檔

執行以下操作：

phonegap.js 複製 /assets/www 目錄
phonegap.jar複到 /libs 目錄
xml 文到夾到 /res 目錄

[修改程式碼]

Eclipse的 src 文件夹中的主 Java 文件進行少量調整，如下圖：
class 繼承類由 Activity改為 DroidGap
將 setContentView(R.layout.main) 這一行替換為 super.loadUrl("file:///android_asset/www/index.html");
添加 import com.phonegap.*;
移除 import android.app.Activity;

在這裡你可能會遇到Eclipse找不到phonegap.jar的錯誤。在這種情況下，右鍵單擊 /libs 文件夾找到 Build Paths/ > Configure Build Paths。然後在Libraries標籤頁中添加 phonegap.jar 到項目中。

右鍵單擊AndroidManifest.xml並選擇Open With > Text Editor。將以下的程式碼拷貝到 android:versionName="1.0">
之後:

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

在把 android:configChanges=“orientation|keyboardHidden” 加到 activity 裡的 android:label="@string/app_name"的後面，如下圖：

[hello world 程式碼編寫]

在「/assets/www」目錄中新建文件 index.html ，將下面程式碼複製貼上並存檔

大功告成！