PhoneGap把相關通訊錄的信息封裝在一個Contact類中,因此在對通訊錄進行操作前首先要創建一個Contact對象。
這個例子不僅可以學習如何操作通訊錄,而且還可以學習如何在PhoneGap中使用插件,在實際項目中有時會用到,也可以用原生的獲取後傳到js程序中
目錄
- 創建一個Contact對象
- 利用find()方法查詢通訊錄
- Contact對象的屬性
- 聯繫人的創建、讀取、修改和刪除
- ContactField對象的深入研究
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">1.通訊錄信息的獲取</a>
<br/>
<a href="contactFind.html">2.利用find()方法查詢通訊錄</a>
<br/>
<a href="contactCreate.html">3.利用create()方法新建聯繫人</a>
<br/>
<a href="contactAllTake.html">4.聯繫人的增刪改查</a>
<br/>
<a href="contactField.html">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對象
,運行效果如下
二、利用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 onclick="find()">點擊查詢</h1>
<p>利用find()方法查詢通訊錄</p>
</body>
</html>
說明:上面代碼講的就是find()方法的使用,navigator.contacts.find()格式和create()是一樣的,這也是PhoneGap插件的引入格式,開頭是以navigator開始,contacts代表的就是我們使用的插件名稱是通訊錄,如果我們要讓手機震動那就得使用notification插件了,這些下篇還會講到,find()是插件中的方法,括號中的參數fields是要查詢聯繫人的哪些字段,onSuccess是執行成功的回調函數,onError是執行失敗的回調函數,options是查詢的關鍵字
提前先在手機上新建一個聯繫叫Cat,然後運行,結果如下
三、利用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 onclick="create()">點擊創建聯繫人</h1>
<p>利用create()方法創建聯繫人</p>
</body>
</html>
原理很簡單,下面是運行效果:
四、聯繫人的增刪改查
代碼如下:
<!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 onclick="cloneContact()">克隆一個聯繫人</p>
<br/>
<p onclick="deleteContact()">刪除一個聯繫人</p>
</body>
</html>
運行效果如下:
五、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的消息提示