android通过浏览器得到手机数据

现在的移动平台有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为以下内容：

[html]view plaincopy

<!DOCTYPEHTML>
<html>
<head>
<metacontentType="text/html;charset=utf-8"/>
<title>ContactExample</title>
<styletype="text/css">
.contact{
padding:5px;
border-bottom:1pxsolidgray;
}
</style>
<scripttype="text/javascript"charset="utf-8"src="cordova-1.5.0.js"></script>
<scripttype="text/javascript"charset="utf-8"src="jquery-1.7.2.min.js"></script>
<scripttype="text/javascript"charset="utf-8">
$(function(){
//WaitforPhoneGaptoload
//
document.addEventListener("deviceready",onDeviceReady,false);
//PhoneGapisready
//
functiononDeviceReady(){
varoptions=newContactFindOptions();
varfields=["displayName","phoneNumbers"];
navigator.contacts.find(fields,onSuccess,onError);
}
varlist=$("#contacts");
functiononSuccess(contacts){
for(vari=0;i<contacts.length;i++){
/*console.log("DisplayName="+contacts[i].displayName);*/
$("<pclass='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:Failedtogetthecontacts
//
functiononError(contactError){
alert('onError!');
}
$("#back").click(function(){
$("#detail").hide();
$("#contacts").show();
});
});
</script>
</head>
<body>
<h1>通讯录</h1>
<divid="contacts"></div>
<divid="detail"style="display:none">
姓名：<spanid="name"></span><br/>
手机号：<spanid="number"></span><br/>
<divstyle="text-align:center;margin-top:10px"><buttonid="back"style="width:90px;height:60px;">返回</button></div>
</div>
</body>
</html>

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

然后贴一下效果图：

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

转自：http://blog.csdn.net/nairuohe/article/details/7422661

更多相关文章

随机推荐