Phonegap网络连接 HTML5

2021-12-19 15:13:19

Phonegap网络连接判断官网提供 Network API

cordova 3.4 版本的API 判断网络的连接状态

判断网络是4G 3G 2G WIFI none 等

本文在结尾处提供Demo下载

支持的系统:

Amazon Fire OS

Android

BlackBerry 10

iOS

Windows Phone 7 and 8

Tizen

Windows 8

从建立项目说起:

<1> 在控制台创建一个phonegap工程命令如下

 phonegap create my-app
 cd my-app
 phonegap run android

Phonegap网络连接 HTML5

<2> 我们从命令行进入到工程目录下的 plugins文件夹

cd my-app

cd plugins

Phonegap网络连接 HTML5

<3> 现在开始下载插件

cordova plugin add org.apache.cordova.network-information

下载完成:

Phonegap网络连接 HTML5

<4> 添加android 平台工程 (ios把 "android" 替换)

cordova platform add android

添加完成:

Phonegap网络连接 HTML5

<5> 编译android工程

cordova build

编译完成:

Phonegap网络连接 HTML5

此时将工程导入到 eclipse中

Phonegap网络连接 HTML5

画圈圈的地方就是系统生成的代码

将下方语句考到 assets目录下 www/index.html 当中完全复制过去;

example:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>
    
 <p><a href="#" style="font-size:30px;" onclick="checkConnection(); return false;">包子的网络连接</a></p>    

    <br />
    <br />
    <br />
    <br />
    <div style="font-size:30px;" onclick="aaa();">包子测试</div>
    
    
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>

        <script type="text/javascript">

        function aaa(){
            alert(111);
        };

            //这里是判断网络连接状态的方法
            function checkConnection() {
                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]);
            }


        </script>

    </body>
</html>

代码详解:

                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‘;

navigator.connection.type 获取当前网络状态

states数组表示输出的状态大家可以根据需要自己修改输出的参数

Phonegap网络连接 HTML5