Html5移动web应用开发(PhoneGap)

HTML5 移动 Web 应用开发 - 浅谈 Phone Gap v1.0 框架

什么是 Phone Gap ？

什么是 Phone Gap ？如何工作的？

目前 Phone Gap 优点和不足
优点
兼容性，跨平台
完全符合 W3C 的标准
HTML5+CSS3+Javascript
开发成本低
缺点
运行速度慢， UI 有明显的延迟
程序不稳定

WEB APP 界面布局介绍

UI 布局介绍
HTML5 + CSS3 布局
浏览器窗口的宽和高
设备的宽和高
设备的手持方向，横向还是竖向
分辨率
CSS3 的 Media Queries
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { }
HTML 中的写法
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

UI 布局介绍
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type= "text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body >
...........................................
</body>
</html>

UI 布局介绍
弹性布局特点
对用户十分友好，自适应横屏，竖屏
制作难度，兼容性因素
box-orient 布局

UI 布局介绍弹性布局实例分析 # main { /* 盒子模型显示 */ display : -moz-box; display : -webkit-box; display : box; /* 纵向排列 */ -moz-box-orient : vertical; -webkit-box-orient : vertical; box-orient : vertical; } box-flex:1 box-flex:7 box-flex:1

UI 布局介绍弹性布局实例分析 .Box { // 盒子模型显示 display : -moz-box; display : -webkit-box; display : box; // 横向排列 -moz-box-orient : horizional; -webkit-box-orient : horizional; box-orient : horizional; } Nav { -moz-box-flex : 1; -webkit-box-flex : 1; box-flex : 1; } nav nav nav

其它 : CSS3 动画有了 CSS3 使 WEB APP 更加丰富手机上支持 css3 动画特性：移动的方格， ( 请看附件 DEMO 效果 ) animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari and Chrome */ @ keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background :yellow; left:200px; top:0px;} 50% {background :blue; left:200px; top:200px;} 75% {background :green; left:0px; top:200px;} 100% {background :red; left:0px; top:0px;} }

其它 :JQuery Mobile Jquery Mobile 简介
是 jquery 在手机，和平板电脑设备上的版本
完整统一的 jQuery 移动 UI 框架。支持全球主流的移动平台
http://www.jquerymobile.com

其它 :JQuery Mobile Jquery Mobile UI 演示 <div role="navigation" data-role="navbar" class="nav-glyphish-example ui-navbar" data-grid="d"> <ul class="ui-grid-d"> <li class="ui-block-a">....</li> <li class="ui-block-b">....</li> <li class="ui-block-c">....</li> </ul> </div> http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/toolbars/docs-navbar.html

其它 :JQuery Mobile Jquery Mobile themes 丰富的 UI 库更有利于程序员开发 http ://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/themes.html

Phone Gap API 介绍官方网站 : http://www.phonegap.com

Phone Gap API v1.0
Accelerometer 加速度计
Camera 相机
Capture 捕捉
Compass 指南针
Contacts 联系人
Device 设备
Events 活动
File 文件 Geolocation 地理位置 Media 媒体 Network 网络 Notification 通知 Storage 存储中文 AIP 接口说明

Phone Gap 简介 Phone Gap For Android * 在 # /asset/www/ 目录下开发 web 应用程序生成 APP 应用

Phone Gap “Hello World” App document.addEventListener(" deviceready ", onDeviceReady, false); function onDeviceReady() { showAlert(); } function showAlert() { navigator. notification.alert ( ‘Hello World’, // 信息 alertDismissed, // 回调函数 ‘ Hello’, // 标题 ‘ Done’ // 按钮名称 ); } 第一个 Phone Gap 的应用程序

Phone Gap Device // 获取操作系统，版本， ID, 分辨率 function onDeviceReady() { var element = document.getElementById('deviceProperties'); element.innerHTML = ' Device Name: ' + device.name + '<br />' + ' Device PhoneGap: ' + device.phonegap + '<br />' + ' Device Platform: ' + device.platform + '<br />' + ' Device UUID: ' + device.uuid + '<br />' + ' Device Version: ' + device.version + '<br />'; } 获取手机的基本信息 Device 函数

Phone Gap 数据存储
// 链接数据库 function onDeviceReady() { var db = window. openDatabase (" Database ", "1.0", "PhoneGap Demo", 200000); db.transaction(populateDB, errorCB, successCB); }
本地数据库操作 (Storage)

// 执行数据库操作 ( 插入数据 ) function populateDB(tx) { tx.executeSql('DROP TABLE IF EXISTS DEMO'); tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")'); }

// 执行数据库操作 ( 查询数据 ) function queryDB(tx) { tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); }

// Key Value 形式存储 window. localStorage .setItem(“key”, “value”); // 存储
var value = window. localStorage .getItem(“key”); // 获取
window. localStorage .removeItem(“key”); // 删除
本地数据库操作 ( localStorage )

Phone Gap Notification Notification 提醒 notification.alert 弹出框 notification.confirm 确认框 notification.beep 声音提醒 notification.vibrate 震动提醒 // Beep three times function playBeep() { navigator. notification.beep (3); } // Vibrate for 2 seconds // function vibrate() { navigator. notification.vibrate (2000); }

Phone Gap Geolocation Geolocation GPS 位置定位 navigator. geolocation.getCurrentPosition (onSuccess, onError);

Phone Gap Accelerometer Accelerometer 设备坐标 Captures device motion in the x, y, and z direction. 获取设备 x,y,z 轴的坐标 function onSuccess(acceleration) { alert(' Acceleration X: ' + acceleration.x + 'n' + ' Acceleration Y: ' + acceleration.y + 'n' + ' Acceleration Z: ' + acceleration.z + 'n' + 'Timestamp: ' + acceleration.timestamp'n'); }; function onError() { alert('onError!'); }; navigator. accelerometer.getCurrentAcceleration (onSuccess, onError);

Phone Gap Camera Camera 调用摄像头 navigator. camera.getPicture (onSuccess, onFail, { quality: 50, destinationType: Camera .DestinationType.FILE_URI }); function onSuccess(imageURI) { var image = document.getElementById('myImage'); image.src = imageURI; } function onFail(message) { alert('Failed because: ' + message); }

Phone Gap Debug 程序调试 console.log(“”);

最后 Phone Gap 相关网址 http://www.w3schools.com/ W3C 官网 http://docs.phonegap.com/ 在线手册 http://www.phonegap.com/start#android 开发环境搭建 http://groups.google.com/group/phonegap?pli=1 Google PhoneGap 群组

谢谢王振 [email_address]

http://www.nonb.cn	496
http://cache.baidu.com	9
http://nonb.cn	3

Html5移动web应用开发(PhoneGap)

by amd6400 on Aug 18, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 508

Statistics

Html5移动web应用开发(PhoneGap) — Presentation Transcript