方向、网络和电池状态插件

在之前的章节中，我们学习了设备信息插件。在本节中，我们将学习剩余的插件，即设备方向插件、网络信息插件和电池状态插件。每个插件的完整描述如下

设备方向插件

对于设备方向，我们将使用之前的示例，即设备信息示例。我们将使用以下步骤在我们的 PhoneGap 应用程序中使用设备方向插件

1) 创建 index2.html 文件

我们将创建一个新文件 index2.html，其中的代码与 index.html 中的代码相同。我们将在 index2.html 文件中进行更改，而不是在 index.html 中。

2) 创建一个字段以在 UI 上显示方向

我们将在应用程序中使用 <h1></h1> 标签添加一个标题。之后，我们将使用一个字段在用户界面上显示方向信息，使用 <div></div> 标签。

3) 在 window.onload 函数中进行更改

现在，我们将对 window.onload 函数进行一些更改。我们将创建一个 watch Id，因为罗盘将一直工作，直到我们停止它。因此，最终，我们希望清除该 watch Id。我们将使用 navigator.compass.watch heading () 访问它。此函数接受三个回调函数，即 success、error 和 frequency。我们将以以下方式访问 watchId

4) 创建 success 和 error 回调函数

我们将创建 success 和 error 回调函数。success 和 error 函数分别将 heading 和 error 作为参数。在 error 回调函数中，我们将简单地使用 alert 函数，在 success 函数中，我们将以以下方式在方向 div 中设置方向数据

注意：我们可以或不能看到方向信息。只有在设备的制造商允许的情况下，我们才能看到它。

网络信息插件

现在，我们将看一下网络信息插件。我们将在 index2.html 中添加一些代码行。以下是我们使用网络信息插件的步骤。通过使用此插件，我们可以确切地找到我们连接的网络类型。

1) 创建一个字段以在 UI 上显示网络信息

我们将在应用程序中使用 <h1></h1> 标签添加一个标题。之后，我们将使用一个字段来显示用户界面上的方向信息，使用 <div></div> 标签。

2) 在 window.onload 函数中添加网络信息

我们将创建一个变量，并存储 navigator.connection.type 返回的数据，并将该变量传递给 alert 函数，如下所示

这看起来确实不错，但还有很多其他类型需要了解。连接可以是未知、以太网、Wi-Fi、2G、3G 和 4G 等。我们可以使用枚举来访问不同类型的连接。我们将创建一个枚举 conType。我们将使用 id 访问元素，我们在 UI 中显示结果，如下所示

现在，我们将在 PhoneGap 开发人员应用程序上运行我们的应用程序

电池状态插件

电池状态是 PhoneGap 可以与之交互的另一部分硬件。如果要执行关键操作，则需要查看电池状态。我们要确保它在操作过程中不会耗尽电池。有几种获取电池状态的不同方法。我们将使用以下步骤在我们的应用程序中获取电池状态

1) 创建电池状态事件监听器

现在，我们将一个名为 batterystatus 的事件监听器附加到我们的窗口。此事件监听器将调用 onBatteryStatusChange 函数。此函数将获取电池状态作为参数。电池状态事件监听器将以以下方式编写

2) 创建 onBatteryStatusChange 函数

现在，我们将创建 onBatteryStatusChange 回调函数。此回调函数包含一个 alert 函数，它告诉我们状态的级别以及状态是否已插入。 onBatteryStatusChange 函数设计如下

我们也可以使用 batterylow 和 batterycritical 事件监听器，而不是使用 batterystatus。它们的工作方式与电池状态相同。batterylow 和 batterycritical 事件监听器的设计方式如下

完整代码

输出