用於wifi檢測和連接的離子項目

我想爲wifi網絡檢測創建一個離子項目。我遇到了一些插件，如wifi wifi，cordova插件診斷，以檢查wifi連接，還有cordova插件熱點。但我應該如何將這些插件包含到我的離子項目中。我應該創建一個空白離子項目來添加這些插件，或者我應該如何將這些插件放到我的index.html和app.js文件中。請有人幫助我，因爲我是新手。用於wifi檢測和連接的離子項目

範例項目：

的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> 

    <!--ngCordova 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"> 

    <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 into Wifi</h1> 
        <h1 ng-show = "! isOnline">I'm out off Wifi</h1> 
       </ion-toggle> 
      </div> 
     </div> 
     </ion-content> 
    </ion-pane> 
    </body> 
</html>

app.js，我包括插件（ngCordova）

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

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

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(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 onloine 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); 
});

現在怎麼寫檢查WiFi檢測和連接。我使用的插件是cordova-network-information

來源

2016-06-07 learner

只需創建一個新項目並將這些插件添加爲「ionic plugin add plugin_name」 – Atula

您是否使用此https://github.com/apache/cordova-plugin-network-information。如果沒有，那麼分享插件鏈接 – Atula

你有一個教程。你還需要什麼。你沒有得到期望的結果與本教程或有什麼你不明白 – Atula

選擇一個模板從（空白，側菜單，標籤等）開始。使用ionic start [name] [templateName]步驟創建您的新項目，並通過調用ionic plugin add [plugin]添加所需的插件。現在閱讀插件的文檔，並開始執行他們經常在他們的github回購中展示的示例。然後修改您的需求。

來源

2016-06-07 11:34:42 iCediCe

用於wifi檢測和連接的離子項目

回答

相關問題