Cordova 是使用HTML，CSS和JavaScript构建混合移动应用程序的平台。官方文档给了我们Cordova的定义。

“Apache Cordova是一个开源移动开发框架，它允许您使用标准的Web技术，如HTML5，CSS3和JavaScript进行跨平台开发，避免每个移动平台本机开发语言。应用程序在针对每个平台的包装内执行，并依靠符合标准的API绑定来访问每个设备的传感器，数据和网络状态。"

Cordova特征

• 命令行界面(Cordova CLI)

  这是可用于启动项目，构建不同平台的进程，安装插件和许多其他有用的东西，使开发过程更容易的工具。您将在以后的章节中学习如何使用。

• Cordova核心组件

  Cordova提供了每个移动应用程序所需的核心组件。这些组件将用于创建应用程序的基础，所以我们可以花更多的时间来实现我们自己的逻辑。

• Cordova外挂程式

  Cordova提供的API将用于实现本地移动功能到我们的JavaScript应用程序。

• 许可证

  Cordova按照Apache许可证2.0版授权。 Apache和Apache羽毛标志是Apache软件基金会的商标。

Cordova的优势

• Cordova为构建混合移动应用程序提供了一个平台，因此我们可以开发一个应用程序，将在不同的移动平台IOS，Android，Windows Phone，Amazon-fireos，黑莓，Firefox OS，Ubuntu和tizien上使用。

• 开发混合应用程序然后原生应用程序更快，所以Cordova可以节省大量的开发时间

• 由于我们在使用Cordova时使用JavaScript，我们不需要学习平台特定的编程语言。

• 有大量的社区插件可以与Cordova一起使用。许多库和框架都经过优化以便使用它。

Cordova限制

• 混合应用程序比本地应用程序慢，因此对于需要大量数据和功能的大型应用程序使用Cordova不是最佳选择。

• 跨浏览器兼容性可能会产生很多问题。大多数时候，我们为不同的平台构建应用程序，所以测试和优化可能需要很多时间，因为我们需要覆盖大量的设备和操作系统。

• 某些插件与不同的设备和平台存在兼容性问题。还有一些Cordova尚不支持的本机API。

在我们开始使用Cordova设置之前，我们需要安装一些组件。

安装Cordova

在我们开始之前，您需要知道我们将在教程中使用windows 命令提示符。

步骤1 - 安装git

即使你不使用git，它应该安装，因为Cordova正在使用它的一些后台进程。你可以在这里下载git。安装git后，打开你的环境变量。

• Right-Click on Computer
• Properties
• Advanced System settings
• Environment Variables
• System Variables
• Edit

复制变量值字段结尾处的以下内容。 这是git安装的默认路径。 如果你安装它在不同的路径，你应该使用，而不是我们的示例代码下面。

;C:Program Files (x86)Gitin;C:Program Files (x86)Gitcmd

现在您可以在命令提示符中键入 git ，以测试安装是否成功。

步骤2 - 安装Cordova

此步骤将在全球下载并安装Cordova模块。 打开命令提示符并运行以下命令 -

C:Usersusername>npm install -g cordova

您可以通过运行检查安装的版本 -

C:Usersusername>cordova -v

这是在Windows操作系统上开始开发Cordova应用程序所需的一切。在我们的下一个教程中，我们将向您展示如何创建第一个应用程序。

在上一个教程中，我们向您展示了如何安装Cordova并设置环境。一旦一切准备就绪，我们可以创建我们的第一个混合Cordova应用程序。

步骤1 - 创建应用程序

在命令提示符下打开要在其中安装应用程序的目录。我们将在桌面上创建它。

C:UsersusernameDesktop>cordova create CordovaProject io.cordova.hellocordova CordovaApp

• CordovaProject 是创建应用程序的目录名称。

• io.cordova.hellocordova 是默认的反向域值。 如果可能，您应该使用您自己的域值。

• CordovaApp 是您应用的标题。

步骤2 - 添加平台

您需要在命令提示符下打开您的项目目录。在我们的示例中是 CordovaProject 。你应该只选择你需要的平台。为了能够使用指定的平台，您需要安装特定的平台SDK。由于我们在Windows上开发，我们可以使用以下平台。我们还安装了Android SDK，因此我们只会为本教程安装Android平台。

C:UsersusernameDesktopCordovaProject>cordova platform add android

还有其他平台可以在Windows操作系统上使用。

C:UsersusernameDesktopCordovaProject>cordova platform add wp8

C:UsersusernameDesktopCordovaProject>cordova platform add amazon-fireos

C:UsersusernameDesktopCordovaProject>cordova platform add windows

C:UsersusernameDesktopCordovaProject>cordova platform add blackberry10

C:UsersusernameDesktopCordovaProject>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:UsersusernameDesktopCordovaProject>cordova platform rm android

步骤3 - 构建和运行

在这一步，我们正在为指定的平台构建应用程序，所以我们可以在移动设备或模拟器上运行它。

C:UsersusernameDesktopCordovaProject>cordova build android

现在我们可以运行我们的应用程序。 如果你使用默认模拟器，你应该使用 -

C:UsersusernameDesktopCordovaProject>cordova emulate android

如果你想使用外部模拟器或真实设备，你应该使用 -

C:UsersusernameDesktopCordovaProject>cordova run android

注意 - 我们将使用genymotion android模拟器，因为它比默认的更快，更灵敏。 您可以在此处找到它。 您也可以使用实际设备进行测试，方法是从选项中启用 USB调试，然后通过USB电缆将其连接到计算机。对于某些设备，您还需要为特定设备安装USB驱动程序。

一旦我们运行应用程序，它将安装在我们指定的平台上。如果一切都完成没有错误，输出应该显示应用程序的默认开始屏幕。

在下一个教程中，我们将向您展示如何配置Cordova应用程序。

这是我们可以更改应用程序配置的地方。当我们在最后一个教程中创建我们的应用程序时，我们设置反向域名和名称。该值可以在 config.xml 文件中更改。当我们创建应用程序时，默认的配置文件也将被创建。

下表说明了 config.xml 中的配置元素。

config.xml配置表

我们可以使用存储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"));}	

如果我们点击 SET LOCAL STORAGE 按钮，我们将设置三个项目到本地存储。如果我们点击 SHOW LOCAL STORAGE ，控制台将记录我们想要的项目。

现在让我们创建将从本地存储中删除项目的函数。

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

如果我们在删除项目后点击 SHOW LOCAL STORAGE 按钮，输出将显示项目字段的 null 值。

