第1步 - 安裝插件聯(lián)系人

D:\worksp\cordova\CordovaProject>cordova plugin add cordova-plugin-contacts

第2步 - 添加按鈕

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

第2步 - 添加事件監(jiān)聽器

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

步驟3A - 回調(diào)函數(shù)(navigator.contacts.create)

目前，我們沒有在設(shè)備上存儲聯(lián)系人。

第一個回調(diào)函數(shù)將調(diào)用navigator.contacts.create方法，在這里我們可以指定新的聯(lián)系人數(shù)據(jù)。這將創(chuàng)建聯(lián)系人并將其分配給 myContact 變量，但它不會存儲在設(shè)備上。要保存它，我們需要調(diào)用保存方法，并創(chuàng)建成功和錯誤的回調(diào)函數(shù)。

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

當我們單擊ADD CONTACT 按鈕，新聯(lián)系人將被存儲到設(shè)備的聯(lián)系人列表。

步驟3B - 回調(diào)函數(shù)(navigator.contacts.find)

第二個回調(diào)函數(shù)將查詢所有聯(lián)系人。我們將使用navigator.contacts.find方法。options對象具有用于指定搜索過濾器過濾參數(shù)。multiple = true 是因為我們想從設(shè)備返回所有聯(lián)系人。我們還使用通過displayName字段作為鍵，在保存聯(lián)系人后，用它來搜索聯(lián)系人。

該選項設(shè)置后，使用 find 方法來查詢聯(lián)系人。在找到聯(lián)系人時提醒消息將觸發(fā)。

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

當按下FIND CONTACT按鈕提示彈出框?qū)⒈挥|發(fā)，因為我們只有一個聯(lián)系人儲存。

步驟3C - 回調(diào)函數(shù)(刪除)

在這一步中，我們再次使用find方法，但這一次我們會設(shè)置不同的選項。options.filter被設(shè)置為自動搜索測試用戶，因為我們想刪除它。找到成功之后回調(diào) contactfindSuccess 已經(jīng)回到我們想要的聯(lián)系人， 我們通過使用刪除方法需要在成功和錯誤回調(diào)。

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

目前，我們只需要在設(shè)備上存儲一個聯(lián)系人。這里將手動添加一個聯(lián)系人用來演示刪除處理。

現(xiàn)在，可以點擊 DELETE CONTACT 按鈕刪除測試用戶(est User)。如果再次檢查聯(lián)系人列表，我們會看到，已經(jīng)沒有測試用戶( Test User)了。