Cordova 快速指南

---

---

Cordova - 概述

Cordova 是一個使用 HTML、CSS 和 JavaScript 構建混合移動應用程式的平臺。

官方文件給出了 Cordova 的定義：

“Apache Cordova 是一個開源的移動開發框架。它允許您使用標準 Web 技術，例如 HTML5、CSS3 和 JavaScript 進行跨平臺開發，避免使用每個移動平臺的原生開發語言。應用程式在針對每個平臺的包裝器中執行，並依賴於符合標準的 API 繫結來訪問每個裝置的感測器、資料和網路狀態。”

Cordova 特性

現在讓我們簡要了解 Cordova 的特性。

命令列介面 (Cordova CLI)

此工具可用於啟動專案、構建不同平臺的流程、安裝外掛以及許多其他使開發過程更輕鬆的有用功能。您將在後續章節中學習如何使用命令列介面。

Cordova 核心元件

Cordova 提供了一套每個移動應用程式都需要的一組核心元件。這些元件將用於建立應用程式的基礎，以便我們可以投入更多時間來實現我們自己的邏輯。

Cordova 外掛

Cordova 提供了 API，用於將原生移動功能實現到我們的 JavaScript 應用程式中。

許可證

Cordova 採用 Apache 許可證 2.0 版授權。Apache 和 Apache 羽毛標誌是 Apache 軟體基金會的商標。

Cordova 優勢

我們現在將討論 Cordova 的優勢。

• Cordova 提供了一個構建混合移動應用程式的平臺，因此我們可以開發一個可在不同移動平臺上使用的應用程式——iOS、Android、Windows Phone、Amazon-fireos、BlackBerry、Firefox OS、Ubuntu 和 Tizen。

• 開發混合應用程式比原生應用程式更快，因此 Cordova 可以節省開發時間。

• 由於我們在使用 Cordova 時使用的是 JavaScript，因此我們無需學習特定於平臺的程式語言。

• 許多社群外掛可以與 Cordova 一起使用，這些外掛擁有多個針對其進行最佳化的庫和框架。

Cordova 限制

以下是 Cordova 的限制。

• 混合應用程式比原生應用程式慢，因此對於需要大量資料和功能的大型應用程式而言，使用 Cordova 並不是最佳選擇。

• 跨瀏覽器相容性可能會造成許多問題。大多數情況下，我們正在為不同的平臺構建應用程式，因此測試和最佳化可能非常耗時，因為我們需要涵蓋大量的裝置和作業系統。

• 某些外掛與不同的裝置和平臺存在相容性問題。Cordova 還有一些尚未支援的原生 API。

Cordova - 環境搭建

在本節中，我們將瞭解 Cordova 的環境搭建。要開始設定，我們首先需要安裝一些元件。這些元件列在下表中。

安裝 Cordova

在我們開始之前，您需要知道在本教程中我們將使用 Windows 命令提示符。

步驟 1 - 安裝 git

即使您不使用 git，也應該安裝它，因為 Cordova 將其用於某些後臺程序。您可以 在此處 下載 git。安裝 git 後，開啟您的環境變數。

• 右鍵單擊“計算機”
• 屬性
• 高階系統設定
• 環境變數
• 系統變數
• 編輯

將以下內容複製到變數值欄位的末尾。這是 git 安裝的預設路徑。如果您將其安裝在不同的路徑上，則應使用該路徑而不是我們下面的示例程式碼。

;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

現在您可以在命令提示符中鍵入git 來測試安裝是否成功。

步驟 2 - 安裝 Cordova

此步驟將全域性下載並安裝 Cordova 模組。開啟命令提示符並執行以下命令：

C:\Users\username>npm install -g cordova 

您可以透過執行以下命令檢查已安裝的版本：

C:\Users\username>cordova -v 

這就是您在 Windows 作業系統上開始開發 Cordova 應用程式所需的一切。在我們的下一個教程中，我們將向您展示如何建立第一個應用程式。

Cordova - 第一個應用

我們已經瞭解瞭如何安裝 Cordova 併為其設定環境。一切準備就緒後，我們可以建立我們的第一個混合 Cordova 應用程式。

步驟 1 - 建立應用程式

在命令提示符中開啟您希望將應用程式安裝到的目錄。我們將在桌面上建立它。

C:\Users\username\Desktop>cordova 
   create CordovaProject io.cordova.hellocordova CordovaApp

• CordovaProject 是建立應用程式的目錄名稱。

• io.cordova.hellocordova 是預設的反向域名值。如果可能，您應該使用您自己的域名值。

• CordovaApp 是您的應用程式的標題。

步驟 2 - 新增平臺

您需要在命令提示符中開啟您的專案目錄。在我們的示例中，它是CordovaProject。您應該只選擇所需的平臺。為了能夠使用指定的平臺，您需要安裝特定平臺的 SDK。由於我們正在 Windows 上進行開發，因此我們可以使用以下平臺。我們已經安裝了 Android SDK，因此在本教程中我們只安裝 android 平臺。

C:\Users\username\Desktop\CordovaProject>cordova platform add android 

還有其他可在 Windows OS 上使用的平臺。

C:\Users\username\Desktop\CordovaProject>cordova platform add wp8 

C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos 

C:\Users\username\Desktop\CordovaProject>cordova platform add windows 

C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10

C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos 

如果您在 Mac 上進行開發，則可以使用：

$ cordova platform add IOS 

$ cordova platform add amazon-fireos 

$ cordova platform add android 

$ cordova platform add blackberry10 

$ cordova platform add firefoxos 

您還可以使用以下命令從專案中刪除平臺：

C:\Users\username\Desktop\CordovaProject>cordova platform rm android 

步驟 3 - 構建和執行

在此步驟中，我們將為指定的平臺構建應用程式，以便我們可以在移動裝置或模擬器上執行它。

C:\Users\username\Desktop\CordovaProject>cordova build android 

現在我們可以執行我們的應用程式了。如果您使用的是預設模擬器，則應使用：