我们还可以使用 key()方法获取本地存储元素，它将索引作为参数，并返回具有相应索引值的元素。

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

现在，当我们点击 GET BY KEY 按钮时，我们将获得以下输出。

注意

当我们使用 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()来完成的。

处理返回按钮

你通常会想要使用 Android 返回按钮的一些应用程序功能，如返回到上一个屏幕。为了能够实现自己的功能，首先需要在按下返回按钮时禁用退出应用程序。

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

现在，当我们按本机 Android 返回按钮时，警报将显示在屏幕上，而不是退出应用程序。这是通过使用  e.preventDefault() 来完成的。

Cordova plugman是用于安装和管理插件的有用的命令行工具。 如果您希望您的应用在一个特定平台上运行，则应使用 plugman 。如果您要创建跨平台应用，则应使用 cordova-cli ，这将修改不同平台的插件。

步骤1 - 安装Plugman

打开命令提示符窗口并运行以下代码片段来安装plugman。

C:UsersusernameDesktopCordovaProject>npm install -g plugman

步骤2 - 安装插件

为了告诉你如何使用plugman安装Cordova插件，我们将使用Camera插件为例。

C:UsersusernameDesktopCordovaProject>plugman    install --platform android --project platformsandroid    --plugin cordova-plugin-camera   plugman uninstall --platform android --project platformsandroid    --plugin cordova-plugin-camera

有三个需要的参数，如下所示。

• - platform - 我们使用的平台(android，ios，amazon-fire os，wp8，blackberry 10)。

• - project - 项目构建的路径。 在我们的示例中是 platforms android 目录。

• - plugin - 我们要安装的插件。

如果设置有效的参数，命令提示符窗口应输出以下内容。

附加方法

您可以使用类似的方式卸载方法。

C:UsersusernameDesktopCordovaProject>plugman uninstall    --platform android --project platformsandroid --plugin cordova-plugin-camera

命令提示符控制台将具有以下输出。

Plugman提供了一些可以使用的附加方法。你可以在下面的表中看到它。

附加命令

如果您卡住，您可以始终使用 plugman -help 命令。可以使用 plugman -v 来检查版本。要搜索插件，您可以使用 plugman search，最后您可以使用 plugman config set注册表命令更改插件注册表。

注意

由于Cordova通常用于跨平台开发，因此在接下来的教程中，我们将使用 Cordova CLI 安装插件，而不是 Plugman 。

该Cordova插件用于监视设备的电池状态。该插件将监视设备电池发生的每一个变化。

步骤1 - 安装电池插件

要安装此插件，我们需要打开命令提示符窗口并运行以下代码。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-battery-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 事件相同。

此插件用于拍摄照片或使用图像库中的文件。

步骤1 - 安装相机插件

在命令提示符窗口中运行以下代码以安装此插件。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-camera

步骤2 - 添加按钮和图像

在此步骤中，我们将创建用于调用摄像头的按钮和在拍摄后将显示图像的 img 。将其添加到 div.html = 元素中的 index.html 。

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

步骤3 - 添加事件监听器

事件侦听器添加到 onDeviceReady 函数中，以确保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

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-camera

步骤2

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

步骤3

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

步骤4

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);   }}

当我们按第二个按钮时，文件系统将打开而不是相机，所以我们可以选择我们想要显示的图像。

这个插件提供了许多可选的参数定制。

此插件用于访问设备联系人数据库。在本教程中，我们将向您展示如何创建，查询和删除联系人。

步骤1 - 安装联系人插件

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-contacts

步骤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 变量，但不会存储在设备上。要存储它，我们需要调用保存方法并创建成功和错误回调函数。

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 方法。 选项对象具有过滤器参数，用于指定搜索过滤器。 multiple = true ，因为我们要返回设备中的所有联系人。我们还使用字段键通过 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);   }	}

目前，我们只有一个联系人存储在设备上。我们将手动添加一个，向您显示删除过程。

现在，您可以点击删除联系人按钮删除测试用户。如果我们再次检查联系人列表，我们将看到不再有测试用户。

此插件用于获取有关用户设备的信息。

步骤1 - 安装设备插件

要安装此插件，我们需要在命令提示符中运行以下代码段。

C:UsersusernameDesktopCordovaProject>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 - 创建函数

Cordova插件在 deviceready 事件后可用，因此我们将在 index.js 中的 onDeviceReady 函数中放置事件侦听器。

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

当我们单击 CORDOVA DEVICE 按钮时，警报将显示Cordova版本，设备型号，平台，UUID和设备版本。

该插件也称为 设备运动 。它用于在三维中跟踪设备运动。

步骤1 - 安装加速计插件

我们将使用 cordova-CLI 安装此插件。键入以下代码到命令提示符窗口。

C:UsersusernameDesktopCordovaProject>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 + '
' +         'Acceleration Y: ' + acceleration.y + '
' +         'Acceleration Z: ' + acceleration.z + '
' +         'Timestamp: '      + acceleration.timestamp + '
');   };   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 + '
' +         'Acceleration Y: ' + acceleration.y + '
' +         'Acceleration Z: ' + acceleration.z + '
' +         'Timestamp: '      + acceleration.timestamp + '
');      setTimeout(function() {         navigator.accelerometer.clearWatch(watchID);      }, 10000);   };   function accelerometerError() {      alert('onError!');   };	}

现在，如果我们按 GET ACCELERATION 按钮，我们将获得当前的加速度值。如果我们按WATCH ACCELERATION，警报将每三秒触发一次。在显示第三个警告后，将调用 clearWatch 函数，并且我们不会再收到任何警报，因为我们将超时设置为10000毫秒。

指南针用于显示相对于地理北基点的方向。

步骤1 - 安装设备定向插件

打开命令提示符窗口并运行以下命令。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-device-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 - 创建函数

我们将创建两个函数，一个获取当前加速度，另一个查看方向更改。您可以看到我们正在使用频率选项，因为我们想要每隔三秒观察一次更改。

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);   };	}

由于指南针插件几乎与加速插件相同，我们将在此时显示错误代码。 某些设备没有磁罗盘工作所需的磁性传感器。 如果您的设备没有它，您会得到以下错误。

这个插件将调用平台本地对话框UI元素。

步骤1 - 安装对话框

在命令提示符窗口中键入以下内容以安装此插件。

C:UsersusernameDesktopCordovaProject>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!");   }	}

如果我们点击 ALERT 按钮，我们将看到警报对话框。

当我们单击对话框按钮，我们将获得控制台输出。

步骤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!");   }	}

