Phonegap联系人获取Contacts HTML5,android

来源：互联网发布：关于网络文明的论文编辑：程序博客网时间：2024/05/18 01:25

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

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

文章结尾提供Demo下载

以下介绍的 phonegap contacts 的 API有

methods

contacts.create
contacts.find

Arguments

contactFields
contactSuccess
contactError
contactFindOptions

Object

Contact
ContactName
ContactField
ContactAddress
ContactOrganization
ContactFindOptions
ContactError

从建立项目说起:

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

 phonegap create my-app cd my-app phonegap run android

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

cd my-appcd plugins

<3> 现在开始下载插件

cordova plugin add org.apache.cordova.contacts

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

cordova platform add android

<5> 编译android工程

cordova build

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

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

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

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 里面有

    <feature name="Contacts">        <param name="android-package" value="org.apache.cordova.contacts.ContactManager" />    </feature>

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

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

example:

<!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="#" onclick="showAlert(); return false;">Show Alert</a></p>     <p><a href="#" onclick="playBeep(); return false;">Play Beep</a></p>     <p><a href="#" onclick="baozi(); return false;">Vibrate</a></p>   <p><a href="#" onclick="intent(); return false;">Html跳转到android界面</a></p>   </body></html>

代码详解:

上段代码中的

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 如下:

迭代弹出所有联系人

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

顺道说一句

  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

2 0

Phonegap联系人 获取Contacts HTML5,android