C:\Users\username\Desktop\CordovaProject>cordova emulate android 

如果您想使用外部模擬器或真實裝置，則應使用：

C:\Users\username\Desktop\CordovaProject>cordova run android 

注意 - 我們將使用Genymotion Android 模擬器，因為它比預設模擬器更快且更具響應性。您可以在此處找到該模擬器。您還可以透過啟用選項中的USB 除錯並將裝置透過 USB 資料線連線到計算機來使用真實裝置進行測試。對於某些裝置，您還需要安裝 USB 驅動程式。

執行應用程式後，它將將其安裝到我們指定的平臺上。如果一切都在沒有錯誤的情況下完成，則輸出應顯示應用程式的預設啟動螢幕。

在我們的下一個教程中，我們將向您展示如何配置 Cordova 應用程式。

Cordova - config.xml 檔案

config.xml 檔案是我們可以更改應用程式配置的地方。在上一個教程中建立應用程式時，我們設定了反向域名和名稱。這些值可以在config.xml 檔案中更改。當我們建立應用程式時，預設的配置檔案也將被建立。

下表解釋了config.xml 中的配置元素。

config.xml 配置表

Cordova - 儲存

我們可以使用可用於在客戶端應用程式上儲存資料的儲存 API。這將有助於在使用者離線時使用應用程式，並且還可以提高效能。由於本教程面向初學者，我們將向您展示如何使用本地儲存。在我們以後的教程之一中，我們將向您展示其他可以使用的外掛。

步驟 1 - 新增按鈕

我們將在index.html檔案中建立四個按鈕。這些按鈕將位於div class = "app"元素內。

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>

它將生成以下螢幕：

步驟 2 - 新增事件監聽器

Cordova 安全策略不允許內聯事件，因此我們將在 index.js 檔案中新增事件監聽器。我們還將window.localStorage分配給稍後將使用的localStorage變數。

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); 
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); 
document.getElementById("removeProjectFromLocalStorage").addEventListener 
   ("click", removeProjectFromLocalStorage); 
document.getElementById("getLocalStorageByKey").addEventListener 
   ("click", getLocalStorageByKey);  
var localStorage = window.localStorage; 	

步驟 3 - 建立函式

現在我們需要建立在點選按鈕時將呼叫的函式。第一個函式用於將資料新增到本地儲存。

function setLocalStorage() { 
   localStorage.setItem("Name", "John"); 
   localStorage.setItem("Job", "Developer"); 
   localStorage.setItem("Project", "Cordova Project"); 
} 

下一個函式將把我們新增到控制檯的資料記錄下來。

function showLocalStorage() { 
   console.log(localStorage.getItem("Name")); 
   console.log(localStorage.getItem("Job")); 
   console.log(localStorage.getItem("Project")); 
} 	

如果我們點選設定本地儲存按鈕，我們將設定三個專案到本地儲存。如果我們隨後點選顯示本地儲存，控制檯將記錄我們想要的內容。

現在讓我們建立用於從本地儲存中刪除專案的函式。

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

如果在刪除專案後單擊顯示本地儲存按鈕，則專案的輸出將顯示null值。

我們還可以使用key()方法獲取本地儲存元素，該方法將獲取索引作為引數並返回具有相應索引值的元素。

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

現在，當我們點選按鍵獲取按鈕時，將顯示以下輸出。

注意

當我們使用key()方法時，即使我們傳遞引數0來檢索第一個物件，控制檯也會記錄job而不是name。這是因為本地儲存按字母順序儲存資料。

下表顯示所有可用的本地儲存方法。

Cordova - 事件

Cordova 專案中可以使用各種事件。下表顯示了可用的事件。

使用事件

所有事件的使用方式幾乎相同。我們應該始終在我們的js檔案中新增事件監聽器，而不是使用內聯事件呼叫，因為Cordova 內容安全策略不允許內聯 JavaScript。如果嘗試內聯呼叫事件，則會顯示以下錯誤。

使用事件的正確方法是使用addEventListener。我們將透過一個示例瞭解如何使用volumeupbutton事件。

document.addEventListener("volumeupbutton", callbackFunction, false);  
function callbackFunction() { 
   alert('Volume Up Button is pressed!');
}

按下音量增大按鈕後，螢幕將顯示以下警報。

處理返回按鈕

我們應該將 Android 返回按鈕用於應用程式功能，例如返回上一螢幕。要實現自己的功能，我們應該首先停用用於退出應用程式的返回按鈕。

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
} 

現在，當我們按下原生 Android 返回按鈕時，警報將出現在螢幕上，而不是退出應用程式。這是透過使用e.preventDefault()命令實現的。

Cordova - 返回按鈕

處理返回按鈕

您通常希望將 Android 返回按鈕用於某些應用程式功能，例如返回上一螢幕。為了能夠實現自己的功能，您首先需要停用按下返回按鈕時退出應用程式。

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

現在，當我們按下原生 Android 返回按鈕時，警報將出現在螢幕上，而不是退出應用程式。這是透過使用e.preventDefault()實現的。

Cordova - Plugman

Cordova Plugman 是一款用於安裝和管理外掛的有用命令列工具。如果您的應用程式需要在一個特定平臺上執行，則應使用plugman。如果要建立跨平臺應用程式，則應使用cordova-cli，它將修改不同平臺的外掛。

步驟 1 - 安裝 Plugman

開啟命令提示符視窗並執行以下程式碼片段以安裝 plugman。

C:\Users\username\Desktop\CordovaProject>npm install -g plugman

步驟 2 - 安裝外掛

要了解如何使用 plugman 安裝 Cordova 外掛，我們將以 Camera 外掛為例。

C:\Users\username\Desktop\CordovaProject>plugman  
   install --platform android --project platforms\android  
   --plugin cordova-plugin-camera 
   plugman uninstall --platform android --project platforms\android  
   --plugin cordova-plugin-camera 

我們需要考慮上面顯示的三個引數。