当按下 CONFIRM 按钮时，将弹出新对话框。

我们将点击是按钮来回答问题。控制台输出将显示以下内容 -

步骤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! 
" +          "You entered " +  result.input1);   }	}

PROMPT 按钮将触发此对话框。

在此对话框中，我们有选择键入文本。我们将在控制台中记录此文本以及单击的按钮。

步骤4D - 创建蜂鸣声功能

最后一个是 dialogBeep 。这用于呼叫音频蜂鸣声通知。times 参数将设置蜂鸣声信号的重复次数。

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

当我们点击 BEEP 按钮时，我们会听到两次通知声音，因为次值设置为 2 。

此插件用于操作用户设备上的本机文件系统。

步骤1 - 安装文件插件

我们需要运行命令提示符中的代码来安装此插件。

C:UsersusernameDesktopCordovaProject>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，size是存储所需的字节值(在本例中为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)   }	}

现在我们可以按 CREATE FILE 按钮，警报将确认我们已成功创建文件。

现在我们可以再次检查您的应用程序根文件夹，新的文件将在那里。

步骤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 。当读取器加载时，我们将返回的值分配给 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)   }	}	

当我们单击 READ FILE 按钮时，文件中的文本将写在 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)   }	}	

我们现在可以按删除文件按钮从应用程序根文件夹中删除该文件。该警报将通知我们删除成功。

如果我们检查应用程序根文件夹，我们将看到它是空的。

此插件用于上传和下载文件。

步骤1 - 安装文件传输插件

我们需要打开命令提示符并运行以下命令来安装插件。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-file-transfer

步骤2 - 创建按钮

在本章中，我们将向您展示如何上传和下载文件。 让我们在 index.html 中创建两个按钮。

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

步骤3 - 添加事件监听器

事件监听器将在onDeviceReady函数的index.js中创建。我们正在添加点击事件和回调函数。

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);   }	}

现在我们可以按上传按钮来触发此功能。我们将获得控制台输出，确认上传是成功的。

现在我们可以按上传按钮来触发此功能。我们将获得控制台输出，确认上传是成功的。...

地理位置用于获取有关设备的纬度和经度的信息。

步骤1 - 安装插件

我们可以通过在命令提示符窗口中键入以下代码来安装此插件。

C:UsersusernameDesktopCordovaProject>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          + '
' +         'Longitude: '         + position.coords.longitude         + '
' +         'Altitude: '          + position.coords.altitude          + '
' +         'Accuracy: '          + position.coords.accuracy          + '
' +         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '
' +         'Heading: '           + position.coords.heading           + '
' +         'Speed: '             + position.coords.speed             + '
' +         'Timestamp: '         + position.timestamp                + '
');   };   function onError(error) {      alert('code: '    + error.code    + '
' + 'message: ' + error.message + '
');   }}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          + '
' +         'Longitude: '         + position.coords.longitude         + '
' +         'Altitude: '          + position.coords.altitude          + '
' +         'Accuracy: '          + position.coords.accuracy          + '
' +         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '
' +         'Heading: '           + position.coords.heading           + '
' +         'Speed: '             + position.coords.speed             + '
' +         'Timestamp: '         + position.timestamp                + '
');   };   function onError(error) {      alert('code: '    + error.code    + '
' +'message: ' + error.message + '
');   }}

在上面的例子中，我们使用两个方法 - getCurrentPosition和watchPosition。两个函数都使用三个参数。一旦我们单击“当前位置"按钮，该警报将显示地理位置值。

如果我们点击 WATCH POSITION 按钮，每三秒钟就会触发相同的提醒。 这样我们可以跟踪用户设备的移动变化。

注意

此插件使用GPS。有时它不能按时返回值，并且请求将返回超时错误。这就是为什么我们指定 enableHighAccuracy:true 和 maximumAge:3600000 的原因。 这意味着如果请求没有按时完成，我们将使用最后一个已知的值。在我们的示例中，我们将maximumAge设置为3600000毫秒。

此插件用于获取有关用户语言区域语言，日期和时区，货币等的信息。

步骤1 - 安装全球化插件

打开命令提示符并通过键入以下代码安装插件。

C:UsersusernameDesktopCordovaProject>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 - 添加事件监听器

事件监听器将被添加到 index.js 文件中的 getDeviceReady 函数中，以确保我们的应用程序和Cordova在我们开始使用它之前加载。

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 + '
');   }   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  + '
' +         'code: '     + pattern.code     + '
' +         'fraction: ' + pattern.fraction + '
' +         'rounding: ' + pattern.rounding + '
' +         'decimal: '  + pattern.decimal  + '
' +         'grouping: ' + pattern.grouping);   }   function onError(){      alert('Error getting pattern');   }	}

CURRENCY 按钮将触发警报，显示用户的货币模式。

此插件提供其他方法。你可以看到下面的表中所有的。

此插件用于在Cordova应用程序中打开Web浏览器。

步骤1 - 安装插件

我们需要在命令提示符窗口中安装此插件，我们才能使用它。

C:UsersusernameDesktopCordovaProject>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('loadloaderror', 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 按钮，我们将在屏幕上看到以下输出。

控制台还将监听事件。 当网址开始加载时， loadstart 事件将触发，并且在加载网址时加载 loadstop 。 我们可以在控制台看到它。

关闭浏览器后，退出事件将会触发。

InAppBrowser窗口有其他可能的选项。 我们将在下面的表中解释。

对于一些其他功能，我们可以使用 ref (reference)变量。我们将向您展示它的快速示例。对于删除事件侦听器，我们可以使用 -

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应用程序中录制和播放音频声音。

步骤1 - 安装媒体插件

可以通过在命令提示符窗口中运行以下代码来安装Media插件。

C:UsersusernameDesktopCordovaProject>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 ，因为我们想在稍后添加的函数中使用它(pause，stop，volumeUp和volumeDown)。此代码放在 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();}

我们可以点击播放按钮，从 src 路径启动钢琴音乐。

步骤4B - 暂停和停止功能

我们需要的下一个功能是 pauseAudio 和 stopAudio 。

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

现在，我们可以通过点击暂停或停止按钮暂停或停止钢琴音色。

步骤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 更改音量值。

下表显示了此插件提供的其他方法。

此插件用于访问设备的捕获选项。

步骤1 - 安装媒体捕获插件

要安装此插件，我们将打开命令提示符并运行以下代码 -

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-media-capture

步骤2 - 添加按钮

由于我们希望向您展示如何捕获音频，图片和视频，因此我们将在 index.html 中创建三个按钮。

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

