Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5移动WEB应用程序开发(PhoneGap)

1,867 views

Published on

HTML5移动WEB应用程序开发(PhoneGap)
作者博客www.nonb.cn

  • Be the first to comment

  • Be the first to like this

HTML5移动WEB应用程序开发(PhoneGap)

  1. 1. HTML5 移动 Web 应用开发 - 浅谈 Phone Gap v1.0 框架
  2. 2. 什么是 Phone Gap ?
  3. 3. 什么是 Phone Gap ? 如何工作的?
  4. 4. 目前 Phone Gap 优点和不足 <ul><li>优点 </li></ul><ul><li>兼容性,跨平台 </li></ul><ul><li>完全符合 W3C 的标准 </li></ul><ul><li>HTML5+CSS3+Javascript </li></ul><ul><li>开发成本低 </li></ul><ul><li>缺点 </li></ul><ul><li>运行速度慢, UI 有明显的延迟 </li></ul><ul><li>程序不稳定,目前暂时还存在 BUG </li></ul>
  5. 5. WEB APP 界面布局介绍
  6. 6. UI 布局介绍 <ul><li>HTML5 + CSS3 布局 </li></ul><ul><li>浏览器窗口的宽和高 </li></ul><ul><li>设备的宽和高 </li></ul><ul><li>设备的手持方向,横向还是竖向 </li></ul><ul><li>分辨率 </li></ul><ul><li>CSS3 的 Media Queries </li></ul><ul><li>@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { } </li></ul><ul><li>HTML 中的写法 </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;only screen and (max-device-width: 480px)&quot; href=&quot;small-device.css&quot; /> </li></ul>
  7. 7. UI 布局介绍 <ul><li>Index.html </li></ul><ul><li><!DOCTYPE HTML> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>PhoneGap</title> </li></ul><ul><li><script type= &quot;text/javascript&quot; charset=&quot;utf-8&quot; src=&quot;phonegap.js&quot;></script> </li></ul><ul><li></head> </li></ul><ul><li><body > </li></ul><ul><li>........................................... </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  8. 8. UI 布局介绍 <ul><li>弹性布局特点 </li></ul><ul><li>对用户十分友好,自适应横屏,竖屏 </li></ul><ul><li>制作难度,兼容性因素 </li></ul><ul><li>box-orient 布局 </li></ul>
  9. 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. 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. 11. 其它 有了 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;} }
  12. 12. Phone Gap API 介绍 官方网站 : http://www.phonegap.com
  13. 13. Phone Gap API v1.0 <ul><li>Accelerometer 加速度计 </li></ul><ul><li>Camera 相机 </li></ul><ul><li>Capture 捕捉 </li></ul><ul><li>Compass 指南针 </li></ul><ul><li>Contacts 联系人 </li></ul><ul><li>Device 设备 </li></ul><ul><li>Events 活动 </li></ul>File 文件 Geolocation 地理位置 Media 媒体 Network 网络 Notification 通知 Storage 存储 中文 AIP 接口说明
  14. 14. Phone Gap 简介 Phone Gap For Android * 在 # /asset/www/ 目录下开发 web 应用程序 生成 APP 应用
  15. 15. 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 的应用程序
  16. 16. 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 函数
  17. 17. Phone Gap 数据存储 <ul><li>    // 链接数据库     function onDeviceReady() {         var db = window. openDatabase (&quot; Database &quot;, &quot;1.0&quot;, &quot;PhoneGap Demo&quot;, 200000);         db.transaction(populateDB, errorCB, successCB);     } </li></ul>本地数据库操作 (Storage)
  18. 18. Phone Gap 数据存储 <ul><li>    // 执行数据库操作 ( 插入数据 )     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, &quot;First row&quot;)');          tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, &quot;Second row&quot;)');     } </li></ul>本地数据库操作 (Storage)
  19. 19. Phone Gap 数据存储 <ul><li>    // 执行数据库操作 ( 查询数据 ) function queryDB(tx) {     tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); } </li></ul>本地数据库操作 (Storage)
  20. 20. Phone Gap 数据存储 <ul><li>    // Key Value 形式存储 window. localStorage .setItem(“key”, “value”); // 存储 </li></ul><ul><li>var value = window. localStorage .getItem(“key”); // 获取 </li></ul><ul><li>window. localStorage .removeItem(“key”); // 删除 </li></ul>本地数据库操作 ( localStorage )
  21. 21. 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);     }
  22. 22. Phone Gap Geolocation Geolocation GPS 位置定位 navigator. geolocation.getCurrentPosition (onSuccess, onError);
  23. 23. 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);
  24. 24. 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); }
  25. 25. Phone Gap Debug 程序调试     console.log(“”);
  26. 26. 最后 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 开发群组
  27. 27. 谢 谢 王振 [email_address]

×