PhoneGap&jQuery Mobile應用開發環境配置（For Android）

　　關於移動應用爲何用PhoneGap和jQuery Mobile本文再也不贅述，有興趣的童鞋能夠自行問「度娘」，有不少這方面的文章。本文主要介紹PhoneGap&jQuery Mobile移動應用開發環境的具體配置。

　　PhoneGap是一個基於HTML（5）、CSS（3）、Javascript建立跨平臺移動應用的開發框架（稱之爲平臺可能更合適些）。從Adobe收購了PhoneGap以後，就有了一個新的名字Cordova，目前已經到了3.0的版本，本文中所使用的是2.9的版本。

　　jQuery Mobile是jQuery在移動設備上的版本，不只提供了jQuery的核心庫，還提供了一套比較完整的移動UI框架。

　　要搭建PhoneGap&jQuery Mobile移動應用開發環境（For Android），須要有如下資源：

1. jdk6；
2. Android SDK；
3. Eclipse；
4. Eclipse ADT Plugin；
5. PhoneGap資源包；
6. jQuery Mobile資源包。

　　至於如何安裝jdk、Android SDK、Eclipse、Eclipse Plugin的如何安裝本文一樣，再也不贅述，請配置好相關環境以後，建立一個Android Application Project，至於如何建立一樣再也不贅述，由於本文的重點是說明如何將PhoneGap和jQuery整合到Android Application Project中去，下面將一步一步說明如何整合。Android示例項目名稱爲：HelloWorld（爲啥叫這個名字，我想程序員都懂的）。

1. 將D:\phonegap-2.9.0\lib\android下的cordova-2.9.0.jar複製到D:\androidws\HelloWorld\libs下，同時須要把cordova-2.9.0.jar加到Build Path中。
2. 在Android項目中建立路徑：D:\androidws\HelloWorld\assets\www。
3. 將cordova.js複製到D:\androidws\HelloWorld\assets\www\js。
4. 將D:\phonegap-2.9.0\lib\android\xml整個文件夾複製到D:\androidws\HelloWorld\res。
5. 修改主Activity類，把Activity繼承的父類修改成DroidGap，onCreate方法的權限修飾符改成public（默認爲protected，不改編譯出錯），將onCreate方法中的setContentView替換成super.loadUrl("啓動的主頁面地址")，刪除onCreateOptionsMenu方法。修改後的主Activity類以下所示：　　　

package com.example.helloworld;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class MainActivity extends DroidGap {

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

　　6.　修改AndroidMenifest.xml文件，修改後的文件示例以下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.helloworld"
    android:versionCode="1"
    android:versionName="1.0" >
    
    <!-- 增長Cordova的屏幕支持 -->
    <supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
    />
    
    <!-- 增長Cordova插件支持 -->
    <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.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-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera。autofocus" />

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <!-- 爲Activity節點增長屬性configChanges -->
        <activity
            android:configChanges="orientation|keyboardHidden"
            android:name="com.example.helloworld.MainActivity"
            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>

　　7. 在asset/www下添加主頁面index.html，添加完頁面後，這時候其實已經能夠運行了，這個時候一個完整的PhoneGap應用開發環境配置就結束了。可是爲了使用jQuery Mobile，咱們還須要作一些其餘配置：

• 將D:\jquery.mobile-1.3.2\demos\css複製到D:\androidws\HelloWorld\assets\www\css中；
• 將D:\jquery.mobile-1.3.2\demos\js複製到D:\androidws\HelloWorld\assets\www\js中，若是以前沒有把cordova.js放到這個目錄下面，這個時候能夠把它移到這個路徑下面。

　　8.以上全部配置完成，那麼一個基於PhoneGap&jQuery Mobile的移動應用開發環境就配置完成了。

　　那下面就讓咱們玩一玩吧，在Android項目中我新建了一個index.html文件來做爲主頁面顯示，爲了測試頁面的跳轉，我又加了一個test.html的頁面。

　　具體的代碼結構以下圖所示，圖中標註紅框的部分是此次新增或者須要修改的地方：

　　

　　

　　下面給出兩個頁面的源代碼，由於僅是爲了測試所用，因此頁面中的前端代碼寫的比較糙一點，也沒有按照W3C的規範來作。

index.html　　

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>PhoneGap with jQuery Mobile</title>
        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.3.2.min.css">
        <script src="js/jquery.js"></script>
        <script src="js/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/cordova-2.6.0.js"></script>
    </head>
    <body>
        <h1 style="text-align:center;">
            PhoneGap with jQuery Mobile
        </h1>
        <div style="background-color:#FF7300;color:#CCCCCC;height:60px;line-height:60px;border:2px solid #CCCCCC;padding:10px;margin:10px;border-radius:5px;">
            My First PhoneGap & jQuery Mobile
        </div>
        
        <a href="test.html" style="height:60px;line-height:60px;border:2px solid #CCCCCC;padding:10px;margin:10px;border-radius:5px;">
            Click me
        </a>
        
        <div data-role="footer" class="jqm-footer">
            <p class="jqm-version"></p>
            <p>Copyright 2013 The jQuery Foundation</p>
        </div>
    </body>
</html>

text.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>HTML5Paint with jQuery Mobile</title>
        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.3.2.min.css">
        <script src="js/jquery.js"></script>
        <script src="js/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/cordova-2.6.0.js"></script>
    </head>
    <body>
        <h1 style="text-align:center;">
            PhoneGap with jQuery Mobile
        </h1>
        <div style="background-color:#FF7300;color:#CCCCCC;height:60px;line-height:60px;border:2px solid #CCCCCC;padding:10px;margin:10px;border-radius:5px;">
            Welcome to you!
        </div>
        <div data-role="footer" class="jqm-footer">
            <p class="jqm-version"></p>
            <p>Copyright 2013 The jQuery Foundation</p>
        </div>
    </body>
</html>

　　好，一切準備OK，開始讓咱們運行吧，運行時和Android應用運行是同樣的，能夠選擇模擬器和手機，也能夠打包成apk文件下載安裝到手機上，具體方法我就很少作介紹了，下面給出我在模擬器上跑完的兩幅結果圖片。

　　也許看的迷糊，那就動手搞一搞吧，搞出來以後就是收穫，從如今開始我會把本身在研究PhoneGap + jQuery Mobile中的一些示例代碼和心得問題隨時發出來，到時候但願各位不吝賜教，多多交流！