步骤3 - 添加事件监听器

下一步是在 index.js 中的 onDeviceReady 内添加事件监听器。

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

步骤4A - 捕获音频功能

index.js 中的第一个回调函数是 audioCapture 。 要启动录音机，我们将使用 captureAudio 方法。 我们使用两个选项 - limit 将允许每次捕获操作只记录一个音频剪辑， duration 是声音片段的秒数。

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');   }	}

当按下 AUDIO 按钮时，录音机将打开。

控制台将显示用户捕获的对象的返回数组。

步骤4B - 捕获图像功能

捕获图像的功能将与最后一个相同。 唯一的区别是我们这次使用 captureImage 方法。

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');   }	}

现在我们可以点击 IMAGE 按钮启动相机。

当我们拍照时，控制台将使用image对象记录数组。

步骤4C - 捕获视频功能

让我们重复相同的概念来捕获视频。我们将使用 videoCapture 方法。

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');   }	}

如果按 VIDEO 按钮，相机将打开，我们可以录制视频。

保存视频后，控制台将再次返回数组。这个时候跟视频对象里面。

此插件提供有关设备网络的信息。

步骤1 - 安装网络信息插件

要安装此插件，我们将打开命令提示符并运行以下代码 -

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-network-information

步骤2 - 添加按钮

让我们在 index.html 中创建一个按钮，用于获取有关网络的信息。

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

步骤3 - 添加事件监听器

我们将在 index.js 中的 onDeviceReady 函数中添加三个事件侦听器。一个将监听我们之前创建的按钮的点击，另外两个将监听连接状态的更改。

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

步骤4 - 创建函数

networkInfo 函数将返回有关当前网络连接的信息，一旦点击按钮。 我们正在呼叫 type 方法。其他功能是 onOffline 和 onOnline 。这些功能正在侦听连接更改，任何更改都将触发相应的警报消息。

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!');}

当我们启动连接到网络的应用程序时，在线功能将触发警报。

如果我们按 INFO 按钮，警报将显示我们的网络状态。

如果我们从网络断开连接，将调用 onOffline 函数。

此插件用于在应用程序启动时显示启动屏幕。

步骤1 - 安装Splash Screen插件

通过运行以下代码，可以在命令提示符窗口中安装Splash屏幕插件。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-splashscreen

步骤2 - 添加闪屏

添加启动屏幕不同于添加其他Cordova插件。我们需要打开 config.xml 并在 widget 元素中添加以下代码片段。

第一个代码段是 SplashScreen 。它具有 value 属性，它是 platform / android / res / drawable - 文件夹中的图像的名称。Cordova提供我们在此示例中使用的默认 screen.png 图片，但您可能需要添加自己的图片。重要的是为纵向和横向视图添加图像，并覆盖不同的屏幕尺寸。

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

第二个片段，我们需要添加 SplashScreenDelay 。我们正在将值设置为 3000 ，以在三秒后隐藏闪屏。

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

最后一个首选项是可选的。如果值设置为 true，则图像将不会伸展到适合屏幕。如果设置为 false ，它将被拉伸。

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

现在，当我们运行应用程序，我们将看到闪屏。

此插件用于连接设备的振动功能。

步骤1 - 安装Vibration插件

我们可以通过运行以下代码在命令提示符窗口中安装此插件:

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-vibration

步骤2 - 添加按钮

安装插件后，我们可以在 index.html 中添加按钮，稍后将用于触发振动。

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

步骤3 - 添加事件监听器

现在我们将在 index.js 中的 onDeviceReady 内添加事件监听器。

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

步骤4 - 创建函数

这是插件非常容易使用。我们将创建两个函数。

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

第一个功能是使用时间参数。此参数用于设置振动的持续时间。一旦按下 VIBRATION 按钮，设备将振动三秒钟。

第二个函数是使用 pattern 参数。此阵列将要求设备振动一秒钟，然后等待一秒钟，然后重复该过程。

这个插件允许我们实现应用程序导航的白名单政策。 当我们创建新的Cordova项目时，默认情况下会安装并实施白名单插件。您可以打开 config.xml 文件，查看Cordova提供的 allow-intent 默认设置。

导航白名单

在下面的简单示例中，我们允许链接到一些外部URL。此代码位于 config.xml 中。默认情况下允许导航到 file:// 网址。

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

星号符号 * 用于允许导航到多个值。在上面的示例中，我们允许导航到 example.com 的所有子域。同样可以应用于协议或前缀到主机。

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

意向白名单

还有 allow-intent 元素，用于指定允许打开系统的URL。 您可以在 config.xml 中看到Cordova已经允许我们使用大部分所需的链接。

网络请求白名单

当您查看 config.xml 文件中时，有< access origin =“*"/> 元素。此元素允许通过Cordova钩子对我们的应用程序的所有网络请求。如果您只想允许特定请求，可以从 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应用程序的推荐设计。SPA使用客户端路由器和导航加载在单页(通常 index.html )。 路由通过AJAX处理。 如果你按照我们的教程，你可能注意到几乎每个Cordova插件需要等待，直到设备准备就绪，然后才能使用。 SPA设计将提高加载速度和整体性能。

触摸事件

由于Cordova用于移动世界，因此使用 touchstart 和 touchend 事件而不是点击事件是很自然的事。 点击事件有300毫秒的延迟，因此点击不感觉本机。 另一方面，每个平台都不支持触摸事件。 在决定要使用什么之前，应该考虑这一点。

动画

您应该始终使用硬件加速的 CSS转换而不是JavaScript动画，因为它们在移动设备上会更好。

存储

尽可能使用存储缓存。移动网络连接通常很糟糕，因此您应该尽量减少应用内部的网络通话。您还应处理应用的离线状态，因为有时用户的设备离线。

滚动

大多数时候，你的应用程序中的第一个慢部分将滚动列表。 有几种方法来提高应用程序的滚动性能。我们的建议是使用本机滚动。当列表中有很多项目时，您应该部分加载它们。必要时使用装载机。

图片

图片也可以减慢移动应用程序。你应该尽可能使用CSS图像精灵。尝试完全适合图像，而不是缩放它。

CSS样式

你应该避免阴影，渐变，因为它们减慢了页面的呈现时间。

简化

浏览器的DOM很慢，所以你应该尽量减少DOM操作和DOM元素的数量。

测试

请务必始终在尽可能多的设备和操作系统版本上测试您的应用程序。如果应用程序在一个设备上完美无缺地工作，这并不意味着它将在其他设备或平台上工作。