• --platform − 我們正在使用的平臺（android、ios、amazon-fireos、wp8、blackberry10）。

• --project − 專案構建的路徑。在本例中，它是platforms\android目錄。

• --plugin − 我們要安裝的外掛。

如果設定了有效引數，命令提示符視窗應顯示以下輸出。

其他方法

您可以以類似的方式使用uninstall方法。

C:\Users\username\Desktop\CordovaProject>plugman uninstall  
   --platform android --project platforms\android --plugin cordova-plugin-camera 

命令提示符控制檯將顯示以下輸出。

Plugman 提供了一些可用的其他方法。這些方法列在下表中。

其他命令

如果遇到問題，您可以隨時使用plugman -help命令。可以使用plugman -v檢查版本。要搜尋外掛，可以使用plugman search，最後可以使用plugman config set registry命令更改外掛登錄檔。

注意

由於 Cordova 用於跨平臺開發，因此在後續章節中，我們將使用Cordova CLI而不是Plugman來安裝外掛。

Cordova - 電池狀態

此 Cordova 外掛用於監控裝置的電池狀態。該外掛將監控裝置電池發生的每一次變化。

步驟 1 - 安裝 Battery 外掛

要安裝此外掛，我們需要開啟命令提示符視窗並執行以下程式碼。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-pluginbattery-status 

步驟 2 - 新增事件監聽器

開啟index.js檔案時，您會找到onDeviceReady函式。這就是應該新增事件監聽器的地方。

window.addEventListener("batterystatus", onBatteryStatus, false); 

步驟 3 - 建立回撥函式

我們將在index.js檔案的底部建立onBatteryStatus回撥函式。

function onBatteryStatus(info) { 
   alert("BATTERY STATUS:  Level: " + info.level + " isPlugged: " + info.isPlugged); 
}

執行應用程式時，將觸發警報。目前，電池已充滿 100%。

更改狀態後，將顯示新的警報。電池狀態顯示電池現在充滿 99%。

如果我們將裝置插入充電器，新的警報將顯示isPlugged值已更改為true。

其他事件

除了batterystatus事件外，此外掛還提供另外兩個事件。這些事件的使用方式與batterystatus事件相同。

Cordova - 相機

此外掛用於拍攝照片或使用圖片庫中的檔案。

步驟 1 - 安裝 Camera 外掛

在命令提示符視窗中執行以下程式碼以安裝此外掛。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

步驟 2 - 新增按鈕和影像

現在，我們將建立用於呼叫攝像頭的按鈕和img（一旦拍攝，影像將顯示在此處）。這將新增到div class = "app"元素內的index.html中。

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

步驟 3 - 新增事件監聽器

在onDeviceReady函式內新增事件監聽器，以確保在開始使用 Cordova 之前已載入 Cordova。

document.getElementById("cameraTakePicture").addEventListener 
   ("click", cameraTakePicture); 

步驟 4 - 新增函式（拍照）

我們將建立cameraTakePicture函式，該函式作為回撥傳遞給我們的事件監聽器。當點選按鈕時，它將被觸發。在此函式中，我們將呼叫外掛 API 提供的navigator.camera全域性物件。如果拍照成功，資料將傳送到onSuccess回撥函式，否則將顯示帶有錯誤訊息的警報。我們將此程式碼放在index.js的底部。

function cameraTakePicture() { 
   navigator.camera.getPicture(onSuccess, onFail, {  
      quality: 50, 
      destinationType: Camera.DestinationType.DATA_URL 
   });  
   
   function onSuccess(imageData) { 
      var image = document.getElementById('myImage'); 
      image.src = "data:image/jpeg;base64," + imageData; 
   }  
   
   function onFail(message) { 
      alert('Failed because: ' + message); 
   } 
}

執行應用程式並按下按鈕時，將觸發原生相機。

拍攝並儲存圖片後，它將顯示在螢幕上。

相同的過程可用於從本地檔案系統獲取影像。唯一的區別是上一步中建立的函式。您可以看到已新增sourceType可選引數。

步驟 1 B

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

步驟 2 B

<button id = "cameraGetPicture">GET PICTURE</button>

步驟 3 B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture); 

步驟 4 B

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

當我們按下第二個按鈕時，將開啟檔案系統而不是相機，以便我們可以選擇要顯示的影像。

此外掛提供了許多可選引數用於自定義。

Cordova - 聯絡人

此外掛用於訪問裝置的聯絡人資料庫。在本教程中，我們將向您展示如何建立、查詢和刪除聯絡人。

步驟 1 - 安裝 Contacts 外掛

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincontacts

步驟 2 - 新增按鈕

該按鈕將用於呼叫createContact函式。我們將其放在index.html檔案的div class = "app"中。

<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>

步驟 2 - 新增事件監聽器

開啟index.js並將以下程式碼片段複製到onDeviceReady函式中。

document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);

步驟 3A - 回撥函式 (navigator.contacts.create)

現在，我們沒有任何聯絡人儲存在裝置上。

我們的第一個回撥函式將呼叫navigator.contacts.create方法，我們可以在其中指定新的聯絡人資料。這將建立一個聯絡人並將其分配給myContact變數，但它不會儲存在裝置上。要儲存它，我們需要呼叫save方法並建立成功和錯誤回撥函式。

function createContact() {
   var myContact = navigator.contacts.create({"displayName": "Test User"});
   myContact.save(contactSuccess, contactError);
    
   function contactSuccess() {
      alert("Contact is saved!");
   }
	
   function contactError(message) {
      alert('Failed because: ' + message);
   }
	
}

單擊新增聯絡人按鈕後，新的聯絡人將儲存到裝置聯絡人列表中。

步驟 3B - 回撥函式 (navigator.contacts.find)

我們的第二個回撥函式將查詢所有聯絡人。我們將使用navigator.contacts.find方法。options 物件具有 filter 引數，用於指定搜尋過濾器。multiple = true 用於因為我們想要返回裝置上的所有聯絡人。field 鍵用於按displayName搜尋聯絡人，因為我們在儲存聯絡人時使用了它。

