动态获取联系人信息Cordova移动应用开发实战

如何动态获取手机联系人信息

框架选择为比较流行的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...");}
}