現在的移動平台有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與誰有衝突。
然後貼一下：
首先展示通訊錄列表，點擊任一行查看詳細。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