Cordova 是使用HTML，CSS和JavaScript构建混合移动应用程序的平台。官方文档给了我们Cordova的定义。

“Apache Cordova是一个开源移动开发框架，它允许您使用标准的Web技术，如HTML5，CSS3和JavaScript进行跨平台开发，避免每个移动平台本机开发语言。应用程序在针对每个平台的包装内执行，并依靠符合标准的API绑定来访问每个设备的传感器，数据和网络状态。"

Cordova特征

• 命令行界面(Cordova CLI)

  这是可用于启动项目，构建不同平台的进程，安装插件和许多其他有用的东西，使开发过程更容易的工具。您将在以后的章节中学习如何使用。

• Cordova核心组件

  Cordova提供了每个移动应用程序所需的核心组件。这些组件将用于创建应用程序的基础，所以我们可以花更多的时间来实现我们自己的逻辑。

• Cordova外挂程式

  Cordova提供的API将用于实现本地移动功能到我们的JavaScript应用程序。

• 许可证

  Cordova按照Apache许可证2.0版授权。 Apache和Apache羽毛标志是Apache软件基金会的商标。

Cordova的优势

• Cordova为构建混合移动应用程序提供了一个平台，因此我们可以开发一个应用程序，将在不同的移动平台IOS，Android，Windows Phone，Amazon-fireos，黑莓，Firefox OS，Ubuntu和tizien上使用。

• 开发混合应用程序然后原生应用程序更快，所以Cordova可以节省大量的开发时间

• 由于我们在使用Cordova时使用JavaScript，我们不需要学习平台特定的编程语言。

• 有大量的社区插件可以与Cordova一起使用。许多库和框架都经过优化以便使用它。

Cordova限制

• 混合应用程序比本地应用程序慢，因此对于需要大量数据和功能的大型应用程序使用Cordova不是最佳选择。

• 跨浏览器兼容性可能会产生很多问题。大多数时候，我们为不同的平台构建应用程序，所以测试和优化可能需要很多时间，因为我们需要覆盖大量的设备和操作系统。

• 某些插件与不同的设备和平台存在兼容性问题。还有一些Cordova尚不支持的本机API。

在我们开始使用Cordova设置之前，我们需要安装一些组件。

安装Cordova

在我们开始之前，您需要知道我们将在教程中使用windows 命令提示符。

步骤1 - 安装git

即使你不使用git，它应该安装，因为Cordova正在使用它的一些后台进程。你可以在这里下载git。安装git后，打开你的环境变量。

• Right-Click on Computer
• Properties
• Advanced System settings
• Environment Variables
• System Variables
• Edit

复制变量值字段结尾处的以下内容。 这是git安装的默认路径。 如果你安装它在不同的路径，你应该使用，而不是我们的示例代码下面。

;C:Program Files (x86)Gitin;C:Program Files (x86)Gitcmd

现在您可以在命令提示符中键入 git ，以测试安装是否成功。

步骤2 - 安装Cordova

此步骤将在全球下载并安装Cordova模块。 打开命令提示符并运行以下命令 -

C:Usersusername>npm install -g cordova

您可以通过运行检查安装的版本 -

C:Usersusername>cordova -v

这是在Windows操作系统上开始开发Cordova应用程序所需的一切。在我们的下一个教程中，我们将向您展示如何创建第一个应用程序。

在上一个教程中，我们向您展示了如何安装Cordova并设置环境。一旦一切准备就绪，我们可以创建我们的第一个混合Cordova应用程序。

步骤1 - 创建应用程序

在命令提示符下打开要在其中安装应用程序的目录。我们将在桌面上创建它。

C:UsersusernameDesktop>cordova create CordovaProject io.cordova.hellocordova CordovaApp

• CordovaProject 是创建应用程序的目录名称。

• io.cordova.hellocordova 是默认的反向域值。 如果可能，您应该使用您自己的域值。

• CordovaApp 是您应用的标题。

步骤2 - 添加平台

您需要在命令提示符下打开您的项目目录。在我们的示例中是 CordovaProject 。你应该只选择你需要的平台。为了能够使用指定的平台，您需要安装特定的平台SDK。由于我们在Windows上开发，我们可以使用以下平台。我们还安装了Android SDK，因此我们只会为本教程安装Android平台。

C:UsersusernameDesktopCordovaProject>cordova platform add android

还有其他平台可以在Windows操作系统上使用。

C:UsersusernameDesktopCordovaProject>cordova platform add wp8

C:UsersusernameDesktopCordovaProject>cordova platform add amazon-fireos

C:UsersusernameDesktopCordovaProject>cordova platform add windows

C:UsersusernameDesktopCordovaProject>cordova platform add blackberry10

C:UsersusernameDesktopCordovaProject>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:UsersusernameDesktopCordovaProject>cordova platform rm android

步骤3 - 构建和运行

在这一步，我们正在为指定的平台构建应用程序，所以我们可以在移动设备或模拟器上运行它。

C:UsersusernameDesktopCordovaProject>cordova build android

现在我们可以运行我们的应用程序。 如果你使用默认模拟器，你应该使用 -

C:UsersusernameDesktopCordovaProject>cordova emulate android

如果你想使用外部模拟器或真实设备，你应该使用 -

C:UsersusernameDesktopCordovaProject>cordova run android

注意 - 我们将使用genymotion android模拟器，因为它比默认的更快，更灵敏。 您可以在此处找到它。 您也可以使用实际设备进行测试，方法是从选项中启用 USB调试，然后通过USB电缆将其连接到计算机。对于某些设备，您还需要为特定设备安装USB驱动程序。

一旦我们运行应用程序，它将安装在我们指定的平台上。如果一切都完成没有错误，输出应该显示应用程序的默认开始屏幕。

在下一个教程中，我们将向您展示如何配置Cordova应用程序。

这是我们可以更改应用程序配置的地方。当我们在最后一个教程中创建我们的应用程序时，我们设置反向域名和名称。该值可以在 config.xml 文件中更改。当我们创建应用程序时，默认的配置文件也将被创建。

下表说明了 config.xml 中的配置元素。

config.xml配置表

我们可以使用存储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"));}	

如果我们点击 SET LOCAL STORAGE 按钮，我们将设置三个项目到本地存储。如果我们点击 SHOW LOCAL STORAGE ，控制台将记录我们想要的项目。

现在让我们创建将从本地存储中删除项目的函数。

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

如果我们在删除项目后点击 SHOW LOCAL STORAGE 按钮，输出将显示项目字段的 null 值。

