Html5移动web应用开发(PhoneGap)

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

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

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

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)

Phone Gap 数据存储 // 执行数据库操作 ( 插入数据 ) 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")'); } 本地数据库操作 (Storage)

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

Phone Gap 数据存储 // 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]

Html5移动web应用开发(PhoneGap)

More Related Content

Similar to Html5移动web应用开发(PhoneGap)

Html5移动web应用开发(PhoneGap)