設定選項後，我們使用find方法查詢聯絡人。將為找到的每個聯絡人觸發警報訊息。

function findContacts() {
   var options = new ContactFindOptions();
   options.filter = "";
   options.multiple = true;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
    
   function contactfindSuccess(contacts) {
      for (var i = 0; i < contacts.length; i++) {
         alert("Display Name = " + contacts[i].displayName);
      }
   }
	
   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

按下查詢聯絡人按鈕後，將觸發一個警報彈出視窗，因為我們只儲存了一個聯絡人。

步驟 3C - 回撥函式 (delete)

此步驟中，我們將再次使用 find 方法，但這次我們將設定不同的選項。將options.filter設定為搜尋必須刪除的測試使用者。在contactfindSuccess回撥函式返回我們想要的聯絡人後，我們將使用remove方法將其刪除，該方法需要其自身的成功和錯誤回撥函式。

function deleteContact() {
   var options = new ContactFindOptions();
   options.filter = "Test User";
   options.multiple = false;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {
      var contact = contacts[0];
      contact.remove(contactRemoveSuccess, contactRemoveError);

      function contactRemoveSuccess(contact) {
         alert("Contact Deleted");
      }

      function contactRemoveError(message) {
         alert('Failed because: ' + message);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

現在，裝置上只有一個聯絡人。我們將手動新增另一個聯絡人，以向您展示刪除過程。

現在，我們將單擊刪除聯絡人按鈕以刪除測試使用者。如果我們再次檢查聯絡人列表，我們將看到測試使用者已不存在。

Cordova - 裝置

此外掛用於獲取有關使用者裝置的資訊。

步驟 1 - 安裝裝置外掛

要安裝此外掛，我們需要在命令提示符中執行以下程式碼段。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device

步驟 2 - 新增按鈕

我們將像使用其他 Cordova 外掛一樣使用此外掛。讓我們在index.html檔案中新增一個按鈕。此按鈕將用於獲取有關裝置的資訊。

<button id = "cordovaDevice">CORDOVA DEVICE</button>

步驟 3 - 新增事件監聽器

Cordova 外掛在deviceready事件之後可用，因此我們將事件監聽器放在index.js中的onDeviceReady函式內。

document.getElementById("cordovaDevice").addEventListener("click", cordovaDevice);	

步驟 4 - 建立函式

以下函式將展示如何使用外掛提供的所有可能性。我們將將其放在index.js中。

function cordovaDevice() {
   alert("Cordova version: " + device.cordova + "\n" +
      "Device model: " + device.model + "\n" +
      "Device platform: " + device.platform + "\n" +
      "Device UUID: " + device.uuid + "\n" +
      "Device version: " + device.version);
}

當我們單擊CORDOVA 裝置按鈕時，警報將顯示 Cordova 版本、裝置型號、平臺、UUID 和裝置版本。

Cordova - 加速度計

加速度計外掛也稱為device-motion。它用於跟蹤三維空間中的裝置運動。

步驟 1 - 安裝加速度計外掛

我們將使用cordova-CLI安裝此外掛。在命令提示符視窗中鍵入以下程式碼。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-motion 

步驟 2 - 新增按鈕

在此步驟中，我們將在index.html檔案中新增兩個按鈕。一個用於獲取當前加速度，另一個用於監視加速度變化。

<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>

步驟 3 - 新增事件監聽器

現在，讓我們將事件監聽器新增到index.js中onDeviceReady函式中的按鈕。

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener(
   "click", watchAcceleration);

步驟 4 - 建立函式

現在，我們將建立兩個函式。第一個函式用於獲取當前加速度，第二個函式將監視加速度，並且有關加速度的資訊將每三秒觸發一次。我們還將新增由setTimeout函式包裝的clearWatch函式，以便在指定的時間範圍內停止監視加速度。frequency引數用於每三秒觸發一次回撥函式。

function getAcceleration() {
   navigator.accelerometer.getCurrentAcceleration(
      accelerometerSuccess, accelerometerError);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');
   };

   function accelerometerError() {
      alert('onError!');
   };
}

function watchAcceleration() {
   var accelerometerOptions = {
      frequency: 3000
   }
   var watchID = navigator.accelerometer.watchAcceleration(
      accelerometerSuccess, accelerometerError, accelerometerOptions);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');

      setTimeout(function() {
         navigator.accelerometer.clearWatch(watchID);
      }, 10000);
   };

   function accelerometerError() {
      alert('onError!');
   };
	
}

現在，如果我們按下獲取加速度按鈕，我們將獲得當前加速度值。如果我們按下監視加速度按鈕，警報將每三秒觸發一次。顯示第三個警報後，將呼叫clearWatch函式，並且我們將不會收到更多警報，因為我們將超時設定為 10000 毫秒。

Cordova - 裝置方向

指南針用於顯示相對於地理北方基點的方向。

步驟 1 - 安裝裝置方向外掛

開啟命令提示符視窗並執行以下命令。

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugindevice-orientation

步驟 2 - 新增按鈕

此外掛類似於加速度外掛。現在讓我們在index.html中建立兩個按鈕。

<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>

步驟 3 - 新增事件監聽器

現在，我們將事件監聽器新增到index.js中onDeviceReady函式內。

document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

步驟 4 - 建立函式

我們將建立兩個函式；第一個函式將生成當前加速度，另一個函式將檢查方向變化。您可以看到我們再次使用frequency選項來監視每三秒發生的更改。

function getOrientation() {
   navigator.compass.getCurrentHeading(compassSuccess, compassError);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

function watchOrientation(){
   var compassOptions = {
      frequency: 3000
   }
   var watchID = navigator.compass.watchHeading(compassSuccess, 
      compassError, compassOptions);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);

      setTimeout(function() {
         navigator.compass.clearWatch(watchID);
      }, 10000);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

由於指南針外掛與加速度外掛幾乎相同，因此這次我們將向您展示一個錯誤程式碼。某些裝置沒有指南針工作所需的磁力感測器。如果您的裝置沒有它，則會顯示以下錯誤。

Cordova - 對話方塊

Cordova 對話方塊外掛將呼叫平臺本機對話方塊 UI 元素。

步驟 1 - 安裝對話方塊

在命令提示符視窗中鍵入以下命令以安裝此外掛。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

步驟 2 - 新增按鈕

現在讓我們開啟index.html並新增四個按鈕，每個對話方塊型別一個。

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>

步驟 3 - 新增事件監聽器

現在，我們將事件監聽器新增到index.js中onDeviceReady函式內。一旦單擊相應的按鈕，監聽器將呼叫回撥函式。

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);	

步驟 4A - 建立警報函式

由於我們添加了四個事件監聽器，因此我們現在將在index.js中為所有事件監聽器建立回撥函式。第一個是dialogAlert。

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
   navigator.notification.alert(message, alertCallback, title, buttonName);
   
   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
}

如果我們單擊警報按鈕，我們將看到警報對話方塊。

當我們單擊對話方塊按鈕時，控制檯將顯示以下輸出。

步驟 4B - 建立確認函式

我們需要建立的第二個函式是dialogConfirm函式。

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }
	
}

