Question

我想创建一个用于wifi网络检测的离子项目。我遇到了一些插件，如 wifiwizards，用于检查wifi连接的cordova插件诊断以及cordova插件热点。但是我应该如何将这些插件包含在我的离子项目中。我应该创建一个空白离子项目来添加这些插件，或者我应该如何将这些插件放到 index.html 和 app.js 文件中。请有人帮助我，因为我是这些人的新手。

示例项目：

的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

Answer 1

选择要开始的模板（空白，侧面菜单，标签等）。使用ionic start [name] [templateName]步骤创建新项目，然后通过调用ionic plugin add [plugin]添加所需的插件。现在阅读插件的文档，首先实现他们经常在github repo中显示的示例。然后根据您的需要进行修改。

用于wifi检测和连接的离子项目

1 个答案: