Cordova開發技巧

時間  2019-11-09
標籤 cordova 開發 技巧 欄目 Cordova 简体版
原文   原文鏈接

本文承接上篇《Cordova應用解析》。javascript

Crodova支持的每一個移動平臺都有一些處理方法和工具用來測試和調試Cordova應用。通常能夠用模擬器和物理設備加載Cordova應用，還能夠用桌面瀏覽器測試。然而一些處理方法和功能適用於全部支持的移動平臺，先看一些開發者應該注意的事項，而後再說明一些開發處理方法和工具用來測試和調試Cordova應用。css

Cordova開發注意事項

同一框架下不一樣的開發者寫的項目總會存在一些不一致，而且Cordova支持的平臺之間都有不一樣的處理方式，要作到應用開發的整潔和無縫是很困難的。大部分問題在框架版本更新過程當中解決了，如今還有兩個問題。html

處理API的不一致

能夠在http://phonegap.com/about/feature頁面看到一張功能支持列表。若是要用到的功能在某個平臺上不被API支持，就須要針對這個平臺完善這個功能。java

真實的支持狀況仍是以API文檔爲準android

若是某API不能被開發時用到的全部平臺支持，可使用上一節說到的device.platform和device.version肯定應用跑在哪些平臺或系統上，並在不支持這個API的平臺上禁用這個功能。另外一種處理方法是在調用某個API時使用JavaScript的try/catch語句直接處理這種失敗的狀況。ios

應用中的圖形

不一樣平臺、同一平臺不一樣的版本對於圖標和閃屏的要求一般是不同的。開發者在構建不一樣平臺的Cordova應用時必定要準備一套適用於不一樣平臺要求的圖形。PhoneGap維護了一個不一樣操做系統上的圖標要求的列表： https://github.com/phonegap/phonegap/wiki/App-Icon-Sizes。git

另一些平臺的設備上，設備會向系統使用某種主題幫助自已在市場上容易區分。這些設備上的圖標須要修改以適合不一樣的主題。在Cordova應用中能夠自定義構建方法把這些不一樣的平臺的相應的合適的圖形文件整合到要構建的平臺中去。github

開發Cordova應用

再總結一下建立Cordova應用的過程。web

單個移動設備平臺

開發者可能只須要在單個平臺上開發。只要打開命令行界面，使用以下命令：chrome

cordova create app_name
cd app_name
cordova platform add platform_name
cordova prepare platform_name

app_name指應用名，platform_name指平臺。若是要建立一個Android應用，名叫lunch_menu，能夠這麼寫：

cordova create lunch_menu
cd lunch_menu
cordova platform add android
cordova prepare android

也能夠指定更多應用信息：

cordova create lunch_menu com.cordovaprogramming.lunchmenu "Lunch Menu"
……

這樣建立了一個項目，web內容位於根目錄的www的文件夾中。而在Android平臺文件夾中有web內容的副本，用來生成Android應用。

若是想添加一個平臺，須要手動複製現有項目的www文件夾中的web內容。

多個移動設備平臺

Cordova是一個跨平臺移動開發框架，例如在android和iOS平臺上建立項目可使用以下命令：

cordova create lunch_menu
cd lunch_menu
cordova platform android ios

這樣項目文件夾中的platforms文件夾中產生兩個平臺的文件夾，而根目錄下的www文件夾也由兩個平臺共享。每次測試或調試web內容時，要由CLI把web內容複製到platforms對應的子文件夾中。這樣在開發時，使用IDE進行開發工做，使用CLI管理移動設備平臺，使用命令行工具進入項目文件夾根目錄便於使用命令。再使用Android IDE或測試使用，使用以下命令：

cordova prepare android

或在Android和iOS中測試和調試，使用cordova prepare android ios。prepare命令把www文件夾中全部文件複製到平臺文件夾的合適位置中，這裏指Android的assets/www文件夾和ios的www文件夾。config.xml文件夾內容覆蓋平臺相關的config.xml文件。文件夾結構以下圖：

![文件夾結構](img/10.png)

移動web項目中總有些圖標、圖形、css和js文件在各平臺中有所不一樣。老的版本中須要手動管理。稍後的版本中由CLI管理，即把各平臺的資源各自放在merges文件夾中，在使用prepare命令時，CLI把這些內容複製到各自平臺項目文件夾中。而在最近的版本中去掉了merges文件夾，而使用一種功能更爲強大、擴展性更強的hooks的機制，若是對此感興趣請參考Cordova文檔。

測試Cordova應用