按下確認按鈕後，將彈出新的對話方塊。

我們將單擊是按鈕來回答問題。控制檯將顯示以下輸出。

步驟 4C - 建立提示函式

第三個函式是dialogPrompt函式。這允許使用者在對話方塊輸入元素中鍵入文字。

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
   navigator.notification.prompt(message, promptCallback, 
      title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" + 
         "You entered " +  result.input1);
   }
	
}

提示按鈕將觸發一個對話方塊，如下面的螢幕截圖所示。

在此對話方塊中，我們可以選擇鍵入文字。我們將此文字與單擊的按鈕一起記錄到控制檯中。

步驟 4D - 建立蜂鳴聲函式

最後一個是dialogBeep函式。這用於呼叫音訊蜂鳴通知。times引數將設定蜂鳴訊號的重複次數。

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}

當我們單擊蜂鳴聲按鈕時，我們將聽到兩次通知聲音，因為times值設定為2。

Cordova - 檔案系統

此外掛用於操作使用者裝置上的本機檔案系統。

步驟 1 - 安裝檔案外掛

我們需要在命令提示符中執行以下程式碼來安裝此外掛。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

步驟 2 - 新增按鈕

在此示例中，我們將向您展示如何建立檔案、寫入檔案、讀取檔案和刪除檔案。為此，我們將在index.html中建立四個按鈕。我們還將新增textarea，其中將顯示我們檔案的內容。

<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>

步驟 3 - 新增事件監聽器

我們將事件監聽器新增到index.js中的onDeviceReady函式內，以確保在使用外掛之前已啟動所有內容。

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

步驟 4A - 建立檔案函式

該檔案將在裝置上的應用程式根資料夾中建立。為了能夠訪問根資料夾，您需要為您的資料夾提供超級使用者訪問許可權。在本例中，根資料夾的路徑為\data\data\com.example.hello\cache。目前此資料夾為空。

現在讓我們新增一個將建立 log.txt 檔案的函式。我們將把這段程式碼寫在index.js中，並向檔案系統傳送請求。此方法使用 WINDOW.TEMPORARY 或 WINDOW.PERSISTENT。儲存所需的大小以位元組為單位（在本例中為 5MB）。

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

現在我們可以按下建立檔案按鈕，警報將確認我們已成功建立檔案。

現在我們可以再次檢查我們的應用程式根資料夾，我們可以在那裡找到我們的新檔案。

步驟 4B - 寫入檔案函式

在此步驟中，我們將一些文字寫入我們的檔案。我們將再次向檔案系統傳送請求，然後建立檔案寫入器才能寫入我們分配給blob變數的Lorem Ipsum文字。

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

            fileWriter.onerror = function(e) {
               alert('Write failed: ' + e.toString());
            };

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

按下寫入檔案按鈕後，警報將告知我們寫入成功，如下面的螢幕截圖所示。

現在我們可以開啟log.txt並看到裡面寫著Lorem Ipsum。

步驟 4C - 讀取檔案函式

在此步驟中，我們將讀取 log.txt 檔案並將其顯示在textarea元素中。我們將向檔案系統傳送請求並獲取檔案物件，然後我們建立reader。載入 reader 後，我們將返回的值分配給textarea。

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {}, function(fileEntry) {

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };
            reader.readAsText(file);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}	

當我們單擊讀取檔案按鈕時，檔案中的文字將寫入textarea。

步驟 4D - 刪除檔案函式

最後，我們將建立用於刪除log.txt檔案的函式。

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}	

現在我們可以按下刪除檔案按鈕以從應用程式根資料夾中刪除檔案。警報將通知我們刪除操作成功。

如果我們檢查應用程式根資料夾，我們將看到它為空。

Cordova - 檔案傳輸

此外掛用於上傳和下載檔案。

步驟 1 - 安裝檔案傳輸外掛

我們需要開啟命令提示符並執行以下命令來安裝外掛。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer

步驟 2 - 建立按鈕

在本章中，我們將向您展示如何上傳和下載檔案。讓我們在index.html中建立兩個按鈕

<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>

步驟 3 - 新增事件監聽器

事件監聽器將在index.js中的onDeviceReady函式內建立。我們正在新增click事件和callback函式。

document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);

步驟 4A - 下載函式

此函式將用於從伺服器下載檔案到裝置。我們將檔案上傳到postimage.org以簡化操作。您可能希望使用您自己的伺服器。該函式位於index.js中，並在按下相應的按鈕時觸發。uri是伺服器下載連結，fileURI是我們裝置上 DCIM 資料夾的路徑。

function downloadFile() {
   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },
		
      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },
		
      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
}

