堆棧內存溢出
  簡體   English   中英

Cordova網絡信息插件中未定義連接

[英]Connection is not defined in cordova network information plugin

 原文  2015-08-25 10:49:27  0   3    android/ cordova/ ionic-framework/ ionic

問題描述

我跟着這篇文章：

獲取 android的離子應用程序中的設備的網絡信息 。

它在瀏覽器上工作正常但是當我在android手機中安裝編譯的apk時，它會出現錯誤，指出Reference error : Connection is not defined. 在我使用$cordovaNetwork.isOnline();

我一直在摸不着頭腦，做了我應有的研究，嘗試按照建議的順序卸載和安裝，但沒有幫助。

幫我解決這個問題。 這個問題可能不是代碼的問題，可能需要一些聰明的修復才能使其正常工作。

這里正在討論同樣的問題，但我還沒有真正理解給定的代碼來自何處。

index.html： 

<!DOCTYPE html>
<html ng-app="starter" >
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <!--   <link href="lib/ionic/css/angular-datepicker.min.css" rel="stylesheet"> -->
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!-- angular date picker css-->
    <link href="lib/datePicker/css/angular-pickadate.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/highcharts-ng.js"></script>
    <script src="lib/ionic/js/jquery.min.js"></script>
    <script src="lib/ionic/js/highcharts.js"></script>
     <script src="lib/ionic/js/ngStorage.min.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>



    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
       <script src="js/controllers.js"></script>





  </head>
  <body ng-controller="LoginCtrl">

     <ion-nav-bar class="mob-bar-balanced">
     <!--  <ion-nav-back-button>
      </ion-nav-back-button> -->
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </body>
</html>

app.js： 

app.factory('ConnectivityMonitor', ['$rootScope', '$cordovaNetwork', function($rootScope, $cordovaNetwork){
  return {
    isOnline: function(){
      if(ionic.Platform.isWebView()){
       $rootScope.online = $cordovaNetwork.isOnline();
        return $cordovaNetwork.isOnline();    
      } else {
        $rootScope.online = navigator.onLine;
        return navigator.onLine;
      }
    },
    isOffline: function(){
      if(ionic.Platform.isWebView()){
        $rootScope.online = $cordovaNetwork.isOnline();   
        return !$cordovaNetwork.isOnline();    
      } else {
        $rootScope.online = navigator.onLine;
        return !navigator.onLine;
      }
    },
    startWatching: function(){
        if(ionic.Platform.isWebView()){

          $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            $rootScope.online =true;
            console.log("went online");
          });

          $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
             $rootScope.online =false;
            console.log("went offline");
          });

        }
        else {

          window.addEventListener("online", function(e) {
            $rootScope.online =true;
            console.log("went online");
          }, false);    

          window.addEventListener("offline", function(e) {
            $rootScope.online =false;
            console.log("went offline");
          }, false);  
        }       
    }
  }
}]);

.config(function($stateProvider,$urlRouterProvider){
  $stateProvider
  .state('Login',{
    url:'/login',
    onEnter:["$state","$localStorage", '$rootScope' , '$ionicViewSwitcher',function($state,$localStorage, $rootScope, $ionicViewSwitcher){
        if((typeof($localStorage.userInfo)!== 'undefined') && (Object.keys($localStorage.userInfo).length !== 0)) {
                       $ionicViewSwitcher.nextTransition('none');
                       $state.go("Deployment");

        }
    }],
    templateUrl:'templates/login.html',
    controller:'LoginCtrl',
    resolve: {
            online: function(ConnectivityMonitor){
                return ConnectivityMonitor.isOnline();
        }
      }
  })

3 個解決方案

解決方案1
 8 已采納  2015-08-25 15:56:15

我不知道你提到的教程，但是，你可能想查看我寫的帖子，它逐步告訴你應該放置一些代碼的位置和原因（如果你是的話可能會有用）剛開始使用Ionic）： http ： //www.nikola-breznjak.com/blog/codeproject/check-network-information-change-with-ionic-famework/ 。

另外，我在Github上免費提供了示例代碼： https ： //github.com/Hitman666/IonicNetworkInfo 。 您可以下載該項目（如果您不想自己完成這些步驟），請為您的設備構建它並在設備上進行測試。

以下是博文中的步驟：

通過執行以下操作啟動新的Ionic項目： 

ionic start IonicNetworkInfo blank

然后，將目錄更改為新創建的IonicNetworkInfo： 

cd IonicNetworkInfo

使用Bower安裝ngCordova： 

bower install ngCordova

如果您有可能沒有安裝bower，可以使用npm安裝它： 

npm install bower -g

在您喜歡的編輯器中打開www / index.html文件，並添加對ngCordova的引用（就在cordova.js腳本上方）： 

<!-- This is what you should add, the cordova below you'll already have -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

通過在終端/命令提示符中執行以下命令來安裝ngCordova網絡插件（您應該從應用程序的根目錄執行此操作;因此，在我們的示例中為IonicNetworkInfo目錄）： 

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

要檢查是否已成功安裝插件，可以運行以下命令（從根目錄 - 我將不再重復此操作;當我說你應該從終端/命令提示符運行一些命令時，在這種情況下，表示從應用程序的根目錄）： 

cordova plugin list

您應該看到以下輸出： 

> cordova plugin list                                                                                                                           
com.ionic.keyboard 1.0.4 "Keyboard"
org.apache.cordova.network-information 0.2.15 "Network Information"

打開www / js / app.js文件並將ngCordova添加到依賴項列表中，這樣第一行基本上如下所示： 

angular.module('starter', ['ionic', 'ngCordova'])

在名為MyCtrl的www / js / app.js文件中創建一個新控制器，其中包含以下內容： 

.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
    document.addEventListener("deviceready", function () {

        $scope.network = $cordovaNetwork.getNetwork();
        $scope.isOnline = $cordovaNetwork.isOnline();
        $scope.$apply();

        // listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            $scope.isOnline = true;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

        // listen for Offline event
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
            console.log("got offline");
            $scope.isOnline = false;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

  }, false);
})

