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)

4,786 views
4,728 views

Published on

Html5移动web应用开发(PhoneGap)

Published in: Education, Technology, Design
1 Comment
2 Likes
Statistics
Notes
  • 想学习本地存储
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,786
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

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]

×