phoneGap入門實戰

What is PhoneGap?

　　PhoneGap是一個用基於HTML5的移動應用前端開發框架，使用HTML+CSS+JavaScript，再通過PhoneGap就可以快速建立APP了。

　　PhoneGap能讓你只使用的簡單的Web技術即可獲得移動裝置的原生特性，如攝像頭、加速器、指南針。

　　PhoneGap是完全開放原始碼的，你可以通過編寫元件，實現任何原生裝置特性的擴充套件。之後還可以通過PhoneGap打包APP，這樣編寫一次基礎程式碼就可以將APP部署到多個移動平臺上。

優缺點

PnoneGap的優點

1.跨平臺

　　PhoneGap目前支援的移動平臺有: Android, iOS, Windows Phone、 Windows 8、 Firefox OS、 Amazon Fire OS、 BlackBerry 10、 Ubuntu、Tizen。（還有誰比我牛呢!）

2.價效比高，開發難度低

　　只要會HTML+CSS+JS，你就能開發在多達8個移動平臺上執行的App, 還有比這更具價效比的技術嗎?

　　相信會HTML的前端的開發人員，應該是比任何其它一種開發語言的人要多得多吧。不過伺服器端開發，還是要掌握一門其它語言像PHP、Java、.net、Ruby還是Python，這個就沒有限制了。但是，相容性越強的技術，成本越低，效能越差；相容性越差的技術，成本越高，效能越好。

PhoneGap的不足

1.執行效率

　　PhoneGap的執行，依賴於移動裝置上的內建瀏覽器的Webkit， 所以執行速度上自然是比原生的App慢。

2.不能支援全部的系統API

　　由於要支援多平臺, 所以如果一些平臺上獨有的API, 在PhoneGap上就有可能不能得到及時的支援。

建立專案的步驟

　　前面我們已經瞭解了一些PhoneGap的部分內容，那怎樣來建立一個PhoneGap的專案呢,我們將在這節課程中為大家來介紹。

我們可以通過命令列來建立專案。首先建立一個資料夾，然後可以通過以下命令來建立專案。例如建立一個名為project的專案，如下程式碼：

phonegap create project com.example.hello HelloWorld

phonegap create:建立專案的命令； project：專案目錄名稱； com.example.hello：專案內部包名； HelloWorld：專案名稱， 打包出的安裝程式安裝後顯示的名稱；

2.建立命令完成後，我們轉到專案的目錄下，然後新增phonegap外掛，我們可以通過以下命令來新增：

phonegap plugin add <外掛名稱|外掛地址>

例如，我們要在專案中新增網路的外掛，可用如下命令：

cd project
phonegap plugin add cordova-plugin-network-information

3.PhoneGap生成android專案，我們可用以下命令：

phonegap build android

如果想執行到IOS系統，則可以用以下命令：

phonegap build ios

　　經過以上三步一個PhoneGap專案就完成了，然後就可以把我們編譯好的apk檔案，下載到手機或模擬器來看執行效果了。

ps：本文中所講的內容都是基於android平臺。

專案

　　我們就帶大家來感受一下建立一個自己的phonegap程式，實現功能很簡單就是點選返回按鈕時，彈出“hello world”。

1.在系統中，首先轉到root目錄，這就是我們要建立專案的目錄。如下程式碼：

cd /
cd root

2.轉到root目錄後，然後就可以通過phonegap create命令來建立專案了。我們建立一個專案名為project的專案。如下程式碼：

phonegap create project com.example.hello HelloWorld

建立完成後的目錄結構如下：

3.建立命令完成後，我們轉到project目錄下，然後可以去新增要用到的外掛，如網路，通訊錄等。如下命令：

cd project
phonegap plugin add cordova-plugin-network-information 

phonegap plugin add cordova-plugin-contacts

　　由於所建立的專案沒有用到外掛，所以不用新增。

4.外掛新增完成以後，就可以在建立的目錄中，進入www目錄下，然後對index.html進行編輯，在這裡面實現點選返回按鈕時，彈出“hello world”，儲存檔案。如下程式碼：

<script type="text/javascript" charset="utf-8">
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // 處理後退按鈕操作
    function onBackKeyDown() {
        alert("hello world");
    }
</script>

5.在命令列中，通過如下命令，使我們的專案執行到android平臺,並生成apk檔案。如下程式碼：

phonegap build android

　　由於我們在網路上進行編譯並且是第一次，所以用時會比較長，等編譯完成後，再編譯就比較快了。

　　好了，現在我們的第一個phonegap程式就完成了，下載到我們手機中，然後安裝開啟，去試一試吧。

理解事件

