现在的移动平台有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>
然后贴一下效果图:
首先展示通讯录列表,点击任一行查看详细。