HTML5 APP開發環境的框架搭建
轉載：橘子博客
HTML5 開發APP需要一個開發框架和編譯環境，參閱了相關資料後選擇開源的PhoneGap。PhoneGap是一個開源的開發框架，使用HTML5，CSS3和JavaScript來構建跨平臺的的移動應用程序。
下面介紹PhoneGap環境的搭建，及第一個Web APP。
1、選擇你使用的平臺，PhoneGap支持6個平臺的開發和編譯：IOS，Android，WebOS(HP),BlackBerry,Symbian。
我比較熟悉Android的開發流程，所以選擇Android作爲搭建環境。
2、Eclipse 3.4+ 安裝
Eclipse 3.4+下載地址：http://www.eclipse.org/downloads/
根據個人PC環境選擇相應的版本，我的電腦是win7 x64，下載：Eclipse IDE for Java EE Developers x64
3、下載並安裝Android SDK。最新版本：android-sdk_r20-windows。下載地址：http://developer.android.com/sdk/index.html
4、下載並安裝ADT Plugin，最新版本是：ADT-20.0.0.zip。下載地址：http://developer.android.com/tools/sdk/eclipse-adt.html#installing
PS:Eclipse 搭建Android開發環境，大家Google一下應該很多。
5、下載最新版本的PhoneGap並解壓，我們將使用其中的Android目錄。下載地址：https://github.com/phonegap/phonegap/zipball/1.0.0
6、編寫第一個HTML5 App
- 啓動Eclipse，然後在菜單“File”下選擇“New > Android Project”。
![]( "33")
-
- 在項目根目錄下，創建兩個新目錄:
- /libs
- /assets/www
- 複製phonegap.js（從PhoneGap解壓縮後的Android目錄中，將解壓縮後的帶版本號的js文件名修改爲phonegap.js）到/assets/www。
- 複製phonegap.jar（從PhoneGap解壓縮後的Android目錄中，將解壓縮後的帶版本號的jar文件名修改爲phonegap.jar）到/libs。
- 複製xml整個目錄（從PhoneGap解壓縮後的Android目錄中，包括一個plugins.xml）到/res。【v1.0 rc2以上】
- 對Eclipse的src文件夾中的主要Java文件進行少量調整：（如下圖）
- 將class的繼承由Activity改爲DroidGap
- 將setContentView()替換爲super.loadUrl(“file:///android_asset/www/index.html”);
- 添加import com.phonegap.*;
- 移除import android.app.Activity;
- 在項目根目錄下，創建兩個新目錄:
![]( "55")
- 在這裏你可能會遇到Eclipse找不到phonegap-1.0.0.jar的錯誤。在這種情況下，右鍵單擊/libs文件夾找到Build Paths/ > Configure Build Paths。然後在Libraries標籤頁中添加phonegap-1.0.0.jar到項目中。如果Eclipse不是很穩定，你需要點擊F5刷新一次項目。
- 右鍵單擊AndroidManifest.xml並選擇Open With > Text Editor。
- 將下面的權限設置拷貝到versionName之後（這個可以根據APP的具體情況而定）:
<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” />
————————————————————————————————————————–
在AndroidManifest的activity標籤中添加android:configChanges="orientation|keyboardHidden"。
7、Hello橘子博客
在 “/assets/www”目錄中新建文件“index.html”，並粘貼如下代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>橘子博客</title>
<script type=”text/javascript” charset=”utf-8″ src=”phonegap.js”></script>
</head>
<body>
<h1>你好， 橘子博客。</h1>
</body>
</html>
8、部署到模擬器
- 右鍵單擊項目節點選擇Run As，然後點擊Android Application。
- Eclipse將要求你選擇一個合適的AVD，如果沒有設置的話，你需要創建一個AVD。
9、部署到設備
通過設置手機USB debugging選項，並已將設備連接到電腦。（設置 > 應用程序 > 開發)。或者直接安裝到手機查看效果。
