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 应用开发 -  浅谈 Phone Gap v1.0 框架
什么是 Phone Gap ?
什么是 Phone Gap ? 如何工作的?
目前 Phone Gap  优点和不足 <ul><li>优点   </li></ul><ul><li>兼容性,跨平台 </li></ul><ul><li>完全符合 W3C 的标准 </li></ul><ul><li>HTML5+CSS3+Jav...
WEB APP  界面布局介绍
UI 布局介绍 <ul><li>HTML5 + CSS3  布局 </li></ul><ul><li>浏览器窗口的宽和高 </li></ul><ul><li>设备的宽和高 </li></ul><ul><li>设备的手持方向,横向还是竖向 </l...
UI 布局介绍 <ul><li>Index.html  </li></ul><ul><li><!DOCTYPE HTML> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul>...
UI 布局介绍 <ul><li>弹性布局特点 </li></ul><ul><li>对用户十分友好,自适应横屏,竖屏 </li></ul><ul><li>制作难度,兼容性因素 </li></ul><ul><li>box-orient 布局 </l...
UI 布局介绍 弹性布局实例分析 # main { /* 盒子模型显示 */ display :  -moz-box; display :  -webkit-box; display :  box; /* 纵向排列 */ -moz-box-or...
UI 布局介绍 弹性布局实例分析 .Box  { // 盒子模型显示 display :  -moz-box; display :  -webkit-box; display :  box; // 横向排列 -moz-box-orient : ...
其它 : CSS3 动画 有了 CSS3 使 WEB APP 更加丰富 手机上支持 css3 动画特性:移动的方格, ( 请看附件 DEMO 效果 ) animation: myfirst 5s; -moz-animation: myfirst...
其它 :JQuery Mobile  Jquery Mobile  简介  <ul><li>是 jquery 在手机,和平板电脑设备上的版本 </li></ul><ul><li>完整统一的 jQuery 移动 UI 框架。支持全球主流的移动平台...
其它 :JQuery Mobile  Jquery Mobile UI 演示 <div role=&quot;navigation&quot; data-role=&quot;navbar&quot; class=&quot;nav-glyph...
其它 :JQuery Mobile  Jquery Mobile themes 丰富的 UI 库更有利于程序员开发 http ://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/them...
Phone Gap API  介绍 官方网站 : http://www.phonegap.com
Phone Gap API v1.0 <ul><li>Accelerometer  加速度计 </li></ul><ul><li>Camera  相机 </li></ul><ul><li>Capture  捕捉 </li></ul><ul><l...
Phone Gap  简介 Phone Gap For Android  *  在  # /asset/www/ 目录下开发 web 应用程序   生成 APP 应用
Phone Gap “Hello World” App      document.addEventListener(&quot; deviceready &quot;, onDeviceReady, false);     function ...
Phone Gap Device // 获取操作系统,版本, ID,  分辨率 function onDeviceReady() {         var element = document.getElementById('devicePr...
Phone Gap 数据存储 <ul><li>     // 链接数据库      function onDeviceReady() {         var db = window. openDatabase (&quot; Databas...
Phone Gap 数据存储 <ul><li>     // 执行数据库操作 ( 插入数据 )     function populateDB(tx) {          tx.executeSql('DROP TABLE IF EXISTS...
Phone Gap 数据存储 <ul><li>     // 执行数据库操作 ( 查询数据 ) function queryDB(tx) {     tx.executeSql('SELECT * FROM DEMO', [], querySu...
Phone Gap 数据存储 <ul><li>     // Key Value 形式存储   window. localStorage .setItem(“key”, “value”);  // 存储 </li></ul><ul><li>va...
Phone Gap Notification  Notification  提醒 notification.alert   弹出框 notification.confirm   确认框 notification.beep   声音提醒 noti...
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...
Phone Gap Camera Camera   调用摄像头         navigator. camera.getPicture (onSuccess, onFail, { quality: 50,      destinationTy...
Phone Gap Debug 程序调试        console.log(“”);
最后 Phone Gap  相关网址     http://www.w3schools.com/   W3C 官网    http://docs.phonegap.com/   在线手册 http://www.phonegap.com/star...
谢 谢 王振  [email_address]
Upcoming SlideShare
Loading in …5
×

Html5移动web应用开发(PhoneGap)

1,435 views

Published on

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

Published in: Education, Technology, Design
  • thanks,有了初步的认识
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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>程序不稳定 </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 动画 有了 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. 其它 :JQuery Mobile Jquery Mobile 简介 <ul><li>是 jquery 在手机,和平板电脑设备上的版本 </li></ul><ul><li>完整统一的 jQuery 移动 UI 框架。支持全球主流的移动平台 </li></ul>http://www.jquerymobile.com
  13. 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. 14. 其它 :JQuery Mobile Jquery Mobile themes 丰富的 UI 库更有利于程序员开发 http ://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/themes.html
  15. 15. Phone Gap API 介绍 官方网站 : http://www.phonegap.com
  16. 16. 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 接口说明
  17. 17. Phone Gap 简介 Phone Gap For Android * 在 # /asset/www/ 目录下开发 web 应用程序 生成 APP 应用
  18. 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. 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 函数
  20. 20. 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)
  21. 21. 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)
  22. 22. Phone Gap 数据存储 <ul><li>    // 执行数据库操作 ( 查询数据 ) function queryDB(tx) {     tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); } </li></ul>本地数据库操作 (Storage)
  23. 23. 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 )
  24. 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. 25. Phone Gap Geolocation Geolocation GPS 位置定位 navigator. geolocation.getCurrentPosition (onSuccess, onError);
  26. 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 + 'n' +           ' Acceleration Y: ' + acceleration.y + 'n' +           ' Acceleration Z: ' + acceleration.z + 'n' +           'Timestamp: '      + acceleration.timestamp'n'); }; function onError() {     alert('onError!'); }; navigator. accelerometer.getCurrentAcceleration (onSuccess, onError);
  27. 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. 28. Phone Gap Debug 程序调试     console.log(“”);
  29. 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. 30. 谢 谢 王振 [email_address]

×