开发APP怎样利用HTML5调用手机通讯录？深圳APP开发公司资深工程师在本节使用HTML5Plus技术实现调用手机通讯录的应用与各位进行分享，希望能给你的APP后期管理以及APP改版工作有所帮助。利用编辑器打开源代码“8-3.HTML5调用手机通讯录”目录下的“index.html”文件，页面代码如下：
【代码8-4】
01 < body onselectstart=" return false;"> 02 < header id=" header"> 03 < div id=" back" style=" visibility: hidden" class=" nvbt iback" onclick=" plus. runtime. quit()"></ div> 04 < div class=" nvtt"> HTML 5+ 调用 手机 通讯录</ div> 05 < div class=" nvbt iabout" onclick=" clicked(' about. html',' zoom- fade- out', true)"></ div> 06 </ header> 07 < div id=" content" class=" content"> 08 < ul id=" plist" style=" list- style: none; margin: 0; padding: 0; text- align: left;"> 09 < li id=" plus/ contacts. html" onclick=" clicked(
10 < span class=" item"> Contacts 11 < div class=" chs"> 通讯录</ div> 12 </ span> 13 </ li> 14 </ ul> 15 </ div> 16 </ body>
代码第09～13行定义了打开手机通讯录的列表，其中第09行代码<li>标签内定义了一个JS脚本方法clicked(this.id)，用于打开手机通讯录页面，而“this.id”定义的页面地址就是“plus/contacts.html”。找到“plus”目录下的“contacts.html”页面，具体代码如下：【代码8-5】
01 <! DOCTYPE html> 02 < html> 03 < head> 04 < meta charset=" utf- 8"/> 05 < meta name=" viewport" content=" initial- scale= 1. 0, maximum- scale= 1. 0, user- scalable= no"/> 06 < meta name=" HandheldFriendly" content=" true"/> 07 < meta name=" MobileOptimized" content=" 320"/>
08 < title> HTML 5+ 调用 手机 通讯录</ title> 09 < script type=" text/ javascript" src="../ js/ common. js"></ script> 10 < script type=" text/ javascript"> 11 // 监听 plusready 事件 12 document. addEventListener( "plusready", function(){ 13 // 扩展 API 加载 完毕， 现在 可以 正常 调用 扩展 API 14 plus. contacts. getAddressBook( plus. contacts. ADDRESSBOOK_ PHONE, function (addressbook) { 15 addressbook. find([" displayName"," phoneNumbers"], function( contacts){ 16 alert(" 通讯录 共计: " + contacts. length + "条."); 17 var newLi, newSpan, textNode; 18 for( var i= 0; i< contacts. length; i++) { 19 // contactLi = "<li>< span class=' item'>< div class=' chs'>" + contacts[ i]. displayName + "</div></ span></ li>"; 20 newLi = document. createElement(" li"); 21 newSpan = document. createElement(" span"); 22 newSpan. className = "item"; 23 newDiv = document. createElement(" div"); 24 newDiv. className = "chs"; 25 textNode = document. createTextNode( contacts[
contacts[ i]. displayName); 26 newDiv. appendChild( textNode); 27 newSpan. appendChild( newDiv); 28 newLi. appendChild( newSpan); 29 document. getElementById(" clist"). appendChild( newLi); 30 } 31 }, function () { 32 alert(" error"); 33 },{multiple: true}); 34 },function( e){ 35 alert(" Get address book failed: " + e. message); 36 }); 37 }, false ); 38 </ script> 39 < link rel=" stylesheet" href="../ css/ common. css" type=" text/ css" charset=" utf- 8"/> 40 </ head> 41 < body> 42 < header id=" header"> 43 < div class=" nvtt"> 通讯录</ div> 44 </ header> 45 < div id=" content" class=" content"> 46 < ul id=" clist" style=" list- style: none; margin: 0; padding:
padding: 0; text- align: left;"> 47 < ul> 48 < div> 49 </ body> 50 < script type=" text/ javascript" src="../ js/ immersed. js" ></ script> 51 </ html>
代码第14行通过getAddressBook()函数方法获取了手机通讯录，执行该操作时由于通讯录属于系统高级权限，因此系统会提示用户是否允许授予访问权限。代码第15行通过addressbook.find()方法查询通讯录，而回调函数中的“contacts”参数包含了获取的通讯录数据。代码第16行通过contacts.length参数获取了通讯录一共包含的项数，并通过一个消息框进行提示。代码第17～30行通过一个for循环方法依次读取了通讯录中的每一条数据，并动态添加到第46和47行定义的<ul>列表控件中进行显示。由于通讯录信息需要保密，因此本例仅仅打印出通讯录的姓名参数（displayName）一项进行测试。下面我们测试运行一下“HTML5调用手机通讯录”项目，在手机端打开应用后界面效果如图8.7所示。
点击图中的“Contacts通讯录”列表项，弹出一个信息提示框，如图8.8所示。
点击“确定”按钮，进入通讯录列表界面，效果如图8.9所示。
点击图中的“Contacts通讯录”列表项，弹出一个信息提示框，如图8.8所示。点击“确定”按钮，进入通讯录列表界面，效果如图8.9所示。APP开发公司本章小结：本章主要介绍了HTML5借助插件实现调用手机摄像头、相册及通讯录的功能，通过多个实际范例介绍了编写代码的方法，希望对你有一定的帮助。好了，APP开发公司本文关于“开发APP怎样利用HTML5调用手机通讯录？”的相关制作方法就分享到这里，谢谢关注，博纳网络编辑整理。
当前文章链接：/construction/appkaifa/3372.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
