行動商務實務 - PhoneGap Advance

PhoneGap Advance
2012.IM.mgt.ncu.edu.tw/ 文孝義方毓賢

大綱

 打包與安裝 APK
 Phonegap Device App

2012.IM.mgt.ncu.edu.tw/ 文孝義方毓賢 2

打包與安裝 APK

 開啟開發模式


打包與安裝 APK

 在Eclipse中使用導引視窗建立APK
 安裝
 1.WEB / FTP
 2.SD
 3.ECLIPSE 直接安裝


打包與安裝 APK

 透過WEB安裝 APK
 Http File Server
http://www.rejetto.com/hfs/
 安裝WEB SERVER或是 HTTP FILE SERVER
 在手機上開啟瀏覽器，開啟你的Web Server
網址。點選要下載安裝的APK。Android會
自動辨別下載，下載完成後，等待安裝。


打包與安裝 APK


Phonegap Device App

 請下載上課用的範例程式檔
 將檔案解壓縮，放到專案下
assets/www/


Phonegap Device App

<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<!-- 其他程式放在這例如 JQuery Mobile- >
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<!-- 自己寫的程式放在這 - >
</head>

Phonegap Device App

 網頁一開始需要註冊Phonegap 已準備好的
事件
deviceInfo 是事件處理程式
function init() {
document.addEventListener("deviceready", deviceInfo, true);
}


Phonegap Device App

var deviceInfo = function() {
document.getElementById("platform").innerHTML = device.platform;
document.getElementById("version").innerHTML = device.version;
document.getElementById("uuid").innerHTML = device.uuid;
document.getElementById("name").innerHTML = device.name;
document.getElementById("width").innerHTML = screen.width;
document.getElementById("height").innerHTML = screen.height;
document.getElementById("colorDepth").innerHTML = screen.colorDepth;
};


Phonegap Device App

 程式說明 DEMO


Phonegap Device App

 取得GPS 資料

var getLocation = function() {
var suc = function(p) {
alert(p.coords.latitude + " " + p.coords.longitude);
};
var locFail = function() {
};
navigator.geolocation.getCurrentPosition(suc, locFail);
};


Phonegap Device App

 相機照相
function dump_pic(data) {
var viewport = document.getElementById('viewport');
console.log(data);
viewport.style.display = "";
viewport.style.position = "absolute";
viewport.style.top = "10px";
viewport.style.left = "10px";
document.getElementById("test_img").src = data;
}
function show_pic() {
navigator.camera.getPicture(dump_pic, fail, {
quality : 50
});
}

Phonegap Device App

<div id="viewport" class="viewport" style="display: none;">
<img style="width:60px;height:60px" id="test_img" src="" />
</div>


行動商務實務 - PhoneGap Advance

More Related Content

Viewers also liked (13)

Similar to 行動商務實務 - PhoneGap Advance (20)

More from My own sweet home! (20)

行動商務實務 - PhoneGap Advance