準備好Cordova項目後就能夠測試了，能夠用移動平臺IDE(如Anroid的Eclipse)導入Cordova項目用平臺調試工具，也能夠直接使用命令行測試。

在模擬器上運行

移動平臺通常都自帶模擬器，外觀和行爲與真機類似。使用前面講過的命令執行在模擬器上的運行：

cordova emulate device_platform

和前邊講過的同樣，CLI要準備文件，使用平臺命令行工具構建應用，加載合適的模擬器並運行應用。

在物理設備運行

最終的測試最好仍是在物理設備上運行。用USB線鏈接設備並執行以下命令：

cordova run device_platfrom

前邊也講過run會執行prepare命令，使用平臺命令行工具構建應用，並部署到設備上。

有些設備必須在第一次使用時註冊或簽名。

使用Cordova調試功能

若是不用IDE也有一些方法在遇到問題時進行調試。

使用Alert()

最簡單的調試Cordova應用的方法是使用alert()，可讓你知道運行在哪或顯示變量內容。它比較適合某些類型的調試任務，例如你知道有事件沒有觸發或一些變理讀寫不正確能夠用alert()。

下面是一段有錯誤的示例示碼，來自上一篇的HellowWorld3.html。它在執行時沒有觸發deviceready事件，咱們在onBodyLoad()和onDeviceReady函數上使用alert()，在確認應用工做正常後再去掉。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=uft-8">
        <meta name="viewport" content="user-scalable=no,initial-scale=1,maxmium-scale=1,minimum-scale=1,width=device-width;" />
        <script type="text/javascript" charset="utf-8" src="Cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            function onBodyLoad() {
                alert('onBodyLoad!");
                document.addEventListener("deviceready", onDeviceReady, false);
            }
            function onDeviceReady() {
                alert("onDeviceReady!");
                br = "<br />";
                var element = document.getElementById("appInfo");
                element.innerHTML = 'Cordova Version: ' + device.cordova + br + 'Platform: ' + device.platform + br + 'Model: ' + device.model + br + 'OS Version: ' + device.version;
            }
        </script>
    </head>
    <body onload="onBodyLoad()">
        <h1>HelloWorld3</h1>
        <p>This is a Cordova application that makes calls to the Cordova APIs.</p>
        <p id="appInfo">Waiting for Cordova Initialization to complete</p>
    </body>
</html>

這樣把alert寫在每一個函數的前面，開發者知道什麼時候應該觸發事件，使用alert就知道觸發時發生了什麼事。

咱們並無用Cordova的API navigator.notification.alert()函數，由於在執行onBodyLoad()函數時cordova.js尚未加載，所以不能肯定是否可用。

寫Console

在調試的代碼中寫alert會有問題，就是會不斷的打斷程序流。例如在分析實時或應用執行後的狀況，或者已經執行完的應用中的進程，這都不能打斷程序的執行。但Cordova應用能夠經過JavaScript基於WebKit瀏覽器渲染引擎的console對象實現這種工做。

使用console對象開發者能夠向瀏覽器控制檯寫信息，這些信息能夠經過原生的SDK或設備模擬器的功能在程序外部查看。console對象是窗口級別的對象，是一個能夠由應用中的js代碼訪問的全局對象。Webkit支持幾種語句，最經常使用是這幾句：

  • console.log("message");
  • console.warn("message");
  • console.error("message");

3.0版本之後console從Cordova核心API中刪除，換成插件的形式使用。可使用前面說的添加插件命令添加：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

用下面的代碼舉例說明console的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta http-equiv="Content-type" content="text/html">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            console.warn("This is a warning message");
            console.log("This is a log message");
            console.error("And this is an error message");
        }
    </script>
</head>
<body onload="onBodyLoad()">
    <h1>Debug Example</h1>
    <p>Look at the console to see the message the application has outputed</p>
</body>
</html>

在Android平臺會在elcipse的Logcat中顯示log、warning和error信息，並用不一樣顏色和字體顯示。

若是js代碼遇到錯誤會沒有任何提示，能夠把代碼用try/catch封裝，還能夠把錯誤信息寫到控制檯，以下面所示：

try {
    console.log("some message");
    ...
} catch (e) {
    console.error(e.message);
}

Android Logcat還會顯示產生信息的行號方便查找應用哪裏出了問題。

使用外部工具調試和測試

