javascript - 检查 Phonegap 应用程序连接

Question

我正在 Phonegap 中开发一个非 native 应用程序，我想知道我何时有连接。在网络上搜索，我找到了一种如何知道我的应用程序中是否获得连接的方法，但我在代码中实现了但不起作用。

我发现的方法是这样的:

document.addEventListener("deviceready", onDeviceReady, false);  

        // PhoneGap is loaded and it is now safe to make calls PhoneGap methods  
        function onDeviceReady() {  
            check_my_Connection();  
        }  

        function check_my_Connection() {  
            var networkState = navigator.network.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.NONE]     = 'No network connection';  

            alert('Connection type: ' + states[networkState]);  
        }  

我在脚本的 ready 函数中调用函数 onDeviceReady()，如下所示:

<script type="text/javascript">

     $(document).ready(function(){
          /*other code*/
          onDeviceReady();
         /*other chode*/
     });

     /*other code functions*/
     /*Before the rest of the code, I added the snippet code above of this*/

     document.addEventListener("deviceready", onDeviceReady, false); 
     ...
</script>

我读到我需要一个 cordova.js，但是 PhoneGap Desktop App (测试版)没有创建它。完成这项工作需要这个 JS 文件吗？是否存在另一种方法来检测 Phonegap 应用程序中的连接，而不使用 jQueryUI 或 jQueryMobile？我需要对项目的某些文件进行一些更改？

如果有任何帮助或任何方法，我将不胜感激。

P。 S.:请原谅我的英语。

Answer 1

问题必须出在您的代码内部。只需执行以下操作即可接收连接状态:

1. 打开您的终端/控制台
2. cordova 创建网络信息 com.example.com 网络信息
3. cd 网络信息
4. cordova平台添加android
5. cordova 插件添加 cordova-plugin-network-information
6. cordova 构建

完成此过程后，您可以在桌面上打开创建的文件夹。移至 assets 下 platform -> android 文件夹内的 www 文件夹内。打开你的index.js，它应该是这样的:

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }

};

app.initialize();

现在寻找

onDeviceReady: function() {
    app.receivedEvent('deviceready');
},

并将其更改为:

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    checkConnection();
},

同时添加

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

直接在app.initialize();之上

这应该是完整的index.js。只需启动您的应用程序，它就会提醒您网络状态:

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        checkConnection();
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }

};

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


app.initialize();