phonegap 通讯录Demo

最新推荐文章于 2019-01-25 13:49:00 发布

iteye_563

最新推荐文章于 2019-01-25 13:49:00 发布

阅读量180

点赞数

文章标签： javascript 移动开发 ViewUI

现在的移动平台有Android、iOS、Windows Phone等好几种，同一款应用程序移植到不同的平台要从头做过，花费的力气很大。如果换做Web页面就很容易跨平台了，不管什么系统，打开浏览器就可以使用。但是普通的Web页面有很多不方便，比如无法使用本地的资源，像摄像头、通讯录等。而PhoneGap就是介于原生应用与普通Web页面之间的。它是一个开源的开发框架，它通过浏览器，可以轻松的实现跨平台。开发人员利用它，就可以使用HTML、JavaScript、CSS来完成应用的开发，并且也可以调用本地的摄像头、通讯录等资源。在某一个平台开发完成后，通过比较少的调整，就可以发布到另外的平台。

今天我看了一下PhoneGap，并且小试了一下做了一个查看通讯录的Demo。

首先按照官方的教程http://docs.phonegap.com/en/1.5.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android，完成一个HelloWorld。

然后修改www目录下的index.html为以下内容：

<!DOCTYPE HTML>

<html>
  <head>
  	<meta contentType="text/html; charset=utf-8"/>
    <title>Contact Example</title>
	<style type="text/css">
    	.contact{
    		padding:5px;
    		border-bottom:1px solid gray;
    	}
    </style>
    <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery-1.7.2.min.js"></script>
    <!--script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0.1.js"></script-->
    <script type="text/javascript" charset="utf-8">
    
    
    
    $(function(){
    // Wait for PhoneGap to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    //
    function onDeviceReady() {
        var options = new ContactFindOptions();
        var fields = ["displayName", "phoneNumbers"];
        navigator.contacts.find(fields, onSuccess, onError);
    }

	var list = $("#contacts");
    function onSuccess(contacts) {
        for (var i=0; i<contacts.length; i++) {
           /*  console.log("Display Name = " + contacts[i].displayName);*/
          $("<p class='contact'/>").text(contacts[i].displayName)
          .data("name", contacts[i].displayName)
          .data("number", contacts[i].phoneNumbers[0].value)
          .click(function(){
        	  $("#name").text($(this).data("name"));
        	  $("#number").text($(this).data("number"));
        	  $("#detail").show();
          	  $("#contacts").hide();
          })
          .appendTo(list);
        }
    }

    // onError: Failed to get the contacts
    //
    function onError(contactError) {
        alert('onError!');
    }
    
    $("#back").click(function(){
    	$("#detail").hide();
    	$("#contacts").show();
    });
    
    });
	
    </script>
  </head>
  <body>
    <h1>通讯录</h1>
    <div id="contacts"></div>
    <div id="detail" style="display:none">
    	姓名：<span id="name"></span><br/>
    	手机号：<span id="number"></span><br/>
    	<div style="text-align:center;margin-top:10px"><button id="back" style="width:90px;height:60px;">返回</button></div>
    </div>
  </body>
</html>

这里我用到了JQuery，需要把jquery下载回来放到www目录。之前我还把jquery.mobile也引入到页面中来了，这样的话Button的值会显示两遍(比如会显示两个返回，一个显示在Button上面，一个显示在Button左边)。可能是jquery.mobile与谁有冲突。

然后贴一下效果图：

首先展示通讯录列表，点击任一行查看详细。