一尘不染

Ionic:使用Cordova检查Internet连接

angularjs

我正在研究Ionic Framework,并在使用Apache Cordova Network
API
来检测AndroidApp中的互联网连接时遇到问题。我参考了教程,并创建了一个演示项目,该项目运行良好。

我已按照以下步骤操作。[来自教程]

  1. ionic start testApp sidemenu

  2. ionic platform add android

  3. 打开 testApp/www/js/app.js

  4. 复制粘贴此代码

        if(window.Connection) {

      if(navigator.connection.type == Connection.NONE) {
          alert('There is no internet connection available');
      }else{
          alert(navigator.connection.type);
      }
    }else{
          alert('Cannot find Window.Connection');
    }
  1. 安装Cordova插件 cordova plugin add org.apache.cordova.network-information

  2. 建立 ionic build android

  3. ionic run android

这很好

问题

  1. www从复制粘贴mainprojecttestApp并执行步骤6和7

我收到警报 Cannot find Window.Connection

之后 复制粘贴app.js这个样子的

    .run(function($ionicPlatform) {
      $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) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
        // check internet connection
        //alert(window.Connection);
        alert('Hi')
        try {
           alert('Naviagtor says'+navigator.connection.type);
         }
        catch(err) {
           alert( 'Error '+ err.message) 
           //here i get 'Error cannot read property type of undefined'
         }

    if(window.Connection) {
        if(navigator.connection.type == Connection.NONE) {
            alert('There is no internet connection available');
        }else{
            alert(navigator.connection.type);
        }
    }else{
        alert('Cannot find Window.Connection');
    }

      });
    })

当我将我的粘贴app.js并粘贴controllers.jstestApp/www/js目录的那一刻,整个事情都崩溃了。

非常感谢调试方面的任何帮助。

谢谢,

注意

我有cordova.jsindex.html

我已经重新安装platformsplugins复制后也是如此。


阅读 395

收藏
2020-07-04

共1个答案

一尘不染

我通过使用ngcordova解决了类似的问题。它为实现promise的插件提供了一个有角度的包装器。

当您尝试调用Cordova插件时,它们通常还没有准备好,使用promise接口可以避免出现未定义的错误。

我从此处的网络插件的ngcordova页中窃取了该示例。

    module.controller('MyCtrl', function($scope, $rootScope, $cordovaNetwork) {

     document.addEventListener("deviceready", function () {

        var type = $cordovaNetwork.getNetwork()

        var isOnline = $cordovaNetwork.isOnline()

        var isOffline = $cordovaNetwork.isOffline()


        // listen for Online event
        $rootScope.$on('networkOffline', function(event, networkState){
          var onlineState = networkState;
        })

        // listen for Offline event
        $rootScope.$on('networkOffline', function(event, networkState){
          var offlineState = networkState;
        })

      }, false);
    });
2020-07-04