2015-12-19 59 views
0

我是新來的電話差距,並建立一個命令行界面(CLI)的Android應用程序,但當功能加載提醒我,如果手機在線或脫機失敗。以下是我如何安裝模塊的代碼和細節。PhoneGap在線和離線模式

我的問題是我得到的最後一個警報是「OK58」,那麼手機只是繼續加載和加載。

Javascript代碼

功能onDeviceReady() {

"use strict"; 
alert("ok55"); 
document.addEventListener("online", onOnline, false); 
document.addEventListener("offline", onOffline, false); 

alert("ok58"); 


//try{ 
    var networkState = navigator.connection && navigator.connection.type; 

//的setTimeout(函數(){ = networkState navigator.connection & & 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.NONE]  = 'No network connection'; 

     alert('Connection type: ' + states[networkState]); 
    //}, 500); 
    // }catch(e){ 
    // alert(e); 
// $.each(navigator, function(key, value){ 
    //  alert(key+' => '+value); 
// }); 
// } 

alert("hello"); 

我的html標題。上面的代碼包含在common.js

<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline'; media-src *"> 
    <!-- 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" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>Eurotech</title> 
    <link rel="stylesheet" href="css/style_signiture.css"/> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css"/> 
    <script src="cordova.js" type="text/javascript"></script> 
    <script src="js/phonegap-nfc-0.3.0.js"></script> 
    <script src="js/nfc.js"></script> 
    <script src="js/common.js"></script>  
    <script src="js/jquery-1.7.1.min.js"></script> 
    <script src="js/jquery.ajaxmanager.js"></script> 
    <script src="js/jqm.page.params.js"></script> 
    <script src="js/jquery.mobile-1.1.0.min.js"></script> 
    <script src="js/task.js"></script> 

    <script src="js/modernizr.custom.34982.js"></script> 
    <script src="js/application.js"></script> 
    <script src="js/signatureCapture.js"></script> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
</head> 

在我的config.xml文件中,我有以下內容包含

<plugin name="cordova-plugin-whitelist" version="1" /> 
<plugin name="org.apache.cordova.network-information" spec="0.2.15" source="pgb" /> 
<plugin name="NfcPlugin" value="com.chariotsolutions.nfc.plugin.NfcPlugin"/> 

而且

<gap:plugin name="cordova-plugin-dialogs" source="npm" /> 
<gap:plugin name="org.apache.cordova.network-information" version="0.2.15" /> 

我通過使用

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

我的命令行安裝的插件想想那就是一切。我怎樣才能更好地調試?任何想法什麼是錯的?

回答

2

你有一些錯字在你的代碼,這應該工作(未經測試):

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.NONE]  = 'No network connection'; 

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

所有設備的要求是事件驅動,所以把它們放在超時是沒有意義的。

請閱讀文檔https://www.npmjs.com/package/cordova-plugin-network-information

對於調試安裝https://www.npmjs.com/package/cordova-plugin-console,那麼你可以在SDK和/或瀏覽器開發者信息中看到輸出。使用適用於iOS的Safari和適用於Android的Chrome。

如果你有一箇舊的Android也可以使用weinre進行調試:https://people.apache.org/~pmuellr/weinre-docs/latest/

更新:

在這裏,你有一個工作的例子,在iPad上測試9.2。

var app = { 
    initialize: function() { 

     document.addEventListener("deviceready", app.onDeviceReady, false); 
     document.addEventListener("online", app.onOnline, false); 
     document.addEventListener("offline", app.onOffline, false); 

    }, onDeviceReady: function() { 

     alert("App is started"); 

     app.getNetworkState(); 

    }, getNetworkState: function() { 

     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.NONE] = "No network connection"; 

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

    }, onOnline: function(){ 

     alert("Device is online"); 

     app.getNetworkState(); 

    }, onOffline: function(){ 

     alert("Device is offline"); 

    } 
}; 

app.initialize(); 

如果這不起作用,那麼您的cordova/plugin安裝有問題。祝你好運。 ;-))

+0

您的更改確實使屏幕停止變白,但我從來沒有得到但仍然讓頁面繼續加載。我將嘗試您的調試技巧。謝謝 –

+0

你的代碼中有兩個事件監聽器:在線和離線。您的代碼中的onOnline和onOffline函數是否?否則,你會得到一個錯誤。你應該把事件監聽器放在設備就緒事件之外。 – Joerg

+0

var networkState = navigator.connection.type;它不會超過這一點。我認爲插件沒有正確配置? –