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.net.cn';
   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元素的数量。

测试

确保您在尽可能多的设备和操作系统版本上测试您的应用程序。如果应用程序在一个设备上运行完美，并不一定意味着它会在其他设备或平台上运行。