Hybrid開發架構搭建（一）PhoneGap簡介，hybridphonegap

Hybrid開發架構搭建（一）PhoneGap簡介，hybridphonegap

本系列部落格將介紹採用PhoneGap、Backbone、Seajs、Ratchet和SPM等js庫或工具搭建一個Web主體型的Hybrid模式的行動裝置 App開發架構。

 

Phonegap是一款開源的開發架構，旨在讓開發人員使用HTML、Javascript、CSS等Web APIs開發跨平台的行動裝置 App程式。PhoneGap原本由Nitobi公司開發，後來Adobe收購了這件公司，Adobe將PhoneGap的核心代碼捐獻給了Apache，於是有了Apache Cordova。其實這兩者的核心代碼是沒區別的，PhoneGap是原來的名字，Adobe擁有PhoneGap的商標，所以捐出去的代碼就改了名字為Apache Cordova，目前為止基本上可以認為這二者是同一個東西，除了包名不同，事實上從PhoneGap下載到的phonegap-2.9.1.zip解壓後發現裡面的名字也是cordova。

                                

分別是PhoneGap和Cordova官網上介紹二者的圖片，圖片對比也可以看出Cordova類似於PhoneGap的大腦（核心組件）。PhoneGap為企業開發人員提供了雲端打包服務和其它功能。

下面在Android平台下採用PhoneGap實現一個簡單的Demo。開發環境Windows7+Eclipse 4.2.2 + Android SDK 17

在http://phonegap.com/ 下載一個最新的PhoneGap軟體包，解壓後在lib檔案夾下得到如下檔案夾，可以看到PhoneGap目前支援的平台有android、ios、windows-phone等，現在我們只做Android平台的示範，從android檔案夾中找到src檔案夾和assets檔案夾。

    

建立一個Android工程HybridDemo，將這兩個檔案夾下的檔案分別拷貝到建立工程對應的目錄下，如所示（新版的PhoneGap依賴了okhttp這個庫）：

                             

修改MainActivity.java檔案：

import org.apache.cordova.DroidGap;import android.os.Bundle;import android.annotation.SuppressLint;import android.app.Activity;import android.view.Menu;public class MainActivity extends  DroidGap {  @SuppressLint("SetJavaScriptEnabled")@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);    super.init();super.appView.getSettings().setJavaScriptEnabled(true);  super.loadUrl("file:///android_asset/www/index.html",2000); } }

  修改AndroidManifest.xml檔案，為PhoneGap各個功能組件的調用增加許可權。

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

還有一個config.xml設定檔，檔案路徑為res/xml/config.xml，我們只做示範，沒有涉及到外掛程式的開發，不需要修改這個設定檔，從phonegap檔案夾下拷貝過來就是了，這個設定檔被PhoneGap架構java實現部分所引用，沒有它會報錯。

運行程式結果：