phonegap contact API的使用

figerDeng

2012-07-10

没事开发一个phonegap通讯录使用：

js如下：

//调用手机通讯录的方法
function queryContactList() 
{ 
     var options = new ContactFindOptions(); 
     var fields=["id","name","displayName", "phoneNumbers","emails"];
     //options.filter=getParameterByName("id"); 
     options.multiple=true ; 
     //调用phonegap的手机通讯信息的方法
     navigator.contacts.find(fields,showContact, onError, options); 
} 
//调用失败的通知
function onError(fail) 
{ 
          alert(fail); 
} 
 //调用成功处理方式
 function showContact(contacts) 
 { 
     var sb=new StringBuffer();
     sb.append("<ul data-role='listview' data-inset='true' data-icon='plus' >");
     var temp=new StringBuffer();
     for (var i=0;i<contacts.length;i++) 
     { 
         var diaplayName=contacts[i].displayName;
         if(diaplayName==''||diaplayName==null){
             diaplayName=contacts[i].name;
             if(diaplayName==''||diaplayName==null){
                 diaplayName=contacts[i].nickname;
                 if(diaplayName==''||diaplayName==null){
                     diaplayName=contacts[i].givenName+" "+contacts[i].familyName;
                 }
             }
         }
         var phoneNumber=contacts[i].phoneNumbers[0].value;
         temp.append("<li><div class='ui-grid-a'><div class='ui-block-a'>"+contacts[i].displayName+"</div><div class='ui-block-b'>"+phoneNumber+"</div></div></li>");
     } 
     //当前通讯没有信息的提示信息
     if(temp.toString("")==''){
         temp.append("<li>通讯录没有通讯信息!</li>");
     }
     sb.append(temp.toString(""));
     sb.append("</ul>");
     $("#telContactList").html(sb.toString(""));
     $("div[data-role=content] ul").listview(); 
}

utils.js代码如下：

//模仿java的StringBuffer的javascript的实现
function StringBuffer() { 
	this._strs = new Array; 
} 
StringBuffer.prototype.append =function(str) { 
	this._strs.push(str); 
}; 
StringBuffer.prototype.toString = function(separate) { 
	return this._strs.join(separate); 
};

html页面如下：

<!DOCTYPE html> 
<html> 
	<head> 
	<title>通讯录信息</title> 
   	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no"/>
	<script  src="jquery.mobile/jquery-1.6.4.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.0.1.js"></script>
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.css" />
	<script src="phonegap-1.4.1.js"></script>
	<script src="jquery.mobile/contact.js"></script>
	<script src="jquery.mobile/utils.js"></script>
	<script>
	  document.addEventListener("deviceready", onDeviceReady, false);
	  function onDeviceReady() {
	      queryContactList();
	  }
	</script>
</head> 
 <body>
			<div  data-role="page" id="mainTrainIndex" data-theme="b"   >
			         <!-- header -->
					<div data-role="header"   data-position="fixed"  > 
						<h1>通讯录信息</h1>
					</div>
					<!-- content -->
					<div data-role="content"  data-theme="b"  >
					     <div  id="telContactList"></div>
			        </div>
		</div>	
	</body>
</html>

phonegap contacts