當Android和iOS平臺繼續競爭的時候，允許開發人員構建跨平臺應用程序的庫越發具有吸引力，其中最為突出的便是PhoneGap庫。在本教程中，我們將建立一個硬件感知應用程序，用JavaScript 來處理設備加速計。
如果你還沒有下載最新版的PhoneGap framework，那再簡單不過，假設你已經安裝了NodeJS。一旦你再裝上PhoneGap，我們便可以創建應用程序。
1）通過輸入如下命令行來創建PhoneGap應用程序。
$ phonegap create accelerate
$ cd accelerate
$ phonegap local plugin add //git-wip-
us.apache.org/repos/asf/cordova-plugin-device-motion.git
注意應用程序將被創建在你的命令行中指定的任意文件夾內，請先確認是導向了你的目的文件夾。命令行指令的前兩行是不言自明的，它們創建PhoneGap應用程序，調用加速和導航到剛創建的文件夾。
最新版的PhoneGap使用遠程插件架構，因此我們必須用命令行最后一行的的代碼來手動獲取并安裝加速插件。
2）打開加速文件夾并注意應用程序結構包含一個www文件夾。我們將在這里開展工作。
Figure 1：PhoneGap應用程序文件夾構建
PhoneGap創建命令實際上是構建了一個小的示例應用程序。如果你加載index.html到一個瀏覽器，可以看到它的啟動畫面。如果你喜歡，可以在移動設備中運行整個應用程序。
在Android移動設備上運行該示例應用程序，用USB數據線連接該設備到你的電腦。發出如下命令用命令行路徑指向你的項目文件夾：
$ phonegap build android
$ phonegap run android
在iOS設備上運行示例應用程序，實際上更復雜，因為設備必須通過XCode被正確的配置。為測試而配置iOS設備，你必須用蘋果開發程序注冊。
我們將從應用程序中刪除CSS文件夾，icon.png，圖像文件夾和js文件夾。你可以在你最喜歡的文本編輯器中打開index.html，一旦打開，就移除跟該示例應用程序相關的代碼。然后，還會剩如下一些東西：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" src="phonegap.js"></script>
<title>Accelerate</title>
</head>
<body>
</body>
</html>
正如你所看見的，有一些元標簽在標題上，處理屏幕尺寸標準化。其余的代碼是標準HTML。我們將首先設置一個初始化程序以便知道設備和PhoneGap庫均已準備好讓我們運行任何代碼。
我們將添加如下<script>元素到到文檔中的<head>，在<title>之前。
<script>
window.onload = function()
{
//init();
document.addEventListener("deviceready", init, false);
}
function init()
{
alert("Ready!");
}
</script>
init()函數將成為我們進入應用程序的切入點。你將注意到匿名函數聯系著window.onload事件，附加“deviceready”（設備就緒）監聽器到程序上。這個事件將告訴我們設備和PhoneGap
庫何時就緒以和用戶互動。為方便起見，我們也可以注釋調用init()（如果想要測試瀏覽器），因為“deviceready”事件是PhoneGap庫的一部分，它不會在瀏覽器里運行。
這是一個很好的點來停止和測試。當Android設備處于連接狀態，命令行指向應用程序文件夾發出如下命令：
$ phonegap run android
如果你得到了預期的報警框，并且其它一切都是正確的，則是時候為應用程序創建UI了（此刻你也許會想要在init()函數注釋報警框）。我們將創建一個相當簡單的UI，來向我們展示設備中的加速計生成的結果。我們將添加如下HTML到body元素內。
<footer>
<table id="footerTable">
<tr>
<td>X: <span id="xOut"></span></td>
<td>Y: <span id="yOut"></span></td>
<td>Z: <span id="zOut"></span></td>
</tr>
</table>
</footer>
添加一種元素到文檔head以容納CSS：
<style>
body {
margin: 0px;
}
#footerTable {
width: 100%;
}
footer {
position:absolute;
bottom:0;
width:100%;
height:40px;
background:#ccc;
}
</style>
在PhoneGap庫中，加速對象有三種方式，分別是：
-
getCurrentAcceleration()
-
watchAcceleration()
-
clearWatch()
第一種方式，getCurrentAcceleration()，將獲取一個當函數在執行時加速計讀取的快照。watchAcceleration()將返回加速計讀取直到clearWatch()命令被發出。我們將使用watchAcceleration()，以便能在一段時間內看到加速。
watchAcceleration()方式返回一個ID值，我們稍后使用該值能夠停止加速計。這點很重要，因為當不再需要加速計到時候，我不能讓加速計占用有價值的資源。
編輯你的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<style>
body {
margin: 0px;
}
#footerTable {
width: 100%;
}
footer {
position:absolute;
bottom:0;
width:100%;
height:40px;
background:#ccc;
}
</style>
<script type="text/javascript" src="phonegap.js"></script>
<script>
var watch = 0;
window.onload = function()
{
//init();
document.addEventListener("deviceready", init, false);
}
function init()
{
watch = navigator.accelerometer.watchAcceleration(success, failure, {frequency: 100});
}
function success(accel)
{
document.getElementById("xOut").innerHTML = accel.x;
document.getElementById("yOut").innerHTML = accel.y;
document.getElementById("zOut").innerHTML = accel.z;
}
function failure()
{
alert("Error");
}
</script>
<title>Hello World</title>
</head>
<body>
<footer>
<table id="footerTable">
<tr>
<td>X: <span id="xOut">0</span></td>
<td>Y: <span id="yOut">0</span></td>
<td>Z: <span id="zOut">0</span></td>
</tr>
</table>
</footer>
</body>
</html>
我們已經添加基礎代碼以使得加速計運行。你將注意到init()函數包含一行非常重要的代碼：
watch = navigator.accelerometer.watchAcceleration(success, failure, {frequency: 100});
這行實質上是配置加速計并使之運轉。如果加速計成功地獲取設備移動信息，watchAcceleration()方式的三個參數將發出call back，反之亦然。一個頻率對象用加速計在毫秒中被取的樣來設置頻率。
success()和failure()的收call back該是相當直接的。在success()call back中，一個加速對象被傳到函數，它包含了讀取x/y/z軸的屬性。failure() call back則是簡單的輸出一個錯誤信息。
此刻將是有一次測試你的應用程序的好時機，看看是否一切都工作正常。再一次，構建并運行你的應用程序發布如下命令：
$ phonegap run android
如果一切工作正常，在移動設備的時候，你則應該在屏幕底部更新看看X/Y/Z的解析。慢慢沿著不同的軸向移動設備，注意X/Y/Z的反映。
Figure 2：注意屏幕底部的顯示。
現在我們將讓應用程序變得更有趣一些，用加速計使對象繞屏移動，通過HTML添加對象本身，然后用加速計的讀數來決定速率和移動方向。作為準備，我們可以為應用程序添加一個canvas然后將一個對象放入其中。為了添加這個canvas，我們將添加一個canvas元素到body第一行。
<canvas id="myCanvas" ></canvas>
我們還將標準化HTML和body的寬度、高度和margin css屬性以防萬一。添加如下選擇器和規則到你的CSS。
{
width: 100%;
height: 100%;
margin: 0px;
}
用一張叫做“crosshair.png”的圖像。我們將加載它到canvas在int()事件中。你將要為canvas的context和目標設置cnv，使得圖像作為全局腳本的頂端。
照如下方法修改你的int()函數：
function init()
{
var iW = window.innerWidth;
var iH = window.innerHeight;
cnv = document.getElementById('myCanvas').getContext("2d");
cnv.canvas.width = iW;
cnv.canvas.height = iH-40;
target = new Image();
target.src = "crosshair.png";
target.onload = function()
{
cnv.drawImage(target, (iW-(target.width))/2, (iH-
(target.height))/2);
}
watch = navigator.accelerometer.watchAcceleration(success,
failure, {frequency: 100});
}
這里會大有文章，iW和iH變量包含屏幕大小。顯然移動設備在它們的不同技術參數間變化，因此我們要確保創建的一個canvas是彈性的。cnv變量用來引用我們將做大量工作的context對象。把canvas想作是隱形層將會很有用。
我們用context對象、cnv來設置canvas的寬高屬性。為顧及我們已經在底端顯示中創建的output bar，得從高度中減去40。我們初始化目標變量為一個圖像目標并提供源圖像到src屬性。
我們要確保圖像在我們試圖展示它之前已經被加載，因此我們設置一個匿名函數，它在圖像對象調用目標加載時被調用。在那時我們回執圖像并做一些簡單的數學把它放到屏幕中心。最終我們配置了加速計。
這是又一個在你的設備上測試程序的絕佳時機。
Figure 3: canvas后的應用程序和圖像已經被添加到canvas。
現在，當傾斜設備時，圖像將會移動，加速計做出反應。大多數工作將在success() callback函數中完成。但是，我們還可以讓init()函數做一些變化以促成一個運行更順暢的應用程序。修改的init()函數如下：
function init()
{
var iW = window.innerWidth;
var iH = window.innerHeight;
canvas= document.getElementById('myCanvas');
cnv = canvas.getContext("2d");
cnv.canvas.width = iW;
cnv.canvas.height = iH-40;
target = new Image();
target.src = "crosshair.png";
xPos = (iW-target.width)/2;
yPos = (iH-target.height)/2;
target.onload = function()
{
cnv.drawImage(target, xPos, yPos);
}
watch = navigator.accelerometer.watchAcceleration(success,
failure, {frequency: 25});
}
打開你已經修改的init()添加canvas到你的script開始時的全局列表。你還將注意到在init()處理捕捉圖像位置期間，xPos和yPos變量被設置，你同樣也需要添加他們到全局列表。最后，降低頻率值到25，我們就可以每25毫秒從加速計獲取結果。現在到success()callback函數：
function success(accel)
{
document.getElementById("xOut").innerHTML = accel.x;
document.getElementById("yOut").innerHTML = accel.y;
document.getElementById("zOut").innerHTML = accel.z;
cnv.clearRect(0, 0, canvas.width, canvas.height);
xPos += -1*(accel.x * 1.5);
yPos += (accel.y * 1.5);
cnv.drawImage(target, xPos, yPos);
}
更新屏幕底部的顯示欄后，clearRect()方式被canvas對象移除。這在刷新圖像之前，在更新的位置清理了canvas。clearRect()方式需要一個啟動點和你想要清理的寬高數據。我們清理整個canvas，所以我們提供它的完整寬高。
接下來我們在刷新之前更新xPos和yPos。必須否定xPos，才能讓圖像按照用戶傾斜移動設備的方向移動。xPos和yPos均乘以1.5以便移動圖像稍微快些。最后，drawImage()被調用，是它在新的位置繪制圖像。
再一次測試你的應用程序，它應該是沿著設備傾斜軸而移動的。當然，為了挑戰自我，你可以創建額外的代碼，防止圖像從邊緣脫落。
如你所見，PhoneGap使得進入設備硬件更加容易，就像這加速計，包含在你的基于JavaScript的移動應用程序。
標簽：
PhoneGap
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：慧都控件網
半島外圍網上直營 
10次
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線