如何动态获取手机联系人信息
框架选择为比较流行的JQuery Mobile
添加cordova插件:cordova plugin add cordova-plugin-contacts
一、html文件代码
- 为了提高页面加载速度,html代码建议尽量写简洁,为此我采用动态加载列表的方法来实现。
- 代码为:
<div data-role="content"> //创建一个容器
<ul data-role="listview" id="listv" data-filter="true"> //创建列表项,data-filer=“true”添加一个搜索框
</ul>
</div>
- 注:引用JQ Mobile时,必须按顺序先导入jQ文件,再导入JQ Mobile文件。
二、js文件代码
document.addEventListener("deviceready",onDeviceReady,false);
dfunction onDeviceReady(){
console.log("ready...");
$(document).on("pageshow","#page1",function(){ console.log("page2.ok...");
addList();
}); //#page1为页面id,加载成功后调用addList()函数
$("#listv").on("click", "li a:nth-of-type(2)", function () { //打电话
var phone = $(this).prev().children("p").html();
window.plugins.CallNumber.callNumber(onsuccess, onerror, phone, true);
function onsuccess() { console.log("ok..."); }
function onerror() { console.log("error..."); }
});
function addList(){
$("#listv").empty(); //清空列表,重新加载
console.log("addList.ok...");
var fields=["displayName"];
var options=new ContactFindOptions();
options.filter="";
options.multiple=true;
navigator.contacts.find(fields,onsuccess,onerror,options);
function onsuccess(contacts){
for(var i=0;i<contacts.length;i++){
var name=contacts[i].name.familyName+contacts[i].name.givenName;
if(contacts[i].phoneNumbers!==null){
var phone=contacts[i].phoneNumbers[0].value;
$("#listv").prepend("<li><a href=><h1>"+name+"</h1><p>"+phone +"</p></a><a href='' data-icon='phone'></a></li>");
}
}
$("#listv").listview("refresh"); //刷新列表
}
function onerror(){console.log("error...");}
}