Cordova - Kontakte

Dieses Plugin wird für den Zugriff auf die Kontaktdatenbank des Geräts verwendet. In diesem Tutorial zeigen wir Ihnen, wie Sie Kontakte erstellen, abfragen und löschen.

Schritt 1 - Installieren Sie das Kontakt-Plugin

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincontacts

Schritt 2 - Hinzufügen von Schaltflächen

Die Schaltfläche wird zum Aufrufen der verwendet createContactFunktion. Wir werden es in diediv class = "app" im index.html Datei.

<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>

Schritt 2 - Ereignis-Listener hinzufügen

Öffnen index.js und kopieren Sie das folgende Code-Snippet in das onDeviceReady Funktion.

document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);

Schritt 3A - Rückruffunktion (navigator.contacts.create)

Jetzt sind keine Kontakte mehr auf dem Gerät gespeichert.

Unsere erste Rückruffunktion ruft die auf navigator.contacts.createMethode, mit der wir die neuen Kontaktdaten angeben können. Dadurch wird ein Kontakt erstellt und dem zugewiesenmyContactvariabel, wird aber nicht auf dem Gerät gespeichert. Um es zu speichern, müssen wir die anrufensave Methode und erstellen Sie Erfolgs- und Fehlerrückruffunktionen.

function createContact() {
   var myContact = navigator.contacts.create({"displayName": "Test User"});
   myContact.save(contactSuccess, contactError);
    
   function contactSuccess() {
      alert("Contact is saved!");
   }
	
   function contactError(message) {
      alert('Failed because: ' + message);
   }
	
}

Wenn wir auf klicken ADD CONTACT Schaltfläche, neuer Kontakt wird in der Gerätekontaktliste gespeichert.

Schritt 3B - Rückruffunktion (navigator.contacts.find)

Unsere zweite Rückruffunktion fragt alle Kontakte ab. Wir werden die verwendennavigator.contacts.findMethode. Das Optionsobjekt verfügt über einen Filterparameter, mit dem der Suchfilter angegeben wird.multiple = truewird verwendet, da wir alle Kontakte vom Gerät zurückgeben möchten. Dasfield Schlüssel zum Suchen von Kontakten nach displayName da haben wir es beim speichern von kontakt benutzt.

Nachdem die Optionen festgelegt wurden, verwenden wir findMethode zum Abfragen von Kontakten. Die Warnmeldung wird für jeden gefundenen Kontakt ausgelöst.

function findContacts() {
   var options = new ContactFindOptions();
   options.filter = "";
   options.multiple = true;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
    
   function contactfindSuccess(contacts) {
      for (var i = 0; i < contacts.length; i++) {
         alert("Display Name = " + contacts[i].displayName);
      }
   }
	
   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

Wenn wir die drücken FIND CONTACT Klicken Sie auf die Schaltfläche, wird ein Alarm-Popup ausgelöst, da wir nur einen Kontakt gespeichert haben.

Schritt 3C - Rückruffunktion (löschen)

In diesem Schritt werden wir die Suchmethode erneut verwenden, aber diesmal werden wir verschiedene Optionen festlegen. Dasoptions.filter ist eingestellt, um das zu suchen Test Userwas gelöscht werden muss. Nach demcontactfindSuccess Die Rückruffunktion hat den gewünschten Kontakt zurückgegeben. Wir löschen ihn mithilfe von remove Methode, die eigene Erfolgs- und Fehlerrückrufe erfordert.

function deleteContact() {
   var options = new ContactFindOptions();
   options.filter = "Test User";
   options.multiple = false;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {
      var contact = contacts[0];
      contact.remove(contactRemoveSuccess, contactRemoveError);

      function contactRemoveSuccess(contact) {
         alert("Contact Deleted");
      }

      function contactRemoveError(message) {
         alert('Failed because: ' + message);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

Jetzt ist nur noch ein Kontakt auf dem Gerät gespeichert. Wir werden manuell eine weitere hinzufügen, um Ihnen den Löschvorgang zu zeigen.

Wir werden jetzt auf klicken DELETE CONTACT Schaltfläche zum Löschen der Test User. Wenn wir die Kontaktliste erneut überprüfen, werden wir sehen, dass dieTest User existiert nicht mehr.