按下下載按鈕後，檔案將從postimg.org伺服器下載到我們的移動裝置。我們可以檢查指定的資料夾並看到myFile在那裡。

控制檯輸出將如下所示：

步驟 4B - 上傳函式

現在讓我們建立一個函式來獲取檔案並將其上傳到伺服器。同樣，我們希望儘可能簡化此操作，因此我們將使用posttestserver.com線上伺服器進行測試。uri 值將連結到posttestserver的釋出。

function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";
   
   var headers = {'headerParam':'headerValue'};
   options.headers = headers;
   var ft = new FileTransfer();
   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }
	
}

現在我們可以按下上傳按鈕來觸發此函式。我們將獲得控制檯輸出作為上傳成功的確認。

我們還可以檢查伺服器以確保檔案已上傳。

Cordova - 地理位置

地理位置用於獲取有關裝置緯度和經度的資訊。

步驟 1 - 安裝外掛

我們可以透過在命令提示符視窗中鍵入以下程式碼來安裝此外掛。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

步驟 2 - 新增按鈕

在本教程中，我們將向您展示如何獲取當前位置以及如何監視變化。我們首先需要建立將呼叫這些函式的按鈕。

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

步驟 3 - 新增事件監聽器

現在我們要在裝置準備就緒時新增事件監聽器。我們將下面的程式碼示例新增到index.js中的onDeviceReady函式中。

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);	

步驟 3 - 建立函式

必須為兩個事件監聽器建立兩個函式。一個用於獲取當前位置，另一個用於監視位置。

function getPosition() {
   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {
   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }
   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }
}

在上例中，我們使用了兩種方法：getCurrentPosition和watchPosition。這兩個函式都使用三個引數。一旦我們單擊當前位置按鈕，警報將顯示地理位置值。

如果我們單擊監視位置按鈕，相同的警報將每三秒觸發一次。這樣，我們可以跟蹤使用者裝置的移動變化。

注意

此外掛使用 GPS。有時它無法及時返回值，請求將返回超時錯誤。這就是為什麼我們指定enableHighAccuracy: true和maximumAge: 3600000。這意味著如果請求沒有及時完成，我們將使用最後一個已知值。在本例中，我們將maximumAge設定為 3600000 毫秒。

Cordova - 全球化

此外掛用於獲取有關使用者區域設定語言、日期和時區、貨幣等的資訊。

步驟 1 - 安裝全球化外掛

開啟命令提示符並透過鍵入以下程式碼安裝外掛

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

步驟 2 - 新增按鈕

我們將向index.html新增幾個按鈕，以便能夠呼叫我們稍後將建立的不同方法。

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

步驟 3 - 新增事件監聽器

為了確保在使用應用和Cordova之前已載入完畢，事件監聽器將新增到index.js 檔案中的getDeviceReady 函式內。

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

步驟 4A - 語言函式

我們使用的第一個函式返回客戶端裝置的BCP 47語言標籤。我們將使用getPreferredLanguage 方法。該函式有兩個引數：onSuccess 和onError。我們將此函式新增到index.js中。

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }

   function onError(){
      alert('Error getting language');
   }
}

按下LANGUAGE 按鈕後，螢幕上將顯示警報。

步驟 4B - 地區設定函式

此函式返回客戶端本地設定的BCP 47標籤。此函式與我們之前建立的函式類似。唯一的區別是這次我們使用的是getLocaleName 方法。

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
}

單擊LOCALE 按鈕時，警報將顯示我們的區域設定標籤。

步驟 4C - 日期函式

此函式用於根據客戶端的區域設定和時區設定返回日期。date 引數是當前日期，options 引數是可選的。

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }
   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
}

現在我們可以執行應用程式並按下DATE 按鈕來檢視當前日期。

我們將展示的最後一個函式是根據客戶端的裝置設定和ISO 4217貨幣程式碼返回貨幣值。您可以看到概念相同。

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '\n' +
         'code: '     + pattern.code     + '\n' +
         'fraction: ' + pattern.fraction + '\n' +
         'rounding: ' + pattern.rounding + '\n' +
         'decimal: '  + pattern.decimal  + '\n' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
}

CURRENCY 按鈕將觸發警報，向用戶顯示貨幣模式。

此外掛提供其他方法。您可以在下表中檢視所有方法。

Cordova - InAppBrowser

此外掛用於在Cordova應用內開啟網頁瀏覽器。

步驟 1 - 安裝外掛

在我們能夠使用它之前，需要在命令提示符視窗中安裝此外掛。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

步驟 2 - 新增按鈕

我們將新增一個按鈕，用於在index.html中開啟inAppBrowser視窗。

步驟 3 - 新增事件監聽器

現在讓我們在index.js中的onDeviceReady函式中為我們的按鈕新增事件監聽器。

document.getElementById("openBrowser").addEventListener("click", openBrowser);

步驟 4 - 建立函式

在此步驟中，我們建立一個函式，該函式將在我們的應用程式內開啟瀏覽器。我們將其分配給ref變數，稍後可以使用它來新增事件監聽器。

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

如果我們按下BROWSER按鈕，我們將在螢幕上看到以下輸出。

控制檯也將監聽事件。當URL開始載入時，loadstart事件將觸發；當URL載入完畢時，loadstop事件將觸發。我們可以在控制檯中看到它。

關閉瀏覽器後，將觸發exit事件。

InAppBrowser視窗還有其他可能的選項。我們將在下表中解釋。

我們可以使用ref（引用）變數來實現其他一些功能。我們將向您展示一些簡單的示例。要刪除事件監聽器，可以使用：

ref.removeEventListener(eventname, callback); 

要關閉InAppBrowser，可以使用：

ref.close();

如果我們打開了隱藏視窗，我們可以顯示它：

ref.show();

甚至可以將JavaScript程式碼注入InAppBrowser：

var details = "javascript/file/url"
ref.executeScript(details, callback);

相同的概念可用於注入CSS：

var details = "css/file/url"
ref.inserCSS(details, callback);

