2014-09-11 16 views
8

Ich baue eine Ionic App in Angular aus und habe noch nie Plugins zum Arbeiten bekommen.Cordova Plugins funktionieren nicht mit Ionic

Als Beispiel habe ich versucht, die Statusbar-Plugin, wie hier beschrieben:

http://ionicframework.com/tutorials/fullscreen-apps/

Aber es zeigt immer noch in meiner app. Ich versuchte:

$ cordova plugin add org.apache.cordova.statusbar 

und dann "Cordova vorzubereiten", "ionic run ios" und immer noch kein Glück.

Die Plugins, die ich aufgelistet zu bekommen, wenn ich

$ cordova plugin list 

com.ionic.keyboard 1.0.2 "Keyboard" 
org.apache.cordova.console 0.2.10 "Console" 
org.apache.cordova.device 0.2.11 "Device" 
org.apache.cordova.statusbar 0.1.7 "StatusBar" 

Typ Ich bin mit Gulp auch. Ich habe einen Ordner, in dem alle meine Entwickler arbeiten, und schlucke bewegt sich und kompiliert es in einen/dist-Ordner, von wo aus es serviert wird. Ich bin mir ziemlich sicher, dass die Plugins perfekt verschoben werden, gibt es irgendwo wo ich die Referenzen überprüfen sollte?

Irgendwelche Ideen, wenn Sie etwas tun müssen, um Cordova Plugins mit Ionic zu verwenden?

+0

Können Sie mehr Informationen über die Schritte geben, die Sie folgen. Es bedeutete, mit Cordova zu arbeiten. Ich vermute, deine Umgebung ist falsch oder du vermisst etwas so wenig. Funktioniert es ohne Plugin? Thnx – engincancan

+0

Ich habe ein bisschen mehr Informationen hinzugefügt, gibt es noch andere Informationen, die Sie zur Diagnose verwenden könnten? –

Antwort

8

Die Antwort darauf war, dass ich hinzufügen

<script src="cordova.js"></script> 

auf meiner Seite, nur über meiner sc Schriften.

Bitte beachten Sie, diese Datei existiert nicht während der Entwicklung, sie wird zur Laufzeit injiziert ... weshalb ich sie lösen könnte. Hoffe das hilft jemandem!

+2

Dieses Problem hat mich letzte Woche geplagt. Vielen Dank! –

1

Ich habe dies auf Android und iPhone-Simulator getestet und funktioniert einwandfrei. Versuchen Sie diesen Code:

angular.module('starter', [ 
    'ionic', 
    'starter.controllers', 
    ... more modules here 
]) 
.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
     if (window.StatusBar) { 
      // org.apache.cordova.statusbar required 
      StatusBar.hide(); 
     } 
    }); 
}) 
.... more code 

EDIT:

$ cordova plugin add org.apache.cordova.statusbar 
$ ionic build ios 
$ ionic run ios 

EDIT II: (Versuchen Sie es mit einem neuen Projekt und iPhone Simulator)

$ ionic start testStatusBar tabs 
$ cd testStatusBar/ 
$ cordova plugin add org.apache.cordova.statusbar 
$ vim www/js/app.js 


Edit this: 
if(window.StatusBar) { 
    // org.apache.cordova.statusbar required 
    // StatusBar.styleDefault(); 
    StatusBar.hide(); 
} 

$ vim www/index.html 

add class="fullscreen" to the <body> element 


$ ionic platform add ios 
$ ionic build ios 
$ ionic emulate ios 
+0

Leider funktioniert das nicht für mich. Hast du noch andere Verweise auf die Plugins in deiner App? –

+0

Mit etwas spielen, und ich bin mir nicht sicher, was anders war, ist die Statusleiste jetzt weißer Text. die grüne Batterie ist immer noch sichtbar vor dem weißen Hintergrund, also ist das nicht ideal, ist das was du bekommst? –

+0

Nach dem Begrüßungsbildschirm, wenn die App gestartet wird, ist die Statusleiste vollständig ausgeblendet (keine Zeit, keine Batterie usw.) – manzapanza

4

Zusätzliche Lösung, wenn einschließlich cordova.js das Problem nicht lösen

Ich habe das gleiche Problem hatte, aber cordova.js wurde bereits in meiner index.html enthalten. window.plugins war immer undefiniert. Dann habe ich festgestellt, dass es eine cordova_plugins.js Datei im Ordner platforms/ios/www gibt.

Hier ist, was ich getan habe:

  1. $ cordova plugin add cordova-plugin-flashlight
  2. $ cordova prepare
  3. hinzugefügt <script src="cordova_plugins.js"></script> direkt nach cordova.js innen index.html

Danach habe ich die window.plugins Variable zugreifen konnte.

TIPP: einen Blick in Ihre cordova_plugins.js nehmen und sich bewusst sein, dass einige Plugins cordova.plugins gebunden sind (zB Keyboard Plugin, siehe unten) andere zu window.plugins angebracht (zB Taschenlampe)

Als Referenz - Meine cordova_plugins.js Datei sieht so aus

cordova.define('cordova/plugin_list', function(require, exports, module) { 
module.exports = [ 
    { 
     "file": "plugins/cordova-plugin-console/www/logger.js", 
     "id": "cordova-plugin-console.logger", 
     "clobbers": [ 
      "cordova.logger" 
     ] 
    }, 
    { 
     "file": "plugins/cordova-plugin-console/www/console-via-logger.js", 
     "id": "cordova-plugin-console.console", 
     "clobbers": [ 
      "console" 
     ] 
    }, 
    { 
     "file": "plugins/cordova-plugin-device/www/device.js", 
     "id": "cordova-plugin-device.device", 
     "clobbers": [ 
      "device" 
     ] 
    }, 
    { 
     "file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js", 
     "id": "cordova-plugin-splashscreen.SplashScreen", 
     "clobbers": [ 
      "navigator.splashscreen" 
     ] 
    }, 
    { 
     "file": "plugins/cordova-plugin-statusbar/www/statusbar.js", 
     "id": "cordova-plugin-statusbar.statusbar", 
     "clobbers": [ 
      "window.StatusBar" 
     ] 
    }, 
    { 
     "file": "plugins/ionic-plugin-keyboard/www/ios/keyboard.js", 
     "id": "ionic-plugin-keyboard.keyboard", 
     "clobbers": [ 
      "cordova.plugins.Keyboard" 
     ], 
     "runs": true 
    }, 
    { 
     "file": "plugins/cordova-plugin-flashlight/www/Flashlight.js", 
     "id": "cordova-plugin-flashlight.Flashlight", 
     "clobbers": [ 
      "window.plugins.flashlight" 
     ] 
    } 
]; 
module.exports.metadata = 
// TOP OF METADATA 
{ 
    "cordova-plugin-console": "1.0.1", 
    "cordova-plugin-device": "1.0.1", 
    "cordova-plugin-splashscreen": "2.1.0", 
    "cordova-plugin-statusbar": "1.0.1", 
    "cordova-plugin-whitelist": "1.0.0", 
    "ionic-plugin-keyboard": "1.0.7", 
    "cordova-plugin-flashlight": "3.0.0" 
} 
// BOTTOM OF METADATA 
}); 
Verwandte Themen