我们还可以使用 key()方法获取本地存储元素，它将索引作为参数，并返回具有相应索引值的元素。

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

现在，当我们点击 GET BY KEY 按钮时，我们将获得以下输出。

注意

当我们使用 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()来完成的。

处理返回按钮

你通常会想要使用 Android 返回按钮的一些应用程序功能，如返回到上一个屏幕。为了能够实现自己的功能，首先需要在按下返回按钮时禁用退出应用程序。

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

现在，当我们按本机 Android 返回按钮时，警报将显示在屏幕上，而不是退出应用程序。这是通过使用  e.preventDefault() 来完成的。

Cordova plugman是用于安装和管理插件的有用的命令行工具。 如果您希望您的应用在一个特定平台上运行，则应使用 plugman 。如果您要创建跨平台应用，则应使用 cordova-cli ，这将修改不同平台的插件。

步骤1 - 安装Plugman

打开命令提示符窗口并运行以下代码片段来安装plugman。

C:UsersusernameDesktopCordovaProject>npm install -g plugman

步骤2 - 安装插件

为了告诉你如何使用plugman安装Cordova插件，我们将使用Camera插件为例。

C:UsersusernameDesktopCordovaProject>plugman    install --platform android --project platformsandroid    --plugin cordova-plugin-camera   plugman uninstall --platform android --project platformsandroid    --plugin cordova-plugin-camera

有三个需要的参数，如下所示。

• - platform - 我们使用的平台(android，ios，amazon-fire os，wp8，blackberry 10)。

• - project - 项目构建的路径。 在我们的示例中是 platforms android 目录。

• - plugin - 我们要安装的插件。

如果设置有效的参数，命令提示符窗口应输出以下内容。

附加方法

您可以使用类似的方式卸载方法。

C:UsersusernameDesktopCordovaProject>plugman uninstall    --platform android --project platformsandroid --plugin cordova-plugin-camera

命令提示符控制台将具有以下输出。

Plugman提供了一些可以使用的附加方法。你可以在下面的表中看到它。

附加命令

如果您卡住，您可以始终使用 plugman -help 命令。可以使用 plugman -v 来检查版本。要搜索插件，您可以使用 plugman search，最后您可以使用 plugman config set注册表命令更改插件注册表。

注意

由于Cordova通常用于跨平台开发，因此在接下来的教程中，我们将使用 Cordova CLI 安装插件，而不是 Plugman 。

该Cordova插件用于监视设备的电池状态。该插件将监视设备电池发生的每一个变化。

步骤1 - 安装电池插件

要安装此插件，我们需要打开命令提示符窗口并运行以下代码。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-battery-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 事件相同。

此插件用于拍摄照片或使用图像库中的文件。

步骤1 - 安装相机插件

在命令提示符窗口中运行以下代码以安装此插件。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-camera

步骤2 - 添加按钮和图像

在此步骤中，我们将创建用于调用摄像头的按钮和在拍摄后将显示图像的 img 。将其添加到 div.html = 元素中的 index.html 。

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

步骤3 - 添加事件监听器

事件侦听器添加到 onDeviceReady 函数中，以确保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

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-camera

步骤2

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

步骤3

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

步骤4

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);   }}

当我们按第二个按钮时，文件系统将打开而不是相机，所以我们可以选择我们想要显示的图像。

这个插件提供了许多可选的参数定制。

此插件用于访问设备联系人数据库。在本教程中，我们将向您展示如何创建，查询和删除联系人。

步骤1 - 安装联系人插件

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-contacts

步骤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 变量，但不会存储在设备上。要存储它，我们需要调用保存方法并创建成功和错误回调函数。

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 方法。 选项对象具有过滤器参数，用于指定搜索过滤器。 multiple = true ，因为我们要返回设备中的所有联系人。我们还使用字段键通过 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);   }	}

目前，我们只有一个联系人存储在设备上。我们将手动添加一个，向您显示删除过程。

现在，您可以点击删除联系人按钮删除测试用户。如果我们再次检查联系人列表，我们将看到不再有测试用户。

此插件用于获取有关用户设备的信息。

步骤1 - 安装设备插件

要安装此插件，我们需要在命令提示符中运行以下代码段。

C:UsersusernameDesktopCordovaProject>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 - 创建函数

Cordova插件在 deviceready 事件后可用，因此我们将在 index.js 中的 onDeviceReady 函数中放置事件侦听器。

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

当我们单击 CORDOVA DEVICE 按钮时，警报将显示Cordova版本，设备型号，平台，UUID和设备版本。

该插件也称为 设备运动 。它用于在三维中跟踪设备运动。

步骤1 - 安装加速计插件

我们将使用 cordova-CLI 安装此插件。键入以下代码到命令提示符窗口。

C:UsersusernameDesktopCordovaProject>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 + '
' +         'Acceleration Y: ' + acceleration.y + '
' +         'Acceleration Z: ' + acceleration.z + '
' +         'Timestamp: '      + acceleration.timestamp + '
');   };   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 + '
' +         'Acceleration Y: ' + acceleration.y + '
' +         'Acceleration Z: ' + acceleration.z + '
' +         'Timestamp: '      + acceleration.timestamp + '
');      setTimeout(function() {         navigator.accelerometer.clearWatch(watchID);      }, 10000);   };   function accelerometerError() {      alert('onError!');   };	}

现在，如果我们按 GET ACCELERATION 按钮，我们将获得当前的加速度值。如果我们按WATCH ACCELERATION，警报将每三秒触发一次。在显示第三个警告后，将调用 clearWatch 函数，并且我们不会再收到任何警报，因为我们将超时设置为10000毫秒。

指南针用于显示相对于地理北基点的方向。

步骤1 - 安装设备定向插件

打开命令提示符窗口并运行以下命令。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-device-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 - 创建函数

我们将创建两个函数，一个获取当前加速度，另一个查看方向更改。您可以看到我们正在使用频率选项，因为我们想要每隔三秒观察一次更改。

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);   };	}

由于指南针插件几乎与加速插件相同，我们将在此时显示错误代码。 某些设备没有磁罗盘工作所需的磁性传感器。 如果您的设备没有它，您会得到以下错误。

这个插件将调用平台本地对话框UI元素。

步骤1 - 安装对话框

在命令提示符窗口中键入以下内容以安装此插件。

C:UsersusernameDesktopCordovaProject>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!");   }	}

如果我们点击 ALERT 按钮，我们将看到警报对话框。

当我们单击对话框按钮，我们将获得控制台输出。

步骤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!");   }	}

当按下 CONFIRM 按钮时，将弹出新对话框。

我们将点击是按钮来回答问题。控制台输出将显示以下内容 -

步骤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! 
" +          "You entered " +  result.input1);   }	}

PROMPT 按钮将触发此对话框。

在此对话框中，我们有选择键入文本。我们将在控制台中记录此文本以及单击的按钮。

步骤4D - 创建蜂鸣声功能

最后一个是 dialogBeep 。这用于呼叫音频蜂鸣声通知。times 参数将设置蜂鸣声信号的重复次数。

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

当我们点击 BEEP 按钮时，我们会听到两次通知声音，因为次值设置为 2 。

此插件用于操作用户设备上的本机文件系统。

步骤1 - 安装文件插件

我们需要运行命令提示符中的代码来安装此插件。

C:UsersusernameDesktopCordovaProject>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，size是存储所需的字节值(在本例中为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)   }	}

现在我们可以按 CREATE FILE 按钮，警报将确认我们已成功创建文件。

现在我们可以再次检查您的应用程序根文件夹，新的文件将在那里。

步骤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 。当读取器加载时，我们将返回的值分配给 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)   }	}	

当我们单击 READ FILE 按钮时，文件中的文本将写在 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)   }	}	

我们现在可以按删除文件按钮从应用程序根文件夹中删除该文件。该警报将通知我们删除成功。

如果我们检查应用程序根文件夹，我们将看到它是空的。

此插件用于上传和下载文件。

步骤1 - 安装文件传输插件

我们需要打开命令提示符并运行以下命令来安装插件。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-file-transfer

步骤2 - 创建按钮

在本章中，我们将向您展示如何上传和下载文件。 让我们在 index.html 中创建两个按钮。

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

步骤3 - 添加事件监听器

事件监听器将在onDeviceReady函数的index.js中创建。我们正在添加点击事件和回调函数。

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);   }	}

现在我们可以按上传按钮来触发此功能。我们将获得控制台输出，确认上传是成功的。

现在我们可以按上传按钮来触发此功能。我们将获得控制台输出，确认上传是成功的。...

地理位置用于获取有关设备的纬度和经度的信息。

步骤1 - 安装插件

我们可以通过在命令提示符窗口中键入以下代码来安装此插件。

C:UsersusernameDesktopCordovaProject>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          + '
' +         'Longitude: '         + position.coords.longitude         + '
' +         'Altitude: '          + position.coords.altitude          + '
' +         'Accuracy: '          + position.coords.accuracy          + '
' +         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '
' +         'Heading: '           + position.coords.heading           + '
' +         'Speed: '             + position.coords.speed             + '
' +         'Timestamp: '         + position.timestamp                + '
');   };   function onError(error) {      alert('code: '    + error.code    + '
' + 'message: ' + error.message + '
');   }}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          + '
' +         'Longitude: '         + position.coords.longitude         + '
' +         'Altitude: '          + position.coords.altitude          + '
' +         'Accuracy: '          + position.coords.accuracy          + '
' +         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '
' +         'Heading: '           + position.coords.heading           + '
' +         'Speed: '             + position.coords.speed             + '
' +         'Timestamp: '         + position.timestamp                + '
');   };   function onError(error) {      alert('code: '    + error.code    + '
' +'message: ' + error.message + '
');   }}

在上面的例子中，我们使用两个方法 - getCurrentPosition和watchPosition。两个函数都使用三个参数。一旦我们单击“当前位置"按钮，该警报将显示地理位置值。

如果我们点击 WATCH POSITION 按钮，每三秒钟就会触发相同的提醒。 这样我们可以跟踪用户设备的移动变化。

注意

此插件使用GPS。有时它不能按时返回值，并且请求将返回超时错误。这就是为什么我们指定 enableHighAccuracy:true 和 maximumAge:3600000 的原因。 这意味着如果请求没有按时完成，我们将使用最后一个已知的值。在我们的示例中，我们将maximumAge设置为3600000毫秒。

此插件用于获取有关用户语言区域语言，日期和时区，货币等的信息。

步骤1 - 安装全球化插件

打开命令提示符并通过键入以下代码安装插件。

C:UsersusernameDesktopCordovaProject>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 - 添加事件监听器

事件监听器将被添加到 index.js 文件中的 getDeviceReady 函数中，以确保我们的应用程序和Cordova在我们开始使用它之前加载。

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 + '
');   }   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  + '
' +         'code: '     + pattern.code     + '
' +         'fraction: ' + pattern.fraction + '
' +         'rounding: ' + pattern.rounding + '
' +         'decimal: '  + pattern.decimal  + '
' +         'grouping: ' + pattern.grouping);   }   function onError(){      alert('Error getting pattern');   }	}

CURRENCY 按钮将触发警报，显示用户的货币模式。

此插件提供其他方法。你可以看到下面的表中所有的。

此插件用于在Cordova应用程序中打开Web浏览器。

步骤1 - 安装插件

我们需要在命令提示符窗口中安装此插件，我们才能使用它。

C:UsersusernameDesktopCordovaProject>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('loadloaderror', 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 按钮，我们将在屏幕上看到以下输出。

控制台还将监听事件。 当网址开始加载时， loadstart 事件将触发，并且在加载网址时加载 loadstop 。 我们可以在控制台看到它。

关闭浏览器后，退出事件将会触发。

InAppBrowser窗口有其他可能的选项。 我们将在下面的表中解释。

对于一些其他功能，我们可以使用 ref (reference)变量。我们将向您展示它的快速示例。对于删除事件侦听器，我们可以使用 -

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应用程序中录制和播放音频声音。

步骤1 - 安装媒体插件

可以通过在命令提示符窗口中运行以下代码来安装Media插件。

C:UsersusernameDesktopCordovaProject>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 ，因为我们想在稍后添加的函数中使用它(pause，stop，volumeUp和volumeDown)。此代码放在 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();}

我们可以点击播放按钮，从 src 路径启动钢琴音乐。

步骤4B - 暂停和停止功能

我们需要的下一个功能是 pauseAudio 和 stopAudio 。

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

现在，我们可以通过点击暂停或停止按钮暂停或停止钢琴音色。

步骤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 更改音量值。

下表显示了此插件提供的其他方法。

此插件用于访问设备的捕获选项。

步骤1 - 安装媒体捕获插件

要安装此插件，我们将打开命令提示符并运行以下代码 -

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-media-capture

步骤2 - 添加按钮

由于我们希望向您展示如何捕获音频，图片和视频，因此我们将在 index.html 中创建三个按钮。

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

步骤3 - 添加事件监听器

下一步是在 index.js 中的 onDeviceReady 内添加事件监听器。

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

步骤4A - 捕获音频功能

index.js 中的第一个回调函数是 audioCapture 。 要启动录音机，我们将使用 captureAudio 方法。 我们使用两个选项 - limit 将允许每次捕获操作只记录一个音频剪辑， duration 是声音片段的秒数。

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');   }	}

当按下 AUDIO 按钮时，录音机将打开。

控制台将显示用户捕获的对象的返回数组。

步骤4B - 捕获图像功能

捕获图像的功能将与最后一个相同。 唯一的区别是我们这次使用 captureImage 方法。

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');   }	}

现在我们可以点击 IMAGE 按钮启动相机。

当我们拍照时，控制台将使用image对象记录数组。

步骤4C - 捕获视频功能

让我们重复相同的概念来捕获视频。我们将使用 videoCapture 方法。

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');   }	}

如果按 VIDEO 按钮，相机将打开，我们可以录制视频。

保存视频后，控制台将再次返回数组。这个时候跟视频对象里面。

此插件提供有关设备网络的信息。

步骤1 - 安装网络信息插件

要安装此插件，我们将打开命令提示符并运行以下代码 -

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-network-information

步骤2 - 添加按钮

让我们在 index.html 中创建一个按钮，用于获取有关网络的信息。

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

步骤3 - 添加事件监听器

我们将在 index.js 中的 onDeviceReady 函数中添加三个事件侦听器。一个将监听我们之前创建的按钮的点击，另外两个将监听连接状态的更改。

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

步骤4 - 创建函数

networkInfo 函数将返回有关当前网络连接的信息，一旦点击按钮。 我们正在呼叫 type 方法。其他功能是 onOffline 和 onOnline 。这些功能正在侦听连接更改，任何更改都将触发相应的警报消息。

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!');}

当我们启动连接到网络的应用程序时，在线功能将触发警报。

如果我们按 INFO 按钮，警报将显示我们的网络状态。

如果我们从网络断开连接，将调用 onOffline 函数。

此插件用于在应用程序启动时显示启动屏幕。

步骤1 - 安装Splash Screen插件

通过运行以下代码，可以在命令提示符窗口中安装Splash屏幕插件。

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-splashscreen

步骤2 - 添加闪屏

添加启动屏幕不同于添加其他Cordova插件。我们需要打开 config.xml 并在 widget 元素中添加以下代码片段。

第一个代码段是 SplashScreen 。它具有 value 属性，它是 platform / android / res / drawable - 文件夹中的图像的名称。Cordova提供我们在此示例中使用的默认 screen.png 图片，但您可能需要添加自己的图片。重要的是为纵向和横向视图添加图像，并覆盖不同的屏幕尺寸。

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

第二个片段，我们需要添加 SplashScreenDelay 。我们正在将值设置为 3000 ，以在三秒后隐藏闪屏。

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

最后一个首选项是可选的。如果值设置为 true，则图像将不会伸展到适合屏幕。如果设置为 false ，它将被拉伸。

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

现在，当我们运行应用程序，我们将看到闪屏。

此插件用于连接设备的振动功能。

步骤1 - 安装Vibration插件

我们可以通过运行以下代码在命令提示符窗口中安装此插件:

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-vibration

步骤2 - 添加按钮

安装插件后，我们可以在 index.html 中添加按钮，稍后将用于触发振动。

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

步骤3 - 添加事件监听器

现在我们将在 index.js 中的 onDeviceReady 内添加事件监听器。

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

步骤4 - 创建函数

这是插件非常容易使用。我们将创建两个函数。

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

第一个功能是使用时间参数。此参数用于设置振动的持续时间。一旦按下 VIBRATION 按钮，设备将振动三秒钟。

第二个函数是使用 pattern 参数。此阵列将要求设备振动一秒钟，然后等待一秒钟，然后重复该过程。

这个插件允许我们实现应用程序导航的白名单政策。 当我们创建新的Cordova项目时，默认情况下会安装并实施白名单插件。您可以打开 config.xml 文件，查看Cordova提供的 allow-intent 默认设置。

导航白名单

在下面的简单示例中，我们允许链接到一些外部URL。此代码位于 config.xml 中。默认情况下允许导航到 file:// 网址。

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

星号符号 * 用于允许导航到多个值。在上面的示例中，我们允许导航到 example.com 的所有子域。同样可以应用于协议或前缀到主机。

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

意向白名单

还有 allow-intent 元素，用于指定允许打开系统的URL。 您可以在 config.xml 中看到Cordova已经允许我们使用大部分所需的链接。

网络请求白名单

当您查看 config.xml 文件中时，有< access origin =“*"/> 元素。此元素允许通过Cordova钩子对我们的应用程序的所有网络请求。如果您只想允许特定请求，可以从 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应用程序的推荐设计。SPA使用客户端路由器和导航加载在单页(通常 index.html )。 路由通过AJAX处理。 如果你按照我们的教程，你可能注意到几乎每个Cordova插件需要等待，直到设备准备就绪，然后才能使用。 SPA设计将提高加载速度和整体性能。

触摸事件

由于Cordova用于移动世界，因此使用 touchstart 和 touchend 事件而不是点击事件是很自然的事。 点击事件有300毫秒的延迟，因此点击不感觉本机。 另一方面，每个平台都不支持触摸事件。 在决定要使用什么之前，应该考虑这一点。

动画

您应该始终使用硬件加速的 CSS转换而不是JavaScript动画，因为它们在移动设备上会更好。

存储

尽可能使用存储缓存。移动网络连接通常很糟糕，因此您应该尽量减少应用内部的网络通话。您还应处理应用的离线状态，因为有时用户的设备离线。

滚动

大多数时候，你的应用程序中的第一个慢部分将滚动列表。 有几种方法来提高应用程序的滚动性能。我们的建议是使用本机滚动。当列表中有很多项目时，您应该部分加载它们。必要时使用装载机。

图片

图片也可以减慢移动应用程序。你应该尽可能使用CSS图像精灵。尝试完全适合图像，而不是缩放它。

CSS样式

你应该避免阴影，渐变，因为它们减慢了页面的呈现时间。

简化

浏览器的DOM很慢，所以你应该尽量减少DOM操作和DOM元素的数量。

测试

请务必始终在尽可能多的设备和操作系统版本上测试您的应用程序。如果应用程序在一个设备上完美无缺地工作，这并不意味着它将在其他设备或平台上工作。