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 八、 Firefox OS、 Amazon Fire OS、 BlackBerry 十、 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");
    }
</script>

　　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>