Html5移动web应用开发(PhoneGap) 作者博客www.nonb.cn

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

2. 什么是 Phone Gap ？

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

5. WEB APP 界面布局介绍

9. 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

10. 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

11. 其它 : 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;} }

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

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

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

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

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

19. 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 函数

24. 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); }

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

26. 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 + '' + ' Acceleration Y: ' + acceleration.y + '' + ' Acceleration Z: ' + acceleration.z + '' + 'Timestamp: ' + acceleration.timestamp''); }; function onError() { alert('onError!'); }; navigator. accelerometer.getCurrentAcceleration (onSuccess, onError);

27. 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); }

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

29. 最后 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 群组

30. 谢 谢 王振 [email_address]