PhoneGap的學習第三講-通訊錄資訊的擷取

PhoneGap把相關通訊錄的資訊封裝在一個Contact類中，是以在對通訊錄進行操作前首先要建立一個Contact對象。

這個例子不僅可以學習如何操作通訊錄，而且還可以學習如何在PhoneGap中使用插件，在實際項目中有時會用到，也可以用原生的擷取後傳到js程式中

建立一個Contact對象
利用find()方法查詢通訊錄
Contact對象的屬性
聯系人的建立、讀取、修改和删除
ContactField對象的深入研究

前言為了更好的示範，我在index.html中建立了一個目錄，效果見下圖：

PhoneGap的學習第三講-通訊錄資訊的擷取

index.html代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--PhoneGap練習一-->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>程式加載事件的使用</title>
		<!--引入PhoneGap腳本檔案-->
		<script type="text/javascript" src="../cordova.js"></script>
		<script type="text/javascript">
			//聲明當裝置加載完畢時的回調函數onDeviceReady
			document.addEventListener("deviceready",onDeviceReady,false);
			//當裝置加載完畢後就會執行該函數
			function onDeviceReady(){
				//當函數執行後，彈出對話框告訴使用者裝置已經加載完畢了
				//alert("裝置加載完畢！");
				//一般來說需要保證在裝置加載完畢之後再去執行其他操作
			}
		</script>
	</head>
	<body>
		<h3>一、PhoneGap學習之通信錄資訊的擷取</h1>
		<a href="contact.html" target="_blank" rel="external nofollow" >1.通訊錄資訊的擷取</a>
		<br/>
		<a href="contactFind.html" target="_blank" rel="external nofollow" >2.利用find()方法查詢通訊錄</a>
		<br/>
		<a href="contactCreate.html" target="_blank" rel="external nofollow" >3.利用create()方法建立聯系人</a>
		<br/>
		<a href="contactAllTake.html" target="_blank" rel="external nofollow" >4.聯系人的增删改查</a>
		<br/>
		<a href="contactField.html" target="_blank" rel="external nofollow" >5.ContactField對象的深入研究</a>
		
	</body>
</html>

說明：上面代碼中document.addEventListener("deviceready",onDeviceReady,false);是給頁面添加一個監聽事件。

"deviceready"為事件的内容，這裡是裝置加載完畢監聽

onDeviceReady為在頁面加載完畢後執行的回調函數。加載完畢執行比較安全，不容易出異常

一、通訊錄資訊的擷取

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--建立一個contact對象-->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--引入PhoneGap腳本檔案-->
		<script type="text/javascript" src="../cordova.js"></script>
		<script type="text/javascript">
			document.addEventListener("deviceready",onDeviceReady,false);
			function onDeviceReady(){
				//建立一個新的Contact對象
				var myContact=navigator.contacts.create({"displayName":"劉德華"});
				//設定Contact的gender屬性
				myContact.gender="男";
				//用對話框顯示獲得的Contact對象
				alert("聯系人"+myContact.displayName+"的性别是"+myContact.gender);
			}
		</script>
	</head>
	<body>
		<h1>PhoneGap中的聯系人</h1>
		<p>建立一個Contact對象</p>
	</body>
</html>

說明：本節最重要的知識點是navigator.contacts.create(properties)，如果想操作通訊錄的話首先要用這個語句建立一個Contact對象

，運作效果如下

PhoneGap的學習第三講-通訊錄資訊的擷取

二、利用find()方法查詢通訊錄