有許多活躍的開發者社區都提供附帶的工具。像PhoneGap工具頁面(http://phonegap.com/tool)就有附帶工具的信息。之後會專門對Android平臺工具做介紹。

用Weinre調試應用

Web Inspector Remote(Weinre)是一個由社區構建的遠程網頁調試器。如今是PhoneGap構建服務的一部分。能夠從http://people.apache.org/~pmuellr/weinre/docs/latest下載文件和使用說明。

在Cordova開發時，能夠在物理設備或設備模擬器上遠程調試運行在Cordova容器中Web應用。Weinre包括了一個調試服務器、調試客戶端和一個調試對象。調試服務器運行在Macintosh或Windows上，調試客戶端運行在桌面瀏覽器上。

使用前對Weinre作些配置。首先安裝服務器，它基於Node.js，可使用下面命令安裝：

npm install -g weinre

安裝完成後在命令行中輸入：weinre。服務器開始執行後，它在命令行窗口中顯示以下說明：

2013-06-22T17:00:50.564Z weinre: starting server at http://localhost:8080

能夠在http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html一些信息，詳細說明了在服務器啓動時傳遞的命令行選項參數。

服務器啓動後，使用基於瀏覽器的客戶端與服務器和Cordova應用交互。訪問服務器打開weinre調試客戶端，顯示以下圖：

![](img/11.png)

服務器和客戶端者運行起來後就能夠經過向頁面的body部分添加以下腳本標籤鏈接Cordova應用和調試服務器。

<script src="http://debug_server:8080/target/target-script-min.js"></script>

把debug_server替換成調試服務器的正確主機名或IP地址。這樣就把應用加入到weinre調試對象並向Cordova應用提供須要上傳到weinre服務器的信息的代碼。注意在調試時使用物理設備不能使用localhost，而要使用主機名或IP地址，一般是使用wifi鏈接組成的局域網。

記的在應用發佈到生產環境時去掉weinre腳本標籤。若是不去掉可能由於沒有調試服務器應用會被掛起。

加入標籤後，在模擬器或設備上執行應用。在瀏覽器上的weinre調試客戶端頁面中點擊第一個連接，截圖以下：

![](img/12.png)

調試服務器提供了查看和操做頁面元素和網頁其餘內容的方法。調試客戶端頁面頂部不一樣的按鈕用於展現調試對象信息。截圖以下圖：

![](img/13.png)

這個工具的一個功能是選中某部分代碼，weinre會把網頁內容高亮顯示出來。

使用調試客戶端能夠訪問以下內容區域：

  • 元素：HTML、CSS和JavaScript代碼。
  • 資源：應用使用的本地資源，如數據庫、本地存儲和session存儲。
  • 網絡：使用XMLHTTPRequests(XHR)的請求的信息。
  • 時間表：在測試對象應用產生的事件。
  • 控制檯：前邊描述的使用console對象寫到控制檯的信息。

由於weinre功能是基於Google Chrome開發者工具，也能夠在Google Code網站(http://code.google.com/chrome/devtools/docs/overview.html)查找到更多更詳細的信息。

用Ripple仿真器測試應用

Ripple仿真器是用來幫助Cordova應用進行初始化測試的工具。它是基於瀏覽器的仿真器，可用於模仿幾種不一樣的系統。

Ripple在瀏覽器容器中模仿Cordova API的執行。能夠在開發中用Ripple進行快速的功能和UI測試，而後在打包/構建應用後再在設備或模擬器上進行更完全的測試，它並不能取代使用設備或模擬器的測試。它最初是一個BlackBerry項目，所以有許多幫助BlackBerry開發者的功能。

Ripple做爲Google Chrome插件安裝。參考網址：http://emulate.phonegap.com,按照頁面連接在Chrome上下載和安裝。安裝後要容許Ripple進行文件訪問，在Chrome中打開配置頁，選擇Extensions部分，在插件列表中，啓用"Allows access to file URLs"選項。

配置好後直接打開應用中某頁面，還須要對打開頁面啓用Ripple。點擊地址欄右側的Ripple圖標，打開一個窗口爲加載的頁面啓用Ripple。也能夠在URL的後面添加*?enableripple=true啓用Ripple。

Ripple啓用後，瀏覽器顯示一個頁面提示用戶啓用哪一種仿真。Ripple能仿真Apache Cordova和其餘幾種別的平臺和框架，選中Cordova按鍵繼續，至此Ripple會顯示一個在模仿的手機屏幕中的頁面，在手機屏幕畫面周圍是屬性面板，用來配置手機的選項和狀態，如設備的屏幕分辨率、加速器、網絡、地理位置等等。能夠點擊標籤展開選項，改動仿真設備的配置。這時能夠點擊手機屏和應用交互，要作修改只須要改動這個html頁，而後在Chorme瀏覽器中從新加載這個頁面就能夠繼續測試了。

下一篇瞭解一下在Android平臺上開發Cordova應用。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程