phoneGap入門實戰

jopen 9年前發布 | 14K 次閱讀移動Web開發框架移動開發 PhoneGap

What is PhoneGap?

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

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

PhoneGap是完全開放源代碼的，你可以通過編寫組件，實現任何原生設備特性的擴展。之后還可以通過PhoneGap打包APP，這樣編寫一次基礎代碼就可以將APP部署到多個移動平臺上。 phoneGap入門實戰

優缺點

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入門實戰

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

創建完成后的目錄結構如下：

phoneGap入門實戰

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/

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1447395031178.html

移動Web開發框架移動開發 PhoneGap

phoneGap入門實戰

What is PhoneGap?

優缺點

PnoneGap的優點

1.跨平臺

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

PhoneGap的不足

1.運行效率

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

建立項目的步驟

項目

理解事件

deviceready

backbutton

menubutton

相關經驗

相關資訊

相關文檔

目錄