Phonegap联系人获取Contacts HTML5,android

最新推荐文章于 2024-08-19 13:37:11 发布

Andy_2u

最新推荐文章于 2024-08-19 13:37:11 发布

阅读量484

点赞数

分类专栏： Phonegap HTML5 文章标签： phonegap html5

Phonegap 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

Phonegap 获取所有联系人此版本是cordova 3.4的

调用系统的API 经过修改迭代出所有联系人贴上完整代码

文章结尾提供Demo下载

以下介绍的 phonegap contacts 的 API有

methods

Arguments

Object

从建立项目说起:

<1> 在控制台创建一个phonegap工程命令如下

[html]view plaincopy 
   
 phonegap create my-app  
 cd my-app  
 phonegap run android  

<2> 我们从命令行进入到工程目录下的 plugins文件夹

[html]view plaincopy 
   
 cd my-app  
   
 cd plugins  

<3> 现在开始下载插件

[html]view plaincopy 
   
 cordova plugin add org.apache.cordova.contacts  

<4> 添加android 平台工程 (ios把 "android" 替换)

[html]view plaincopy 
   
 cordova platform add android  

<5> 编译android工程

[html]view plaincopy 
   
 cordova build  

至此 contacts 插件已经生成并添加到项目当中去...

现在项目应该有如下文件:

cordova-plugins.js 里面的文件是:

[javascript]view plaincopy 
   
 cordova.define('cordova/plugin_list', function(require, exports, module) {  
 module.exports = [  
     {  
         "file": "plugins/org.apache.cordova.contacts/www/contacts.js",  
         "id": "org.apache.cordova.contacts.contacts",  
         "clobbers": [  
             "navigator.contacts"  
         ]  
     },  
     {  
         "file": "plugins/org.apache.cordova.contacts/www/Contact.js",  
         "id": "org.apache.cordova.contacts.Contact",  
         "clobbers": [  
             "Contact"  
         ]  
     },  
     {  
         "file": "plugins/org.apache.cordova.contacts/www/ContactAddress.js",  
         "id": "org.apache.cordova.contacts.ContactAddress",  
         "clobbers": [  
             "ContactAddress"  
         ]  
     },  
     {  
         "file": "plugins/org.apache.cordova.contacts/www/ContactError.js",  
         "id": "org.apache.cordova.contacts.ContactError",  
         "clobbers": [  
             "ContactError"  
         ]  
     },  
     {  
         "file": "plugins/org.apache.cordova.contacts/www/ContactField.js",  
         "id": "org.apache.cordova.contacts.ContactField",  
         "clobbers": [  
             "ContactField"  
         ]  
     },  
     {  
         "file": "plugins/org.apache.cordova.contacts/www/ContactFindOptions.js",  
         "id": "org.apache.cordova.contacts.ContactFindOptions",  
         "clobbers": [  
             "ContactFindOptions"  
         ]  
     },  
     {  
         "file": "plugins/org.apache.cordova.contacts/www/ContactName.js",  
         "id": "org.apache.cordova.contacts.ContactName",  
         "clobbers": [  
             "ContactName"  
         ]  
     },  
     {  
         "file": "plugins/org.apache.cordova.contacts/www/ContactOrganization.js",  
         "id": "org.apache.cordova.contacts.ContactOrganization",  
         "clobbers": [  
             "ContactOrganization"  
         ]  
     }  
 ];  
 module.exports.metadata =   
 // TOP OF METADATA  
 {  
     "org.apache.cordova.contacts": "0.2.8"  
    }  
 // BOTTOM OF METADATA  
 });  

res/xml 目录下的config.xml

在config.xml 里面有

[html]view plaincopy 
   
 <feature name="Contacts">  
     <param name="android-package" value="org.apache.cordova.contacts.ContactManager" />  
 </feature>  

现在大家只需要将工程导入到eclipse当中使用官方APi语句在javascript中调用

将下方语句考到 assets目录下 www/index.html 当中完全复制过去;

example:

[javascript]view plaincopy 
   
 <!DOCTYPE html>  
 <html>     
 <head>        
  <title>Contact Example</title>      
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>    
  <script type="text/javascript" charset="utf-8">            
   // Wait for device API libraries to load           
   document.addEventListener("deviceready", onDeviceReady, false);        
     // device APIs are available    
   
     function onDeviceReady() {           
     // find all contacts with ' ' in any name field    ,field 如果为空 则返回全部的  
     var options = new ContactFindOptions();      
     options.filter = "";     
     options.multiple = true;  
     /* 
     查找关键字   
     名字: "displayName"  , 
     电话号码:"phoneNumbers"   //ContactField[]类型  
  
     */    
     var fields = ["displayName", "name", "phoneNumbers"];                  
     navigator.contacts.find(fields, onSuccess, onError, options);            }   
       
   
     // onSuccess: Get a snapshot of the current contacts          
     function onSuccess(contacts) {       
   
       // 联系人与电话号码 全写在这儿  
       var aResult = [];      
   
       for (var i = 0; contacts[i]; i++) {                      
         console.log("Display Name = " + contacts[i].displayName);   
   
         if (contacts[i].phoneNumbers && contacts[i].phoneNumbers.length) {  
   
           var contactPhoneList =[];  
   
           for (var j = 0; contacts[i].phoneNumbers[j]; j++) {  
          // alert(contacts[i].phoneNumbers[j].type+"    "+contacts[i].displayName+"---------" + contacts[i].phoneNumbers[j].value );  
   
          contactPhoneList.push(  
          {   
           'type' :  contacts[i].phoneNumbers[j].type,   
           'value' : contacts[i].phoneNumbers[j].value  
         }  
         );  
   
        };          
   
        aResult.push({  
         name:contacts[i].displayName,  
         phone:contactPhoneList  
       });  
   
      };  
         //  
       }  
   
         //迭代获取 联系人和号码  
     for (var i = 0; aResult[i]; i++) {  
       for (var j = 0 ; aResult[i].phone[j]; j++) {  
   
         alert(aResult[i].name +"--------"+ aResult[i].phone[j].type+"-----"+aResult[i].phone[j].value  
           );  
       };  
   
   
     };  
   }     
     // onError: Failed to get the contacts     
     function onError(contactError) {                alert('onError!');            }     
   
     function baozi(){ alert("S1");}  
   
     function intent() {       onDeviceReady();     }      
   
   
   </script>     
 </head>     
 <body>       
  <h1>Example</h1>      
  <p>Find Contacts</p>    
   
  <p><a href="#" οnclick="showAlert(); return false;">Show Alert</a></p>      
  <p><a href="#" οnclick="playBeep(); return false;">Play Beep</a></p>      
  <p><a href="#" οnclick="baozi(); return false;">Vibrate</a></p>    
  <p><a href="#" οnclick="intent(); return false;">Html跳转到android界面</a></p>     
 </body>  
 </html>  

代码详解:

上段代码中的

[html]view plaincopy 
   
 var options = new ContactFindOptions();      
     options.filter = "";     
     options.multiple = true;  
     var fields = ["displayName",  "phoneNumbers"];                  
     navigator.contacts.find(fields, onSuccess, onError, options);            }   

options.filter //过滤条件

options.multiple //是否查询多个

fields //将要查询的关键字

navigator.contacts.find (fields,onSuccess,onError , options ); // 查找操作

其中的onSuccess 是成功找到联系人后返回后将执行的回调

    查找关键字
    名字: "displayName" ,
    电话号码:"phoneNumbers"   //ContactField[]类型

在注释之前是js里面获取所有联系的方式

注释之后是方便测试的弹出窗口

点击 " Html跳转到android界面 " 就会弹出 alert 如下:

迭代弹出所有联系人

至此获取了所有的电话号码

顺道说一句

[javascript]view plaincopy 
   
 if (contacts[i].phoneNumbers && contacts[i].phoneNumbers.length) {}  

上面这一句是判断联系人是否为空

工程下载将phonegap的platforms导入到eclipse中

如果报错clear一下查看导的lib包有没有报错

如果还有错那么就是您选用了 google的API 改成最新版的android API 就好了

如果导入工程遇到问题可以查阅我此篇文章

Blog: http://blog.csdn.net/aaawqqq/article/details/20463183

Phonegap解决错误:Error initializing Cordova:Class not found:

http://blog.csdn.net/aaawqqq/article/details/21243869

Demo 下载地址:

http://download.csdn.net/detail/aaawqqq/7053769

Andy_2u

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Phonegap联系人获取Contacts HTML5,android

Phonegap 获取所有联系人此版本是cordova 3.4的调用系统的API 经过修改迭代出所有联系人贴上完整代码文章结尾提供Demo下载以下介绍的 phonegap contacts 的 API有methodscontacts.createcontacts.findArgumentscontactFiel
复制链接

扫一扫