Cordova - 聯絡人

此外掛用於訪問裝置的聯絡人資料庫。在本教程中，我們將向您展示如何建立、查詢和刪除聯絡人。

步驟 1 - 安裝聯絡人外掛

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

步驟 2 - 新增按鈕

該按鈕將用於呼叫createContact函式。我們將其放置在index.html檔案中的div class = "app"中。

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

步驟 2 - 新增事件監聽器

開啟index.js並將以下程式碼片段複製到onDeviceReady函式中。

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

步驟 3A - 回撥函式 (navigator.contacts.create)

現在，我們在裝置上沒有任何儲存的聯絡人。

我們的第一個回撥函式將呼叫navigator.contacts.create方法，我們可以在其中指定新的聯絡人資料。這將建立一個聯絡人並將其分配給myContact變數，但不會將其儲存在裝置上。要儲存它，我們需要呼叫save方法並建立成功和錯誤回撥函式。

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);
   }
	
}

當我們點選新增聯絡人按鈕時，新的聯絡人將被儲存到裝置聯絡人列表中。

步驟 3B - 回撥函式 (navigator.contacts.find)

我們的第二個回撥函式將查詢所有聯絡人。我們將使用navigator.contacts.find方法。options物件具有filter引數，用於指定搜尋過濾器。multiple = true用於返回裝置上的所有聯絡人。field鍵用於按displayName搜尋聯絡人，因為我們在儲存聯絡人時使用了它。

設定選項後，我們使用find方法查詢聯絡人。對於找到的每個聯絡人，都會觸發警報訊息。

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);
   }
	
}

當我們按下查詢聯絡人按鈕時，將觸發一個警報彈出視窗，因為我們只儲存了一個聯絡人。

步驟 3C - 回撥函式 (刪除)

在此步驟中，我們將再次使用find方法，但這次我們將設定不同的選項。options.filter設定為搜尋要刪除的測試使用者。contactfindSuccess回撥函式返回我們想要的聯絡人後，我們將使用remove方法將其刪除，該方法需要其自己的成功和錯誤回撥函式。

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);
   }
	
}

現在，我們只在裝置上儲存了一個聯絡人。我們將手動新增一個以向您展示刪除過程。

現在，我們將點選刪除聯絡人按鈕以刪除測試使用者。如果我們再次檢查聯絡人列表，我們將看到測試使用者不再存在。