Cordova - 媒體

Cordova媒體外掛用於在Cordova應用程式中錄製和播放音訊聲音。

步驟 1 - 安裝媒體外掛

可以透過在命令提示符視窗中執行以下程式碼來安裝媒體外掛。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

步驟 2 - 新增按鈕

在本教程中，我們將建立一個簡單的音訊播放器。讓我們在index.html中建立所需的按鈕。

<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">VOLUME DOWN</button>

步驟 3 - 新增事件監聽器

現在我們需要在index.js中的onDeviceReady函式內為我們的按鈕新增事件監聽器。

document.getElementById("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);

步驟 4A - 播放函式

我們將新增的第一個函式是playAudio。我們在函式外部定義myMedia，因為我們想在稍後新增的函式（暫停、停止、音量增大和音量減小）中使用它。此程式碼位於index.js檔案中。

var myMedia = null;
function playAudio() {
   var src = "/android_asset/www/audio/piano.mp3";

   if(myMedia === null) {
      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {
         console.log("playAudio Success");
      }

      function onError(error) {
         console.log("playAudio Error: " + error.code);
      }
   }
   myMedia.play();
}

我們可以單擊PLAY按鈕從src路徑開始播放鋼琴音樂。

步驟 4B - 暫停和停止函式

我們需要新增的下一個函式是pauseAudio和stopAudio。

function pauseAudio() {
   if(myMedia) {
      myMedia.pause();
   }
}

function stopAudio() {
   if(myMedia) {
      myMedia.stop(); 
   }
   myMedia = null;
}

現在我們可以透過單擊PAUSE或STOP按鈕來暫停或停止鋼琴聲音。

步驟 4C - 音量函式

要設定音量，我們可以使用setVolume方法。此方法採用值為0到1之間的引數。我們將起始值設定為0.5。

var volumeValue = 0.5;
function volumeUp() {
   if(myMedia && volumeValue < 1) {
      myMedia.setVolume(volumeValue += 0.1);
   }
}

function volumeDown() {
   if(myMedia && volumeValue > 0) {
      myMedia.setVolume(volumeValue -= 0.1);
   }
}

按下VOLUME UP或VOLUME DOWN後，我們可以將音量值更改0.1。

下表顯示了此外掛提供的其他方法。

Cordova - 媒體捕獲

停止播放音訊檔案。

此外掛用於訪問裝置的捕獲選項。

步驟 1 - 安裝媒體捕獲外掛

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

步驟 2 - 新增按鈕

要安裝此外掛，我們將開啟命令提示符並執行以下程式碼：

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

步驟 3 - 新增事件監聽器

由於我們想向您展示如何捕獲音訊、影像和影片，我們將在index.html中建立三個按鈕。

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

下一步是在index.js中的onDeviceReady內新增事件監聽器。

步驟 4A - 捕獲音訊函式

function audioCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

index.js中的第一個回撥函式是audioCapture。要啟動錄音機，我們將使用captureAudio方法。我們使用兩個選項：limit允許每次捕獲操作僅錄製一個音訊剪輯；duration是聲音剪輯的秒數。

按下AUDIO按鈕時，錄音機將開啟。

控制檯將顯示使用者捕獲的物件陣列。

步驟 4B - 捕獲影像函式

function imageCapture() {
   var options = {
      limit: 1
   };
   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

捕獲影像的函式與上一個函式相同。唯一的區別是這次我們使用的是captureImage方法。

現在我們可以單擊IMAGE按鈕啟動相機。

拍照時，控制檯將記錄包含影像物件的陣列。

步驟 4C - 捕獲影片函式

function videoCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

讓我們對捕獲影片重複相同的概念。這次我們將使用videoCapture方法。

如果我們按下VIDEO按鈕，相機將開啟，我們可以錄製影片。

Cordova - 網路資訊

儲存影片後，控制檯將再次返回陣列。這次在裡面包含影片物件。

此外掛提供有關裝置網路的資訊。

步驟 1 - 安裝媒體捕獲外掛

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugin-network-information

步驟 2 - 新增按鈕

步驟 1 - 安裝網路資訊外掛

<button id = "networkInfo">INFO</button>

步驟 3 - 新增事件監聽器

讓我們在index.html中建立一個按鈕，用於獲取有關網路的資訊。

document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

步驟 4 - 建立函式

我們將在index.js中的onDeviceReady函式內新增三個事件監聽器。一個監聽我們之前建立的按鈕的點選事件，另外兩個監聽連線狀態的變化。

function networkInfo() {
   var networkState = navigator.connection.type;
   var states = {};
   states[Connection.UNKNOWN]  = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI]     = 'WiFi connection';
   states[Connection.CELL_2G]  = 'Cell 2G connection';
   states[Connection.CELL_3G]  = 'Cell 3G connection';
   states[Connection.CELL_4G]  = 'Cell 4G connection';
   states[Connection.CELL]     = 'Cell generic connection';
   states[Connection.NONE]     = 'No network connection';
   alert('Connection type: ' + states[networkState]);
}

function onOffline() {
   alert('You are now offline!');
}

function onOnline() {
   alert('You are now online!');
}

單擊按鈕後，networkInfo函式將返回有關當前網路連線的資訊。我們呼叫type方法。其他函式是onOffline和onOnline。這些函式監聽連線變化，任何變化都將觸發相應的警報訊息。

當我們連線到網路啟動應用程式時，onOnline函式將觸發警報。

如果我們按下INFO按鈕，警報將顯示我們的網路狀態。

Cordova - 啟動畫面

如果我們斷開網路連線，將呼叫onOffline函式。

此外掛用於在應用程式啟動時顯示啟動畫面。

步驟 1 - 安裝啟動畫面外掛

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-splashscreen

可以透過在命令提示符視窗中執行以下程式碼來安裝啟動畫面外掛。

步驟 2 - 新增啟動畫面

新增啟動畫面與新增其他Cordova外掛不同。我們需要開啟config.xml並在widget元素內新增以下程式碼片段。

<preference name = "SplashScreen" value = "screen" />

第一個程式碼片段是SplashScreen。它具有value屬性，該屬性是platform/android/res/drawable-資料夾中影像的名稱。Cordova提供我們在本示例中使用的預設screen.png影像，但您可能希望新增自己的影像。重要的是要新增縱向和橫向檢視的影像，還要涵蓋不同的螢幕尺寸。

<preference name = "SplashScreenDelay" value = "3000" />

我們需要新增的第二個程式碼片段是SplashScreenDelay。我們將value設定為3000，以在三秒鐘後隱藏啟動畫面。

<preference name = "SplashMaintainAspectRatio" value = "true" />

最後一個偏好設定是可選的。如果值設定為true，則影像不會拉伸以適應螢幕。如果設定為false，則會拉伸。

Cordova - 振動

現在，當我們執行應用程式時，我們將看到啟動畫面。

此外掛用於連線到裝置的振動功能。

步驟 1 - 安裝振動外掛

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-vibration

步驟 2 - 新增按鈕

我們可以在命令提示符視窗中執行以下程式碼來安裝此外掛：

<button id = "vibration">VIBRATION</button>
<button id = "vibrationPattern">PATTERN</button>

步驟 3 - 新增事件監聽器

安裝外掛後，我們可以在index.html中新增稍後將用於觸發振動的按鈕。

document.getElementById("vibration").addEventListener("click", vibration);
document.getElementById("vibrationPattern").addEventListener("click", vibrationPattern);

現在我們將為index.js中的onDeviceReady新增事件監聽器。

步驟 4 - 建立函式

function vibration() {
   var time = 3000;
   navigator.vibrate(time);
}

function vibrationPattern() {
   var pattern = [1000, 1000, 1000, 1000];
   navigator.vibrate(pattern);
}

此外掛非常易於使用。我們將建立兩個函式。

第二個函式使用了pattern引數。這個陣列將指示裝置振動一秒，然後等待一秒，然後重複此過程。

Cordova - 白名單

此外掛允許我們為應用程式的導航實現白名單策略。當我們建立一個新的Cordova專案時，whitelist外掛預設安裝並實現。您可以開啟config.xml檔案檢視Cordova提供的allow-intent預設設定。

導航白名單

在下面的簡單示例中，我們允許連結到一些外部URL。此程式碼位於config.xml檔案中。預設允許導航到file:// URL。

<allow-navigation href = "http://example.com/*" />

星號 * 用於允許導航到多個值。在上面的示例中，我們允許導航到example.com的所有子域。同樣的方法也適用於協議或主機的字首。

<allow-navigation href = "*://*.example.com/*" />

意圖白名單

還有一個allow-intent元素，用於指定允許開啟系統的URL。您可以在config.xml中看到，Cordova已經為我們允許了大部分需要的連結。

網路請求白名單

當您檢視config.xml檔案時，會看到<access origin="*" />元素。此元素允許透過Cordova hooks向我們的應用程式發出所有網路請求。如果您只想允許特定請求，可以將其從config.xml中刪除並自行設定。

這與之前的示例使用相同的原理。

<access origin = "http://example.com" />

這將允許來自http://example.com的所有網路請求。

內容安全策略

您可以在index.html的head元素中檢視應用程式的當前安全策略。

<meta http-equiv = "Content-Security-Policy" content = "default-src 
   'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 
   'self' 'unsafe-inline'; media-src *">

這是預設配置。如果您想允許來自同一來源和example.com的所有內容，則可以使用：

<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' foo.com">

您也可以允許所有內容，但將CSS和JavaScript限制在同一來源。

<meta http-equiv = "Content-Security-Policy" content = "default-src *; 
   style-src 'self' 'unsafe-inline'; script-src 'self' 
   'unsafe-inline' 'unsafe-eval'">

由於這是一個初學者教程，我們推薦使用Cordova預設選項。一旦您熟悉Cordova，您可以嘗試一些不同的值。

Cordova - 最佳實踐

Cordova用於建立混合移動應用程式，因此在為專案選擇它之前，您需要考慮這一點。以下是Cordova應用程式開發的最佳實踐。

單頁應用程式

這是所有Cordova應用程式的推薦設計。SPA使用客戶端路由器和載入在單個頁面（通常是index.html）上的導航。路由透過AJAX處理。如果您遵循我們的教程，您可能已經注意到，幾乎每個Cordova外掛都需要等到裝置準備好才能使用。SPA設計將提高載入速度和整體效能。

觸控事件

由於Cordova用於移動領域，因此使用touchstart和touchend事件代替click事件是自然的。click事件有300毫秒的延遲，因此點選感覺不原生。另一方面，並非所有平臺都支援觸控事件。在決定使用哪種事件之前，您應該考慮這一點。

動畫

您應該始終使用硬體加速的CSS Transitions代替JavaScript動畫，因為它們在移動裝置上的效能更好。

儲存

儘可能使用儲存快取。行動網路連線通常較差，因此您應該儘量減少應用程式中的網路呼叫。您還應該處理應用程式的離線狀態，因為使用者裝置有時會處於離線狀態。

滾動

大多數情況下，應用程式中第一個緩慢的部分將是滾動列表。有幾種方法可以提高應用程式的滾動效能。我們建議使用原生滾動。當列表中有很多專案時，您應該部分載入它們。必要時使用載入器。

影像

影像也會減慢移動應用程式的速度。您應該儘可能使用CSS影像精靈。嘗試完美地擬合影像，而不是縮放它。

CSS樣式

您應該避免陰影和漸變，因為它們會減慢頁面的渲染時間。

簡化

瀏覽器的DOM很慢，因此您應該嘗試最大限度地減少DOM操作和DOM元素的數量。

測試

確保您在儘可能多的裝置和作業系統版本上測試您的應用程式。如果應用程式在一個裝置上執行完美，並不一定意味著它會在其他裝置或平臺上執行。