it-swarm.com.de

Ionic/Cordova: Wie lassen sich Cordova-Plugins in vorhandene Ionic-Projekte integrieren?

Ich habe ein Ionic-Projekt, bei dem ich das Cordova Camera Plugin benötige (das ich nun erfolgreich installiert habe). In meinem Projekt ist die Kamera-API jedoch immer noch nicht verfügbar, d. H. Es wird ein Fehler ausgegeben:

ReferenceError: Camera is not defined
at Scope.$scope.takePic 

Wie aktiviere ich die Plugin-APIs, die in einem Ionic-Projekt verwendet werden sollen? Die Dokumentation dazu scheint eher nicht vorhanden oder sehr gut versteckt zu sein.

14
BadmintonCat

Folge diesen Schritten:

1. Fügen Sie ngCordova vor cordova.js ein.

Sie können dieselbe Beschreibung in den Dokumenten finden.

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

2. Fügen Sie Ihr Plugin in die Befehlszeile ein

Sie finden diesen Schritt in den Dokumenten im Abschnitt Ihres spezifischen Plugins .

ionic plugin add org.Apache.cordova.camera

3. Denken Sie daran, dass Cordova während der Arbeit im Browser nicht verfügbar ist.

Bei Verwendung von $cordovaCamera.getPicture ruft die Bibliothek intern navigator.camera.getPicture auf, der bei der Entwicklung im Desktop-Browser nicht verfügbar ist. Weitere Lektüre

Das ngCordova/Ionic-Team arbeitet derzeit arbeitet an Mock / Sie können solche Probleme vermeiden.


Sie können ngCordova hier herunterladen: http://ngcordova.com/docs/install/


Update: Es gibt Ionic Native jetzt ist es wie ngCordova, aber für ES6 und TypeScript.

27
mrzmyr

Öffnen Sie ein Terminal im Stammverzeichnis Ihrer App und fügen Sie das Plugin über hinzu

cordova plugin add org.Apache.cordova.camera

Bearbeiten :
Der neue Befehl lautet: 

cordova plugin rm cordova-plugin-camera //remove
cordova plugin add cordova-plugin-camera //add
6
Clawish

Ich versuche herauszufinden, wie ich mit Cordia Standard-Plugins selbst verwenden kann, aber das ionic-Team hat kürzlich ngCordova erstellt - einen eckigen Wrapper für gängige Cordova-APIs, der die Camera-API enthält, die Sie verwenden möchten. Ich würde vorschlagen, das zu verwenden: siehe ihre Dokumente für weitere Informationen.

4
premiumFrye

Dies ist ein häufiges Problem beim Testen in einem Browser: http://ngcordova.com/docs/common-issues/

1
Fourat

Sie können das Plugin installieren, indem Sie Folgendes ausführen: 

$ cordova plugin add org.Apache.cordova.camera

Nachdem Sie das Plugin installiert haben, können Sie die Kamera-API von Ihrem Javascript aus verwenden:

function takePicture() {
  navigator.camera.getPicture(function(imageURI) {

    // imageURI is the URL of the image that we can use for
    // an <img> element or backgroundImage.

  }, function(err) {

    // Ruh-roh, something bad happened

  }, cameraOptions);
}

Dadurch wird der Benutzer aufgefordert, ein Foto aufzunehmen, und die lokale URL des Bildes wird zurückgegeben, die Sie dann innerhalb eines Tags oder für ein CSS-Hintergrundbild verwenden können.

Sie können den folgenden Code für einen einfachen Wrapper über das Camera-Plugin verwenden, der das asynchrone Aufnehmen von Fotos erleichtert:

module.factory('Camera', ['$q', function($q) {

  return {
    getPicture: function(options) {
      var q = $q.defer();

      navigator.camera.getPicture(function(result) {
        // Do any magic you need
        q.resolve(result);
      }, function(err) {
        q.reject(err);
      }, options);

      return q.promise;
    }   } }]);

Diese Factory kann in Ihren Controllern folgendermaßen verwendet werden:

.controller('MyCtrl', function($scope, Camera) {

  $scope.getPhoto = function() {
    Camera.getPicture().then(function(imageURI) {
      console.log(imageURI);
    }, function(err) {
      console.err(err);
    });
  };

Dadurch wird die Kamera geöffnet, wenn getPhoto () aufgerufen wird (z. B. durch Klicken auf eine Schaltfläche).

Je nachdem, wie Sie die Daten von der Kamera abrufen und in Ihrem Angular-Markup verwenden, müssen Sie möglicherweise Bild-URLs auf die Positivliste setzen, damit Angular file: //-URLs zulässt (wenn Sie beispielsweise ng-src für ein Tag verwenden):

module.config(function($compileProvider){
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
0
Harkedian

Sie müssen Camera wie folgt in den Controller injizieren:

.controller('MyCtrl', function($scope, Camera) {

Beachten Sie, dass vor Camera kein Dollarzeichen steht. Dies sollte wirklich expliziter dokumentiert werden.

Außerdem müssen Sie Ihren services.js eine Factory hinzufügen:

.factory('Camera', ['$q', function($q) {

  return {
    getPicture: function(options) {
      var q = $q.defer();

      navigator.camera.getPicture(function(result) {
        // Do any magic you need
        q.resolve(result);
      }, function(err) {
        q.reject(err);
      }, options);

      return q.promise;
    }
  }
}])
0
Chad

Wechseln Sie in das Projektverzeichnis.

Führen Sie diesen Befehl aus: 

$ ionische Integrationen ermöglichen Cordova - Quiet

(Hoffe das hilft anderen.)

0
RS. Utsha