logo图片
phoneGap教程

photoGap 网络和电池

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

在上一节中,我们了解了设备信息插件。在本节中,我们将了解其余插件,即设备方向插件、网络信息插件和电池状态插件。每个插件的完整描述如下:

设备方向插件

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

1) 创建 index2.html 文件

我们将创建一个新文件 index2.html,其代码与 index.html 中预设的代码相同。我们稍后将在 index2.html 文件中进行更改,而不是在 index.html 中。
Orientation, Network, and Battery status plugin

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

我们将使用

标签在我们的应用程序中添加一个标题。之后,我们将使用
<在用户界面上显示方向信息的字段 strong> 标签。
<body>
        <h1> Hardware </h1>
        <div id="result"></div>
        <h1> Orientation </h1>
        <div id="orientation"></div>
        <script type="text/javascript" src="cordova.js"></script>
</body>

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

现在,我们将对 window.onload 函数进行一些更改。我们将创建一个手表 ID,因为指南针会一直工作,直到我们停止它。因此,最终,我们要清除该手表 ID。我们将使用 navigator.compass.watch 标题() 访问它。该函数采用三个回调函数,即成功、错误和频率。我们将通过以下方式访问 watchId:
var watchId = navigator.compass.watchHeading(success, error, {frequency: 100});

4) 创建成功和错误回调函数

我们将创建成功和错误回调函数。 success 和 error 函数分别以heading 和error 作为参数。在error回调函数中,我们将简单地使用alert函数,而在success函数中,我们将通过以下方式设置方向div中的方向数据:
function success(heading)
{
          document.getElementById('orientation').innerHTML = heading.magneticHeading;
}
            
function error(error)
{
          alert("Compass Error: " + error.code);
}
注意: 我们可以或不能看到方向信息。我们只有在设备制造商允许的情况下才能看到它。

网络信息插件

现在,我们来看看网络信息插件。我们将在 index2.html 中添加一些代码行。我们将执行以下步骤来使用网络信息插件。通过使用这个插件,我们可以准确地找出我们所连接的网络类型。

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

我们将使用

标签在我们的应用程序中添加一个标题。之后,我们将使用
标签在用户界面上使用一个字段来显示方向信息。
<body>
        <h1> Hardware </h1>
        <div id = "result" ></div>
        <script type="text/javascript" src="cordova.js"></script>
        <h1> Network Information </h1>
        <div id = "networkResult" ></div>
        <h1> Orientation </h1>
        <div id = "orientation" ></div>
</body>

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

我们将创建一个变量并存储 navigator.connection.type 返回的数据并将该变量传递给一个警报功能如下:
//Network Information
var networkType = navigator.connection.type;
alert(networkType); 

方向、网络和电池状态插件
它看起来确实不错,但还有很多其他类型需要了解。连接可以是未知的、以太网、Wi-Fi、2G、3G 和 4G 等。我们可以访问不同类型使用枚举的连接。我们将创建一个枚举 conType。我们将使用 id 访问元素,我们在 UI 上以下列方式显示结果:
var conType = {};
conType[ Connection.UNKOWN ] = "Connection Unknown";
conType[ Connection.ETHERNET ] = "Ethernet";
conType[ Connection.WIFI ] = "wifi";
conType[ Connection.CELL_2G ] = "Cell";
conType[ Connection.CELL_3G ] = "Cell";
conType[ Connection.CELL_4G ] = "Cell";
conType[ Connection.CELL ] = "Cell";
conType[ Connection.NONE ] = "None";
document.getElementById('networkResult').innerHTML = conType[networkType]; 
现在,我们将在 PhoneGap Developer App 上运行我们的应用程序:
Orientation, Network, and Battery status plugin

电池状态插件

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

1) 创建 batterystatus 事件侦听器

现在,我们将附加一个名为 batterystatus 的事件侦听器用我们的窗户。此事件侦听器将调用 onBatteryStatusChange 函数。此函数将电池状态作为参数。 BatteryStatus 事件侦听器将按以下方式编写:
//Battery Status
window.addEventListener('batterystatus', onBatteryStatusChange, false);

2) 创建 onBatteryStatusChange 函数

现在,我们将创建 onBatteryStatusChange 回调函数。这个回调函数包含一个警报函数,它告诉我们状态的级别以及状态是否已插入。 onBatteryStatusChange 函数的设计方式如下:
function onBatteryStatusChange(status)
{
               alert("Battery Level: " + status.level + " Plugged in: " + status.isPlugged);
} 
我们还可以使用batterylow 和batterycritical 事件侦听器,而不是使用batterystatus。它们的工作方式与电池状态的工作方式相同。 Batterylow 和 Batterycritical 事件侦听器的设计方式如下:
window.addEventListener('batterylow', onBatteryStatusLow, false);
window.addEventListener('batterycritical', onBatteryCritical, false);

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Hardware</title>
        <script>
            window.onload=function()
            {
                var out="";
                out += "Cordova Version: " + device.cordova;
                out += "<br/>Device Model: " + device.model;
                out += "<br/>Device Platform: " + device.platform;
                out += "<br/>UUID: " + device.uuid;
                out += "<br/>Version: " + device.version;
                out += "<br/>Manufacturer: " + device.manufacturer;
                out += "<br/>Serial: " + device.serial;
                document.getElementById('result').innerHTML = out;
                
                //Network Information
                var networkType = navigator.connection.type;
                var conType = {};
                conType[Connection.UNKOWN] = "Connection Unknown";
                conType[Connection.ETHERNET] = "Ethernet";
                conType[Connection.WIFI] = "wifi";
                conType[Connection.CELL_2G] = "Cell";
                conType[Connection.CELL_3G] = "Cell";
                conType[Connection.CELL_4G] = "Cell";
                conType[Connection.CELL] = "Cell";
                conType[Connection.NONE] = "None";
                document.getElementById('networkResult').innerHTML = conType[networkType];
            
                var watchId = navigator.compass.watchHeading(success, error, {frequency: 100});
                
                //Battery Status
                window.addEventListener('batterystatus', onBatteryStatusChange, false);
                
//                window.addEventListener('batterylow', onBatteryStatusLow, false);
//                
//                window.addEventListener('batterycritical', onBatteryCritical, false);
//                
                function onBatteryStatusChange(status)
                {
                    alert("Battery Level: " + status.level + " Plugged in: " + status.isPlugged);
                }
                
                
            }
            
            function success(heading)
            {
                document.getElementById('orientation').innerHTML = heading.magneticHeading;
            }
            
            function error(error)
            {
                alert("Compass Error: " + error.code);
            }
        
            
            
        </script>
    </head>
    <body>
        <h1>Hardware</h1>
        <div id="result"></div>
        <script type="text/javascript" src="cordova.js"></script>
        <h1>Network Information</h1>
        <div id="networkResult"></div>
        <h1>Orientation</h1>
        <div id="orientation"></div>
    </body>
</html>
输出
Orientation网络和电池状态插件
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4