phonegap 通讯录实例

现在的移动平台有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 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="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
	$(function() {
		// Wait for Cordova to load
		//
		document.addEventListener("deviceready", onDeviceReady, false);

		// Cordova is ready
		//
		function onDeviceReady() {
			// find all contacts with 'Bob' in any name field
			var options = new ContactFindOptions();
			options.filter = ""; // 空搜索字符串将返回所有联系人                      
			options.multiple = true; // 可返回多条记录  
			var fields = [ "displayName", "phoneNumbers" ];
			navigator.contacts.find(fields, onSuccess, onError, options);
		}

		// onSuccess: Get a snapshot of the current contacts
		//
		var list = $("#contacts");
		function onSuccess(contacts) {
			for ( var i = 0; i < contacts.length; i++) {
				var userName = contacts[i].displayName;
				console.log("姓名：" + userName);
				for ( var a = 0; a < contacts[i].phoneNumbers.length; a++) {
					var telphone = contacts[i].phoneNumbers[a].value;
					console.log("电话号码：" + telphone);
					$("<p class='contact'/>").text(userName + "," + telphone)
							.data("name", userName).data("number", telphone)
							.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与谁有冲突。

然后贴一下效果图：

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

phonegap 通讯录实例

猜你喜欢