Html5移动web应用开发(PhoneGap)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Html5移动web应用开发(PhoneGap)

  • 1,577 views
Uploaded on

Html5移动web应用开发(PhoneGap)...

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

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • thanks,有了初步的认识
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
1,577
On Slideshare
1,577
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
19
Comments
1
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 移动 Web 应用开发 - 浅谈 Phone Gap v1.0 框架
  • 2. 什么是 Phone Gap ?
  • 3. 什么是 Phone Gap ? 如何工作的?
  • 4. 目前 Phone Gap 优点和不足
    • 优点
    • 兼容性,跨平台
    • 完全符合 W3C 的标准
    • HTML5+CSS3+Javascript
    • 开发成本低
    • 缺点
    • 运行速度慢, UI 有明显的延迟
    • 程序不稳定
  • 5. WEB APP 界面布局介绍
  • 6. UI 布局介绍
    • HTML5 + CSS3 布局
    • 浏览器窗口的宽和高
    • 设备的宽和高
    • 设备的手持方向,横向还是竖向
    • 分辨率
    • CSS3 的 Media Queries
    • @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { }
    • HTML 中的写法
    • <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; />
  • 7. UI 布局介绍
    • Index.html
    • <!DOCTYPE HTML>
    • <html>
    • <head>
    • <title>PhoneGap</title>
    • <script type= &quot;text/javascript&quot; charset=&quot;utf-8&quot; src=&quot;phonegap.js&quot;></script>
    • </head>
    • <body >
    • ...........................................
    • </body>
    • </html>
  • 8. UI 布局介绍
    • 弹性布局特点
    • 对用户十分友好,自适应横屏,竖屏
    • 制作难度,兼容性因素
    • box-orient 布局
  • 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;} }
  • 12. 其它 :JQuery Mobile Jquery Mobile 简介
    • 是 jquery 在手机,和平板电脑设备上的版本
    • 完整统一的 jQuery 移动 UI 框架。支持全球主流的移动平台
    http://www.jquerymobile.com
  • 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
  • 16. Phone Gap API v1.0
    • Accelerometer 加速度计
    • Camera 相机
    • Capture 捕捉
    • Compass 指南针
    • Contacts 联系人
    • Device 设备
    • Events 活动
    File 文件 Geolocation 地理位置 Media 媒体 Network 网络 Notification 通知 Storage 存储 中文 AIP 接口说明
  • 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 函数
  • 20. Phone Gap 数据存储
    •     // 链接数据库     function onDeviceReady() {         var db = window. openDatabase (&quot; Database &quot;, &quot;1.0&quot;, &quot;PhoneGap Demo&quot;, 200000);         db.transaction(populateDB, errorCB, successCB);     }
    本地数据库操作 (Storage)
  • 21. 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, &quot;First row&quot;)');          tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, &quot;Second row&quot;)');     }
    本地数据库操作 (Storage)
  • 22. Phone Gap 数据存储
    •     // 执行数据库操作 ( 查询数据 ) function queryDB(tx) {     tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); }
    本地数据库操作 (Storage)
  • 23. Phone Gap 数据存储
    •     // Key Value 形式存储 window. localStorage .setItem(“key”, “value”); // 存储
    • var value = window. localStorage .getItem(“key”); // 获取
    • window. localStorage .removeItem(“key”); // 删除
    本地数据库操作 ( localStorage )
  • 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 + '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. 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]