Cordova 聯(lián)系人

2018-12-28 14:30 更新

此插件用于訪問設(shè)備聯(lián)系人數(shù)據(jù)庫。在本教程中,我們將向您展示如何創(chuàng)建,查詢和刪除聯(lián)系人。

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

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

步驟2 - 添加按鈕

該按鈕將用于調(diào)用 createContact 函數(shù)。 我們將它放在 index.html 文件中的 div class =“app"中。

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

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

打開 index.js 并將以下代碼段復(fù)制到 onDeviceReady 函數(shù)中。

	
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è)備上存儲(chǔ)任何聯(lián)系人。

Cordova Contact Empty

我們的第一個(gè)回調(diào)函數(shù)將調(diào)用 navigator.contacts.create 方法,我們可以指定新的聯(lián)系人數(shù)據(jù)。這將創(chuàng)建聯(lián)系人并將其分配給 myContact 變量,但不會(huì)存儲(chǔ)在設(shè)備上。要存儲(chǔ)它,我們需要調(diào)用保存方法并創(chuàng)建成功和錯(cuò)誤回調(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);
   }
	
}

當(dāng)我們單擊添加聯(lián)系人按鈕時(shí),新的聯(lián)系人將存儲(chǔ)到設(shè)備聯(lián)系人列表中。

Cordova Contact Create

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

我們的第二個(gè)回調(diào)函數(shù)將查詢所有聯(lián)系人。我們將使用 navigator.contacts.find 方法。 選項(xiàng)對象具有過濾器參數(shù),用于指定搜索過濾器。 multiple = true ,因?yàn)槲覀円祷卦O(shè)備中的所有聯(lián)系人。我們還使用字段鍵通過 displayName 搜索聯(lián)系人,因?yàn)槲覀冊诒4媛?lián)系人時(shí)使用它。

設(shè)置選項(xiàng)后,我們使用 find 方法查詢聯(lián)系人。將為找到的每個(gè)聯(lián)系人觸發(fā)警報(bào)消息。

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

當(dāng)我們按查找聯(lián)系人按鈕時(shí),將觸發(fā)一個(gè)警報(bào)彈出窗口,因?yàn)槲覀冎槐4媪艘粋€(gè)聯(lián)系人。

Cordova Contacts Find

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

在這一步中,我們使用 find 方法,但這次我們將設(shè)置不同的選項(xiàng)。options.filter 設(shè)置為搜索測試用戶,因?yàn)槲覀円獎(jiǎng)h除它。 contactfindSuccess 回調(diào)返回了我們想要的聯(lián)系人后,我們使用需要自己的成功和錯(cuò)誤回調(diào)的 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);
   }
	
}

目前,我們只有一個(gè)聯(lián)系人存儲(chǔ)在設(shè)備上。我們將手動(dòng)添加一個(gè),向您顯示刪除過程。

Cordova Contacts Multiple

現(xiàn)在,您可以點(diǎn)擊刪除聯(lián)系人按鈕刪除測試用戶。如果我們再次檢查聯(lián)系人列表,我們將看到不再有測試用戶。

Cordova Contact Deleted
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號