在此控制器中，您可以在deviceready事件上附加事件偵聽器（因為可能是此代碼運行時設備尚未初始化）並且您獲取網絡信息： 

$cordovaNetwork.getNetwork();

有關您連接到互聯網的天氣的信息可通過以下行獲得： 

$scope.isOnline = $cordovaNetwork.isOnline();

然后，您注冊兩個事件$ cordovaNetwork：online和$ cordovaNetwork：online，當設備聯機/離線時觸發。 在其中，您只需更新$ scope變量（）。 僅供參考，www / js / app.js文件的全部內容應為： 

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaNetwork, $rootScope) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

  });
})

.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
    document.addEventListener("deviceready", function () {

        $scope.network = $cordovaNetwork.getNetwork();
        $scope.isOnline = $cordovaNetwork.isOnline();
        $scope.$apply();

        // listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
            $scope.isOnline = true;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

        // listen for Offline event
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
            console.log("got offline");
            $scope.isOnline = false;
            $scope.network = $cordovaNetwork.getNetwork();

            $scope.$apply();
        })

  }, false);
});

在index.html文件中，在ion-content標簽內部粘貼以下內容： 

<div class="card">
    <div class="item item-text-wrap">
        <h1>Network: {{network}}</h1>
    </div>
</div>


<div class="card">
    <div class="item item-text-wrap">
        <ion-toggle ng-model="isOnline" ng-checked="item.checked">
            <h1 ng-show="isOnline">I'm online</h1>
            <h1 ng-show="! isOnline">I'm offline</h1>
        </ion-toggle>
    </div>
</div>

基本上我們在這里做的是顯示網絡變量的內容（通過控制器附加到$ scope）。 此外，通過使用離子切換組件，我們顯示“我在線”/“我離線”通知。

僅供參考，整個index.html文件的內容應如下所示： 

    <!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></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="MyCtrl">

    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>

        <ion-content padding="true">
            <div class="card">
                <div class="item item-text-wrap">
                    <h1>Network: {{network}}</h1>
                </div>
            </div>

            <div class="card">
                <div class="item item-text-wrap">
                    <ion-toggle ng-model="isOnline" ng-checked="item.checked">
                        <h1 ng-show="isOnline">I'm online</h1>
                        <h1 ng-show="! isOnline">I'm offline</h1>
                    </ion-toggle>
                </div>
            </div>

        </ion-content>
    </ion-pane>
</body>
</html>

為了測試此應用程序，您應該在您的設備上運行它（因為您無法在iOS模擬器中禁用網絡）。 如果您將Android設備插入計算機（以及所有適當的SDK），則可以運行以下命令以使您的應用在Android設備上運行： 

ionic build android && ionic run android

解決方案2
 1  2017-03-27 05:09:58

也許你還沒有安裝Network-Plugin。 請檢查一下。

解決方案3
 0  2016-12-26 18:21:54

現在，我認為這將是一個更好的使用方法 

$ionicPlatform.ready(function()  {
     $scope.network = $cordovaNetwork.getNetwork();
     $scope.isOnline = $cordovaNetwork.isOnline();

     $scope.$apply();
});

而不是document.addEventListener（“deviceready”，function（）{

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 android 上的cordova-plugin-network-information 返回 connection.type = NONE 即使有 4G 連接 Cordova網絡信息插件-未處理案例 Cordova-plugin-network-information無法正常工作 如何在Cordova中使用網絡連接插件 cordova-plugin-network-information隨MobileFirst V8.0產生ClassNotFoundException Ionic Cordova Network插件錯誤 Phonegap / Cordova 3 Android：未定義連接 Cordova插件可檢測互聯網連接 PhoneGap Cordova插件Google Maps-插件未定義 安裝cordova.network-information插件后離線時應用程序停止工作（即使應用程序什么也不做）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM