开发APP怎样利用HTML5调用手机通讯录？_博纳网络深圳网站建设公司

当前位置：

发布时间：2019-08-02

文章编辑：网站建设文章来源：APP开发浏览量：次

开发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所示。