　　事件是可以被控制元件識別的操作，如按下確定按鈕，選擇某個單選按鈕或者核取方塊。每一種控制元件有自己可以識別的事件，如窗體的載入、單擊、雙擊等事件，編輯框（文字框）的文字改變事件，等等。對於我們操作手機也是一樣，點選後退按鈕、按下Home鍵、電池電量低等等。

　　事件有系統事件和使用者事件。系統事件由系統激發，如時間每隔24小時，銀行儲戶的存款日期增加一天。使用者事件由使用者激發，如使用者點選按鈕，在文字框中顯示特定的文字。事件驅動控制元件執行某項功能。

　　觸發事件的物件稱為事件傳送者；接收事件的物件稱為事件接收者。

　　在本問將簡單的講解一些PhoneGap提供的一些事件的API，如deviceready、backbutton、menubutton等。

deviceready

　　該事件是在PhoneGap載入完成後發生的事件，相當於程式的入口。事件的註冊形式為：

document.addEventListener("deviceready", yourCallbackFunction, false);

　　其中yourCallbackFunction為回撥函式，我們以後要處理的操作都在這個函式裡。

　　通常情況下，我們希望在HTML檔案的DOM載入完畢後使用document.addEventListener附加一個事件監聽器。

<script type="text/javascript" charset="utf-8">
    // 當PhoneGap載入完畢後呼叫onDeviceReady回撥函式
    // 此時，該檔案已載入完畢但phonegap.js還沒有載入完畢。
    // 當PhoneGap載入完畢並開始和本地裝置進行通訊，
    // 就會觸發“deviceready”事件。
    document.addEventListener("deviceready", onDeviceReady, false);
    // PhoneGap載入完畢，現在可以安全地呼叫PhoneGap方法
    function onDeviceReady() {
    // 現在可以安全使用PhoneGap API，如後面要講的backbutton
    alert("deviceready");
    }

　　ps：該事件在每個PhoneGap程式中都會用到，必不可少的！

backbutton

　　PhoneGap攔截返回鍵，這個功能是當使用者按下返回鍵時事件觸發。事件註冊形式如下：

document.addEventListener("backbutton", yourCallbackFunction, false);

　　如果需要在Android系統上過載預設返回按鈕的行為，可以通過註冊一個事件監聽器來監聽“backbutton”事件。它不再需要呼叫任何其他方法來過載返回按鈕行為，現在只需要為“backbutton”事件註冊一個事件監聽器。

　　通常情況下，需要在接收到PhoneGap的“deviceready”事件後，使用document.addEventListener來附加該事件監聽器。

<script type="text/javascript" charset="utf-8">
    // 當PhoneGap載入完畢後呼叫onDeviceReady回撥函式 
    // 此時，該檔案已載入完畢但phonegap.js還沒有載入完畢。
    // 當PhoneGap載入完畢並開始和本地裝置進行通訊，
    // 會觸發“deviceready”事件
    document.addEventListener("deviceready", onDeviceReady, false);
    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    function onDeviceReady() {
    // 註冊回退按鈕事件監聽器
           document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // 處理後退按鈕操作
    function onBackKeyDown() {
    //在這裡面寫我們自己的程式碼
       }
</script>

menubutton

　　PhoneGap攔截選單鍵，這個功能是當使用者按下選單鍵時事件觸發。事件註冊形式如下：

document.addEventListener("menubutton", yourCallbackFunction, false);

　　如果你需要在Android系統上過載預設選單按鈕的行為，可以通過註冊一個事件監聽器來監聽“menubutton”事件。通常情況下，你需要在接受到PhoneGap的“deviceready”事件後，使用document.addEventListener來附加該事件監聽器。

<script type="text/javascript" charset="utf-8"> 
    // 當PhoneGap載入完畢後呼叫onDeviceReady回撥函式
    // 此時，該檔案已載入完畢但phonegap.js還沒有載入完畢。
    // 當PhoneGap載入完畢並開始和本地裝置進行通訊，
    // 會觸發“deviceready”事件
    document.addEventListener("deviceready", onDeviceReady, false);
    // PhoneGap載入完畢，現在可以安全地呼叫PhoneGap方法
    function onDeviceReady() { 
    // 註冊選單按鈕事件監聽器
        document.addEventListener("menubutton", onMenuKeyDown, false); 
    } 
    // 處理選單按鈕操作
    function onMenuKeyDown() { 
    //在這裡面寫我們自己的程式碼
    } 
</script>   

更多的內容如通訊錄、檔案、媒體、通知等操作內容以及線上的練習可以訪問： http://www.hubwiz.com/course/563180221bc20c980538e8b4/