PhoneGap介紹及簡單部署，phonegap部署
一、什麼是PhoneGap：
PhoneGap是一個自由開放源碼的開發工具和架構，允許利用HTML + JavaScript + CSS的強大功能在多個手機平台上開發程式,開發出來的程式經過在各自的平台上編譯形成獨立的安裝程式。使程式看起來和native的程式一樣。
二、PhoneGap的優勢和劣勢：
優勢：
l 跨平台：一次開發，多個平台共用。現主要包括了android，iOS，Apple iOS, Google Android, Palm, Symbian, BlackBerry 等。WP7等平台也在逐步相容中。
l 降低開發門檻。對於很多WEB開發人員來說，熟悉Objective-C語言和Java語言都是比較痛苦的事情。有了PhoneGap就不用擔心這些了。用熟悉的Web前端技術就可以開發出很專業的手機應用程式。
l 提供強大的硬體存取控制。比起傳統的Web程式，PhoneGap提供了一些列的JS 的類，可以直接存取硬體。比如加速，相機，指南針，GPS，檔案訪問等，可以讓你用JS方便地調用系統的硬體。以彌補傳統Web程式的一塊錯誤。
l 方便的安裝和使用。PhoneGap的架構很複雜，但對於大多數開發人員來說，只用很簡單的配置就可以搭好環境。只用專註寫好自己的Web頁面，拷貝進去就可以了。
劣勢：
l 運行速度慢：程式的載入和UI介面的反應都比原生的程式慢，因為它實際上還是在展示Web頁面，所以載入、頁面重新整理等肯定是需要一定時間的。
l 不適合部分程式。如果你的程式需要3D功能，或者對介面重新整理有較高的要求，這樣的程式現在來說還只是用原生的語言會比較好。
三、PHONEGAP開發需要的基本知識：
l HTML：做為最基本的Web開發，HTML知識必不可少。現在很多移動終端已經支援HTML5了，所以最好學會HTML5相關的知識；
l CSS：定義的頁面的樣式等等，不用CSS，你的頁面會很難控制定位和樣式等等。建議能掌握CSS3的相關知識，能寫出更好的介面；
l JavaScript：背景互動都由JavaScript實現，讀寫資料庫，載入Google Map等等；
l PhoneGap的類庫：都是JavaScript的庫，使用很簡單，有詳細文檔，可以參考官網：http://docs.phonegap.com/
l 基本的平台知識：比如要做iPhone的程式，就要知道XCode怎麼安裝，怎麼編譯，怎麼擷取授權認證，真機調試等等，要做android程式就要會搭建Ecllipse開發環境等等。會簡單使用這些平台後，就可以安裝PhoneGap的平台了，可以參
考：http://www.phonegap.com/start
四、jQuery Mobile：PHONEGAP的得力助手：
開發PhoneGap的程式，jQuery Mobile不是必備，但是有了jQuery Mobile，可以使你的程式美觀很多。
jQuery Mobile其實是一堆的樣式集和JAVA事件。比如寫一個按鈕，iOS和android的是不同的，用HTML做出來的往往很醜。一般的處理方式是重新定義按鈕的樣式，使它變得更像手機平台上的按鈕。jQuery Mobile為你提供了這一套架構，你可以通過很簡單的屬性設定就可以做出跟手機平台下車差不多的按鈕，相當方便。詳情可以參考：http://jquerymobile.com/
註：以上轉載至：http://blog.sina.com.cn/s/blog_4cdc44df0100uuiq.html（在此對博主表示深深的謝意，感謝博主細心的總結。麼麼噠~~）
相信通過上面的介紹，大家對於PhoneGap已經有了一定的認識，下面我將帶領大家通過實現一個最簡單的案例來協助大家對PhoenGap的認識。
工欲善其事，必先利其器。開發PhoneGap程式也一樣，我們第一步需要做的是，下載最新版的PhoneGap，：http://phonegap.com/install/，下載後無需安裝，PhoneGap直接解壓便可以使用。PhoenGap官網提供了安裝視頻，但是不知道是網路原因還是什麼情況，根本打不開。下載好我們的PhoneGap後，接下來我就開始進入我們的案例的實現。
PhoneGap的開發和我們的Android開發十分相似，我們首次需要做的和之前的項目一樣，我們開啟eclipse，建立一個工程，和我們之前建立工程一樣，建立好我們的工程之後下面我們一起來配置開發環境。
先給大家看一下我們的目錄結構：
從上面的目錄結構，大家不難看出，我們今天的重頭戲部分就在於assets檔案夾。這個檔案夾中的內容從何而來，就在我們第一步下載的PhoneGap中，我們解壓我們下載好的壓縮包，因為我們今天的講解是針對Android平台開發，所以我們在解壓檔案中找到Android檔案夾，在這個檔案夾中，有我們需要的兩個檔案：cordova-2.8.1.jar和cordova.js，當然我的項目中引入的比較多，實際開發中，前兩個是必須的，剩餘的大家根據自己的開發需要進行增加。具體的操作：將cordova.js拷貝到assets下www檔案夾中，將cordova-2.8.1.jar拷貝到libs檔案夾下，然後記得將這個jia包匯入到工程中。具體的操作：選擇工程，按右鍵選擇properties，之後的請看：
到這裡我們的大工已經完成三分之二，下面我們來完成最後的一點：
建立一個index.html檔案，並將其拷貝到assets下www檔案夾中：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>jQuery Mobile Web 應用程式</title><script src="js/cordova-2.7.0.js" type="text/javascript"></script></head> <body> <h1>我的第一個PhoneGap程式</h1></body></html>
下一步修改我們的主Activity代碼：
import android.os.Bundle;//import android.app.Activity;import org.apache.cordova.*;public class MainActivity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main); super.loadUrl("file:///android_asset/www/index.html"); }}
接下來我們需要在AndroidMainfest.xml檔案中添加一些許可權聲明：
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.helloword" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" /> <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="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.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.RECORD_VIDEO" /> <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" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.example.helloword.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>
到這裡我們的項目基本已經完成，大家運行應該可以在模擬器上出現下面的內容：
不過現在還不能說完成了配置，我們還需要在res檔案下添加一個xml檔案夾，在裡面添加一個config.xml（無需改動，直接拷貝即可）：
<?xml version="1.0" encoding="utf-8"?><!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.--><cordova> <!-- access elements control the Android whitelist. Domains are assumed blocked unless set otherwise --> <access origin="http://127.0.0.1*"/> <!-- allow local pages --> <!-- <access origin="https://example.com" /> allow any secure requests to example.com --> <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www --> <access origin=".*"/> <!-- <content src="http://mysite.com/myapp.html" /> for external pages --> <content src="index.html" /> <log level="DEBUG"/> <preference name="useBrowserHistory" value="true" /> <preference name="exit-on-suspend" value="false" /><plugins> <plugin name="App" value="org.apache.cordova.App"/> <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/> <plugin name="Device" value="org.apache.cordova.Device"/> <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/> <plugin name="Compass" value="org.apache.cordova.CompassListener"/> <plugin name="Media" value="org.apache.cordova.AudioHandler"/> <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/> <plugin name="Contacts" value="org.apache.cordova.ContactManager"/> <plugin name="File" value="org.apache.cordova.FileUtils"/> <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/> <plugin name="Notification" value="org.apache.cordova.Notification"/> <plugin name="Storage" value="org.apache.cordova.Storage"/> <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/> <plugin name="Capture" value="org.apache.cordova.Capture"/> <plugin name="Battery" value="org.apache.cordova.BatteryListener"/> <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/> <plugin name="Echo" value="org.apache.cordova.Echo" /> <plugin name="Globalization" value="org.apache.cordova.Globalization"/> <plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/></plugins></cordova>
到這裡我們本篇關於phoneGap的介紹就講完了，可能大家還有疑問，歡迎留言討論。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