代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--利用find()方法查詢通訊錄-->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--引入PhoneGap腳本檔案-->
		<script type="text/javascript" src="../cordova.js"></script>
		<script type="text/javascript">
			var isReady=0;
			document.addEventListener("deviceready",onDeviceReady,false);
			function onDeviceReady(){
				isReady=1;
			}
			//擷取聯系人的結果集
			function onSuccess(contacts){
				for(var i=0;i<contacts.length;i++){
					alert("聯系人是："+contacts[i].displayName);
				}
			}
			//擷取聯系人失敗
			function onError(){
				alert("擷取聯系人失敗");
			}
			function find(){
				if(isReady){
					//查詢資料中含有Cat的聯系人
					//options要查詢的内容
					var options=new ContactFindOptions();
					options.filter="Cat";
					//fields此次查詢的目标字段
					var fields=["displayName","name"];
					navigator.contacts.find(fields,onSuccess,onError,options);
				}
			}
		</script>
	</head>
	<body>
		<h1 οnclick="find()">點選查詢</h1>
		<p>利用find()方法查詢通訊錄</p>
	</body>
</html>

說明：上面代碼講的就是find()方法的使用，navigator.contacts.find()格式和create()是一樣的，這也是PhoneGap插件的引入格式，開頭是以navigator開始，contacts代表的就是我們使用的插件名稱是通訊錄，如果我們要讓手機震動那就得使用notification插件了，這些下篇還會講到，find()是插件中的方法，括号中的參數fields是要查詢聯系人的哪些字段，onSuccess是執行成功的回調函數，onError是執行失敗的回調函數，options是查詢的關鍵字

提前先在手機上建立一個聯系叫Cat，然後運作，結果如下

PhoneGap的學習第三講-通訊錄資訊的擷取

三、利用create()方法建立聯系人

代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--建立聯系人并儲存-->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--引入PhoneGap腳本檔案-->
		<script type="text/javascript" src="../cordova.js"></script>
		<script type="text/javascript">
			var isReady=0;
			document.addEventListener("deviceready",onDeviceReady,false);
			function onDeviceReady(){
				isReady=1;
			}
			function create(){
				if(isReady){
					//建立一個Contact對象
					var contact=navigator.contacts.create();
					contact.displayName="劉德華";
					contact.nickname="劉德華";
					//填充一些字段
					var name=new ContactName();
					name.givenName="劉";
					name.familyName="德華";
					contact.name=name;
					//儲存
					contact.save(onSuccess,onError);
				}
			}
			
			function onSuccess(contacts){
				alert("建立聯系人成功");
			}
			
			function onError(){
				alert("建立聯系人失敗");
			}
		</script>
	</head>
	<body>
		<h1 οnclick="create()">點選建立聯系人</h1>
		<p>利用create()方法建立聯系人</p>
	</body>
</html>

原理很簡單，下面是運作效果：

PhoneGap的學習第三講-通訊錄資訊的擷取

四、聯系人的增删改查

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--聯系人的建立、讀取、修改和删除-->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--引入PhoneGap腳本檔案-->
		<script type="text/javascript" src="../cordova.js"></script>
		<script type="text/javascript">
			var contact1;
			document.addEventListener("deviceready",onDeviceReady,false);
			function onDeviceReady(){
					//建立一個Contact對象
					contact1=navigator.contacts.create();
					contact1.displayName="張學友";
					contact1.nickname="張學友";
					//填充一些字段
					contact1.addrsses="河南";
					var name1=new ContactName();
					name1.givenName="學友";
					name1.familyName="張";
					contact1.name=name1;
					//儲存
					contact1.save(onSuccess,onError);
					
					//建立另一個Contact對象
					var contact2=navigator.contacts.create();
					contact2.displayName="周潤發";
					contact2.nickname="周潤發";
					//填充一些字段
					contact2.addrsses="香港";
					var name2=new ContactName();
					name2.givenName="潤發";
					name2.familyName="周";
					contact2.name=name2;
					contact2.save(onSuccess,onError);
			}

			function cloneContact(){
				//克隆一個聯系人
				var clone=contact1.clone();
				clone.save(onSuccess,onError);
				alert("克隆聯系人的昵稱："+clone.nickname);
			}
			
			function deleteContact(){
				//删除一個聯系人
				contact1.remove(onRemoveSuccess,onRemoveError);
			}

			function onSuccess(contacts){
				alert("建立聯系人成功");
			}
			
			function onError(){
				alert("建立聯系人失敗");
			}
			
			function onRemoveSuccess(){
				alert("删除聯系人成功");
			}
			
			function onRemoveError(){
				alert("删除聯系人失敗");
			}
		</script>
	</head>
	<body>
		<h1>聯系人的建立、讀取、修改和删除</h1>
		<p>建立2個聯系人，克隆第一個，然後删掉第一個建立的聯系人</p>
		<br/>
		<p οnclick="cloneContact()">克隆一個聯系人</p>
		<br/>
		<p οnclick="deleteContact()">删除一個聯系人</p>
	</body>
</html>

運作效果如下：

PhoneGap的學習第三講-通訊錄資訊的擷取

五、ContactField對象的深入研究

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--ContactField對象的深入研究-->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--引入PhoneGap腳本檔案-->
		<script type="text/javascript" src="../cordova.js"></script>
		<script type="text/javascript">
			document.addEventListener("deviceready",onDeviceReady,false);
			function onDeviceReady(){
					//建立一個Contact對象
					var contact=navigator.contacts.create();
					//存儲聯系人電話号碼到ContactField[]數組
					var phoneNumbers=[3];
					phoneNumbers[0]=new ContactField('work','123-456-789',false);
					phoneNumbers[1]=new ContactField('mobile','789-456-123',true);
					//首選項
					phoneNumbers[2]=new ContactField('home','456-123-789',false);
					contact.phoneNumbers=phoneNumbers;
					//存儲聯系人
					contact.save();
					console.log("儲存成功");
					//搜尋聯系人清單，傳回符合條件聯系人的顯示名及電話号碼
					var options=new ContactFindOptions();
					options.filter="";
					filter=["displayName","phoneNumbers"];
					navigator.contacts.find(filter,onSuccess,onError,options);
					console.log("開始查詢");
			}

			function onSuccess(contacts){
				for(var i=0;i<contacts.length;i++){
					console.log("聯系人數量"+contacts.length);
					if(contacts[i].phoneNumbers==null){
						return;
					}
					//顯示電話号碼
					for(var j=0;j<contacts[i].phoneNumbers.length;j++){
						console.log("電話号碼數量"+contacts[i].phoneNumbers.length);
						alert("類型："+contacts[i].phoneNumbers[j].type+"\n"+
							  "值："+contacts[i].phoneNumbers[j].value+"\n"+
							  "首選項:"+contacts[i].phoneNumbers[j].pref);
					}
				}
			}
			
			function onError(){
				alert("查詢失敗");
			}
		</script>
	</head>
	<body>
		<h1>ContactField對象的深入研究</h1>
		<p>在Contact對象中，電話号碼(phoneNumbers)就是一個ContactField類型的數組對象</p>
	</body>
</html>

其實就是添加各個字段，運作效果如下，就截一個圖示範下

PhoneGap的學習第三講-通訊錄資訊的擷取

PhoneGap操作聯系人的内容基本上就這麼多了，在沒有用到聯系人的應用裡不是太實用，下一節比較實用，PhoneGap的消息提示

PhoneGap的學習第三講-通訊錄資訊的擷取

繼續閱讀

PhoneGap3+版本的安裝、配置和使用[圖]下載下傳安裝Ant下載下傳安裝Node.js下載下傳安裝PhoneGap配置使用導入Eclipse更多資訊注意事項

Unity擷取手機通訊錄《一》安卓端

IOS 之通訊錄iOS9.0通路通訊錄---ContactsUI和Contacts

iOS讀取通訊錄功能

私人通訊錄思路

CMake error with move_base_msgs

android通訊錄根據手機号碼查詢姓名

PhoneGap 12 插件開發指南

【Android 仿微信通訊錄導航分組清單-下】自定義View為RecyclerView打造右側索引導航欄IndexBar

【微信小程式】小程式仿通訊錄功能

小程式：通訊錄的實作

開發者如何要iOS使用者權限

Android項目：手機安全衛士（6）—— 手機防盜設定向導（二）Android項目：手機安全衛士（6）—— 手機防盜設定向導（二）

Window-Navigator對象

PhoneGap 學習資料彙總